fix(web): change ui & add infomation display (#1296)

labring · Jun 24, 2023 · 91518bb · 91518bb
1 parent 08b2385
commit 91518bb
Show file tree

Hide file tree

Showing 19 changed files with 418 additions and 250 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -22,6 +22,7 @@
   },
   "cSpell.words": [
     "aarch",
+    "Adora",
     "alicloud",
     "alipay",
     "alisms",
@@ -130,5 +131,7 @@
   "i18n-ally.namespace": false,
   "i18n-ally.pathMatcher": "{locale}/translation.json",
   "i18n-ally.keystyle": "nested",
-  "i18n-ally.keysInUse": ["description.part2_whatever"]
+  "i18n-ally.keysInUse": [
+    "description.part2_whatever"
+  ]
 }
diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json
@@ -112,7 +112,7 @@
     "PromptDescription": "Use natural language to describe your needs, laf will help you generate code, for example: help me write a hello world, return {hello: 'laf AI'}",
     "CreateWithAITip": "Create functions with AI assistance",
     "CreateNow": "Create Now",
-    "CreateFromTemplate": "Create from Template",
+    "CreateFromTemplate": "Templates",
     "getCodeOnline": "Retrieve the latest released online code",
     "versionHistory": "Version History",
     "Restore": "Restore"
@@ -494,9 +494,15 @@
     "public": "public",
     "updatedAt": "Updated at",
     "useTemplate": "use template",
-    "UsedSuccessfully": "Use successfully"
+    "UsedSuccessfully": "Use successfully",
+    "EmptyTemplate": "Template Empty",
+    "AddMore": "Add More",
+    "Save": "Save"
   },
   "Create function template success": "Create function template successfully",
   "Publish": "release",
-  "Update function template success": "Update function template succeeded"
-}
+  "Update function template success": "Update function template succeeded",
+  "Today": "Today",
+  "Yesterday": "Yesterday",
+  "DaysAgo": " Days Ago"
+}
diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json
@@ -473,7 +473,10 @@
     "Please enter template name": "请输入模板名",
     "EditTemplate": "编辑模板",
     "DeleteTemplate": "删除模板",
-    "FunctionListEmpty": "请至少添加一个函数"
+    "FunctionListEmpty": "请至少添加一个函数",
+    "EmptyTemplate": "暂无模板",
+    "AddMore": "继续添加",
+    "Save": "保存"
   },
   "Fee": "费用",
   "PleaseCloseApplicationFirst": "请先关闭应用",
@@ -498,5 +501,8 @@
     "CPU Threshold": "CPU 阈值"
   },
   "Storage Threshold": "内存阈值",
-  "State": "状态"
+  "State": "状态",
+  "Yesterday": "昨天",
+  "Today": "今天",
+  "DaysAgo": " 天前"
 }
diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json
@@ -473,7 +473,10 @@
     "Please enter template name": "请输入模板名",
     "EditTemplate": "编辑模板",
     "DeleteTemplate": "删除模板",
-    "FunctionListEmpty": "请至少添加一个函数"
+    "FunctionListEmpty": "请至少添加一个函数",
+    "EmptyTemplate": "暂无模板",
+    "AddMore": "继续添加",
+    "Save": "保存"
   },
   "Fee": "费用",
   "PleaseCloseApplicationFirst": "请先关闭应用",
@@ -498,5 +501,8 @@
     "Number of Instances": "实例数",
     "CPU Threshold": "CPU 阈值"
   },
-  "Storage Threshold": "内存阈值"
+  "Storage Threshold": "内存阈值",
+  "Yesterday": "昨天",
+  "Today": "今天",
+  "DaysAgo": " 天前"
 }
diff --git a/web/src/components/CommonIcon/index.tsx b/web/src/components/CommonIcon/index.tsx
@@ -103,6 +103,12 @@ export const HeartIcon = createIcon({
   d: "M6.77409 12.9999L5.80742 12.1333C4.6852 11.1222 3.75742 10.2499 3.02409 9.5166C2.29076 8.78327 1.70742 8.12482 1.27409 7.54127C0.840755 6.95816 0.538089 6.42216 0.366089 5.93327C0.194089 5.44438 0.107866 4.94438 0.107422 4.43327C0.107422 3.38882 0.457422 2.5166 1.15742 1.8166C1.85742 1.1166 2.72964 0.766602 3.77409 0.766602C4.35187 0.766602 4.90187 0.888824 5.42409 1.13327C5.94631 1.37771 6.39631 1.72216 6.77409 2.1666C7.15187 1.72216 7.60187 1.37771 8.12409 1.13327C8.64631 0.888824 9.19631 0.766602 9.77409 0.766602C10.8185 0.766602 11.6908 1.1166 12.3908 1.8166C13.0908 2.5166 13.4408 3.38882 13.4408 4.43327C13.4408 4.94438 13.3545 5.44438 13.1821 5.93327C13.0096 6.42216 12.707 6.95816 12.2741 7.54127C11.8408 8.12482 11.2574 8.78327 10.5241 9.5166C9.79076 10.2499 8.86298 11.1222 7.74076 12.1333L6.77409 12.9999ZM6.77409 11.1999C7.84076 10.2444 8.71853 9.42482 9.40742 8.74127C10.0963 8.05771 10.6408 7.46349 11.0408 6.9586C11.4408 6.45282 11.7185 6.0026 11.8741 5.60794C12.0296 5.21327 12.1074 4.82171 12.1074 4.43327C12.1074 3.7666 11.8852 3.21105 11.4408 2.7666C10.9963 2.32216 10.4408 2.09993 9.77409 2.09993C9.25187 2.09993 8.76853 2.24705 8.32409 2.54127C7.87964 2.83549 7.57409 3.2106 7.40742 3.6666H6.14076C5.97409 3.21105 5.66853 2.83593 5.22409 2.54127C4.77964 2.2466 4.29631 2.09949 3.77409 2.09993C3.10742 2.09993 2.55187 2.32216 2.10742 2.7666C1.66298 3.21105 1.44076 3.7666 1.44076 4.43327C1.44076 4.82216 1.51853 5.21394 1.67409 5.6086C1.82964 6.00327 2.10742 6.45327 2.50742 6.9586C2.90742 7.46394 3.45187 8.05838 4.14076 8.74193C4.82964 9.42549 5.70742 10.2448 6.77409 11.1999Z",
 });
 
+export const TimeIcon = createIcon({
+  displayName: "TimeIcon",
+  viewBox: "0 0 13 12",
+  d: "M6.25391 12C5.42057 12 4.64013 11.8418 3.91257 11.5253C3.18457 11.2084 2.55124 10.7804 2.01257 10.2413C1.47346 9.70267 1.04546 9.06933 0.728573 8.34133C0.412128 7.61378 0.253906 6.83333 0.253906 6C0.253906 5.16667 0.412128 4.386 0.728573 3.658C1.04546 2.93044 1.47346 2.29711 2.01257 1.758C2.55124 1.21933 3.18457 0.791556 3.91257 0.474667C4.64013 0.158222 5.42057 0 6.25391 0C7.16502 0 8.02902 0.194444 8.84591 0.583333C9.66235 0.972222 10.3539 1.52222 10.9206 2.23333V0.666667H12.2539V4.66667H8.25391V3.33333H10.0872C9.63168 2.71111 9.07057 2.22222 8.40391 1.86667C7.73724 1.51111 7.02057 1.33333 6.25391 1.33333C4.95391 1.33333 3.85124 1.786 2.94591 2.69133C2.04013 3.59711 1.58724 4.7 1.58724 6C1.58724 7.3 2.04013 8.40267 2.94591 9.308C3.85124 10.2138 4.95391 10.6667 6.25391 10.6667C7.42057 10.6667 8.43991 10.2889 9.31191 9.53333C10.1844 8.77778 10.6984 7.82222 10.8539 6.66667H12.2206C12.0539 8.18889 11.4012 9.45822 10.2626 10.4747C9.12346 11.4916 7.78724 12 6.25391 12ZM8.12057 8.8L5.58724 6.26667V2.66667H6.92057V5.73333L9.05391 7.86667L8.12057 8.8Z",
+});
+
 export const FilledHeartIcon = createIcon({
   displayName: "FilledHeartIcon",
   viewBox: "0 0 15 13",

diff --git a/web/src/layouts/Basic.tsx b/web/src/layouts/Basic.tsx
@@ -14,7 +14,7 @@ export default function BasicLayout() {
 
   return (
     <div>
-      <Header bg="" />
+      <Header width="" />
       <div className="pb-10">
         {loading ? (
           <Center style={{ minHeight: 300 }}>

diff --git a/web/src/layouts/Header/index.tsx b/web/src/layouts/Header/index.tsx
@@ -13,8 +13,8 @@ import UserSetting from "./UserSetting";
 import useGlobalStore from "@/pages/globalStore";
 import Language from "@/pages/homepage/language";
 
-const Header = (props: { bg: string }) => {
-  const { bg } = props;
+const Header = (props: { width: string }) => {
+  const { width } = props;
   const [stars, setStars] = useState<string | null>(null);
   const { t } = useTranslation();
   const { userInfo } = useGlobalStore((state) => state);
@@ -77,7 +77,7 @@ const Header = (props: { bg: string }) => {
     <div
       className={clsx(
         "flex h-[52px] w-full justify-between font-medium",
-        darkMode ? "" : { [bg]: !!bg },
+        { [width]: !!width },
         darkMode ? "" : "text-grayModern-600",
       )}
     >

diff --git a/web/src/layouts/Template.tsx b/web/src/layouts/Template.tsx
@@ -18,15 +18,21 @@ export default function TemplateLayout() {
   }, [init]);
 
   return (
-    <div className={clsx("min-h-screen flex-grow", darkMode ? "" : "bg-white")}>
-      <Header bg="bg-gray-100" />
-      {loading ? (
-        <Center style={{ minHeight: 300 }}>
-          <Spinner />
-        </Center>
-      ) : (
-        <Outlet />
-      )}
+    <div className={clsx("min-h-screen", darkMode ? "" : "bg-white")}>
+      <div className={clsx("flex justify-center", darkMode ? "" : "bg-gray-100")}>
+        <Header width="max-w-screen-xl" />
+      </div>
+      <div className="flex justify-center">
+        <div className="w-full max-w-screen-xl">
+          {loading ? (
+            <Center style={{ minHeight: 300 }}>
+              <Spinner />
+            </Center>
+          ) : (
+            <Outlet />
+          )}
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/web/src/pages/app/functions/mods/FunctionPanel/FunctionTemplate/index.tsx b/web/src/pages/app/functions/mods/FunctionPanel/FunctionTemplate/index.tsx
@@ -25,7 +25,7 @@ const FuncTemplate = (props: { children?: React.ReactElement }) => {
 
       <Modal isOpen={isOpen} onClose={onClose} size="7xl">
         <ModalOverlay />
-        <ModalContent minH={"90%"} m={"auto"}>
+        <ModalContent minH={"90%"} maxW={"90%"} m={"auto"}>
           <ModalCloseButton />
           <ModalBody>
             <FunctionTemplate />

diff --git a/web/src/pages/functionTemplate/CreateFuncTemplate/Mods/AddFunctionModal.tsx b/web/src/pages/functionTemplate/CreateFuncTemplate/Mods/AddFunctionModal.tsx
@@ -28,38 +28,78 @@ const AddFunctionModal = (props: {
   setFunctionList?: React.Dispatch<React.SetStateAction<any[]>>;
   setCurrentFunction?: React.Dispatch<React.SetStateAction<any>>;
   currentFunction?: any;
+  isEdit?: boolean;
 }) => {
   const {
     children = null,
     functionList,
     setFunctionList,
-    setCurrentFunction,
+    // setCurrentFunction,
     currentFunction,
+    isEdit,
   } = props;
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { showError } = useGlobalStore();
-  const defaultValues = {
-    name: "",
-    methods: ["GET", "POST"],
-    description: "",
-  };
+  const defaultValues = isEdit
+    ? {
+        name: currentFunction?.name,
+        methods: currentFunction?.methods,
+        description: currentFunction?.desc,
+      }
+    : {
+        name: "",
+        methods: ["GET", "POST"],
+        description: "",
+      };
+
+  const defaultCode = `import cloud from '@lafjs/cloud'
+
+export default async function (ctx: FunctionContext) {
+  console.log('Hello World')
+  return { data: 'hi, laf' }
+}
+`;
+
   const {
     handleSubmit,
     register,
     reset,
     setFocus,
     control,
     formState: { errors },
-  } = useForm();
+  } = useForm({
+    defaultValues,
+  });
 
   const onSubmit = (data: any) => {
-    if (functionList?.some((item) => item.name === data.name)) {
-      showError(t("Template.FunctionNameExist"));
-    } else if (setFunctionList && setCurrentFunction) {
-      setFunctionList([...(functionList || []), { ...data, source: { code: "" } }]);
-      setCurrentFunction({ ...data, source: { code: "" } });
-      console.log("AddFunctionModal", currentFunction);
-      onClose();
+    const updateData = {
+      name: data.name,
+      methods: data.methods,
+      desc: data.description,
+    };
+
+    if (setFunctionList) {
+      if (isEdit) {
+        setFunctionList(
+          functionList?.map((item) => {
+            if (item.name === currentFunction.name) {
+              return { ...updateData, source: { code: currentFunction.source.code } };
+            }
+            return item;
+          }) || [],
+        );
+        onClose();
+      } else {
+        if (functionList?.some((item) => item.name === data.name)) {
+          showError(t("Template.FunctionNameExist"));
+          return;
+        }
+        setFunctionList([
+          ...(functionList || []),
+          { ...updateData, source: { code: defaultCode } },
+        ]);
+        onClose();
+      }
     }
   };
 
@@ -68,12 +108,6 @@ const AddFunctionModal = (props: {
       {children &&
         React.cloneElement(children, {
           onClick: () => {
-            if (functionList && setCurrentFunction) {
-              setCurrentFunction(
-                functionList.find((item) => item.name === currentFunction?.name) || null,
-              );
-            }
-            console.log(currentFunction);
             onOpen();
             reset(defaultValues);
             setTimeout(() => {
@@ -84,11 +118,18 @@ const AddFunctionModal = (props: {
       <Modal isOpen={isOpen} onClose={onClose} size="2xl">
         <ModalOverlay />
         <ModalContent>
-          <ModalHeader>{t("FunctionPanel.AddFunction")}</ModalHeader>
+          <ModalHeader>
+            {isEdit ? t("FunctionPanel.EditFunction") : t("FunctionPanel.AddFunction")}
+          </ModalHeader>
           <ModalCloseButton />
 
-          <ModalBody className="">
-            <div className="mb-3 flex h-12 w-full items-center border-b-2">
+          <ModalBody>
+            <div
+              className={clsx(
+                "mb-3 flex h-12 w-full items-center border-b-2",
+                isEdit && "rounded-md bg-gray-100",
+              )}
+            >
               <input
                 {...register("name", {
                   required: true,
@@ -101,6 +142,7 @@ const AddFunctionModal = (props: {
                 placeholder={String(t("FunctionPanel.FunctionNameTip"))}
                 className="h-8 w-10/12 border-l-2 border-primary-600 bg-transparent pl-4 text-2xl font-medium"
                 style={{ outline: "none", boxShadow: "none" }}
+                disabled={isEdit}
               />
             </div>
             {errors.name && (