139 lines
5.6 KiB
Markdown
139 lines
5.6 KiB
Markdown
# 二维码生成器移动端适配计划
|
||
|
||
## 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. 测试浏览器窗口缩放时的响应
|