Loom — 项目管理仪表盘

概览

一个完整的项目管理前端：计划、需求、缺陷的完整增删改查，可复用模板，甘特图视图，以及由派生指标构成的仪表盘——约 1,900 行原生 JavaScript、无构建步骤，并由 80+ 项 Playwright 检查验证。你可以在本站直接操作它。

问题

需求是一个轻量的项目管理工具，却有非常具体的视觉语言——丝线编织的边框、半透明面板、日光光晕、持续的空闲动效——外加一条硬性规则：不能是静态演示。每个控件都必须可用，数据闭环必须在浏览器内完成。而大量动画与玻璃面板通常会与可读性、输入精度和帧预算相互冲突。

我做了什么

把每个模块建模为声明式模式（字段、校验、列、完成态），让表单、表格、延期逻辑与模板由模式生成而非手写；用单一的内存仓库承载派生状态（计划状态由进度推导）；所有图表用 SVG 原地更新；并把全部动效约束在 transform / opacity 上、错峰调度，使十几个呼吸面板依然流畅。

架构

• 仓库 — 内存数组的增 / 改 / 删；枚举值使用与语言无关的代码，数据不依赖界面语言
• 模块模式 — 每个模块一个对象，驱动表单生成、必填 / 范围 / 日期校验、表格列与内联快捷编辑
• 视图 — 仪表盘（指标卡、编织环形图、丝线折线图、优先级条、负载热力图、节气日历、延期提醒、进度提交）、甘特图时间线、三个列表模块
• 渲染 — 骨架只挂载一次，数据区域按需重渲染；SVG 图表原地更新属性，并通过 requestAnimationFrame 补间
• 国际化 — EN / 中文 字典（支持占位符），存储于 localStorage；用户编辑前示例数据随语言重载
• 动效系统 — CSS 关键帧实现呼吸光晕、浮动面板、流动丝光、光柱、金尘与彗星，并支持减弱动效与小屏降级

技术亮点

• 定位到一个 Chrome 命中测试问题：在 prefers-reduced-motion 下，3D 倾斜面板内的按钮收不到点击；移除 preserve-3d 后修复，并用回归测试守住。
• 行点击编辑、内联状态与进度修改、Delete 键批量删除、表单内模板——把常用操作压缩到一次交互。
• 三轮对抗式评审（代码、浏览器 QA、视觉规范）带来 25+ 项修复：日期范围保护、弹窗计时竞态、超长文本溢出、滚动条泄漏、数字滚动。
• 80+ 项无头端到端检查覆盖增删改查、校验、模板、甘特图几何、日历跨年、XSS 转义、响应式宽度与点击命中测试。

成效

• 以可上手的作品形式交付：访客可以在浏览器里用英文或中文操作整个工具，无需后端。
• 它的设计令牌与丝线母题成为了本站的视觉体系。