✨ feat(mobile): 实现shadcn风格的主布局组件

- 添加侧边栏导航，包含公开解盘、学员解盘、考试模式等菜单
- 实现响应式设计，移动端支持侧边栏展开/收起
- 添加顶部导航栏，包含系统标题和用户信息/登录注册按钮
- 集成用户认证状态，根据用户类型显示不同操作
- 实现菜单点击路由跳转功能，优化用户导航体验
- 添加主内容区域布局，包含适当的边距和滚动效果

src/client/mobile/layouts/MainLayout.tsx

@@ -1,14 +1,191 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import {
-  Outlet
-} from 'react-router';
+import React, { useState } from 'react';
+import { Outlet, useNavigate, useLocation } from 'react-router';
+import { useAuth } from '@/client/mobile/hooks/AuthProvider';
+import { UserType } from '@/server/modules/users/user.enum';
+import { getGlobalConfig } from '@/client/utils/utils';
+import { cn } from '@/client/lib/utils';
 
 /**
- * 主布局组件
+ * 主布局组件 - shadcn风格
  * 包含侧边栏、顶部导航和内容区域
  */
 export const MainLayout = () => {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const { user } = useAuth();
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const handleClassroomClick = (classId = '') => {
+    if (user?.userType === UserType.TEACHER) {
+      navigate(`/mobile/classroom/${classId}/${UserType.TEACHER}`);
+    } else {
+      navigate(`/mobile/classroom/${classId}/${UserType.STUDENT}`);
+    }
+    setSidebarOpen(false);
+  };
+
+  const menuItems = [
+    {
+      id: 'public-chatroom',
+      label: '公开解盘',
+      icon: (
+        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+        </svg>
+      ),
+      onClick: () => handleClassroomClick(getGlobalConfig('PUBLIC_CHATROOM_ID'))
+    },
+    {
+      id: 'private-chatroom',
+      label: '学员解盘',
+      icon: (
+        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+        </svg>
+      ),
+      onClick: () => handleClassroomClick(getGlobalConfig('PRIVATE_CHATROOM_ID'))
+    },
+    {
+      id: 'exam',
+      label: '考试模式',
+      icon: (
+        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+        </svg>
+      ),
+      onClick: () => navigate('/mobile/exam')
+    },
+    {
+      id: 'training',
+      label: '训练模式',
+      icon: (
+        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+        </svg>
+      ),
+      onClick: () => navigate('/mobile/xunlian')
+    },
+    {
+      id: 'video-replay',
+      label: '视频回放',
+      icon: (
+        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
+        </svg>
+      ),
+      onClick: () => navigate('/mobile/video-replay')
+    }
+  ];
+
   return (
-    <Outlet />
+    <div className="min-h-screen bg-background flex">
+      {/* 侧边栏 - 桌面端收起状态 */}
+      <aside className={cn(
+        "fixed lg:static inset-y-0 left-0 z-50 w-16 lg:w-16 bg-card border-r border-border transition-all duration-300",
+        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">
+            <button
+              onClick={() => setSidebarOpen(false)}
+              className="lg:hidden p-2 rounded-md hover:bg-muted"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          {/* 菜单项 */}
+          <nav className="flex-1 px-2 py-4 space-y-2">
+            {menuItems.map((item) => (
+              <button
+                key={item.id}
+                onClick={item.onClick}
+                className={cn(
+                  "w-full flex flex-col items-center p-2 rounded-md text-sm font-medium transition-colors",
+                  "hover:bg-muted hover:text-foreground",
+                  "text-muted-foreground hover:text-foreground"
+                )}
+              >
+                <div className="mb-1">
+                  {item.icon}
+                </div>
+                <span className="text-xs leading-tight whitespace-nowrap text-center">
+                  {item.label}
+                </span>
+              </button>
+            ))}
+          </nav>
+        </div>
+      </aside>
+
+      {/* 遮罩层 - 移动端 */}
+      {sidebarOpen && (
+        <div
+          className="fixed inset-0 bg-background/80 backdrop-blur-sm z-40 lg:hidden"
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}
+
+      {/* 主内容区域 */}
+      <div className="flex-1 flex flex-col min-w-0">
+        {/* 顶部导航 */}
+        <header className="bg-card border-b border-border sticky top-0 z-40">
+          <div className="flex items-center justify-between h-16 px-4">
+            <div className="flex items-center">
+              <button
+                onClick={() => setSidebarOpen(true)}
+                className="lg:hidden p-2 rounded-md hover:bg-muted mr-2"
+              >
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+                </svg>
+              </button>
+              <h1 className="text-xl font-semibold text-foreground">股票训练系统</h1>
+            </div>
+
+            <div className="flex items-center space-x-4">
+              {user ? (
+                <button
+                  onClick={() => navigate('/mobile/member')}
+                  className="flex items-center space-x-2 p-2 rounded-md hover:bg-muted"
+                >
+                  <div className="w-8 h-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center">
+                    <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>
+                  </div>
+                  <span className="hidden sm:inline text-sm text-muted-foreground">
+                    {user.username}
+                  </span>
+                </button>
+              ) : (
+                <div className="flex space-x-2">
+                  <button
+                    onClick={() => navigate('/mobile/login')}
+                    className="px-3 py-1.5 rounded-md text-sm bg-primary text-primary-foreground hover:bg-primary/90"
+                  >
+                    登录
+                  </button>
+                  <button
+                    onClick={() => navigate('/mobile/register')}
+                    className="px-3 py-1.5 rounded-md text-sm bg-secondary text-secondary-foreground hover:bg-secondary/80"
+                  >
+                    注册
+                  </button>
+                </div>
+              )}
+            </div>
+          </div>
+        </header>
+
+        {/* 内容区域 */}
+        <main className="flex-1 overflow-auto p-6">
+          <Outlet />
+        </main>
+      </div>
+    </div>
   );
 };