From eccd9121c055ac3900545985edbd56de44274c00 Mon Sep 17 00:00:00 2001 From: kongwy <1419906205@qq.com> Date: Thu, 2 Feb 2023 19:34:31 +0800 Subject: [PATCH] feat(web): fix UI bugs (#717) --- web/public/locales/en/translation.json | 10 +- web/public/locales/zh-CN/translation.json | 6 +- web/public/locales/zh/translation.json | 8 +- web/src/chakraTheme.ts | 28 ++- web/src/components/Editor/JsonEditor.tsx | 5 +- web/src/components/FileTypeIcon/index.tsx | 64 +++-- web/src/components/InputTag/index.tsx | 45 ++++ web/src/components/Pagination/index.tsx | 2 +- .../components/SectionList/index.module.scss | 13 +- .../mods/DataPanel/index.tsx | 57 ++--- .../database/CollectionListPanel/index.tsx | 6 +- .../app/database/PolicyDataList/index.tsx | 104 ++++---- .../app/database/PolicyListPanel/index.tsx | 7 +- .../app/database/RightComponent/EditBox.tsx | 8 +- .../app/database/mods/AddDataModal/index.tsx | 112 +++++++++ .../app/database/mods/AddRulesModal/index.tsx | 155 ++++++++++++ .../AddRulesModal}/policyTemplate.ts | 0 web/src/pages/app/database/service.ts | 8 +- .../mods/DebugPanel/BodyParamsTab/index.tsx | 1 - .../mods/DebugPanel/HeaderParamsTab/index.tsx | 2 +- .../mods/DebugPanel/QueryParamsTab/index.tsx | 2 +- .../app/functions/mods/DebugPanel/index.tsx | 229 ++++++++---------- .../AddDependenceModal/index.tsx | 68 +++--- .../functions/mods/DependencePanel/index.tsx | 4 +- .../app/functions/mods/DeployButton/index.tsx | 2 +- .../EditorPanel/FunctionDetailPopOver.tsx | 19 +- .../mods/FunctionPanel/CreateModal/index.tsx | 17 +- .../functions/mods/FunctionPanel/index.tsx | 131 ++++++++-- web/src/pages/app/logs/index.tsx | 2 +- web/src/pages/app/mods/SideBar/Icons.tsx | 20 +- .../pages/app/mods/SideBar/index.module.scss | 5 +- web/src/pages/app/mods/SideBar/index.tsx | 24 +- web/src/pages/app/setting/index.tsx | 2 +- .../mods/CreateWebsiteModal/index.tsx | 85 +++++++ .../app/storages/mods/FileList/index.tsx | 36 +-- .../app/storages/mods/PathLink/index.tsx | 4 +- .../storages/mods/StorageListPanel/index.tsx | 4 +- .../app/storages/mods/UploadButton/index.tsx | 2 +- 38 files changed, 909 insertions(+), 388 deletions(-) create mode 100644 web/src/components/InputTag/index.tsx create mode 100644 web/src/pages/app/database/mods/AddDataModal/index.tsx create mode 100644 web/src/pages/app/database/mods/AddRulesModal/index.tsx rename web/src/pages/app/database/{PolicyDataList => mods/AddRulesModal}/policyTemplate.ts (100%) create mode 100644 web/src/pages/app/storages/mods/CreateWebsiteModal/index.tsx diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json index 4f18eb5842..3b1d48a237 100644 --- a/web/public/locales/en/translation.json +++ b/web/public/locales/en/translation.json @@ -88,6 +88,7 @@ "InterfaceDebug": "Interface Debugging", "Methods": "Request Method", "Name": "Parameter Name", + "Tags": "Tags", "SearchPlaceholder": "Please enter the function name query", "Select": "chosen", "SystemDependence": "Built-In", @@ -146,8 +147,8 @@ "ReadWrite": "ReadWrite", "SearchBucket": "Enter the bucket name to search", "Size": "Size", - "Storage": "Cloud Storage", - "StorageNameTip": "Please enter a cloud storage name", + "Storage": "Storage", + "StorageNameTip": "Please ensure that the current bucket has been cleared and enter the cloud storage name", "Success": "uploaded successfully", "Time": "Update Time", "TimeTip": "Temporary link, valid for 15 minutes", @@ -160,7 +161,8 @@ "EditBucket": "Edit Bucket", "DeleteBucket": "Delete Buckets", "BucketNameRule": "Can only contain lowercase English, numbers, and the beginning and end cannot be numbers or -", - "BucketNamePlaceholder": "bucket-name" + "BucketNamePlaceholder": "bucket-name", + "StorageList": "Cloud Storage List" }, "TriggerPanel": { "AddTrigger": "Add Trigger", @@ -184,4 +186,4 @@ "DataEntry": { "CreateError": "field cannot be empty" } -} +} \ 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 169819cfee..f9ea58f8cb 100644 --- a/web/public/locales/zh-CN/translation.json +++ b/web/public/locales/zh-CN/translation.json @@ -62,6 +62,7 @@ "FunctionName": "函数名", "FunctionNameTip": "函数唯一标识, 如 get-user", "Methods": "请求方法", + "Tags": "标签", "Description": "函数描述", "Code": "函数模板", "isSupport": "是否支持", @@ -117,7 +118,8 @@ "EditBucket": "编辑Bucket", "DeleteBucket": "删除Bucket", "BucketName": "Bucket名称", - "Storage": "云存储", + "Storage": "存储", + "StorageList": "云存储列表", "Policy": "权限", "Private": "私有", "Readonly": "公共读", @@ -136,7 +138,7 @@ "FolderName": "文件夹名称", "NameTip": "请输入文件夹名称", "DeleteConfirm": "当前操作将会永久删除云存储", - "StorageNameTip": "请输入云存储名称", + "StorageNameTip": "请确保当前Bucket已经清空,并输入云存储名称", "SearchBucket": "输入bucket名进行搜索", "All": "总容量", "Used": "已使用", diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json index ddf98be0e6..e48d54000c 100644 --- a/web/public/locales/zh/translation.json +++ b/web/public/locales/zh/translation.json @@ -88,6 +88,7 @@ "InterfaceDebug": "接口调试", "Methods": "请求方法", "Name": "参数名", + "Tags": "标签", "SearchPlaceholder": "请输入函数名查询", "Select": "已选择", "SystemDependence": "内置依赖", @@ -146,8 +147,9 @@ "ReadWrite": "公共读写", "SearchBucket": "输入bucket名进行搜索", "Size": "大小", - "Storage": "云存储", - "StorageNameTip": "请输入云存储名称", + "Storage": "存储", + "StorageList": "云存储列表", + "StorageNameTip": "请确保当前Bucket已经清空,并输入云存储名称", "Success": "上传成功", "Time": "更新时间", "TimeTip": "临时链接,有效期15分钟", @@ -184,4 +186,4 @@ "DataEntry": { "CreateError": "字段不能为空" } -} +} \ No newline at end of file diff --git a/web/src/chakraTheme.ts b/web/src/chakraTheme.ts index e28951ee46..98985eed31 100644 --- a/web/src/chakraTheme.ts +++ b/web/src/chakraTheme.ts @@ -43,6 +43,24 @@ const Tag = defineMultiStyleConfig({ color: "warn.700", }, }), + inputTag: definePartsStyle({ + container: { + backgroundColor: "lafWhite.600", + borderColor: "lafWhite.600", + borderWidth: 1, + color: "grayModern.900", + height: "28px", + }, + }), + inputTagActive: definePartsStyle({ + container: { + backgroundColor: "lafWhite.600", + borderColor: "primary.500", + borderWidth: 1, + color: "primary.500", + height: "28px", + }, + }), }, }); @@ -211,6 +229,8 @@ const Table = { parts: ["th", "td"], th: { border: "none", + fontWeight: "400", + color: "grayModern.500", }, td: { border: "none", @@ -219,10 +239,14 @@ const Table = { border: { parts: ["th", "td"], th: { - border: "1px solid #dddddd", + borderWidth: 1, + borderColor: "grayModern.100", + background: "lafWhite.300", }, td: { - border: "1px solid #dddddd", + borderWidth: 1, + borderColor: "grayModern.100", + background: "lafWhite.300", }, }, }, diff --git a/web/src/components/Editor/JsonEditor.tsx b/web/src/components/Editor/JsonEditor.tsx index 867c46d09b..767642ea5f 100644 --- a/web/src/components/Editor/JsonEditor.tsx +++ b/web/src/components/Editor/JsonEditor.tsx @@ -8,9 +8,10 @@ monaco?.editor.defineTheme("JsonEditorTheme", { inherit: true, rules: [], colors: { + "editor.background": "#ffffff00", "editorLineNumber.foreground": "#aaa", - "editorOverviewRuler.border": "#fff", - "editor.lineHighlightBackground": "#fff", + "editorOverviewRuler.border": "#ffffff00", + "editor.lineHighlightBackground": "#e0f2f2", "scrollbarSlider.background": "#E8EAEC", "editorIndentGuide.activeBackground": "#ddd", "editorIndentGuide.background": "#eee", diff --git a/web/src/components/FileTypeIcon/index.tsx b/web/src/components/FileTypeIcon/index.tsx index d0e6527dcb..07d8b50347 100644 --- a/web/src/components/FileTypeIcon/index.tsx +++ b/web/src/components/FileTypeIcon/index.tsx @@ -28,6 +28,7 @@ export const FileType = { db: "db", bucket: "bucket", policy: "policy", + website: "website", }; export default function FileTypeIcon(props: { type: string }) { @@ -47,42 +48,30 @@ export default function FileTypeIcon(props: { type: string }) { case FileType.ts: return ( - - - - - - - - - - + + + ); case FileType.npm: return ( - + + ); case FileType.db: return ( - - + + ); @@ -95,12 +84,9 @@ export default function FileTypeIcon(props: { type: string }) { case FileType.bucket: return ( - + - + @@ -109,10 +95,22 @@ export default function FileTypeIcon(props: { type: string }) { ); - + case FileType.website: + return ( + + + + + ); case FileType.folder: return ( - + + + any }) { + const { value, onChange } = props; + const [inputV, setInputV] = useState(""); + const handleEnter = (e: any) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + const input = inputV.trim(); + if (input.trim() !== "" && !value.some((x) => x === input)) { + onChange([...value, input]); + } + setInputV(""); + } + }; + const handleClose = (item: string) => { + onChange(value.filter((name) => name !== item)); + }; + return ( + <> + handleEnter(e)} + onChange={(e) => setInputV(e.target.value)} + /> + {value.length > 0 ? ( +
+ {value.map((item) => ( + + {item} + { + handleClose(item); + }} + /> + + ))} +
+ ) : null} + + ); +} diff --git a/web/src/components/Pagination/index.tsx b/web/src/components/Pagination/index.tsx index a53b7bea5c..872523bb2f 100644 --- a/web/src/components/Pagination/index.tsx +++ b/web/src/components/Pagination/index.tsx @@ -21,7 +21,7 @@ export default function Pagination(props: { return ( - + {t("Total")}: {total} diff --git a/web/src/components/SectionList/index.module.scss b/web/src/components/SectionList/index.module.scss index 8065e6d181..ecb6be7aea 100644 --- a/web/src/components/SectionList/index.module.scss +++ b/web/src/components/SectionList/index.module.scss @@ -15,6 +15,10 @@ vertical-align: middle; } + svg { + fill: #9ca2a8; + } + &.small { height: 32px; } @@ -22,12 +26,11 @@ &:hover, &.active { background-color: rgba(0, 169, 157, 0.05); - color: #008c7f; - } + color: var(--chakra-colors-primary-700); - &.active { - background-color: rgba(0, 169, 157, 0.05); - ; + svg { + fill: var(--chakra-colors-primary-700); + } } } } \ No newline at end of file diff --git a/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx b/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx index 53ed55102b..1b90fa65a7 100644 --- a/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx +++ b/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx @@ -1,7 +1,7 @@ import { useMemo, useState } from "react"; import SyntaxHighlighter from "react-syntax-highlighter"; -import { AddIcon, Search2Icon } from "@chakra-ui/icons"; -import { Button, HStack, Input, InputGroup, InputLeftElement } from "@chakra-ui/react"; +import { Search2Icon } from "@chakra-ui/icons"; +import { HStack, Input, InputGroup, InputLeftElement } from "@chakra-ui/react"; import { t } from "i18next"; import { debounce } from "lodash"; @@ -10,14 +10,10 @@ import Pagination from "@/components/Pagination"; import Panel from "@/components/Panel"; import getPageInfo from "@/utils/getPageInfo"; +import AddDataModal from "../../../mods/AddDataModal/index"; import RightPanelEditBox from "../../../RightComponent/EditBox"; import RightPanelList from "../../../RightComponent/List"; -import { - useAddDataMutation, - useDeleteDataMutation, - useEntryDataQuery, - useUpdateDataMutation, -} from "../../../service"; +import { useDeleteDataMutation, useEntryDataQuery, useUpdateDataMutation } from "../../../service"; import useDBMStore from "../../../store"; import useGlobalStore from "@/pages/globalStore"; @@ -48,14 +44,23 @@ export default function DataPanel() { [setQueryData], ); - const entryDataQuery = useEntryDataQuery({ ...queryData }, () => { - setCurrentData({}); + const entryDataQuery = useEntryDataQuery({ ...queryData }, (data: any) => { + if (data?.data.length > 0) { + setCurrentData(data.data[0]); + } else { + setCurrentData(undefined); + } }); - const addDataMutation = useAddDataMutation(); + const updateDataMutation = useUpdateDataMutation(); const deleteDataMutation = useDeleteDataMutation({ onSuccess() { - setCurrentData(undefined); + setQueryData((pre: any) => { + return { + ...pre, + page: 1, + }; + }); }, }); @@ -67,11 +72,7 @@ export default function DataPanel() { globalStore.showError(t("DataEntry.CreateError")); return; } - if (currentData?._id) { - await updateDataMutation.mutateAsync(params); - } else { - await addDataMutation.mutateAsync(params); - } + await updateDataMutation.mutateAsync(params); } catch (error) { globalStore.showError(error?.toString()); return; @@ -82,18 +83,7 @@ export default function DataPanel() { <>
- + {}} />
{ event?.preventDefault(); @@ -142,18 +132,19 @@ export default function DataPanel() { deleteRuleMutation={deleteDataMutation} component={(item: any) => { return ( - + {JSON.stringify(item, null, 2)} ); }} /> -
+
{ diff --git a/web/src/pages/app/database/CollectionListPanel/index.tsx b/web/src/pages/app/database/CollectionListPanel/index.tsx index c39522a388..d7dd65bdf3 100644 --- a/web/src/pages/app/database/CollectionListPanel/index.tsx +++ b/web/src/pages/app/database/CollectionListPanel/index.tsx @@ -1,10 +1,10 @@ import { useState } from "react"; import { useTranslation } from "react-i18next"; -import { BsTable } from "react-icons/bs"; import { AddIcon, CopyIcon, Search2Icon } from "@chakra-ui/icons"; import { Input, InputGroup, InputLeftElement } from "@chakra-ui/react"; import CopyText from "@/components/CopyText"; +import FileTypeIcon from "@/components/FileTypeIcon"; import IconWrap from "@/components/IconWrap"; import MoreButton from "@/components/MoreButton"; import Panel from "@/components/Panel"; @@ -78,8 +78,8 @@ export default function CollectionListPanel() { >
- - {db.name} + + {db.name}
(undefined); const [record, setRecord] = useState(JSON.stringify(policyTemplate)); - const [collectionName, setCollectionName] = useState(collectionListQuery?.data?.data[0]?.name); - + const globalStore = useGlobalStore(); const store = useDBMStore((state) => state); - const rulesListQuery = useRulesListQuery((data: any) => { if (data?.data.length === 0) { - setCurrentData({}); - setCollectionName(collectionListQuery?.data?.data[0]?.name); + setCurrentData(undefined); + } else if (currentData === undefined) { + setCurrentData(data.data[0]); } }); + + useEffect(() => { + setCurrentData(undefined); + }, [store.currentPolicy, setCurrentData]); + const deleteRuleMutation = useDeleteRuleMutation(() => { + setCurrentData(undefined); + rulesListQuery.refetch(); + }); + const updateRulesMutation = useUpdateRulesMutation((data) => { rulesListQuery.refetch(); }); - const createRulesMutation = useCreateRulesMutation(); - const updateRulesMutation = useUpdateRulesMutation(); const handleData = async () => { - if (currentData?.id) { - await updateRulesMutation.mutateAsync({ collection: collectionName, value: record }); - } else { - await createRulesMutation.mutateAsync({ collectionName: collectionName, value: record }); + try { + JSON.parse(record); + await updateRulesMutation.mutateAsync({ + collection: currentData.collectionName, + value: record, + }); + rulesListQuery.refetch(); + } catch (error) { + globalStore.showError(error?.toString()); } - rulesListQuery.refetch(); }; return ( <> - + /> - {t("CollectionPanel.RulesNum")}：{rulesListQuery?.data?.data?.length || 0} + {t("CollectionPanel.RulesNum")} : {rulesListQuery?.data?.data?.length || 0}
@@ -84,10 +81,10 @@ export default function PolicyDataList() { <>
- {t("CollectionPanel.Collection")}：{item.collectionName} + {t("CollectionPanel.Collection")}:{item.collectionName}
- + {JSON.stringify(item.value, null, 2)} @@ -95,37 +92,20 @@ export default function PolicyDataList() { }} /> - {t("CollectionPanel.SelectCollection")} + {t("CollectionPanel.SelectCollection")}: {currentData?.collectionName} - {t("CollectionPanel.RulesContent")} -
+
{ setRecord(values!); }} diff --git a/web/src/pages/app/database/PolicyListPanel/index.tsx b/web/src/pages/app/database/PolicyListPanel/index.tsx index 72110ad293..d04309517a 100644 --- a/web/src/pages/app/database/PolicyListPanel/index.tsx +++ b/web/src/pages/app/database/PolicyListPanel/index.tsx @@ -15,6 +15,8 @@ import AddPolicyModal from "../mods/AddPolicyModal"; import { useDeletePolicyMutation, usePolicyListQuery } from "../service"; import useDBMStore from "../store"; export default function PolicyListPanel() { + const deletePolicyMutation = useDeletePolicyMutation(); + const store = useDBMStore((state) => state); const policyQuery = usePolicyListQuery((data) => { if (data.data.length === 0) { store.setCurrentPolicy(undefined); @@ -22,9 +24,6 @@ export default function PolicyListPanel() { store.setCurrentPolicy(data?.data[0]); } }); - - const deletePolicyMutation = useDeletePolicyMutation(); - const store = useDBMStore((state) => state); return ( { @@ -52,7 +51,7 @@ export default function PolicyListPanel() { }} >
-
+
{item.name}
diff --git a/web/src/pages/app/database/RightComponent/EditBox.tsx b/web/src/pages/app/database/RightComponent/EditBox.tsx index 335f5911da..d1b1bedfcb 100644 --- a/web/src/pages/app/database/RightComponent/EditBox.tsx +++ b/web/src/pages/app/database/RightComponent/EditBox.tsx @@ -2,18 +2,20 @@ import React from "react"; import { Button, Text } from "@chakra-ui/react"; import { t } from "i18next"; const RightPanelEditBox: React.FC<{ + show?: boolean; children?: React.ReactNode; className?: string; isLoading: boolean; title?: React.ReactNode | string; onSave: () => void; }> = (props) => { - const { title, isLoading, children, onSave } = props; + const { title, isLoading, children, onSave, show } = props; return (
diff --git a/web/src/pages/app/database/mods/AddDataModal/index.tsx b/web/src/pages/app/database/mods/AddDataModal/index.tsx new file mode 100644 index 0000000000..bbd3033a9d --- /dev/null +++ b/web/src/pages/app/database/mods/AddDataModal/index.tsx @@ -0,0 +1,112 @@ +import { useState } from "react"; +import { Controller, useForm } from "react-hook-form"; +import { AddIcon } from "@chakra-ui/icons"; +import { + Button, + FormControl, + FormErrorMessage, + FormLabel, + Modal, + ModalBody, + ModalCloseButton, + ModalContent, + ModalFooter, + ModalHeader, + ModalOverlay, + useDisclosure, + VStack, +} from "@chakra-ui/react"; +import { t } from "i18next"; + +import JsonEditor from "@/components/Editor/JsonEditor"; + +import { useAddDataMutation } from "../../service"; +import useDBMStore from "../../store"; + +const AddDataModal = (props: { onSuccessSubmit: () => void }) => { + type FormData = { + value: string; + }; + const store = useDBMStore((state) => state); + const { handleSubmit, control, reset } = useForm({}); + + const addDataMutation = useAddDataMutation(); + const [error, setError] = useState(""); + const onSubmit = async (data: any) => { + let params = {}; + try { + params = JSON.parse(data.value); + if (Object.keys(params).length === 0) { + setError(String(t("DataEntry.CreateError"))); + return; + } + setError(""); + await addDataMutation.mutateAsync(params); + props.onSuccessSubmit(); + onClose(); + } catch (errors) { + setError(errors?.toString()); + return; + } + }; + + const { isOpen, onOpen, onClose } = useDisclosure(); + + return ( + <> + + + + + + {t("CollectionPanel.AddData")} + + +

{}

+ + + {error} + + ( +
+ +
+ )} + /> + + + + + + + + + + ); +}; + +AddDataModal.displayName = "AddDataModal"; + +export default AddDataModal; diff --git a/web/src/pages/app/database/mods/AddRulesModal/index.tsx b/web/src/pages/app/database/mods/AddRulesModal/index.tsx new file mode 100644 index 0000000000..b2ff47bc2e --- /dev/null +++ b/web/src/pages/app/database/mods/AddRulesModal/index.tsx @@ -0,0 +1,155 @@ +import { useState } from "react"; +import { Controller, useForm } from "react-hook-form"; +import { AddIcon } from "@chakra-ui/icons"; +import { + Button, + FormControl, + FormErrorMessage, + FormLabel, + Modal, + ModalBody, + ModalCloseButton, + ModalContent, + ModalFooter, + ModalHeader, + ModalOverlay, + Select, + useDisclosure, + VStack, +} from "@chakra-ui/react"; +import { t } from "i18next"; + +import JsonEditor from "@/components/Editor/JsonEditor"; + +import { useCollectionListQuery, useCreateRulesMutation } from "../../service"; +import useDBMStore from "../../store"; + +import policyTemplate from "./policyTemplate"; + +const AddRulesModal = (props: { onSuccessSubmit: (data: any) => void }) => { + type FormData = { + collectionName: string; + value: string; + }; + const store = useDBMStore((state) => state); + const { + register, + handleSubmit, + setFocus, + control, + reset, + formState: { errors }, + } = useForm({}); + + const createRulesMutation = useCreateRulesMutation(); + const collectionListQuery = useCollectionListQuery(); + const [parseError, setParseError] = useState(""); + const [error, setError] = useState(""); + + const onSubmit = async (data: any) => { + try { + JSON.parse(data.value); + setParseError(""); + } catch (errors) { + setParseError(errors?.toString()); + return; + } + try { + const res = await createRulesMutation.mutateAsync(data); + props.onSuccessSubmit(res.data); + onClose(); + } catch (errors) { + setError(errors?.toString()); + return; + } + }; + + const { isOpen, onOpen, onClose } = useDisclosure(); + + return ( + <> + + + + + + {t("Add") + t("CollectionPanel.Policy")} + + + +

{error}

+ + + {t("CollectionPanel.SelectCollection")} + + + + {errors.collectionName && errors.collectionName.message} + + + + + {t("CollectionPanel.RulesContent")} + {parseError} + ( +
+ +
+ )} + /> + + + + + + + + + + ); +}; + +AddRulesModal.displayName = "AddRulesModal"; + +export default AddRulesModal; diff --git a/web/src/pages/app/database/PolicyDataList/policyTemplate.ts b/web/src/pages/app/database/mods/AddRulesModal/policyTemplate.ts similarity index 100% rename from web/src/pages/app/database/PolicyDataList/policyTemplate.ts rename to web/src/pages/app/database/mods/AddRulesModal/policyTemplate.ts diff --git a/web/src/pages/app/database/service.ts b/web/src/pages/app/database/service.ts index a1ac065605..c1000cb2f2 100644 --- a/web/src/pages/app/database/service.ts +++ b/web/src/pages/app/database/service.ts @@ -38,7 +38,7 @@ export const useCollectionListQuery = (config?: { onSuccess: (data: any) => void ); }; -export const useEntryDataQuery = (params: any, onSuccess: () => void) => { +export const useEntryDataQuery = (params: any, onSuccess: (data: any) => void) => { const { currentDB } = useDBMStore(); const { db } = useDB(); return useQuery( @@ -59,7 +59,7 @@ export const useEntryDataQuery = (params: any, onSuccess: () => void) => { // 获取数据总数 const { total } = await db.collection(currentDB?.name).where(query).count(); - onSuccess && onSuccess(); + onSuccess && onSuccess(res); return { list: res.data, total, page, limit }; }, { @@ -299,7 +299,7 @@ export const useCreateRulesMutation = (onSuccess?: () => void) => { ); }; -export const useUpdateRulesMutation = (onSuccess?: () => void) => { +export const useUpdateRulesMutation = (onSuccess?: (data: any) => void) => { const { currentPolicy } = useDBMStore(); const globalStore = useGlobalStore(); return useMutation( @@ -311,7 +311,7 @@ export const useUpdateRulesMutation = (onSuccess?: () => void) => { if (data.error) { globalStore.showError(data.error); } else { - onSuccess && onSuccess(); + onSuccess && onSuccess(data.data); } }, }, diff --git a/web/src/pages/app/functions/mods/DebugPanel/BodyParamsTab/index.tsx b/web/src/pages/app/functions/mods/DebugPanel/BodyParamsTab/index.tsx index 5f768adeab..6a47f52d50 100644 --- a/web/src/pages/app/functions/mods/DebugPanel/BodyParamsTab/index.tsx +++ b/web/src/pages/app/functions/mods/DebugPanel/BodyParamsTab/index.tsx @@ -5,7 +5,6 @@ function BodyParamsTab(props: { onChange(values: string): void }) { return ( { try { const jsonValues = JSON.parse(values || "{}"); diff --git a/web/src/pages/app/functions/mods/DebugPanel/HeaderParamsTab/index.tsx b/web/src/pages/app/functions/mods/DebugPanel/HeaderParamsTab/index.tsx index 9faeea77a1..d7c9316ade 100644 --- a/web/src/pages/app/functions/mods/DebugPanel/HeaderParamsTab/index.tsx +++ b/web/src/pages/app/functions/mods/DebugPanel/HeaderParamsTab/index.tsx @@ -39,7 +39,7 @@ function HeaderParamsTab(props: { onChange(values: Params[]): void }) {
- +
diff --git a/web/src/pages/app/functions/mods/DebugPanel/QueryParamsTab/index.tsx b/web/src/pages/app/functions/mods/DebugPanel/QueryParamsTab/index.tsx index c90241b1d5..2d4786f8c5 100644 --- a/web/src/pages/app/functions/mods/DebugPanel/QueryParamsTab/index.tsx +++ b/web/src/pages/app/functions/mods/DebugPanel/QueryParamsTab/index.tsx @@ -39,7 +39,7 @@ function HeaderParamsTab(props: { onChange(values: Params[]): void }) {
-
{t("FunctionPanel.Name")}
+
diff --git a/web/src/pages/app/functions/mods/DebugPanel/index.tsx b/web/src/pages/app/functions/mods/DebugPanel/index.tsx index efd30142bc..e3f38cda5b 100644 --- a/web/src/pages/app/functions/mods/DebugPanel/index.tsx +++ b/web/src/pages/app/functions/mods/DebugPanel/index.tsx @@ -32,15 +32,12 @@ import useFunctionCache from "@/hooks/useFunctionCache"; import useHotKey, { DEFAULT_SHORTCUTS } from "@/hooks/useHotKey"; 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, ); - const globalStore = useGlobalStore((state) => state); const functionCache = useFunctionCache(); @@ -76,7 +73,7 @@ export default function DebugPanel() { setIsLoading(true); try { const compileRes = await compileMutation.mutateAsync({ - code: functionCache.getCache(currentFunction!.id), + code: functionCache.getCache(currentFunction!.id, currentFunction!.source?.code), name: currentFunction!.name, }); @@ -106,137 +103,120 @@ export default function DebugPanel() { return ( <> - - - - - - - {t("FunctionPanel.InterfaceDebug")} - - - {/* 历史请求 */} - - - - -
-
- {t("FunctionPanel.Methods")} - { + setRunningMethod(e.target.value as TMethod); + }} + > + {currentFunction.methods?.map((item: string) => { + return ( + + ); + })} + + + - -
-
- - - - Parameters - {queryParams.length > 0 && ( - ({queryParams.length}) - )} - - {HAS_BODY_PARAMS_METHODS.includes(runningMethod) && ( - - Body - {Object.keys(bodyParams).length > 0 && ( - ({Object.keys(bodyParams).length}) - )} - + {t("FunctionPanel.Debug")} + + +
+
+ + + + Parameters + {queryParams.length > 0 && ( + ({queryParams.length}) )} - + + {HAS_BODY_PARAMS_METHODS.includes(runningMethod) && ( - Headers - {headerParams.length > 0 && ( - ({headerParams.length}) + Body + {Object.keys(bodyParams).length > 0 && ( + ({Object.keys(bodyParams).length}) )} - - - - { - setQueryParams(values); - }} - /> - + )} - {HAS_BODY_PARAMS_METHODS.includes(runningMethod) && ( - - { - setBodyParams(values); - }} - /> - + + Headers + {headerParams.length > 0 && ( + ({headerParams.length}) )} - - + + + + { + setQueryParams(values); }} - > - { - setHeaderParams(values); + /> + + + {HAS_BODY_PARAMS_METHODS.includes(runningMethod) && ( + + { + setBodyParams(values); }} /> - - -
+ )} + + + { + setHeaderParams(values); + }} + /> + + +
- - {/* to be continued... */} - - - - - + + + {/* to be continued... */} + + + +
@@ -248,10 +228,7 @@ export default function DebugPanel() {
) : null} {runningResData ? ( - + {JSON.stringify(runningResData, null, 2)} ) : null} diff --git a/web/src/pages/app/functions/mods/DependencePanel/AddDependenceModal/index.tsx b/web/src/pages/app/functions/mods/DependencePanel/AddDependenceModal/index.tsx index 4b5041ed69..da3465cb47 100644 --- a/web/src/pages/app/functions/mods/DependencePanel/AddDependenceModal/index.tsx +++ b/web/src/pages/app/functions/mods/DependencePanel/AddDependenceModal/index.tsx @@ -43,7 +43,7 @@ const AddDependenceModal = () => { const globalStore = useGlobalStore((state) => state); const [checkList, setCheckList] = useState([]); const [name, setName] = useState(""); - const [clickItem, setClickItem] = useState(""); + const [clickItem, setClickItem] = useState({ package: "", loading: false }); const [list, setList] = useState([]); const [isEdit, setIsEdit] = useState(false); const [isShowChecked, setIsShowChecked] = useState(false); @@ -84,14 +84,15 @@ const AddDependenceModal = () => { setList(list); }); - usePackageVersionsQuery(clickItem, (versions: string[]) => { + usePackageVersionsQuery(clickItem.package, (versions: string[]) => { const newList: TDependenceItem[] = (isEdit ? packageList : list).map( (item: TDependenceItem) => { - if (item.package.name === clickItem) { + if (item.package.name === clickItem.package) { item.versions = versions; if (!isEdit) { - syncDataToCheckList(clickItem, item); + syncDataToCheckList(clickItem.package, item); } + setClickItem({ ...clickItem, loading: false }); } return item; }, @@ -176,7 +177,9 @@ const AddDependenceModal = () => { key={packageItem.package.name} className="group" onClick={() => { - if (packageItem.versions.length === 0) setClickItem(packageItem.package.name); + if (packageItem.versions.length === 0 && !clickItem.loading) { + setClickItem({ package: packageItem.package.name, loading: true }); + } }} > {isEdit ? ( @@ -205,30 +208,37 @@ const AddDependenceModal = () => { )} - +
+ {clickItem.package === packageItem.package.name && clickItem.loading ? ( + + ) : null} + +
); })} diff --git a/web/src/pages/app/functions/mods/DependencePanel/index.tsx b/web/src/pages/app/functions/mods/DependencePanel/index.tsx index 225fe8a3bb..87865fca36 100644 --- a/web/src/pages/app/functions/mods/DependencePanel/index.tsx +++ b/web/src/pages/app/functions/mods/DependencePanel/index.tsx @@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next"; import { CloseIcon } from "@chakra-ui/icons"; import { Badge, Center, Tab, TabList, TabPanel, TabPanels, Tabs, Tooltip } from "@chakra-ui/react"; +import FileTypeIcon, { FileType } from "@/components/FileTypeIcon"; import Panel from "@/components/Panel"; import SectionList from "@/components/SectionList"; @@ -68,7 +69,8 @@ export default function DependenceList() { onClick={() => {}} className="group" > -
+ +
+ + + + + 创建网站托管 + + + + + + Label + + + + + + + + + + + + ); +} + +export default CreateWebsiteModal; diff --git a/web/src/pages/app/storages/mods/FileList/index.tsx b/web/src/pages/app/storages/mods/FileList/index.tsx index 53f9a0b070..51713abf58 100644 --- a/web/src/pages/app/storages/mods/FileList/index.tsx +++ b/web/src/pages/app/storages/mods/FileList/index.tsx @@ -1,9 +1,10 @@ import { DeleteIcon, ViewIcon } from "@chakra-ui/icons"; -import { HStack, Table, TableContainer, Tbody, Td, Th, Thead, Tr } from "@chakra-ui/react"; +import { HStack, Input, Table, TableContainer, Tbody, Td, Th, Thead, Tr } from "@chakra-ui/react"; import { useQuery } from "@tanstack/react-query"; import { t } from "i18next"; import ConfirmButton from "@/components/ConfirmButton"; +import CopyText from "@/components/CopyText"; import FileTypeIcon from "@/components/FileTypeIcon"; import IconWrap from "@/components/IconWrap"; import Panel from "@/components/Panel"; @@ -11,6 +12,7 @@ import { formatDate, formateType, formatSize } from "@/utils/format"; import useStorageStore, { TFile } from "../../store"; import CreateFolderModal from "../CreateFolderModal"; +import CreateWebsiteModal from "../CreateWebsiteModal"; import PathLink from "../PathLink"; import UploadButton from "../UploadButton"; @@ -61,6 +63,12 @@ export default function FileList() { query.refetch()} /> query.refetch()} /> + + query.refetch()} /> + + + + @@ -80,12 +88,12 @@ export default function FileList() { ) : (
{t("FunctionPanel.Name")}
- + - - + + @@ -109,26 +117,22 @@ export default function FileList() { textOverflow: "ellipsis", whiteSpace: "nowrap", }} - className="text-grayModern-900 font-medium" + onClick={() => + file.Prefix ? changeDirectory(file) : viewAppFile(file) + } + className="text-grayModern-900 font-medium cursor-pointer" > {file.Prefix ? ( - changeDirectory(file)} - > - {dirName[dirName.length - 2]} - + {dirName[dirName.length - 2]} ) : ( {fileName[fileName.length - 1]} )} - - - + +
{t("StoragePanel.FileName")} {t("StoragePanel.FileType")}{t("StoragePanel.Size")}{t("StoragePanel.Time")}{t("StoragePanel.Size")}{t("StoragePanel.Time")} {t("Operation")} {fileType}{file.Size ? formatSize(file.Size) : "--"} - {file.LastModified ? formatDate(file.LastModified) : "--"} - + {file.Size ? formatSize(file.Size) : "--"}{file.LastModified ? formatDate(file.LastModified) : "--"} ( changeDirectory(p.path)}> {p.name} diff --git a/web/src/pages/app/storages/mods/StorageListPanel/index.tsx b/web/src/pages/app/storages/mods/StorageListPanel/index.tsx index a2ad6620c6..8e857b8ee2 100644 --- a/web/src/pages/app/storages/mods/StorageListPanel/index.tsx +++ b/web/src/pages/app/storages/mods/StorageListPanel/index.tsx @@ -76,13 +76,13 @@ export default function StorageListPanel() { <>
- {storage.name} + {storage.name}
{storage?.policy} - + <>
diff --git a/web/src/pages/app/storages/mods/UploadButton/index.tsx b/web/src/pages/app/storages/mods/UploadButton/index.tsx index 25f9d45f2c..0d0fdc7df9 100644 --- a/web/src/pages/app/storages/mods/UploadButton/index.tsx +++ b/web/src/pages/app/storages/mods/UploadButton/index.tsx @@ -45,7 +45,7 @@ function UploadButton({ onUploadSuccess }: { onUploadSuccess: () => void }) { leftIcon={} disabled={currentStorage === undefined} > - {t("StoragePanel.Upload")} +

{t("StoragePanel.Upload")}