deploy-ease-platform/frontend

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统一封装，异常处理、自动重定向、全局错误反馈
• 脚本化、模板化页面快速生成工具，覆盖开发全生命周期

开发指南

安装依赖

pnpm install

开发环境运行

pnpm dev

构建生产环境

pnpm build

页面生成工具

项目提供了一个便捷的页面生成工具，可以快速生成符合项目规范的页面模板。

使用方法

1. 编译生成器：

npx tsc -p scripts/tsconfig.json

2. 运行生成器（两种方式）：

   a. 交互式模式：

   node dist/scripts/generate-page.js
   

   b. 命令行参数模式：

   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

---

当前进度总结

Deploy Ease Platform 前端现已全面实现了企业级部署自动化、权限组织、流程设计、定时任务调度、低代码表单等主流能力，覆盖了从组织管控到应用交付、流程编排与运维监控的全业务链路。架构高度模块化、类型定义严格，接口与UI解耦，利于多团队协作与持续扩展。整体技术栈现代，体验优良，适用于现代云运维、DevOps与低代码平台的前端技术解决方案。