1

frontend/README.md

@@ -0,0 +1,160 @@
+# 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) 

frontend/src/router/index.tsx

@@ -42,6 +42,7 @@ const ProjectGroupList = lazy(() => import('../pages/Deploy/ProjectGroup/List'))
 const ApplicationList = lazy(() => import('../pages/Deploy/Application/List'));
 const EnvironmentList = lazy(() => import('../pages/Deploy/Environment/List'));
 const DeploymentConfigList = lazy(() => import('../pages/Deploy/Deployment/List'));
+const JenkinsList = lazy(() => import('../pages/Jenkins/List'));
 const External = lazy(() => import('../pages/Deploy/External'));
 
 // 创建路由
@@ -89,6 +90,10 @@ const router = createBrowserRouter([
                         path: 'deployment',
                         element: <Suspense fallback={<LoadingComponent/>}><DeploymentConfigList/></Suspense>
                     },
+                    {
+                        path: 'jenkins',
+                        element: <Suspense fallback={<LoadingComponent/>}><JenkinsList/></Suspense>
+                    },
                     {
                         path: 'external',
                         element: (