任务页高保真样式规范（来源 × 状态 × 统计）
字数
1324 字
阅读时间
6 分钟
参考高保真稿：docs/前端样式/svg/高保真图-任务.svg。遵循《色彩系统.md》与“行为闭环”主线，确保“可控、进度感、易筛选”。
1. 设计定位（使命/关键词/视觉）
- 页面使命：集中展示所有行动任务，提供来源/情绪筛选、番茄计时、批量操作与统计概览，是行为闭环的主看板。
- 体验关键词：可控、进度感、易筛选。卡片化结构与来源/状态徽章，帮助快速识别优先级。
- 视觉策略：基底
--color-ink-0(#F7F9FC)；卡片白底+细描边区隔；来源徽章按语义色区分（AI=Brand、社区=Success、真人=Warning、自建=Ink）；统计卡用“Brand 400 → Mint 300”柔和渐变营造积极感。
2. 布局结构
┌──────────────────────────────────────────┐
│ 顶部筛选区：来源 Chip + 情绪标签下拉 + 搜索框 │
├──────────────────────────────────────────┤
│ 任务统计卡（进行中/完成/延期/跳过 + 小型柱状图） │
├──────────────────────────────────────────┤
│ 任务列表（按状态分组） │
│ ├─ 进行中 │
│ ├─ 即将到期 │
│ ├─ 延期 │
│ ├─ 已完成 │
│ └─ 已跳过 │
├──────────────────────────────────────────┤
│ 底部批量操作栏（多选时出现） │
└──────────────────────────────────────────┘
↑ 上拖底部把手 → 展开数据抽屉（来源/情绪完成度等）3. 模块详解与规格
3.1 顶部筛选区
- 容器：白底、阴影
0 12rpx 40rpx rgba(15,20,26,0.05)，内容左右 32rpx。 - 来源 Chip：默认 Ink-100 背景、Ink-600 文本；选中填充来源专属色（AI=Brand-500、社区=Success-500、真人=Warning-500、自建=Ink-400），文本常白或 900 取对比≥4.5。
- 情绪下拉：选择后以可移除 Chip 呈现；超过 3 个折叠为“已选 X 项”。
- 搜索框：圆角 999，左侧放大镜；支持标题/来源/情绪的模糊匹配。
3.2 任务统计卡
- 尺寸：W343 × H120，圆角 20。
- 背景：渐变 Brand-400(#6FA4FF) → Mint-300（参见色板推算值），轻颗粒或网纹可选；对比不低于 3:1。
- 内容：
- 左：大数字（进行中数/全部），主文案 24/700；
- 右：小柱状图（完成/延期趋势）；
- 底部：按钮“查看统计”（次按钮样式）唤起数据抽屉。
3.3 任务列表与任务卡
- 容器：W343、圆角 16、描边 2rpx #E2E8F0、阴影
0 24rpx 56rpx rgba(15,20,26,0.05)。 - Header：左侧来源徽章＋情绪标签；右侧截止时间。延期任务整卡加 Danger-500 边框或左侧 8rpx Danger 条。
- 文案层级：标题 16/700/#2C3640；描述 12/500/#5A6672；支持关联随笔/树洞来源链接。
- 操作区：
- 主要：完成（Success-500 填充）；
- 次要：跳过（灰描边）、番茄（描边+计时态高亮）。
- 状态胶囊：右上角“进行中/已完成/延期/已跳过”。
- 交互：主按钮按压态缩放至 0.96；状态更新需即时刷新统计卡数据。
3.4 批量操作栏
- 触发：多选 ≥1 项时浮现，吸底显示。
- 样式：白底、阴影
0 8rpx 40rpx rgba(15,20,26,0.16)，高度 56。 - 行为：延期（主）、设置提醒、导出、取消；主按钮使用 Brand-500 填充。
3.5 数据抽屉
- 触发：上拖底部把手或“查看统计”。
- 样式：顶部圆角 24；背景白，覆盖 80% 高度，支持拖拽关闭及遮罩点击关闭。
- 内容：来源完成度柱状图、情绪完成度折线图、真人协同待确认列表；点击来源带筛选回任务页，点击真人协同跳转协同页。
4. 交互要点与页面联动
- 筛选 Chip 支持多选；来源/情绪的组合条件可持久化到 storage。
- 延期/跳过必须选择原因（下拉+自定义输入），用于智能建议迭代。
- 从“今天/心情随笔/树洞”等页进入任务页时，自动携带来源或情绪筛选参数。
- 任务详情、联系真人、导出日志分别跳转对应分包页（packages/）。
5. 数据绑定与埋点
| 模块 | 数据来源 | 埋点 |
|---|---|---|
| 筛选区 | tasks/filters | tasks_filter_change（来源/情绪/搜索） |
| 任务统计卡 | tasks/summary | tasks_summary_view（查看统计） |
| 任务卡 | tasks/list | task_status_update、task_review_submit、task_bulk_action |
| 批量操作栏 | tasks/bulk | task_bulk_action（延期/提醒/导出） |
| 数据抽屉 | tasks/stats | tasks_drawer_open、tasks_drawer_source_click |
6. 验收提示（可访问性+落地）
- 375 设计基准，左右留白 32rpx，内容最大宽 686rpx。
- 文本对比度：正文 ≥4.5:1；大字/粗体 ≥3:1；危险描边面积受控。
- Chip、按钮需有非颜色状态变化（阴影/描边粗细/缩放）。
—— 本规范与《清单任务管理》《任务卡执行闭环》功能说明对齐，可直接用于任务页的视觉还原、组件开发与验收。
贡献者
Cai Hongyu