feat(web): support toggle panels in function page

web/src/components/Editor/JsonEditor.tsx

@@ -37,8 +37,7 @@ function JsonEditor(props: {
         onChange(editorRef.current?.getValue());
       });
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [onChange]);
 
   useEffect(() => {
     if (monacoEl && editorRef.current && value !== editorRef.current?.getValue()) {

web/src/components/Grid/index.tsx

@@ -5,15 +5,43 @@ function Grid() {
   return <div>Grid</div>;
 }
 
-function Row(props: { className?: string; children: React.ReactNode }) {
-  const { className } = props;
-  return <div className={clsx(className, "flex flex-1 space-x-2 w-full")}>{props.children}</div>;
+function Row(props: {
+  className?: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+}) {
+  const { className, style } = props;
+  return (
+    <div
+      className={clsx(
+        "flex space-x-2 w-full",
+        style?.height ? "flex-none" : "flex-grow",
+        className,
+      )}
+      style={style}
+    >
+      {props.children}
+    </div>
+  );
 }
 
-function Col(props: { className?: string; children: React.ReactNode }) {
-  const { className } = props;
+function Col(props: {
+  className?: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+}) {
+  const { className, style } = props;
   return (
-    <div className={clsx(className, "flex flex-col space-y-2 flex-1 h-full")}>{props.children}</div>
+    <div
+      className={clsx(
+        "flex flex-col space-y-2 h-full",
+        style?.width ? "flex-none" : "flex-grow",
+        className,
+      )}
+      style={style}
+    >
+      {props.children}
+    </div>
   );
 }
 

web/src/components/Panel/index.tsx

@@ -10,7 +10,10 @@ const Panel = (props: {
 }) => {
   const { className, style = {} } = props;
   return (
-    <div style={style} className={clsx("bg-white rounded px-4 flex flex-col h-full", className)}>
+    <div
+      style={style}
+      className={clsx("bg-white rounded px-4 flex flex-col h-full w-full", className)}
+    >
       {props.children}
     </div>
   );

web/src/pages/app/database/BottomPanel/index.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Button, HStack } from "@chakra-ui/react";
+
+import Panel from "@/components/Panel";
+
+import useCustomSettingStore from "@/pages/customSetting";
+
+function BottomPanel() {
+  const store = useCustomSettingStore();
+
+  return (
+    <Panel className=" justify-between !flex-row">
+      <HStack spacing={2}>
+        <Button
+          size="xs"
+          variant="plain"
+          onClick={() => store.togglePanel("collectionPage", "SiderBar")}
+        >
+          集合列表
+        </Button>
+      </HStack>
+    </Panel>
+  );
+}
+
+export default BottomPanel;

web/src/pages/app/database/CollectionDataList/index.tsx

@@ -2,8 +2,6 @@ import { useTranslation } from "react-i18next";
 import { AddIcon } from "@chakra-ui/icons";
 import { Button } from "@chakra-ui/react";
 
-import { Col } from "@/components/Grid";
-
 import CreateCollectionModal from "../mods/CreateCollectionModal";
 import useDBMStore from "../store";
 
@@ -15,7 +13,7 @@ export default function CollectionDataList() {
   const { t } = useTranslation();
   const store = useDBMStore((state) => state);
   return (
-    <Col>
+    <>
       {store.currentDB === undefined ? (
         <div className="h-full flex items-center justify-center">
           <CreateCollectionModal>
@@ -58,6 +56,6 @@ export default function CollectionDataList() {
           </TabPanel>
         </TabPanels>
       </Tabs > */}
-    </Col>
+    </>
   );
 }

web/src/pages/app/database/CollectionListPanel/index.tsx

@@ -6,7 +6,6 @@ import clsx from "clsx";
 
 // import CopyText from "@/components/CopyText";
 import FileTypeIcon, { FileType } from "@/components/FileTypeIcon";
-import { Col } from "@/components/Grid";
 import IconWrap from "@/components/IconWrap";
 import Panel from "@/components/Panel";
 import SectionList from "@/components/SectionList";
@@ -18,7 +17,7 @@ import useDBMStore from "../store";
 
 import MoreButton from "./MoreButton";
 
-export default function CollectionListPanel(props: { isHidden?: boolean }) {
+export default function CollectionListPanel() {
   const store = useDBMStore((store) => store);
   const { t } = useTranslation();
   const collectionListQuery = useCollectionListQuery({
@@ -34,65 +33,63 @@ export default function CollectionListPanel(props: { isHidden?: boolean }) {
   const [search, setSearch] = useState("");
 
   return (
-    <Col className=" max-w-[300px]">
-      <Panel>
-        <Panel.Header
-          title="集合列表"
-          actions={[
-            <CreateCollectionModal key={"create_database"}>
-              <IconWrap tooltip={t("CollectionPanel.CollectionAdd").toString()} size={20}>
-                <AddIcon fontSize={10} />
-              </IconWrap>
-            </CreateCollectionModal>,
-          ]}
-        />
-        <div className="flex items-center mb-3 w-full">
-          <InputGroup>
-            <InputLeftElement
-              height={"8"}
-              pointerEvents="none"
-              children={<Search2Icon color="gray.300" />}
-            />
-            <Input
-              rounded={"full"}
-              placeholder="输入集合ID搜索"
-              size="sm"
-              bg={"gray.100"}
-              onChange={(e) => setSearch(e.target.value)}
-            />
-          </InputGroup>
-        </div>
+    <Panel>
+      <Panel.Header
+        title="集合列表"
+        actions={[
+          <CreateCollectionModal key={"create_database"}>
+            <IconWrap tooltip={t("CollectionPanel.CollectionAdd").toString()} size={20}>
+              <AddIcon fontSize={10} />
+            </IconWrap>
+          </CreateCollectionModal>,
+        ]}
+      />
+      <div className="flex items-center mb-3 w-full">
+        <InputGroup>
+          <InputLeftElement
+            height={"8"}
+            pointerEvents="none"
+            children={<Search2Icon color="gray.300" />}
+          />
+          <Input
+            rounded={"full"}
+            placeholder="输入集合ID搜索"
+            size="sm"
+            bg={"gray.100"}
+            onChange={(e) => setSearch(e.target.value)}
+          />
+        </InputGroup>
+      </div>
 
-        <SectionList>
-          {(collectionListQuery?.data?.data || [])
-            .filter((db: any) => db.name.indexOf(search) >= 0)
-            .map((db: any) => {
-              return (
-                <SectionList.Item
-                  isActive={db.name === store.currentDB?.name}
-                  key={db.name}
-                  onClick={() => {
-                    store.setCurrentDB(db);
-                  }}
-                >
-                  <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>
-                    <div
-                      className={clsx("flex group-hover:inline ", {
-                        hidden: db.name !== store.currentDB?.name,
-                      })}
-                    >
-                      <MoreButton data={db} />
-                    </div>
+      <SectionList>
+        {(collectionListQuery?.data?.data || [])
+          .filter((db: any) => db.name.indexOf(search) >= 0)
+          .map((db: any) => {
+            return (
+              <SectionList.Item
+                isActive={db.name === store.currentDB?.name}
+                key={db.name}
+                onClick={() => {
+                  store.setCurrentDB(db);
+                }}
+              >
+                <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>
-                </SectionList.Item>
-              );
-            })}
-        </SectionList>
-      </Panel>
-    </Col>
+                  <div
+                    className={clsx("flex group-hover:inline ", {
+                      hidden: db.name !== store.currentDB?.name,
+                    })}
+                  >
+                    <MoreButton data={db} />
+                  </div>
+                </div>
+              </SectionList.Item>
+            );
+          })}
+      </SectionList>
+    </Panel>
   );
 }

web/src/pages/app/database/index.tsx

@@ -1,39 +1,31 @@
 /****************************
  * cloud functions database page
  ***************************/
-import { useState } from "react";
-import { Button } from "@chakra-ui/react";
 
 import Content from "@/components/Content";
-import { Row } from "@/components/Grid";
-import Panel from "@/components/Panel";
+import { Col, Row } from "@/components/Grid";
 
+import BottomPanel from "./BottomPanel";
 import CollectionDataList from "./CollectionDataList";
 import CollectionListPanel from "./CollectionListPanel";
 
+import useCustomSettingStore from "@/pages/customSetting";
+
 function DatabasePage() {
-  const [hideList, setHideList] = useState<boolean>(false);
+  const collectionPageConfig = useCustomSettingStore((store) => store.layoutInfo.collectionPage);
   return (
     <Content>
-      <Row className="flex-grow">
-        <CollectionListPanel isHidden={hideList} />
+      <Row>
+        <Col {...collectionPageConfig.SiderBar}>
+          <CollectionListPanel />
+        </Col>
 
-        <CollectionDataList />
+        <Col>
+          <CollectionDataList />
+        </Col>
       </Row>
-      <Row className="!flex-none">
-        <Panel className="w-full h-[40px]">
-          <Panel.Header>
-            <Button
-              size="xs"
-              variant="plain"
-              onClick={() => {
-                setHideList((pre) => !pre);
-              }}
-            >
-              集合列表
-            </Button>
-          </Panel.Header>
-        </Panel>
+      <Row {...collectionPageConfig.Bottom}>
+        <BottomPanel />
       </Row>
     </Content>
   );