160 lines
3.3 KiB
Markdown
160 lines
3.3 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. 部署管理
|
|
- 项目组管理
|
|
- 应用管理
|
|
- 环境管理
|
|
- 部署配置
|
|
- 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](LICENSE) |