# 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)