64 lines
2.1 KiB
Markdown
64 lines
2.1 KiB
Markdown
# OrbitFlow React 后台模板
|
||
|
||
一个无需后端即可运行的现代后台管理模板。项目基于 React 19、Next.js 与 vinext，所有演示业务数据来自本地 JSON；定时任务和审批流程配置通过 `localStorage` 保存在当前浏览器。
|
||
|
||
## 已包含
|
||
|
||
- 深色多级侧边菜单与移动端抽屉导航
|
||
- 标签、按钮、表单、状态反馈与菜单样式
|
||
- 图片文字列表和响应式卡片视图
|
||
- 支持拖放的四列流程泳道
|
||
- 定时任务列表、启停开关和新建配置弹窗
|
||
- 类飞书的审批流程设计器
|
||
- 全局搜索、待办勾选、Toast 提示等交互
|
||
- 桌面、平板和手机响应式布局
|
||
|
||
## 审批流程设计器
|
||
|
||
打开 `/approval`，或点击后台右下角的“审批流程设计”入口。设计器包含：
|
||
|
||
- 左侧审批、条件分支和抄送节点库
|
||
- 节点点击添加及拖入画布
|
||
- 审批条件双分支与合流展示
|
||
- 单人审批、或签、会签规则
|
||
- 审批人、表单权限与高级规则配置
|
||
- 流程校验、模拟预览、JSON 查看与复制
|
||
- 自动保存、恢复示例及本地发布状态
|
||
|
||
示例流程数据位于 `app/data/approval-flow.json`，不会调用后端接口。
|
||
|
||
## 本地运行
|
||
|
||
需要 Node.js `>=22.13.0`。
|
||
|
||
```bash
|
||
npm install
|
||
npm run dev
|
||
```
|
||
|
||
生产构建与测试：
|
||
|
||
```bash
|
||
npm run build
|
||
npm test
|
||
```
|
||
|
||
## 数据位置
|
||
|
||
- `app/data/mock-data.json`：概览、项目、泳道和定时任务数据
|
||
- `app/data/approval-flow.json`：审批流程、条件分支和节点配置
|
||
|
||
后续接入真实接口时，可以保留页面组件，只替换数据读取方式。当前 `.openai/hosting.json` 中的 D1 和 R2 均为 `null`，项目不依赖数据库或对象存储。
|
||
|
||
## 主要文件
|
||
|
||
- `app/AdminApp.tsx`：后台主界面和交互逻辑
|
||
- `app/approval/page.tsx`：审批流程设计器逻辑
|
||
- `app/approval/ApprovalDesigner.module.css`：设计器视觉与布局
|
||
- `app/globals.css`：后台视觉系统与响应式样式
|
||
- `tests/rendered-html.test.mjs`：渲染与纯前端约束检查
|
||
|
||
## 注意
|
||
|
||
任务启停、新建任务和审批流程修改都会写入浏览器本地存储。清除浏览器站点数据后会恢复为 JSON 中的初始内容。
|