# Design Brief

## 1. 设计目标

- 功能主题: 工单后台筛选体验
- 要解决的问题: 信息密度高但不能压迫，筛选操作要快，批量管理感要强
- 目标质量等级: P2，必须覆盖响应式、动效、可访问性和视觉一致性证据

## 2. 视觉方向

- 主题风格: 企业后台、克制、专业
- 品牌气质: 高密度但清晰、可信赖
- 避免: 营销 landing page 风格、过多插画、过强渐变
- 审美验收: 表格和筛选区要有清晰主次；高优先级、错误、保存 dirty 状态必须一眼可辨；不能只堆叠灰白卡片

## 3. 色彩策略

- 主色: 蓝灰系
- 强调色: 橙色用于高优先级和 CTA
- 错误色: 红色

## 4. 布局与组件原则

- 页面布局: 顶部筛选条 + 主数据表
- 筛选条应支持标签化回显
- 保存视图使用小型弹窗，不要切走主页面
- desktop 使用横向筛选条；tablet 允许换行；mobile 使用筛选抽屉并把表格转为卡片列表

## 5. 交互原则

- 主按钮: 保存视图
- 次按钮: 清空筛选
- 加载态: 表格骨架屏 + 按钮禁用
- 错误态: 内联错误提示 + 重试
- dirty 状态: 通过筛选 chip、保存按钮和状态文案同时反馈，保存成功后清除 dirty

## 6. 动效与响应式

- 弹窗: opacity + scale，160ms；reduced motion 下直接显示。
- 移动端筛选抽屉: translateX + opacity，180ms；必须有 focus trap。
- 筛选 chip 增删: opacity + slight translate，120ms；不能推动整页大范围跳动。
- 表格刷新: skeleton + row fade，160ms；高频刷新时禁用行级动画。
- mobile: 筛选进入抽屉，表格转卡片，分页简化为上一页 / 下一页。
- long content: 工单标题两行截断，负责人姓名超长时 tooltip，状态标签不换行。

## 7. 可访问性与性能

- 所有筛选控件必须有可见 label 或 aria-label。
- 弹窗和抽屉必须支持 Esc 关闭、焦点恢复和键盘遍历。
- 颜色不能作为优先级和错误的唯一表达，必须有文本标签。
- 单页超过 100 行时不得继续纯客户端完整渲染，需服务端分页或虚拟滚动。
- 搜索输入 debounce 300ms，避免每个字符触发请求。

## 8. 真相源优先级

```text
设计稿 > Design Brief > Product Spec
```
