H5 sidebar 侧边栏弹出逻辑和样式优化

app/components/home.module.scss

@@ -128,6 +128,61 @@
     left: 0;
   }
 
+  .sidebar-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+    animation: fadeIn 0.2s ease-out;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  .mobile-menu-button {
+    position: absolute;
+    top: 12px;
+    left: 12px;
+    z-index: 100;
+  }
+
+  .menu-trigger-button {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.15s ease;
+
+    .anticon {
+      font-size: 20px;
+      color: #333;
+      transition: color 0.15s ease;
+    }
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.04);
+
+      .anticon {
+        color: #666;
+      }
+    }
+
+    &:active {
+      background-color: rgba(0, 0, 0, 0.04);
+      transition: none;
+    }
+  }
+
   .mobile {
     display: block;
   }

app/components/home.tsx

@@ -22,6 +22,8 @@ import { AuthPage } from "./auth";
 import { getClientConfig } from "../config/client";
 import { type ClientApi, getClientApi } from "../client/api";
 import { useAccessStore } from "../store";
+import { Button } from "antd";
+import { MenuOutlined } from "@ant-design/icons";
 
 export function Loading() {
   /** second版本注释掉进度条 */
@@ -241,8 +243,9 @@ function Screen() {
   const isArtifact = location.pathname.includes(Path.Artifacts);
   const isAuth = location.pathname === Path.Auth;
 
-
   const isMobileScreen = useMobileScreen();
+  const [showSidebar, setShowSidebar] = useState(false);
+
   const shouldTightBorder =
     getClientConfig()?.isApp || (config.tightBorder && !isMobileScreen);
 
@@ -250,6 +253,11 @@ function Screen() {
     loadAsyncGoogleFont();
   }, []);
 
+  // 路由切换时关闭侧边栏
+  useEffect(() => {
+    setShowSidebar(false);
+  }, [location.pathname]);
+
   if (isArtifact) {
     return (
       <Routes>
@@ -261,14 +269,37 @@ function Screen() {
   const renderContent = () => {
     if (isAuth) return <AuthPage />;
 
-
     return (
       <>
-        {
-          location.pathname !== '/' &&
-          <SideBar className={(location.pathname === '/knowledgeChat' || location.pathname === '/deepseekChat') ? styles["sidebar-show"] : ""} />
-        }
+        {location.pathname !== '/' && !location.search.includes('showMenu=false') && (
+          <>
+            <SideBar
+              className={
+                (isMobileScreen && showSidebar) ||
+                (!isMobileScreen && (location.pathname === '/knowledgeChat' || location.pathname === '/deepseekChat'))
+                  ? styles["sidebar-show"]
+                  : ""
+              }
+            />
+            {isMobileScreen && showSidebar && (
+              <div
+                className={styles["sidebar-mask"]}
+                onClick={() => setShowSidebar(false)}
+              />
+            )}
+          </>
+        )}
         <WindowContent>
+          {isMobileScreen && location.pathname !== '/' && !location.search.includes('showMenu=false') && (
+            <div className={styles["mobile-menu-button"]}>
+              <Button
+                type="text"
+                icon={<MenuOutlined />}
+                onClick={() => setShowSidebar(!showSidebar)}
+                className={styles["menu-trigger-button"]}
+              />
+            </div>
+          )}
           <Routes>
             <Route path='/' element={<HomeApp />} />
             <Route path='/knowledgeChat' element={<Chat />} />

app/components/sidebar.tsx

@@ -102,7 +102,7 @@ export function useDragSideBar() {
     const barWidth = shouldNarrow
       ? NARROW_SIDEBAR_WIDTH
       : limit(config.sidebarWidth ?? DEFAULT_SIDEBAR_WIDTH);
-    const sideBarWidth = isMobileScreen ? "100vw" : `${barWidth}px`;
+    const sideBarWidth = isMobileScreen ? "60vw" : `${barWidth}px`;
     document.documentElement.style.setProperty("--sidebar-width", sideBarWidth);
   }, [config.sidebarWidth, isMobileScreen, shouldNarrow]);
 
@@ -522,4 +522,4 @@ export const SideBar = (props: { className?: string }) => {
       }
     </>
   );
-}
+}