Browse Source

✨ feat(mobile): 重构移动端布局导航

- 删除注释掉的顶部导航代码,清理布局结构
- 添加固定在右下角的浮动菜单按钮,提升移动端操作便捷性
- 优化移动端交互体验,使用悬浮按钮替代原侧边栏触发方式
yourname 6 months ago
parent
commit
c89c61d9ef
1 changed files with 8 additions and 34 deletions
  1. 8 34
      src/client/mobile/layouts/MainLayout.tsx

+ 8 - 34
src/client/mobile/layouts/MainLayout.tsx

@@ -135,45 +135,19 @@ export const MainLayout = () => {
 
       {/* 主内容区域 */}
       <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"
-              >
-                <Menu className="w-5 h-5" />
-              </button>
-              <h1 className="text-xl font-semibold text-foreground">股票训练系统</h1>
-            </div>
-
-            <div className="flex items-center space-x-4">
-              {user ? null : (
-                <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">
           <Outlet />
         </main>
       </div>
+
+      {/* 浮动菜单按钮 - 移动端 */}
+      <button
+        onClick={() => setSidebarOpen(true)}
+        className="lg:hidden fixed top-6 right-6 z-50 w-10 h-10 rounded-full bg-primary text-primary-foreground flex items-center justify-center shadow-lg hover:bg-primary/90 transition-colors"
+      >
+        <Menu className="w-5 h-5" />
+      </button>
     </div>
   );
 };