v0.9.9

frontend/src/components/MainLayout/AppHeader.css

@@ -60,7 +60,7 @@
   position: relative;
   height: 64px;
   min-width: 360px;
-  padding-left: 70px;
+  padding-left: 24px;
   padding-right: 36px;
   display: inline-flex;
   align-items: center;

frontend/src/components/MainLayout/AppSider.jsx

@@ -296,7 +296,7 @@ function AppSider({ collapsed, onToggle }) {
   }
 
   const logoNode = (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingLeft: 8 }}>
+    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
       <img src="/favicon.svg" alt="logo" style={{ width: 32, height: 32 }} />
       {!collapsed && (
         <span style={{ fontSize: 18, fontWeight: 'bold', color: 'var(--text-color)' }}>NexDocus</span>

frontend/src/components/ModernSidebar/ModernSidebar.css

@@ -15,11 +15,12 @@
 
 /* Header */
 .modern-sidebar-header {
-  padding: 24px 20px;
-  position: relative;
+  padding: 0 16px;
   display: flex;
   align-items: center;
-  height: 80px;
+  justify-content: space-between;
+  gap: 8px;
+  height: 64px;
   flex-shrink: 0;
 }
 
@@ -28,33 +29,46 @@
   align-items: center;
   overflow: hidden;
   white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+  padding-left: 8px;
 }
 
 .sidebar-collapse-trigger {
-  position: absolute;
-  right: -13px;
-  top: 32px;
-  z-index: 20;
-  width: 26px;
-  height: 26px;
-  border: 1px solid var(--border-color);
-  border-radius: 999px;
-  background: var(--header-bg);
-  color: #8a94a6;
+  width: 36px;
+  height: 36px;
+  border: none;
+  border-radius: 8px;
+  background: var(--bg-color-secondary);
+  color: var(--text-color-secondary);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 2px 8px rgba(0, 21, 41, 0.08);
   cursor: pointer;
-  transform: translateY(-50%);
   transition: all 0.2s;
-  font-size: 10px;
+  font-size: 18px;
+  flex-shrink: 0;
 }
 
 .sidebar-collapse-trigger:hover {
   color: #1677ff;
-  border-color: rgba(22, 119, 255, 0.28);
-  background: var(--header-bg);
+  background: rgba(22, 119, 255, 0.08);
+}
+
+/* Collapsed Header: logo on top, trigger below */
+.ant-layout-sider-collapsed .modern-sidebar-header {
+  height: auto;
+  padding: 16px 0 8px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 12px;
+}
+
+.ant-layout-sider-collapsed .logo-container {
+  justify-content: center;
+  padding-left: 0;
+  width: 100%;
 }
 
 /* Menu Area */
@@ -141,6 +155,17 @@
   border-radius: 12px;
 }
 
+/* 收起态下分组之间显示浅色间隔线 */
+.ant-layout-sider-collapsed .menu-group {
+  margin-bottom: 12px;
+}
+
+.ant-layout-sider-collapsed .menu-group + .menu-group {
+  border-top: 1px solid var(--border-color);
+  padding-top: 12px;
+  margin-top: 12px;
+}
+
 /* Footer */
 .modern-sidebar-footer {
   padding: 16px;

frontend/src/components/ModernSidebar/ModernSidebar.jsx

@@ -4,7 +4,8 @@ import {
   LogoutOutlined,
   QuestionCircleOutlined,
   RightOutlined,
-  LeftOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
 } from '@ant-design/icons';
 import './ModernSidebar.css';
 
@@ -85,7 +86,7 @@ const ModernSidebar = ({
           onClick={() => onCollapse && onCollapse(!collapsed)}
           aria-label={collapsed ? '展开侧边栏' : '收起侧边栏'}
         >
-          {collapsed ? <RightOutlined /> : <LeftOutlined />}
+          {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
         </button>
       </div>