labring · LeezQ · Jan 3, 2023 · Dec 30, 2022 · Dec 30, 2022 · Jan 2, 2023
diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json
@@ -19,6 +19,15 @@
     "Deploy": "发布",
     "EmptyText": "请先选择函数"
   },
+  "CollectionPanel": {
+    "CollectionAdd": "添加集合"
+  },
+  "StoragePanel": {
+    "Upload": "上传",
+    "File": "文件",
+    "Folder": "文件夹",
+    "Create": "新建"
+  },
   "Message": {
     "DeploySuccess": "发布成功"
   },

diff --git a/web/src/components/DepenceList/index.tsx b/web/src/components/DepenceList/index.tsx
@@ -15,12 +15,14 @@ function Item(props: {
   children: React.ReactNode;
   isActive: boolean;
   className?: string;
+  style?: React.CSSProperties;
   key: string;
   onClick: () => void;
 }) {
-  const { children, isActive, onClick, className } = props;
+  const { children, isActive, onClick, className, style } = props;
   return (
     <li
+      style={style || {}}
       className={clsx(className, {
         [styles.active]: isActive,
       })}

diff --git a/web/src/components/FileUplaod/index.tsx b/web/src/components/FileUplaod/index.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import clsx from "clsx";
 
 import styles from "./index.module.scss";
@@ -10,7 +11,7 @@ function FileUpload(props: { onUpload: (files: any) => void; uploadType: "file"
   const [dragActive, setDragActive] = React.useState(false);
   // ref
   const inputRef = React.useRef<any>(null);
-
+  const { t } = useTranslation();
   useEffect(() => {
     if (uploadType === "folder") {
       inputRef.current.setAttribute("webkitdirectory", "");
@@ -77,9 +78,13 @@ function FileUpload(props: { onUpload: (files: any) => void; uploadType: "file"
         htmlFor="input-file-upload"
       >
         <div>
-          <p>Drag and drop your {uploadType} here or</p>
+          <p>
+            将{uploadType === "file" ? t("StoragePanel.File") : t("StoragePanel.Folder")}
+            拖放到此处或者
+          </p>
           <button className={styles.uploadButton} onClick={onButtonClick}>
-            {uploadType === "file" ? "Upload File" : "Upload Folder"}
+            {t("StoragePanel.Upload") +
+              (uploadType === "file" ? t("StoragePanel.File") : t("StoragePanel.Folder"))}
           </button>
         </div>
       </label>

diff --git a/web/src/hooks/useAwsS3.ts b/web/src/hooks/useAwsS3.ts
@@ -30,6 +30,7 @@ function useAwsS3() {
 
     const files = res.Contents || [];
     const dirs = res.CommonPrefixes || [];
+    // console.log(files, dirs)
     return [...files, ...dirs];
   };
 

diff --git a/web/src/pages/app/database/CollectionDataList/index.tsx b/web/src/pages/app/database/CollectionDataList/index.tsx
@@ -1,12 +1,18 @@
-import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
+import { useTranslation } from "react-i18next";
+import { AddIcon } from "@chakra-ui/icons";
+import { Button, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
 
 import RightPanel from "../../mods/RightPanel";
+import CreateCollectionModal from "../mods/CreateCollectionModal";
+import useDBMStore from "../store";
 
 // import ColPannel from "./mods/ColPannel";
 import DataPannel from "./mods/DataPannel";
 // import IndexPannel from "./mods/IndexPannel";
 
 export default function CollectionDataList() {
+  const { t } = useTranslation();
+  const store = useDBMStore((state) => state);
   return (
     <RightPanel>
       <Tabs className="h-full">
@@ -17,7 +23,17 @@ export default function CollectionDataList() {
         </TabList>
         <TabPanels className="h-full">
           <TabPanel className="overflow-hidden relative" style={{ height: "calc(100% - 55px)" }}>
-            <DataPannel />
+            {store.currentDB === undefined ? (
+              <div className="h-full flex items-center  justify-center">
+                <CreateCollectionModal>
+                  <Button size="lg" variant="ghost" leftIcon={<AddIcon />}>
+                    {t("CollectionPanel.CollectionAdd")}
+                  </Button>
+                </CreateCollectionModal>
+              </div>
+            ) : (
+              <DataPannel />
+            )}
           </TabPanel>
           {/* <TabPanel>
             <IndexPannel />

diff --git a/web/src/pages/app/database/CollectionDataList/mods/DataPannel/index.tsx b/web/src/pages/app/database/CollectionDataList/mods/DataPannel/index.tsx
@@ -57,7 +57,17 @@ export default function DataPannel() {
 
   return (
     <>
-      <div className="flex pb-4 shadow-sm justify-between items-center">
+      <div className="flex pb-4 justify-between items-center">
+        <Button
+          disabled={store.currentDB === undefined}
+          colorScheme={"primary"}
+          onClick={() => {
+            setCurrentData({});
+          }}
+        >
+          <AddIcon color="white" className="mr-2" />
+          新增记录
+        </Button>
         <form
           onSubmit={(event) => {
             event?.preventDefault();
@@ -93,17 +103,6 @@ export default function DataPannel() {
             </HStack>
           </div>
         </form>
-        <Button
-          disabled={store.currentDB === undefined}
-          colorScheme={"primary"}
-          size="sm"
-          onClick={() => {
-            setCurrentData({});
-          }}
-        >
-          <AddIcon color="white" className="mr-2" />
-          新增记录
-        </Button>
         <Pagination
           values={getPageInfo(entryDataQuery.data as any)}
           onChange={(values) => {

diff --git a/web/src/pages/app/database/CollectionListPanel/index.tsx b/web/src/pages/app/database/CollectionListPanel/index.tsx
@@ -1,3 +1,5 @@
+import { useTranslation } from "react-i18next";
+import { AddIcon } from "@chakra-ui/icons";
 import { useState } from "react";
 import { Input } from "@chakra-ui/react";
 
@@ -15,7 +17,7 @@ import useDBMStore from "../store";
 
 export default function CollectionListPanel() {
   const store = useDBMStore((store) => store);
-
+  const { t } = useTranslation();
   const collectionListQuery = useCollectionListQuery({
     onSuccess: (data) => {
       if (data.data.length > 0) {
@@ -30,7 +32,16 @@ export default function CollectionListPanel() {
 
   return (
     <LeftPanel>
-      <Panel title="集合列表" actions={[<CreateCollectionModal key={"create_database"} />]}>
+      <Panel
+        title="集合列表"
+        actions={[
+          <CreateCollectionModal key={"create_database"}>
+            <IconWrap tooltip={t("CollectionPanel.CollectionAdd").toString()} size={20}>
+              <AddIcon fontSize={10} />
+            </IconWrap>
+          </CreateCollectionModal>,
+        ]}
+      >
         <div className="flex items-center m-2 mr-0 mb-3">
           <Input
             size="sm"

diff --git a/web/src/pages/app/database/mods/CreateCollectionModal/index.tsx b/web/src/pages/app/database/mods/CreateCollectionModal/index.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { AddIcon } from "@chakra-ui/icons";
 import {
   Button,
   FormControl,
@@ -19,15 +18,13 @@ import {
   VStack,
 } from "@chakra-ui/react";
 
-import IconWrap from "@/components/IconWrap";
-
 import { useCreateDBMutation } from "../../service";
 
-const CreateCollectionModal = (props: { collection?: any }) => {
+const CreateCollectionModal = (props: { collection?: any; children: React.ReactElement }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { t } = useTranslation();
 
-  const { collection } = props;
+  const { collection, children } = props;
 
   const isEdit = !!collection;
 
@@ -53,21 +50,17 @@ const CreateCollectionModal = (props: { collection?: any }) => {
 
   return (
     <>
-      <IconWrap
-        size={20}
-        onClick={() => {
+      {React.cloneElement(children, {
+        onClick: () => {
           onOpen();
           reset({});
           setTimeout(() => setFocus("name"), 0);
-        }}
-      >
-        <AddIcon fontSize={10} />
-      </IconWrap>
-
+        },
+      })}
       <Modal isOpen={isOpen} onClose={onClose} size="xl">
         <ModalOverlay />
         <ModalContent>
-          <ModalHeader>添加集合</ModalHeader>
+          <ModalHeader>{t("CollectionPanel.CollectionAdd")}</ModalHeader>
           <ModalCloseButton />
           <ModalBody pb={6}>
             <VStack spacing={6} align="flex-start">

diff --git a/web/src/pages/app/database/mods/DeleteCollectionModal/index.tsx b/web/src/pages/app/database/mods/DeleteCollectionModal/index.tsx
@@ -1,5 +1,5 @@
-import React from "react";
 import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
 import { DeleteIcon } from "@chakra-ui/icons";
 import {
   Button,
@@ -22,7 +22,7 @@ import { useDeleteDBMutation } from "../../service";
 
 function DeleteCollectionModal(props: { database: any }) {
   const { database } = props;
-
+  const { t } = useTranslation();
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   const deleteDBMutation = useDeleteDBMutation({
@@ -63,13 +63,13 @@ function DeleteCollectionModal(props: { database: any }) {
           <ModalCloseButton />
           <ModalBody pb={6}>
             <p className="mb-2">
-              This action cannot be undone. This will permanently delete the{" "}
+              当前操作将永久删除集合
               <span className=" text-black mr-1 font-bold">{database.name}</span>
-              storage,
+              ,无法撤销。
             </p>
             <p className="mb-4">
-              Please type <span className=" text-red-500 mr-1 font-bold">{database.name}</span> to
-              confirm.
+              请输入集合名称 <span className=" text-red-500 mr-1 font-bold">{database.name}</span>
+              进行确定。
             </p>
             <FormControl>
               <Input
@@ -86,7 +86,7 @@ function DeleteCollectionModal(props: { database: any }) {
 
           <ModalFooter>
             <Button mr={3} onClick={onClose}>
-              Cancel
+              {t("Common.Dialog.Cancel")}
             </Button>
             <Button
               colorScheme="red"
@@ -96,7 +96,7 @@ function DeleteCollectionModal(props: { database: any }) {
                 }
               })}
             >
-              Confirm
+              {t("Common.Dialog.Confirm")}
             </Button>
           </ModalFooter>
         </ModalContent>

diff --git a/web/src/pages/app/functions/mods/DependecePanel/AddDepenceModal/index.tsx b/web/src/pages/app/functions/mods/DependecePanel/AddDepenceModal/index.tsx
@@ -161,6 +161,7 @@ const AddDepenceModal = () => {
         {(list || []).map((packageItem: TDependenceItem) => {
           return (
             <DepenceList.Item
+              style={{ minHeight: "45px" }}
               isActive={false}
               key={packageItem.package.name}
               className="group"

diff --git a/web/src/pages/app/storages/index.tsx b/web/src/pages/app/storages/index.tsx
@@ -2,16 +2,31 @@
  * cloud functions storage page
  ***************************/
 
-import React from "react";
+import { AddIcon } from "@chakra-ui/icons";
+import { Button } from "@chakra-ui/react";
 
+import CreateBucketModal from "./mods/CreateBucketModal";
 import FileList from "./mods/FileList";
 import StorageListPanel from "./mods/StorageListPanel";
 
+import useStorageStore from "./store";
+
 export default function StoragePage() {
+  const { currentStorage } = useStorageStore();
   return (
     <>
       <StorageListPanel />
-      <FileList />
+      {currentStorage === undefined ? (
+        <div className="h-full flex items-center  justify-center">
+          <CreateBucketModal>
+            <Button size="lg" variant="ghost" leftIcon={<AddIcon />}>
+              创建 Bucket
+            </Button>
+          </CreateBucketModal>
+        </div>
+      ) : (
+        <FileList />
+      )}
     </>
   );
 }