# 前端多智能体工作流（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 通过、测试覆盖率高
- **用户体验**：界面美观、交互流畅
- **兼容性**：多浏览器兼容
- **安全性**：无安全漏洞

### 持续改进
- **代码审查**：定期代码审查
- **性能监控**：持续性能监控
- **用户反馈**：收集用户反馈
- **技术更新**：跟进技术更新