refactor: implement new application layout with a trade drawer, chart tabs, and mobile view management.

Author: mingxingmeng-ctrl

docs/plans/Plan-07-LayoutRefactor.md

@@ -0,0 +1,56 @@
+# Plan-07: 布局重构 (方案 B 浮动操作栏)
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**目标 (Goal):** 将 3 栏布局重构为图表全屏 + 浮动操作栏 + Drawer 交易面板，提升看图和操作体验。
+
+**架构设计 (Architecture):**
+```
+                              重构前                          重构后
+┌────────────┬──────┬───────┐           ┌─────────────────────────────────┐
+│  K线图     │订单簿│交易面板│   →→→     │      K线图 (全宽)     [FloatPnL] │
+│  (57%)    │(13%)│ (30%) │           ├─────────────────────────────────┤
+│           │     │Y轴滚动│           │ [做多]              [做空]       │
+└───────────┴─────┴───────┘           └─────────────────────────────────┘
+                                      点击按钮 → Drawer 滑入
+```
+
+**技术栈:** React 18 + Tailwind CSS 4 + Mobile-First + localStorage
+
+---
+
+## 计划结构
+
+| Phase | 文档 | 内容 |
+|-------|------|------|
+| 0 | [Phase-0](./Plan-07-LayoutRefactor/Phase-0-Preparation.md) | 准备工作 |
+| 1 | [Phase-1](./Plan-07-LayoutRefactor/Phase-1-CoreLayout.md) | 核心布局 |
+| 2 | [Phase-2](./Plan-07-LayoutRefactor/Phase-2-FloatingComponents.md) | 浮动组件 |
+| 3 | [Phase-3](./Plan-07-LayoutRefactor/Phase-3-TradeDrawer.md) | Drawer 交易面板 |
+| 4 | [Phase-4](./Plan-07-LayoutRefactor/Phase-4-Interactions.md) | 交互优化 |
+
+---
+
+## 已确认决策
+
+| 项目 | 决策 |
+|------|------|
+| Drawer 方向 | 移动端底部 / 桌面端右侧 |
+| 浮动卡片 | 盈亏百分比 + 金额 |
+| 快捷按钮 | 等宽平铺 |
+| 订单簿 | Tab 切换 |
+| 固定模式 | localStorage 持久化 |
+| LIVE 模式 | 完全按 MOCK 显示 |
+| 无持仓 | 显示"暂无持仓" |
+| 快捷键 | B/S/Esc |
+
+---
+
+## 验收标准
+
+1. ✅ 移动端图表全屏
+2. ✅ 底部按钮始终可点击
+3. ✅ 持仓摘要浮动右下角
+4. ✅ Drawer 滑入时图表仍可见
+5. ✅ 键盘快捷键生效
+6. ✅ `npm run build` 无错误

docs/plans/Plan-07-LayoutRefactor/Phase-0-Preparation.md

@@ -0,0 +1,71 @@
+# Phase 0: 准备工作
+
+> **预计耗时:** 30 分钟
+
+---
+
+## Task 0.1: 创建功能分支
+
+**操作:**
+```bash
+git checkout -b feat/layout-refactor-plan07
+```
+
+**验证:** `git branch` 显示当前在新分支
+
+---
+
+## Task 0.2: 备份现有布局代码
+
+**文件:** `/src/App.tsx`
+
+**操作:** 复制当前 App.tsx 的核心布局结构作为参考 (无需实际文件)
+
+**验证:** 理解现有 3 栏布局结构
+
+---
+
+## Task 0.3: 创建组件目录结构
+
+**操作:**
+```bash
+mkdir -p src/components/Layout/FloatingPnL
+mkdir -p src/components/Layout/QuickTradeBar
+mkdir -p src/components/Layout/TradeDrawer
+mkdir -p src/components/Layout/ChartTabs
+```
+
+**验证:** 目录已创建
+
+---
+
+## Task 0.4: 添加 localStorage Hook
+
+**文件:** 创建 `/src/hooks/useLocalStorage.ts`
+
+```typescript
+import { useState, useEffect, useCallback } from 'react';
+
+export function useLocalStorage<T>(key: string, initialValue: T) {
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    try {
+      const item = localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch {
+      return initialValue;
+    }
+  });
+
+  const setValue = useCallback((value: T | ((val: T) => T)) => {
+    setStoredValue((prev) => {
+      const valueToStore = value instanceof Function ? value(prev) : value;
+      localStorage.setItem(key, JSON.stringify(valueToStore));
+      return valueToStore;
+    });
+  }, [key]);
+
+  return [storedValue, setValue] as const;
+}
+```
+
+**验证:** `npx tsc --noEmit` 无错误

docs/plans/Plan-07-LayoutRefactor/Phase-1-CoreLayout.md

@@ -0,0 +1,142 @@
+# Phase 1: 核心布局重构
+
+> **预计耗时:** 2-3 小时
+
+---
+
+## 架构变化
+
+```
+重构前:                              重构后:
+┌─────────────────────────────┐     ┌─────────────────────────────┐
+│ Header                      │     │ Header                      │
+├────────┬──────┬─────────────┤     ├─────────────────────────────┤
+│ Chart  │Order │ TradePanel  │     │ ChartTabs (全宽)             │
+│        │Book  │  (滚动)     │     │ [图表] [订单簿] [深度]        │
+├────────┴──────┴─────────────┤     ├─────────────────────────────┤
+│ StatsPanel                  │     │ StatsPanel                  │
+└─────────────────────────────┘     ├─────────────────────────────┤
+                                    │ QuickTradeBar [做多] [做空]  │
+                                    └─────────────────────────────┘
+```
+
+---
+
+## Task 1.1: 创建 ChartTabs 组件
+
+**文件:** 创建 `/src/components/Layout/ChartTabs/index.tsx`
+
+```tsx
+import { memo, useState, type ReactNode } from 'react';
+
+type TabType = 'chart' | 'orderbook' | 'depth';
+
+interface ChartTabsProps {
+  chartContent: ReactNode;
+  orderBookContent: ReactNode;
+  depthContent: ReactNode;
+}
+
+const TABS: { id: TabType; label: string; icon: string }[] = [
+  { id: 'chart', label: '图表', icon: '📈' },
+  { id: 'orderbook', label: '订单簿', icon: '📊' },
+  { id: 'depth', label: '深度', icon: '📉' },
+];
+
+function ChartTabs({ chartContent, orderBookContent, depthContent }: ChartTabsProps) {
+  const [activeTab, setActiveTab] = useState<TabType>('chart');
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Tab 切换栏 */}
+      <div className="flex border-b border-border-dark bg-bg-surface shrink-0">
+        {TABS.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => setActiveTab(tab.id)}
+            className={`
+              flex-1 py-2 text-xs font-medium transition-colors
+              ${activeTab === tab.id
+                ? 'text-white border-b-2 border-success'
+                : 'text-gray-500 hover:text-gray-300'
+              }
+            `}
+          >
+            <span className="mr-1">{tab.icon}</span>
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* 内容区域 */}
+      <div className="flex-1 min-h-0">
+        {activeTab === 'chart' && chartContent}
+        {activeTab === 'orderbook' && orderBookContent}
+        {activeTab === 'depth' && depthContent}
+      </div>
+    </div>
+  );
+}
+
+export default memo(ChartTabs);
+```
+
+**验证:** `npx tsc --noEmit` 无错误
+
+---
+
+## Task 1.2: 修改 App.tsx 主布局
+
+**文件:** 修改 `/src/App.tsx`
+
+**操作:** 将 3 栏布局改为 2 区域布局 (ChartTabs + Bottom)
+
+```tsx
+// 核心布局变化:
+<div className="flex flex-col h-screen">
+  <Header />
+  
+  {/* 主内容区 - 全宽 */}
+  <main className="flex-1 min-h-0 relative">
+    <ChartTabs
+      chartContent={<KLineChart />}
+      orderBookContent={<OrderBook />}
+      depthContent={<DepthChart />}
+    />
+  </main>
+  
+  <StatsPanel />
+  
+  {/* 底部快捷操作栏 (Phase 2 添加) */}
+  {/* <QuickTradeBar /> */}
+</div>
+```
+
+**验证:** 
+- `npm run build` 无错误
+- 浏览器访问，图表全宽显示
+
+---
+
+## Task 1.3: 移除原有订单簿独立栏
+
+**文件:** 修改 `/src/App.tsx`
+
+**操作:** 删除原有 `<section>` 包裹的 OrderBook 独立区域
+
+**验证:** 订单簿只在 Tab 中显示
+
+---
+
+## Task 1.4: 移除原有右侧 TradePanel
+
+**文件:** 修改 `/src/App.tsx`
+
+**操作:** 
+- 删除桌面端右侧固定 TradePanel
+- 删除移动端底部 TradePanel
+- 保留 TradePanel 组件本身 (后续在 Drawer 中使用)
+
+**验证:**
+- `npm run build` 无错误
+- 页面只显示 Header + ChartTabs + StatsPanel