cft0808--edict/docs/design-mobile-responsive.md

移动端响应式适配 详细设计

任务ID：JJC-20260303-001 · 第一批 · 功能2

1. 断点策略

使用 Tailwind CSS 默认断点：

断点	宽度	布局
默认 (mobile)	< 640px	单列纵向
sm	≥ 640px	单列宽松
md	≥ 768px	双列
lg	≥ 1024px	完整桌面布局（现有）

2. 组件适配清单

2.1 EdictBoard（看板主体）

桌面（≥ lg）：保持现有多列横向布局

移动（< md）：

• 切换为纵向卡片列表
• 各状态列改为可切换的 Tab（待处理 / 进行中 / 已完成 等）
• 任务卡片全宽显示，增大点击区域

// 伪代码
<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）：全屏模式

<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）
• 包含所有导航项

// 移动端汉堡菜单
<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
• 真机测试（如有条件）
• 确保无横向溢出、无文字截断