feat: PLANNING体系首版（00路线图/02任务总表/03执行协议/I-03/I-04/registry42口径）+M1止血交付

2026-09-12 14:25:25 +08:00
commit 8242e730b4
482 changed files with 37029 additions and 0 deletions
@@ -0,0 +1,138 @@
+# 二维码生成器移动端适配计划
+
+## Why
+当前二维码生成器（/qrcode-generator）仅通过 CSS 媒体查询实现基础响应式布局，在移动端存在以下问题：
+- 两栏布局在小屏幕上操作不便
+- 高级设置区域拥挤，难以操作
+- 触摸体验未针对移动设备优化
+- 缺少独立的移动端组件，与其他工具（Base64Tool、JsonFormatter 等）的适配模式不一致
+
+## What Changes
+创建独立的移动端组件 `QRCodeGeneratorMobile`，为移动设备提供优化的用户体验。
+
+## Impact
+- New files:
+  - `chunyu_project_react/src/pages/QRCodeGenerator/QRCodeGeneratorMobile.tsx` - 移动端组件
+  - `chunyu_project_react/src/pages/QRCodeGenerator/QRCodeGeneratorMobile.css` - 移动端样式
+- Modified files:
+  - `chunyu_project_react/src/App.tsx` - 更新路由，支持移动端检测
+
+## 设计方案
+
+### 移动端组件结构
+参考 `Base64ToolMobile` 的设计模式：
+
+```
+┌─────────────────────────────────┐
+│  ← 返回    二维码生成器    [收藏] │
+├─────────────────────────────────┤
+│                                 │
+│         二维码预览区域           │
+│      （生成后显示二维码）         │
+│                                 │
+├─────────────────────────────────┤
+│  [下载二维码]  [清空]            │
+├─────────────────────────────────┤
+│  文本输入区域                    │
+│  ┌─────────────────────────┐    │
+│  │                         │    │
+│  │   请输入文本或URL...     │    │
+│  │                         │    │
+│  └─────────────────────────┘    │
+│  [生成二维码]                    │
+├─────────────────────────────────┤
+│  高级设置（可折叠）              │
+│  ▼ 容错率 / 版本 / 尺寸         │
+│  ▼ 颜色设置（预设色板）          │
+│  ▼ 形状设置（点阵/定位样式）     │
+│  ▼ Logo 上传                    │
+└─────────────────────────────────┘
+```
+
+### 核心功能保留
+- 文本/URL 输入
+- 二维码实时生成预览
+- 下载 PNG 功能
+- 容错率设置（L/M/Q/H）
+- 尺寸预设（300/400/500/1000px）
+- 颜色预设（12种配色方案）
+- 形状设置（点阵样式 + 定位图案）
+- Logo 上传
+
+### 移动端优化点
+1. **单列布局**：从上到下依次排列，避免左右分栏
+2. **可折叠设置区**：高级设置默认折叠，点击展开
+3. **触摸友好**：增大按钮和输入区域
+4. **预设色板**：使用色块网格展示，便于触摸选择
+5. **简化操作**：减少层级，常用功能直接展示
+
+## 具体修改
+
+### 1. 创建 QRCodeGeneratorMobile.tsx
+**路径**: `chunyu_project_react/src/pages/QRCodeGenerator/QRCodeGeneratorMobile.tsx`
+
+核心结构：
+```tsx
+const QRCodeGeneratorMobile: React.FC = () => {
+  // 状态管理（与桌面端共享 qrRenderer 工具）
+  const [text, setText] = useState("");
+  const [qrValue, setQrValue] = useState("");
+  const [fgColor, setFgColor] = useState("#000000");
+  const [bgColor, setBgColor] = useState("#ffffff");
+  const [errorLevel, setErrorLevel] = useState<ErrorLevel>("M");
+  const [sizePreset, setSizePreset] = useState<number>(400);
+  const [dotStyle, setDotStyle] = useState<DotStyle>("square");
+  const [finderStyle, setFinderStyle] = useState<FinderStyle>("square");
+  const [logo, setLogo] = useState<QRCodeLogo | null>(null);
+  const [logoSizePercent, setLogoSizePercent] = useState<number>(20);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [colorOpen, setColorOpen] = useState(false);
+  const [shapeOpen, setShapeOpen] = useState(false);
+  const [logoOpen, setLogoOpen] = useState(false);
+
+  // 使用共享的 drawQRCode 函数
+  // 使用 useRecordHistory 记录历史
+  // 使用 useNavigate 导航
+  // 使用 useTranslation 国际化
+};
+```
+
+### 2. 创建 QRCodeGeneratorMobile.css
+**路径**: `chunyu_project_react/src/pages/QRCodeGenerator/QRCodeGeneratorMobile.css`
+
+样式特点：
+- 单列布局
+- 大按钮设计（最小 44px 触摸目标）
+- 可折叠面板动画
+- 预设色板网格（3列或4列）
+- 暗色模式支持
+
+### 3. 更新 App.tsx 路由
+**路径**: `chunyu_project_react/src/App.tsx`
+
+修改前：
+```tsx
+<Route path="/qrcode-generator" element={<QRCodeGenerator />} />
+```
+
+修改后：
+```tsx
+<Route path="/qrcode-generator" element={isMobile ? <QRCodeGeneratorMobile /> : <QRCodeGenerator />} />
+```
+
+## Assumptions & Decisions
+- 复用桌面端的 `drawQRCode` 工具函数，保持生成逻辑一致
+- 移动端不显示粒子动画效果，提升性能
+- 高级设置默认折叠，减少初始界面复杂度
+- 预设色板使用网格布局，便于触摸选择
+- 二维码预览区域保持固定比例，确保扫描可靠性
+
+## Verification
+1. 在移动端访问 `/qrcode-generator`，确认显示移动端组件
+2. 在桌面端访问 `/qrcode-generator`，确认显示桌面端组件
+3. 测试文本输入和二维码生成功能
+4. 测试下载功能
+5. 测试高级设置（容错率、尺寸、颜色、形状）
+6. 测试 Logo 上传功能
+7. 测试暗色模式切换
+8. 测试浏览器窗口缩放时的响应