diff --git a/frontend/README.md b/frontend/README.md
new file mode 100644
index 00000000..0584becf
--- /dev/null
+++ b/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)
\ No newline at end of file
diff --git a/frontend/src/router/index.tsx b/frontend/src/router/index.tsx
index 969039cb..846f9cf0 100644
--- a/frontend/src/router/index.tsx
+++ b/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: }>
},
+ {
+ path: 'jenkins',
+ element: }>
+ },
{
path: 'external',
element: (