From 125e321b537f2f310fee11312081321570adcd6e Mon Sep 17 00:00:00 2001 From: allence Date: Wed, 1 Feb 2023 16:01:47 +0800 Subject: [PATCH] fix: ui refactor --- web/public/locales/en/translation.json | 2 +- web/public/locales/zh-CN/translation.json | 5 +- web/public/locales/zh/translation.json | 2 +- web/src/chakraTheme.ts | 6 +- web/src/components/FileTypeIcon/index.tsx | 2 +- web/src/components/Grid/index.tsx | 2 +- web/src/components/MoreButton/index.tsx | 4 +- web/src/hooks/useFunctionCache.ts | 10 +--- web/src/pages/app/database/service.ts | 5 +- .../app/functions/mods/DebugPanel/index.tsx | 8 ++- .../app/functions/mods/DeployButton/index.tsx | 5 +- .../app/functions/mods/EditorPanel/index.tsx | 7 ++- .../functions/mods/FunctionPanel/index.tsx | 58 +++++++++++-------- .../storages/mods/StorageListPanel/index.tsx | 2 +- 14 files changed, 65 insertions(+), 53 deletions(-) diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json index 26918db85f..4f18eb5842 100644 --- 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 index dc5d61a3ce..169819cfee 100644 --- 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 index cbcb5ba074..ddf98be0e6 100644 --- 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 index 1bbbdd4475..e28951ee46 100644 --- 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 index 99d121efa3..d0e6527dcb 100644 --- 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 ( - + +
diff --git a/web/src/hooks/useFunctionCache.ts b/web/src/hooks/useFunctionCache.ts index 54525ad3d9..cf6dbe1175 100644 --- 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 index 169faa4575..a1ac065605 100644 --- 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 index cc681cd91d..efd30142bc 100644 --- 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() { ({queryParams.length}) )} - {runningMethod === SUPPORTED_METHODS.POST && ( + {HAS_BODY_PARAMS_METHODS.includes(runningMethod) && ( Body {Object.keys(bodyParams).length > 0 && ( @@ -199,7 +201,7 @@ export default function DebugPanel() { /> - {runningMethod === SUPPORTED_METHODS.POST && ( + {HAS_BODY_PARAMS_METHODS.includes(runningMethod) && ( { diff --git a/web/src/pages/app/functions/mods/DeployButton/index.tsx b/web/src/pages/app/functions/mods/DeployButton/index.tsx index 0322783e6b..75c7649474 100644 --- 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() { diff --git a/web/src/pages/app/functions/mods/EditorPanel/index.tsx b/web/src/pages/app/functions/mods/EditorPanel/index.tsx index 5238d76f60..03781e9f19 100644 --- 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() { {currentFunction?.name} {currentFunction?.id && - functionCache.getCache(currentFunction?.id) !== currentFunction?.source?.code && ( + functionCache.getCache(currentFunction?.id, currentFunction?.source?.code) !== + currentFunction?.source?.code && ( )} {currentFunction?.desc ? ( @@ -39,7 +40,7 @@ function EditorPanel() { - + @@ -51,7 +52,7 @@ function EditorPanel() { { 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 index add72a9409..e58a1f15ab 100644 --- 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() { {func?.name}
- - <> - -
-
- + + {functionCache.getCache(func?.id, func?.source?.code) !== func?.source?.code && ( + + )} + + <> + +
+
+ +
+ {t("Edit")}
- {t("Edit")} -
- - { - await deleteFunctionMutation.mutateAsync(func); - }} - headerText={String(t("Delete"))} - bodyText={String(t("FunctionPanel.DeleteConfirm"))} - > -
-
- + + { + await deleteFunctionMutation.mutateAsync(func); + }} + headerText={String(t("Delete"))} + bodyText={String(t("FunctionPanel.DeleteConfirm"))} + > +
+
+ +
+ {t("Delete")}
- {t("Delete")} -
- - - + + + + ); })} diff --git a/web/src/pages/app/storages/mods/StorageListPanel/index.tsx b/web/src/pages/app/storages/mods/StorageListPanel/index.tsx index e2a423b989..a2ad6620c6 100644 --- 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() { {storage.name}
-
+
{storage?.policy}