优化导航栏缩小按钮

frontend/src/index.css

@@ -34,7 +34,7 @@ a {
   border-bottom: 1px solid #edf1f7;
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: space-between;
 }
 
 .app-content {
@@ -77,28 +77,25 @@ a {
   min-height: 100%;
 }
 
-.app-sidebar__collapse {
+.app-header__collapse {
-  position: absolute;
-  top: 42px;
-  right: -18px;
-  z-index: 2;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 36px;
+  flex: 0 0 26px;
-  height: 36px;
+  width: 26px;
-  border: 1px solid #e8eef6;
+  height: 26px;
-  border-radius: 999px;
+  border: 1px solid #dce7f3;
-  background: #fff;
+  border-radius: 7px;
-  color: #9aa4b2;
+  background: rgba(255, 255, 255, 0.74);
-  box-shadow: 0 8px 18px rgba(42, 71, 105, 0.12);
+  color: #7d8a99;
   cursor: pointer;
-  transition: color 0.16s ease, box-shadow 0.16s ease;
+  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
 }
 
-.app-sidebar__collapse:hover {
+.app-header__collapse:hover {
+  border-color: #b8d7ff;
+  background: #fff;
   color: #1677ff;
-  box-shadow: 0 10px 22px rgba(22, 119, 255, 0.16);
 }
 
 .app-sidebar__brand {
@@ -127,6 +124,8 @@ a {
 }
 
 .app-sidebar__brand-text {
+  min-width: 0;
+  flex: 1;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

frontend/src/layouts/MainLayout.tsx

@@ -13,10 +13,9 @@ import {
   AppstoreOutlined,
   DashboardOutlined,
   DownOutlined,
-  LeftOutlined,
   LogoutOutlined,
+  MenuOutlined,
   OrderedListOutlined,
-  RightOutlined,
   ShopOutlined,
   TeamOutlined,
   UserOutlined,
@@ -227,14 +226,6 @@ export default function MainLayout() {
         width={230}
         collapsedWidth={74}
       >
-        <button
-          className="app-sidebar__collapse"
-          type="button"
-          onClick={() => setCollapsed(!collapsed)}
-          aria-label={collapsed ? '展开侧边栏' : '收起侧边栏'}
-        >
-          {collapsed ? <RightOutlined /> : <LeftOutlined />}
-        </button>
         <div className="app-sidebar__brand">
           <span className="app-sidebar__brand-mark">S</span>
           {!collapsed ? <span className="app-sidebar__brand-text">Skin Hub</span> : null}
@@ -282,6 +273,15 @@ export default function MainLayout() {
         <Header
           className="app-header"
         >
+          <button
+            className="app-header__collapse"
+            type="button"
+            onClick={() => setCollapsed(!collapsed)}
+            aria-label={collapsed ? '展开侧边栏' : '收起侧边栏'}
+            title={collapsed ? '展开侧边栏' : '收起侧边栏'}
+          >
+            <MenuOutlined />
+          </button>
           <Dropdown menu={{ items: userMenu }}>
             <Space style={{ cursor: 'pointer' }}>
               <Avatar size="small" icon={<UserOutlined />} />