refactor(web): adjust editor fontsize & optimize function create modal (

#1533)
labring · Sep 14, 2023 · e6ba4b7 · e6ba4b7
1 parent 5366201
commit e6ba4b7
Show file tree

Hide file tree

Showing 10 changed files with 70 additions and 112 deletions.
diff --git 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"
-}
+}
diff --git 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": "第一页"
-}
+}
diff --git 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": "第一页"
-}
+}
diff --git 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
@@ -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
@@ -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/...pp/functions/mods/EditorPanel/template.ts → ...ionPanel/CreateModal/functionTemplates.ts b/...pp/functions/mods/EditorPanel/template.ts → ...ionPanel/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
@@ -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: {
 
       <Modal isOpen={isOpen} onClose={onClose} size="3xl">
         <ModalOverlay />
-        <ModalContent m="auto" className="!pb-12">
+        <ModalContent m="auto" className="!pb-2">
           <ModalHeader>
             {isEdit ? t("FunctionPanel.EditFunction") : t("FunctionPanel.AddFunction")}
           </ModalHeader>
@@ -227,7 +197,7 @@ const CreateModal = (props: {
                 </HStack>
               </FormControl>
               <FormControl>
-                <div className="mb-2 flex w-full items-center border-b-2 border-transparent pb-1 focus-within:border-grayModern-200">
+                <div className="flex w-full items-center border-b-2 border-transparent pb-1 focus-within:border-grayModern-200">
                   <TextIcon fontSize={16} color={"gray.300"} />
                   <input
                     id="description"
@@ -239,64 +209,54 @@ const CreateModal = (props: {
                 </div>
               </FormControl>
 
-              <Button
-                type="submit"
-                onClick={handleSubmit(onSubmit)}
-                isLoading={updateFunctionMutation.isLoading || createFunctionMutation.isLoading}
-                className="!h-9 w-full !rounded !bg-primary-600 !font-semibold hover:!bg-primary-700"
-              >
-                {!isEdit ? t("CreateFunction") : t("EditFunction")}
-              </Button>
+              {isEdit || aiCode ? null : (
+                <FormControl className="flex">
+                  <div className="flex w-20 items-center text-base font-medium">
+                    {t("FunctionPanel.Code")}
+                  </div>
+                  <Select
+                    {...register("code")}
+                    id="code"
+                    placeholder=""
+                    variant="filled"
+                    className="!h-8 !bg-lafWhite-400"
+                  >
+                    {functionTemplates.map((item) => {
+                      return (
+                        <option value={item.value.trim()} key={item.label}>
+                          {item.label}
+                        </option>
+                      );
+                    })}
+                  </Select>
+                </FormControl>
+              )}
+
+              <div className="!mt-4 flex w-full items-center justify-end">
+                {!(isEdit || aiCode) && (
+                  <Button
+                    variant="text"
+                    className="mr-2 !h-9 w-32"
+                    onClick={() => {
+                      setTemplateOpen(true);
+                      setShowTemplateItem(false);
+                    }}
+                    isLoading={createFunctionMutation.isLoading}
+                  >
+                    {t("FunctionPanel.CreateFromTemplate")}
+                  </Button>
+                )}
+                <Button
+                  type="submit"
+                  onClick={handleSubmit(onSubmit)}
+                  isLoading={updateFunctionMutation.isLoading || createFunctionMutation.isLoading}
+                  className="!h-9 w-32 !bg-primary-600 !font-semibold hover:!bg-primary-700"
+                >
+                  {!isEdit ? t("CreateFunction") : t("EditFunction")}
+                </Button>
+              </div>
             </VStack>
           </ModalBody>
-          {!isEdit && !aiCode && (
-            <>
-              <Divider />
-              <ModalFooter className="!px-16">
-                <div className="mt-2 w-full">
-                  <div className="pb-3 text-lg font-medium text-grayModern-700">
-                    {t("Template.Recommended")}
-                  </div>
-                  <div className="mb-11 flex w-full">
-                    {!isLoading ? (
-                      (TemplateList?.data.list.length > 0
-                        ? TemplateList?.data.list
-                        : InitialTemplateList.data?.data.list
-                      ).map((item: TFunctionTemplate) => (
-                        <section
-                          className="h-28 w-1/3 px-1.5 py-1"
-                          key={item._id}
-                          onClick={() => {
-                            setTemplateOpen(true);
-                          }}
-                        >
-                          <TemplateCard template={item} isModal={true} />
-                        </section>
-                      ))
-                    ) : (
-                      <Center className="h-28 w-full">
-                        <span>
-                          <Spinner />
-                        </span>
-                      </Center>
-                    )}
-                  </div>
-                  <div>
-                    <button
-                      className="flex w-full cursor-pointer items-center justify-center bg-primary-100 py-2 text-primary-600"
-                      onClick={() => {
-                        setTemplateOpen(true);
-                        setShowTemplateItem(false);
-                      }}
-                    >
-                      <MoreTemplateIcon className="mr-2 text-lg" />
-                      {t("FunctionPanel.CreateFromTemplate")}
-                    </button>
-                  </div>
-                </div>
-              </ModalFooter>
-            </>
-          )}
         </ModalContent>
       </Modal>
 

diff --git 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<State>()(
@@ -164,6 +167,10 @@ const useCustomSettingStore = create<State>()(
             }
           });
         },
+
+        generalSettings: {
+          fontSize: 14,
+        },
       })),
 
       {

diff --git a/web/src/pages/globalStore.ts b/web/src/pages/globalStore.ts
@@ -115,7 +115,6 @@ const useGlobalStore = create<State>()(
       },
 
       setCurrentApp: (app) => {
-        localStorage.setItem("app", app?.appid || "");
         set((state) => {
           state.currentApp = app;