labring · maslow · Feb 1, 2023 · Feb 1, 2023
diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json
@@ -93,7 +93,7 @@
     "SystemDependence": "Built-In",
     "Value": "Value",
     "isSupport": "Whether to support",
-    "FunctionNameRule": "Function names can only start with _ or English"
+    "FunctionNameRule": "Function names can only contain English or _"
   },
   "HomePanel": {
     "APP": "Android or iOS app",

diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json
@@ -81,7 +81,7 @@
     "DependenceVersion": "依赖版本",
     "DependenceTip": "请输入依赖包名",
     "Select": "已选择",
-    "FunctionNameRule": "函数名只能以 _ 或英文开头"
+    "FunctionNameRule": "函数名只能包含英文或 _"
   },
   "TriggerPanel": {
     "Trigger": "触发器",
@@ -182,5 +182,6 @@
   "SaveAndRestart": "保存并重启",
   "DataEntry": {
     "CreateError": "字段不能为空"
-  }
+  },
+  "EditTip": "已修改,未发布"
 }
diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json
@@ -93,7 +93,7 @@
     "SystemDependence": "内置依赖",
     "Value": "值",
     "isSupport": "是否支持",
-    "FunctionNameRule": "函数名只能以 _ 或英文开头"
+    "FunctionNameRule": "函数名只能包含英文或 _"
   },
   "HomePanel": {
     "APP": "Android or iOS 应用",

diff --git a/web/src/chakraTheme.ts b/web/src/chakraTheme.ts
@@ -12,11 +12,11 @@ const Tag = defineMultiStyleConfig({
     sm: definePartsStyle({
       container: {
         width: "60px",
-        height: "22px",
+        height: "18px",
         px: "1",
         py: "1",
-        fontSize: "10px",
-        fontWeight: "400",
+        zoom: "0.8",
+        fontWeight: "600",
         borderRadius: "4px",
       },
     }),

diff --git a/web/src/components/FileTypeIcon/index.tsx b/web/src/components/FileTypeIcon/index.tsx
@@ -133,7 +133,7 @@ export default function FileTypeIcon(props: { type: string }) {
       );
     default:
       return (
-        <Icon viewBox="0 0 16 20" fontSize={20} className="align-middle">
+        <Icon viewBox="0 0 16 20" fontSize={14} className="align-middle">
           <path
             d="M10 0H2C0.9 0 0.0100002 0.9 0.0100002 2L0 18C0 19.1 0.89 20 1.99 20H14C15.1 20 16 19.1 16 18V6L10 0ZM2 18V2H9V7H14V18H2Z"
             fill="#B17DDA"

diff --git a/web/src/components/Grid/index.tsx b/web/src/components/Grid/index.tsx
@@ -35,7 +35,7 @@ function Col(props: {
     <div
       className={clsx(
         "flex flex-col space-y-2 h-full",
-        style?.width ? "flex-none" : "flex-grow",
+        style?.width ? "flex-none" : "flex-grow flex-1 overflow-hidden",
         className,
       )}
       style={style}

diff --git a/web/src/components/MoreButton/index.tsx b/web/src/components/MoreButton/index.tsx
@@ -13,7 +13,7 @@ export default function MoreButton(props: {
   const { children, isHidden, maxWidth } = props;
   const { isOpen, onOpen, onClose } = useDisclosure();
   return (
-    <div className={clsx("flex group-hover:inline ", { hidden: isHidden })}>
+    <div className={clsx("flex group-hover:visible ", isHidden ? "invisible" : "visible")}>
       <Popover
         isOpen={isOpen}
         onOpen={onOpen}
@@ -23,7 +23,7 @@ export default function MoreButton(props: {
       >
         <IconWrap
           size={25}
-          className="text-grayIron-600 hover:bg-[#f0f9f9]"
+          className="text-grayIron-600 hover:bg-[#f0f9f9] -mr-2"
           tooltip={t("moreOperations").toString()}
         >
           <PopoverTrigger>

diff --git a/web/src/hooks/useFunctionCache.ts b/web/src/hooks/useFunctionCache.ts
@@ -1,14 +1,8 @@
-import useFunctionStore from "@/pages/app/functions/store";
-
 function useFunctionCache() {
   const CACHE_KEY_PREFIX = "$cached_function@";
 
-  const currentFunction = useFunctionStore((state) => state.currentFunction);
-
-  function getCache(functionId: string): string {
-    return (
-      localStorage.getItem(CACHE_KEY_PREFIX + functionId) || currentFunction?.source?.code || ""
-    );
+  function getCache(functionId: string, _default: string = ""): string {
+    return localStorage.getItem(CACHE_KEY_PREFIX + functionId) || _default;
   }
 
   function setCache(functionId: string, value: string) {

diff --git a/web/src/pages/app/database/service.ts b/web/src/pages/app/database/service.ts
@@ -119,7 +119,10 @@ export const useAddDataMutation = (config?: { onSuccess: (data: any) => void })
 
   return useMutation(
     async (values: any) => {
-      const result = await db.collection(currentDB?.name!).add({ ...values });
+      const result = await db.collection(currentDB?.name!).add(values, {
+        // if the input values is an array, the default is batch insertion
+        multi: Array.isArray(values),
+      });
       return result;
     },
     {

diff --git a/web/src/pages/app/functions/mods/DebugPanel/index.tsx b/web/src/pages/app/functions/mods/DebugPanel/index.tsx
@@ -18,7 +18,7 @@ import { keyBy, mapValues } from "lodash";
 
 import { Row } from "@/components/Grid";
 import Panel from "@/components/Panel";
-import { Pages, SUPPORTED_METHODS } from "@/constants";
+import { Pages } from "@/constants";
 
 import { useCompileMutation } from "../../service";
 import useFunctionStore from "../../store";
@@ -34,6 +34,8 @@ import useGlobalStore from "@/pages/globalStore";
 
 const PANEL_HEIGHT = "calc(100vh - 500px)";
 
+const HAS_BODY_PARAMS_METHODS: (TMethod | undefined)[] = ["POST", "PUT", "PATCH", "DELETE"];
+
 export default function DebugPanel() {
   const { getFunctionUrl, currentFunction, setCurrentRequestId } = useFunctionStore(
     (state) => state,
@@ -166,7 +168,7 @@ export default function DebugPanel() {
                             <span className="ml-1">({queryParams.length})</span>
                           )}
                         </Tab>
-                        {runningMethod === SUPPORTED_METHODS.POST && (
+                        {HAS_BODY_PARAMS_METHODS.includes(runningMethod) && (
                           <Tab>
                             Body
                             {Object.keys(bodyParams).length > 0 && (
@@ -199,7 +201,7 @@ export default function DebugPanel() {
                           />
                         </TabPanel>
 
-                        {runningMethod === SUPPORTED_METHODS.POST && (
+                        {HAS_BODY_PARAMS_METHODS.includes(runningMethod) && (
                           <TabPanel px={2} py={3}>
                             <BodyParamsTab
                               onChange={(values) => {

diff --git a/web/src/pages/app/functions/mods/DeployButton/index.tsx b/web/src/pages/app/functions/mods/DeployButton/index.tsx
@@ -82,7 +82,10 @@ export default function DeployButton() {
             <ModalBody borderBottom={"1px"} borderBottomColor="gray.200">
               <CommonDiffEditor
                 original={store.currentFunction?.source?.code}
-                modified={functionCache.getCache(store.currentFunction?.id)}
+                modified={functionCache.getCache(
+                  store.currentFunction?.id,
+                  store.currentFunction?.source?.code,
+                )}
               />
             </ModalBody>
 

diff --git a/web/src/pages/app/functions/mods/EditorPanel/index.tsx b/web/src/pages/app/functions/mods/EditorPanel/index.tsx
@@ -27,7 +27,8 @@ function EditorPanel() {
             <span className="font-bold text-lg">{currentFunction?.name}</span>
             <FunctionDetailPopOver />
             {currentFunction?.id &&
-              functionCache.getCache(currentFunction?.id) !== currentFunction?.source?.code && (
+              functionCache.getCache(currentFunction?.id, currentFunction?.source?.code) !==
+                currentFunction?.source?.code && (
                 <span className="flex-none inline-block w-2 h-2 rounded-full bg-warn-700"></span>
               )}
             {currentFunction?.desc ? (
@@ -39,7 +40,7 @@ function EditorPanel() {
 
           <HStack spacing={1}>
             <CopyText text={getFunctionUrl()}>
-              <Input minW={"200px"} size="sm" readOnly value={getFunctionUrl()} />
+              <Input minW={"260px"} size="sm" readOnly value={getFunctionUrl()} />
             </CopyText>
 
             <DeployButton />
@@ -51,7 +52,7 @@ function EditorPanel() {
         <FunctionEditor
           className="flex-grow"
           path={currentFunction?.id || ""}
-          value={functionCache.getCache(currentFunction!.id)}
+          value={functionCache.getCache(currentFunction!.id, currentFunction!.source?.code)}
           onChange={(value) => {
             updateFunctionCode(currentFunction, value || "");
             functionCache.setCache(currentFunction!.id, value || "");

diff --git a/web/src/pages/app/functions/mods/FunctionPanel/index.tsx b/web/src/pages/app/functions/mods/FunctionPanel/index.tsx
@@ -5,7 +5,7 @@
 import { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { AddIcon, DeleteIcon, EditIcon } from "@chakra-ui/icons";
-import { Input } from "@chakra-ui/react";
+import { HStack, Input } from "@chakra-ui/react";
 import { t } from "i18next";
 
 import { TriggerIcon } from "@/components/CommonIcon";
@@ -24,12 +24,15 @@ import TriggerModal from "../TriggerModal";
 import CreateModal from "./CreateModal";
 
 import { TFunction } from "@/apis/typing";
+import useFunctionCache from "@/hooks/useFunctionCache";
 import useGlobalStore from "@/pages/globalStore";
 
 export default function FunctionList() {
   const { setCurrentFunction, currentFunction, setAllFunctionList, allFunctionList } =
     useFunctionStore((store) => store);
 
+  const functionCache = useFunctionCache();
+
   const [keywords, setKeywords] = useState("");
 
   const { currentApp } = useGlobalStore();
@@ -105,32 +108,37 @@ export default function FunctionList() {
                   <FileTypeIcon type={FileType.ts} />
                   <span className="ml-2 font-medium text-black">{func?.name}</span>
                 </div>
-                <MoreButton isHidden={func.name !== currentFunction?.name}>
-                  <>
-                    <CreateModal functionItem={func}>
-                      <div className="text-grayIron-600">
-                        <div className="text-grayModern-900 w-[20px] h-[20px] text-center pl-1">
-                          <EditIcon />
+                <HStack spacing={1}>
+                  {functionCache.getCache(func?.id, func?.source?.code) !== func?.source?.code && (
+                    <span className="flex-none inline-block w-1 h-1 rounded-full bg-warn-700"></span>
+                  )}
+                  <MoreButton isHidden={func.name !== currentFunction?.name}>
+                    <>
+                      <CreateModal functionItem={func}>
+                        <div className="text-grayIron-600">
+                          <div className="text-grayModern-900 w-[20px] h-[20px] text-center pl-1">
+                            <EditIcon />
+                          </div>
+                          {t("Edit")}
                         </div>
-                        {t("Edit")}
-                      </div>
-                    </CreateModal>
-                    <ConfirmButton
-                      onSuccessAction={async () => {
-                        await deleteFunctionMutation.mutateAsync(func);
-                      }}
-                      headerText={String(t("Delete"))}
-                      bodyText={String(t("FunctionPanel.DeleteConfirm"))}
-                    >
-                      <div className="text-grayIron-600">
-                        <div className="text-grayModern-900 w-[20px] h-[20px] text-center">
-                          <DeleteIcon />
+                      </CreateModal>
+                      <ConfirmButton
+                        onSuccessAction={async () => {
+                          await deleteFunctionMutation.mutateAsync(func);
+                        }}
+                        headerText={String(t("Delete"))}
+                        bodyText={String(t("FunctionPanel.DeleteConfirm"))}
+                      >
+                        <div className="text-grayIron-600">
+                          <div className="text-grayModern-900 w-[20px] h-[20px] text-center">
+                            <DeleteIcon />
+                          </div>
+                          {t("Delete")}
                         </div>
-                        {t("Delete")}
-                      </div>
-                    </ConfirmButton>
-                  </>
-                </MoreButton>
+                      </ConfirmButton>
+                    </>
+                  </MoreButton>
+                </HStack>
               </SectionList.Item>
             );
           })}

diff --git a/web/src/pages/app/storages/mods/StorageListPanel/index.tsx b/web/src/pages/app/storages/mods/StorageListPanel/index.tsx
@@ -78,7 +78,7 @@ export default function StorageListPanel() {
                       <FileTypeIcon type={FileType.bucket} />
                       <span className="ml-2 text-base text-black">{storage.name}</span>
                     </div>
-                    <div className="flex justify-between">
+                    <div className="flex items-center">
                       <Tag size="sm" className="w-16 justify-center" variant={storage?.policy}>
                         {storage?.policy}
                       </Tag>