marketing-shibata50/multica
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

docs(desktop): clean up README

Browse source 
Remove completed implementation details, keep only TODO items.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jiang Bohan 2026-02-04 03:12:26 +08:00
parent bdc2006e0e
commit 82f0ccbe85
1 changed files with 13 additions and 242 deletions
Download patch file Download diff file Expand all files Collapse all files

255
apps/desktop/README.md
View file

@ -466,255 +466,26 @@ pnpm --filter @multica/desktop add -D @types/qrcode.react
---
## 八、实现步骤计划
## 八、待办事项
### Phase 1: 统一布局与路由重构
### 功能开发
**目标**: 统一页面结构，移除 /admin 子路由
#### 设备授权与白名单
#### Step 1.1: 路由重构
- [ ] Client 连接授权弹窗
- [ ] 已授权设备白名单管理
- [ ] 显示当前连接的 Client 数量
- [x] 重构 `App.tsx` 路由
- 移除 `/admin` 子路由
- 统一页面结构: / (Home) / /chat / /tools / /skills
- [x] 创建 `pages/layout.tsx` - 全局布局
- Header: Logo + 标题 + Settings 按钮
- Tabs: Home / Chat / Tools / Skills
- Content Area: 子路由出口
- [x] 移动页面文件到根级别
#### Settings 页面
#### Step 1.2: Home 页面 (三入口)
- [ ] Gateway URL 配置
- [ ] Theme 切换 (Light / Dark / System)
- [ ] 打开 credentials.json5 按钮
- [x] 重构 `pages/home.tsx`
- 左侧二维码 + 右侧 Agent 状态面板
- 底部: Open Chat 按钮 + Connect to Remote (Coming soon)
- [x] 安装 `qrcode.react` 依赖
- [x] 创建 `components/qr-code.tsx` - 分享二维码组件
- 生成二维码数据 (hubId, agentId, token, gateway, expires)
- 倒计时显示 + 自动过期刷新
- Refresh 按钮 + Copy Link 按钮
- 装饰性角落边框
### 联调测试
#### Step 1.3: Chat 页面 (双模式)
- [ ] 重构 `pages/chat.tsx`
- 顶部模式切换: Local Agent / Remote Agent
- 支持本地 Agent 直接调用
- 支持远程 Agent WebSocket 连接
- [ ] 创建 `hooks/use-local-agent.ts` - 本地 Agent 调用
- [ ] 创建 `hooks/use-remote-agent.ts` - 远程 Agent 连接
**交付物**: 统一的页面结构，Home 页面三入口可用
---
### Phase 2: IPC 集成与 Hub 启动 ✅ (完成)
**目标**: 在 Main Process 中启动 Hub，通过 IPC 与 Renderer 通信
#### Step 2.1: IPC 基础设施
- [x] 创建 `electron/ipc/` 目录结构
- [x] 创建 `electron/ipc/index.ts` - 统一注册 handlers
- [x] 创建 `electron/ipc/agent.ts` - Tools 相关 IPC handlers
- [x] 创建 `electron/ipc/skills.ts` - Skills 相关 IPC handlers
- [x] 更新 `electron/main.ts` - 注册 IPC handlers
#### Step 2.2: Hub 集成
- [x] 创建 `electron/ipc/hub.ts` - Hub 管理
- [x] 实现 Hub 自动启动 (App ready 时)
- [x] 实现 Agent 自动创建
- [x] 实现 Hub 状态查询 (`hub:getStatus`)
#### Step 2.3: Preload 脚本
- [x] 更新 `electron/preload.ts`
- 暴露 `window.electronAPI.hub.*`
- 暴露 `window.electronAPI.tools.*`
- 暴露 `window.electronAPI.skills.*`
#### Step 2.4: Hooks 更新
- [x] 更新 `hooks/use-tools.ts` - 调用 IPC
- [x] 更新 `hooks/use-skills.ts` - 调用 IPC
- [x] 创建 `hooks/use-hub.ts` - Hub 状态
**交付物**: Hub 在主进程运行，UI 可通过 IPC 获取真实数据
---
### Phase 3: Tools 管理页面
**目标**: 查看和管理 Agent Tools
#### Step 3.1: Tools 数据获取
- [x] 创建 `hooks/use-tools.ts`
- 获取所有 tools 列表
- 获取 tool groups 和 profiles
- 管理 allow/deny 状态
#### Step 3.2: Tools UI 组件
- [x] 创建 `components/tool-list.tsx`
- 表格展示: Name / Group / Status / Toggle
- 按 Group 分组折叠
- 开关切换 (Switch 组件)
- Profile 下拉选择器 (内置)
- Reset to Default 按钮 (内置)
#### Step 3.3: Tools 页面整合
- [x] 更新 `pages/tools.tsx`
- Profile 选择器
- Tool 列表
- (状态持久化待后续实现)
#### Step 3.4: Tools 实时同步
- [x] 实现 `tools:list` 从真实 Agent 获取活跃 tools
- [x] 实现 `tools:active` 获取当前活跃工具
- [x] 实现 `tools:reload` 调用 Agent.reloadTools()
- [x] 暴露 AsyncAgent.getActiveTools() 和 reloadTools() 方法
- [x] 实现 `tools:setStatus` 持久化到 profile config.json
- [ ] 验证 Tool 开关影响 Agent 行为
**交付物**: 可查看所有 Tools，切换 Profile，开关单个 Tool，实时影响 Agent
---
### Phase 4: Skills 管理页面
**目标**: 查看、添加、删除 Skills
#### Step 4.1: Skills 数据获取
- [x] 创建 `hooks/use-skills.ts`
- 加载所有 skills (mock data for now)
- 检查 eligibility
- 添加/删除/安装操作 (stub)
#### Step 4.2: Skills UI 组件
- [x] 创建 `components/skill-list.tsx`
- 表格展示: Name / Source / Status / Actions
- Status 徽章 (ready / missing / disabled)
- Action 按钮 (View / Install / Delete)
- Add Skill dialog (内置 skills.tsx)
- View Skill dialog (内置 skills.tsx)
#### Step 4.3: Skills 页面整合
- [x] 更新 `pages/skills.tsx`
- Skill 列表
- Add Skill 按钮 + dialog
- View Skill dialog
- Refresh 按钮
#### Step 4.4: Skills IPC 集成
- [x] 在 Agent 中添加 `getSkillsWithStatus()` 方法
- [x] 在 AsyncAgent 中暴露 `getSkillsWithStatus()` 方法
- [x] 实现 `skills:list` 从真实 Agent 获取 skills
- [x] 实现 `skills:get` 获取单个 skill 详情
- [x] 实现 `skills:toggle` 返回当前 eligibility 状态
- [x] 实现 `skills:reload` 重新加载 skills
- [x] 实现 `skills:add` 调用 `addSkill()`
- [x] 实现 `skills:remove` 调用 `removeSkill()`
**交付物**: 可查看所有 Skills，查看 Skill 详情，显示 eligibility 状态
---
### Phase 5: 设置与完善
**目标**: Settings 页面 + 体验优化
#### Step 5.1: Settings 页面
- [ ] 创建 `components/settings-dialog.tsx`
- Gateway URL 配置
- Theme 切换 (Light / Dark / System)
- 打开 credentials.json5 按钮
#### Step 5.2: 连接状态管理
- [ ] 创建 `components/connection-status.tsx`
- 显示 Gateway 连接状态
- 显示已连接的 Client 信息
- 显示 Agent 状态
#### Step 5.3: 体验优化
- [ ] Toast 通知 (操作成功/失败)
- [ ] Loading 状态优化 (各页面)
- [ ] 错误边界处理 (React Error Boundary)
- [ ] 二维码自动刷新 (5 分钟过期后自动刷新)
**交付物**: 完整的管理功能，良好的用户体验
---
### Phase 6: Chat 页面与 Agent 联调
**目标**: 实现 Chat 功能，支持本地和远程 Agent
#### Step 6.1: 本地 Chat 实现
- [ ] 重构 `pages/chat.tsx`
- 消息输入框 + 发送按钮
- 消息历史展示
- 流式响应显示
- [ ] 创建 `hooks/use-local-agent.ts`
- 通过 IPC 调用 Agent.run()
- 处理流式响应
- 管理消息历史
#### Step 6.2: 远程 Chat 实现
- [ ] 创建 `hooks/use-remote-agent.ts`
- 通过 Gateway WebSocket 连接
- 处理远程消息
- [ ] Chat 页面模式切换
- Local Mode / Remote Mode 切换
**交付物**: 可与本地 Agent 对话，可连接远程 Agent
---
### Phase 7: 联调与测试
**目标**: 完整流程联调
#### Step 7.1: 本地 Agent 联调
- [ ] Tools 开关实时影响 Agent
- [ ] Tools 开关实时影响 Agent 行为
- [ ] Skills 启用/禁用影响 Agent
- [ ] Chat 流式响应正常
#### Step 7.2: 远程连接联调
- [ ] 扫码连接远程 Agent
- [ ] Token 验证流程
- [ ] 消息流转测试
#### Step 7.3: 异常处理
- [ ] 断开重连
- [ ] Token 过期处理
- [ ] Gateway 断开处理
---
## 九、当前进度摘要
| Phase | 名称 | 状态 |
| ------- | -------------- | ----------------------- |
| Phase 1 | 布局与路由 | ✅ 完成 |
| Phase 2 | IPC 集成与 Hub | ✅ 完成 |
| Phase 3 | Tools 管理 | ✅ UI + IPC 集成完成 |
| Phase 4 | Skills 管理 | ✅ UI + IPC 集成完成 |
| Phase 5 | 设置与完善 | ⏳ 待开始 |
| Phase 6 | Chat 页面 | ⏳ 待开始 (同事负责 UI) |
| Phase 7 | 联调测试 | ⏳ 待开始 |
- [ ] 断开重连、Token 过期处理