iBoard V0.2 界面设计 · 任务模块

轻量任务 / 项目管理 —— 列表与看板双视图 · 列-状态绑定 · 按列保留选项 · 一级子任务

版本 V0.2视口 420 × 820移动端优先 风格沿用《界面设计.html》需求编号 T-*

1 设计规范 沿用主文档 token,仅新增任务模块语义色

任务模块不引入新主色,全部复用 V0.2 既有色板;只在「任务状态」「列绑定」两处新增语义映射。

主色 / 语义色

Primary#1677ff
Success#00b578
Warn#ffc53d
Danger#ff3141
Idle#c9ced6

任务状态映射

未开始 todo灰点 #c9ced6,与「空闲/未启用」同色
执行中 doing主色点 #1677ff,与选中态一致
完成 done成功绿 #00b578,勾选态一致

尺寸 / 间距

页面边距12px 卡片圆角8~10px 看板列宽186px(固定,横向滚动) 列表行高≈ 58px(含子任务元信息) 子任务缩进28px + 层级线 1px 点击热区≥ 44 × 44px 标题字号14px / 600(列表)· 12.5px / 600(卡片) 负责人12px / 600(突出) 任务成员10.5px / 400 · #999(弱化)

布局约定

TabBar5 项:打卡 / 任务 / 宏观 / 监控 / 我(任务在打卡之后,T-PM-06)
头部项目页用 navbar-sub(44px,左返回 + 标题 + 右侧操作)
视图切换列表 / 看板 用 seg 分段,切换不刷新
看板列横向滚动,列体纵向滚动,两轴分离

2 任务首屏 最近项目条(可排序)+ 当前项目任务管理 · 更多进项目列表

首屏上部为最近使用的 3 个项目卡片 + 「更多项目」入口(T-VW-08),卡片可长按拖动排序(T-VW-10,设备端记忆);下部直接是当前选中项目的任务管理视图(T-VW-09,默认上次访问的项目),不必先进项目列表。完整项目列表从「更多项目」进入。

张
张三的任务
12 个任务
⠿
APP
APP 改版
28 个任务
⠿
二
APP 二期
9 个任务
⠿
▤
更多项目
长按卡片可调整顺序(本机记忆)
列表
看板
过滤
登录接口返回 500
执行中 Doing 张三 + 李四、王五
›
首页改版视觉走查
执行中 Doing 李四
›
需求评审
完成 Done 王五
›
打卡
任务
宏观
监控
我
任务首屏(T-VW-08/09)

上:最近 3 个项目卡片,当前项目主色描边高亮;长按「⠿」拖动排序(T-VW-10,设备端)。下:当前项目的任务管理,默认上次访问的项目。项目页头部仅保留「项目管理」+「+ 新增」两个入口(T-PJ-11)。

张
张三的任务 个人
12 个任务 · 3 个进行中
›
协作项目(3)
APP
APP 改版
28 个任务 · 4 人 · 6 个子任务
›
二期
APP 二期
9 个任务 · 2 人
›
运
运维排期
5 个任务 · 1 人
›
已归档(1)
旧
2025 遗留
已归档 · 14 个任务
›
打卡
任务
宏观
监控
我
我的项目列表(从「更多项目」进入)

完整项目列表:个人默认项目带「个人」徽标、无删除入口;归档项目降透明分组。选择项目后返回首屏并切换当前项目(T-VW-09)。

3 列表视图 Todoist 风格 · 一级子任务缩进折叠

默认视图(T-VW-05)。子任务缩进 28px 并带层级线(T-ST-04),可折叠(T-ST-05);已完成任务按所属列的保留选项隐藏(T-FL-11)。

列表
看板
过滤
Doing 2
登录接口返回 500
执行中 Doing 张三 + 李四、王五
›
复现环境搭建 完成
补单元测试 执行中
收起 2 个子任务 ⌃
首页改版视觉走查
执行中 Doing 李四
›
展开 1 个子任务 ⌄
Plan 1
接入埋点上报
未开始 Plan 未指派
›
Done 1
需求评审
完成 Done 王五
›
打卡
任务
宏观
监控
我
列表视图

按看板列分组显示(列名可关闭)。负责人 12px/600 突出,任务成员 10.5px 弱化并置于下方(T-AS-01/02)。子任务带独立状态小标记(T-ST-09),可与父任务不一致。

列表
看板
过滤
Done 3
接口联调
完成于 今天Done张三
›
旧任务 · 超出保留期
完成于 昨天Done
›
修复打包脚本
完成于 今天Done李四
›
已隐藏 1 条超出保留期的任务
退场动画(T-EX-18)
跨日 / 跨周 / 跨月边界到点后,超出所属列保留选项(如「当天」)的已完成任务:透明度与高度在 240ms 内收缩至 0 → 移除节点 → 其余条目平滑重排。不做整页刷新。
打卡
任务
宏观
监控
我
保留选项 · 当场消失

该列保留选项为「当天」,昨日完成的任务在跨日后进入退场态并移除,其余任务重排(T-FL-05/09、T-EX-18)。

4 看板视图 列-状态绑定 · 卡片内嵌子任务 · 长按拖拽

列头显示列名、数量与绑定标记(↔ 完成 表示该列绑定「完成」状态,未绑定 表示不参与状态联动)。

列表
看板
过滤
Plan2 ↔ 未开始
接入埋点上报
未指派
整理 0.3 需求清单
张三+ 王五
收集各方诉求
+ 添加任务
Doing2 ↔ 执行中
登录接口返回 500
张三+ 李四、王五
首页改版视觉走查
李四
确认色板与字号
产出走查清单
+1 个子任务
+ 添加任务
Action1 未绑定
待产品确认的 3 个问题
王五
+ 添加任务
Done1 ↔ 完成
需求评审
王五
会前材料准备
+ 添加任务
拖入 Doing,状态将改为「执行中」
打卡
任务
宏观
监控
我
看板视图 + 拖拽中

卡片轻量化(T-UI-02):标题 + 状态点 + 负责人(小字)+ 成员(更弱)+ 子任务摘要。拖拽中卡片半透明抬起,目标列蓝色虚线高亮。子任务内嵌展示并可勾选(T-ST-06/07),带自身状态点(T-ST-09)。

列表
看板
过滤
Plan1↔ 未开始
接入埋点上报
未指派
Doing1↔ 执行中
首页改版视觉走查
登录接口返回 500
张三
松手 → 成为子任务
Action0未绑定
+ 添加任务
Done1↔ 完成
需求评审
王五
仅支持一级子任务
打卡
任务
宏观
监控
我
拖拽降为子任务(T-ST-12)

长按卡片拖到另一张卡片上松手即成为其一级子任务。目标本身是子任务、或被拖任务已有子任务,均拒绝并 Toast「仅支持一级子任务」(T-ST-13/14)。

5 列设置 列管理 + 状态绑定 + 保留选项

本模块的配置中枢:每列一行,包含重命名、状态绑定(T-BD-02)与保留选项(T-FL-02)。列可拖动排序(T-COL-05)、增删(T-COL-02/04),数量 1~10。

拖动左侧手柄调整列顺序;顺序决定「改状态时自动归位」的目标列(取第一个匹配列)。
≡ Plan
未开始 ▾
≡ Doing
执行中 ▾
≡ Action
不绑定状态 ▾
≡ Done
完成 ▾
+ 新增列
删除列
已完成任务保留
Plan
永久显示 ▾
Doing
本月 ▾
Action
3 天 ▾
Done
当天 ▾
保留选项:永不显示 / 当天 / 3 天 / 本周 / 本月 / 永久显示。
仅影响已完成任务;未完成任务始终展示。列表与看板按同一规则过滤。
保存
取消
打卡
任务
宏观
监控
我
列设置

上半区是「列 → 状态」绑定,下半区是「列 → 保留选项」。Action 显示为「不绑定状态」灰态;保存后看板与列表即时生效,不批量改写已有任务(T-BD-11/12)。

列表
看板
过滤
Plan0↔ 未开始
+ 添加任务
Doing0↔ 执行中
+ 添加任务
Action1未绑定
待产品确认的 3 个问题
王五+ 李四
Done0↔ 完成
+ 添加任务
状态已改为「完成」,Action 未绑定完成,任务保留在原列
打卡
任务
宏观
监控
我
自动归位 · 无匹配列

任务在未绑定的 Action 中被勾成「完成」。若其他列绑定了「完成」→ 自动移入第一个匹配列;若全部列都未绑定「完成」→ 不移动,保留在原列(T-BD-14/16)。此屏即后者。

6 任务详情 字段 + 扩展信息卡片(默认收起)

底部弹层。源码等扩展信息放在可折叠卡片内,默认收起、全部非必填(T-TK-04~07),不占用主字段空间。

登录接口返回 500
APP 改版 · Doing · 执行中 · 创建于 10-22
登录接口返回 500
补充说明…
未开始
执行中
完成
张
张三 更换
李
王
李四、王五 编辑
▸扩展信息 2 默认收起 · 全部非必填
保存
打卡
任务
宏观
监控
我
详情(扩展信息收起)

负责人默认填入创建者本人,可清空为「未指派」(T-TK-09/10)。扩展信息卡片默认收起,右侧标出条目数。弹层底部预留 安全区 + 20px(T-UI-11):删除按钮不被手势条遮挡,小屏下弹层内部滚动、底部按钮始终完整可见。

登录接口返回 500
APP 改版 · Doing · 执行中
张
张三 更换
▾扩展信息 2 可自由增删条目
仓库
gitlab/app-web
分支
fix/login-500
相关链接
https://…/issues/128
+ 添加一条
子任务 2
复现环境搭建 完成
补单元测试 执行中
+ 添加子任务
保存
删除任务(将一并删除 2 条子任务)
打卡
任务
宏观
监控
我
详情(扩展信息展开)

扩展条目为任意名称 + 值,不限固定字段(T-TK-05),值可为文本或链接。子任务在此可增删改,状态与父任务互相独立(T-ST-03)。删除任务会提示级联条数(T-EX-07)。

7 项目管理 · 成员与跨项目拷贝 统一入口:成员 / 列设置 / 项目信息

项目页头部的「项目管理」进入统一管理页(T-PJ-11),含成员、列设置、项目信息三个分区;负责人与任务成员只能从当前项目成员中选择(T-AS-03/04);跨项目操作是拷贝(T-CP-01)。

项目内所有成员权限均等、全读写(T-PM-02);以下配置对全体成员即时生效。
成员(4)
张
张三 创建人 管理 ›
看板列
Plan · Doing · Action · Done 列设置 ›
项目信息
项目名称 APP 改版
归档项目 归档
删除项目 删除
个人默认项目不出现「删除项目」;退出项目仅创建人可见(T-PJ-07)。删除与退出均有二次确认。
打卡
任务
宏观
监控
我
项目管理(T-PJ-11/12)

三分区:成员(增删)、列设置(进入第 5 节的列设置页)、项目信息(改名 / 归档 / 删除 / 退出)。项目页头部不再散置成员与列设置入口。

项目内所有成员权限均等、全读写;负责人与成员只是信息标记,不影响权限(T-AS-07、T-PM-02)。
张
张三 创建人 退出
李
李四 移除
王
王五 移除
赵
赵六 已退出 —
成员被移出项目后,其担任的负责人 / 成员标记保留历史并显示「已退出」灰标,不清空、不报错(T-EX-06)。
打卡
任务
宏观
监控
我
项目成员

创建人可主动退出(T-PJ-07);成员清空后项目静默保留、前端不报错(T-PJ-08、T-EX-11)。

跨项目拷贝
将「登录接口返回 500」复制到另一个项目;源任务保持不变
APP 二期 ▾
标题、描述、状态、看板列、标签
负责人与任务成员(仅保留目标项目成员)
2 条子任务 · 2 条扩展信息
王五 不是「APP 二期」的成员,拷贝后将不保留其任务成员标记。
确认拷贝
取消
打卡
任务
宏观
监控
我
拷贝确认

明确列出复制内容与被丢弃的人员(T-EX-08),避免静默丢数据。拷贝后新旧任务完全独立(T-CP-05)。

8 交互与状态 长按拖拽 · 三态 · 边界

8.1 拖拽与落点

操作落点结果
长按卡片 ≥ 300ms—卡片抬起(缩 0.97 + 倾斜 1°),进入拖拽态,锁定滚动
拖到另一列空白列体换列;目标列绑定状态则状态跟随,未绑定则保留原状态(T-BD-07)
拖到另一张卡片上顶层任务卡降为该任务的一级子任务;原列与状态保持不变(T-ST-15)
拖到子任务 / 自身 / 后代非法落点拒绝并 Toast,卡片回弹(T-ST-13、T-EX-15)
被拖任务有子任务任何卡片拒绝,避免二级嵌套(T-ST-14)
无需拖拽时卡片「⋯」「移动到列 / 移动到子任务」等价入口(T-UI-07)

8.2 三态与反馈

列表
看板
打卡
任务
宏观
监控
我
加载态(T-UI-09)

骨架屏,避免白屏与布局跳动。

列表
看板
✓

这个项目还没有任务

创建第一个任务
打卡
任务
宏观
监控
我
空态(T-UI-08)

带明确 CTA;某列因保留选项隐藏全部已完成任务时,展示该列空态而非报错(T-EX-10)。

列表
看板
!

数据加载失败,请检查网络

重试
打卡
任务
宏观
监控
我
异常态(T-UI-10)

乐观更新失败时回滚并 Toast,可重试(T-EX-02)。

9 需求点对照 界面稿 ↔ 需求编号

界面对应需求点
2 任务首屏T-VW-08/09/10、T-VW-03~07、T-PM-06/07、T-PJ-11(头部入口)
2′ 我的项目列表T-PJ-01~10、T-UI-08
3 列表视图T-VW-01/02、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、T-UI-11(底部安全距离)
7 项目管理 / 成员 / 拷贝T-PJ-11/12、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

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》。