labring · LeezQ · Jan 13, 2023 · Jan 12, 2023
diff --git a/web/src/components/FileTypeIcon/index.tsx b/web/src/components/FileTypeIcon/index.tsx
@@ -27,6 +27,7 @@ export const FileType = {
   npm: "npm",
   db: "db",
   bucket: "bucket",
+  policy: "policy",
 };
 
 export default function FileTypeIcon(props: { type: string }) {
@@ -64,6 +65,13 @@ export default function FileTypeIcon(props: { type: string }) {
         </Icon>
       );
 
+    case FileType.policy:
+      return (
+        <Icon viewBox="0 0 14 14" fontSize={14} className="align-middle">
+          <path d="M6.41667 0V1.75H7.58333V0H6.41667ZM2.46322 1.63835L1.63835 2.46322L2.87565 3.70052L3.70052 2.87565L2.46322 1.63835ZM11.5368 1.63835L10.2995 2.87565L11.1243 3.70052L12.3617 2.46322L11.5368 1.63835ZM7 2.91667C4.75164 2.91667 2.91667 4.75164 2.91667 7C2.91667 8.61454 3.88274 9.97631 5.25 10.6367V12.25C5.25 12.8876 5.77905 13.4167 6.41667 13.4167H7.58333C8.22095 13.4167 8.75 12.8876 8.75 12.25V10.6367C10.1173 9.97631 11.0833 8.61454 11.0833 7C11.0833 4.75164 9.24836 2.91667 7 2.91667ZM7 4.08333C8.61797 4.08333 9.91667 5.38203 9.91667 7C9.91667 8.2742 9.10311 9.34667 7.97184 9.74691L7.58333 9.88363V12.25H6.41667V9.88363L6.02816 9.74691C4.89689 9.34667 4.08333 8.2742 4.08333 7C4.08333 5.38203 5.38203 4.08333 7 4.08333ZM0 6.41667V7.58333H1.75V6.41667H0ZM12.25 6.41667V7.58333H14V6.41667H12.25ZM2.87565 10.2995L1.63835 11.5368L2.46322 12.3617L3.70052 11.1243L2.87565 10.2995ZM11.1243 10.2995L10.2995 11.1243L11.5368 12.3617L12.3617 11.5368L11.1243 10.2995Z" />
+        </Icon>
+      );
+
     case FileType.bucket:
       return (
         <Icon viewBox="0 0 21 24" fontSize={14} className="align-middle">

diff --git a/web/src/components/Panel/index.tsx b/web/src/components/Panel/index.tsx
@@ -7,11 +7,13 @@ const Panel = (props: {
   className?: string;
   style?: React.CSSProperties;
   children: React.ReactNode;
+  onClick?: () => void;
 }) => {
-  const { className, style = {} } = props;
+  const { className, style = {}, onClick } = props;
   return (
     <div
       style={style}
+      onClick={onClick}
       className={clsx("bg-white rounded px-4 flex flex-col h-full w-full", className)}
     >
       {props.children}

diff --git a/web/src/components/SectionList/index.module.scss b/web/src/components/SectionList/index.module.scss
@@ -18,6 +18,7 @@
     &:hover,
     &.active {
       background-color: #eff9fa;
+      color: #008C7F;
     }
 
     &.active {

diff --git a/web/src/pages/app/database/CollectionDataList/index.tsx b/web/src/pages/app/database/CollectionDataList/index.tsx
@@ -5,19 +5,17 @@ import { Button } from "@chakra-ui/react";
 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 (
     <>
       {store.currentDB === undefined ? (
-        <div className="h-full flex items-center justify-center">
+        <div className="flex h-full justify-center items-center">
           <CreateCollectionModal>
-            <Button size="lg" variant="ghost" leftIcon={<AddIcon />}>
+            <Button size="md" className="w-40" variant="ghost" leftIcon={<AddIcon />}>
               {t("CollectionPanel.CollectionAdd")}
             </Button>
           </CreateCollectionModal>

diff --git a/web/src/pages/app/database/CollectionDataList/mods/DataPannel/index.tsx b/web/src/pages/app/database/CollectionDataList/mods/DataPannel/index.tsx
@@ -1,20 +1,24 @@
 import { useMemo, useState } from "react";
 import SyntaxHighlighter from "react-syntax-highlighter";
-import { AddIcon, EditIcon, Search2Icon } from "@chakra-ui/icons";
-import { Button, HStack, Input, InputGroup, InputLeftElement, Text } from "@chakra-ui/react";
-import clsx from "clsx";
+import { AddIcon, Search2Icon } from "@chakra-ui/icons";
+import { Button, HStack, Input, InputGroup, InputLeftElement } from "@chakra-ui/react";
 import { debounce } from "lodash";
 
 import JsonEditor from "@/components/Editor/JsonEditor";
-import IconWrap from "@/components/IconWrap";
 import Pagination from "@/components/Pagination";
 import Panel from "@/components/Panel";
 import getPageInfo from "@/utils/getPageInfo";
 
-import { useAddDataMutation, useEntryDataQuery, useUpdateDataMutation } from "../../../service";
+import RightPanelEditBox from "../../../RightComponent/EditBox";
+import RightPanelList from "../../../RightComponent/List";
+import {
+  useAddDataMutation,
+  useDeleteDataMutation,
+  useEntryDataQuery,
+  useUpdateDataMutation,
+} from "../../../service";
 import useDBMStore from "../../../store";
 
-import DeleteButton from "./DeleteButton";
 export default function DataPannel() {
   const [currentData, setCurrentData] = useState<any>(undefined);
 
@@ -46,8 +50,12 @@ export default function DataPannel() {
     setCurrentData({});
   });
   const addDataMutation = useAddDataMutation();
-
   const updateDataMutation = useUpdateDataMutation();
+  const deleteDataMutation = useDeleteDataMutation({
+    onSuccess() {
+      setCurrentData(undefined);
+    },
+  });
 
   const handleData = async () => {
     if (currentData?._id) {
@@ -60,8 +68,8 @@ export default function DataPannel() {
   };
 
   return (
-    <Panel>
-      <Panel.Header>
+    <>
+      <Panel.Header className="w-full h-[55px]">
         <div className="flex items-center">
           <Button
             disabled={store.currentDB === undefined}
@@ -112,82 +120,29 @@ export default function DataPannel() {
             });
           }}
         />
-        {/* <span>总数: {entryDataQuery.data?.total}</span> */}
       </Panel.Header>
-
-      <div className="flex" style={{ height: "calc(100% - 60px)" }}>
-        <div className="overflow-y-auto flex-1 overflow-x-hidden">
-          {(entryDataQuery?.data?.list || [])?.map((item: any, index: number) => {
+      <div className="w-full flex overflow-hidden" style={{ height: "calc(100vh - 130px)" }}>
+        <RightPanelList
+          ListQuery={entryDataQuery?.data?.list}
+          setKey="_id"
+          isActive={(item: any) => currentData?._id === item._id}
+          onClick={(data: any) => {
+            setCurrentData(data);
+          }}
+          deleteRuleMutation={deleteDataMutation}
+          component={(item: any) => {
             return (
-              <div
-                key={item._id}
-                className={clsx("border-2 p-2 rounded-xl relative group/item", {
-                  "shadow-lg": currentData?._id === item._id,
-                  "mb-2": index !== (entryDataQuery?.data?.list || []).length - 1,
-                })}
-                onClick={() => {
-                  setCurrentData(item);
-                }}
-              >
-                <div
-                  className={clsx(" absolute right-2 top-2  group-hover/item:block z-50 ", {
-                    hidden: currentData?._id !== item._id,
-                  })}
-                >
-                  <div className="flex">
-                    <DeleteButton data={item} fn={setCurrentData} />
-                    <IconWrap
-                      showBg
-                      tooltip="编辑"
-                      size={32}
-                      className="ml-2 hover:bg-third-100 group/icon"
-                    >
-                      <EditIcon className="group-hover/icon:text-third-500" />
-                    </IconWrap>
-                  </div>
-                </div>
-                <SyntaxHighlighter language="json" customStyle={{ background: "#fff" }}>
-                  {JSON.stringify(item, null, 2)}
-                </SyntaxHighlighter>
-              </div>
+              <SyntaxHighlighter language="json" customStyle={{ background: "#fff" }}>
+                {JSON.stringify(item, null, 2)}
+              </SyntaxHighlighter>
             );
-          })}
-        </div>
-        <div
-          className="border-2 flex-col ml-2 mb-3 flex rounded-xl px-4"
-          style={{
-            flexBasis: "421px",
           }}
+        />
+        <RightPanelEditBox
+          title={currentData?._id ? "编辑" : "新增"}
+          isLoading={currentData?._id ? updateDataMutation.isLoading : addDataMutation.isLoading}
+          onSave={handleData}
         >
-          <div className="flex justify-between item-center border-b-2 mb-4 py-2">
-            <Text fontSize="md" className="leading-loose font-semibold">
-              {currentData?._id ? "编辑" : "新增"}
-            </Text>
-            <div>
-              <Button
-                style={{ width: "56px" }}
-                colorScheme="primary"
-                fontSize="sm"
-                size="md"
-                isLoading={
-                  currentData?._id ? updateDataMutation.isLoading : addDataMutation.isLoading
-                }
-                onClick={handleData}
-              >
-                保存
-              </Button>
-              {/* <Button
-                size={"xs"}
-                colorScheme="blue"
-                bgColor={"blue.600"}
-                borderRadius="2"
-                ml="3"
-                onClick={() => setCurrentData(undefined)}
-              >
-                取消
-              </Button> */}
-            </div>
-          </div>
           <div className=" flex-1" style={{}}>
             <JsonEditor
               value={JSON.stringify(currentData || {}, null, 2)}
@@ -196,8 +151,8 @@ export default function DataPannel() {
               }}
             />
           </div>
-        </div>
+        </RightPanelEditBox>
       </div>
-    </Panel>
+    </>
   );
 }
diff --git a/web/src/pages/app/database/CollectionListPanel/MoreButton/index.tsx b/web/src/pages/app/database/CollectionListPanel/MoreButton/index.tsx
@@ -18,7 +18,7 @@ export default function MoreButton(props: { data?: any; fn?: any }) {
         closeOnBlur={true}
         placement="bottom"
       >
-        <IconWrap size={28} tooltip="更多操作">
+        <IconWrap size={25} tooltip="更多操作">
           <PopoverTrigger>
             <MoreIcon
               fontSize={10}
@@ -29,12 +29,18 @@ export default function MoreButton(props: { data?: any; fn?: any }) {
             />
           </PopoverTrigger>
         </IconWrap>
-        <PopoverContent p="2" maxWidth={100}>
-          <div className="flex">
-            <IconWrap>
-              <CopyText text={data.name} tip="名称复制成功" />
-            </IconWrap>
-            <DeleteCollectionModal database={data} />
+        <PopoverContent p="2" maxWidth="100px">
+          <div className="flex justify-around">
+            <div>
+              <IconWrap>
+                <CopyText text={data.name} className="w-[28px]" tip="名称复制成功" />
+              </IconWrap>
+              复制
+            </div>
+            <div>
+              <DeleteCollectionModal database={data} />
+              删除
+            </div>
           </div>
         </PopoverContent>
       </Popover>

diff --git a/web/src/pages/app/database/CollectionListPanel/index.tsx b/web/src/pages/app/database/CollectionListPanel/index.tsx
@@ -33,7 +33,12 @@ export default function CollectionListPanel() {
   const [search, setSearch] = useState("");
 
   return (
-    <Panel>
+    <Panel
+      className="flex-grow"
+      onClick={() => {
+        store.setCurrentShow("DB");
+      }}
+    >
       <Panel.Header
         title="集合列表"
         actions={[
@@ -61,13 +66,13 @@ export default function CollectionListPanel() {
         </InputGroup>
       </div>
 
-      <SectionList>
+      <SectionList style={{ height: "calc(100vh - 380px)", overflowY: "auto" }}>
         {(collectionListQuery?.data?.data || [])
           .filter((db: any) => db.name.indexOf(search) >= 0)
           .map((db: any) => {
             return (
               <SectionList.Item
-                isActive={db.name === store.currentDB?.name}
+                isActive={store.currentShow === "DB" && db.name === store.currentDB?.name}
                 key={db.name}
                 onClick={() => {
                   store.setCurrentDB(db);
@@ -80,7 +85,7 @@ export default function CollectionListPanel() {
                   </div>
                   <div
                     className={clsx("flex group-hover:inline ", {
-                      hidden: db.name !== store.currentDB?.name,
+                      hidden: db.name !== store.currentDB?.name || store.currentShow !== "DB",
                     })}
                   >
                     <MoreButton data={db} />