fix(web): remove bottom panel (#862)

* fix(web): remove bottom panel (cherry picked from commit aa55aaf7584f27a81b7a3f0a376a1816b7727d0e) * feat(web): add persist data version * refactor(web): resize style
labring · Mar 6, 2023 · 3a6786c · 3a6786c
1 parent 00d0a6e
commit 3a6786c
Show file tree

Hide file tree

Showing 10 changed files with 35 additions and 44 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/src/App.css b/web/src/App.css
@@ -9,17 +9,16 @@
 /* 设置滚动条的样式 */
 ::-webkit-scrollbar {
   width: 4px;
+  height: 6px;
 }
 /* 滚动槽 */
 ::-webkit-scrollbar-track {
-  box-shadow: inset006pxrgba(0, 0, 0, 0.3);
   border-radius: 2px;
 }
 /* 滚动条滑块 */
 ::-webkit-scrollbar-thumb {
   border-radius: 4px;
   background: rgba(0, 0, 0, 0.5);
-  box-shadow: inset006pxrgba(0, 0, 0, 0.5);
 }
 
 html,

diff --git a/web/src/components/Resize/index.tsx b/web/src/components/Resize/index.tsx
@@ -44,7 +44,7 @@ export default function Resize(props: {
           }
           {...separatorProps}
         >
-          <Center className="w-full h-full">
+          <Center className="w-full h-full relative">
             {type === "x" && width <= 20 ? (
               <div
                 className={clsx(
@@ -55,14 +55,22 @@ export default function Resize(props: {
                 {reverse ? <ChevronLeftIcon fontSize={10} /> : <ChevronRightIcon fontSize={10} />}
               </div>
             ) : (
-              <div
-                className={clsx(
-                  type === "x" && isDragging ? "h-full " : "h-0",
-                  type === "y" && isDragging ? "w-full " : "w-0",
-                  isDragging ? " border-primary-400 " : "",
-                  "border-l-2 border-t-2 transition-all",
-                )}
-              ></div>
+              <>
+                <div
+                  className={clsx(
+                    type === "x" && isDragging ? "h-full " : "h-0",
+                    type === "y" && isDragging ? "w-full " : "w-0",
+                    isDragging ? " border-primary-400 border" : "",
+                    "transition-all absolute z-10 overflow-hidden",
+                  )}
+                ></div>
+                <div
+                  className={clsx(
+                    type === "x" ? "h-[18px]" : "w-[18px]",
+                    " border rounded border-slate-300 absolute",
+                  )}
+                ></div>
+              </>
             )}
           </Center>
         </div>

diff --git a/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx b/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx
@@ -257,13 +257,12 @@ export default function DataPanel() {
                   showBg
                   tooltip={t("Copy").toString()}
                   size={32}
-                  className="ml-2 hover:bg-rose-100 group/icon"
+                  className="ml-2 hover:bg-gray-200 group/icon"
                 >
                   <CopyText
                     hideToolTip
                     text={JSON.stringify(newData, null, 2)}
                     tip={String(t("Copied"))}
-                    className="group-hover/icon:text-error-500"
                   >
                     <CopyIcon />
                   </CopyText>

diff --git a/web/src/pages/app/database/index.tsx b/web/src/pages/app/database/index.tsx
@@ -8,7 +8,6 @@ import { Col, Row } from "@/components/Grid";
 import Panel from "@/components/Panel";
 import Resize from "@/components/Resize";
 
-import BottomPanel from "./BottomPanel";
 import CollectionDataList from "./CollectionDataList";
 import CollectionListPanel from "./CollectionListPanel";
 import PolicyDataList from "./PolicyDataList";
@@ -44,9 +43,6 @@ function DatabasePage() {
           </Panel>
         </Col>
       </Row>
-      <Row {...settingStore.layoutInfo.collectionPage.Bottom}>
-        <BottomPanel />
-      </Row>
     </Content>
   );
 }

diff --git a/web/src/pages/app/functions/index.tsx b/web/src/pages/app/functions/index.tsx
@@ -8,7 +8,6 @@ import Content from "@/components/Content";
 import { Col, Row } from "@/components/Grid";
 import Resize from "@/components/Resize";
 
-import BottomPanel from "./mods/BottomPanel";
 import ConsolePanel from "./mods/ConsolePanel";
 import DebugPanel from "./mods/DebugPanel";
 import DependencePanel from "./mods/DependencePanel";
@@ -62,9 +61,6 @@ function FunctionPage() {
           <DebugPanel containerRef={containerRef} />
         </Col>
       </Row>
-      <Row {...functionPageConfig.Bottom}>
-        <BottomPanel />
-      </Row>
     </Content>
   );
 }

diff --git a/web/src/pages/app/functions/mods/EditorPanel/index.tsx b/web/src/pages/app/functions/mods/EditorPanel/index.tsx
@@ -24,9 +24,9 @@ function EditorPanel() {
   const functionListQuery = useFunctionListQuery();
 
   return (
-    <Panel className="flex-1 flex-grow">
+    <Panel className="flex-1 flex-grow px-0">
       {currentFunction?.name ? (
-        <Panel.Header style={{ borderBottom: "2px solid #F4F6F8" }} className="!mb-3 h-[50px]">
+        <Panel.Header style={{ borderBottom: "2px solid #F4F6F8" }} className="!mb-3 h-[50px] px-2">
           <HStack maxW={"60%"} spacing={2}>
             <CopyText className="font-bold text-lg" text={currentFunction?.name}>
               <span>{currentFunction?.name}</span>

diff --git a/web/src/pages/app/mods/SideBar/index.tsx b/web/src/pages/app/mods/SideBar/index.tsx
@@ -2,7 +2,7 @@
  * cloud functions SideBar menu
  ***************************/
 
-import { useCallback, useEffect } from "react";
+import { useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { Center } from "@chakra-ui/react";
 import clsx from "clsx";
@@ -28,18 +28,9 @@ export default function SideBar() {
   const navigate = useNavigate();
   const { currentApp, setCurrentPage, userInfo } = useGlobalStore();
 
-  const blockLeavePage = useCallback((pageId: any) => {
-    if (window.location.pathname.includes("/function") && pageId !== "function") {
-      // eslint-disable-next-line no-alert
-      return pageId === "" ? true : !window.confirm(String(t("FunctionPanel.LeaveFunctionPage")));
-    } else {
-      return false;
-    }
-  }, []);
-
   useEffect(() => {
     const handleTabClose = (event: any) => {
-      if (blockLeavePage("")) {
+      if (pageId === Pages.function) {
         event.preventDefault();
         event.returnValue = "";
       }
@@ -48,7 +39,7 @@ export default function SideBar() {
     return () => {
       window.removeEventListener("beforeunload", handleTabClose);
     };
-  }, [blockLeavePage]);
+  }, [pageId]);
 
   const ICONS: TIcon[] = [
     {
@@ -117,9 +108,7 @@ export default function SideBar() {
                     }}
                     className="cursor-pointer"
                     onClick={() => {
-                      if (!blockLeavePage(item.pageId)) {
-                        navigate("/");
-                      }
+                      navigate("/");
                     }}
                   >
                     {item.component}
@@ -135,10 +124,8 @@ export default function SideBar() {
                   })}
                   onClick={() => {
                     if (item.name !== undefined) {
-                      if (!blockLeavePage(item.pageId)) {
-                        setCurrentPage(item.pageId);
-                        navigate(`/app/${currentApp?.appid}/${item.pageId}`);
-                      }
+                      setCurrentPage(item.pageId);
+                      navigate(`/app/${currentApp?.appid}/${item.pageId}`);
                     }
                   }}
                 >

diff --git a/web/src/pages/customSetting.ts b/web/src/pages/customSetting.ts
@@ -154,7 +154,11 @@ const useCustomSettingStore = create<State>()(
           });
         },
       })),
-      { name: "laf_custom_setting" },
+
+      {
+        name: "laf_custom_setting",
+        version: 1,
+      },
     ),
   ),
 );

diff --git a/web/src/pages/globalStore.ts b/web/src/pages/globalStore.ts
@@ -141,6 +141,7 @@ const useGlobalStore = create<State>()(
           position: "top",
           title: text,
           status: "success",
+          variant: "subtle",
           duration: 1000,
           containerStyle: {
             maxWidth: "100%",
@@ -154,6 +155,7 @@ const useGlobalStore = create<State>()(
           position: "top",
           title: text,
           status: "error",
+          variant: "subtle",
           duration: 1500,
           containerStyle: {
             maxWidth: "100%",
-Original file line number
+Diff line change
@@ Expand Up / @@ -154,7 +154,11 @@ const useCustomSettingStore = create<State>()( @@
               });
             },
           })),
-          { name: "laf_custom_setting" },
+          {
+            name: "laf_custom_setting",
+            version: 1,
+          },
         ),
       ),
     );
@@ Expand Down @@