-
- 
-
+
-
-
+
+
-
+
+
+
- {navList_left.map((item, index) => {
- return (
-
- {item.text}
-
- );
- })}
-
+ {navList_left.map((item, index) => {
+ return (
+
+ {item.text}
+
+ );
+ })}
+
- {navList_right.map((item, index) => {
- return (
-
- {item.icon}
- {item.text}
-
- );
- })}
-
);
};
diff --git a/web/src/pages/app/functions/mods/FunctionPanel/CreateModal/functionTemplates.ts b/web/src/pages/app/functions/mods/FunctionPanel/CreateModal/functionTemplates.ts
deleted file mode 100644
index b42da7f9c5..0000000000
--- a/web/src/pages/app/functions/mods/FunctionPanel/CreateModal/functionTemplates.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import { t } from "i18next";
-
-const functionTemplates = [
- {
- label: "hello laf",
- value: `import cloud from '@lafjs/cloud'
-
-export default async function (ctx: FunctionContext) {
- console.log('Hello World')
- return { data: 'hi, laf' }
-}
-`,
- },
- {
- label: t("database example"),
- value: `import cloud from '@lafjs/cloud'
-
-export default async function (ctx: FunctionContext) {
- const db = cloud.database()
-
- // insert data
- await db.collection('test').add({ name: "hello laf" })
-
- // get data
- const res = await db.collection('test').getOne()
- console.log(res)
-
- return res.data
-}
-`,
- },
- {
- label: t("upload example"),
- value: `import cloud from '@lafjs/cloud'
-import { S3 } from "@aws-sdk/client-s3"
-
-export default async function (ctx: FunctionContext) {
- // Create your bucket first
- const BUCKET = "kcqcau-test"
- const client = new S3({
- region: cloud.env.OSS_REGION,
- endpoint: cloud.env.OSS_EXTERNAL_ENDPOINT,
- credentials: {
- accessKeyId: cloud.env.OSS_ACCESS_KEY,
- secretAccessKey: cloud.env.OSS_ACCESS_SECRET,
- },
- forcePathStyle: true,
- })
-
- const file = ctx.files[0]
- console.log(file)
- const stream = require('fs').createReadStream(file.path)
-
- const res = await client.putObject({
- Bucket: BUCKET,
- Key: ctx.files[0].filename,
- Body: stream,
- ContentType: file.mimetype,
- })
- console.log(res)
- return res
-}
- `,
- },
- {
- label: t("ChatGPT example"),
- value: `import cloud from '@lafjs/cloud'
-const apiKey = cloud.env.API_KEY
-
-export default async function (ctx: FunctionContext) {
- const { ChatGPTAPI } = await import('chatgpt')
- const { body, response } = ctx
-
- // get chatgpt api
- let api = cloud.shared.get('api')
- if (!api) {
- api = new ChatGPTAPI({ apiKey })
- cloud.shared.set('api', api)
- }
-
- // set stream response type
- response.setHeader('Content-Type', 'application/octet-stream');
-
- // send message
- const res = await api.sendMessage(body.message, {
- onProgress: (partialResponse) => {
- if (partialResponse?.delta != undefined)
- response.write(partialResponse.delta)
- },
- parentMessageId: body.parentMessageId || ''
- })
-
- response.end("--!" + res.id)
-}
- `,
- },
-];
-
-export default functionTemplates;
diff --git a/web/src/pages/app/functions/mods/FunctionPanel/CreateModal/index.tsx b/web/src/pages/app/functions/mods/FunctionPanel/CreateModal/index.tsx
index b8578bbd5c..7ff9da242c 100644
--- a/web/src/pages/app/functions/mods/FunctionPanel/CreateModal/index.tsx
+++ b/web/src/pages/app/functions/mods/FunctionPanel/CreateModal/index.tsx
@@ -18,23 +18,20 @@ import {
useDisclosure,
VStack,
} from "@chakra-ui/react";
-import clsx from "clsx";
import { t } from "i18next";
import { debounce } from "lodash";
import { TextIcon } from "@/components/CommonIcon";
import InputTag from "@/components/InputTag";
-import { SUPPORTED_METHODS } from "@/constants";
+import { DEFAULT_CODE, SUPPORTED_METHODS } from "@/constants";
import { changeURL } from "@/utils/format";
import { useCreateFunctionMutation, useUpdateFunctionMutation } from "../../../service";
import useFunctionStore from "../../../store";
-import FuncTemplate from "../FunctionTemplate";
-
-import functionTemplates from "./functionTemplates";
import { TFunctionTemplate, TMethod } from "@/apis/typing";
-import TemplatePopOver from "@/pages/functionTemplate/Mods/TemplatePopover/TemplatePopover";
+import FunctionTemplate from "@/pages/functionTemplate";
+import TemplateCard from "@/pages/functionTemplate/Mods/TemplateCard/TemplateCard";
import { useGetRecommendFunctionTemplatesQuery } from "@/pages/functionTemplate/service";
import useGlobalStore from "@/pages/globalStore";
@@ -52,13 +49,14 @@ const CreateModal = (props: {
const isEdit = !!functionItem;
const navigate = useNavigate();
const [searchKey, setSearchKey] = useState("");
+ const [templateOpen, setTemplateOpen] = useState(false);
const defaultValues = {
name: functionItem?.name || "",
description: functionItem?.desc || "",
websocket: !!functionItem?.websocket,
methods: functionItem?.methods || ["GET", "POST"],
- code: functionItem?.source.code || aiCode || functionTemplates[0].value.trim() || "",
+ code: functionItem?.source.code || aiCode || DEFAULT_CODE || "",
tags: functionItem?.tags || [],
};
@@ -222,54 +220,15 @@ const CreateModal = (props: {
{
- toggleColorMode();
- window.dispatchEvent(new Event("ColorModeChange"));
- }}
- >
- {darkMode ?
- {userInfo?._id ? (
- <>
-
+ {navList_right.map((item, index) => {
+ return (
+
+ {item.icon}
+ {item.text}
+
+ );
+ })}
+
- ) : (
- {
+ toggleColorMode();
+ window.dispatchEvent(new Event("ColorModeChange"));
+ }}
+ >
+ {darkMode ?
-
-
- )}
+
-
-
-
+
+
+ ) : null}
{
- toggleColorMode();
- window.dispatchEvent(new Event("ColorModeChange"));
- }}
- >
- {darkMode ?
- {userInfo?._id ? (
- <>
-
{TemplateList.data?.data.list.map((item: TFunctionTemplate) => (
@@ -278,22 +237,15 @@ const CreateModal = (props: {
navigate(changeURL(`/recommended`));
}}
>
-
-
-
+ {
+ navigate(changeURL(`/${item._id}`));
+ setTemplateOpen(true);
+ }}
+ templateCategory="recommended"
+ isModal={true}
+ />
))}
{
- const currentURL = window.location.pathname;
- const lastIndex = currentURL.lastIndexOf("/");
- const newURL = currentURL.substring(0, lastIndex) + `/${item._id}`;
- navigate(newURL);
- }}
- >
-
-
-
- {
- e.currentTarget.style.outlineWidth = "2px";
- e.currentTarget.style.boxShadow =
- "0px 2px 4px rgba(0, 0, 0, 0.1), 0px 0px 0px 2px #66CBCA";
- }}
- onMouseLeave={(e) => {
- e.currentTarget.style.outlineWidth = "1px";
- e.currentTarget.style.boxShadow =
- "0px 2px 4px rgba(0, 0, 0, 0.1)";
- }}
- >
-
-
-
-
- {item.name}
-
-
- {item.description}
-
-
- {item.items.map((item: any) => {
- return (
-
-
- {item.name}
-
- );
- })}
-