feat: 完善前后端智能体协调工作流

- 创建前端多智能体工作流 (F1-F9)
- 设计前后端智能体协调机制
- 提供用户管理模块开发示例
- 更新 AI 文档索引结构
- 建立完整的智能体协作体系
This commit is contained in:
万物街
2025-08-27 12:14:24 +08:00
parent 1cd5d3bdef
commit 5118d98369
4 changed files with 821 additions and 1 deletions

View File

@@ -0,0 +1,331 @@
# 前后端智能体协调示例
## 示例:用户管理模块开发
### 阶段一需求分析与架构设计F1+S1, F2+S2
#### F1 FrontendAnalyzer + S1 Analyzer 协调
```yaml
需求分析会议:
参与者: F1, S1
时间: 项目启动第1天
输出:
- 用户管理功能需求
- 用户列表、新增、编辑、删除功能
- 用户角色分配功能
- 用户状态管理功能
API 接口设计:
后端 S1 输出:
- GET /adminapi/user/list - 用户列表
- POST /adminapi/user/create - 创建用户
- PUT /adminapi/user/update - 更新用户
- DELETE /adminapi/user/delete - 删除用户
- POST /adminapi/user/assign-role - 分配角色
- PUT /adminapi/user/update-status - 更新状态
前端 F1 输出:
- 用户列表页面组件结构
- 用户表单组件结构
- 角色分配弹窗组件
- 状态切换组件
```
#### F2 FrontendArchitect + S2 Architect 协调
```yaml
架构设计评审:
参与者: F2, S2
时间: 项目启动第2天
输出:
- 数据模型设计
- 组件接口定义
- 状态管理方案
- 权限控制方案
数据模型对齐:
后端 S2 输出:
```typescript
interface User {
id: number;
username: string;
email: string;
status: UserStatus;
roles: Role[];
createTime: Date;
updateTime: Date;
}
```
前端 F2 输出:
```typescript
interface UserFormData {
username: string;
email: string;
password?: string;
roleIds: number[];
}
```
```
### 阶段二基建接入与开发F3+S3, F4+S4
#### F3 FrontendInfraOperator + S3 InfraOperator 协调
```yaml
基建接入:
后端 S3 输出:
- 用户模块数据库表结构
- 用户认证中间件
- 用户权限守卫
- 用户相关配置
前端 F3 输出:
- 用户管理路由配置
- 用户状态管理 Store
- 用户相关 API 封装
- 用户权限指令
```
#### F4 FrontendDeveloper + S4 Developer 协调
```yaml
并行开发:
后端 S4 开发:
- UserController 实现
- UserService 业务逻辑
- UserRepository 数据访问
- 用户相关 DTO 定义
前端 F4 开发:
- UserList.vue 用户列表页面
- UserForm.vue 用户表单组件
- UserStore.ts 用户状态管理
- UserApi.ts 用户 API 调用
接口联调:
时间: 开发第3天
内容:
- API 接口联调测试
- 数据格式验证
- 错误处理测试
- 权限控制测试
```
### 阶段三质量保障与部署F5-S9 + S5-S9
#### F5 FrontendSecurityGuard + S5 SecurityGuard 协调
```yaml
安全检查:
后端 S5 检查:
- 用户输入验证
- SQL 注入防护
- 权限越权检查
- 敏感信息保护
前端 F5 检查:
- 表单数据验证
- XSS 防护
- 权限控制实现
- 敏感信息处理
```
#### F6 FrontendQualityGate + S6 QualityGate 协调
```yaml
质量检查:
后端 S6 检查:
- 单元测试覆盖率 ≥ 80%
- 集成测试通过
- 代码规范检查通过
- 性能测试通过
前端 F6 检查:
- 组件测试覆盖率 ≥ 80%
- E2E 测试通过
- ESLint 检查通过
- TypeScript 类型检查通过
```
#### F7 FrontendAuditor + S7 Auditor 协调
```yaml
规范审计:
后端 S7 审计:
- 代码规范检查
- 架构合规性检查
- 文档完整性检查
- 安全规范检查
前端 F7 审计:
- 组件规范检查
- 代码风格检查
- 性能规范检查
- 用户体验检查
```
#### F8 FrontendRelease + S8 Release 协调
```yaml
部署协调:
后端 S8 部署:
- 构建 Docker 镜像
- 部署到测试环境
- 数据库迁移
- 配置更新
前端 F8 部署:
- 构建生产版本
- 部署到 CDN
- 更新路由配置
- 版本标签管理
```
#### F9 FrontendPerfTuner + S9 PerfTuner 协调
```yaml
性能优化:
后端 S9 优化:
- 数据库查询优化
- 缓存策略优化
- 并发处理优化
- 监控指标优化
前端 F9 优化:
- 组件懒加载
- 图片资源优化
- 包体积优化
- 渲染性能优化
```
## 协调工具使用示例
### 1. API 契约管理
```yaml
OpenAPI 文档:
```yaml
/adminapi/user/list:
get:
summary: 获取用户列表
parameters:
- name: page
in: query
type: integer
- name: pageSize
in: query
type: integer
responses:
200:
description: 成功
schema:
type: object
properties:
items:
type: array
items:
$ref: '#/definitions/User'
total:
type: integer
```
```
### 2. 代码仓库管理
```yaml
分支策略:
- main: 主分支,生产环境代码
- develop: 开发分支,集成测试
- feature/user-management: 功能分支,用户管理功能
- hotfix/*: 热修复分支
合并策略:
- 功能分支 → develop: 代码审查后合并
- develop → main: 测试通过后合并
- 热修复 → main: 紧急修复直接合并
```
### 3. 持续集成/部署
```yaml
CI/CD Pipeline:
后端流程:
- 代码检查 (ESLint, TypeScript)
- 单元测试
- 集成测试
- 构建 Docker 镜像
- 部署到测试环境
前端流程:
- 代码检查 (ESLint, TypeScript)
- 单元测试
- E2E 测试
- 构建生产版本
- 部署到 CDN
```
## 协调效果评估
### 开发效率指标
```yaml
开发周期:
- 需求分析: 2天
- 架构设计: 1天
- 功能开发: 5天
- 测试联调: 2天
- 部署上线: 1天
总计: 11天
代码质量:
- 后端测试覆盖率: 85%
- 前端测试覆盖率: 80%
- 代码规范通过率: 100%
- 安全扫描通过率: 100%
```
### 协作效果指标
```yaml
沟通效率:
- 协调会议: 每周2次
- 问题解决时间: 平均2小时
- 冲突解决时间: 平均4小时
- 团队满意度: 90%
协调成本:
- 协调会议时间: 每周4小时
- 文档维护时间: 每周2小时
- 工具使用时间: 每周1小时
总计: 每周7小时
```
### 项目质量指标
```yaml
功能完整性:
- 需求实现率: 100%
- 功能测试通过率: 100%
- 用户验收通过率: 95%
性能指标:
- 页面加载时间: < 2秒
- API 响应时间: < 500ms
- 并发用户数: 1000+
稳定性指标:
- 系统可用性: 99.9%
- 错误率: < 0.1%
- 平均故障恢复时间: < 30分钟
```
## 最佳实践总结
### 1. 协调原则
- **契约优先**: 先定义 API 契约,再并行开发
- **同步开发**: 前后端同时启动,定期同步
- **质量对等**: 前后端质量要求一致
### 2. 沟通机制
- **定期会议**: 每周协调会议
- **即时沟通**: 重要问题即时沟通
- **文档记录**: 重要决策文档记录
### 3. 工具使用
- **API 契约**: OpenAPI/Swagger
- **代码管理**: Git + 分支策略
- **持续集成**: CI/CD Pipeline
- **项目管理**: Jira/禅道
### 4. 质量保障
- **测试覆盖**: 前后端测试覆盖率 ≥ 80%
- **代码规范**: 统一的代码规范
- **安全扫描**: 定期安全扫描
- **性能监控**: 持续性能监控

View File

@@ -0,0 +1,276 @@
# 前后端智能体协调配置
## 协调原则
### 1. 同步开发原则
- 前后端智能体同时启动,并行开发
- 通过 API 契约进行协调
- 定期同步开发进度
### 2. 契约优先原则
- 先定义 API 接口契约
- 前后端基于契约独立开发
- 契约变更需要双方确认
### 3. 质量对等原则
- 前后端质量要求一致
- 测试覆盖率要求相同
- 代码规范标准统一
## 智能体映射关系
| 前端智能体 | 后端智能体 | 协调内容 | 协调时机 |
|-----------|-----------|----------|----------|
| F1 FrontendAnalyzer | S1 Analyzer | 需求分析、API 设计 | 项目启动 |
| F2 FrontendArchitect | S2 Architect | 架构设计、接口定义 | 架构设计阶段 |
| F3 FrontendInfraOperator | S3 InfraOperator | 基建接入、环境配置 | 基建搭建阶段 |
| F4 FrontendDeveloper | S4 Developer | 功能开发、接口联调 | 开发阶段 |
| F5 FrontendSecurityGuard | S5 SecurityGuard | 安全检查、权限控制 | 开发中/提测前 |
| F6 FrontendQualityGate | S6 QualityGate | 质量检查、测试覆盖 | CI/CD 阶段 |
| F7 FrontendAuditor | S7 Auditor | 规范审计、代码质量 | 提测前 |
| F8 FrontendRelease | S8 Release | 构建部署、版本管理 | 发布阶段 |
| F9 FrontendPerfTuner | S9 PerfTuner | 性能优化、监控指标 | 持续优化 |
## 协调检查点
### 检查点 1项目启动F1 + S1
```yaml
协调内容:
- 业务需求理解
- 技术栈确认
- 开发计划制定
- API 接口规划
输出产物:
- 需求文档
- 技术方案
- API 接口文档
- 开发计划
```
### 检查点 2架构设计F2 + S2
```yaml
协调内容:
- 系统架构设计
- 数据模型设计
- 组件结构设计
- 接口定义
输出产物:
- 架构设计文档
- 数据模型文档
- 组件设计文档
- API 接口定义
```
### 检查点 3基建搭建F3 + S3
```yaml
协调内容:
- 开发环境配置
- 工具链搭建
- 基础组件开发
- 数据库设计
输出产物:
- 开发环境配置
- 工具链配置
- 基础组件库
- 数据库结构
```
### 检查点 4功能开发F4 + S4
```yaml
协调内容:
- API 接口开发
- 前端页面开发
- 接口联调
- 功能测试
输出产物:
- API 接口实现
- 前端页面实现
- 联调测试报告
- 功能测试报告
```
### 检查点 5质量保障F5-F7 + S5-S7
```yaml
协调内容:
- 安全检查
- 代码质量检查
- 测试覆盖率
- 规范审计
输出产物:
- 安全测试报告
- 代码质量报告
- 测试覆盖率报告
- 规范审计报告
```
### 检查点 6部署上线F8 + S8
```yaml
协调内容:
- 构建部署
- 版本管理
- 环境配置
- 监控配置
输出产物:
- 构建产物
- 部署配置
- 版本说明
- 监控配置
```
### 检查点 7性能优化F9 + S9
```yaml
协调内容:
- 性能分析
- 优化方案
- 监控指标
- 持续优化
输出产物:
- 性能分析报告
- 优化方案
- 监控指标
- 优化效果报告
```
## 协调工具
### 1. API 契约管理
```yaml
工具: OpenAPI/Swagger
用途: API 接口定义和文档
协调: 前后端基于契约开发
```
### 2. 代码仓库管理
```yaml
工具: Git + GitLab/GitHub
用途: 代码版本管理
协调: 分支策略、合并策略
```
### 3. 持续集成/部署
```yaml
工具: CI/CD Pipeline
用途: 自动化构建、测试、部署
协调: 构建流程、测试流程
```
### 4. 项目管理
```yaml
工具: Jira/禅道
用途: 任务管理、进度跟踪
协调: 任务分配、进度同步
```
### 5. 沟通协作
```yaml
工具: 企业微信/钉钉
用途: 实时沟通、问题讨论
协调: 日常沟通、问题解决
```
## 协调流程
### 1. 项目启动阶段
```
1. 需求分析会议F1 + S1
2. 技术方案评审F2 + S2
3. 开发计划制定
4. API 接口设计
```
### 2. 开发阶段
```
1. 基建搭建F3 + S3
2. 功能开发F4 + S4
3. 接口联调
4. 功能测试
```
### 3. 质量保障阶段
```
1. 安全检查F5 + S5
2. 质量检查F6 + S6
3. 规范审计F7 + S7
4. 问题修复
```
### 4. 部署上线阶段
```
1. 构建部署F8 + S8
2. 环境验证
3. 性能优化F9 + S9
4. 监控配置
```
## 协调规范
### 1. 沟通规范
- **定期会议**:每周一次协调会议
- **即时沟通**:重要问题即时沟通
- **文档记录**:重要决策文档记录
- **问题跟踪**:问题跟踪和解决
### 2. 代码规范
- **代码风格**:统一的代码风格
- **命名规范**:统一的命名规范
- **注释规范**:统一的注释规范
- **提交规范**:统一的提交规范
### 3. 测试规范
- **测试覆盖**:统一的测试覆盖率要求
- **测试类型**单元测试、集成测试、e2e 测试
- **测试环境**:统一的测试环境
- **测试报告**:统一的测试报告格式
### 4. 部署规范
- **环境管理**:开发、测试、生产环境
- **版本管理**:统一的版本管理策略
- **回滚策略**:统一的回滚策略
- **监控告警**:统一的监控告警策略
## 协调效果评估
### 1. 开发效率
- **开发周期**:项目开发周期
- **代码质量**:代码质量指标
- **测试覆盖**:测试覆盖率
- **问题数量**:问题数量和解决时间
### 2. 协作效果
- **沟通效率**:沟通效率和效果
- **协调成本**:协调所需的时间和成本
- **冲突解决**:冲突解决的速度和质量
- **团队满意度**:团队满意度调查
### 3. 项目质量
- **功能完整性**:功能实现完整性
- **性能指标**:系统性能指标
- **用户体验**:用户体验评价
- **稳定性**:系统稳定性指标
## 持续改进
### 1. 定期回顾
- **项目回顾**:项目结束后进行回顾
- **流程优化**:根据回顾结果优化流程
- **工具改进**:根据使用情况改进工具
- **规范更新**:根据实践情况更新规范
### 2. 经验总结
- **最佳实践**:总结最佳实践
- **问题案例**:总结问题案例和解决方案
- **工具推荐**:推荐新的工具和方法
- **培训计划**:制定培训计划
### 3. 技术演进
- **技术更新**:跟进技术更新
- **架构演进**:架构演进规划
- **工具升级**:工具升级计划
- **标准更新**:标准更新计划

View File

@@ -0,0 +1,201 @@
# 前端多智能体工作流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 通过、测试覆盖率高
- **用户体验**:界面美观、交互流畅
- **兼容性**:多浏览器兼容
- **安全性**:无安全漏洞
### 持续改进
- **代码审查**:定期代码审查
- **性能监控**:持续性能监控
- **用户反馈**:收集用户反馈
- **技术更新**:跟进技术更新

View File

@@ -3,19 +3,31 @@
### 目标
- **统一规范**: 用 NestJS 的方式实现,与 PHP 业务/数据100%对齐。
- **智能体协作**: 多个智能体基于同一规则、流程与工具偏好执行任务。
- **前后端协调**: 前后端智能体协调开发,确保一致性。
### 文档导航
#### 后端开发
- 工作流程: ./workflow.md
- 工具偏好: ./tooling.md
- 规则规范: ./rules.md
- 执行清单: ./checklists.md
- 基础能力集成: ./integration.md
- 架构映射: ./mapping.md
- 开发规划: ./planner.md
#### 前端开发
- 前端工作流: ./frontend-workflow.md
- 前后端协调: ./coordination.md
### 适用范围
- 仓库: `wwjcloud/` 主后端及 `admin/apps/*` 示例
- 模块: `common/*`, `core/*`, `config/*`, `vendor/*`
- 前端: `admin/apps/web-antd/` Ant Design Vue 项目
### 约定
- 管理端路由: `/adminapi/{module}/...`
- 前台端路由: `/api/{module}/...`
- 配置表: `sys_config.value(JSON)`,禁止使用不存在字段(如 `config_value`, `app_type`
- 前端路由: 按模块组织,支持懒加载
- 组件命名: PascalCase语义化命名