优化样式兼容性

app/components/home.module.scss

@@ -113,6 +113,12 @@
     min-width: unset;
     border: 0;
     border-radius: 0;
+    position: relative;
+  }
+
+  .window-content {
+    position: relative;
+    z-index: 1;
   }
 
   .sidebar {
@@ -121,6 +127,7 @@
     z-index: 1000;
     height: var(--full-height);
     transition: all ease 0.3s;
+    -webkit-transition: all ease 0.3s;
     box-shadow: none;
   }
 
@@ -137,6 +144,7 @@
     background: rgba(0, 0, 0, 0.5);
     z-index: 999;
     animation: fadeIn 0.2s ease-out;
+    -webkit-animation: fadeIn 0.2s ease-out;
   }
 
   @keyframes fadeIn {
@@ -148,25 +156,42 @@
     }
   }
 
+  @-webkit-keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
   .mobile-menu-button {
     position: absolute;
     top: 12px;
     left: 12px;
-    z-index: 100;
+    z-index: 1000;
+    display: block;
+    visibility: visible;
+    opacity: 1;
   }
 
   .menu-trigger-button {
     width: 40px;
     height: 40px;
-    display: flex;
+    display: flex !important;
     align-items: center;
     justify-content: center;
     transition: background-color 0.15s ease;
+    -webkit-transition: background-color 0.15s ease;
 
     .anticon {
       font-size: 20px;
       color: #333;
       transition: color 0.15s ease;
+      -webkit-transition: color 0.15s ease;
+      display: block !important;
+      visibility: visible !important;
+      opacity: 1 !important;
     }
 
     &:hover {
@@ -180,6 +205,7 @@
     &:active {
       background-color: rgba(0, 0, 0, 0.04);
       transition: none;
+      -webkit-transition: none;
     }
   }
 

app/components/home.tsx

@@ -258,6 +258,19 @@ function Screen() {
     setShowSidebar(false);
   }, [location.pathname]);
 
+  // 监听侧边栏关闭事件（从子组件触发）
+  useEffect(() => {
+    const handleCloseMobileSidebar = () => {
+      setShowSidebar(false);
+    };
+
+    window.addEventListener('closeMobileSidebar', handleCloseMobileSidebar);
+
+    return () => {
+      window.removeEventListener('closeMobileSidebar', handleCloseMobileSidebar);
+    };
+  }, []);
+
   if (isArtifact) {
     return (
       <Routes>
@@ -291,12 +304,13 @@ function Screen() {
         )}
         <WindowContent>
           {isMobileScreen && location.pathname !== '/' && !location.search.includes('showMenu=false') && (
-            <div className={styles["mobile-menu-button"]}>
+            <div className={styles["mobile-menu-button"]} style={{ display: 'block' }}>
               <Button
                 type="text"
                 icon={<MenuOutlined />}
                 onClick={() => setShowSidebar(!showSidebar)}
                 className={styles["menu-trigger-button"]}
+                style={{ display: 'flex' }}
               />
             </div>
           )}

app/components/sidebar.tsx

@@ -387,6 +387,12 @@ export const SideBar = (props: { className?: string }) => {
                 style={{ width: '100%' }}
                 type="primary"
                 onClick={async () => {
+                  // 移动端关闭侧边栏
+                  const isMobile = window.innerWidth <= 600;
+                  if (isMobile) {
+                    const mobileMenuEvent = new CustomEvent('closeMobileSidebar');
+                    window.dispatchEvent(mobileMenuEvent);
+                  }
                   chatStore.clearSessions();
                   chatStore.updateCurrentSession((value) => {
                     value.appId = globalStore.selectedAppId;
@@ -414,6 +420,12 @@ export const SideBar = (props: { className?: string }) => {
           <Menu
             style={{ border: 'none' }}
             onClick={async ({ key }) => {
+              // 移动端关闭侧边栏
+              const isMobile = window.innerWidth <= 600;
+              if (isMobile) {
+                const mobileMenuEvent = new CustomEvent('closeMobileSidebar');
+                window.dispatchEvent(mobileMenuEvent);
+              }
               let url = ``;
               if (getType() === 'bigModel') {
                 if (chatStore.chatMode === 'LOCAL') {