2.7 KiB
2.7 KiB
OrbitFlow React 后台模板
一个无需后端即可运行的现代后台管理模板。项目基于 React 19、Next.js 与 vinext，所有演示业务数据来自本地 JSON；定时任务、审批流程和工作列表修改通过 localStorage 保存在当前浏览器。
已包含
- 深色多级侧边菜单与移动端抽屉导航
- 标签、按钮、表单、状态反馈与菜单样式
- 图片文字列表和响应式卡片视图
- 支持拖放的四列流程泳道
- 定时任务列表、启停开关和新建配置弹窗
- 类飞书的审批流程设计器
- 项目、里程碑、任务、子任务多级工作表格
- 全局搜索、批量选择、筛选、Toast 等交互
工作列表
打开 /worklist，或点击后台首页右下角“工作列表”入口。页面支持：
- 项目 → 里程碑 → 任务 → 子任务四级树形表格
- 单级展开、全部展开与全部收起
- 关键词、状态和优先级组合筛选
- 多选、全选和悬浮批量操作栏
- 负责人、状态、优先级、进度与计划日期
- 工作项详情侧栏及状态编辑
- 选择任意上级新建子任务
示例数据位于 app/data/work-list.json。
审批流程设计器
打开 /approval，或点击后台首页右下角“审批流程设计”入口。设计器包含：
- 左侧审批、条件分支和抄送节点库
- 节点点击添加及拖入画布
- 审批条件双分支与合流展示
- 单人审批、或签、会签规则
- 审批人、表单权限与高级规则配置
- 流程校验、模拟预览、JSON 查看与复制
- 自动保存、恢复示例及本地发布状态
示例流程数据位于 app/data/approval-flow.json。
本地运行
需要 Node.js >=22.13.0。
npm install
npm run dev
生产构建与测试：
npm run build
npm test
数据位置
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：后台视觉系统与响应式样式
注意
所有新增和状态修改只写入浏览器本地存储。清除浏览器站点数据后会恢复为 JSON 中的初始内容。