201 lines
6.9 KiB
Markdown
201 lines
6.9 KiB
Markdown
|
# 前端多智能体工作流（Ant Design Vue）
|
|||
|
|
|
|||
|
|
## 智能体角色定义（按执行顺序标注）
|
|||
|
|
|
|||
|
|
### F1 前端需求分析体(FrontendAnalyzer)
|
|||
|
|
- **职责**：解析前端需求、对应 Ant Design Vue 规范、输出组件设计与页面结构
|
|||
|
|
- **输入**：业务需求、UI/UX 设计稿、后端 API 接口
|
|||
|
|
- **输出**：页面结构图、组件树、路由配置、状态管理方案
|
|||
|
|
|
|||
|
|
### F2 前端架构治理体(FrontendArchitect)
|
|||
|
|
- **职责**：校验前端分层/目录规范，给出组件设计建议与边界清单
|
|||
|
|
- **校验**：目录结构、组件分层、状态管理、路由设计
|
|||
|
|
- **输出**：前端架构设计说明、组件接口定义、重构建议
|
|||
|
|
|
|||
|
|
### F3 前端基建接入体(FrontendInfraOperator)
|
|||
|
|
- **职责**：接入/校验 Vben Admin 生态、状态管理、路由、国际化
|
|||
|
|
- **接入**：Pinia、Vue Router、i18n、Vben Hooks、组件库适配
|
|||
|
|
- **产物**：接入差异与示例代码，配置项校验清单
|
|||
|
|
|
|||
|
|
### F4 前端开发执行体(FrontendDeveloper)
|
|||
|
|
- **职责**：按规范编码、编写组件、修复构建
|
|||
|
|
- **实现**：页面组件、业务逻辑、API 调用、状态管理
|
|||
|
|
- **测试**：组件测试、页面测试、集成测试
|
|||
|
|
|
|||
|
|
### F5 前端安全基线体(FrontendSecurityGuard)
|
|||
|
|
- **职责**：检查权限控制、数据验证、XSS 防护
|
|||
|
|
- **检查**：路由守卫、按钮权限、表单验证、敏感信息处理
|
|||
|
|
|
|||
|
|
### F6 前端质量门禁体(FrontendQualityGate)
|
|||
|
|
- **职责**：聚合 ESLint/TS/覆盖率/e2e 结果，低于阈值阻断合并
|
|||
|
|
- **指标**：ESLint/TS 无报错、覆盖率≥阈值、e2e 关键路径通过
|
|||
|
|
|
|||
|
|
### F7 前端规范审计体(FrontendAuditor)
|
|||
|
|
- **职责**：按清单逐项核查，出具差异报告与修复项
|
|||
|
|
- **检查**：组件规范、命名规范、代码风格、性能优化
|
|||
|
|
|
|||
|
|
### F8 前端构建部署体(FrontendRelease)
|
|||
|
|
- **职责**：构建、变更说明、部署计划
|
|||
|
|
- **产出**：构建产物、变更日志、部署步骤
|
|||
|
|
|
|||
|
|
### F9 前端性能优化体(FrontendPerfTuner)
|
|||
|
|
- **职责**：建议缓存/懒加载/代码分割，识别性能瓶颈
|
|||
|
|
- **优化**：组件懒加载、图片优化、包体积优化、渲染性能
|
|||
|
|
|
|||
|
|
## 前后端智能体协调机制
|
|||
|
|
|
|||
|
|
### 协调流程（F1-F9 + S1-S9）
|
|||
|
|
|
|||
|
|
#### 阶段一：需求分析与架构设计（F1+F2 + S1+S2）
|
|||
|
|
```
|
|||
|
|
F1 FrontendAnalyzer ←→ S1 Analyzer
|
|||
|
|
├── 前端需求分析 ←→ 后端 API 设计
|
|||
|
|
├── 组件结构设计 ←→ 数据模型设计
|
|||
|
|
└── 状态管理方案 ←→ 业务逻辑设计
|
|||
|
|
|
|||
|
|
F2 FrontendArchitect ←→ S2 Architect
|
|||
|
|
├── 前端架构设计 ←→ 后端架构设计
|
|||
|
|
├── 组件接口定义 ←→ API 接口定义
|
|||
|
|
└── 数据流设计 ←→ 数据流设计
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 阶段二：基建接入与开发（F3+F4 + S3+S4）
|
|||
|
|
```
|
|||
|
|
F3 FrontendInfraOperator ←→ S3 InfraOperator
|
|||
|
|
├── 前端基建接入 ←→ 后端基建接入
|
|||
|
|
├── 组件库适配 ←→ 数据库/缓存接入
|
|||
|
|
└── 开发环境配置 ←→ 开发环境配置
|
|||
|
|
|
|||
|
|
F4 FrontendDeveloper ←→ S4 Developer
|
|||
|
|
├── 前端组件开发 ←→ 后端接口开发
|
|||
|
|
├── API 调用实现 ←→ API 接口实现
|
|||
|
|
└── 页面功能开发 ←→ 业务逻辑实现
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 阶段三：质量保障与部署（F5-F9 + S5-S9）
|
|||
|
|
```
|
|||
|
|
F5 FrontendSecurityGuard ←→ S5 SecurityGuard
|
|||
|
|
├── 前端安全检查 ←→ 后端安全检查
|
|||
|
|
├── 权限控制实现 ←→ 权限控制实现
|
|||
|
|
└── 数据验证 ←→ 数据验证
|
|||
|
|
|
|||
|
|
F6 FrontendQualityGate ←→ S6 QualityGate
|
|||
|
|
├── 前端质量检查 ←→ 后端质量检查
|
|||
|
|
├── 代码规范检查 ←→ 代码规范检查
|
|||
|
|
└── 测试覆盖率 ←→ 测试覆盖率
|
|||
|
|
|
|||
|
|
F7 FrontendAuditor ←→ S7 Auditor
|
|||
|
|
├── 前端规范审计 ←→ 后端规范审计
|
|||
|
|
├── 代码质量检查 ←→ 代码质量检查
|
|||
|
|
└── 架构合规性 ←→ 架构合规性
|
|||
|
|
|
|||
|
|
F8 FrontendRelease ←→ S8 Release
|
|||
|
|
├── 前端构建部署 ←→ 后端构建部署
|
|||
|
|
├── 版本管理 ←→ 版本管理
|
|||
|
|
└── 部署协调 ←→ 部署协调
|
|||
|
|
|
|||
|
|
F9 FrontendPerfTuner ←→ S9 PerfTuner
|
|||
|
|
├── 前端性能优化 ←→ 后端性能优化
|
|||
|
|
├── 用户体验优化 ←→ 系统性能优化
|
|||
|
|
└── 监控指标 ←→ 监控指标
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 前端开发规范
|
|||
|
|
|
|||
|
|
### 目录结构规范
|
|||
|
|
```
|
|||
|
|
src/
|
|||
|
|
├── views/ # 页面组件
|
|||
|
|
│ ├── system/ # 系统管理模块
|
|||
|
|
│ ├── business/ # 业务模块
|
|||
|
|
│ └── _core/ # 核心页面
|
|||
|
|
├── components/ # 公共组件
|
|||
|
|
├── api/ # API 接口
|
|||
|
|
├── store/ # 状态管理
|
|||
|
|
├── router/ # 路由配置
|
|||
|
|
├── locales/ # 国际化
|
|||
|
|
├── utils/ # 工具函数
|
|||
|
|
└── adapter/ # 适配器层
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 组件开发规范
|
|||
|
|
- **命名规范**：PascalCase，语义化命名
|
|||
|
|
- **文件结构**：index.vue + data.ts + modules/
|
|||
|
|
- **组件设计**：单一职责、可复用、可测试
|
|||
|
|
- **状态管理**：使用 Pinia，按模块划分
|
|||
|
|
|
|||
|
|
### API 调用规范
|
|||
|
|
- **接口定义**：使用 TypeScript 类型定义
|
|||
|
|
- **错误处理**：统一错误处理机制
|
|||
|
|
- **请求封装**：使用 Vben 的 request 工具
|
|||
|
|
- **数据转换**：前后端数据格式转换
|
|||
|
|
|
|||
|
|
### 路由配置规范
|
|||
|
|
- **路由结构**：按模块组织，支持懒加载
|
|||
|
|
- **权限控制**：路由级权限控制
|
|||
|
|
- **面包屑**：自动生成面包屑导航
|
|||
|
|
- **缓存策略**：页面缓存配置
|
|||
|
|
|
|||
|
|
## 前后端协调检查点
|
|||
|
|
|
|||
|
|
### 开发前协调
|
|||
|
|
- [ ] API 接口设计确认
|
|||
|
|
- [ ] 数据模型对齐
|
|||
|
|
- [ ] 权限控制方案
|
|||
|
|
- [ ] 错误处理机制
|
|||
|
|
|
|||
|
|
### 开发中协调
|
|||
|
|
- [ ] API 接口联调
|
|||
|
|
- [ ] 数据格式验证
|
|||
|
|
- [ ] 权限控制测试
|
|||
|
|
- [ ] 错误处理测试
|
|||
|
|
|
|||
|
|
### 开发后协调
|
|||
|
|
- [ ] 功能完整性测试
|
|||
|
|
- [ ] 性能测试
|
|||
|
|
- [ ] 安全测试
|
|||
|
|
- [ ] 部署协调
|
|||
|
|
|
|||
|
|
## 工具与配置
|
|||
|
|
|
|||
|
|
### 开发工具
|
|||
|
|
- **IDE**：VS Code + Volar
|
|||
|
|
- **调试**：Vue DevTools
|
|||
|
|
- **测试**：Vitest + Playwright
|
|||
|
|
- **构建**：Vite
|
|||
|
|
|
|||
|
|
### 代码规范
|
|||
|
|
- **ESLint**：代码质量检查
|
|||
|
|
- **Prettier**：代码格式化
|
|||
|
|
- **TypeScript**：类型检查
|
|||
|
|
- **Husky**：Git 钩子
|
|||
|
|
|
|||
|
|
### 性能监控
|
|||
|
|
- **Bundle Analyzer**：包体积分析
|
|||
|
|
- **Lighthouse**：性能评分
|
|||
|
|
- **Web Vitals**：核心指标监控
|
|||
|
|
|
|||
|
|
## 执行与验收
|
|||
|
|
|
|||
|
|
### 开发流程
|
|||
|
|
1. **需求分析**：F1 分析需求，与 S1 协调
|
|||
|
|
2. **架构设计**：F2 设计架构，与 S2 协调
|
|||
|
|
3. **基建接入**：F3 接入基建，与 S3 协调
|
|||
|
|
4. **功能开发**：F4 开发功能，与 S4 协调
|
|||
|
|
5. **质量保障**：F5-F7 质量检查，与 S5-S7 协调
|
|||
|
|
6. **部署上线**：F8 构建部署，与 S8 协调
|
|||
|
|
7. **性能优化**：F9 性能优化，与 S9 协调
|
|||
|
|
|
|||
|
|
### 验收标准
|
|||
|
|
- **功能完整性**：所有功能正常
|
|||
|
|
- **性能指标**：加载时间、响应时间达标
|
|||
|
|
- **代码质量**：ESLint 通过、测试覆盖率高
|
|||
|
|
- **用户体验**：界面美观、交互流畅
|
|||
|
|
- **兼容性**：多浏览器兼容
|
|||
|
|
- **安全性**：无安全漏洞
|
|||
|
|
|
|||
|
|
### 持续改进
|
|||
|
|
- **代码审查**：定期代码审查
|
|||
|
|
- **性能监控**：持续性能监控
|
|||
|
|
- **用户反馈**：收集用户反馈
|
|||
|
|
- **技术更新**：跟进技术更新
|