修改首页 菜单栏样式、Sidebar菜单样式

app/components/DeekSeekHome.tsx

@@ -52,6 +52,7 @@ const DeekSeek: React.FC = () => {
             ],
             "title": "专业知识"
         },
+
         {
             "children": [
                 {
@@ -75,6 +76,7 @@ const DeekSeek: React.FC = () => {
             ],
             "title": "职能管理"
         },
+        
         {
             "children": [],
             "title": "项目级应用"
@@ -156,6 +158,14 @@ const DeekSeek: React.FC = () => {
                                         };
                                     })
                                 }}
+                                overlayClassName="deekSeek-dropdown"
+                                placement="bottomLeft"
+                                getPopupContainer={(triggerNode) => {
+                                    if (isMobileScreen) {
+                                        return document.body;
+                                    }
+                                    return triggerNode.parentElement || document.body;
+                                }}
                                 key={index}
                             >
                                 <div style={{ whiteSpace: 'nowrap', marginRight: 20, color: '#fff', cursor: 'pointer' }}>

app/components/home.module.scss

@@ -105,6 +105,17 @@
   display: none;
 }
 
+.sidebar-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  height: var(--full-height);
+  background-color: rgba(0, 0, 0, 0.35);
+  backdrop-filter: blur(2px);
+  z-index: 900;
+  transition: opacity 0.2s ease;
+}
+
 @media only screen and (max-width: 600px) {
   .container {
     min-height: unset;
@@ -124,6 +135,16 @@
     box-shadow: none;
   }
 
+  .sidebar-action-group {
+    gap: 8px;
+
+    .sidebar-action-button {
+      flex: 1 1 calc(50% - 4px);
+      min-width: 0;
+      height: 40px;
+    }
+  }
+
   .sidebar-show {
     left: 0;
   }
@@ -131,6 +152,10 @@
   .mobile {
     display: block;
   }
+
+  .sidebar-overlay {
+    display: block;
+  }
 }
 
 .sidebar-header {
@@ -169,6 +194,26 @@
   overflow-x: hidden;
 }
 
+.sidebar-action-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.sidebar-action-group:last-child {
+  margin-bottom: 0;
+}
+
+.sidebar-action-button {
+  flex: 1 1 calc(50% - 6px);
+  min-width: 150px;
+  height: 36px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
 .chat-item {
   padding: 10px 14px;
   background-color: var(--white);
@@ -260,6 +305,18 @@
     }
   }
 
+  .sidebar-action-group {
+    flex-direction: column;
+    flex-wrap: nowrap;
+    gap: 10px;
+
+    .sidebar-action-button {
+      flex-basis: 100%;
+      min-width: unset;
+      width: 100%;
+    }
+  }
+
   .chat-item {
     padding: 0;
     min-height: 50px;

app/components/sidebar.tsx

@@ -103,7 +103,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]);
 
@@ -529,8 +529,20 @@ export const SideBar = (props: { className?: string }) => {
 
   const [drawerType, setDrawerType] = useState<'all' | 'collect'>('all');
 
+  const closeSidebar = () => {
+    globalStore.setShowMenu(false);
+  };
+
   return (
     <>
+      {
+        isMobileScreen && globalStore.showMenu && (
+          <div
+            className={styles["sidebar-overlay"]}
+            onClick={closeSidebar}
+          />
+        )
+      }
       {
         globalStore.showMenu &&
         <SideBarContainer
@@ -546,7 +558,7 @@ export const SideBar = (props: { className?: string }) => {
           }
           <SideBarHeader
             title={getType() === 'bigModel' ?
-              <div style={{ display: 'flex', alignItems: 'center' }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                 {
                   isMobileScreen && <div>
                     <Button
@@ -558,22 +570,17 @@ export const SideBar = (props: { className?: string }) => {
                     />
                   </div>
                 }
-                问答历史
+                <img style={{ height: 32 }} src={faviconSrc.src} />
+                <span>建科•小智</span>
               </div>
               :
               ''
             }
-            logo={getType() === 'bigModel' ? <img style={{ height: 40 }} src={faviconSrc.src} /> : ''}
+            logo={getType() === 'bigModel' ? null : ''}
           >
-            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10, gap: 8 }}>
+            <div className={styles["sidebar-action-group"]}>
               <Button
-                style={{ 
-                  width: '48%', 
-                  height: 36,
-                  borderRadius: 6,
-                  fontSize: 14,
-                  fontWeight: 500
-                }}
+                className={styles["sidebar-action-button"]}
                 icon={<HomeOutlined />}
                 onClick={() => {
                   navigate({ pathname: '/' });
@@ -582,13 +589,7 @@ export const SideBar = (props: { className?: string }) => {
                 回到首页
               </Button>
               <Button
-                style={{ 
-                  width: '48%', 
-                  height: 36,
-                  borderRadius: 6,
-                  fontSize: 14,
-                  fontWeight: 500
-                }}
+                className={styles["sidebar-action-button"]}
                 icon={<PlusOutlined />}
                 onClick={async () => {
                   chatStore.clearSessions();
@@ -596,7 +597,7 @@ export const SideBar = (props: { className?: string }) => {
                     value.appId = globalStore.selectedAppId;
                   });
                   if (isMobileScreen) {
-                    globalStore.setShowMenu(false);
+                    closeSidebar();
                   }
                   if (getType() === 'bigModel') {
                     navigate({ pathname: '/newChat' });
@@ -617,15 +618,9 @@ export const SideBar = (props: { className?: string }) => {
                 新建对话
               </Button>
             </div>
-            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10, gap: 8 }}>
+            <div className={styles["sidebar-action-group"]}>
               <Button
-                style={{ 
-                  width: '48%', 
-                  height: 36,
-                  borderRadius: 6,
-                  fontSize: 14,
-                  fontWeight: 500
-                }}
+                className={styles["sidebar-action-button"]}
                 icon={<AppstoreOutlined />}
                 onClick={() => {
                   setDrawerType('all');
@@ -635,13 +630,7 @@ export const SideBar = (props: { className?: string }) => {
                 我的应用
               </Button>
               <Button
-                style={{ 
-                  width: '48%', 
-                  height: 36,
-                  borderRadius: 6,
-                  fontSize: 14,
-                  fontWeight: 500
-                }}
+                className={styles["sidebar-action-button"]}
                 icon={<StarOutlined />}
                 onClick={() => {
                   setDrawerType('collect');
@@ -652,6 +641,13 @@ export const SideBar = (props: { className?: string }) => {
               </Button>
             </div>
           </SideBarHeader>
+          <div style={{
+            fontSize: 12,
+            color: '#999999',
+            padding: '8px 0 4px',
+          }}>
+            问答历史
+          </div>
           <Menu
             style={{ border: 'none' }}
             onClick={async (info) => {
@@ -660,7 +656,7 @@ export const SideBar = (props: { className?: string }) => {
               const props = info.item.props;
               const { showMenu, chatMode, appId } = props;
               if (isMobileScreen) {
-                globalStore.setShowMenu(false);
+                closeSidebar();
               }
               let url = ``;
               if (getType() === 'bigModel') {

app/styles/globals.scss

@@ -71,7 +71,7 @@
   :root {
     --window-width: 100vw;
     --window-height: var(--full-height);
-    --sidebar-width: 100vw;
+    --sidebar-width: 60vw;
     --window-content-width: var(--window-width);
     --message-max-width: 100%;
   }
@@ -368,3 +368,58 @@ pre {
 .copyable {
   user-select: text;
 }
+
+// Ant Design Dropdown 下拉菜单样式优化，防止数据多时被遮挡
+.deekSeek-dropdown {
+  z-index: 1050 !important;
+  
+  .ant-dropdown-menu {
+    max-height: 400px !important;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+    
+    // 自定义滚动条样式
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+    
+    &::-webkit-scrollbar-track {
+      background: #f1f1f1;
+      border-radius: 3px;
+    }
+    
+    &::-webkit-scrollbar-thumb {
+      background: #888;
+      border-radius: 3px;
+      
+      &:hover {
+        background: #555;
+      }
+    }
+    
+    .ant-dropdown-menu-item {
+      padding: 8px 12px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 200px;
+      
+      // 子菜单项样式
+      .ant-dropdown-menu-submenu-title {
+        padding: 8px 12px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 200px;
+      }
+    }
+    
+    // 子菜单容器样式
+    .ant-dropdown-menu-submenu-popup {
+      .ant-dropdown-menu {
+        max-height: 300px !important;
+        overflow-y: auto !important;
+      }
+    }
+  }
+}