轻量任务 / 项目管理 —— 列表与看板双视图 · 列-状态绑定 · 按列保留选项 · 一级子任务
任务模块不引入新主色,全部复用 V0.2 既有色板;只在「任务状态」「列绑定」两处新增语义映射。
navbar-sub(44px,左返回 + 标题 + 右侧操作)seg 分段,切换不刷新顶级 Tab「任务」的第一屏。个人默认项目置顶且不可删除、不可加成员(T-PJ-01~04);普通协作项目可增删成员(T-PJ-05/06)。
个人默认项目带「个人」徽标,无删除入口;归档项目降透明并单独分组。Tab 共 5 项,任务位于打卡之后(T-PM-06),默认首页仍为打卡。
还没有协作项目
无协作项目时展示空态与 CTA;个人默认项目始终存在,故不会出现完全空白。
默认视图(T-VW-05)。子任务缩进 28px 并带层级线(T-ST-04),可折叠(T-ST-05);已完成任务按所属列的保留选项隐藏(T-FL-11)。
按看板列分组显示(列名可关闭)。负责人 12px/600 突出,任务成员 10.5px 弱化并置于下方(T-AS-01/02)。子任务带独立状态小标记(T-ST-09),可与父任务不一致。
该列保留选项为「当天」,昨日完成的任务在跨日后进入退场态并移除,其余任务重排(T-FL-05/09、T-EX-18)。
列头显示列名、数量与绑定标记(↔ 完成 表示该列绑定「完成」状态,未绑定 表示不参与状态联动)。
卡片轻量化(T-UI-02):标题 + 状态点 + 负责人(小字)+ 成员(更弱)+ 子任务摘要。拖拽中卡片半透明抬起,目标列蓝色虚线高亮。子任务内嵌展示并可勾选(T-ST-06/07),带自身状态点(T-ST-09)。
长按卡片拖到另一张卡片上松手即成为其一级子任务。目标本身是子任务、或被拖任务已有子任务,均拒绝并 Toast「仅支持一级子任务」(T-ST-13/14)。
本模块的配置中枢:每列一行,包含重命名、状态绑定(T-BD-02)与保留选项(T-FL-02)。列可拖动排序(T-COL-05)、增删(T-COL-02/04),数量 1~10。
上半区是「列 → 状态」绑定,下半区是「列 → 保留选项」。Action 显示为「不绑定状态」灰态;保存后看板与列表即时生效,不批量改写已有任务(T-BD-11/12)。
任务在未绑定的 Action 中被勾成「完成」。若其他列绑定了「完成」→ 自动移入第一个匹配列;若全部列都未绑定「完成」→ 不移动,保留在原列(T-BD-14/16)。此屏即后者。
底部弹层。源码等扩展信息放在可折叠卡片内,默认收起、全部非必填(T-TK-04~07),不占用主字段空间。
负责人默认填入创建者本人,可清空为「未指派」(T-TK-09/10)。扩展信息卡片默认收起,右侧标出条目数。
扩展条目为任意名称 + 值,不限固定字段(T-TK-05),值可为文本或链接。子任务在此可增删改,状态与父任务互相独立(T-ST-03)。删除任务会提示级联条数(T-EX-07)。
负责人与任务成员只能从当前项目成员中选择(T-AS-03/04);跨项目操作是拷贝(T-CP-01),新任务创建人为操作者(T-CP-04)。
创建人可主动退出(T-PJ-07);成员清空后项目静默保留、前端不报错(T-PJ-08、T-EX-11)。
明确列出复制内容与被丢弃的人员(T-EX-08),避免静默丢数据。拷贝后新旧任务完全独立(T-CP-05)。
| 操作 | 落点 | 结果 |
|---|---|---|
| 长按卡片 ≥ 300ms | — | 卡片抬起(缩 0.97 + 倾斜 1°),进入拖拽态,锁定滚动 |
| 拖到另一列空白 | 列体 | 换列;目标列绑定状态则状态跟随,未绑定则保留原状态(T-BD-07) |
| 拖到另一张卡片上 | 顶层任务卡 | 降为该任务的一级子任务;原列与状态保持不变(T-ST-15) |
| 拖到子任务 / 自身 / 后代 | 非法落点 | 拒绝并 Toast,卡片回弹(T-ST-13、T-EX-15) |
| 被拖任务有子任务 | 任何卡片 | 拒绝,避免二级嵌套(T-ST-14) |
| 无需拖拽时 | 卡片「⋯」 | 「移动到列 / 移动到子任务」等价入口(T-UI-07) |
骨架屏,避免白屏与布局跳动。
这个项目还没有任务
带明确 CTA;某列因保留选项隐藏全部已完成任务时,展示该列空态而非报错(T-EX-10)。
数据加载失败,请检查网络
乐观更新失败时回滚并 Toast,可重试(T-EX-02)。
| 界面 | 对应需求点 |
|---|---|
| 2 项目列表 | T-PJ-01~10、T-PM-06、T-PM-07、T-UI-08 |
| 3 列表视图 | T-VW-01~07、T-ST-04/05/09、T-AS-01/02、T-FL-11、T-TK-12 |
| 3′ 保留退场 | T-FL-05/09、T-EX-18 |
| 4 看板视图 | T-BD-01~16、T-UI-02/07、T-ST-06/07/09、T-ST-12~15 |
| 5 列设置 | T-COL-01~10、T-BD-02/09/10、T-FL-01~15 |
| 5′ 自动归位 | T-BD-14/16、T-EX-04/05 |
| 6 任务详情 | T-TK-01~13、T-ST-03、T-AS-05、T-EX-07 |
| 7 成员 / 拷贝 | T-AS-03/04/06/07、T-PM-01~05、T-CP-01~09、T-EX-06/08 |
| 8 三态 | T-UI-08/09/10、T-EX-02/10 |
| 项 | 约定 |
|---|---|
| 视口 | 设计稿 420×820;375~430px 内元素不换行、不裁切;底部 TabBar 5 项每项 ≥ 44px 可点宽度 |
| 安全区 | TabBar 使用 antd-mobile safeArea,页面底部留出 tabbar-h + safe-bottom |
| 看板宽度 | 列宽固定 186px,超出横向滚动;列头吸顶,列体独立纵向滚动 |
| 触控 | 长按 300ms 进入拖拽;点击热区 ≥ 44×44;拖拽中禁用页面滚动 |
| 动效 | 退场 240ms、拖动抬起 150ms、Toast 2s 自动消失;均 pointer-events:none 不阻塞后续操作 |
| 大字号 | 任务标题超长换行不截断(卡片内最多 2 行省略);列名 ≤ 12 字 |
| 深色模式 | V0.2 沿用现有浅色主题,暂不适配 |
| 数量上限 | 看板列 1~10(上限待确认);扩展信息条目建议 ≤ 20 |
本文档为静态设计稿,不含脚本逻辑;实现对应 src/pages/task/*.jsx、src/components/task/*.jsx 与样式段(src/styles/globals.css 的 .task-*)。接口与数据口径见《任务模块设计文档-框架设计.md》《任务模块功能设计.md》与《任务模块数据库设计文档.md》。