From e6ba4b788e1f3e9bb1d8359d7654852d19a3c8b1 Mon Sep 17 00:00:00 2001 From: heheer <71265218+newfish-cmyk@users.noreply.github.com> Date: Thu, 14 Sep 2023 18:03:00 +0800 Subject: [PATCH] refactor(web): adjust editor fontsize & optimize function create modal (#1533) --- web/public/locales/en/translation.json | 4 +- web/public/locales/zh-CN/translation.json | 4 +- web/public/locales/zh/translation.json | 4 +- web/src/components/Editor/FunctionEditor.tsx | 2 +- web/src/constants/index.ts | 8 - web/src/hooks/useHotKey.ts | 2 +- .../CreateModal/functionTemplates.ts} | 0 .../mods/FunctionPanel/CreateModal/index.tsx | 150 +++++++----------- web/src/pages/customSetting.ts | 7 + web/src/pages/globalStore.ts | 1 - 10 files changed, 70 insertions(+), 112 deletions(-) rename web/src/pages/app/functions/mods/{EditorPanel/template.ts => FunctionPanel/CreateModal/functionTemplates.ts} (100%) diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json index fa44e5a9f7..35c17d53bb 100644 --- a/web/public/locales/en/translation.json +++ b/web/public/locales/en/translation.json @@ -89,7 +89,7 @@ "DeploySuccess": "Deploy successfully", "Fetch": "Fetch", "FetchSuccess": "Restore successfully", - "Description": "Function Description", + "Description": "Input Function Description Information", "EditFunction": "Edit Function", "Function": "Function", "FunctionList": "Functions", @@ -638,4 +638,4 @@ "NextPage": "Next Page", "LastPage": "Last Page", "FirstPage": "First Page" -} +} \ No newline at end of file diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json index 960de6fb29..2a20084b7d 100644 --- a/web/public/locales/zh-CN/translation.json +++ b/web/public/locales/zh-CN/translation.json @@ -89,7 +89,7 @@ "DeploySuccess": "发布成功", "Fetch": "拉取", "FetchSuccess": "恢复成功", - "Description": "函数描述", + "Description": "输入函数描述信息", "EditFunction": "编辑函数", "Function": "函数", "FunctionList": "函数列表", @@ -638,4 +638,4 @@ "NextPage": "下一页", "LastPage": "最后一页", "FirstPage": "第一页" -} +} \ No newline at end of file diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json index 0ad192eb4a..76aacf5904 100644 --- a/web/public/locales/zh/translation.json +++ b/web/public/locales/zh/translation.json @@ -89,7 +89,7 @@ "DeploySuccess": "发布成功", "Fetch": "拉取", "FetchSuccess": "恢复成功", - "Description": "函数描述", + "Description": "输入函数描述信息", "EditFunction": "编辑函数", "Function": "函数", "FunctionList": "函数列表", @@ -638,4 +638,4 @@ "NextPage": "下一页", "LastPage": "最后一页", "FirstPage": "第一页" -} +} \ No newline at end of file diff --git a/web/src/components/Editor/FunctionEditor.tsx b/web/src/components/Editor/FunctionEditor.tsx index f9e6f001e4..8546f6412b 100644 --- a/web/src/components/Editor/FunctionEditor.tsx +++ b/web/src/components/Editor/FunctionEditor.tsx @@ -159,7 +159,7 @@ function FunctionEditor(props: { formatOnPaste: true, overviewRulerLanes: 0, lineNumbersMinChars: 4, - fontSize: 13, + fontSize: 14, theme: colorMode === COLOR_MODE.dark ? "lafEditorThemeDark" : "lafEditorTheme", scrollBeyondLastLine: false, }); diff --git a/web/src/constants/index.ts b/web/src/constants/index.ts index ae72bd655a..8d66862a68 100644 --- a/web/src/constants/index.ts +++ b/web/src/constants/index.ts @@ -81,14 +81,6 @@ export const COLOR_MODE = { dark: "dark", }; -export const DEFAULT_CODE = `import cloud from '@lafjs/cloud' - -export default async function (ctx: FunctionContext) { - console.log('Hello World') - return { data: 'hi, laf' } -} -`; - export enum APP_SETTING_KEY { INFO = "info", ENV = "env", diff --git a/web/src/hooks/useHotKey.ts b/web/src/hooks/useHotKey.ts index 79d13d36f0..0f15f51b30 100644 --- a/web/src/hooks/useHotKey.ts +++ b/web/src/hooks/useHotKey.ts @@ -17,7 +17,7 @@ export function getDisplayString(str: string) { } export const DEFAULT_SHORTCUTS = { - send_request: [`${MODIFY_KEY.metaKey}+s`, `${MODIFY_KEY.metaKey}+r`], + send_request: [`${MODIFY_KEY.metaKey}+r`, `${MODIFY_KEY.metaKey}+s`], deploy: [`${MODIFY_KEY.metaKey}+p`], }; diff --git a/web/src/pages/app/functions/mods/EditorPanel/template.ts b/web/src/pages/app/functions/mods/FunctionPanel/CreateModal/functionTemplates.ts similarity index 100% rename from web/src/pages/app/functions/mods/EditorPanel/template.ts rename to web/src/pages/app/functions/mods/FunctionPanel/CreateModal/functionTemplates.ts 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 0ae7709e8a..51b600b046 100644 --- a/web/src/pages/app/functions/mods/FunctionPanel/CreateModal/index.tsx +++ b/web/src/pages/app/functions/mods/FunctionPanel/CreateModal/index.tsx @@ -3,10 +3,8 @@ import { Controller, useForm } from "react-hook-form"; import { useNavigate } from "react-router-dom"; import { Button, - Center, Checkbox, CheckboxGroup, - Divider, FormControl, FormErrorMessage, HStack, @@ -17,24 +15,24 @@ import { ModalFooter, ModalHeader, ModalOverlay, - Spinner, + Select, useDisclosure, VStack, } from "@chakra-ui/react"; import { t } from "i18next"; import { debounce } from "lodash"; -import { MoreTemplateIcon, TextIcon } from "@/components/CommonIcon"; +import { TextIcon } from "@/components/CommonIcon"; import InputTag from "@/components/InputTag"; -import { DEFAULT_CODE, SUPPORTED_METHODS } from "@/constants"; +import { SUPPORTED_METHODS } from "@/constants"; import { useCreateFunctionMutation, useUpdateFunctionMutation } from "../../../service"; import useFunctionStore from "../../../store"; -import { TFunctionTemplate, TMethod } from "@/apis/typing"; +import functionTemplates from "./functionTemplates"; + +import { TMethod } from "@/apis/typing"; import FunctionTemplate from "@/pages/functionTemplate"; -import TemplateCard from "@/pages/functionTemplate/Mods/TemplateCard"; -import { useGetRecommendFunctionTemplatesQuery } from "@/pages/functionTemplate/service"; import useTemplateStore from "@/pages/functionTemplate/store"; import useGlobalStore from "@/pages/globalStore"; @@ -60,7 +58,7 @@ const CreateModal = (props: { description: functionItem?.desc || "", websocket: !!functionItem?.websocket, methods: functionItem?.methods || ["GET", "POST"], - code: functionItem?.source?.code || aiCode || DEFAULT_CODE || "", + code: functionItem?.source?.code || aiCode || functionTemplates[0].value.trim() || "", tags: functionItem?.tags || [], }; @@ -88,34 +86,6 @@ const CreateModal = (props: { const createFunctionMutation = useCreateFunctionMutation(); const updateFunctionMutation = useUpdateFunctionMutation(); - const { isLoading, data: TemplateList } = useGetRecommendFunctionTemplatesQuery( - { - page: 1, - pageSize: 3, - keyword: searchKey, - type: "default", - asc: 1, - sort: null, - }, - { - enabled: isOpen && !isEdit, - }, - ); - - const InitialTemplateList = useGetRecommendFunctionTemplatesQuery( - { - page: 1, - pageSize: 3, - keyword: "", - type: "default", - asc: 1, - sort: null, - }, - { - enabled: !isOpen && !isEdit, - }, - ); - const onSubmit = async (data: any) => { let res: any = {}; if (isEdit && functionItem.name !== data.name) { @@ -162,7 +132,7 @@ const CreateModal = (props: { - + {isEdit ? t("FunctionPanel.EditFunction") : t("FunctionPanel.AddFunction")} @@ -227,7 +197,7 @@ const CreateModal = (props: { -
+
- + {isEdit || aiCode ? null : ( + +
+ {t("FunctionPanel.Code")} +
+ + + )} + +
+ {!(isEdit || aiCode) && ( + + )} + +
- {!isEdit && !aiCode && ( - <> - - -
-
- {t("Template.Recommended")} -
-
- {!isLoading ? ( - (TemplateList?.data.list.length > 0 - ? TemplateList?.data.list - : InitialTemplateList.data?.data.list - ).map((item: TFunctionTemplate) => ( -
{ - setTemplateOpen(true); - }} - > - -
- )) - ) : ( -
- - - -
- )} -
-
- -
-
- - - )} diff --git a/web/src/pages/customSetting.ts b/web/src/pages/customSetting.ts index 59ff377ba6..e9a2736408 100644 --- a/web/src/pages/customSetting.ts +++ b/web/src/pages/customSetting.ts @@ -46,6 +46,9 @@ type State = { position: { width: number; height: number }, ) => void; togglePanel: (pageId: page, panelId: panel) => void; + generalSettings: { + fontSize: number; + }; }; const useCustomSettingStore = create()( @@ -164,6 +167,10 @@ const useCustomSettingStore = create()( } }); }, + + generalSettings: { + fontSize: 14, + }, })), { diff --git a/web/src/pages/globalStore.ts b/web/src/pages/globalStore.ts index 8e608cb7a5..24fe5e9e63 100644 --- a/web/src/pages/globalStore.ts +++ b/web/src/pages/globalStore.ts @@ -115,7 +115,6 @@ const useGlobalStore = create()( }, setCurrentApp: (app) => { - localStorage.setItem("app", app?.appid || ""); set((state) => { state.currentApp = app;