完整实现 Swarm 多智能体协作系统
- 新增 CLIPluginAdapter 统一接口 (backend/app/core/agent_adapter.py) - 新增 LLM 服务层，支持 Anthropic/OpenAI/DeepSeek/Ollama (backend/app/services/llm_service.py) - 新增 Agent 执行引擎，支持文件锁自动管理 (backend/app/services/agent_executor.py) - 新增 NativeLLMAgent 原生 LLM 适配器 (backend/app/adapters/native_llm_agent.py) - 新增进程管理器 (backend/app/services/process_manager.py) - 新增 Agent 控制 API (backend/app/routers/agents_control.py) - 新增 WebSocket 实时通信 (backend/app/routers/websocket.py) - 更新前端 AgentsPage，支持启动/停止 Agent - 测试通过：Agent 启动、批量操作、栅栏同步 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Code
187
docs/frontend-steps.md
Normal file
187
docs/frontend-steps.md
Normal file
@@ -0,0 +1,187 @@
|
||||
# 前端开发步骤
|
||||
|
||||
后端已完成并验证通过，现在重新设计前端为多页面应用。
|
||||
|
||||
---
|
||||
|
||||
## 后端 CLI 验证结果
|
||||
|
||||
| 服务 | 状态 | 测试命令 |
|
||||
|------|------|----------|
|
||||
| 项目初始化 | ✅ | `python cli.py hello`, `python cli.py version` |
|
||||
| 存储服务 | ✅ | `python cli.py storage write/read/delete` |
|
||||
| 文件锁 | ✅ | `python cli.py lock acquire/status/release/check` |
|
||||
| 心跳服务 | ✅ | `python cli.py heartbeat ping/list` |
|
||||
| Agent 注册 | ✅ | `python cli.py agent register/list/info/state` |
|
||||
| 会议调度 | ✅ | `python cli.py meeting create/wait/queue` |
|
||||
| 会议记录 | ✅ | `python cli.py meeting record-create/discuss/progress` |
|
||||
| 资源管理 | ✅ | `python cli.py execute`, `python cli.py status` |
|
||||
| 工作流引擎 | ✅ | `python cli.py workflow show` |
|
||||
| 角色分配 | ✅ | `python cli.py role allocate/primary` |
|
||||
|
||||
---
|
||||
|
||||
## 前端架构重新设计
|
||||
|
||||
### 当前问题
|
||||
- 单页面应用，所有组件挤在一起
|
||||
- 没有导航结构
|
||||
- 难以扩展
|
||||
|
||||
### 新架构设计
|
||||
|
||||
```
|
||||
frontend/
|
||||
├── src/
|
||||
│ ├── pages/ # 页面组件
|
||||
│ │ ├── DashboardPage.tsx # 仪表盘首页
|
||||
│ │ ├── AgentsPage.tsx # Agent 管理页
|
||||
│ │ ├── MeetingsPage.tsx # 会议管理页
|
||||
│ │ ├── ResourcesPage.tsx # 资源监控页
|
||||
│ │ ├── SettingsPage.tsx # 配置页面
|
||||
│ │ └── WorkflowPage.tsx # 工作流页面
|
||||
│ ├── components/ # 共享组件
|
||||
│ │ ├── layout/
|
||||
│ │ │ ├── AppLayout.tsx # 主布局（导航栏）
|
||||
│ │ │ └── Sidebar.tsx # 侧边栏
|
||||
│ │ ├── ui/ # UI 组件
|
||||
│ │ └── dashboard/ # 仪表盘组件
|
||||
│ ├── lib/ # API 客户端
|
||||
│ │ └── api.ts # 统一 API 调用
|
||||
│ └── App.tsx # 路由入口
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 页面设计规范
|
||||
|
||||
### 1. 仪表盘 (DashboardPage)
|
||||
- 组件网格：Agent 状态卡片、会议进度、资源监控、最近会议
|
||||
- 实时更新（轮询或 WebSocket）
|
||||
- 快捷操作按钮
|
||||
|
||||
### 2. Agent 管理页 (AgentsPage)
|
||||
- Agent 列表（表格或卡片）
|
||||
- 注册新 Agent 表单
|
||||
- Agent 详情面板（可展开）
|
||||
- 状态指示器
|
||||
|
||||
### 3. 会议管理页 (MeetingsPage)
|
||||
- 会议列表（按日期分组）
|
||||
- 创建会议按钮
|
||||
- 会议详情（步骤进度、讨论记录）
|
||||
- 参会者状态
|
||||
|
||||
### 4. 资源监控页 (ResourcesPage)
|
||||
- 文件锁列表
|
||||
- CPU/内存使用情况
|
||||
- Agent 心跳状态
|
||||
- 实时刷新
|
||||
|
||||
### 5. 配置页 (SettingsPage)
|
||||
- 后端 API 地址配置
|
||||
- Agent 配置
|
||||
- 工作流上传
|
||||
- 系统设置
|
||||
|
||||
### 6. 工作流页 (WorkflowPage)
|
||||
- 工作流列表
|
||||
- YAML 编辑器
|
||||
- 工作流执行状态
|
||||
- 进度追踪
|
||||
|
||||
---
|
||||
|
||||
## 开发步骤
|
||||
|
||||
### 第一步：路由和布局
|
||||
- 安装 React Router
|
||||
- 创建 AppLayout 和 Sidebar
|
||||
- 配置路由
|
||||
|
||||
### 第二步：仪表盘页面
|
||||
- 从现有组件迁移到 DashboardPage
|
||||
- 添加导航链接
|
||||
|
||||
### 第三步：API 客户端
|
||||
- 创建 `lib/api.ts`
|
||||
- 实现所有 API 调用函数
|
||||
- 替换 mock 数据
|
||||
|
||||
### 第四步：Agent 管理页
|
||||
- 创建 AgentsPage
|
||||
- 注册表单
|
||||
- Agent 列表和详情
|
||||
|
||||
### 第五步：会议管理页
|
||||
- 创建 MeetingsPage
|
||||
- 会议列表和详情
|
||||
- 创建会议模态框
|
||||
|
||||
### 第六步：资源监控页
|
||||
- 创建 ResourcesPage
|
||||
- 实时数据刷新
|
||||
- 图表展示
|
||||
|
||||
### 第七步：配置页面
|
||||
- 创建 SettingsPage
|
||||
- 表单输入
|
||||
- 配置保存
|
||||
|
||||
### 第八步：工作流页面
|
||||
- 创建 WorkflowPage
|
||||
- YAML 上传和编辑
|
||||
- 执行状态展示
|
||||
|
||||
---
|
||||
|
||||
## 路由结构
|
||||
|
||||
```typescript
|
||||
const routes = [
|
||||
{ path: '/', element: <DashboardPage /> },
|
||||
{ path: '/agents', element: <AgentsPage /> },
|
||||
{ path: '/meetings', element: <MeetingsPage /> },
|
||||
{ path: '/resources', element: <ResourcesPage /> },
|
||||
{ path: '/settings', element: <SettingsPage /> },
|
||||
{ path: '/workflow', element: <WorkflowPage /> },
|
||||
]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## API 端点对接
|
||||
|
||||
```typescript
|
||||
// API 基础配置
|
||||
const API_BASE = 'http://localhost:8000/api';
|
||||
|
||||
// Agents
|
||||
GET /api/agents
|
||||
POST /api/agents/register
|
||||
GET /api/agents/:id
|
||||
GET /api/agents/:id/state
|
||||
POST /api/agents/:id/state
|
||||
|
||||
// Locks
|
||||
GET /api/locks
|
||||
POST /api/locks/acquire
|
||||
POST /api/locks/release
|
||||
|
||||
# Heartbeats
|
||||
GET /api/heartbeats
|
||||
POST /api/heartbeats/:id
|
||||
|
||||
# Meetings
|
||||
GET /api/meetings/:date
|
||||
GET /api/meetings/:id
|
||||
POST /api/meetings/create
|
||||
POST /api/meetings/:id/discuss
|
||||
POST /api/meetings/:id/progress
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 下一步
|
||||
|
||||
开始实施前端开发步骤，从路由和布局开始。
|
||||
Reference in New Issue
Block a user