182 lines
5.2 KiB
Markdown
182 lines
5.2 KiB
Markdown
# Deploy Ease Platform Frontend
|
||
|
||
Deploy Ease Platform 是一个现代化的部署管理平台前端项目，基于 React 18 和 TypeScript 开发，使用了最新的前端技术栈和最佳实践。
|
||
|
||
## 技术栈
|
||
|
||
- **框架**: React 18 + TypeScript
|
||
- **构建工具**: Vite
|
||
- **路由**: React Router 6
|
||
- **状态管理**: Redux Toolkit
|
||
- **UI 组件**: shadcn/ui + Radix UI
|
||
- **样式**: TailwindCSS
|
||
- **表单**: React Hook Form + Zod
|
||
- **HTTP 客户端**: Axios
|
||
- **工作流编辑器**: X6 + LogicFlow
|
||
- **代码编辑器**: Monaco Editor
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
src/
|
||
├── components/ # 公共组件
|
||
│ └── ui/ # shadcn/ui 组件
|
||
├── pages/ # 页面组件
|
||
│ ├── Dashboard/ # 仪表盘
|
||
│ ├── Deploy/ # 部署管理
|
||
│ ├── System/ # 系统管理
|
||
│ ├── Workflow/ # 工作流管理
|
||
│ └── Login/ # 登录页面
|
||
├── layouts/ # 布局组件
|
||
├── router/ # 路由配置
|
||
├── store/ # Redux 状态管理
|
||
├── services/ # API 服务
|
||
├── utils/ # 工具函数
|
||
├── hooks/ # 自定义 Hooks
|
||
└── types/ # TypeScript 类型定义
|
||
```
|
||
|
||
## 功能模块
|
||
|
||
### 已完成的核心功能一览
|
||
|
||
#### 1. 系统管理
|
||
- 用户管理：增删改查、批量分配、导出等
|
||
- 角色管理：角色维护、权限配置、分发
|
||
- 菜单管理：菜单结构管理、权限绑定
|
||
- 部门管理：组织结构树、成员关系
|
||
|
||
#### 2. 部署管理
|
||
- 项目组管理：分层架构/可视化呈现
|
||
- 应用管理：基础信息、分类、编辑、上下线
|
||
- 环境管理：多环境切换与隔离
|
||
- 部署配置：CICD配置、模板配置、自动化脚本
|
||
- Jenkins 管理：流水线、任务触发、日志采集
|
||
- 外部系统集成：Git、Docker、K8s、通知等系统对接
|
||
- 服务器管理：资产登记、分组、状态监控
|
||
- 定时任务管理：任务启/停/禁/恢复/立即执行、操作日志、cron表达式、分组管理
|
||
|
||
#### 3. 工作流管理
|
||
- 流程定义：自定义流程模板，版本管理
|
||
- 工作流设计器：可视化流程图绘制、条件设置、节点属性
|
||
- 流程实例：流程启动、节点状态追踪、审批流转
|
||
- 节点设计：节点表单、流转条件、校验
|
||
- 工作流监控：流程监控、实例追踪、事件审计
|
||
- 日志流：关键流转日志、运行详情、异常追踪
|
||
|
||
#### 4. 表单/低代码支持
|
||
- 表单设计器：字段联动、校验、模板保存、可视化拖拉拽
|
||
- 表单数据管理：详情、查询、审批流适配
|
||
|
||
#### 5. 其他与基础
|
||
- 登录/注册及权限校验：自动跳转，支持Token、菜单动态加载
|
||
- 公共布局框架：全局导航、响应式菜单、顶部头部（用户信息、天气、通知）
|
||
- 实时消息与操作提示：全平台toast、弹窗反馈
|
||
- RESTful API统一封装，异常处理、自动重定向、全局错误反馈
|
||
- 脚本化、模板化页面快速生成工具，覆盖开发全生命周期
|
||
|
||
## 开发指南
|
||
|
||
### 安装依赖
|
||
```bash
|
||
pnpm install
|
||
```
|
||
|
||
### 开发环境运行
|
||
```bash
|
||
pnpm dev
|
||
```
|
||
|
||
### 构建生产环境
|
||
```bash
|
||
pnpm build
|
||
```
|
||
|
||
## 页面生成工具
|
||
|
||
项目提供了一个便捷的页面生成工具，可以快速生成符合项目规范的页面模板。
|
||
|
||
### 使用方法
|
||
|
||
1. 编译生成器：
|
||
```bash
|
||
npx tsc -p scripts/tsconfig.json
|
||
```
|
||
|
||
2. 运行生成器（两种方式）：
|
||
|
||
a. 交互式模式：
|
||
```bash
|
||
node dist/scripts/generate-page.js
|
||
```
|
||
|
||
b. 命令行参数模式：
|
||
```bash
|
||
node dist/scripts/generate-page.js user "用户管理" "/api/v1/users"
|
||
```
|
||
|
||
### 生成的文件结构
|
||
|
||
生成器会在 `src/pages/[模块名]/List/` 目录下创建以下文件：
|
||
|
||
- `types.ts`: 类型定义
|
||
- `schema.ts`: 表单验证 schema
|
||
- `service.ts`: API 服务
|
||
- `index.tsx`: 列表页面组件
|
||
- `components/[模块名]Modal.tsx`: 编辑弹窗组件
|
||
|
||
生成的页面包含以下功能：
|
||
- 列表展示
|
||
- 搜索表单
|
||
- 新增/编辑弹窗
|
||
- 删除确认
|
||
- 分页
|
||
- 加载状态
|
||
|
||
## 开发规范
|
||
|
||
1. 组件开发
|
||
- 使用函数组件和 Hooks
|
||
- Props 必须定义 TypeScript 类型
|
||
- 使用 shadcn/ui 组件库
|
||
- 遵循 TailwindCSS 样式规范
|
||
|
||
2. 状态管理
|
||
- 使用 Redux Toolkit 管理全局状态
|
||
- 使用 React Hook Form 管理表单状态
|
||
- 使用 Zod 进行表单验证
|
||
|
||
3. API 调用
|
||
- 使用统一的 request 工具
|
||
- 遵循 RESTful 规范
|
||
- 统一的错误处理
|
||
|
||
4. 代码风格
|
||
- 使用 ESLint 和 Prettier
|
||
- 遵循 TypeScript 最佳实践
|
||
- 组件和函数必须添加注释
|
||
|
||
## 浏览器支持
|
||
|
||
- Chrome >= 88
|
||
- Firefox >= 78
|
||
- Safari >= 14
|
||
- Edge >= 88
|
||
|
||
## 贡献指南
|
||
|
||
1. Fork 项目
|
||
2. 创建特性分支
|
||
3. 提交代码
|
||
4. 创建 Pull Request
|
||
|
||
## 许可证
|
||
|
||
[MIT License](LICENSE)
|
||
|
||
---
|
||
|
||
## 当前进度总结
|
||
|
||
Deploy Ease Platform 前端现已全面实现了企业级部署自动化、权限组织、流程设计、定时任务调度、低代码表单等主流能力，覆盖了从组织管控到应用交付、流程编排与运维监控的全业务链路。架构高度模块化、类型定义严格，接口与UI解耦，利于多团队协作与持续扩展。整体技术栈现代，体验优良，适用于现代云运维、DevOps与低代码平台的前端技术解决方案。
|