Browse Source

✨ feat(mobile): 优化侧边栏用户信息展示

- 扩展侧边栏头部高度,从h-16调整为h-20并添加内边距
- 在用户头像下方新增用户名显示,使用text-xs样式并添加文本截断
- 移动端顶部导航栏移除用户名显示,避免重复展示
- 调整侧边栏关闭按钮位置,添加mt-2外边距优化布局
yourname 6 months ago
parent
commit
38c19df4a9
1 changed files with 17 additions and 16 deletions
  1. 17 16
      src/client/mobile/layouts/MainLayout.tsx

+ 17 - 16
src/client/mobile/layouts/MainLayout.tsx

@@ -85,21 +85,26 @@ export const MainLayout = () => {
         sidebarOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0"
       )}>
         <div className="flex flex-col h-full">
-          {/* 侧边栏头部 - 包含用户头像 */}
-          <div className="flex flex-col items-center justify-center h-16 border-b border-border">
+          {/* 侧边栏头部 - 包含用户头像和用户名 */}
+          <div className="flex flex-col items-center justify-center h-20 border-b border-border py-2">
             {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={() => 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>
+                <span className="text-xs text-muted-foreground truncate max-w-[60px]">
+                  {user.username}
+                </span>
+              </>
             )}
             <button
               onClick={() => setSidebarOpen(false)}
-              className="lg:hidden p-1 rounded-md hover:bg-muted"
+              className="lg:hidden p-1 rounded-md hover:bg-muted mt-2"
             >
               <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" />
@@ -157,11 +162,7 @@ export const MainLayout = () => {
             </div>
 
             <div className="flex items-center space-x-4">
-              {user ? (
-                <span className="text-sm text-muted-foreground">
-                  {user.username}
-                </span>
-              ) : (
+              {user ? null : (
                 <div className="flex space-x-2">
                   <button
                     onClick={() => navigate('/mobile/login')}