Agents
企业级多Agent角色协同记忆系统
记忆服务 MCP 网关（Memory Service MCP Gateway）
AI Orchestrator (AI 编排引擎) - 通用 AI 平台协作框架
Phase 5: Web UI 开发计划
本文档使用 MrDoc 发布
-
+
首页
Phase 5: Web UI 开发计划
# Phase 5: Web UI 开发计划 **版本**: v1.0 **预计时间**: Day 22-28 (7天) **状态**: 🚀 启动中 --- ## 📋 目标 开发企业级 Web 用户界面，提供可视化的 AI Agent 协作管理平台，实现实时监控、投票决策、人工干预等核心功能。 --- ## 🎯 核心功能 ### 1. Dashboard（仪表盘） - **实时状态监控** - 活跃 Agent 数量 - 进行中的投票会话 - 风险告警数量 - 系统性能指标 - **数据可视化** - 投票通过率趋势图 - Agent 活动时间线 - 干预事件分布图 - **快速操作入口** - 创建新投票 - 紧急暂停所有 Agent - 查看最近告警 ### 2. Agents（Agent 管理） - **Agent 列表** - 平台（Claude、OpenAI、Qwen） - 状态（active、paused、stopped） - 当前任务 - 资源使用情况 - **Agent 详情** - 执行历史 - 性能指标 - 配置管理 - **操作功能** - 启动/暂停/停止 Agent - 调整参数 - 查看日志 ### 3. Votes（投票管理） - **投票列表** - 进行中/已完成/已过期 - 投票类型（代码审查、部署决策等） - 当前进度 - 投票结果 - **投票详情** - 投票描述 - 投票人列表和权重 - 实时投票进度 - 评论和讨论 - **创建投票** - 自定义配置（票数、权重、阈值） - 选择投票人 - 设置过期时间 - **投票操作** - 提交投票 - 取消投票 - 延长时间 ### 4. Intervention（人工干预） - **风险监控** - 实时风险列表 - 风险等级（low、medium、high、critical） - 风险趋势图 - **干预请求** - 干预历史 - 批准/拒绝操作 - 干预原因和结果 - **紧急操作** - 一键暂停所有 Agent - 系统回滚 - 紧急通知 ### 5. Settings（设置） - **系统配置** - 投票默认配置 - 风险规则配置 - 通知渠道设置 - **用户管理** - 用户列表 - 权限配置 - 白名单管理 - **集成配置** - Telegram Bot Token - Webhook URLs - Email SMTP --- ## 🏗️ 技术架构 ### 前端技术栈 ``` React 18.3+ # UI 框架 TypeScript 5.7+ # 类型系统 Vite 6.0+ # 构建工具 Shadcn UI # 组件库 Tailwind CSS 3.4+ # 样式 Zustand 4.5+ # 状态管理 React Router 6.28+ # 路由 TanStack Query 5.0+ # 数据获取 Recharts 2.14+ # 图表 WebSocket # 实时通信 ``` ### 项目结构 ``` packages/web-ui/ ├── public/ # 静态资源 ├── src/ │ ├── components/ # 组件 │ │ ├── ui/ # Shadcn UI 基础组件 │ │ ├── dashboard/ # Dashboard 组件 │ │ ├── agents/ # Agents 组件 │ │ ├── votes/ # Votes 组件 │ │ ├── intervention/ # Intervention 组件 │ │ └── common/ # 公共组件 │ │ │ ├── pages/ # 页面 │ │ ├── Dashboard.tsx │ │ ├── Agents.tsx │ │ ├── Votes.tsx │ │ ├── Intervention.tsx │ │ └── Settings.tsx │ │ │ ├── stores/ # Zustand 状态管理 │ │ ├── useAgentStore.ts │ │ ├── useVoteStore.ts │ │ ├── useInterventionStore.ts │ │ └── useWebSocketStore.ts │ │ │ ├── hooks/ # 自定义 Hooks │ │ ├── useWebSocket.ts │ │ ├── useVoting.ts │ │ └── useIntervention.ts │ │ │ ├── services/ # API 服务 │ │ ├── api.ts │ │ ├── websocket.ts │ │ └── types.ts │ │ │ ├── lib/ # 工具库 │ │ └── utils.ts │ │ │ ├── App.tsx # 应用入口 │ └── main.tsx # 主文件 │ ├── index.html ├── package.json ├── tsconfig.json ├── vite.config.ts ├── tailwind.config.ts └── components.json # Shadcn UI 配置 ``` --- ## 📅 开发计划 ### Day 22: 项目搭建（今天） - [x] 创建开发计划文档 - [ ] 创建 web-ui 项目结构 - [ ] 配置 Vite + React + TypeScript - [ ] 集成 Tailwind CSS - [ ] 初始化 Shadcn UI - [ ] 配置路由（React Router） - [ ] 配置状态管理（Zustand） ### Day 23: WebSocket 和 API 集成 - [ ] 实现 WebSocket 客户端 - [ ] 配置 API 客户端（TanStack Query） - [ ] 实现实时事件处理 - [ ] 创建自定义 Hooks ### Day 24: Dashboard 页面 - [ ] 实现状态卡片组件 - [ ] 实现图表组件（Recharts） - [ ] 实现活动时间线 - [ ] 集成实时数据 ### Day 25: Agents 和 Votes 页面 - [ ] Agents 列表和详情 - [ ] Agent 操作功能 - [ ] Votes 列表和详情 - [ ] 创建投票表单 ### Day 26: Intervention 和 Settings 页面 - [ ] 风险监控面板 - [ ] 干预请求管理 - [ ] 紧急操作按钮 - [ ] 设置页面表单 ### Day 27: 优化和测试 - [ ] 响应式设计优化 - [ ] 性能优化 - [ ] E2E 测试（Playwright） - [ ] 错误处理和边界情况 ### Day 28: 文档和部署 - [ ] 编写使用文档 - [ ] 创建部署配置 - [ ] 构建生产版本 - [ ] Phase 5 完成报告 --- ## 🎨 UI/UX 设计原则 ### 1. 设计系统 - **颜色方案**: 专业暗色主题 - Primary: Blue-500 (投票、操作) - Success: Green-500 (通过、正常) - Warning: Yellow-500 (警告、风险) - Danger: Red-500 (拒绝、紧急) - Neutral: Gray-700 (背景、文本) - **字体**: - 标题: Inter Bold - 正文: Inter Regular - 代码: JetBrains Mono ### 2. 交互设计 - **实时更新**: WebSocket 推送，无需刷新 - **乐观更新**: 操作即刻响应，后台同步 - **错误提示**: Toast 通知 + 详细错误信息 - **加载状态**: Skeleton 占位 + Loading 动画 ### 3. 响应式设计 - **桌面优先**: 主要在桌面使用 - **移动适配**: 核心功能支持移动端 - **断点**: sm(640px)、md(768px)、lg(1024px)、xl(1280px) --- ## 🔌 API 集成 ### 1. Gateway API 端点 ```typescript // Agents GET /api/v1/agents # 获取 Agent 列表 GET /api/v1/agents/:id # 获取 Agent 详情 POST /api/v1/agents/:id/start # 启动 Agent POST /api/v1/agents/:id/pause # 暂停 Agent POST /api/v1/agents/:id/stop # 停止 Agent // Votes GET /api/v1/votes # 获取投票列表 GET /api/v1/votes/:id # 获取投票详情 POST /api/v1/votes # 创建投票 POST /api/v1/votes/:id/cast # 提交投票 DELETE /api/v1/votes/:id # 取消投票 // Intervention GET /api/v1/risks # 获取风险列表 GET /api/v1/interventions # 获取干预列表 POST /api/v1/interventions # 请求干预 POST /api/v1/emergency-pause # 紧急暂停 // Settings GET /api/v1/settings # 获取配置 PUT /api/v1/settings # 更新配置 ``` ### 2. WebSocket 事件 ```typescript // 连接 ws://localhost:3001 // 订阅事件 subscribe: { events: ['vote_started', 'vote_cast', 'vote_completed', 'risk_detected', 'intervention_requested'] } // 接收事件 { type: 'vote_started', data: { sessionId, title, ... } } ``` --- ## 🧪 测试策略 ### 1. 单元测试（Vitest） - 组件测试（React Testing Library） - Hooks 测试 - 工具函数测试 - 覆盖率目标: >80% ### 2. E2E 测试（Playwright） - 核心用户流程 - 投票完整流程 - 干预操作流程 - 实时更新验证 ### 3. 性能测试 - Lighthouse 评分 >90 - 首屏加载 <2s - 交互响应 <100ms --- ## 📦 依赖清单 ### 核心依赖 ```json { "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^6.28.0", "zustand": "^4.5.0", "@tanstack/react-query": "^5.0.0", "recharts": "^2.14.0", "ws": "^8.18.0", "clsx": "^2.1.1", "tailwind-merge": "^2.5.4" } ``` ### 开发依赖 ```json { "vite": "^6.0.0", "typescript": "^5.7.2", "tailwindcss": "^3.4.0", "@vitejs/plugin-react-swc": "^3.7.0", "vitest": "^2.1.8", "@testing-library/react": "^16.0.0", "playwright": "^1.48.0", "eslint": "^9.17.0", "prettier": "^3.4.2" } ``` --- ## 🎯 验收标准 ### 功能完整性 - [ ] 5 个核心页面全部实现 - [ ] WebSocket 实时更新正常 - [ ] 所有 API 集成完成 - [ ] 响应式设计完成 ### 性能指标 - [ ] Lighthouse Performance >90 - [ ] 首屏加载 <2s - [ ] WebSocket 延迟 <100ms - [ ] 打包大小 <500KB (gzip) ### 质量标准 - [ ] 单元测试覆盖率 >80% - [ ] E2E 测试通过 - [ ] TypeScript 无错误 - [ ] ESLint 无警告 - [ ] 无 console 警告 ### 用户体验 - [ ] 暗色主题美观 - [ ] 交互流畅自然 - [ ] 错误提示清晰 - [ ] 加载状态友好 - [ ] 移动端可用 --- ## 🚀 部署配置 ### 开发环境 ```bash pnpm dev # 启动开发服务器 pnpm test # 运行测试 pnpm lint # 代码检查 pnpm format # 代码格式化 ``` ### 生产构建 ```bash pnpm build # 构建生产版本 pnpm preview # 预览生产版本 ``` ### Docker 部署 ```dockerfile FROM node:20-alpine WORKDIR /app COPY package.json pnpm-lock.yaml ./ RUN pnpm install --frozen-lockfile COPY . . RUN pnpm build EXPOSE 3000 CMD ["pnpm", "preview", "--host", "0.0.0.0"] ``` --- ## 📝 风险和缓解 ### 风险 1: WebSocket 连接不稳定 **缓解**: 实现重连机制、心跳检测、离线队列 ### 风险 2: 实时数据量过大 **缓解**: 数据分页、虚拟滚动、按需加载 ### 风险 3: 组件库兼容性 **缓解**: 严格版本控制、组件测试、逐步迁移 ### 风险 4: 性能优化挑战 **缓解**: 代码分割、懒加载、Memo 优化、虚拟化 --- ## 🎉 预期成果 完成 Phase 5 后，将交付： 1. ✅ 功能完整的 Web UI 应用 2. ✅ 5 个核心页面（Dashboard、Agents、Votes、Intervention、Settings） 3. ✅ 实时 WebSocket 集成 4. ✅ 响应式设计 5. ✅ 完整的测试覆盖 6. ✅ 生产级构建配置 7. ✅ 部署文档 **目标**: 提供专业、高效、美观的 AI Agent 协作管理平台 🚀 --- **计划制定者**: Claude Code **计划日期**: 2025-10-05 **预计完成**: 2025-10-12
supenbysz
2025年10月5日 20:34
转发文档
收藏文档
上一篇
下一篇
手机扫码
复制链接
手机扫一扫转发分享
复制链接
Markdown文件
PDF文档（打印）
分享
链接
类型
密码
更新密码