feat(web): fix UI bugs (#717)

labring · Feb 2, 2023 · eccd912 · eccd912
1 parent eadb9a6
commit eccd912
Show file tree

Hide file tree

Showing 38 changed files with 909 additions and 388 deletions.
diff --git 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"
   }
-}
+}
diff --git 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
@@ -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": "字段不能为空"
   }
-}
+}
diff --git 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
@@ -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
diff --git a/web/src/components/InputTag/index.tsx b/web/src/components/InputTag/index.tsx
@@ -0,0 +1,45 @@
+import { useState } from "react";
+import { Input, Tag, TagCloseButton, TagLabel } from "@chakra-ui/react";
+
+export default function InputTag(props: { value: string[]; onChange: (value: string[]) => 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 (
+    <>
+      <Input
+        placeholder=" 按「回车键」或「空格键」分隔"
+        className="mb-2"
+        value={inputV}
+        onKeyDown={(e) => handleEnter(e)}
+        onChange={(e) => setInputV(e.target.value)}
+      />
+      {value.length > 0 ? (
+        <div className="flex items-center flex-wrap pb-2 px-2  border-2 rounded border-white-700 border-dashed max-h-20 overflow-auto">
+          {value.map((item) => (
+            <Tag className="mr-2 mt-2" key={item} variant="inputTag">
+              <TagLabel>{item}</TagLabel>
+              <TagCloseButton
+                onClick={() => {
+                  handleClose(item);
+                }}
+              />
+            </Tag>
+          ))}
+        </div>
+      ) : null}
+    </>
+  );
+}
diff --git a/web/src/components/Pagination/index.tsx b/web/src/components/Pagination/index.tsx
@@ -21,7 +21,7 @@ export default function Pagination(props: {
 
   return (
     <HStack alignItems="center" spacing={"1"} display="flex" whiteSpace={"nowrap"}>
-      <Text as="div">
+      <Text as="div" className="text-lg mr-2">
         {t("Total")}: {total}
       </Text>
       <IconWrap showBg tooltip="First Page" size={18}>

diff --git a/web/src/components/SectionList/index.module.scss b/web/src/components/SectionList/index.module.scss
@@ -15,19 +15,22 @@
       vertical-align: middle;
     }
 
+    svg {
+      fill: #9ca2a8;
+    }
+
     &.small {
       height: 32px;
     }
 
     &: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);
+      }
     }
   }
 }
diff --git 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() {
     <>
       <Panel.Header className="w-full h-[60px] flex-shrink-0">
         <div className="flex items-center">
-          <Button
-            disabled={store.currentDB === undefined}
-            colorScheme="primary"
-            className="mr-2"
-            style={{ width: "114px" }}
-            onClick={() => {
-              setCurrentData({});
-            }}
-            leftIcon={<AddIcon />}
-          >
-            {t("CollectionPanel.AddData")}
-          </Button>
+          <AddDataModal onSuccessSubmit={() => {}} />
           <form
             onSubmit={(event) => {
               event?.preventDefault();
@@ -142,18 +132,19 @@ export default function DataPanel() {
           deleteRuleMutation={deleteDataMutation}
           component={(item: any) => {
             return (
-              <SyntaxHighlighter language="json" customStyle={{ background: "#fff" }}>
+              <SyntaxHighlighter language="json" customStyle={{ background: "#fdfdfe" }}>
                 {JSON.stringify(item, null, 2)}
               </SyntaxHighlighter>
             );
           }}
         />
         <RightPanelEditBox
-          title={currentData?._id ? t("Edit") : t("Create")}
-          isLoading={currentData?._id ? updateDataMutation.isLoading : addDataMutation.isLoading}
+          show={currentData?._id}
+          title={t("Edit")}
+          isLoading={updateDataMutation.isLoading}
           onSave={handleData}
         >
-          <div className=" flex-1" style={{}}>
+          <div className=" flex-1 mb-4 bg-lafWhite-400 rounded">
             <JsonEditor
               value={JSON.stringify(currentData || {}, null, 2)}
               onChange={(values) => {

diff --git 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() {
               >
                 <div className="w-full flex justify-between group">
                   <div className="leading-loose font-semibold">
-                    <BsTable className="inline" />
-                    <span className="ml-2 text-base text-black">{db.name}</span>
+                    <FileTypeIcon type="db" />
+                    <span className="ml-2 text-base">{db.name}</span>
                   </div>
                   <MoreButton
                     isHidden={db.name !== store.currentDB?.name || store.currentShow !== "DB"}