From 01f57e22a0b7a0682cb44ef13114d67ac29add8e Mon Sep 17 00:00:00 2001 From: asp_ly Date: Sat, 28 Dec 2024 19:38:22 +0800 Subject: [PATCH] 1 --- frontend/README.md | 160 ++++++++++++++++++++++++++++++++++ frontend/src/router/index.tsx | 5 ++ 2 files changed, 165 insertions(+) create mode 100644 frontend/README.md 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: (