# 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与低代码平台的前端技术解决方案。