Add hierarchical work list table

README.md

@@ -1,6 +1,6 @@
 # OrbitFlow React 后台模板
 
-一个无需后端即可运行的现代后台管理模板。项目基于 React 19、Next.js 与 vinext，所有演示业务数据来自本地 JSON；定时任务和审批流程配置通过 `localStorage` 保存在当前浏览器。
+一个无需后端即可运行的现代后台管理模板。项目基于 React 19、Next.js 与 vinext，所有演示业务数据来自本地 JSON；定时任务、审批流程和工作列表修改通过 `localStorage` 保存在当前浏览器。
 
 ## 已包含
 
@@ -10,12 +10,26 @@
 - 支持拖放的四列流程泳道
 - 定时任务列表、启停开关和新建配置弹窗
 - 类飞书的审批流程设计器
-- 全局搜索、待办勾选、Toast 提示等交互
-- 桌面、平板和手机响应式布局
+- 项目、里程碑、任务、子任务多级工作表格
+- 全局搜索、批量选择、筛选、Toast 等交互
+
+## 工作列表
+
+打开 `/worklist`，或点击后台首页右下角“工作列表”入口。页面支持：
+
+- 项目 → 里程碑 → 任务 → 子任务四级树形表格
+- 单级展开、全部展开与全部收起
+- 关键词、状态和优先级组合筛选
+- 多选、全选和悬浮批量操作栏
+- 负责人、状态、优先级、进度与计划日期
+- 工作项详情侧栏及状态编辑
+- 选择任意上级新建子任务
+
+示例数据位于 `app/data/work-list.json`。
 
 ## 审批流程设计器
 
-打开 `/approval`，或点击后台右下角的“审批流程设计”入口。设计器包含：
+打开 `/approval`，或点击后台首页右下角“审批流程设计”入口。设计器包含：
 
 - 左侧审批、条件分支和抄送节点库
 - 节点点击添加及拖入画布
@@ -25,7 +39,7 @@
 - 流程校验、模拟预览、JSON 查看与复制
 - 自动保存、恢复示例及本地发布状态
 
-示例流程数据位于 `app/data/approval-flow.json`，不会调用后端接口。
+示例流程数据位于 `app/data/approval-flow.json`。
 
 ## 本地运行
 
@@ -45,19 +59,21 @@ npm test
 
 ## 数据位置
 
-- `app/data/mock-data.json`：概览、项目、泳道和定时任务数据
+- `app/data/mock-data.json`：概览、项目、泳道和定时任务
 - `app/data/approval-flow.json`：审批流程、条件分支和节点配置
+- `app/data/work-list.json`：树形工作项及层级关系
 
 后续接入真实接口时，可以保留页面组件，只替换数据读取方式。当前 `.openai/hosting.json` 中的 D1 和 R2 均为 `null`，项目不依赖数据库或对象存储。
 
 ## 主要文件
 
 - `app/AdminApp.tsx`：后台主界面和交互逻辑
+- `app/worklist/page.tsx`：多级工作列表逻辑
+- `app/worklist/WorkList.module.css`：树形表格视觉样式
 - `app/approval/page.tsx`：审批流程设计器逻辑
 - `app/approval/ApprovalDesigner.module.css`：设计器视觉与布局
 - `app/globals.css`：后台视觉系统与响应式样式
-- `tests/rendered-html.test.mjs`：渲染与纯前端约束检查
 
 ## 注意
 
-任务启停、新建任务和审批流程修改都会写入浏览器本地存储。清除浏览器站点数据后会恢复为 JSON 中的初始内容。
+所有新增和状态修改只写入浏览器本地存储。清除浏览器站点数据后会恢复为 JSON 中的初始内容。