dc398d7c7b
- 新增 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>
188 lines
4.5 KiB
Markdown
188 lines
4.5 KiB
Markdown
# 前端开发步骤
|
||
|
||
后端已完成并验证通过，现在重新设计前端为多页面应用。
|
||
|
||
---
|
||
|
||
## 后端 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
|
||
```
|
||
|
||
---
|
||
|
||
## 下一步
|
||
|
||
开始实施前端开发步骤，从路由和布局开始。
|