labring · maslow · Jan 19, 2023 · Jan 19, 2023 · Jan 19, 2023
diff --git a/web/public/favicon.ico b/web/public/favicon.ico
diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json
@@ -25,7 +25,8 @@
     "RulesNum": "Number of Rules",
     "Search": "Please enter ID to query",
     "SelectCollection": "Select Collection",
-    "SelectFunction": "Please select a cloud function"
+    "SelectFunction": "Please select a cloud function",
+    "CollectionNameRule": "The collection name can only contain English, _ or -"
   },
   "Add": "Add ",
   "AddData": "new data",
@@ -152,7 +153,8 @@
     "TimeTip": "Temporary link, valid for 15 minutes",
     "Upload": "Upload",
     "Used": "Used",
-    "UploadTip": "Please select a file or folder to upload"
+    "UploadTip": "Please select a file or folder to upload",
+    "BucketNameRule": "Can only contain English or numbers"
   },
   "TriggerPanel": {
     "AddTrigger": "Add Trigger",

diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json
@@ -46,7 +46,8 @@
     "SelectFunction": "请选择云函数",
     "AddRules": "添加规则",
     "RulesNum": "规则数",
-    "RulesContent": "规则内容"
+    "RulesContent": "规则内容",
+    "CollectionNameRule": "集合名称只能包含英文, _ 或者 -"
   },
   "FunctionPanel": {
     "Debug": "运行",
@@ -136,7 +137,8 @@
     "All": "总容量",
     "Used": "已使用",
     "Success": "上传成功",
-    "EmptyText": "暂无Bucket数据"
+    "EmptyText": "暂无Bucket数据",
+    "BucketNameRule": "只能包含英文或数字"
   },
   "Search": "搜索",
   "Close": "关闭",

diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json
@@ -25,7 +25,8 @@
     "RulesNum": "规则数",
     "Search": "请输入ID进行查询",
     "SelectCollection": "选择集合",
-    "SelectFunction": "请选择云函数"
+    "SelectFunction": "请选择云函数",
+    "CollectionNameRule": "集合名称只能包含英文, _ 或者 -"
   },
   "Add": "添加",
   "AddData": "新增数据",
@@ -152,7 +153,8 @@
     "TimeTip": "临时链接,有效期15分钟",
     "Upload": "上传",
     "Used": "已使用",
-    "UploadTip": "请选择文件或者文件夹上传"
+    "UploadTip": "请选择文件或者文件夹上传",
+    "BucketNameRule": "只能包含英文或数字"
   },
   "TriggerPanel": {
     "AddTrigger": "新建触发器",

diff --git a/web/src/chakraTheme.ts b/web/src/chakraTheme.ts
@@ -17,6 +17,7 @@ const Tag = defineMultiStyleConfig({
         py: "1",
         fontSize: "10px",
         fontWeight: "400",
+        borderRadius: "4px",
       },
     }),
   },

diff --git a/web/src/components/IconWrap/index.tsx b/web/src/components/IconWrap/index.tsx
@@ -16,7 +16,7 @@ export default function IconWrap(props: {
     <Tooltip label={tooltip} placement={placement}>
       <Center
         onClick={props.onClick}
-        className={clsx("rounded-full inline-block cursor-pointer", className, {
+        className={clsx("rounded-full inline-block cursor-pointer text-gray-500", className, {
           "hover:bg-lafWhite-600": !showBg,
           "bg-lafWhite-600": showBg,
         })}

diff --git a/web/src/components/Pagination/index.tsx b/web/src/components/Pagination/index.tsx
@@ -1,5 +1,5 @@
 import { ArrowLeftIcon, ArrowRightIcon, ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons";
-import { Button, Flex, Select, Text } from "@chakra-ui/react";
+import { Button, HStack, Select, Text } from "@chakra-ui/react";
 import { t } from "i18next";
 
 import IconWrap from "../IconWrap";
@@ -20,121 +20,91 @@ export default function Pagination(props: {
   const maxPage = total && limit ? Math.ceil(total / limit) : -1;
 
   return (
-    <Flex justifyContent="end" m={4} alignItems="center">
-      <Flex alignItems="center">
-        <Text
-          fontWeight="bold"
-          as="p"
-          minWidth={"36px"}
-          px="8px"
-          display="inline-block"
-          textAlign={"center"}
+    <HStack alignItems="center" spacing={"1"} display="flex" whiteSpace={"nowrap"}>
+      <Text as="div">
+        {t("Total")}: {total}
+      </Text>
+      <IconWrap showBg tooltip="First Page" size={18}>
+        <Button
+          variant="link"
+          onClick={() => {
+            onChange({
+              ...values,
+              page: 1,
+            });
+          }}
+          isDisabled={page === 1 || maxPage === -1}
         >
-          {t("Total")}: {total}
-        </Text>
-        <IconWrap showBg tooltip="First Page" size={32} className="ml-4">
-          <Button
-            variant="link"
-            onClick={() => {
-              onChange({
-                ...values,
-                page: 1,
-              });
-            }}
-            isDisabled={page === 1 || maxPage === -1}
-          >
-            <ArrowLeftIcon h={3} w={3} />
-          </Button>
-        </IconWrap>
-        <IconWrap showBg tooltip="Previous Page" size={32} className="ml-4">
-          <Button
-            variant="link"
-            onClick={() =>
-              onChange({
-                ...values,
-                page: page! - 1,
-              })
-            }
-            isDisabled={page === 1 || maxPage === -1}
-          >
-            <ChevronLeftIcon h={6} w={6} />
-          </Button>
-        </IconWrap>
-      </Flex>
-
-      <Flex alignItems="center">
-        <Text
-          fontWeight="bold"
-          as="span"
-          minWidth={"36px"}
-          px="8px"
-          display="inline-block"
-          textAlign={"center"}
+          <ArrowLeftIcon fontSize={"8px"} />
+        </Button>
+      </IconWrap>
+      <IconWrap showBg tooltip="Previous Page" size={18}>
+        <Button
+          variant="link"
+          onClick={() =>
+            onChange({
+              ...values,
+              page: page! - 1,
+            })
+          }
+          isDisabled={page === 1 || maxPage === -1}
         >
-          {page}
-        </Text>
-        /
-        <Text
-          fontWeight="bold"
-          as="p"
-          minWidth={"36px"}
-          px="8px"
-          display="inline-block"
-          textAlign={"center"}
+          <ChevronLeftIcon fontSize={"16px"} />
+        </Button>
+      </IconWrap>
+      <Text fontWeight="bold" as="p" minWidth={"36px"} px="8px" textAlign={"center"}>
+        {page}
+      </Text>
+      <Text>/</Text>
+      <Text fontWeight="bold" as="p" minWidth={"36px"} px="8px" textAlign={"center"}>
+        {maxPage < 0 ? "-" : maxPage}
+      </Text>
+      <IconWrap showBg tooltip="Next Page" size={18}>
+        <Button
+          variant="link"
+          isDisabled={maxPage === page || maxPage === -1}
+          onClick={() => {
+            onChange({
+              ...values,
+              page: page! + 1,
+            });
+          }}
         >
-          {maxPage < 0 ? "-" : maxPage}
-        </Text>
-      </Flex>
-
-      <Flex alignItems="center">
-        <IconWrap showBg tooltip="Next Page" size={32}>
-          <Button
-            variant="link"
-            isDisabled={maxPage === page || maxPage === -1}
-            onClick={() => {
-              onChange({
-                ...values,
-                page: page! + 1,
-              });
-            }}
-          >
-            <ChevronRightIcon h={6} w={6} />
-          </Button>
-        </IconWrap>
-        <IconWrap showBg tooltip="Last Page" size={32} className="ml-4">
-          <Button
-            variant="link"
-            onClick={() => {
-              onChange({
-                ...values,
-                page: maxPage,
-              });
-            }}
-            isDisabled={maxPage === page || maxPage === -1}
-          >
-            <ArrowRightIcon h={3} w={3} />
-          </Button>
-        </IconWrap>
-        <Select
-          size="sm"
-          className="ml-4"
-          style={{ borderWidth: 0 }}
-          value={limit}
-          onChange={(e: any) => {
+          <ChevronRightIcon fontSize={"16px"} />
+        </Button>
+      </IconWrap>
+      <IconWrap showBg tooltip="Last Page" size={18}>
+        <Button
+          variant="link"
+          onClick={() => {
             onChange({
               ...values,
-              limit: parseInt(e.target.value),
-              page: 1,
+              page: maxPage,
             });
           }}
+          isDisabled={maxPage === page || maxPage === -1}
         >
-          {(options || [10, 20, 30]).map((data: any) => (
-            <option key={data} value={data}>
-              {data} / {t("Page").toString()}
-            </option>
-          ))}
-        </Select>
-      </Flex>
-    </Flex>
+          <ArrowRightIcon fontSize={"8px"} />
+        </Button>
+      </IconWrap>
+      <Select
+        size="sm"
+        style={{ borderWidth: 0 }}
+        value={limit}
+        onChange={(e: any) => {
+          onChange({
+            ...values,
+            limit: parseInt(e.target.value),
+            page: 1,
+          });
+        }}
+      >
+        {(options || [10, 20, 30]).map((data: any) => (
+          <option key={data} value={data}>
+            {data} / {t("Page")}
+          </option>
+        ))}
+      </Select>
+    </HStack>
   );
 }
diff --git a/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx b/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx
@@ -112,7 +112,6 @@ export default function DataPanel() {
         <Pagination
           values={getPageInfo(entryDataQuery.data as any)}
           onChange={(values) => {
-            console.log(values);
             setQueryData((pre: any) => {
               const newQuery = { ...pre, ...values };
               return newQuery;

diff --git a/web/src/pages/app/database/CollectionListPanel/index.tsx b/web/src/pages/app/database/CollectionListPanel/index.tsx
@@ -1,11 +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 CopyText from "@/components/CopyText";
-import FileTypeIcon, { FileType } from "@/components/FileTypeIcon";
 import IconWrap from "@/components/IconWrap";
 import MoreButton from "@/components/MoreButton";
 import Panel from "@/components/Panel";
@@ -78,9 +77,9 @@ export default function CollectionListPanel() {
                 }}
               >
                 <div className="w-full flex justify-between group">
-                  <div className="leading-loose">
-                    <FileTypeIcon type={FileType.db} />
-                    <span className="ml-2 text-base">{db.name}</span>
+                  <div className="leading-loose font-semibold">
+                    <BsTable className="inline" />
+                    <span className="ml-2 text-base text-black">{db.name}</span>
                   </div>
                   <MoreButton
                     isHidden={db.name !== store.currentDB?.name || store.currentShow !== "DB"}

diff --git a/web/src/pages/app/database/RightComponent/EditBox.tsx b/web/src/pages/app/database/RightComponent/EditBox.tsx
@@ -11,7 +11,7 @@ const RightPanelEditBox: React.FC<{
   const { title, isLoading, children, onSave } = props;
   return (
     <div
-      className="border-2 border-lafWhite-600 flex-col ml-2 mb-3 flex rounded-xl px-4"
+      className="border-2 border-lafWhite-600 flex-col ml-1 mb-3 flex rounded-xl px-4"
       style={{
         flexBasis: "421px",
       }}

diff --git a/web/src/pages/app/database/RightComponent/List.tsx b/web/src/pages/app/database/RightComponent/List.tsx
@@ -18,7 +18,7 @@ const RightPanelList: React.FC<{
 }> = (props) => {
   const { ListQuery, setKey, component, isActive, onClick, deleteRuleMutation, deleteData } = props;
   return (
-    <div className="overflow-y-auto flex-1 overflow-x-hidden">
+    <div className="overflow-y-auto flex-1 overflow-x-hidden pr-1">
       {(ListQuery || [])?.map((item: any, index: number) => {
         return (
           <div

diff --git a/web/src/pages/app/database/mods/CreateCollectionModal/index.tsx b/web/src/pages/app/database/mods/CreateCollectionModal/index.tsx
@@ -57,7 +57,7 @@ const CreateCollectionModal = (props: { collection?: any; children: React.ReactE
           setTimeout(() => setFocus("name"), 0);
         },
       })}
-      <Modal isOpen={isOpen} onClose={onClose} size="xl">
+      <Modal isOpen={isOpen} onClose={onClose} size="lg">
         <ModalOverlay />
         <ModalContent>
           <ModalHeader>{t("CollectionPanel.AddCollection")}</ModalHeader>
@@ -69,6 +69,10 @@ const CreateCollectionModal = (props: { collection?: any; children: React.ReactE
                 <Input
                   {...register("name", {
                     required: "name is required",
+                    pattern: {
+                      value: /^[A-Za-z][A-Za-z0-9-_]+$/,
+                      message: t("CollectionPanel.CollectionNameRule"),
+                    },
                   })}
                   id="name"
                   variant="filled"

diff --git a/web/src/pages/app/database/mods/DeleteCollectionModal/index.tsx b/web/src/pages/app/database/mods/DeleteCollectionModal/index.tsx
@@ -64,11 +64,12 @@ function DeleteCollectionModal(props: { database: any }) {
           <ModalBody pb={6}>
             <p className="mb-2">
               {t("CollectionPanel.DeleteCollectionTip")}
-              <span className=" text-black mr-1 font-bold">{database.name}</span>,{t("DeleteTip")}。
+              <span className=" text-black mx-1 font-bold">{database.name}</span>
+              {t("DeleteTip")}。
             </p>
             <p className="mb-4">
               {t("CollectionPanel.InputName")}
-              <span className=" text-red-500 mr-1 font-bold">{database.name}</span>
+              <span className=" text-red-500 mx-1 font-bold">{database.name}</span>
               {t("ToConfirm")}。
             </p>
             <FormControl>

diff --git a/web/src/pages/app/functions/mods/EditorPanel/index.tsx b/web/src/pages/app/functions/mods/EditorPanel/index.tsx
@@ -61,7 +61,7 @@ function EditorPanel() {
         <Center className="h-full text-lg">
           {t("FunctionPanel.EmptyText")}
           <CreateModal key="create_modal_new">
-            <span className="ml-2 text-blue-500 cursor-pointer">{t("CreateNow")}</span>
+            <span className="ml-2 text-blue-700 cursor-pointer">{t("CreateNow")}</span>
           </CreateModal>
         </Center>
       )}