From 5a8b45e0d492cb0aeaf49d244683d121f27c1460 Mon Sep 17 00:00:00 2001
From: allence <lizhenq2009@gmail.com>
Date: Thu, 12 Jan 2023 18:15:12 +0800
Subject: [PATCH 1/2] update(web): toggle show panels

---
 web/src/components/Grid/index.tsx             |  40 +++-
 web/src/components/Panel/index.tsx            |   5 +-
 .../pages/app/database/BottomPanel/index.tsx  |  26 +++
 .../app/database/CollectionDataList/index.tsx |   6 +-
 .../database/CollectionListPanel/index.tsx    | 117 ++++++------
 web/src/pages/app/database/index.tsx          |  36 ++--
 web/src/pages/app/functions/index.tsx         |  90 ++-------
 .../app/functions/mods/BottomPanel/index.tsx  |  42 +++++
 .../app/functions/mods/DebugPannel/index.tsx  | 151 +++++++--------
 .../app/functions/mods/EditorPanel/index.tsx  |  73 ++++++++
 .../functions/mods/FunctionPanel/index.tsx    |   2 +-
 web/src/pages/app/functions/service.ts        |  19 +-
 web/src/pages/app/logs/index.tsx              |   2 +-
 web/src/pages/app/storages/index.tsx          |   4 +-
 .../storages/mods/StorageListPanel/index.tsx  | 177 +++++++++---------
 web/src/pages/customSetting.ts                |  89 +++++++++
 16 files changed, 540 insertions(+), 339 deletions(-)
 create mode 100644 web/src/pages/app/database/BottomPanel/index.tsx
 create mode 100644 web/src/pages/app/functions/mods/BottomPanel/index.tsx
 create mode 100644 web/src/pages/app/functions/mods/EditorPanel/index.tsx
 create mode 100644 web/src/pages/customSetting.ts

diff --git a/web/src/components/Grid/index.tsx b/web/src/components/Grid/index.tsx
index c260b6f886..debe1ffcf6 100644
--- a/web/src/components/Grid/index.tsx
+++ b/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>
   );
 }
 
diff --git a/web/src/components/Panel/index.tsx b/web/src/components/Panel/index.tsx
index 0464fcd120..4cac577758 100644
--- a/web/src/components/Panel/index.tsx
+++ b/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>
   );
diff --git a/web/src/pages/app/database/BottomPanel/index.tsx b/web/src/pages/app/database/BottomPanel/index.tsx
new file mode 100644
index 0000000000..ee39f758dd
--- /dev/null
+++ b/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;
diff --git a/web/src/pages/app/database/CollectionDataList/index.tsx b/web/src/pages/app/database/CollectionDataList/index.tsx
index b1fea024ec..1ba0acd66e 100644
--- a/web/src/pages/app/database/CollectionDataList/index.tsx
+++ b/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>
+    </>
   );
 }
diff --git a/web/src/pages/app/database/CollectionListPanel/index.tsx b/web/src/pages/app/database/CollectionListPanel/index.tsx
index c4d05c2b97..a5f3bf3139 100644
--- a/web/src/pages/app/database/CollectionListPanel/index.tsx
+++ b/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>
   );
 }
diff --git a/web/src/pages/app/database/index.tsx b/web/src/pages/app/database/index.tsx
index 5de3c8b0e8..7661b6131f 100644
--- a/web/src/pages/app/database/index.tsx
+++ b/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>
   );
diff --git a/web/src/pages/app/functions/index.tsx b/web/src/pages/app/functions/index.tsx
index f51af36e87..75b114de7a 100644
--- a/web/src/pages/app/functions/index.tsx
+++ b/web/src/pages/app/functions/index.tsx
@@ -2,96 +2,44 @@
  * cloud functions index page
  ***************************/
 
-import { Center, HStack, Input } from "@chakra-ui/react";
-import { t } from "i18next";
-
 import Content from "@/components/Content";
-import CopyText from "@/components/CopyText";
-import FunctionEditor from "@/components/Editor/FunctionEditor";
 import { Col, Row } from "@/components/Grid";
-import Panel from "@/components/Panel";
 
+import BottomPanel from "./mods/BottomPanel";
 import ConsolePanel from "./mods/ConsolePanel";
 import DebugPanel from "./mods/DebugPannel";
 import DependecyPanel from "./mods/DependecePanel";
-import DeployButton from "./mods/DeployButton";
+import EditorPanel from "./mods/EditorPanel";
 import FunctionPanel from "./mods/FunctionPanel";
 
-import useFunctionStore from "./store";
-
-import useFunctionCache from "@/hooks/useFuncitonCache";
+import useCustomSettingStore from "@/pages/customSetting";
 
 function FunctionPage() {
-  const store = useFunctionStore((store) => store);
-  const { currentFunction, updateFunctionCode, getFunctionDebugUrl } = store;
-
-  const functionCache = useFunctionCache();
-
+  const functionPageConfig = useCustomSettingStore((store) => store.layoutInfo.functionPage);
   return (
     <Content>
-      <Row>
-        <Col className=" max-w-[300px]">
+      <Row className="overflow-hidden">
+        <Col {...functionPageConfig.SiderBar}>
           <FunctionPanel />
-          <DependecyPanel />
+          <Row {...functionPageConfig.DependencePanel}>
+            <DependecyPanel />
+          </Row>
         </Col>
         <Col className="overflow-hidden">
-          <Panel className="flex-1 flex-grow">
-            <Panel.Header style={{ borderBottom: "2px solid #F4F6F8" }} className="!mb-3">
-              <div className="flex items-center h-[50px]">
-                <span className="font-bold text-lg ml-2">
-                  {currentFunction?.name}
-                  <span className="ml-2 text-slate-400 font-normal">
-                    {currentFunction?.desc ? currentFunction?.desc : ""}
-                  </span>
-                </span>
-                <span className="ml-4 ">
-                  {/* {currentFunction?.id &&
-                  functionCache.getCache(currentFunction?.id) !== currentFunction?.source?.code && (
-                    <div>
-                      <Badge colorScheme="purple">{t("Editting...")}</Badge>
-                    </div>
-                  )} */}
-
-                  {/* <FileStatusIcon status={FileStatus.deleted} /> */}
-                </span>
-              </div>
-
-              <HStack>
-                <CopyText className="ml-2" text={getFunctionDebugUrl()}>
-                  <Input
-                    size="sm"
-                    bg="#F1F4F6"
-                    border="none"
-                    readOnly
-                    rounded={4}
-                    value={getFunctionDebugUrl()}
-                  />
-                </CopyText>
-
-                <DeployButton />
-              </HStack>
-            </Panel.Header>
-            {currentFunction?.name ? (
-              <FunctionEditor
-                height="calc(100vh - 300px)"
-                path={currentFunction?.name || ""}
-                value={functionCache.getCache(currentFunction!.id)}
-                onChange={(value) => {
-                  updateFunctionCode(currentFunction, value || "");
-                  functionCache.setCache(currentFunction!.id, value || "");
-                }}
-              />
-            ) : (
-              <Center className="h-full">{t("FunctionPanel.EmptyText")}</Center>
-            )}
-          </Panel>
-
-          <ConsolePanel />
+          <Row>
+            <EditorPanel />
+          </Row>
+          <Row {...functionPageConfig.ConsolePanel}>
+            <ConsolePanel />
+          </Row>
         </Col>
-        <Col className="max-w-[25%]">
+        <Col {...functionPageConfig.RightPanel}>
           <DebugPanel />
         </Col>
       </Row>
+      <Row {...functionPageConfig.Bottom}>
+        <BottomPanel />
+      </Row>
     </Content>
   );
 }
diff --git a/web/src/pages/app/functions/mods/BottomPanel/index.tsx b/web/src/pages/app/functions/mods/BottomPanel/index.tsx
new file mode 100644
index 0000000000..faf066c9f5
--- /dev/null
+++ b/web/src/pages/app/functions/mods/BottomPanel/index.tsx
@@ -0,0 +1,42 @@
+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("functionPage", "DependencePanel")}
+        >
+          NPM 依赖
+        </Button>
+        <Button
+          size="xs"
+          variant="plain"
+          onClick={() => store.togglePanel("functionPage", "ConsolePanel")}
+        >
+          Console
+        </Button>
+      </HStack>
+      <HStack spacing={2}>
+        <Button
+          size="xs"
+          variant="plain"
+          onClick={() => store.togglePanel("functionPage", "RightPanel")}
+        >
+          接口调试
+        </Button>
+      </HStack>
+    </Panel>
+  );
+}
+
+export default BottomPanel;
diff --git a/web/src/pages/app/functions/mods/DebugPannel/index.tsx b/web/src/pages/app/functions/mods/DebugPannel/index.tsx
index 08e7a018e5..d47dbc37ff 100644
--- a/web/src/pages/app/functions/mods/DebugPannel/index.tsx
+++ b/web/src/pages/app/functions/mods/DebugPannel/index.tsx
@@ -15,6 +15,7 @@ import axios from "axios";
 import { t } from "i18next";
 
 import JsonEditor from "@/components/Editor/JsonEditor";
+import { Row } from "@/components/Grid";
 import Panel from "@/components/Panel";
 import { Pages } from "@/constants";
 
@@ -92,82 +93,86 @@ export default function DebugPanel() {
 
   return (
     <>
-      <Panel className="flex-1">
-        <Tabs width="100%" colorScheme={"green"} display="flex" flexDirection={"column"} h="full">
-          <TabList>
-            <Tab px="0">
-              <span className="text-black font-semibold">接口调试</span>
-            </Tab>
-            {/* <Tab>历史请求</Tab> */}
-          </TabList>
-
-          <TabPanels flex={1}>
-            <TabPanel padding={0} h="full">
-              <div className="flex flex-col h-full">
-                <div className="flex py-4 px-2 items-center">
-                  <span className="mr-3 whitespace-nowrap">请求类型</span>
-                  <Select
-                    width="150px"
-                    size="sm"
-                    value={runningMethod}
-                    disabled={getFunctionDebugUrl() === ""}
-                    onChange={(e) => {
-                      setRunningMethod(e.target.value);
+      <Row>
+        <Panel className="flex-1">
+          <Tabs width="100%" colorScheme={"green"} display="flex" flexDirection={"column"} h="full">
+            <TabList>
+              <Tab px="0">
+                <span className="text-black font-semibold">接口调试</span>
+              </Tab>
+              {/* <Tab>历史请求</Tab> */}
+            </TabList>
+
+            <TabPanels flex={1}>
+              <TabPanel padding={0} h="full">
+                <div className="flex flex-col h-full">
+                  <div className="flex py-4 px-2 items-center">
+                    <span className="mr-3 whitespace-nowrap">请求类型</span>
+                    <Select
+                      width="150px"
+                      size="sm"
+                      value={runningMethod}
+                      disabled={getFunctionDebugUrl() === ""}
+                      onChange={(e) => {
+                        setRunningMethod(e.target.value);
+                      }}
+                    >
+                      {currentFunction.methods?.map((item: string) => {
+                        return (
+                          <option value={item} key={item}>
+                            {item}
+                          </option>
+                        );
+                      })}
+                    </Select>
+                    <Button
+                      disabled={getFunctionDebugUrl() === ""}
+                      className="ml-2"
+                      onClick={() => runningCode()}
+                      bg="#E0F6F4"
+                      color="primary.500"
+                      isLoading={isLoading}
+                    >
+                      {t("FunctionPanel.Debug")}
+                    </Button>
+                  </div>
+                  <div className="mx-2 pb-2 mb-2">调用参数:</div>
+                  <JsonEditor
+                    onChange={(values) => {
+                      setParams(values || "{}");
                     }}
-                  >
-                    {currentFunction.methods?.map((item: string) => {
-                      return (
-                        <option value={item} key={item}>
-                          {item}
-                        </option>
-                      );
-                    })}
-                  </Select>
-                  <Button
-                    disabled={getFunctionDebugUrl() === ""}
-                    className="ml-2"
-                    onClick={() => runningCode()}
-                    bg="#E0F6F4"
-                    color="primary.500"
-                    isLoading={isLoading}
-                  >
-                    {t("FunctionPanel.Debug")}
-                  </Button>
+                    height="calc(100vh - 500px)"
+                    value={params}
+                  />
                 </div>
-                <div className="mx-2 pb-2 mb-2">调用参数:</div>
-                <JsonEditor
-                  onChange={(values) => {
-                    setParams(values || "{}");
-                  }}
-                  height="calc(100vh - 500px)"
-                  value={params}
-                />
+              </TabPanel>
+              {/* <TabPanel padding={0}>to be continued...</TabPanel> */}
+            </TabPanels>
+          </Tabs>
+        </Panel>
+      </Row>
+      <Row style={{ height: 500 }}>
+        <Panel>
+          <Panel.Header title="运行结果" />
+          <div className="relative flex-1 overflow-auto">
+            {isLoading ? (
+              <div className="absolute left-0 right-0">
+                <Center>
+                  <Spinner />
+                </Center>
               </div>
-            </TabPanel>
-            {/* <TabPanel padding={0}>to be continued...</TabPanel> */}
-          </TabPanels>
-        </Tabs>
-      </Panel>
-      <Panel>
-        <Panel.Header title="运行结果" />
-        <div className="relative flex-1 overflow-auto">
-          {isLoading ? (
-            <div className="absolute left-0 right-0">
-              <Center>
-                <Spinner />
-              </Center>
-            </div>
-          ) : null}
-          {runningResData ? (
-            <SyntaxHighlighter
-              language="json"
-              customStyle={{ background: "#fff", height: "280px" }}
-            >
-              {JSON.stringify(runningResData, null, 2)}
-            </SyntaxHighlighter>
-          ) : null}
-        </div>
-      </Panel>
+            ) : null}
+            {runningResData ? (
+              <SyntaxHighlighter
+                language="json"
+                customStyle={{ background: "#fff", height: "280px" }}
+              >
+                {JSON.stringify(runningResData, null, 2)}
+              </SyntaxHighlighter>
+            ) : null}
+          </div>
+        </Panel>
+      </Row>
     </>
   );
 }
diff --git a/web/src/pages/app/functions/mods/EditorPanel/index.tsx b/web/src/pages/app/functions/mods/EditorPanel/index.tsx
new file mode 100644
index 0000000000..c30de139d1
--- /dev/null
+++ b/web/src/pages/app/functions/mods/EditorPanel/index.tsx
@@ -0,0 +1,73 @@
+import { Center, HStack, Input } from "@chakra-ui/react";
+import { t } from "i18next";
+
+import CopyText from "@/components/CopyText";
+import FunctionEditor from "@/components/Editor/FunctionEditor";
+import Panel from "@/components/Panel";
+
+import useFunctionStore from "../../store";
+import DeployButton from "../DeployButton";
+
+import useFunctionCache from "@/hooks/useFuncitonCache";
+
+function EditorPanel() {
+  const store = useFunctionStore((store) => store);
+  const { currentFunction, updateFunctionCode, getFunctionDebugUrl } = store;
+
+  const functionCache = useFunctionCache();
+
+  return (
+    <Panel className="flex-1 flex-grow">
+      <Panel.Header style={{ borderBottom: "2px solid #F4F6F8" }} className="!mb-3">
+        <div className="flex items-center h-[50px]">
+          <span className="font-bold text-lg ml-2">
+            {currentFunction?.name}
+            <span className="ml-2 text-slate-400 font-normal">
+              {currentFunction?.desc ? currentFunction?.desc : ""}
+            </span>
+          </span>
+          <span className="ml-4 ">
+            {/* {currentFunction?.id &&
+          functionCache.getCache(currentFunction?.id) !== currentFunction?.source?.code && (
+            <div>
+              <Badge colorScheme="purple">{t("Editting...")}</Badge>
+            </div>
+          )} */}
+
+            {/* <FileStatusIcon status={FileStatus.deleted} /> */}
+          </span>
+        </div>
+
+        <HStack>
+          <CopyText className="ml-2" text={getFunctionDebugUrl()}>
+            <Input
+              size="sm"
+              bg="#F1F4F6"
+              border="none"
+              readOnly
+              rounded={4}
+              value={getFunctionDebugUrl()}
+            />
+          </CopyText>
+
+          <DeployButton />
+        </HStack>
+      </Panel.Header>
+      {currentFunction?.name ? (
+        <FunctionEditor
+          height="calc(100vh - 300px)"
+          path={currentFunction?.name || ""}
+          value={functionCache.getCache(currentFunction!.id)}
+          onChange={(value) => {
+            updateFunctionCode(currentFunction, value || "");
+            functionCache.setCache(currentFunction!.id, value || "");
+          }}
+        />
+      ) : (
+        <Center className="h-full">{t("FunctionPanel.EmptyText")}</Center>
+      )}
+    </Panel>
+  );
+}
+
+export default EditorPanel;
diff --git a/web/src/pages/app/functions/mods/FunctionPanel/index.tsx b/web/src/pages/app/functions/mods/FunctionPanel/index.tsx
index c60eda62eb..dbe4b3d876 100644
--- a/web/src/pages/app/functions/mods/FunctionPanel/index.tsx
+++ b/web/src/pages/app/functions/mods/FunctionPanel/index.tsx
@@ -72,7 +72,7 @@ export default function FunctionList() {
           />
         </div>
 
-        <SectionList style={{ height: "calc(100vh - 380px)", overflowY: "auto" }}>
+        <SectionList style={{ height: "calc(100vh - 420px)", overflowY: "auto" }}>
           {(allFunctionList || [])
             .filter((item: TFunction) => item?.name.includes(keywords))
             .map((func: any) => {
diff --git a/web/src/pages/app/functions/service.ts b/web/src/pages/app/functions/service.ts
index 0a97a87cb3..e1bb69a398 100644
--- a/web/src/pages/app/functions/service.ts
+++ b/web/src/pages/app/functions/service.ts
@@ -90,16 +90,17 @@ export const useDeleteFunctionMutation = () => {
 
 export const useCompileMutation = () => {
   const globalStore = useGlobalStore();
-  return useMutation(
-    (values: { code: string; name: string }) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationKey: ["compileMutation"],
+    mutationFn: (values: { code: string; name: string }) => {
       return FunctionControllerCompile(values);
     },
-    {
-      onSuccess(data) {
-        if (data.error) {
-          globalStore.showError(data.error);
-        }
-      },
+    onSuccess(data) {
+      if (data.error) {
+        globalStore.showError(data.error);
+      }
+      queryClient.setQueryData(["compileMutation"], data);
     },
-  );
+  });
 };
diff --git a/web/src/pages/app/logs/index.tsx b/web/src/pages/app/logs/index.tsx
index 15fd295888..470f8432b0 100644
--- a/web/src/pages/app/logs/index.tsx
+++ b/web/src/pages/app/logs/index.tsx
@@ -163,7 +163,7 @@ export default function LogsPage() {
                         </Td>
                         <Td maxWidth={"300px"}>
                           <pre className="text-green-700 max-h-[20px] overflow-hidden">
-                            {item.data}
+                            {(item.data as string).substring(0, 50)}
                           </pre>
                         </Td>
                         <Td width={"100px"}>
diff --git a/web/src/pages/app/storages/index.tsx b/web/src/pages/app/storages/index.tsx
index 6b90f53f48..58ba7a730d 100644
--- a/web/src/pages/app/storages/index.tsx
+++ b/web/src/pages/app/storages/index.tsx
@@ -19,7 +19,9 @@ export default function StoragePage() {
   return (
     <Content>
       <Row>
-        <StorageListPanel />
+        <Col className="max-w-[300px]">
+          <StorageListPanel />
+        </Col>
         <Col>
           {currentStorage === undefined ? (
             <div className="h-full flex items-center  justify-center">
diff --git a/web/src/pages/app/storages/mods/StorageListPanel/index.tsx b/web/src/pages/app/storages/mods/StorageListPanel/index.tsx
index 11c7e7059b..8bd3d9db93 100644
--- a/web/src/pages/app/storages/mods/StorageListPanel/index.tsx
+++ b/web/src/pages/app/storages/mods/StorageListPanel/index.tsx
@@ -10,7 +10,6 @@ import {
 } from "@chakra-ui/react";
 
 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";
@@ -40,101 +39,99 @@ export default function StorageListPanel() {
   });
 
   return (
-    <Col className=" max-w-[300px]">
-      <Panel>
-        <Panel.Header
-          title="云存储"
-          actions={[
-            <CreateBucketModal key="create_modal">
-              <IconWrap size={20} tooltip="创建 Bucket">
-                <AddIcon fontSize={10} />
-              </IconWrap>
-            </CreateBucketModal>,
-          ]}
-        />
-        <div className="w-full">
-          <InputGroup className="mb-4">
-            <InputLeftElement
-              height={"8"}
-              pointerEvents="none"
-              children={<Search2Icon color="gray.300" />}
-            />
-            <Input
-              rounded={"full"}
-              placeholder="输入bucket名进行搜索"
-              size="sm"
-              bg={"gray.100"}
-              onChange={(e) => setSearch(e.target.value)}
-            />
-          </InputGroup>
-          <SectionList style={{ height: "calc(100vh - 260px)", overflow: "auto" }}>
-            {(bucketListQuery?.data?.data?.items || [])
-              .filter((storage: any) => storage?.metadata?.name.indexOf(search) >= 0)
-              .map((storage: TBucket) => {
-                return (
-                  <SectionList.Item
-                    isActive={storage?.metadata?.name === store.currentStorage?.metadata?.name}
-                    key={storage?.metadata?.name}
-                    className="group"
-                    onClick={() => {
-                      store.setCurrentStorage(storage);
-                      store.setPrefix("/");
-                    }}
-                  >
-                    <div className="relative flex-1">
-                      <div className="flex justify-between">
-                        <div>
-                          <FileTypeIcon type={FileType.bucket} />
-                          <span className="ml-2 text-base">{storage.metadata?.name}</span>
-                        </div>
-
-                        <Tag
-                          size="sm"
-                          className="w-16 justify-center"
-                          variant={storage?.spec?.policy}
-                        >
-                          {storage?.spec?.policy}
-                        </Tag>
+    <Panel>
+      <Panel.Header
+        title="云存储"
+        actions={[
+          <CreateBucketModal key="create_modal">
+            <IconWrap size={20} tooltip="创建 Bucket">
+              <AddIcon fontSize={10} />
+            </IconWrap>
+          </CreateBucketModal>,
+        ]}
+      />
+      <div className="w-full">
+        <InputGroup className="mb-4">
+          <InputLeftElement
+            height={"8"}
+            pointerEvents="none"
+            children={<Search2Icon color="gray.300" />}
+          />
+          <Input
+            rounded={"full"}
+            placeholder="输入bucket名进行搜索"
+            size="sm"
+            bg={"gray.100"}
+            onChange={(e) => setSearch(e.target.value)}
+          />
+        </InputGroup>
+        <SectionList style={{ height: "calc(100vh - 260px)", overflow: "auto" }}>
+          {(bucketListQuery?.data?.data?.items || [])
+            .filter((storage: any) => storage?.metadata?.name.indexOf(search) >= 0)
+            .map((storage: TBucket) => {
+              return (
+                <SectionList.Item
+                  isActive={storage?.metadata?.name === store.currentStorage?.metadata?.name}
+                  key={storage?.metadata?.name}
+                  className="group"
+                  onClick={() => {
+                    store.setCurrentStorage(storage);
+                    store.setPrefix("/");
+                  }}
+                >
+                  <div className="relative flex-1">
+                    <div className="flex justify-between">
+                      <div>
+                        <FileTypeIcon type={FileType.bucket} />
+                        <span className="ml-2 text-base">{storage.metadata?.name}</span>
                       </div>
+
+                      <Tag
+                        size="sm"
+                        className="w-16 justify-center"
+                        variant={storage?.spec?.policy}
+                      >
+                        {storage?.spec?.policy}
+                      </Tag>
                     </div>
-                    <div className="invisible flex group-hover:visible">
-                      <CreateBucketModal storage={storage}>
-                        <IconWrap size={20} tooltip="编辑Bucket">
-                          <EditIcon fontSize={10} />
-                        </IconWrap>
-                      </CreateBucketModal>
-                      <DeleteBucketModal
-                        storage={storage}
-                        onSuccessAction={() => {
-                          if (storage.metadata.name === store.currentStorage?.metadata.name) {
-                            store.setCurrentStorage(bucketListQuery?.data?.data?.items[0]);
-                          }
-                        }}
-                      />
-                    </div>
-                  </SectionList.Item>
-                );
-              })}
-          </SectionList>
-          <div className="bg-gray-100 w-full rounded-md flex p-4 justify-around h-32">
+                  </div>
+                  <div className="invisible flex group-hover:visible">
+                    <CreateBucketModal storage={storage}>
+                      <IconWrap size={20} tooltip="编辑Bucket">
+                        <EditIcon fontSize={10} />
+                      </IconWrap>
+                    </CreateBucketModal>
+                    <DeleteBucketModal
+                      storage={storage}
+                      onSuccessAction={() => {
+                        if (storage.metadata.name === store.currentStorage?.metadata.name) {
+                          store.setCurrentStorage(bucketListQuery?.data?.data?.items[0]);
+                        }
+                      }}
+                    />
+                  </div>
+                </SectionList.Item>
+              );
+            })}
+        </SectionList>
+        <div className="bg-gray-100 w-full rounded-md flex p-4 justify-around h-32">
+          <div>
+            <CircularProgress color="primary.500" value={30} size="90px">
+              <CircularProgressLabel>20%</CircularProgressLabel>
+            </CircularProgress>
+          </div>
+          <div>
             <div>
-              <CircularProgress color="primary.500" value={30} size="90px">
-                <CircularProgressLabel>20%</CircularProgressLabel>
-              </CircularProgress>
+              <span className={"before:bg-error " + styles.circle}>总容量</span>
+              <p className="text-lg">{globalStore.currentApp?.oss.spec.capacity.storage}</p>
             </div>
-            <div>
-              <div>
-                <span className={"before:bg-error " + styles.circle}>总容量</span>
-                <p className="text-lg">{globalStore.currentApp?.oss.spec.capacity.storage}</p>
-              </div>
-              <div className="mt-4">
-                <span className={"before:bg-primary " + styles.circle}>已使用</span>
-                <p className="text-lg">1Gi</p>
-              </div>
+            <div className="mt-4">
+              <span className={"before:bg-primary " + styles.circle}>已使用</span>
+              <p className="text-lg">1Gi</p>
             </div>
           </div>
         </div>
-      </Panel>
-    </Col>
+      </div>
+    </Panel>
   );
 }
diff --git a/web/src/pages/customSetting.ts b/web/src/pages/customSetting.ts
new file mode 100644
index 0000000000..41daf4f67b
--- /dev/null
+++ b/web/src/pages/customSetting.ts
@@ -0,0 +1,89 @@
+import React from "react";
+import create from "zustand";
+import { devtools } from "zustand/middleware";
+import { immer } from "zustand/middleware/immer";
+
+type TLayoutConfig = {
+  style: React.CSSProperties;
+};
+
+type functionPanel = "SiderBar" | "RightPanel" | "DependencePanel" | "ConsolePanel" | "Bottom";
+type collectionPanel = "SiderBar" | "Bottom";
+type page = "functionPage" | "collectionPage";
+
+type State = {
+  layoutInfo: {
+    functionPage: {
+      // eslint-disable-next-line no-unused-vars
+      [K in functionPanel]: TLayoutConfig;
+    };
+    collectionPage: {
+      // eslint-disable-next-line no-unused-vars
+      [K in collectionPanel]: TLayoutConfig;
+    };
+  };
+
+  togglePanel: (pageId: page, panelId: functionPanel) => void;
+};
+
+const useCustomSettingStore = create<State>()(
+  devtools(
+    immer((set, get) => ({
+      layoutInfo: {
+        functionPage: {
+          SiderBar: {
+            style: {
+              width: 300,
+            },
+          },
+
+          RightPanel: {
+            style: {
+              width: 500,
+            },
+          },
+
+          DependencePanel: {
+            style: {
+              width: 300,
+            },
+          },
+
+          ConsolePanel: {
+            style: {
+              height: 200,
+            },
+          },
+          Bottom: {
+            style: {
+              height: 40,
+            },
+          },
+        },
+
+        collectionPage: {
+          SiderBar: {
+            style: {
+              width: 300,
+            },
+          },
+          Bottom: {
+            style: {
+              height: 40,
+            },
+          },
+        },
+      },
+
+      togglePanel: (pageId, panelId) => {
+        set((state: any) => {
+          const display = state.layoutInfo[pageId];
+          state.layoutInfo[pageId][panelId].style.display =
+            display[panelId].style.display === "none" ? "block" : "none";
+        });
+      },
+    })),
+  ),
+);
+
+export default useCustomSettingStore;

From b6730ffd95702dff5dc55caef9cdc0d81c11a6fb Mon Sep 17 00:00:00 2001
From: allence <lizhenq2009@gmail.com>
Date: Thu, 12 Jan 2023 20:00:24 +0800
Subject: [PATCH 2/2] update: add func

---
 web/src/components/Editor/JsonEditor.tsx               |  3 +--
 web/src/pages/app/functions/mods/DebugPannel/index.tsx |  8 ++++----
 web/src/pages/app/functions/mods/EditorPanel/index.tsx |  6 +++---
 .../pages/app/functions/mods/FunctionPanel/index.tsx   |  4 ++--
 web/src/pages/app/functions/store.ts                   | 10 ----------
 web/src/pages/customSetting.ts                         |  2 +-
 6 files changed, 11 insertions(+), 22 deletions(-)

diff --git a/web/src/components/Editor/JsonEditor.tsx b/web/src/components/Editor/JsonEditor.tsx
index aa6fc7c209..867c46d09b 100644
--- a/web/src/components/Editor/JsonEditor.tsx
+++ b/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()) {
diff --git a/web/src/pages/app/functions/mods/DebugPannel/index.tsx b/web/src/pages/app/functions/mods/DebugPannel/index.tsx
index d47dbc37ff..3d6feb0fe0 100644
--- a/web/src/pages/app/functions/mods/DebugPannel/index.tsx
+++ b/web/src/pages/app/functions/mods/DebugPannel/index.tsx
@@ -27,7 +27,7 @@ import useHotKey, { DEFAULT_SHORTCUTS } from "@/hooks/useHotKey";
 import useGlobalStore from "@/pages/globalStore";
 
 export default function DebugPanel() {
-  const { getFunctionDebugUrl, currentFunction, setCurrentRequestId } = useFunctionStore(
+  const { getFunctionUrl, currentFunction, setCurrentRequestId } = useFunctionStore(
     (state) => state,
   );
 
@@ -71,7 +71,7 @@ export default function DebugPanel() {
         const func_data = JSON.stringify(compileRes.data);
         const body_params = JSON.parse(params);
         const res = await axios({
-          url: getFunctionDebugUrl(),
+          url: getFunctionUrl(),
           method: runningMethod,
           data: body_params,
           headers: {
@@ -112,7 +112,7 @@ export default function DebugPanel() {
                       width="150px"
                       size="sm"
                       value={runningMethod}
-                      disabled={getFunctionDebugUrl() === ""}
+                      disabled={getFunctionUrl() === ""}
                       onChange={(e) => {
                         setRunningMethod(e.target.value);
                       }}
@@ -126,7 +126,7 @@ export default function DebugPanel() {
                       })}
                     </Select>
                     <Button
-                      disabled={getFunctionDebugUrl() === ""}
+                      disabled={getFunctionUrl() === ""}
                       className="ml-2"
                       onClick={() => runningCode()}
                       bg="#E0F6F4"
diff --git a/web/src/pages/app/functions/mods/EditorPanel/index.tsx b/web/src/pages/app/functions/mods/EditorPanel/index.tsx
index c30de139d1..bda0dc3738 100644
--- a/web/src/pages/app/functions/mods/EditorPanel/index.tsx
+++ b/web/src/pages/app/functions/mods/EditorPanel/index.tsx
@@ -12,7 +12,7 @@ import useFunctionCache from "@/hooks/useFuncitonCache";
 
 function EditorPanel() {
   const store = useFunctionStore((store) => store);
-  const { currentFunction, updateFunctionCode, getFunctionDebugUrl } = store;
+  const { currentFunction, updateFunctionCode, getFunctionUrl } = store;
 
   const functionCache = useFunctionCache();
 
@@ -39,14 +39,14 @@ function EditorPanel() {
         </div>
 
         <HStack>
-          <CopyText className="ml-2" text={getFunctionDebugUrl()}>
+          <CopyText className="ml-2" text={getFunctionUrl()}>
             <Input
               size="sm"
               bg="#F1F4F6"
               border="none"
               readOnly
               rounded={4}
-              value={getFunctionDebugUrl()}
+              value={getFunctionUrl()}
             />
           </CopyText>
 
diff --git a/web/src/pages/app/functions/mods/FunctionPanel/index.tsx b/web/src/pages/app/functions/mods/FunctionPanel/index.tsx
index dbe4b3d876..57c826e3da 100644
--- a/web/src/pages/app/functions/mods/FunctionPanel/index.tsx
+++ b/web/src/pages/app/functions/mods/FunctionPanel/index.tsx
@@ -31,7 +31,7 @@ export default function FunctionList() {
 
   const { currentApp } = useGlobalStore();
 
-  const { id: functionId } = useParams();
+  const { id: functionName } = useParams();
   const navigate = useNavigate();
 
   useFunctionListQuery({
@@ -39,7 +39,7 @@ export default function FunctionList() {
       setAllFunctionList(data.data);
       if (!currentFunction?.id && data.data.length > 0) {
         const currentFunction =
-          data.data.find((item: TFunction) => item.id === functionId) || data.data[0];
+          data.data.find((item: TFunction) => item.name === functionName) || data.data[0];
         setCurrentFunction(currentFunction);
         navigate(`/app/${currentApp?.appid}/${Pages.function}/${currentFunction?.name}`, {
           replace: true,
diff --git a/web/src/pages/app/functions/store.ts b/web/src/pages/app/functions/store.ts
index 399b9777e6..3c45122cce 100644
--- a/web/src/pages/app/functions/store.ts
+++ b/web/src/pages/app/functions/store.ts
@@ -11,7 +11,6 @@ type State = {
   currentRequestId: string | undefined;
   functionCodes: { [key: string]: string };
   getFunctionUrl: () => string;
-  getFunctionDebugUrl: () => string;
 
   setCurrentRequestId: (requestId: string | undefined) => void;
   setAllFunctionList: (funcionList: TFunction[]) => void;
@@ -36,15 +35,6 @@ const useFunctionStore = create<State>()(
           : "";
       },
 
-      getFunctionDebugUrl: () => {
-        const currentApp = useGlobalStore.getState().currentApp;
-        const currentFunction = get().currentFunction;
-
-        return currentFunction?.name
-          ? `http://${currentApp?.gateway.status.appRoute.domain}/${currentFunction?.name}`
-          : "";
-      },
-
       setCurrentRequestId: (requestId) => {
         set((state) => {
           state.currentRequestId = requestId;
diff --git a/web/src/pages/customSetting.ts b/web/src/pages/customSetting.ts
index 41daf4f67b..d4cbbd68c0 100644
--- a/web/src/pages/customSetting.ts
+++ b/web/src/pages/customSetting.ts
@@ -39,7 +39,7 @@ const useCustomSettingStore = create<State>()(
 
           RightPanel: {
             style: {
-              width: 500,
+              width: "350px",
             },
           },