# 前端开发步骤

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

---

## 后端 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
```

---

## 下一步

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