项目进度时间线 · 轻量任务管理

单机模式 vs 多人在线

没登录时是单机模式：数据只存在这台电脑的浏览器里，换设备看不到，也没法和同事共享。

点右上角「登录 / 注册」并填后端地址后进入多人在线模式：数据存 MySQL，成员各自用邮箱注册账号，凭邀请码加入同一个项目，改完刷新就能看到彼此的最新排期。

注册 ≠ 加入项目：注册只建账号；必须凭邀请码（项目经理点「邀请成员」生成）才能看到项目数据，否则谁注册都能看你们排期
登录后「当前身份」下拉会消失——你就是你，权限由服务端按账号判定，改前端 JS 也绕不过去
所有改动先落本地再增量提交服务端，所以界面永远是立刻响应的，不会卡在等接口
别人的改动目前要刷新页面才看得到；要实时推送得接 WebSocket 或腾讯云 IM

1. 时间线怎么用

横轴是按天的时间刻度，每个色块 = 一条任务，长度就是「开始 → 截止」。按成员分组时，一个成员占一行；同一成员时间重叠的任务会自动分层错开（不会被压在一起看不见）。

平移：在空白处按住拖动，或按住 Shift + 滚轮
缩放：Ctrl/⌘ + 滚轮（以鼠标位置为锚点），或工具栏 − / +
调整排期：拖动色块整体平移；拖色块左右两端改起止（项目经理可用）
勾选：色块左侧的圆圈，点一下即完成/取消，列表视图同步
行高：工具栏「行高」可切换 统一等高（所有成员行一样高，左列最整齐，默认）或按需（并行任务多的成员自动加高）。统一等高时，任务层会在行内垂直居中，不会全挤在行顶。

2. 任务名称太长显示不全

本工具同时用了四种手段，可在工具栏「任务名」里切换：

条内省略号 + 悬浮气泡：色块内单行显示、超出用 …，鼠标停留弹出完整信息卡（名称、负责人、起止、子任务进度）。
自动外置（默认）：色块窄于约 96px 时，标题自动移到色块右侧空白处显示，不挤压色块、也不丢信息。
放大时间线：放大后单日宽度变大，同样长度的任务自然能装下更多字。
点击看详情：完整名称永远在详情弹窗里，不受宽度限制。

另外「不分组（每任务一行）」模式会把完整任务名放在左侧固定列，适合核对文字。

3. 不同任务不同颜色

两层配色，互不冲突：

按分类继承：每个分类（需求/设计/开发/测试/运维/会议）有固定色，新建任务选分类就自动带色，色板在工具栏右侧图例可查。
单任务覆盖：详情弹窗里点色块可单独指定颜色（8 色调色板，或「跟随分类」还原）。
完成态强制绿色 + 对勾：需求要求已完成色块视觉区分明显，所以已完成统一显示为绿色并带 ✓；任务原色仍记录着，取消完成后自动恢复。

4. 任务提醒

已实现的提醒（纯前端，无需服务器）：

任务详情里设置：截止当天 9:00 / 提前 1 天 / 提前 3 天 / 自定义具体时间
页面每 30 秒扫一次；到点后弹出页面内提醒条，并（在你授权后）发系统桌面通知
右上角🔔显示「逾期 + 今日到期」数量；逾期任务在时间线上有红色描边

局限必须说清楚：纯前端提醒只在页面开着时生效，关掉浏览器就不会响。要真正「关页面也能提醒」，得配后端 + 推送通道（Web Push / 企业微信机器人 / 邮件 / 微信订阅消息），见文末说明。

5. 权限规则（当前实现）

能力	项目经理	普通成员
查看全部任务	✓	✓
勾选完成（自己的任务）	✓	✓
勾选完成（他人任务）	✓	✗
改名称 / 备注 / 子任务 / 颜色	✓	仅自己名下
改开始/截止时间（拖拽或日期框）	✓	✗
逾期顺延一天	✓	仅自己名下
删除任务	✓	仅自己名下
新建任务	✓ 可指派任意人	✓ 只能指派自己
增删成员	✓	✗

切换到「李娜（成员）」试试：别人的任务点开只能看，自己任务的日期框是灰的、时间线上也拖不动。

6. 数据存储与升级路径

当前数据存在浏览器 localStorage（键名 wb.pm.timeline.v1），刷新不丢。要多人实时协作，把 store.js 那三个函数（load / save / 种子数据）换成后端 API 即可，UI 层不用动：接口只有「读全量」「写单条」。多人实时建议走 WebSocket / 腾讯云 IM 广播变更；持久化建议 Postgres + 一张 tasks 表。