cft0808--edict
wehub-resource-sync
82 行
2.1 KiB
Markdown
82 行
2.1 KiB
Markdown
# 移动端响应式适配 详细设计
|
||
|
||
> 任务ID：JJC-20260303-001 · 第一批 · 功能2
|
||
|
||
## 1. 断点策略
|
||
|
||
使用 Tailwind CSS 默认断点：
|
||
|
||
| 断点 | 宽度 | 布局 |
|
||
|------|------|------|
|
||
| 默认 (mobile) | < 640px | 单列纵向 |
|
||
| sm | ≥ 640px | 单列宽松 |
|
||
| md | ≥ 768px | 双列 |
|
||
| lg | ≥ 1024px | 完整桌面布局（现有） |
|
||
|
||
## 2. 组件适配清单
|
||
|
||
### 2.1 EdictBoard（看板主体）
|
||
|
||
**桌面（≥ lg）**：保持现有多列横向布局
|
||
|
||
**移动（< md）**：
|
||
- 切换为纵向卡片列表
|
||
- 各状态列改为可切换的 Tab（待处理 / 进行中 / 已完成 等）
|
||
- 任务卡片全宽显示，增大点击区域
|
||
|
||
```tsx
|
||
// 伪代码
|
||
<div className="flex flex-col md:flex-row gap-4">
|
||
{/* 移动端 Tab 切换 */}
|
||
<div className="md:hidden">
|
||
<StatusTabs active={activeTab} onChange={setActiveTab} />
|
||
</div>
|
||
{/* 桌面端多列 */}
|
||
<div className="hidden md:flex gap-4">
|
||
{columns.map(col => <KanbanColumn key={col.status} />)}
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
### 2.2 TaskModal（任务详情弹窗）
|
||
|
||
**移动（< md）**：全屏模式
|
||
```tsx
|
||
<div className="fixed inset-0 md:inset-auto md:max-w-2xl md:mx-auto md:my-8 md:rounded-lg">
|
||
```
|
||
|
||
### 2.3 导航栏
|
||
|
||
**移动（< md）**：
|
||
- Logo + 汉堡菜单按钮
|
||
- 点击展开侧边栏（slide-in overlay）
|
||
- 包含所有导航项
|
||
|
||
```tsx
|
||
// 移动端汉堡菜单
|
||
<button className="md:hidden" onClick={toggleMenu}>
|
||
<HamburgerIcon />
|
||
</button>
|
||
<nav className={`fixed inset-y-0 left-0 w-64 transform ${open ? 'translate-x-0' : '-translate-x-full'} md:static md:translate-x-0`}>
|
||
{navItems}
|
||
</nav>
|
||
```
|
||
|
||
### 2.4 其他面板
|
||
|
||
- 官员总览：移动端改为 2 列网格 → 1 列
|
||
- 模型切换面板：卡片全宽堆叠
|
||
- 奏折时间线：保持纵向，缩小边距
|
||
|
||
## 3. 触控优化
|
||
|
||
- 所有可点击元素最小 44x44px
|
||
- 添加 `touch-action: manipulation` 消除 300ms 延迟
|
||
- 滑动手势：左滑任务卡片显示操作按钮（可选，Phase 2）
|
||
|
||
## 4. 测试
|
||
|
||
- Chrome DevTools 设备模拟：iPhone SE / iPhone 14 / iPad
|
||
- 真机测试（如有条件）
|
||
- 确保无横向溢出、无文字截断
|