multiAgentTry/docs/frontend-steps.md

前端开发步骤

后端已完成并验证通过，现在重新设计前端为多页面应用。

---

后端 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 上传和编辑
• 执行状态展示

---

路由结构

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 端点对接

// 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

---

下一步

开始实施前端开发步骤，从路由和布局开始。