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
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 下一步
|
|||
|
|
|
|||
|
|
开始实施前端开发步骤，从路由和布局开始。
|