6.9 KiB
6.9 KiB
前端多智能体工作流（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：核心指标监控
执行与验收
开发流程
- 需求分析：F1 分析需求，与 S1 协调
- 架构设计：F2 设计架构，与 S2 协调
- 基建接入：F3 接入基建，与 S3 协调
- 功能开发：F4 开发功能，与 S4 协调
- 质量保障：F5-F7 质量检查，与 S5-S7 协调
- 部署上线：F8 构建部署，与 S8 协调
- 性能优化：F9 性能优化，与 S9 协调
验收标准
- 功能完整性：所有功能正常
- 性能指标：加载时间、响应时间达标
- 代码质量：ESLint 通过、测试覆盖率高
- 用户体验：界面美观、交互流畅
- 兼容性：多浏览器兼容
- 安全性：无安全漏洞
持续改进
- 代码审查：定期代码审查
- 性能监控：持续性能监控
- 用户反馈：收集用户反馈
- 技术更新：跟进技术更新