#设计评审与走查

准备评审素材 → 一致性检查 → 交互逻辑验证 → 无障碍审计 → 生成评审报告
    3min           5min           5min          3min          4min

> 我要对 docs/taskboard/prototype.html 做设计评审。
> 这是我们的设计规范：
>
> 颜色：主色 #3B82F6（蓝），危险 #EF4444（红），警告 #F59E0B（黄），成功 #10B981（绿）
> 圆角：按钮 6px，卡片 8px，输入框 4px
> 间距：元素间最小间距 8px，区块间距 16px
> 字体：所有文字 14px，标题 18px，标签 12px
> 优先级颜色：高=#EF4444，中=#F59E0B，低=#9CA3AF
>
> 请逐一检查原型是否遵守这些规范，给出不符合项和修复建议。

Claude: 设计规范检查结果：

✅ 主色 #3B82F6 —— 按钮和链接使用了正确颜色
✅ 优先级颜色 —— 三个优先级标签颜色正确
⚠️  圆角不一致 —— 创建按钮使用了 4px 圆角，规范要求 6px
⚠️  字体大小 —— 卡片描述使用了 13px，规范要求 14px
❌ 间距 —— 看板列之间间距为 12px，规范要求 16px

共 3 个不符合项，建议修复。

> 对原型做更深入的一致性检查：
> 1. 所有按钮的 hover/active/disabled 状态是否一致
> 2. 所有输入框的 placeholder 颜色是否统一
> 3. 所有卡片的阴影是否一致
> 4. 空状态的展示是否统一（没有卡片的列怎么显示）
> 5. 颜色对比度是否满足 WCAG AA 标准

> 检查 docs/taskboard/ 目录下所有 HTML 文件之间的一致性：
> - 导航栏位置和样式是否统一
> - 相同组件的实现是否一致（比如所有页面的「创建」按钮）
> - 错误状态和加载状态的展示方式是否统一

> 检查原型的交互逻辑：
>
> 预期行为：
> 1. 卡片只能在相邻列之间拖拽（不能跳列）
> 2. 拖到「待审核」时需要填写审核人
> 3. 优先级为「高」的卡片在列中永远排在最上面
> 4. 删除卡片前需要二次确认
> 5. 已完成的卡片不应可以编辑
>
> 逐条验证这些行为是否在原型中正确实现。

Claude: 交互逻辑检查结果：

❌ 问题 1：卡片可以在任意列之间拖拽，没有限制相邻列
    → 位置：拖拽处理函数 dragEnd() 中没有列限制条件
    → 修复：添加 `canMoveToColumn(from, to)` 校验函数

❌ 问题 3：优先级排序未实现
    → 位置：卡片渲染时没有按优先级排序
    → 修复：在 renderColumn() 前对 cards 数组按 priority 排序

⚠️  问题 5：已完成的卡片仍可编辑
    → 位置：编辑按钮在所有卡片上都显示
    → 修复：column === 'done' 时隐藏编辑按钮

> 对原型做无障碍审计，重点检查：
> 1. 所有交互元素是否可通过键盘操作（Tab/Enter/Space）
> 2. 是否有合适的 ARIA 标签
> 3. 颜色是否不只是唯一的信息传达方式
> 4. 拖拽功能是否有键盘替代方案
> 5. 表单元素是否有正确的 label 关联

> 把前面所有检查结果汇总成一份设计评审报告，写入 docs/taskboard/design-review-report.md。
> 按严重程度排序（严重 → 主要 → 次要），每个问题包含：
> - 问题描述
> - 出现位置
> - 严重程度
> - 修复建议
> - 预估修复时间

> 每次我让你改 prototype.html 后，自动跑一遍设计规范检查。
> 如果有新的不符合项，先提示我再改代码。