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. 部署管理

• 项目组管理
• 应用管理
• 环境管理
• 部署配置
• Jenkins管理
• 外部系统集成

3. 工作流管理

• 工作流定义
• 工作流设计器
• 工作流实例
• 节点设计
• 工作流监控
• 日志流

开发指南

安装依赖

```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