Преглед изворни кода

✨ feat(mobile): 调整移动端侧边栏用户头像位置

- 将用户头像从顶部导航栏移动到侧边栏头部区域
- 优化侧边栏关闭按钮样式,减小尺寸为w-4 h-4并调整内边距为p-1
- 侧边栏头部改为flex-col布局以容纳头像和关闭按钮
- 移除顶部导航栏中的用户头像按钮

💄 style(mobile): 优化移动端UI细节

- 调整侧边栏关闭按钮的hover效果区域
- 统一用户头像按钮的尺寸和样式
yourname пре 6 месеци
родитељ
комит
9a8e0314b9
1 измењених фајлова са 14 додато и 14 уклоњено
  1. 14 14
      src/client/mobile/layouts/MainLayout.tsx

+ 14 - 14
src/client/mobile/layouts/MainLayout.tsx

@@ -85,13 +85,23 @@ export const MainLayout = () => {
         sidebarOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0"
       )}>
         <div className="flex flex-col h-full">
-          {/* 侧边栏头部 */}
-          <div className="flex items-center justify-center h-16 border-b border-border">
+          {/* 侧边栏头部 - 包含用户头像 */}
+          <div className="flex flex-col items-center justify-center h-16 border-b border-border">
+            {user && (
+              <button
+                onClick={() => navigate('/mobile/member')}
+                className="w-8 h-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center mb-1"
+              >
+                <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
+                </svg>
+              </button>
+            )}
             <button
               onClick={() => setSidebarOpen(false)}
-              className="lg:hidden p-2 rounded-md hover:bg-muted"
+              className="lg:hidden p-1 rounded-md hover:bg-muted"
             >
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
               </svg>
             </button>
@@ -143,16 +153,6 @@ export const MainLayout = () => {
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
                 </svg>
               </button>
-              {user && (
-                <button
-                  onClick={() => navigate('/mobile/member')}
-                  className="w-8 h-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center mr-3"
-                >
-                  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-                    <path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
-                  </svg>
-                </button>
-              )}
               <h1 className="text-xl font-semibold text-foreground">股票训练系统</h1>
             </div>