feat(hands): restructure Hands UI with Chinese localization
Major changes: - Add HandList.tsx component for left sidebar - Add HandTaskPanel.tsx for middle content area - Restructure Sidebar tabs: 分身/HANDS/Workflow - Remove Hands tab from RightPanel - Localize all UI text to Chinese - Archive legacy OpenClaw documentation - Add Hands integration lessons document - Update feature checklist with new components UI improvements: - Left sidebar now shows Hands list with status icons - Middle area shows selected Hand's tasks and results - Consistent styling with Tailwind CSS - Chinese status labels and buttons Documentation: - Create docs/archive/openclaw-legacy/ for old docs - Add docs/knowledge-base/hands-integration-lessons.md - Update docs/knowledge-base/feature-checklist.md - Update docs/knowledge-base/README.md Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
iven
@@ -1,263 +0,0 @@
|
||||
# ZCLAW v2 开发 - 新会话提示词
|
||||
|
||||
## 项目状态概览
|
||||
|
||||
ZCLAW v2 是基于 OpenClaw 的定制化 AI Agent 平台（类似 AutoClaw/QClaw），使用 Tauri 2.0 桌面 + OpenClaw Gateway 架构。
|
||||
|
||||
**当前进度**: Phase 1-3.5 已完成 ✅
|
||||
**下一步**: Phase 4 - OpenClaw 真实集成测试（QQ官方插件 + 飞书）
|
||||
|
||||
---
|
||||
|
||||
## Phase 1-3 已完成工作
|
||||
|
||||
### ✅ Phase 1: 后端 Gateway 层 + 插件 + Skills
|
||||
- **src/gateway/** — GatewayManager (子进程管理), GatewayWsClient (WebSocket Protocol v3)
|
||||
- **plugins/zclaw-chinese-models/** — 智谱GLM/通义千问/Kimi/MiniMax Provider 插件
|
||||
- **plugins/zclaw-feishu/** — 飞书 Channel 插件 (OAuth token 管理 + 消息发送)
|
||||
- **plugins/zclaw-ui/** — UI 扩展 RPC (分身CRUD/统计/配置/工作区)
|
||||
- **skills/** — chinese-writing + feishu-docs (SKILL.md 格式)
|
||||
- **config/** — openclaw.default.json + SOUL/AGENTS/IDENTITY/USER.md
|
||||
- **scripts/setup.ts** — 首次设置脚本 (检测OpenClaw → 复制配置 → 注册插件)
|
||||
|
||||
### ✅ Phase 2: 前端 Settings 页面体系
|
||||
- **desktop/src/components/Settings/** — 10个设置页面对标 AutoClaw
|
||||
- SettingsLayout (左侧导航 + 右侧内容)
|
||||
- General, UsageStats, ModelsAPI, MCPServices, Skills, IMChannels, Workspace, Privacy, About
|
||||
- **App.tsx** — main/settings 视图切换
|
||||
- **构建修复** — Tailwind v4, BOM 清除, TypeScript 0 errors
|
||||
|
||||
### ✅ Phase 3: 聊天对接 + 分身管理
|
||||
- **desktop/src/store/chatStore.ts** — Gateway WS 集成 (sendMessage → agent RPC, initStreamListener → delta/tool/lifecycle)
|
||||
- **desktop/src/components/ChatArea.tsx** — 流式输出 + 工具调用展示 + 模型选择器 + 连接状态
|
||||
- **desktop/src/components/CloneManager.tsx** — 分身 CRUD (创建表单 + 列表 + 删除)
|
||||
- **desktop/src/components/Sidebar.tsx** — 3标签 (分身/IM频道/定时任务) + CloneManager 集成
|
||||
|
||||
### ✅ Phase 3.5: 前端质量提升
|
||||
- **App.tsx** — Gateway 自动连接 (启动时 silent connect)
|
||||
- **RightPanel.tsx** — 重写为实时数据面板 (连接状态/会话统计/分身/用量/插件/系统信息)
|
||||
- **ChatArea.tsx** — 多行 textarea 输入 + Markdown 渲染 (代码块/粗体/斜体/链接) + 新对话按钮
|
||||
- **chatStore.ts** — 对话会话管理 + Zustand persist (localStorage 持久化对话历史 + currentModel)
|
||||
- **ConversationList.tsx** (新) — 对话历史列表 + 标题自动提取 + 相对时间
|
||||
- **Sidebar.tsx** — 四标签 (对话/分身/频道/任务), 全部使用真实组件
|
||||
- **ChannelList.tsx** (新) — IM 频道列表 (飞书/QQ 状态探测 + 配置入口)
|
||||
- **TaskList.tsx** (新) — Heartbeat 定时任务列表 (状态图标/cron 表达式/执行时间)
|
||||
- **gatewayStore.ts** — 新增 channels/scheduledTasks 状态 + loadChannels/loadScheduledTasks
|
||||
- **gateway-client.ts** — 新增 listChannels() + getFeishuStatus() + listScheduledTasks()
|
||||
- **Settings/General.tsx** — 接入真实 Gateway 连接数据 + 连接/断开按钮
|
||||
- **Settings/ModelsAPI.tsx** — 接入 chatStore 模型切换 + Gateway 连接状态
|
||||
|
||||
**编译状态**: TypeScript 0 errors, Vite build ✅ (1766 modules, 268KB JS + 26KB CSS)
|
||||
|
||||
---
|
||||
|
||||
## Phase 4: OpenClaw 集成测试 (下一步工作)
|
||||
|
||||
### 重要提示：避免封号
|
||||
**前期只对接 QQ (官方插件) 和 飞书**，微信暂缓。
|
||||
|
||||
### 任务清单
|
||||
|
||||
#### 1. 安装 OpenClaw
|
||||
```bash
|
||||
# Windows
|
||||
iwr -useb https://openclaw.ai/install.ps1 | iex
|
||||
|
||||
# 验证安装
|
||||
openclaw --version
|
||||
openclaw doctor
|
||||
```
|
||||
|
||||
#### 2. 配置 QQ 机器人 (使用官方插件)
|
||||
```bash
|
||||
# 安装 OpenClaw 开源社区 QQBot 插件
|
||||
openclaw plugins install @tencent-connect/openclaw-qqbot@latest
|
||||
|
||||
# 配置绑定 QQ 机器人
|
||||
openclaw channels add --channel qqbot --token "1903376513:Z5UkttjPxLZbVFxW"
|
||||
|
||||
# 重启 Gateway
|
||||
openclaw gateway restart
|
||||
```
|
||||
|
||||
#### 3. 配置飞书 Channel
|
||||
```bash
|
||||
# 运行 ZCLAW 设置脚本
|
||||
cd g:\ZClaw
|
||||
pnpm setup
|
||||
|
||||
# 手动配置飞书插件 (如果 setup 脚本未自动注册)
|
||||
openclaw plugins register ./plugins/zclaw-feishu
|
||||
|
||||
# 编辑 ~/.openclaw/openclaw.json 添加飞书配置
|
||||
# channels.feishu.appId, appSecret, verificationToken, encryptKey
|
||||
```
|
||||
|
||||
#### 4. 注册 ZCLAW 自定义插件
|
||||
```bash
|
||||
cd g:\ZClaw
|
||||
|
||||
# 注册中文模型 Provider
|
||||
openclaw plugins register ./plugins/zclaw-chinese-models
|
||||
|
||||
# 注册 UI 扩展 RPC
|
||||
openclaw plugins register ./plugins/zclaw-ui
|
||||
|
||||
# 重启 Gateway
|
||||
openclaw gateway restart
|
||||
```
|
||||
|
||||
#### 5. 测试 Gateway 连接
|
||||
```bash
|
||||
# 启动 Gateway (如果未运行)
|
||||
openclaw gateway
|
||||
|
||||
# 在另一个终端启动 ZCLAW 前端
|
||||
cd g:\ZClaw\desktop
|
||||
pnpm dev
|
||||
|
||||
# 访问 http://localhost:1420
|
||||
# 点击右下角齿轮 → 设置 → 通用 → 查看 Gateway 连接状态
|
||||
```
|
||||
|
||||
#### 6. 测试中文模型调用
|
||||
- 在聊天区域发送消息
|
||||
- 点击模型选择器切换到 glm-5 / qwen3.5-plus / kimi-k2.5 / minimax-m2.5
|
||||
- 观察流式输出效果
|
||||
- 检查工具调用是否正常显示
|
||||
|
||||
#### 7. 测试飞书消息收发
|
||||
- 在飞书中 @机器人 发送消息
|
||||
- 观察 Gateway 日志和前端消息列表
|
||||
- 测试从前端发送消息到飞书
|
||||
|
||||
#### 8. 测试 QQ 消息收发
|
||||
- 在 QQ 中 @机器人 发送消息
|
||||
- 观察 Gateway 日志
|
||||
- 测试双向消息流
|
||||
|
||||
---
|
||||
|
||||
## 关键文件路径
|
||||
|
||||
### 配置文件
|
||||
- `g:\ZClaw\config\openclaw.default.json` — OpenClaw 默认配置模板
|
||||
- `~\.openclaw\openclaw.json` — OpenClaw 用户配置 (运行时生成)
|
||||
- `g:\ZClaw\config\SOUL.md` — ZCLAW 人格定义
|
||||
|
||||
### 插件目录
|
||||
- `g:\ZClaw\plugins\zclaw-chinese-models\` — 中文模型 Provider
|
||||
- `g:\ZClaw\plugins\zclaw-feishu\` — 飞书 Channel
|
||||
- `g:\ZClaw\plugins\zclaw-ui\` — UI 扩展 RPC
|
||||
|
||||
### 前端代码
|
||||
- `g:\ZClaw\desktop\src\store\gatewayStore.ts` — Gateway 状态管理
|
||||
- `g:\ZClaw\desktop\src\store\chatStore.ts` — 聊天状态管理
|
||||
- `g:\ZClaw\desktop\src\lib\gateway-client.ts` — Gateway WebSocket 客户端
|
||||
|
||||
### 后端代码
|
||||
- `g:\ZClaw\src\gateway\manager.ts` — Gateway 子进程管理
|
||||
- `g:\ZClaw\src\gateway\ws-client.ts` — Node.js WebSocket 客户端
|
||||
|
||||
---
|
||||
|
||||
## 常见问题排查
|
||||
|
||||
### Gateway 连接失败
|
||||
1. 检查 Gateway 是否运行: `openclaw status`
|
||||
2. 检查端口占用: `netstat -ano | findstr 18789`
|
||||
3. 查看 Gateway 日志: `openclaw gateway` (前台运行查看输出)
|
||||
4. 检查防火墙设置
|
||||
|
||||
### 插件未加载
|
||||
1. 验证插件注册: `openclaw plugins list`
|
||||
2. 检查插件 manifest: `g:\ZClaw\plugins\*/plugin.json`
|
||||
3. 查看 Gateway 启动日志中的插件加载信息
|
||||
4. 确认 `~\.openclaw\openclaw.json` 中 `plugins.load.paths` 包含插件路径
|
||||
|
||||
### 飞书消息收发失败
|
||||
1. 检查 `openclaw.json` 中飞书配置 (appId, appSecret, verificationToken)
|
||||
2. 验证 OAuth token 是否有效: 查看 Gateway 日志中的 token 刷新记录
|
||||
3. 检查飞书机器人权限配置
|
||||
4. 确认回调 URL 配置正确
|
||||
|
||||
### QQ 消息收发失败
|
||||
1. 验证 QQBot 插件安装: `openclaw plugins list | findstr qqbot`
|
||||
2. 检查 token 格式: `"botAppId:token"`
|
||||
3. 查看 Gateway 日志中的 QQ 连接状态
|
||||
4. 确认 QQ 机器人已启用并在线
|
||||
|
||||
---
|
||||
|
||||
## 开发命令速查
|
||||
|
||||
```bash
|
||||
# 后端 (Gateway 层)
|
||||
cd g:\ZClaw
|
||||
pnpm install
|
||||
pnpm setup # 运行设置脚本
|
||||
pnpm build # 编译 TypeScript
|
||||
npx tsc --noEmit # 类型检查
|
||||
|
||||
# 前端 (Tauri Desktop)
|
||||
cd g:\ZClaw\desktop
|
||||
pnpm install
|
||||
pnpm dev # 启动 Vite dev server (http://localhost:1420)
|
||||
pnpm build # 构建生产版本
|
||||
npx tsc --noEmit # 类型检查
|
||||
|
||||
# OpenClaw 命令
|
||||
openclaw gateway # 启动 Gateway (前台)
|
||||
openclaw gateway restart # 重启 Gateway
|
||||
openclaw status # 查看状态
|
||||
openclaw doctor # 诊断工具
|
||||
openclaw plugins list # 列出已安装插件
|
||||
openclaw plugins install <pkg> # 安装插件
|
||||
openclaw plugins register <path> # 注册本地插件
|
||||
openclaw channels add --channel <type> --token <token> # 添加 IM 频道
|
||||
openclaw configure # 交互式配置
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 参考文档
|
||||
|
||||
- **架构设计**: `g:\ZClaw\docs\architecture-v2.md`
|
||||
- **偏离分析**: `g:\ZClaw\docs\deviation-analysis.md`
|
||||
- **进度报告**: `g:\ZClaw\PROGRESS.md`
|
||||
- **AutoClaw 界面参考**: `g:\ZClaw\docs\autoclaw界面\` (13张截图)
|
||||
|
||||
---
|
||||
|
||||
## 预期成果
|
||||
|
||||
完成 Phase 4 后，应达到以下状态：
|
||||
|
||||
1. ✅ OpenClaw Gateway 正常运行并连接到前端
|
||||
2. ✅ QQ 机器人可以收发消息 (使用官方 @tencent-connect/openclaw-qqbot 插件)
|
||||
3. ✅ 飞书机器人可以收发消息 (使用自定义 zclaw-feishu 插件)
|
||||
4. ✅ 中文模型 (GLM/Qwen/Kimi/MiniMax) 可以正常调用
|
||||
5. ✅ 前端聊天区域显示流式输出 + 工具调用
|
||||
6. ✅ 分身管理功能正常 (创建/列表/删除)
|
||||
7. ✅ Settings 页面所有配置项可用
|
||||
|
||||
---
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **避免封号**: 前期只对接 QQ (官方插件) 和飞书，微信暂缓
|
||||
2. **QQ 使用官方插件**: `@tencent-connect/openclaw-qqbot@latest`，不要自己实现
|
||||
3. **飞书使用自定义插件**: `plugins/zclaw-feishu/` 已实现 OAuth + 消息发送
|
||||
4. **API Key 安全**: 不要在代码中硬编码 API Key，使用 `openclaw configure` 或环境变量
|
||||
5. **Gateway 日志**: 前台运行 `openclaw gateway` 可以实时查看日志，便于调试
|
||||
6. **插件热重载**: 修改插件代码后需要 `openclaw gateway restart`
|
||||
|
||||
---
|
||||
|
||||
## 后续 Phase 5 规划
|
||||
|
||||
- [ ] Tauri Rust sidecar (在 Tauri 中管理 Gateway 子进程)
|
||||
- [ ] 更多 Skills 开发 (代码生成、文档写作、数据分析等)
|
||||
- [ ] 微信 Channel Plugin (待 OpenClaw 官方支持或社区插件成熟后)
|
||||
- [ ] 打包发布 (Windows/macOS/Linux)
|
||||
- [ ] 性能优化 + 错误处理增强
|
||||
28
docs/archive/openclaw-legacy/README.md
Normal file
28
docs/archive/openclaw-legacy/README.md
Normal file
@@ -0,0 +1,28 @@
|
||||
# OpenClaw Legacy 文档归档
|
||||
|
||||
**归档日期**: 2026-03-14
|
||||
**归档原因**: ZClaw 项目已从 OpenClaw 迁移到 OpenFang
|
||||
|
||||
---
|
||||
|
||||
## 归档文件说明
|
||||
|
||||
| 文件 | 原用途 | 归档原因 |
|
||||
|------|--------|----------|
|
||||
| `zclaw-openclaw-roadmap.md` | OpenClaw 功能落地路线图 | 项目已切换到 OpenFang |
|
||||
| `openclaw-knowledge-base.md` | OpenClaw 技术知识库 | OpenFang 架构不同 |
|
||||
| `deviation-analysis.md` | 偏离分析报告 | 针对 OpenClaw 的分析 |
|
||||
| `openclaw-deep-dive.md` | OpenClaw 深度分析 | OpenFang 架构不同 |
|
||||
| `autoclaw界面/` | AutoClaw 界面截图 | 参考用途已完成 |
|
||||
|
||||
## 当前活跃文档
|
||||
|
||||
项目现在使用以下活跃文档：
|
||||
|
||||
- `docs/openfang-technical-reference.md` - OpenFang 技术参考
|
||||
- `docs/knowledge-base/` - 活跃知识库
|
||||
- `CLAUDE.md` - 项目协作规则
|
||||
|
||||
## 历史参考
|
||||
|
||||
这些文档保留作为历史参考，展示项目从 OpenClaw 到 OpenFang 的演进过程。
|
||||
|
Before Width: | Height: | Size: 528 KiB After Width: | Height: | Size: 528 KiB |
|
Before Width: | Height: | Size: 529 KiB After Width: | Height: | Size: 529 KiB |
|
Before Width: | Height: | Size: 587 KiB After Width: | Height: | Size: 587 KiB |
|
Before Width: | Height: | Size: 312 KiB After Width: | Height: | Size: 312 KiB |
|
Before Width: | Height: | Size: 332 KiB After Width: | Height: | Size: 332 KiB |
|
Before Width: | Height: | Size: 624 KiB After Width: | Height: | Size: 624 KiB |
|
Before Width: | Height: | Size: 382 KiB After Width: | Height: | Size: 382 KiB |
|
Before Width: | Height: | Size: 391 KiB After Width: | Height: | Size: 391 KiB |
|
Before Width: | Height: | Size: 441 KiB After Width: | Height: | Size: 441 KiB |
|
Before Width: | Height: | Size: 391 KiB After Width: | Height: | Size: 391 KiB |
|
Before Width: | Height: | Size: 373 KiB After Width: | Height: | Size: 373 KiB |
|
Before Width: | Height: | Size: 399 KiB After Width: | Height: | Size: 399 KiB |
|
Before Width: | Height: | Size: 303 KiB After Width: | Height: | Size: 303 KiB |
1
docs/archive/openclaw-legacy/autoclaw界面/html版/1.html
Normal file
1
docs/archive/openclaw-legacy/autoclaw界面/html版/1.html
Normal file
File diff suppressed because one or more lines are too long
@@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ZCLAW</title> <script src="https://cdn.tailwindcss.com">
|
||||
</script> <script src="https://unpkg.com/lucide@latest">
|
||||
</script> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap'); body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: #f9fafb; } .sidebar-item:hover { background-color: rgba(0,0,0,0.03); } .chat-bubble-assistant { background: white; border: 1px solid #e5e7eb; border-radius: 12px; border-bottom-left-radius: 4px; } .chat-bubble-user { background: #f97316; color: white; border-radius: 12px; border-bottom-right-radius: 4px; } .option-card { background: white; border-radius: 8px; padding: 12px 16px; margin-bottom: 8px; border: 1px solid transparent; } .toast { background: rgba(0,0,0,0.75); backdrop-filter: blur(10px); } .agent-avatar { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); } .thinking-dot { animation: pulse 1.5s infinite; } @keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } .custom-scrollbar::-webkit-scrollbar { width: 6px; } .custom-scrollbar::-webkit-scrollbar-track { background: transparent; } .custom-scrollbar::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; } .file-preview { background: #fafafa; border-left: 3px solid #f97316; } </style> </head> <body class="h-screen flex overflow-hidden text-gray-800 text-sm"> <!-- 左侧边栏 --> <aside class="w-64 bg-gray-50 border-r border-gray-200 flex flex-col flex-shrink-0"> <!-- 顶部标签 --> <div class="flex border-b border-gray-200 bg-white"> <button class="flex-1 py-3 px-4 text-xs font-medium text-gray-900 border-b-2 border-gray-900">分身</button> <button class="flex-1 py-3 px-4 text-xs font-medium text-gray-500 hover:text-gray-700">IM 频道</button> <button class="flex-1 py-3 px-4 text-xs font-medium text-gray-500 hover:text-gray-700">定时任务</button> </div> <!-- Agent 列表 --> <div class="flex-1 overflow-y-auto custom-scrollbar py-2"> <!-- ZCLAW --> <div class="sidebar-item mx-2 px-3 py-3 rounded-lg cursor-pointer bg-white shadow-sm border border-gray-100 mb-1"> <div class="flex items-start gap-3"> <div class="w-10 h-10 agent-avatar rounded-xl flex items-center justify-center text-white flex-shrink-0"> <i data-lucide="cat" class="w-6 h-6">
|
||||
</i> </div> <div class="flex-1 min-w-0"> <div class="flex justify-between items-center mb-0.5"> <span class="font-semibold text-gray-900 truncate">ZCLAW</span> <span class="text-xs text-gray-400">15:45</span> </div> <p class="text-xs text-gray-500 truncate leading-relaxed">好的! **选项 A 确认** + **加入 Tauri...</p> </div> </div> </div> <!-- 沉思小助手 --> <div class="sidebar-item mx-2 px-3 py-3 rounded-lg cursor-pointer mb-1"> <div class="flex items-start gap-3"> <div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center text-blue-600 flex-shrink-0"> <i data-lucide="search" class="w-5 h-5">
|
||||
</i> </div> <div class="flex-1 min-w-0"> <div class="flex justify-between items-center mb-0.5"> <span class="font-medium text-gray-900 truncate">沉思小助手</span> <span class="text-xs text-gray-400">15:05</span> </div> <div class="flex items-center gap-1"> <i data-lucide="check-square" class="w-3.5 h-3.5 text-green-500">
|
||||
</i> <p class="text-xs text-gray-500 truncate">已将今天的工作进展持久化到 'm...</p> </div> </div> </div> </div> <!-- Browser Agent --> <div class="sidebar-item mx-2 px-3 py-3 rounded-lg cursor-pointer mb-1"> <div class="flex items-start gap-3"> <div class="w-10 h-10 bg-blue-500 rounded-xl flex items-center justify-center text-white flex-shrink-0"> <i data-lucide="globe" class="w-5 h-5">
|
||||
</i> </div> <div class="flex-1 min-w-0"> <div class="flex justify-between items-center mb-0.5"> <span class="font-medium text-gray-900 truncate">Browser Agent</span> <span class="text-xs text-gray-400">12:04</span> </div> <p class="text-xs text-gray-500 truncate">完成! 详细分析报告已保存到: **...</p> </div> </div> </div> <!-- 监控 --> <div class="sidebar-item mx-2 px-3 py-3 rounded-lg cursor-pointer mb-1"> <div class="flex items-start gap-3"> <div class="w-10 h-10 bg-orange-100 rounded-xl flex items-center justify-center text-orange-600 flex-shrink-0"> <i data-lucide="bar-chart-2" class="w-5 h-5">
|
||||
</i> </div> <div class="flex-1 min-w-0"> <div class="flex justify-between items-center mb-0.5"> <span class="font-medium text-gray-900 truncate">监控</span> <span class="text-xs text-gray-400">08:40</span> </div> <p class="text-xs text-orange-600 truncate">+ 新分身</p> </div> </div> </div> <!-- 如果我在新的电脑上面... --> <div class="sidebar-item mx-2 px-3 py-3 rounded-lg cursor-pointer mb-1"> <div class="flex items-start gap-3"> <div class="w-10 h-10 bg-purple-500 rounded-xl flex items-center justify-center text-white flex-shrink-0 text-xs font-bold"> 如果 </div> <div class="flex-1 min-w-0"> <div class="flex justify-between items-center mb-0.5"> <span class="font-medium text-gray-900 truncate">如果我在新的电脑上面...</span> <span class="text-xs text-gray-400">15:07</span> </div> <p class="text-xs text-gray-500 truncate">**可以迁移，但要拷对目录。** ## 关...</p> </div> </div> </div> </div> <!-- 底部用户 --> <div class="p-3 border-t border-gray-200 bg-gray-50"> <div class="flex items-center gap-3"> <div class="w-8 h-8 bg-gradient-to-br from-orange-400 to-red-500 rounded-full flex items-center justify-center text-white text-xs font-bold"> 用 </div> <span class="font-medium text-gray-700">用户7141</span> <button class="ml-auto text-gray-400 hover:text-gray-600"> <i data-lucide="settings" class="w-4 h-4">
|
||||
</i> </button> </div> </div> </aside> <!-- 中间聊天区域 --> <main class="flex-1 flex flex-col bg-white relative"> <!-- 顶部标题栏 --> <div class="h-14 border-b border-gray-100 flex items-center justify-between px-6 flex-shrink-0"> <div class="flex items-center gap-2"> <h2 class="font-semibold text-gray-900">ZCLAW</h2> <span class="text-xs text-gray-400 flex items-center gap-1"> <span class="w-1.5 h-1.5 bg-gray-400 rounded-full thinking-dot">
|
||||
</span> 正在输入中 </span> </div> </div> <!-- 聊天内容区 --> <div class="flex-1 overflow-y-auto custom-scrollbar p-6 space-y-6"> <!-- AI消息 --> <div class="flex gap-4"> <div class="w-8 h-8 agent-avatar rounded-lg flex items-center justify-center text-white flex-shrink-0"> <i data-lucide="cat" class="w-5 h-5">
|
||||
</i> </div> <div class="flex-1 max-w-3xl"> <div class="chat-bubble-assistant p-4 shadow-sm"> <div class="space-y-3 text-gray-700 leading-relaxed"> <div class="flex items-start gap-2"> <span class="text-gray-400 mt-1">•</span> <span>1-2 周上线，快速验证</span> </div> <div class="flex items-start gap-2"> <span class="text-gray-400 mt-1">•</span> <span>后续逐步增加核心系统</span> </div> <div class="flex items-start gap-2"> <span class="text-gray-400 mt-1">•</span> <span>优点：快速反馈，降低风险</span> </div> <div class="flex items-start gap-2"> <span class="text-gray-400 mt-1">•</span> <span>缺点：早期功能有限</span> </div> </div> </div> <!-- 选项B --> <div class="mt-4"> <h3 class="font-semibold text-gray-900 mb-2">选项 B: 完整开发</h3> <div class="bg-gray-50 rounded-lg p-4 space-y-2 text-gray-600"> <div class="flex items-start gap-2"> <span class="text-gray-400">•</span> <span>13 周完成所有 7 个核心系统</span> </div> <div class="flex items-start gap-2"> <span class="text-gray-400">•</span> <span>一次性上线完整产品</span> </div> <div class="flex items-start gap-2"> <span class="text-gray-400">•</span> <span>优点：功能完整，体验更好</span> </div> <div class="flex items-start gap-2"> <span class="text-gray-400">•</span> <span>缺点：周期长，风险高</span> </div> </div> </div> <!-- 选项C --> <div class="mt-4"> <h3 class="font-semibold text-gray-900 mb-2">选项 C: 混合模式</h3> <div class="bg-gray-50 rounded-lg p-4 space-y-2 text-gray-600"> <div class="flex items-start gap-2"> <span class="text-gray-400">•</span> <span>4 周完成核心系统（远程执行 + 任务编排 + 持续记忆）</span> </div> <div class="flex items-start gap-2"> <span class="text-gray-400">•</span> <span>先上线验证</span> </div> <div class="flex items-start gap-2"> <span class="text-gray-400">•</span> <span>后续迭代其他系统</span> </div> </div> </div> <!-- 建议 --> <div class="mt-4 text-gray-800"> <p class="font-medium mb-2">我的建议是选项 A，理由：</p> <div class="space-y-1 text-gray-600 ml-4"> <p>1. 你之前强调"轻改造"</p> <p>2. 可以快速验证产品价值</p> <p>3. 降低开发风险</p> <p>4. 用户反馈可以指导后续开发</p> </div> </div> <!-- 问题 --> <div class="mt-4 flex items-center gap-2 text-gray-700"> <span>你倾向于哪个选项？或者有其他想法？</span> <span class="text-lg">🤔</span> </div> </div> </div> <!-- 用户消息 --> <div class="flex gap-4 flex-row-reverse"> <div class="w-8 h-8 bg-gradient-to-br from-orange-400 to-red-500 rounded-full flex items-center justify-center text-white flex-shrink-0 text-xs font-bold"> 用 </div> <div class="max-w-2xl"> <div class="chat-bubble-user p-4 shadow-md"> <p class="leading-relaxed"> 选项A，同时要打造桌面端。前面不是规划过使用tauri么，最终方案怎么没有体现。你能读取图片么，可以的话我把ZCLAW的界面截图给你参考 </p> </div> </div> </div> </div> <!-- 底部输入区 --> <div class="border-t border-gray-100 p-4 bg-white"> <div class="max-w-4xl mx-auto"> <div class="relative flex items-end gap-2 bg-gray-50 rounded-2xl border border-gray-200 p-2 focus-within:border-orange-300 focus-within:ring-2 focus-within:ring-orange-100 transition-all"> <button class="p-2 text-gray-400 hover:text-gray-600 rounded-lg"> <i data-lucide="paperclip" class="w-5 h-5">
|
||||
</i> </button> <div class="flex-1 py-2"> <input type="text" placeholder="发送给 ZCLAW" class="w-full bg-transparent border-none focus:outline-none text-gray-700 placeholder-gray-400"> </div> <div class="flex items-center gap-2 pr-2 pb-1"> <button class="flex items-center gap-1 px-2 py-1 text-xs text-gray-500 hover:bg-gray-200 rounded-md transition-colors"> <span>glm5</span> <i data-lucide="chevron-down" class="w-3 h-3">
|
||||
</i> </button> <button class="w-8 h-8 bg-gray-900 text-white rounded-full flex items-center justify-center hover:bg-gray-800 transition-colors"> <i data-lucide="arrow-up" class="w-4 h-4">
|
||||
</i> </button> </div> </div> <div class="text-center mt-2 text-xs text-gray-400"> Agent 在本地运行，内容由AI生成 </div> </div> </div> <!-- Toast 提示 --> <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 toast text-white px-6 py-4 rounded-xl flex flex-col items-center gap-2 shadow-2xl"> <i data-lucide="check" class="w-8 h-8">
|
||||
</i> <span class="text-sm font-medium">已添加到剪贴板</span> </div> </main> <!-- 右侧边栏 --> <aside class="w-80 bg-white border-l border-gray-200 flex flex-col flex-shrink-0"> <!-- 顶部工具栏 --> <div class="h-14 border-b border-gray-100 flex items-center justify-between px-4 flex-shrink-0"> <div class="flex items-center gap-3"> <div class="flex items-center gap-1 text-gray-600"> <i data-lucide="shopping-cart" class="w-4 h-4">
|
||||
</i> <span class="font-medium">2268</span> </div> <button class="text-xs text-orange-600 hover:underline">去购买</button> </div> <div class="flex items-center gap-3 text-gray-500"> <button class="hover:text-gray-700 flex items-center gap-1 text-xs"> <i data-lucide="file-text" class="w-4 h-4">
|
||||
</i> <span>文件</span> </button> <button class="hover:text-gray-700 flex items-center gap-1 text-xs"> <i data-lucide="user" class="w-4 h-4">
|
||||
</i> <span>Agent</span> </button> </div> </div> <!-- 文件预览 --> <div class="flex-1 overflow-y-auto custom-scrollbar p-4"> <!-- 文件标题 --> <div class="flex items-center justify-between mb-4 text-xs text-gray-500"> <div class="flex items-center gap-1"> <i data-lucide="minus" class="w-3 h-3">
|
||||
</i> <span>zclaw-final-plan.md</span> </div> <div class="flex gap-2"> <i data-lucide="code" class="w-3.5 h-3.5 cursor-pointer hover:text-gray-700">
|
||||
</i> <i data-lucide="copy" class="w-3.5 h-3.5 cursor-pointer hover:text-gray-700">
|
||||
</i> <i data-lucide="more-horizontal" class="w-3.5 h-3.5 cursor-pointer hover:text-gray-700">
|
||||
</i> </div> </div> <!-- 任务成功率卡片 --> <div class="bg-gray-50 rounded-lg border border-gray-100 mb-6 overflow-hidden"> <table class="w-full text-xs"> <tbody class="divide-y divide-gray-100"> <tr> <td class="py-3 px-3 text-gray-600">任务成功率</td> <td class="py-3 px-3 text-right font-medium text-gray-900">> 95%</td> </tr> <tr> <td class="py-3 px-3 text-gray-600">并发用户数</td> <td class="py-3 px-3 text-right font-medium text-gray-900">> 100</td> </tr> </tbody> </table> </div> <!-- 产品指标 --> <div class="mb-6"> <h3 class="font-bold text-gray-900 mb-3 text-sm">产品指标</h3> <div class="bg-gray-50 rounded-lg border border-gray-100 overflow-hidden"> <table class="w-full text-xs"> <thead class="bg-gray-100 text-gray-600"> <tr> <th class="py-2 px-3 text-left font-medium">指标</th> <th class="py-2 px-3 text-right font-medium">目标</th> </tr> </thead> <tbody class="divide-y divide-gray-100 bg-white"> <tr> <td class="py-2.5 px-3 text-gray-700">DAU</td> <td class="py-2.5 px-3 text-right text-gray-900">> 100 (MVP)</td> </tr> <tr> <td class="py-2.5 px-3 text-gray-700">用户留存 (7日)</td> <td class="py-2.5 px-3 text-right text-gray-900">> 40%</td> </tr> <tr> <td class="py-2.5 px-3 text-gray-700">任务完成率</td> <td class="py-2.5 px-3 text-right text-gray-900">> 90%</td> </tr> <tr> <td class="py-2.5 px-3 text-gray-700">NPS</td> <td class="py-2.5 px-3 text-right text-gray-900">> 50</td> </tr> </tbody> </table> </div> </div> <!-- 下一步行动 --> <div> <h3 class="font-bold text-gray-900 mb-3 text-sm flex items-center gap-2"> <span class="w-5 h-5 bg-orange-500 rounded-full flex items-center justify-center text-white text-xs"> <i data-lucide="target" class="w-3 h-3">
|
||||
</i> </span> 下一步行动 </h3> <!-- 立即执行 --> <div class="mb-4"> <h4 class="text-xs font-semibold text-gray-900 mb-2 ml-7">立即执行 (今天)</h4> <ul class="space-y-2 ml-7"> <li class="flex items-start gap-2 text-xs text-gray-600"> <div class="w-3 h-3 border border-gray-300 rounded-sm mt-0.5 flex-shrink-0">
|
||||
</div> <span>创建 GitHub 仓库</span> </li> <li class="flex items-start gap-2 text-xs text-gray-600"> <div class="w-3 h-3 border border-gray-300 rounded-sm mt-0.5 flex-shrink-0">
|
||||
</div> <span>初始化项目结构</span> </li> <li class="flex items-start gap-2 text-xs text-gray-600"> <div class="w-3 h-3 border border-gray-300 rounded-sm mt-0.5 flex-shrink-0">
|
||||
</div> <span>配置 CI/CD</span> </li> </ul> </div> <!-- 本周执行 --> <div> <h4 class="text-xs font-semibold text-gray-900 mb-2 ml-7">本周执行</h4> <ul class="space-y-2 ml-7"> <li class="flex items-start gap-2 text-xs text-gray-600"> <div class="w-3 h-3 border border-gray-300 rounded-sm mt-0.5 flex-shrink-0">
|
||||
</div> <span>设计数据库 Schema</span> </li> <li class="flex items-start gap-2 text-xs text-gray-600"> <div class="w-3 h-3 border border-gray-300 rounded-sm mt-0.5 flex-shrink-0">
|
||||
</div> <span>搭建基础框架</span> </li> <li class="flex items-start gap-2 text-xs text-gray-600"> <div class="w-3 h-3 border border-gray-300 rounded-sm mt-0.5 flex-shrink-0">
|
||||
</div> <span>开始远程执行系统开发</span> </li> </ul> </div> </div> <!-- 底部版本信息 --> <div class="mt-8 pt-4 border-t border-gray-100 text-xs text-gray-400 text-center"> 方案版本: v1.0.0 Final 文档维护: ZCLAW 团队 </div> </div> </aside> <script> lucide.createIcons(); </script> </body> </html>
|
||||
432
docs/archive/openclaw-legacy/autoclaw界面/html版/2.html
Normal file
432
docs/archive/openclaw-legacy/autoclaw界面/html版/2.html
Normal file
@@ -0,0 +1,432 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>新分身 1 - ZCLAW</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.sidebar-item:hover {
|
||||
background-color: rgba(0,0,0,0.03);
|
||||
}
|
||||
|
||||
.sidebar-item.active {
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
.tag {
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.tag.selected {
|
||||
background-color: #fff7ed;
|
||||
border-color: #f97316;
|
||||
color: #ea580c;
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.toggle-switch {
|
||||
appearance: none;
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
background: #e5e7eb;
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.toggle-switch::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
transition: transform 0.3s;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.toggle-switch:checked {
|
||||
background: #f97316;
|
||||
}
|
||||
|
||||
.toggle-switch:checked::after {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #e5e7eb;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="h-screen flex overflow-hidden text-gray-800 text-sm">
|
||||
|
||||
<!-- 左侧边栏 -->
|
||||
<aside class="w-64 bg-gray-50 border-r border-gray-200 flex flex-col flex-shrink-0">
|
||||
<!-- 顶部标签 -->
|
||||
<div class="flex border-b border-gray-200 bg-white">
|
||||
<button class="flex-1 py-3 px-4 text-xs font-medium text-gray-900 border-b-2 border-gray-900">分身</button>
|
||||
<button class="flex-1 py-3 px-4 text-xs font-medium text-gray-500 hover:text-gray-700">IM 频道</button>
|
||||
<button class="flex-1 py-3 px-4 text-xs font-medium text-gray-500 hover:text-gray-700">定时任务</button>
|
||||
</div>
|
||||
|
||||
<!-- Agent 列表 -->
|
||||
<div class="flex-1 overflow-y-auto custom-scrollbar py-2">
|
||||
<!-- Browser Agent -->
|
||||
<div class="sidebar-item mx-2 px-3 py-3 rounded-lg cursor-pointer mb-1">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-10 h-10 bg-blue-500 rounded-xl flex items-center justify-center text-white flex-shrink-0">
|
||||
<i data-lucide="globe" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between items-center mb-0.5">
|
||||
<span class="font-medium text-gray-900 truncate">Browser Agent</span>
|
||||
<span class="text-xs text-gray-400">22:34</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 truncate">+ 新分身</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ZCLAW -->
|
||||
<div class="sidebar-item mx-2 px-3 py-3 rounded-lg cursor-pointer mb-1">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-10 h-10 bg-gradient-to-br from-orange-400 to-red-500 rounded-xl flex items-center justify-center text-white flex-shrink-0">
|
||||
<i data-lucide="cat" class="w-6 h-6"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between items-center mb-0.5">
|
||||
<span class="font-semibold text-gray-900 truncate">ZCLAW</span>
|
||||
<span class="text-xs text-gray-400">22:13</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 truncate">好的，我已经整理了完整的开发文档...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 监控 -->
|
||||
<div class="sidebar-item mx-2 px-3 py-3 rounded-lg cursor-pointer mb-1">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-10 h-10 bg-orange-100 rounded-xl flex items-center justify-center text-orange-600 flex-shrink-0">
|
||||
<i data-lucide="bar-chart-2" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between items-center mb-0.5">
|
||||
<span class="font-medium text-gray-900 truncate">监控</span>
|
||||
<span class="text-xs text-gray-400">20:07</span>
|
||||
</div>
|
||||
<p class="text-xs text-orange-600 truncate">+ 新分身</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 沉思小助手 -->
|
||||
<div class="sidebar-item mx-2 px-3 py-3 rounded-lg cursor-pointer mb-1">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center text-blue-600 flex-shrink-0">
|
||||
<i data-lucide="search" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between items-center mb-0.5">
|
||||
<span class="font-medium text-gray-900 truncate">沉思小助手</span>
|
||||
<span class="text-xs text-gray-400">15:05</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 truncate">+ 新分身</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新分身 1（选中状态） -->
|
||||
<div class="sidebar-item active mx-2 px-3 py-3 rounded-lg cursor-pointer mb-1 shadow-sm bg-white border border-gray-100">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-10 h-10 bg-gradient-to-br from-red-400 to-pink-500 rounded-xl flex items-center justify-center text-white flex-shrink-0 text-xs font-bold">
|
||||
新
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between items-center mb-0.5">
|
||||
<span class="font-semibold text-gray-900 truncate">新分身 1</span>
|
||||
<span class="text-xs text-gray-400">22:25</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 truncate">+ 新分身</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部用户 -->
|
||||
<div class="p-3 border-t border-gray-200 bg-gray-50">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-gradient-to-br from-orange-400 to-red-500 rounded-full flex items-center justify-center text-white text-xs font-bold">
|
||||
用
|
||||
</div>
|
||||
<span class="font-medium text-gray-700">用户7141</span>
|
||||
<button class="ml-auto text-gray-400 hover:text-gray-600">
|
||||
<i data-lucide="settings" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 中间主内容区 -->
|
||||
<main class="flex-1 flex flex-col bg-white relative">
|
||||
<!-- 顶部标题栏 -->
|
||||
<div class="h-14 border-b border-gray-100 flex items-center justify-between px-6 flex-shrink-0">
|
||||
<h2 class="font-semibold text-gray-900 text-base">新分身 1</h2>
|
||||
<div class="flex items-center gap-4 text-gray-500">
|
||||
<button class="hover:text-gray-700">
|
||||
<i data-lucide="shopping-cart" class="w-5 h-5"></i>
|
||||
</button>
|
||||
<button class="hover:text-gray-700">
|
||||
<i data-lucide="copy" class="w-5 h-5"></i>
|
||||
</button>
|
||||
<button class="hover:text-gray-700">
|
||||
<i data-lucide="user" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态内容区 -->
|
||||
<div class="flex-1 flex flex-col items-center justify-center p-8 overflow-y-auto">
|
||||
<!-- 积分提示 -->
|
||||
<div class="mb-8 px-4 py-2 bg-orange-50 rounded-full border border-orange-100 text-xs text-orange-700 flex items-center gap-2">
|
||||
<span>29 元即享 5000 积分</span>
|
||||
<span class="text-orange-400">|</span>
|
||||
<button class="font-medium hover:underline">去购买</button>
|
||||
</div>
|
||||
|
||||
<!-- Logo -->
|
||||
<div class="w-20 h-20 mb-6 relative">
|
||||
<svg viewBox="0 0 100 100" class="w-full h-full">
|
||||
<path d="M50 20 C30 20 20 35 20 50 C20 70 35 85 50 85 C65 85 80 70 80 50 C80 35 70 20 50 20 Z M50 25 C60 25 70 35 70 50 C70 65 60 75 50 75 C40 75 30 65 30 50 C30 35 40 25 50 25 Z M45 40 C45 42 43 44 40 44 C38 44 36 42 36 40 C36 38 38 36 40 36 C43 36 45 38 45 40 Z M64 40 C64 42 62 44 60 44 C57 44 55 42 55 40 C55 38 57 36 60 36 C62 36 64 38 64 40 Z M35 55 C35 55 40 65 50 65 C60 65 65 55 65 55"
|
||||
fill="none"
|
||||
stroke="black"
|
||||
stroke-width="4"
|
||||
stroke-linecap="round"/>
|
||||
<path d="M75 30 C80 25 85 25 90 30 C95 35 95 45 90 50 C85 55 80 55 75 50"
|
||||
fill="none"
|
||||
stroke="black"
|
||||
stroke-width="4"
|
||||
stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 标题 -->
|
||||
<h1 class="text-2xl font-bold mb-3 text-gray-900">ZCLAW</h1>
|
||||
|
||||
<!-- 描述 -->
|
||||
<p class="text-gray-500 mb-8 text-sm">描述你的目标，ZCLAW 会分步执行并实时反馈</p>
|
||||
|
||||
<!-- 快速配置卡片 -->
|
||||
<div onclick="openModal()" class="w-full max-w-md bg-white border border-gray-200 rounded-xl p-4 flex items-center gap-4 cursor-pointer hover:shadow-md hover:border-orange-200 transition-all group">
|
||||
<div class="w-12 h-12 bg-orange-50 rounded-lg flex items-center justify-center text-orange-500 group-hover:bg-orange-100 transition-colors">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
||||
<polyline points="14 2 14 8 20 8"></polyline>
|
||||
<line x1="12" y1="18" x2="12" y2="12"></line>
|
||||
<line x1="9" y1="15" x2="15" y2="15"></line>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-gray-900 mb-1">快速配置</h3>
|
||||
<p class="text-xs text-gray-500">设置名字、角色，让 ZCLAW 更了解你</p>
|
||||
</div>
|
||||
<i data-lucide="chevron-right" class="w-5 h-5 text-gray-400"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部输入区 -->
|
||||
<div class="border-t border-gray-100 p-4 bg-white">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="relative flex items-center gap-2 bg-gray-50 rounded-2xl border border-gray-200 p-3">
|
||||
<button class="p-1 text-gray-400 hover:text-gray-600">
|
||||
<i data-lucide="paperclip" class="w-5 h-5"></i>
|
||||
</button>
|
||||
|
||||
<input type="text" placeholder="发送给 ZCLAW" class="flex-1 bg-transparent border-none focus:outline-none text-gray-700 placeholder-gray-400 text-sm">
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="flex items-center gap-1 px-2 py-1 text-xs text-gray-500 hover:bg-gray-200 rounded-md">
|
||||
<span>glm-5</span>
|
||||
<i data-lucide="chevron-down" class="w-3 h-3"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button class="w-8 h-8 bg-gray-300 text-white rounded-full flex items-center justify-center cursor-not-allowed">
|
||||
<i data-lucide="arrow-up" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-2 text-xs text-gray-400">
|
||||
Agent 在本地运行，内容由AI生成
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 快速配置模态框 -->
|
||||
<div id="configModal" class="fixed inset-0 z-50 hidden">
|
||||
<!-- 遮罩层 -->
|
||||
<div class="modal-overlay absolute inset-0" onclick="closeModal()"></div>
|
||||
|
||||
<!-- 模态框内容 -->
|
||||
<div class="absolute inset-0 flex items-center justify-center p-4 pointer-events-none">
|
||||
<div class="bg-white rounded-2xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto pointer-events-auto custom-scrollbar">
|
||||
<!-- 头部 -->
|
||||
<div class="sticky top-0 bg-white border-b border-gray-100 p-6 flex justify-between items-start z-10">
|
||||
<div>
|
||||
<h2 class="text-xl font-bold text-gray-900 mb-2">快速配置</h2>
|
||||
<p class="text-sm text-gray-500">让 ZCLAW 更了解你，提供更精准的帮助</p>
|
||||
</div>
|
||||
<button onclick="closeModal()" class="text-gray-400 hover:text-gray-600 p-1">
|
||||
<i data-lucide="x" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 表单内容 -->
|
||||
<div class="p-6 space-y-6">
|
||||
<!-- 怎么称呼你？ -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">怎么称呼你？</label>
|
||||
<input type="text" placeholder="输入你的名字" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent text-sm">
|
||||
</div>
|
||||
|
||||
<!-- 你的角色 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">你的角色（可选）</label>
|
||||
<input type="text" placeholder="如：全栈工程师、产品经理" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent text-sm">
|
||||
</div>
|
||||
|
||||
<!-- 怎么称呼我？ -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">怎么称呼我？（可选）</label>
|
||||
<input type="text" placeholder="给龙虾取个名字，如：小龙、Claw" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent text-sm">
|
||||
</div>
|
||||
|
||||
<!-- 使用场景 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-3">使用场景（可多选）</label>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button class="tag px-4 py-2 border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 bg-white" onclick="toggleTag(this)">编程</button>
|
||||
<button class="tag px-4 py-2 border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 bg-white" onclick="toggleTag(this)">写作</button>
|
||||
<button class="tag px-4 py-2 border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 bg-white" onclick="toggleTag(this)">产品</button>
|
||||
<button class="tag px-4 py-2 border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 bg-white" onclick="toggleTag(this)">数据分析</button>
|
||||
<button class="tag px-4 py-2 border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 bg-white" onclick="toggleTag(this)">设计</button>
|
||||
<button class="tag px-4 py-2 border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 bg-white" onclick="toggleTag(this)">运维</button>
|
||||
<button class="tag px-4 py-2 border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 bg-white" onclick="toggleTag(this)">研究</button>
|
||||
<button class="tag px-4 py-2 border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 bg-white" onclick="toggleTag(this)">营销</button>
|
||||
<button class="tag px-4 py-2 border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 bg-white flex items-center gap-1" onclick="toggleTag(this)">
|
||||
<i data-lucide="plus" class="w-3 h-3"></i>
|
||||
其他
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 工作目录 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">工作目录</label>
|
||||
<div class="flex gap-2">
|
||||
<div class="flex-1 flex items-center gap-2 px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm text-gray-600">
|
||||
<i data-lucide="folder-open" class="w-4 h-4 text-gray-400"></i>
|
||||
<span>~/.openclaw-ZCLAW/workspace</span>
|
||||
</div>
|
||||
<button class="px-4 py-2 border border-gray-200 rounded-xl text-sm text-gray-600 hover:bg-gray-50 whitespace-nowrap">
|
||||
浏览...
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 限制文件访问范围 -->
|
||||
<div class="flex items-center justify-between py-2">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<i data-lucide="shield" class="w-4 h-4 text-gray-600"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-medium text-gray-900 text-sm">限制文件访问范围</div>
|
||||
<div class="text-xs text-gray-500 mt-0.5">开启后 Agent 只能读写工作目录内的文件</div>
|
||||
</div>
|
||||
</div>
|
||||
<input type="checkbox" class="toggle-switch" checked>
|
||||
</div>
|
||||
|
||||
<!-- 优化计划 -->
|
||||
<div class="flex items-center justify-between py-2">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<i data-lucide="sparkles" class="w-4 h-4 text-gray-600"></i>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="font-medium text-gray-900 text-sm">优化计划</div>
|
||||
<i data-lucide="info" class="w-4 h-4 text-gray-400 cursor-pointer"></i>
|
||||
</div>
|
||||
</div>
|
||||
<input type="checkbox" class="toggle-switch">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<div class="sticky bottom-0 bg-white border-t border-gray-100 p-6">
|
||||
<button class="w-full py-3 bg-gradient-to-r from-orange-400 to-orange-500 text-white font-medium rounded-xl hover:from-orange-500 hover:to-orange-600 transition-all shadow-md hover:shadow-lg">
|
||||
完成配置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
|
||||
function openModal() {
|
||||
document.getElementById('configModal').classList.remove('hidden');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
document.getElementById('configModal').classList.add('hidden');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
function toggleTag(btn) {
|
||||
btn.classList.toggle('selected');
|
||||
}
|
||||
|
||||
// ESC键关闭模态框
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape') {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
457
docs/archive/openclaw-legacy/autoclaw界面/html版/2_formatted.html
Normal file
457
docs/archive/openclaw-legacy/autoclaw界面/html版/2_formatted.html
Normal file
@@ -0,0 +1,457 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>新分身 1 - ZCLAW</title>
|
||||
<script src="https://cdn.tailwindcss.com">
|
||||
</script>
|
||||
<script src="https://unpkg.com/lucide@latest">
|
||||
</script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.sidebar-item:hover {
|
||||
background-color: rgba(0,0,0,0.03);
|
||||
}
|
||||
|
||||
.sidebar-item.active {
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
.tag {
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.tag.selected {
|
||||
background-color: #fff7ed;
|
||||
border-color: #f97316;
|
||||
color: #ea580c;
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.toggle-switch {
|
||||
appearance: none;
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
background: #e5e7eb;
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.toggle-switch::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
transition: transform 0.3s;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.toggle-switch:checked {
|
||||
background: #f97316;
|
||||
}
|
||||
|
||||
.toggle-switch:checked::after {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #e5e7eb;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="h-screen flex overflow-hidden text-gray-800 text-sm">
|
||||
|
||||
<!-- 左侧边栏 -->
|
||||
<aside class="w-64 bg-gray-50 border-r border-gray-200 flex flex-col flex-shrink-0">
|
||||
<!-- 顶部标签 -->
|
||||
<div class="flex border-b border-gray-200 bg-white">
|
||||
<button class="flex-1 py-3 px-4 text-xs font-medium text-gray-900 border-b-2 border-gray-900">分身</button>
|
||||
<button class="flex-1 py-3 px-4 text-xs font-medium text-gray-500 hover:text-gray-700">IM 频道</button>
|
||||
<button class="flex-1 py-3 px-4 text-xs font-medium text-gray-500 hover:text-gray-700">定时任务</button>
|
||||
</div>
|
||||
|
||||
<!-- Agent 列表 -->
|
||||
<div class="flex-1 overflow-y-auto custom-scrollbar py-2">
|
||||
<!-- Browser Agent -->
|
||||
<div class="sidebar-item mx-2 px-3 py-3 rounded-lg cursor-pointer mb-1">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-10 h-10 bg-blue-500 rounded-xl flex items-center justify-center text-white flex-shrink-0">
|
||||
<i data-lucide="globe" class="w-5 h-5">
|
||||
</i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between items-center mb-0.5">
|
||||
<span class="font-medium text-gray-900 truncate">Browser Agent</span>
|
||||
<span class="text-xs text-gray-400">22:34</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 truncate">+ 新分身</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ZCLAW -->
|
||||
<div class="sidebar-item mx-2 px-3 py-3 rounded-lg cursor-pointer mb-1">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-10 h-10 bg-gradient-to-br from-orange-400 to-red-500 rounded-xl flex items-center justify-center text-white flex-shrink-0">
|
||||
<i data-lucide="cat" class="w-6 h-6">
|
||||
</i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between items-center mb-0.5">
|
||||
<span class="font-semibold text-gray-900 truncate">ZCLAW</span>
|
||||
<span class="text-xs text-gray-400">22:13</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 truncate">好的，我已经整理了完整的开发文档...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 监控 -->
|
||||
<div class="sidebar-item mx-2 px-3 py-3 rounded-lg cursor-pointer mb-1">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-10 h-10 bg-orange-100 rounded-xl flex items-center justify-center text-orange-600 flex-shrink-0">
|
||||
<i data-lucide="bar-chart-2" class="w-5 h-5">
|
||||
</i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between items-center mb-0.5">
|
||||
<span class="font-medium text-gray-900 truncate">监控</span>
|
||||
<span class="text-xs text-gray-400">20:07</span>
|
||||
</div>
|
||||
<p class="text-xs text-orange-600 truncate">+ 新分身</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 沉思小助手 -->
|
||||
<div class="sidebar-item mx-2 px-3 py-3 rounded-lg cursor-pointer mb-1">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center text-blue-600 flex-shrink-0">
|
||||
<i data-lucide="search" class="w-5 h-5">
|
||||
</i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between items-center mb-0.5">
|
||||
<span class="font-medium text-gray-900 truncate">沉思小助手</span>
|
||||
<span class="text-xs text-gray-400">15:05</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 truncate">+ 新分身</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新分身 1（选中状态） -->
|
||||
<div class="sidebar-item active mx-2 px-3 py-3 rounded-lg cursor-pointer mb-1 shadow-sm bg-white border border-gray-100">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-10 h-10 bg-gradient-to-br from-red-400 to-pink-500 rounded-xl flex items-center justify-center text-white flex-shrink-0 text-xs font-bold">
|
||||
新
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between items-center mb-0.5">
|
||||
<span class="font-semibold text-gray-900 truncate">新分身 1</span>
|
||||
<span class="text-xs text-gray-400">22:25</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 truncate">+ 新分身</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部用户 -->
|
||||
<div class="p-3 border-t border-gray-200 bg-gray-50">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-gradient-to-br from-orange-400 to-red-500 rounded-full flex items-center justify-center text-white text-xs font-bold">
|
||||
用
|
||||
</div>
|
||||
<span class="font-medium text-gray-700">用户7141</span>
|
||||
<button class="ml-auto text-gray-400 hover:text-gray-600">
|
||||
<i data-lucide="settings" class="w-4 h-4">
|
||||
</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 中间主内容区 -->
|
||||
<main class="flex-1 flex flex-col bg-white relative">
|
||||
<!-- 顶部标题栏 -->
|
||||
<div class="h-14 border-b border-gray-100 flex items-center justify-between px-6 flex-shrink-0">
|
||||
<h2 class="font-semibold text-gray-900 text-base">新分身 1</h2>
|
||||
<div class="flex items-center gap-4 text-gray-500">
|
||||
<button class="hover:text-gray-700">
|
||||
<i data-lucide="shopping-cart" class="w-5 h-5">
|
||||
</i>
|
||||
</button>
|
||||
<button class="hover:text-gray-700">
|
||||
<i data-lucide="copy" class="w-5 h-5">
|
||||
</i>
|
||||
</button>
|
||||
<button class="hover:text-gray-700">
|
||||
<i data-lucide="user" class="w-5 h-5">
|
||||
</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态内容区 -->
|
||||
<div class="flex-1 flex flex-col items-center justify-center p-8 overflow-y-auto">
|
||||
<!-- 积分提示 -->
|
||||
<div class="mb-8 px-4 py-2 bg-orange-50 rounded-full border border-orange-100 text-xs text-orange-700 flex items-center gap-2">
|
||||
<span>29 元即享 5000 积分</span>
|
||||
<span class="text-orange-400">|</span>
|
||||
<button class="font-medium hover:underline">去购买</button>
|
||||
</div>
|
||||
|
||||
<!-- Logo -->
|
||||
<div class="w-20 h-20 mb-6 relative">
|
||||
<svg viewBox="0 0 100 100" class="w-full h-full">
|
||||
<path d="M50 20 C30 20 20 35 20 50 C20 70 35 85 50 85 C65 85 80 70 80 50 C80 35 70 20 50 20 Z M50 25 C60 25 70 35 70 50 C70 65 60 75 50 75 C40 75 30 65 30 50 C30 35 40 25 50 25 Z M45 40 C45 42 43 44 40 44 C38 44 36 42 36 40 C36 38 38 36 40 36 C43 36 45 38 45 40 Z M64 40 C64 42 62 44 60 44 C57 44 55 42 55 40 C55 38 57 36 60 36 C62 36 64 38 64 40 Z M35 55 C35 55 40 65 50 65 C60 65 65 55 65 55"
|
||||
fill="none"
|
||||
stroke="black"
|
||||
stroke-width="4"
|
||||
stroke-linecap="round"/>
|
||||
<path d="M75 30 C80 25 85 25 90 30 C95 35 95 45 90 50 C85 55 80 55 75 50"
|
||||
fill="none"
|
||||
stroke="black"
|
||||
stroke-width="4"
|
||||
stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 标题 -->
|
||||
<h1 class="text-2xl font-bold mb-3 text-gray-900">ZCLAW</h1>
|
||||
|
||||
<!-- 描述 -->
|
||||
<p class="text-gray-500 mb-8 text-sm">描述你的目标，ZCLAW 会分步执行并实时反馈</p>
|
||||
|
||||
<!-- 快速配置卡片 -->
|
||||
<div onclick="openModal()" class="w-full max-w-md bg-white border border-gray-200 rounded-xl p-4 flex items-center gap-4 cursor-pointer hover:shadow-md hover:border-orange-200 transition-all group">
|
||||
<div class="w-12 h-12 bg-orange-50 rounded-lg flex items-center justify-center text-orange-500 group-hover:bg-orange-100 transition-colors">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z">
|
||||
</path>
|
||||
<polyline points="14 2 14 8 20 8">
|
||||
</polyline>
|
||||
<line x1="12" y1="18" x2="12" y2="12">
|
||||
</line>
|
||||
<line x1="9" y1="15" x2="15" y2="15">
|
||||
</line>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-gray-900 mb-1">快速配置</h3>
|
||||
<p class="text-xs text-gray-500">设置名字、角色，让 ZCLAW 更了解你</p>
|
||||
</div>
|
||||
<i data-lucide="chevron-right" class="w-5 h-5 text-gray-400">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部输入区 -->
|
||||
<div class="border-t border-gray-100 p-4 bg-white">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="relative flex items-center gap-2 bg-gray-50 rounded-2xl border border-gray-200 p-3">
|
||||
<button class="p-1 text-gray-400 hover:text-gray-600">
|
||||
<i data-lucide="paperclip" class="w-5 h-5">
|
||||
</i>
|
||||
</button>
|
||||
|
||||
<input type="text" placeholder="发送给 ZCLAW" class="flex-1 bg-transparent border-none focus:outline-none text-gray-700 placeholder-gray-400 text-sm">
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="flex items-center gap-1 px-2 py-1 text-xs text-gray-500 hover:bg-gray-200 rounded-md">
|
||||
<span>glm-5</span>
|
||||
<i data-lucide="chevron-down" class="w-3 h-3">
|
||||
</i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button class="w-8 h-8 bg-gray-300 text-white rounded-full flex items-center justify-center cursor-not-allowed">
|
||||
<i data-lucide="arrow-up" class="w-4 h-4">
|
||||
</i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-2 text-xs text-gray-400">
|
||||
Agent 在本地运行，内容由AI生成
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 快速配置模态框 -->
|
||||
<div id="configModal" class="fixed inset-0 z-50 hidden">
|
||||
<!-- 遮罩层 -->
|
||||
<div class="modal-overlay absolute inset-0" onclick="closeModal()">
|
||||
</div>
|
||||
|
||||
<!-- 模态框内容 -->
|
||||
<div class="absolute inset-0 flex items-center justify-center p-4 pointer-events-none">
|
||||
<div class="bg-white rounded-2xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto pointer-events-auto custom-scrollbar">
|
||||
<!-- 头部 -->
|
||||
<div class="sticky top-0 bg-white border-b border-gray-100 p-6 flex justify-between items-start z-10">
|
||||
<div>
|
||||
<h2 class="text-xl font-bold text-gray-900 mb-2">快速配置</h2>
|
||||
<p class="text-sm text-gray-500">让 ZCLAW 更了解你，提供更精准的帮助</p>
|
||||
</div>
|
||||
<button onclick="closeModal()" class="text-gray-400 hover:text-gray-600 p-1">
|
||||
<i data-lucide="x" class="w-5 h-5">
|
||||
</i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 表单内容 -->
|
||||
<div class="p-6 space-y-6">
|
||||
<!-- 怎么称呼你？ -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">怎么称呼你？</label>
|
||||
<input type="text" placeholder="输入你的名字" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent text-sm">
|
||||
</div>
|
||||
|
||||
<!-- 你的角色 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">你的角色（可选）</label>
|
||||
<input type="text" placeholder="如：全栈工程师、产品经理" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent text-sm">
|
||||
</div>
|
||||
|
||||
<!-- 怎么称呼我？ -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">怎么称呼我？（可选）</label>
|
||||
<input type="text" placeholder="给龙虾取个名字，如：小龙、Claw" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent text-sm">
|
||||
</div>
|
||||
|
||||
<!-- 使用场景 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-3">使用场景（可多选）</label>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button class="tag px-4 py-2 border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 bg-white" onclick="toggleTag(this)">编程</button>
|
||||
<button class="tag px-4 py-2 border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 bg-white" onclick="toggleTag(this)">写作</button>
|
||||
<button class="tag px-4 py-2 border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 bg-white" onclick="toggleTag(this)">产品</button>
|
||||
<button class="tag px-4 py-2 border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 bg-white" onclick="toggleTag(this)">数据分析</button>
|
||||
<button class="tag px-4 py-2 border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 bg-white" onclick="toggleTag(this)">设计</button>
|
||||
<button class="tag px-4 py-2 border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 bg-white" onclick="toggleTag(this)">运维</button>
|
||||
<button class="tag px-4 py-2 border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 bg-white" onclick="toggleTag(this)">研究</button>
|
||||
<button class="tag px-4 py-2 border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 bg-white" onclick="toggleTag(this)">营销</button>
|
||||
<button class="tag px-4 py-2 border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 bg-white flex items-center gap-1" onclick="toggleTag(this)">
|
||||
<i data-lucide="plus" class="w-3 h-3">
|
||||
</i>
|
||||
其他
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 工作目录 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">工作目录</label>
|
||||
<div class="flex gap-2">
|
||||
<div class="flex-1 flex items-center gap-2 px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm text-gray-600">
|
||||
<i data-lucide="folder-open" class="w-4 h-4 text-gray-400">
|
||||
</i>
|
||||
<span>~/.openclaw-ZCLAW/workspace</span>
|
||||
</div>
|
||||
<button class="px-4 py-2 border border-gray-200 rounded-xl text-sm text-gray-600 hover:bg-gray-50 whitespace-nowrap">
|
||||
浏览...
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 限制文件访问范围 -->
|
||||
<div class="flex items-center justify-between py-2">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<i data-lucide="shield" class="w-4 h-4 text-gray-600">
|
||||
</i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-medium text-gray-900 text-sm">限制文件访问范围</div>
|
||||
<div class="text-xs text-gray-500 mt-0.5">开启后 Agent 只能读写工作目录内的文件</div>
|
||||
</div>
|
||||
</div>
|
||||
<input type="checkbox" class="toggle-switch" checked>
|
||||
</div>
|
||||
|
||||
<!-- 优化计划 -->
|
||||
<div class="flex items-center justify-between py-2">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<i data-lucide="sparkles" class="w-4 h-4 text-gray-600">
|
||||
</i>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="font-medium text-gray-900 text-sm">优化计划</div>
|
||||
<i data-lucide="info" class="w-4 h-4 text-gray-400 cursor-pointer">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<input type="checkbox" class="toggle-switch">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<div class="sticky bottom-0 bg-white border-t border-gray-100 p-6">
|
||||
<button class="w-full py-3 bg-gradient-to-r from-orange-400 to-orange-500 text-white font-medium rounded-xl hover:from-orange-500 hover:to-orange-600 transition-all shadow-md hover:shadow-lg">
|
||||
完成配置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
|
||||
function openModal() {
|
||||
document.getElementById('configModal').classList.remove('hidden');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
document.getElementById('configModal').classList.add('hidden');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
function toggleTag(btn) {
|
||||
btn.classList.toggle('selected');
|
||||
}
|
||||
|
||||
// ESC键关闭模态框
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape') {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
547
docs/archive/openclaw-legacy/autoclaw界面/html版/3.html
Normal file
547
docs/archive/openclaw-legacy/autoclaw界面/html版/3.html
Normal file
@@ -0,0 +1,547 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Browser Agent - ZCLAW</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.sidebar-item:hover {
|
||||
background-color: rgba(0,0,0,0.03);
|
||||
}
|
||||
|
||||
.sidebar-item.active {
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #e5e7eb;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.chat-bubble {
|
||||
max-width: 85%;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
background: #f3f4f6;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
margin-right: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
background: #f9fafb;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.file-item:hover {
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="h-screen flex overflow-hidden text-gray-800 text-sm">
|
||||
|
||||
<!-- 左侧边栏 -->
|
||||
<aside class="w-64 bg-gray-50 border-r border-gray-200 flex flex-col flex-shrink-0">
|
||||
<!-- 顶部标签 -->
|
||||
<div class="flex border-b border-gray-200 bg-white">
|
||||
<button class="flex-1 py-3 px-4 text-xs font-medium text-gray-900 border-b-2 border-gray-900">分身</button>
|
||||
<button class="flex-1 py-3 px-4 text-xs font-medium text-gray-500 hover:text-gray-700">IM 频道</button>
|
||||
<button class="flex-1 py-3 px-4 text-xs font-medium text-gray-500 hover:text-gray-700">定时任务</button>
|
||||
</div>
|
||||
|
||||
<!-- Agent 列表 -->
|
||||
<div class="flex-1 overflow-y-auto custom-scrollbar py-2">
|
||||
<!-- ZCLAW -->
|
||||
<div class="sidebar-item mx-2 px-3 py-3 rounded-lg cursor-pointer mb-1">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-10 h-10 bg-gradient-to-br from-orange-400 to-red-500 rounded-xl flex items-center justify-center text-white flex-shrink-0">
|
||||
<i data-lucide="cat" class="w-6 h-6"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between items-center mb-0.5">
|
||||
<span class="font-semibold text-gray-900 truncate">ZCLAW</span>
|
||||
<span class="text-xs text-gray-400">08:40</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 truncate">一# ✅ ZCLAW Tauri 桌面端设计方...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 沉思小助手 -->
|
||||
<div class="sidebar-item mx-2 px-3 py-3 rounded-lg cursor-pointer mb-1">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center text-blue-600 flex-shrink-0">
|
||||
<i data-lucide="search" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between items-center mb-0.5">
|
||||
<span class="font-medium text-gray-900 truncate">沉思小助手</span>
|
||||
<span class="text-xs text-gray-400">08:40</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<i data-lucide="check-square" class="w-3.5 h-3.5 text-green-500"></i>
|
||||
<p class="text-xs text-gray-500 truncate">已将今天的工作进展持久化到 'm...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 监控 -->
|
||||
<div class="sidebar-item mx-2 px-3 py-3 rounded-lg cursor-pointer mb-1">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-10 h-10 bg-orange-100 rounded-xl flex items-center justify-center text-orange-600 flex-shrink-0">
|
||||
<i data-lucide="bar-chart-2" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between items-center mb-0.5">
|
||||
<span class="font-medium text-gray-900 truncate">监控</span>
|
||||
<span class="text-xs text-gray-400">08:40</span>
|
||||
</div>
|
||||
<p class="text-xs text-orange-600 truncate">+ 新分身</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Browser Agent（选中） -->
|
||||
<div class="sidebar-item active mx-2 px-3 py-3 rounded-lg cursor-pointer mb-1 shadow-sm bg-white border border-gray-100">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-10 h-10 bg-blue-500 rounded-xl flex items-center justify-center text-white flex-shrink-0">
|
||||
<i data-lucide="globe" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between items-center mb-0.5">
|
||||
<span class="font-semibold text-gray-900 truncate">Browser Agent</span>
|
||||
<span class="text-xs text-gray-400">08:40</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 truncate">完成! 详细分析报告已保存到: **...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 如果我在新的电脑上面... -->
|
||||
<div class="sidebar-item mx-2 px-3 py-3 rounded-lg cursor-pointer mb-1">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-10 h-10 bg-purple-500 rounded-xl flex items-center justify-center text-white flex-shrink-0 text-xs font-bold">
|
||||
如果
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between items-center mb-0.5">
|
||||
<span class="font-medium text-gray-900 truncate">如果我在新的电脑上面...</span>
|
||||
<span class="text-xs text-gray-400">14:40</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 truncate">+ 新分身</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部用户 -->
|
||||
<div class="p-3 border-t border-gray-200 bg-gray-50">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-gradient-to-br from-orange-400 to-red-500 rounded-full flex items-center justify-center text-white text-xs font-bold">
|
||||
用
|
||||
</div>
|
||||
<span class="font-medium text-gray-700">用户7141</span>
|
||||
<button class="ml-auto text-gray-400 hover:text-gray-600">
|
||||
<i data-lucide="settings" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 中间聊天区域 -->
|
||||
<main class="flex-1 flex flex-col bg-white relative min-w-0">
|
||||
<!-- 顶部标题栏 -->
|
||||
<div class="h-14 border-b border-gray-100 flex items-center justify-between px-6 flex-shrink-0 bg-white">
|
||||
<h2 class="font-semibold text-gray-900 text-base">Browser Agent</h2>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-2 text-sm text-orange-600 bg-orange-50 px-3 py-1.5 rounded-full border border-orange-100">
|
||||
<i data-lucide="alert-triangle" class="w-4 h-4"></i>
|
||||
<span>连接中断，点击重试</span>
|
||||
<button class="ml-2 text-xs bg-white px-2 py-1 rounded border border-orange-200 hover:bg-orange-50">重新连接</button>
|
||||
<button class="text-xs text-gray-500 hover:text-gray-700">重置连接</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 聊天内容 -->
|
||||
<div class="flex-1 overflow-y-auto custom-scrollbar p-6 space-y-6">
|
||||
<!-- AI消息 -->
|
||||
<div class="flex gap-4">
|
||||
<div class="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center text-white flex-shrink-0">
|
||||
<i data-lucide="globe" class="w-4 h-4"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="chat-bubble bg-white border border-gray-200 rounded-2xl rounded-tl-sm p-5 shadow-sm">
|
||||
<div class="text-gray-800 space-y-4">
|
||||
<p>完成！详细分析报告已保存到：</p>
|
||||
|
||||
<div class="flex items-start gap-2 bg-gray-50 p-3 rounded-lg border border-gray-100">
|
||||
<i data-lucide="file-text" class="w-4 h-4 text-gray-400 mt-0.5 flex-shrink-0"></i>
|
||||
<code class="text-xs text-gray-600 break-all">C:\Users\欧瑞\.openclaw-ZCLAW\workspace\Qclaw-ZCLAW 技术栈分析与独立实现方案.md</code>
|
||||
</div>
|
||||
|
||||
<h3 class="font-bold text-lg flex items-center gap-2 mt-6">
|
||||
<span class="text-green-600">📊</span>
|
||||
核心发现总结
|
||||
</h3>
|
||||
|
||||
<h4 class="font-semibold text-gray-900 mt-4">两个产品的本质</h4>
|
||||
|
||||
<!-- 表格 -->
|
||||
<div class="overflow-x-auto border border-gray-200 rounded-lg mt-2">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-gray-50 text-gray-600 font-medium">
|
||||
<tr>
|
||||
<th class="px-4 py-3 text-left border-b border-gray-200">产品</th>
|
||||
<th class="px-4 py-3 text-left border-b border-gray-200">本质</th>
|
||||
<th class="px-4 py-3 text-left border-b border-gray-200">技术来源</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
<tr>
|
||||
<td class="px-4 py-3 font-medium">腾讯 Qclaw</td>
|
||||
<td class="px-4 py-3 text-gray-600">OpenClaw 的微信封装版</td>
|
||||
<td class="px-4 py-3 text-gray-600">基于 OpenClaw 开源框架 + WeChatFerry</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-4 py-3 font-medium">智谱 ZCLAW</td>
|
||||
<td class="px-4 py-3 text-gray-600">手机自动化 Agent</td>
|
||||
<td class="px-4 py-3 text-gray-600">自研 GLM-4.1V-9B 模型 + ADB 控制</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h4 class="font-semibold text-gray-900 mt-6">技术栈对比</h4>
|
||||
|
||||
<!-- 代码块 -->
|
||||
<div class="code-block mt-2">
|
||||
<div class="flex items-center justify-between px-4 py-2 border-b border-gray-200 bg-gray-50 rounded-t-lg">
|
||||
<span class="text-xs text-gray-500 font-medium">text</span>
|
||||
<button class="text-xs text-gray-500 flex items-center gap-1 hover:text-gray-700">
|
||||
<i data-lucide="copy" class="w-3 h-3"></i>
|
||||
Copy
|
||||
</button>
|
||||
</div>
|
||||
<pre class="p-4 overflow-x-auto text-xs text-gray-700 leading-relaxed">
|
||||
腾讯 Qclaw:
|
||||
├─ 微信接入：WeChatFerry
|
||||
├─ Agent 引擎：OpenClaw PI Agent
|
||||
├─ 模型：Kimi-2.5 + 腾讯混元
|
||||
└─ 执行：Node.js + Playwright
|
||||
|
||||
智谱 ZCLAW:
|
||||
├─ 系统控制：ADB + Android 无障碍服务
|
||||
├─ Agent 引擎：AutoGLM 自研架构
|
||||
├─ 模型：GLM-4.1V-9B 多模态模型
|
||||
└─ 执行：Python + Appium</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户消息 -->
|
||||
<div class="flex gap-4 flex-row-reverse">
|
||||
<div class="w-8 h-8 bg-gradient-to-br from-orange-400 to-red-500 rounded-full flex items-center justify-center text-white flex-shrink-0 text-xs font-bold">
|
||||
用
|
||||
</div>
|
||||
<div class="max-w-2xl">
|
||||
<div class="bg-orange-500 text-white p-4 rounded-2xl rounded-tr-sm shadow-md">
|
||||
<p class="leading-relaxed">
|
||||
到小红书搜索关于龙虾的最热门的笔记，选五个整理一下笔记的内容、点赞数和前三条评论到Excel里，放在桌面就行，名字叫"笔记整理"。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部输入区 -->
|
||||
<div class="border-t border-gray-100 p-4 bg-white">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="relative flex items-end gap-2 bg-gray-50 rounded-2xl border border-gray-200 p-3 focus-within:border-orange-300 focus-within:ring-2 focus-within:ring-orange-100 transition-all">
|
||||
<button class="p-2 text-gray-400 hover:text-gray-600 rounded-lg">
|
||||
<i data-lucide="paperclip" class="w-5 h-5"></i>
|
||||
</button>
|
||||
|
||||
<div class="flex-1 py-2">
|
||||
<input type="text" placeholder="发送给 ZCLAW" class="w-full bg-transparent border-none focus:outline-none text-gray-700 placeholder-gray-400 text-sm">
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 pr-1">
|
||||
<button class="flex items-center gap-1 px-2 py-1.5 text-xs text-gray-500 hover:bg-gray-200 rounded-md transition-colors">
|
||||
<span>qwen3.5-plus</span>
|
||||
<i data-lucide="chevron-down" class="w-3 h-3"></i>
|
||||
</button>
|
||||
|
||||
<button class="w-8 h-8 bg-gray-900 text-white rounded-full flex items-center justify-center hover:bg-gray-800 transition-colors">
|
||||
<i data-lucide="arrow-up" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-2 text-xs text-gray-400">
|
||||
Agent 在本地运行，内容由AI生成
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 右侧边栏 -->
|
||||
<aside class="w-80 bg-white border-l border-gray-200 flex flex-col flex-shrink-0 right-panel">
|
||||
<!-- 顶部工具栏 -->
|
||||
<div class="h-14 border-b border-gray-100 flex items-center justify-between px-4 flex-shrink-0">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center gap-1 text-gray-600">
|
||||
<i data-lucide="shopping-cart" class="w-4 h-4"></i>
|
||||
<span class="font-medium">2268</span>
|
||||
</div>
|
||||
<button class="text-xs text-orange-600 hover:underline font-medium">去购买</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button onclick="switchPanel('files')" id="btn-files" class="flex items-center gap-1 text-xs text-gray-900 font-medium bg-gray-100 px-2 py-1.5 rounded-md transition-colors">
|
||||
<i data-lucide="file-text" class="w-4 h-4"></i>
|
||||
<span>文件</span>
|
||||
</button>
|
||||
<button onclick="switchPanel('agent')" id="btn-agent" class="flex items-center gap-1 text-xs text-gray-500 hover:text-gray-700 px-2 py-1.5 rounded-md transition-colors">
|
||||
<i data-lucide="user" class="w-4 h-4"></i>
|
||||
<span>Agent</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 文件列表面板 -->
|
||||
<div id="panel-files" class="flex-1 overflow-y-auto custom-scrollbar p-4 space-y-3">
|
||||
<!-- 文件1 -->
|
||||
<div class="file-item flex items-start gap-3 p-3 rounded-lg cursor-pointer group">
|
||||
<div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center flex-shrink-0 text-orange-600">
|
||||
<i data-lucide="file-archive" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="font-medium text-gray-900 text-sm truncate">openclaw-extension.zip</div>
|
||||
<div class="text-xs text-gray-500 mt-0.5 truncate">$env:TEMP\openclaw-extension.zip</div>
|
||||
</div>
|
||||
<button class="opacity-0 group-hover:opacity-100 text-gray-400 hover:text-gray-600">
|
||||
<i data-lucide="external-link" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 文件2 -->
|
||||
<div class="file-item flex items-start gap-3 p-3 rounded-lg cursor-pointer group">
|
||||
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0 text-blue-600">
|
||||
<i data-lucide="file-text" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="font-medium text-gray-900 text-sm truncate">OpenClaw-技术栈分析.md</div>
|
||||
<div class="text-xs text-gray-500 mt-0.5 flex items-center gap-1">
|
||||
<span class="text-orange-600">#</span>
|
||||
<span>OpenClaw/ZCLAW 技术栈完整分析</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="opacity-0 group-hover:opacity-100 text-gray-400 hover:text-gray-600">
|
||||
<i data-lucide="external-link" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 文件3 -->
|
||||
<div class="file-item flex items-start gap-3 p-3 rounded-lg cursor-pointer group">
|
||||
<div class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0 text-gray-600">
|
||||
<i data-lucide="file-text" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="font-medium text-gray-900 text-sm truncate">Qclaw-ZCLAW 技术栈分析与独立实现方案.md</div>
|
||||
<div class="text-xs text-gray-500 mt-0.5 truncate">$workspace\Qclaw-ZCLAW 技术栈分析与独立实现方...</div>
|
||||
</div>
|
||||
<button class="opacity-0 group-hover:opacity-100 text-gray-400 hover:text-gray-600">
|
||||
<i data-lucide="external-link" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Agent信息面板（默认隐藏） -->
|
||||
<div id="panel-agent" class="hidden flex-1 overflow-y-auto custom-scrollbar">
|
||||
<!-- 头部信息 -->
|
||||
<div class="p-6 border-b border-gray-100">
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center text-white text-2xl font-bold">
|
||||
Brow
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-lg text-gray-900">qiqi</h3>
|
||||
<p class="text-sm text-gray-500">AI coworker</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 space-y-6">
|
||||
<!-- 关于我 -->
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-900 mb-3 text-sm">关于我</h4>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between items-center py-2 border-b border-gray-50">
|
||||
<span class="text-gray-500 text-sm">生日</span>
|
||||
<span class="text-gray-400">—</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-start py-2 border-b border-gray-50">
|
||||
<span class="text-gray-500 text-sm">风格</span>
|
||||
<div class="text-right text-sm text-gray-700">
|
||||
<div>sharp</div>
|
||||
<div>resourceful</div>
|
||||
<div>no-nonsense</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center py-2 border-b border-gray-50">
|
||||
<span class="text-gray-500 text-sm">emoji</span>
|
||||
<span class="text-lg">🐙</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 我眼中的你 -->
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<h4 class="font-semibold text-gray-900 text-sm">我眼中的你</h4>
|
||||
<span class="text-xs text-gray-400">我知道得越多，帮得越好</span>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between items-center py-2 border-b border-gray-50">
|
||||
<span class="text-gray-500 text-sm">名字</span>
|
||||
<span class="text-gray-700 text-sm">iven</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center py-2 border-b border-gray-50">
|
||||
<span class="text-gray-500 text-sm">称呼</span>
|
||||
<span class="text-gray-700 text-sm">iven</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center py-2 border-b border-gray-50">
|
||||
<span class="text-gray-500 text-sm">时区</span>
|
||||
<span class="text-gray-700 text-sm">Asia/Shanghai</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-start py-2 border-b border-gray-50">
|
||||
<span class="text-gray-500 text-sm">专注于</span>
|
||||
<div class="flex flex-wrap justify-end gap-1">
|
||||
<span class="tag">marketing</span>
|
||||
<span class="tag">research</span>
|
||||
<span class="tag">coding</span>
|
||||
<span class="tag">writing</span>
|
||||
<span class="tag">product</span>
|
||||
<span class="tag">data</span>
|
||||
<span class="tag">design</span>
|
||||
<span class="tag">ops</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-start py-2 border-b border-gray-50">
|
||||
<span class="text-gray-500 text-sm">备注</span>
|
||||
<div class="text-right text-xs text-gray-600 space-y-1">
|
||||
<div>Name: iven</div>
|
||||
<div>Timezone: Asia/Shanghai</div>
|
||||
<div>Language: 中文</div>
|
||||
<div>首次上线: 2026-03-11</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 我的笔记 -->
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-900 mb-3 text-sm">我的笔记</h4>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between items-start py-2 border-b border-gray-50">
|
||||
<span class="text-gray-500 text-sm">当前项目</span>
|
||||
<span class="text-gray-400 text-sm italic">Current project not recorded yet</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-start py-2 border-b border-gray-50">
|
||||
<span class="text-gray-500 text-sm">工作流</span>
|
||||
<span class="text-gray-600 text-sm">Capture recurring workflows here</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-start py-2 border-b border-gray-50">
|
||||
<span class="text-gray-500 text-sm">记忆系统</span>
|
||||
<span class="text-gray-600 text-sm text-right max-w-[150px]">Summarize stable facts and working patterns</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-start py-2 border-b border-gray-50">
|
||||
<span class="text-gray-500 text-sm">工具链</span>
|
||||
<span class="text-gray-600 text-sm text-right max-w-[180px]">Record important tools, services, and local setup here</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 重要教训 -->
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-900 mb-3 text-sm">重要教训</h4>
|
||||
<div class="space-y-2 text-sm text-gray-600">
|
||||
<div class="flex gap-2">
|
||||
<span class="text-gray-400">1.</span>
|
||||
<span>Confirm before making risky changes</span>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<span class="text-gray-400">2.</span>
|
||||
<span>Persist important facts so they survive the session</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
|
||||
function switchPanel(panel) {
|
||||
const filesPanel = document.getElementById('panel-files');
|
||||
const agentPanel = document.getElementById('panel-agent');
|
||||
const btnFiles = document.getElementById('btn-files');
|
||||
const btnAgent = document.getElementById('btn-agent');
|
||||
|
||||
if (panel === 'files') {
|
||||
filesPanel.classList.remove('hidden');
|
||||
agentPanel.classList.add('hidden');
|
||||
|
||||
btnFiles.classList.add('bg-gray-100', 'text-gray-900');
|
||||
btnFiles.classList.remove('text-gray-500');
|
||||
|
||||
btnAgent.classList.remove('bg-gray-100', 'text-gray-900');
|
||||
btnAgent.classList.add('text-gray-500');
|
||||
} else {
|
||||
filesPanel.classList.add('hidden');
|
||||
agentPanel.classList.remove('hidden');
|
||||
|
||||
btnAgent.classList.add('bg-gray-100', 'text-gray-900');
|
||||
btnAgent.classList.remove('text-gray-500');
|
||||
|
||||
btnFiles.classList.remove('bg-gray-100', 'text-gray-900');
|
||||
btnFiles.classList.add('text-gray-500');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
571
docs/archive/openclaw-legacy/autoclaw界面/html版/3_formatted.html
Normal file
571
docs/archive/openclaw-legacy/autoclaw界面/html版/3_formatted.html
Normal file
@@ -0,0 +1,571 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Browser Agent - ZCLAW</title>
|
||||
<script src="https://cdn.tailwindcss.com">
|
||||
</script>
|
||||
<script src="https://unpkg.com/lucide@latest">
|
||||
</script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.sidebar-item:hover {
|
||||
background-color: rgba(0,0,0,0.03);
|
||||
}
|
||||
|
||||
.sidebar-item.active {
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #e5e7eb;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.chat-bubble {
|
||||
max-width: 85%;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
background: #f3f4f6;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
margin-right: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
background: #f9fafb;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.file-item:hover {
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="h-screen flex overflow-hidden text-gray-800 text-sm">
|
||||
|
||||
<!-- 左侧边栏 -->
|
||||
<aside class="w-64 bg-gray-50 border-r border-gray-200 flex flex-col flex-shrink-0">
|
||||
<!-- 顶部标签 -->
|
||||
<div class="flex border-b border-gray-200 bg-white">
|
||||
<button class="flex-1 py-3 px-4 text-xs font-medium text-gray-900 border-b-2 border-gray-900">分身</button>
|
||||
<button class="flex-1 py-3 px-4 text-xs font-medium text-gray-500 hover:text-gray-700">IM 频道</button>
|
||||
<button class="flex-1 py-3 px-4 text-xs font-medium text-gray-500 hover:text-gray-700">定时任务</button>
|
||||
</div>
|
||||
|
||||
<!-- Agent 列表 -->
|
||||
<div class="flex-1 overflow-y-auto custom-scrollbar py-2">
|
||||
<!-- ZCLAW -->
|
||||
<div class="sidebar-item mx-2 px-3 py-3 rounded-lg cursor-pointer mb-1">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-10 h-10 bg-gradient-to-br from-orange-400 to-red-500 rounded-xl flex items-center justify-center text-white flex-shrink-0">
|
||||
<i data-lucide="cat" class="w-6 h-6">
|
||||
</i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between items-center mb-0.5">
|
||||
<span class="font-semibold text-gray-900 truncate">ZCLAW</span>
|
||||
<span class="text-xs text-gray-400">08:40</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 truncate">一# ✅ ZCLAW Tauri 桌面端设计方...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 沉思小助手 -->
|
||||
<div class="sidebar-item mx-2 px-3 py-3 rounded-lg cursor-pointer mb-1">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center text-blue-600 flex-shrink-0">
|
||||
<i data-lucide="search" class="w-5 h-5">
|
||||
</i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between items-center mb-0.5">
|
||||
<span class="font-medium text-gray-900 truncate">沉思小助手</span>
|
||||
<span class="text-xs text-gray-400">08:40</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<i data-lucide="check-square" class="w-3.5 h-3.5 text-green-500">
|
||||
</i>
|
||||
<p class="text-xs text-gray-500 truncate">已将今天的工作进展持久化到 'm...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 监控 -->
|
||||
<div class="sidebar-item mx-2 px-3 py-3 rounded-lg cursor-pointer mb-1">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-10 h-10 bg-orange-100 rounded-xl flex items-center justify-center text-orange-600 flex-shrink-0">
|
||||
<i data-lucide="bar-chart-2" class="w-5 h-5">
|
||||
</i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between items-center mb-0.5">
|
||||
<span class="font-medium text-gray-900 truncate">监控</span>
|
||||
<span class="text-xs text-gray-400">08:40</span>
|
||||
</div>
|
||||
<p class="text-xs text-orange-600 truncate">+ 新分身</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Browser Agent（选中） -->
|
||||
<div class="sidebar-item active mx-2 px-3 py-3 rounded-lg cursor-pointer mb-1 shadow-sm bg-white border border-gray-100">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-10 h-10 bg-blue-500 rounded-xl flex items-center justify-center text-white flex-shrink-0">
|
||||
<i data-lucide="globe" class="w-5 h-5">
|
||||
</i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between items-center mb-0.5">
|
||||
<span class="font-semibold text-gray-900 truncate">Browser Agent</span>
|
||||
<span class="text-xs text-gray-400">08:40</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 truncate">完成! 详细分析报告已保存到: **...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 如果我在新的电脑上面... -->
|
||||
<div class="sidebar-item mx-2 px-3 py-3 rounded-lg cursor-pointer mb-1">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-10 h-10 bg-purple-500 rounded-xl flex items-center justify-center text-white flex-shrink-0 text-xs font-bold">
|
||||
如果
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between items-center mb-0.5">
|
||||
<span class="font-medium text-gray-900 truncate">如果我在新的电脑上面...</span>
|
||||
<span class="text-xs text-gray-400">14:40</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 truncate">+ 新分身</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部用户 -->
|
||||
<div class="p-3 border-t border-gray-200 bg-gray-50">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-gradient-to-br from-orange-400 to-red-500 rounded-full flex items-center justify-center text-white text-xs font-bold">
|
||||
用
|
||||
</div>
|
||||
<span class="font-medium text-gray-700">用户7141</span>
|
||||
<button class="ml-auto text-gray-400 hover:text-gray-600">
|
||||
<i data-lucide="settings" class="w-4 h-4">
|
||||
</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 中间聊天区域 -->
|
||||
<main class="flex-1 flex flex-col bg-white relative min-w-0">
|
||||
<!-- 顶部标题栏 -->
|
||||
<div class="h-14 border-b border-gray-100 flex items-center justify-between px-6 flex-shrink-0 bg-white">
|
||||
<h2 class="font-semibold text-gray-900 text-base">Browser Agent</h2>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-2 text-sm text-orange-600 bg-orange-50 px-3 py-1.5 rounded-full border border-orange-100">
|
||||
<i data-lucide="alert-triangle" class="w-4 h-4">
|
||||
</i>
|
||||
<span>连接中断，点击重试</span>
|
||||
<button class="ml-2 text-xs bg-white px-2 py-1 rounded border border-orange-200 hover:bg-orange-50">重新连接</button>
|
||||
<button class="text-xs text-gray-500 hover:text-gray-700">重置连接</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 聊天内容 -->
|
||||
<div class="flex-1 overflow-y-auto custom-scrollbar p-6 space-y-6">
|
||||
<!-- AI消息 -->
|
||||
<div class="flex gap-4">
|
||||
<div class="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center text-white flex-shrink-0">
|
||||
<i data-lucide="globe" class="w-4 h-4">
|
||||
</i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="chat-bubble bg-white border border-gray-200 rounded-2xl rounded-tl-sm p-5 shadow-sm">
|
||||
<div class="text-gray-800 space-y-4">
|
||||
<p>完成！详细分析报告已保存到：</p>
|
||||
|
||||
<div class="flex items-start gap-2 bg-gray-50 p-3 rounded-lg border border-gray-100">
|
||||
<i data-lucide="file-text" class="w-4 h-4 text-gray-400 mt-0.5 flex-shrink-0">
|
||||
</i>
|
||||
<code class="text-xs text-gray-600 break-all">C:\Users\欧瑞\.openclaw-ZCLAW\workspace\Qclaw-ZCLAW 技术栈分析与独立实现方案.md</code>
|
||||
</div>
|
||||
|
||||
<h3 class="font-bold text-lg flex items-center gap-2 mt-6">
|
||||
<span class="text-green-600">📊</span>
|
||||
核心发现总结
|
||||
</h3>
|
||||
|
||||
<h4 class="font-semibold text-gray-900 mt-4">两个产品的本质</h4>
|
||||
|
||||
<!-- 表格 -->
|
||||
<div class="overflow-x-auto border border-gray-200 rounded-lg mt-2">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-gray-50 text-gray-600 font-medium">
|
||||
<tr>
|
||||
<th class="px-4 py-3 text-left border-b border-gray-200">产品</th>
|
||||
<th class="px-4 py-3 text-left border-b border-gray-200">本质</th>
|
||||
<th class="px-4 py-3 text-left border-b border-gray-200">技术来源</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
<tr>
|
||||
<td class="px-4 py-3 font-medium">腾讯 Qclaw</td>
|
||||
<td class="px-4 py-3 text-gray-600">OpenClaw 的微信封装版</td>
|
||||
<td class="px-4 py-3 text-gray-600">基于 OpenClaw 开源框架 + WeChatFerry</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-4 py-3 font-medium">智谱 ZCLAW</td>
|
||||
<td class="px-4 py-3 text-gray-600">手机自动化 Agent</td>
|
||||
<td class="px-4 py-3 text-gray-600">自研 GLM-4.1V-9B 模型 + ADB 控制</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h4 class="font-semibold text-gray-900 mt-6">技术栈对比</h4>
|
||||
|
||||
<!-- 代码块 -->
|
||||
<div class="code-block mt-2">
|
||||
<div class="flex items-center justify-between px-4 py-2 border-b border-gray-200 bg-gray-50 rounded-t-lg">
|
||||
<span class="text-xs text-gray-500 font-medium">text</span>
|
||||
<button class="text-xs text-gray-500 flex items-center gap-1 hover:text-gray-700">
|
||||
<i data-lucide="copy" class="w-3 h-3">
|
||||
</i>
|
||||
Copy
|
||||
</button>
|
||||
</div>
|
||||
<pre class="p-4 overflow-x-auto text-xs text-gray-700 leading-relaxed">
|
||||
腾讯 Qclaw:
|
||||
├─ 微信接入：WeChatFerry
|
||||
├─ Agent 引擎：OpenClaw PI Agent
|
||||
├─ 模型：Kimi-2.5 + 腾讯混元
|
||||
└─ 执行：Node.js + Playwright
|
||||
|
||||
智谱 ZCLAW:
|
||||
├─ 系统控制：ADB + Android 无障碍服务
|
||||
├─ Agent 引擎：AutoGLM 自研架构
|
||||
├─ 模型：GLM-4.1V-9B 多模态模型
|
||||
└─ 执行：Python + Appium</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户消息 -->
|
||||
<div class="flex gap-4 flex-row-reverse">
|
||||
<div class="w-8 h-8 bg-gradient-to-br from-orange-400 to-red-500 rounded-full flex items-center justify-center text-white flex-shrink-0 text-xs font-bold">
|
||||
用
|
||||
</div>
|
||||
<div class="max-w-2xl">
|
||||
<div class="bg-orange-500 text-white p-4 rounded-2xl rounded-tr-sm shadow-md">
|
||||
<p class="leading-relaxed">
|
||||
到小红书搜索关于龙虾的最热门的笔记，选五个整理一下笔记的内容、点赞数和前三条评论到Excel里，放在桌面就行，名字叫"笔记整理"。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部输入区 -->
|
||||
<div class="border-t border-gray-100 p-4 bg-white">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="relative flex items-end gap-2 bg-gray-50 rounded-2xl border border-gray-200 p-3 focus-within:border-orange-300 focus-within:ring-2 focus-within:ring-orange-100 transition-all">
|
||||
<button class="p-2 text-gray-400 hover:text-gray-600 rounded-lg">
|
||||
<i data-lucide="paperclip" class="w-5 h-5">
|
||||
</i>
|
||||
</button>
|
||||
|
||||
<div class="flex-1 py-2">
|
||||
<input type="text" placeholder="发送给 ZCLAW" class="w-full bg-transparent border-none focus:outline-none text-gray-700 placeholder-gray-400 text-sm">
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 pr-1">
|
||||
<button class="flex items-center gap-1 px-2 py-1.5 text-xs text-gray-500 hover:bg-gray-200 rounded-md transition-colors">
|
||||
<span>qwen3.5-plus</span>
|
||||
<i data-lucide="chevron-down" class="w-3 h-3">
|
||||
</i>
|
||||
</button>
|
||||
|
||||
<button class="w-8 h-8 bg-gray-900 text-white rounded-full flex items-center justify-center hover:bg-gray-800 transition-colors">
|
||||
<i data-lucide="arrow-up" class="w-4 h-4">
|
||||
</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-2 text-xs text-gray-400">
|
||||
Agent 在本地运行，内容由AI生成
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 右侧边栏 -->
|
||||
<aside class="w-80 bg-white border-l border-gray-200 flex flex-col flex-shrink-0 right-panel">
|
||||
<!-- 顶部工具栏 -->
|
||||
<div class="h-14 border-b border-gray-100 flex items-center justify-between px-4 flex-shrink-0">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center gap-1 text-gray-600">
|
||||
<i data-lucide="shopping-cart" class="w-4 h-4">
|
||||
</i>
|
||||
<span class="font-medium">2268</span>
|
||||
</div>
|
||||
<button class="text-xs text-orange-600 hover:underline font-medium">去购买</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button onclick="switchPanel('files')" id="btn-files" class="flex items-center gap-1 text-xs text-gray-900 font-medium bg-gray-100 px-2 py-1.5 rounded-md transition-colors">
|
||||
<i data-lucide="file-text" class="w-4 h-4">
|
||||
</i>
|
||||
<span>文件</span>
|
||||
</button>
|
||||
<button onclick="switchPanel('agent')" id="btn-agent" class="flex items-center gap-1 text-xs text-gray-500 hover:text-gray-700 px-2 py-1.5 rounded-md transition-colors">
|
||||
<i data-lucide="user" class="w-4 h-4">
|
||||
</i>
|
||||
<span>Agent</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 文件列表面板 -->
|
||||
<div id="panel-files" class="flex-1 overflow-y-auto custom-scrollbar p-4 space-y-3">
|
||||
<!-- 文件1 -->
|
||||
<div class="file-item flex items-start gap-3 p-3 rounded-lg cursor-pointer group">
|
||||
<div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center flex-shrink-0 text-orange-600">
|
||||
<i data-lucide="file-archive" class="w-5 h-5">
|
||||
</i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="font-medium text-gray-900 text-sm truncate">openclaw-extension.zip</div>
|
||||
<div class="text-xs text-gray-500 mt-0.5 truncate">$env:TEMP\openclaw-extension.zip</div>
|
||||
</div>
|
||||
<button class="opacity-0 group-hover:opacity-100 text-gray-400 hover:text-gray-600">
|
||||
<i data-lucide="external-link" class="w-4 h-4">
|
||||
</i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 文件2 -->
|
||||
<div class="file-item flex items-start gap-3 p-3 rounded-lg cursor-pointer group">
|
||||
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0 text-blue-600">
|
||||
<i data-lucide="file-text" class="w-5 h-5">
|
||||
</i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="font-medium text-gray-900 text-sm truncate">OpenClaw-技术栈分析.md</div>
|
||||
<div class="text-xs text-gray-500 mt-0.5 flex items-center gap-1">
|
||||
<span class="text-orange-600">#</span>
|
||||
<span>OpenClaw/ZCLAW 技术栈完整分析</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="opacity-0 group-hover:opacity-100 text-gray-400 hover:text-gray-600">
|
||||
<i data-lucide="external-link" class="w-4 h-4">
|
||||
</i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 文件3 -->
|
||||
<div class="file-item flex items-start gap-3 p-3 rounded-lg cursor-pointer group">
|
||||
<div class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0 text-gray-600">
|
||||
<i data-lucide="file-text" class="w-5 h-5">
|
||||
</i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="font-medium text-gray-900 text-sm truncate">Qclaw-ZCLAW 技术栈分析与独立实现方案.md</div>
|
||||
<div class="text-xs text-gray-500 mt-0.5 truncate">$workspace\Qclaw-ZCLAW 技术栈分析与独立实现方...</div>
|
||||
</div>
|
||||
<button class="opacity-0 group-hover:opacity-100 text-gray-400 hover:text-gray-600">
|
||||
<i data-lucide="external-link" class="w-4 h-4">
|
||||
</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Agent信息面板（默认隐藏） -->
|
||||
<div id="panel-agent" class="hidden flex-1 overflow-y-auto custom-scrollbar">
|
||||
<!-- 头部信息 -->
|
||||
<div class="p-6 border-b border-gray-100">
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center text-white text-2xl font-bold">
|
||||
Brow
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-lg text-gray-900">qiqi</h3>
|
||||
<p class="text-sm text-gray-500">AI coworker</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 space-y-6">
|
||||
<!-- 关于我 -->
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-900 mb-3 text-sm">关于我</h4>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between items-center py-2 border-b border-gray-50">
|
||||
<span class="text-gray-500 text-sm">生日</span>
|
||||
<span class="text-gray-400">—</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-start py-2 border-b border-gray-50">
|
||||
<span class="text-gray-500 text-sm">风格</span>
|
||||
<div class="text-right text-sm text-gray-700">
|
||||
<div>sharp</div>
|
||||
<div>resourceful</div>
|
||||
<div>no-nonsense</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center py-2 border-b border-gray-50">
|
||||
<span class="text-gray-500 text-sm">emoji</span>
|
||||
<span class="text-lg">🐙</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 我眼中的你 -->
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<h4 class="font-semibold text-gray-900 text-sm">我眼中的你</h4>
|
||||
<span class="text-xs text-gray-400">我知道得越多，帮得越好</span>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between items-center py-2 border-b border-gray-50">
|
||||
<span class="text-gray-500 text-sm">名字</span>
|
||||
<span class="text-gray-700 text-sm">iven</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center py-2 border-b border-gray-50">
|
||||
<span class="text-gray-500 text-sm">称呼</span>
|
||||
<span class="text-gray-700 text-sm">iven</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center py-2 border-b border-gray-50">
|
||||
<span class="text-gray-500 text-sm">时区</span>
|
||||
<span class="text-gray-700 text-sm">Asia/Shanghai</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-start py-2 border-b border-gray-50">
|
||||
<span class="text-gray-500 text-sm">专注于</span>
|
||||
<div class="flex flex-wrap justify-end gap-1">
|
||||
<span class="tag">marketing</span>
|
||||
<span class="tag">research</span>
|
||||
<span class="tag">coding</span>
|
||||
<span class="tag">writing</span>
|
||||
<span class="tag">product</span>
|
||||
<span class="tag">data</span>
|
||||
<span class="tag">design</span>
|
||||
<span class="tag">ops</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-start py-2 border-b border-gray-50">
|
||||
<span class="text-gray-500 text-sm">备注</span>
|
||||
<div class="text-right text-xs text-gray-600 space-y-1">
|
||||
<div>Name: iven</div>
|
||||
<div>Timezone: Asia/Shanghai</div>
|
||||
<div>Language: 中文</div>
|
||||
<div>首次上线: 2026-03-11</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 我的笔记 -->
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-900 mb-3 text-sm">我的笔记</h4>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between items-start py-2 border-b border-gray-50">
|
||||
<span class="text-gray-500 text-sm">当前项目</span>
|
||||
<span class="text-gray-400 text-sm italic">Current project not recorded yet</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-start py-2 border-b border-gray-50">
|
||||
<span class="text-gray-500 text-sm">工作流</span>
|
||||
<span class="text-gray-600 text-sm">Capture recurring workflows here</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-start py-2 border-b border-gray-50">
|
||||
<span class="text-gray-500 text-sm">记忆系统</span>
|
||||
<span class="text-gray-600 text-sm text-right max-w-[150px]">Summarize stable facts and working patterns</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-start py-2 border-b border-gray-50">
|
||||
<span class="text-gray-500 text-sm">工具链</span>
|
||||
<span class="text-gray-600 text-sm text-right max-w-[180px]">Record important tools, services, and local setup here</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 重要教训 -->
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-900 mb-3 text-sm">重要教训</h4>
|
||||
<div class="space-y-2 text-sm text-gray-600">
|
||||
<div class="flex gap-2">
|
||||
<span class="text-gray-400">1.</span>
|
||||
<span>Confirm before making risky changes</span>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<span class="text-gray-400">2.</span>
|
||||
<span>Persist important facts so they survive the session</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
|
||||
function switchPanel(panel) {
|
||||
const filesPanel = document.getElementById('panel-files');
|
||||
const agentPanel = document.getElementById('panel-agent');
|
||||
const btnFiles = document.getElementById('btn-files');
|
||||
const btnAgent = document.getElementById('btn-agent');
|
||||
|
||||
if (panel === 'files') {
|
||||
filesPanel.classList.remove('hidden');
|
||||
agentPanel.classList.add('hidden');
|
||||
|
||||
btnFiles.classList.add('bg-gray-100', 'text-gray-900');
|
||||
btnFiles.classList.remove('text-gray-500');
|
||||
|
||||
btnAgent.classList.remove('bg-gray-100', 'text-gray-900');
|
||||
btnAgent.classList.add('text-gray-500');
|
||||
} else {
|
||||
filesPanel.classList.add('hidden');
|
||||
agentPanel.classList.remove('hidden');
|
||||
|
||||
btnAgent.classList.add('bg-gray-100', 'text-gray-900');
|
||||
btnAgent.classList.remove('text-gray-500');
|
||||
|
||||
btnFiles.classList.remove('bg-gray-100', 'text-gray-900');
|
||||
btnFiles.classList.add('text-gray-500');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
905
docs/archive/openclaw-legacy/autoclaw界面/html版/4.html
Normal file
905
docs/archive/openclaw-legacy/autoclaw界面/html版/4.html
Normal file
@@ -0,0 +1,905 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>设置 - ZCLAW</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
transition: all 0.2s;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background-color: rgba(0,0,0,0.03);
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background-color: #e5e7eb;
|
||||
color: #111827;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e5e7eb;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.02);
|
||||
}
|
||||
|
||||
.toggle-switch {
|
||||
appearance: none;
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
background: #e5e7eb;
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.toggle-switch::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
transition: transform 0.3s;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.toggle-switch:checked {
|
||||
background: #f97316;
|
||||
}
|
||||
|
||||
.toggle-switch:checked::after {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
.section {
|
||||
display: none;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
.section.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.token-bar {
|
||||
height: 8px;
|
||||
background: #f3f4f6;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.token-fill-input {
|
||||
background: #f97316;
|
||||
height: 100%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.token-fill-output {
|
||||
background: #fed7aa;
|
||||
height: 100%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #e5e7eb;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="h-screen flex overflow-hidden text-gray-800 text-sm">
|
||||
|
||||
<!-- 左侧导航 -->
|
||||
<aside class="w-64 bg-gray-50 border-r border-gray-200 flex flex-col flex-shrink-0">
|
||||
<!-- 返回按钮 -->
|
||||
<div class="p-4 border-b border-gray-200">
|
||||
<button class="flex items-center gap-2 text-gray-500 hover:text-gray-700 transition-colors">
|
||||
<i data-lucide="arrow-left" class="w-4 h-4"></i>
|
||||
<span>返回应用</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 导航菜单 -->
|
||||
<nav class="flex-1 overflow-y-auto custom-scrollbar py-2 px-3 space-y-1">
|
||||
<button onclick="switchSection('general')" class="nav-item active w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left">
|
||||
<i data-lucide="settings" class="w-4 h-4"></i>
|
||||
<span>通用</span>
|
||||
</button>
|
||||
|
||||
<button onclick="switchSection('usage')" class="nav-item w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left">
|
||||
<i data-lucide="bar-chart" class="w-4 h-4"></i>
|
||||
<span>用量统计</span>
|
||||
</button>
|
||||
|
||||
<button onclick="switchSection('credits')" class="nav-item w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left">
|
||||
<i data-lucide="coins" class="w-4 h-4"></i>
|
||||
<span>积分详情</span>
|
||||
</button>
|
||||
|
||||
<button onclick="switchSection('models')" class="nav-item w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left">
|
||||
<i data-lucide="cpu" class="w-4 h-4"></i>
|
||||
<span>模型与 API</span>
|
||||
</button>
|
||||
|
||||
<button onclick="switchSection('mcp')" class="nav-item w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left">
|
||||
<i data-lucide="plug" class="w-4 h-4"></i>
|
||||
<span>MCP 服务</span>
|
||||
</button>
|
||||
|
||||
<button onclick="switchSection('skills')" class="nav-item w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left">
|
||||
<i data-lucide="zap" class="w-4 h-4"></i>
|
||||
<span>技能</span>
|
||||
</button>
|
||||
|
||||
<button onclick="switchSection('im')" class="nav-item w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left">
|
||||
<i data-lucide="message-square" class="w-4 h-4"></i>
|
||||
<span>IM 频道</span>
|
||||
</button>
|
||||
|
||||
<button onclick="switchSection('workspace')" class="nav-item w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left">
|
||||
<i data-lucide="folder" class="w-4 h-4"></i>
|
||||
<span>工作区</span>
|
||||
</button>
|
||||
|
||||
<button onclick="switchSection('privacy')" class="nav-item w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left">
|
||||
<i data-lucide="shield" class="w-4 h-4"></i>
|
||||
<span>数据与隐私</span>
|
||||
</button>
|
||||
|
||||
<button onclick="switchSection('feedback')" class="nav-item w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left">
|
||||
<i data-lucide="help-circle" class="w-4 h-4"></i>
|
||||
<span>提交反馈</span>
|
||||
</button>
|
||||
|
||||
<button onclick="switchSection('about')" class="nav-item w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left">
|
||||
<i data-lucide="info" class="w-4 h-4"></i>
|
||||
<span>关于</span>
|
||||
</button>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="flex-1 overflow-y-auto custom-scrollbar bg-white p-8">
|
||||
|
||||
<!-- 通用设置 -->
|
||||
<div id="general" class="section active max-w-3xl">
|
||||
<h1 class="text-xl font-bold mb-6">账号与安全</h1>
|
||||
|
||||
<div class="card p-6 mb-8">
|
||||
<div class="flex justify-between items-center py-3 border-b border-gray-100">
|
||||
<span class="text-gray-700">手机号</span>
|
||||
<span class="text-gray-500">139****7141</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center py-4">
|
||||
<div>
|
||||
<div class="text-gray-700 mb-1">注销账号</div>
|
||||
<div class="text-xs text-gray-500">注销账号将删除您的账户和所有数据</div>
|
||||
</div>
|
||||
<button class="px-4 py-1.5 border border-red-200 text-red-600 rounded-lg hover:bg-red-50 text-xs">注销</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="text-xl font-bold mb-6">外观与行为</h1>
|
||||
|
||||
<div class="card p-6 space-y-6">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<div class="text-gray-700 mb-1">主题模式</div>
|
||||
<div class="text-xs text-gray-500">选择橙白浅色或 Neon Noir 深色模式。</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="w-8 h-8 rounded-full bg-gradient-to-br from-orange-400 to-orange-600 border-2 border-orange-500 ring-2 ring-orange-200"></button>
|
||||
<button class="w-8 h-8 rounded-full bg-gradient-to-br from-gray-800 to-black border border-gray-600"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center py-3 border-t border-gray-100">
|
||||
<div>
|
||||
<div class="text-gray-700 mb-1">开机自启</div>
|
||||
<div class="text-xs text-gray-500">登录时自动启动 ZCLAW。</div>
|
||||
</div>
|
||||
<input type="checkbox" class="toggle-switch">
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center py-3 border-t border-gray-100">
|
||||
<div>
|
||||
<div class="text-gray-700 mb-1">显示工具调用</div>
|
||||
<div class="text-xs text-gray-500">在对话消息中展示模型的工具调用详情块。</div>
|
||||
</div>
|
||||
<input type="checkbox" class="toggle-switch">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-12 text-center">
|
||||
<button class="text-gray-400 hover:text-gray-600 text-sm">退出登录</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用量统计 -->
|
||||
<div id="usage" class="section max-w-3xl">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h1 class="text-xl font-bold">用量统计</h1>
|
||||
<button class="text-xs text-gray-500 hover:text-gray-700 px-3 py-1.5 border border-gray-200 rounded-lg">刷新</button>
|
||||
</div>
|
||||
|
||||
<div class="text-xs text-gray-500 mb-4">本设备所有已保存对话的 Token 用量汇总。</div>
|
||||
|
||||
<div class="grid grid-cols-3 gap-4 mb-8">
|
||||
<div class="card p-5">
|
||||
<div class="text-2xl font-bold mb-1">4</div>
|
||||
<div class="text-xs text-gray-500">会话数</div>
|
||||
</div>
|
||||
<div class="card p-5">
|
||||
<div class="text-2xl font-bold mb-1">35</div>
|
||||
<div class="text-xs text-gray-500">消息数</div>
|
||||
</div>
|
||||
<div class="card p-5">
|
||||
<div class="text-2xl font-bold mb-1">8.7 M</div>
|
||||
<div class="text-xs text-gray-500">总 Token</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-sm font-semibold mb-4">按模型</h2>
|
||||
|
||||
<div class="card divide-y divide-gray-100">
|
||||
<div class="p-4">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<span class="font-medium">qwen3.5-plus</span>
|
||||
<span class="text-xs text-gray-500">12 条消息</span>
|
||||
</div>
|
||||
<div class="token-bar mb-2">
|
||||
<div class="token-fill-input" style="width: 99%"></div>
|
||||
<div class="token-fill-output" style="width: 1%"></div>
|
||||
</div>
|
||||
<div class="flex justify-between text-xs text-gray-500">
|
||||
<span>输入: 7.6 M</span>
|
||||
<span>输出: ~80.4 k</span>
|
||||
<span>总计: ~7.7 M</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<span class="font-medium">glm-5</span>
|
||||
<span class="text-xs text-gray-500">22 条消息</span>
|
||||
</div>
|
||||
<div class="token-bar mb-2">
|
||||
<div class="token-fill-input" style="width: 90%"></div>
|
||||
<div class="token-fill-output" style="width: 10%"></div>
|
||||
</div>
|
||||
<div class="flex justify-between text-xs text-gray-500">
|
||||
<span>输入: 814.5 k</span>
|
||||
<span>输出: ~97.2 k</span>
|
||||
<span>总计: ~911.6 k</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<span class="font-medium">glm-4.7</span>
|
||||
<span class="text-xs text-gray-500">1 条消息</span>
|
||||
</div>
|
||||
<div class="token-bar mb-2">
|
||||
<div class="token-fill-input" style="width: 95%"></div>
|
||||
<div class="token-fill-output" style="width: 5%"></div>
|
||||
</div>
|
||||
<div class="flex justify-between text-xs text-gray-500">
|
||||
<span>输入: 82.9 k</span>
|
||||
<span>输出: ~3.0 k</span>
|
||||
<span>总计: ~85.9 k</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4 mt-4 text-xs">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-3 h-3 bg-orange-500 rounded"></div>
|
||||
<span class="text-gray-600">输入 Token</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-3 h-3 bg-orange-200 rounded"></div>
|
||||
<span class="text-gray-600">输出 Token</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 积分详情 -->
|
||||
<div id="credits" class="section max-w-3xl">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h1 class="text-xl font-bold">积分</h1>
|
||||
<div class="flex gap-2">
|
||||
<button class="text-xs text-gray-500 hover:text-gray-700 px-3 py-1.5 border border-gray-200 rounded-lg">刷新</button>
|
||||
<button class="text-xs text-white bg-orange-500 hover:bg-orange-600 px-3 py-1.5 rounded-lg">去充值</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mb-8">
|
||||
<div class="text-xs text-gray-500 mb-1">总积分</div>
|
||||
<div class="text-3xl font-bold">2268</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-1 mb-6 flex rounded-lg bg-gray-50">
|
||||
<button class="flex-1 py-2 rounded-md bg-white shadow-sm text-xs font-medium">全部</button>
|
||||
<button class="flex-1 py-2 rounded-md text-xs text-gray-500 hover:text-gray-700">消耗</button>
|
||||
<button class="flex-1 py-2 rounded-md text-xs text-gray-500 hover:text-gray-700">获得</button>
|
||||
</div>
|
||||
|
||||
<div class="card divide-y divide-gray-100">
|
||||
<div class="flex justify-between items-center p-4">
|
||||
<div>
|
||||
<div class="text-sm text-gray-700">ZCLAW网页搜索</div>
|
||||
<div class="text-xs text-gray-500 mt-1">2026年03月11日 12:02:02</div>
|
||||
</div>
|
||||
<div class="text-gray-500 font-medium">-6</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-4">
|
||||
<div>
|
||||
<div class="text-sm text-gray-700">ZCLAW网页搜索</div>
|
||||
<div class="text-xs text-gray-500 mt-1">2026年03月11日 12:01:58</div>
|
||||
</div>
|
||||
<div class="text-gray-500 font-medium">-6</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-4">
|
||||
<div>
|
||||
<div class="text-sm text-gray-700">ZCLAW网页搜索</div>
|
||||
<div class="text-xs text-gray-500 mt-1">2026年03月11日 12:01:46</div>
|
||||
</div>
|
||||
<div class="text-gray-500 font-medium">-6</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-4">
|
||||
<div>
|
||||
<div class="text-sm text-gray-700">ZCLAW网页搜索</div>
|
||||
<div class="text-xs text-gray-500 mt-1">2026年03月11日 12:01:43</div>
|
||||
</div>
|
||||
<div class="text-gray-500 font-medium">-6</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 模型与 API -->
|
||||
<div id="models" class="section max-w-3xl">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h1 class="text-xl font-bold">模型与 API</h1>
|
||||
<button class="text-xs text-gray-500 hover:text-gray-700 px-3 py-1.5 border border-gray-200 rounded-lg">重新连接</button>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xs font-semibold text-gray-500 mb-3 uppercase tracking-wider">内置模型</h3>
|
||||
<div class="card p-4">
|
||||
<span class="text-sm text-gray-700">Pony-Alpha-2</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">自定义模型</h3>
|
||||
<button onclick="openModal('addModelModal')" class="text-xs text-orange-600 hover:underline">添加自定义模型</button>
|
||||
</div>
|
||||
|
||||
<div class="card divide-y divide-gray-100">
|
||||
<div class="flex justify-between items-center p-4">
|
||||
<span class="text-sm">4.7</span>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<button class="text-orange-600 hover:underline">设为默认</button>
|
||||
<button class="text-gray-500 hover:underline">编辑</button>
|
||||
<button class="text-red-500 hover:underline">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-4">
|
||||
<span class="text-sm">glm5</span>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<button class="text-orange-600 hover:underline">设为默认</button>
|
||||
<button class="text-gray-500 hover:underline">编辑</button>
|
||||
<button class="text-red-500 hover:underline">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-4 bg-orange-50/50">
|
||||
<span class="text-sm">qwen3.5-plus</span>
|
||||
<div class="flex gap-2 text-xs items-center">
|
||||
<span class="px-2 py-1 bg-green-100 text-green-700 rounded text-xs">当前选择</span>
|
||||
<button class="text-orange-600 hover:underline">编辑</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-4">
|
||||
<span class="text-sm">kimi-k2.5</span>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<button class="text-orange-600 hover:underline">设为默认</button>
|
||||
<button class="text-gray-500 hover:underline">编辑</button>
|
||||
<button class="text-red-500 hover:underline">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-4">
|
||||
<span class="text-sm">MiniMax-M2.5</span>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<button class="text-orange-600 hover:underline">设为默认</button>
|
||||
<button class="text-gray-500 hover:underline">编辑</button>
|
||||
<button class="text-red-500 hover:underline">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-medium">Gateway URL</span>
|
||||
<span class="px-2 py-0.5 bg-red-50 text-red-600 rounded text-xs border border-red-100">未连接</span>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="text-xs text-gray-500 hover:text-gray-700 px-3 py-1.5 border border-gray-200 rounded-lg">重新连接</button>
|
||||
<button class="text-xs text-white bg-orange-500 hover:bg-orange-600 px-3 py-1.5 rounded-lg">重置连接</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card p-3 text-xs text-gray-600 font-mono bg-gray-50">
|
||||
ws://127.0.0.1:18789
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MCP 服务 -->
|
||||
<div id="mcp" class="section max-w-3xl">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h1 class="text-xl font-bold">MCP 服务</h1>
|
||||
<div class="flex gap-2">
|
||||
<button class="text-xs text-gray-500 hover:text-gray-700 px-3 py-1.5 border border-gray-200 rounded-lg">刷新</button>
|
||||
<button onclick="openModal('addMcpModal')" class="text-xs text-white bg-orange-500 hover:bg-orange-600 px-3 py-1.5 rounded-lg flex items-center gap-1">
|
||||
<i data-lucide="plus" class="w-3 h-3"></i>
|
||||
添加服务
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-xs text-gray-500 mb-6">MCP（模型上下文协议）服务为 Agent 扩展外部工具 — 文件系统、数据库、网页搜索等。</div>
|
||||
|
||||
<div class="card divide-y divide-gray-100 mb-6">
|
||||
<div class="flex justify-between items-center p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<i data-lucide="file-text" class="w-4 h-4 text-gray-500"></i>
|
||||
<span class="text-sm">File System</span>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="text-xs px-3 py-1.5 border border-gray-200 rounded-lg hover:bg-gray-50">停用</button>
|
||||
<button class="text-xs px-3 py-1.5 border border-gray-200 rounded-lg hover:bg-gray-50">设置</button>
|
||||
<button class="text-xs px-3 py-1.5 border border-gray-200 rounded-lg hover:bg-gray-50 text-red-600">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<i data-lucide="globe" class="w-4 h-4 text-gray-500"></i>
|
||||
<span class="text-sm">Web Fetch</span>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="text-xs px-3 py-1.5 border border-gray-200 rounded-lg hover:bg-gray-50">停用</button>
|
||||
<button class="text-xs px-3 py-1.5 border border-gray-200 rounded-lg hover:bg-gray-50">设置</button>
|
||||
<button class="text-xs px-3 py-1.5 border border-gray-200 rounded-lg hover:bg-gray-50 text-red-600">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="text-xs text-gray-500 mb-3">快速添加模版 <span class="text-gray-400 ml-2">一键添加常用 MCP 服务</span></div>
|
||||
<div class="flex gap-3">
|
||||
<button class="text-xs text-white bg-orange-500 hover:bg-orange-600 px-4 py-2 rounded-lg flex items-center gap-1">
|
||||
<i data-lucide="plus" class="w-3 h-3"></i>
|
||||
Brave Search
|
||||
</button>
|
||||
<button class="text-xs text-white bg-orange-500 hover:bg-orange-600 px-4 py-2 rounded-lg flex items-center gap-1">
|
||||
<i data-lucide="plus" class="w-3 h-3"></i>
|
||||
SQLite
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 技能 -->
|
||||
<div id="skills" class="section max-w-3xl">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h1 class="text-xl font-bold">技能</h1>
|
||||
<button class="text-xs text-gray-500 hover:text-gray-700 px-3 py-1.5 border border-gray-200 rounded-lg">刷新</button>
|
||||
</div>
|
||||
|
||||
<div class="card p-4 mb-6 text-center text-sm text-gray-500 bg-gray-50/50">
|
||||
Gateway 未连接。请先连接 Gateway 再管理技能。
|
||||
</div>
|
||||
|
||||
<div class="card p-6 mb-6">
|
||||
<h3 class="font-medium mb-2">额外技能目录</h3>
|
||||
<p class="text-xs text-gray-500 mb-4">包含 SKILL.md 文件的额外目录。保存到 Gateway 配置的 skills.load.extraDirs 中。</p>
|
||||
<div class="flex gap-2">
|
||||
<input type="text" value="~/.opencode/skills" class="flex-1 px-3 py-2 border border-gray-200 rounded-lg text-sm bg-gray-50">
|
||||
<button class="text-xs text-gray-400 px-4 py-2">添加</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 mb-6">
|
||||
<button class="px-4 py-1.5 bg-orange-500 text-white rounded-full text-xs font-medium">全部 (0)</button>
|
||||
<button class="px-4 py-1.5 bg-gray-100 text-gray-600 rounded-full text-xs hover:bg-gray-200">可用 (0)</button>
|
||||
<button class="px-4 py-1.5 bg-gray-100 text-gray-600 rounded-full text-xs hover:bg-gray-200">已安装 (0)</button>
|
||||
</div>
|
||||
|
||||
<div class="card p-12 text-center text-gray-500">
|
||||
<p class="text-sm mb-2">尚未发现任何技能。</p>
|
||||
<p class="text-xs">连接 Gateway 后即可查看可用技能。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- IM 频道 -->
|
||||
<div id="im" class="section max-w-3xl">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h1 class="text-xl font-bold">IM 频道</h1>
|
||||
<div class="flex gap-2">
|
||||
<span class="text-xs text-gray-400 flex items-center">加载中...</span>
|
||||
<button class="text-xs text-white bg-orange-500 hover:bg-orange-600 px-3 py-1.5 rounded-lg flex items-center gap-1">
|
||||
<i data-lucide="plus" class="w-3 h-3"></i>
|
||||
添加频道
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card h-64 flex items-center justify-center mb-6">
|
||||
<span class="text-gray-500 text-sm">加载中...</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="text-xs text-gray-500 mb-3">快速添加</div>
|
||||
<button class="text-xs text-white bg-orange-500 hover:bg-orange-600 px-4 py-2 rounded-lg flex items-center gap-1">
|
||||
<i data-lucide="plus" class="w-3 h-3"></i>
|
||||
飞书
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 工作区 -->
|
||||
<div id="workspace" class="section max-w-3xl">
|
||||
<h1 class="text-xl font-bold mb-2">工作区</h1>
|
||||
<div class="text-xs text-gray-500 mb-6">配置本地项目目录与上下文持久化行为。</div>
|
||||
|
||||
<div class="card p-6 mb-6">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">默认项目目录</label>
|
||||
<div class="text-xs text-gray-500 mb-3">ZCLAW 项目和上下文文件的保存位置。</div>
|
||||
<div class="flex gap-2">
|
||||
<input type="text" value="~/.openclaw-ZCLAW/workspace" class="flex-1 px-3 py-2 border border-gray-200 rounded-lg text-sm bg-gray-50">
|
||||
<button class="text-xs px-4 py-2 border border-gray-200 rounded-lg hover:bg-gray-50">浏览</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 space-y-6">
|
||||
<div class="flex justify-between items-start">
|
||||
<div class="flex-1 pr-4">
|
||||
<div class="font-medium text-gray-900 mb-1">限制文件访问范围</div>
|
||||
<div class="text-xs text-gray-500 leading-relaxed">
|
||||
开启后，Agent 的工作空间将限制在工作目录内。关闭后可访问更大范围，可能导致误操作。无论开关状态，均建议提前备份重要文件。请注意：受技术限制，我们无法保证完全阻止目录外执行或由此带来的外部影响；请自行评估风险并谨慎使用。
|
||||
</div>
|
||||
</div>
|
||||
<input type="checkbox" class="toggle-switch mt-1" checked>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center py-3 border-t border-gray-100">
|
||||
<div>
|
||||
<div class="font-medium text-gray-900 mb-1">自动保存上下文</div>
|
||||
<div class="text-xs text-gray-500">自动将聊天记录和提取的产物保存到本地工作区文件夹。</div>
|
||||
</div>
|
||||
<input type="checkbox" class="toggle-switch" checked>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center py-3 border-t border-gray-100">
|
||||
<div>
|
||||
<div class="font-medium text-gray-900 mb-1">文件监听</div>
|
||||
<div class="text-xs text-gray-500">监听本地文件变更，实时更新 Agent 上下文。</div>
|
||||
</div>
|
||||
<input type="checkbox" class="toggle-switch" checked>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center py-3 border-t border-gray-100">
|
||||
<div>
|
||||
<div class="font-medium text-gray-900 mb-1">从 OpenClaw 迁移</div>
|
||||
<div class="text-xs text-gray-500">将 OpenClaw 的配置、对话记录、技能等数据迁移到 ZCLAW</div>
|
||||
</div>
|
||||
<button class="text-xs px-4 py-2 border border-gray-200 rounded-lg hover:bg-gray-50">开始迁移</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据与隐私 -->
|
||||
<div id="privacy" class="section max-w-3xl">
|
||||
<h1 class="text-xl font-bold mb-2">数据与隐私</h1>
|
||||
<div class="text-xs text-gray-500 mb-6">查看数据存储位置与 ZCLAW 的网络出站范围。</div>
|
||||
|
||||
<div class="card p-6 mb-6">
|
||||
<h3 class="font-medium mb-2">本地数据路径</h3>
|
||||
<div class="text-xs text-gray-500 mb-3">所有工作区文件、对话记录和 Agent 输出均存储在此本地目录。</div>
|
||||
<div class="p-3 bg-gray-50 border border-gray-200 rounded-lg text-xs text-gray-600 font-mono">
|
||||
~/.openclaw-ZCLAW/workspace
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 mb-6">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<h3 class="font-medium">优化计划</h3>
|
||||
<input type="checkbox" class="toggle-switch mt-1">
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 leading-relaxed">
|
||||
我们诚邀您加入优化提升计划，您的加入会帮助我们更好地迭代产品：在去标识化处理后，我们可能将您输入与生成的信息以及屏幕操作信息用于模型的训练与优化。我们尊重您的个人信息主体权益，您有权选择不允许我们将您的信息用于此目的。您也可以在后续使用中的任何时候通过"设置"中的开启或关闭按钮选择加入或退出优化计划。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card p-6">
|
||||
<h3 class="font-medium mb-4">备案信息</h3>
|
||||
<div class="space-y-3 text-xs">
|
||||
<div class="flex">
|
||||
<span class="text-gray-500 w-28 flex-shrink-0">ICP 备案/许可证号</span>
|
||||
<span class="text-gray-700">京 ICP 备 20011824 号 -21</span>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<span class="text-gray-500 w-28 flex-shrink-0">算法备案</span>
|
||||
<div class="space-y-1 text-gray-700">
|
||||
<div>智谱 ChatGLM 生成算法（网信算备 110108105858001230019 号）</div>
|
||||
<div>智谱 ChatGLM 搜索算法（网信算备 110108105858004240011 号）</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<span class="text-gray-500 w-28 flex-shrink-0">大模型备案登记</span>
|
||||
<span class="text-gray-700">Beijing-AutoGLM-2025060650053</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4 mt-6 pt-4 border-t border-gray-100">
|
||||
<a href="#" class="text-orange-600 text-xs hover:underline flex items-center gap-1">
|
||||
<i data-lucide="external-link" class="w-3 h-3"></i>
|
||||
隐私政策
|
||||
</a>
|
||||
<a href="#" class="text-orange-600 text-xs hover:underline flex items-center gap-1">
|
||||
<i data-lucide="external-link" class="w-3 h-3"></i>
|
||||
用户协议
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 提交反馈 -->
|
||||
<div id="feedback" class="section max-w-3xl">
|
||||
<h1 class="text-xl font-bold mb-2">提交反馈</h1>
|
||||
<div class="text-xs text-gray-500 mb-6">请描述你遇到的问题或建议。默认会附带本地日志，便于快速定位问题。</div>
|
||||
|
||||
<div class="card p-2">
|
||||
<textarea
|
||||
class="w-full h-48 p-4 bg-transparent border-none resize-none focus:outline-none text-sm text-gray-700 placeholder-gray-400"
|
||||
placeholder="请尽量详细描述复现步骤、期望结果和实际结果"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<button class="px-6 py-2 bg-gray-100 text-gray-400 rounded-lg text-sm cursor-not-allowed" disabled>提交</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 关于 -->
|
||||
<div id="about" class="section max-w-3xl">
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<div class="w-16 h-16 bg-black rounded-2xl flex items-center justify-center text-white">
|
||||
<i data-lucide="cat" class="w-10 h-10"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-xl font-bold text-gray-900">ZCLAW</h1>
|
||||
<div class="text-sm text-gray-500">版本 0.2.12</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="card p-4 flex justify-between items-center">
|
||||
<span class="text-sm text-gray-700">检查更新</span>
|
||||
<button class="text-xs text-white bg-orange-500 hover:bg-orange-600 px-4 py-2 rounded-lg flex items-center gap-1">
|
||||
<i data-lucide="refresh-cw" class="w-3 h-3"></i>
|
||||
检查更新
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="card p-4 flex justify-between items-center">
|
||||
<div>
|
||||
<div class="text-sm text-gray-700 mb-1">更新日志</div>
|
||||
<div class="text-xs text-gray-500">查看当前版本的更新内容</div>
|
||||
</div>
|
||||
<button class="text-xs px-4 py-2 border border-gray-200 rounded-lg hover:bg-gray-50">更新日志</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-12 text-center text-xs text-gray-400">
|
||||
© 2026 ZhipuAI | by AutoGLM
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- 添加模型弹窗 -->
|
||||
<div id="addModelModal" class="fixed inset-0 z-50 hidden">
|
||||
<div class="modal-overlay absolute inset-0" onclick="closeModal('addModelModal')"></div>
|
||||
<div class="absolute inset-0 flex items-center justify-center p-4 pointer-events-none">
|
||||
<div class="bg-white rounded-2xl shadow-2xl w-full max-w-md pointer-events-auto max-h-[90vh] overflow-y-auto custom-scrollbar">
|
||||
<div class="sticky top-0 bg-white border-b border-gray-100 p-6 flex justify-between items-center z-10">
|
||||
<h3 class="text-lg font-bold">添加模型</h3>
|
||||
<button onclick="closeModal('addModelModal')" class="text-gray-400 hover:text-gray-600">
|
||||
<i data-lucide="x" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="p-6 space-y-4">
|
||||
<div class="bg-yellow-50 border border-yellow-100 rounded-lg p-3 text-xs text-yellow-800 flex items-start gap-2">
|
||||
<i data-lucide="alert-circle" class="w-4 h-4 flex-shrink-0 mt-0.5"></i>
|
||||
<span>添加外部模型即表示你理解并同意自行承担使用风险。</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">* 服务商</label>
|
||||
<select class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500">
|
||||
<option>智谱 (ZhipuAI)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">* 模型 ID</label>
|
||||
<input type="text" placeholder="请选择模型" class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">显示名称</label>
|
||||
<input type="text" placeholder="请填写显示名称" class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">智谱 API Key</label>
|
||||
<div class="relative">
|
||||
<input type="password" placeholder="请填写 API Key（可选）" class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 pr-10">
|
||||
<button class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400">
|
||||
<i data-lucide="eye" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">API 协议</label>
|
||||
<select class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500">
|
||||
<option>OpenAI</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Base URL</label>
|
||||
<input type="text" value="https://open.bigmodel.cn/api/paas/v4" class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sticky bottom-0 bg-white border-t border-gray-100 p-6 flex justify-end gap-3">
|
||||
<button onclick="closeModal('addModelModal')" class="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg text-sm">取消</button>
|
||||
<button class="px-4 py-2 bg-orange-500 text-white rounded-lg text-sm hover:bg-orange-600">添加</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 添加 MCP Server 弹窗 -->
|
||||
<div id="addMcpModal" class="fixed inset-0 z-50 hidden">
|
||||
<div class="modal-overlay absolute inset-0" onclick="closeModal('addMcpModal')"></div>
|
||||
<div class="absolute inset-0 flex items-center justify-center p-4 pointer-events-none">
|
||||
<div class="bg-white rounded-2xl shadow-2xl w-full max-w-md pointer-events-auto max-h-[90vh] overflow-y-auto custom-scrollbar">
|
||||
<div class="sticky top-0 bg-white border-b border-gray-100 p-6 flex justify-between items-center z-10">
|
||||
<h3 class="text-lg font-bold">添加 MCP Server</h3>
|
||||
<button onclick="closeModal('addMcpModal')" class="text-gray-400 hover:text-gray-600">
|
||||
<i data-lucide="x" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="p-6 space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">* Server 名称</label>
|
||||
<input type="text" placeholder="例如：filesystem" class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">连接方式</label>
|
||||
<select class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500">
|
||||
<option>本地进程 (stdio)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">* 命令</label>
|
||||
<input type="text" placeholder="例如：npx、uvx、node" class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">参数（空格分隔）</label>
|
||||
<input type="text" placeholder="例如：-y @modelcontextprotocol/server-filesystem /Users/me/De..." class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">环境变量（每行 KEY=VALUE）</label>
|
||||
<textarea placeholder="BRAVE_API_KEY=xxx NODE_ENV=production" class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 h-24 resize-none"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sticky bottom-0 bg-white border-t border-gray-100 p-6 flex justify-end gap-3">
|
||||
<button onclick="closeModal('addMcpModal')" class="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg text-sm">取消</button>
|
||||
<button class="px-4 py-2 bg-orange-500 text-white rounded-lg text-sm hover:bg-orange-600">添加</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
|
||||
function switchSection(sectionId) {
|
||||
// 隐藏所有section
|
||||
document.querySelectorAll('.section').forEach(el => {
|
||||
el.classList.remove('active');
|
||||
});
|
||||
|
||||
// 显示目标section
|
||||
document.getElementById(sectionId).classList.add('active');
|
||||
|
||||
// 更新导航状态
|
||||
document.querySelectorAll('.nav-item').forEach(el => {
|
||||
el.classList.remove('active');
|
||||
});
|
||||
|
||||
// 找到对应的nav按钮并激活
|
||||
const navButtons = document.querySelectorAll('.nav-item');
|
||||
navButtons.forEach(btn => {
|
||||
if (btn.getAttribute('onclick').includes(sectionId)) {
|
||||
btn.classList.add('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function openModal(modalId) {
|
||||
document.getElementById(modalId).classList.remove('hidden');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeModal(modalId) {
|
||||
document.getElementById(modalId).classList.add('hidden');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
// ESC键关闭弹窗
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape') {
|
||||
closeModal('addModelModal');
|
||||
closeModal('addMcpModal');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
949
docs/archive/openclaw-legacy/autoclaw界面/html版/4_formatted.html
Normal file
949
docs/archive/openclaw-legacy/autoclaw界面/html版/4_formatted.html
Normal file
@@ -0,0 +1,949 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>设置 - ZCLAW</title>
|
||||
<script src="https://cdn.tailwindcss.com">
|
||||
</script>
|
||||
<script src="https://unpkg.com/lucide@latest">
|
||||
</script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
transition: all 0.2s;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background-color: rgba(0,0,0,0.03);
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background-color: #e5e7eb;
|
||||
color: #111827;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e5e7eb;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.02);
|
||||
}
|
||||
|
||||
.toggle-switch {
|
||||
appearance: none;
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
background: #e5e7eb;
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.toggle-switch::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
transition: transform 0.3s;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.toggle-switch:checked {
|
||||
background: #f97316;
|
||||
}
|
||||
|
||||
.toggle-switch:checked::after {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
.section {
|
||||
display: none;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
.section.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.token-bar {
|
||||
height: 8px;
|
||||
background: #f3f4f6;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.token-fill-input {
|
||||
background: #f97316;
|
||||
height: 100%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.token-fill-output {
|
||||
background: #fed7aa;
|
||||
height: 100%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #e5e7eb;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="h-screen flex overflow-hidden text-gray-800 text-sm">
|
||||
|
||||
<!-- 左侧导航 -->
|
||||
<aside class="w-64 bg-gray-50 border-r border-gray-200 flex flex-col flex-shrink-0">
|
||||
<!-- 返回按钮 -->
|
||||
<div class="p-4 border-b border-gray-200">
|
||||
<button class="flex items-center gap-2 text-gray-500 hover:text-gray-700 transition-colors">
|
||||
<i data-lucide="arrow-left" class="w-4 h-4">
|
||||
</i>
|
||||
<span>返回应用</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 导航菜单 -->
|
||||
<nav class="flex-1 overflow-y-auto custom-scrollbar py-2 px-3 space-y-1">
|
||||
<button onclick="switchSection('general')" class="nav-item active w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left">
|
||||
<i data-lucide="settings" class="w-4 h-4">
|
||||
</i>
|
||||
<span>通用</span>
|
||||
</button>
|
||||
|
||||
<button onclick="switchSection('usage')" class="nav-item w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left">
|
||||
<i data-lucide="bar-chart" class="w-4 h-4">
|
||||
</i>
|
||||
<span>用量统计</span>
|
||||
</button>
|
||||
|
||||
<button onclick="switchSection('credits')" class="nav-item w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left">
|
||||
<i data-lucide="coins" class="w-4 h-4">
|
||||
</i>
|
||||
<span>积分详情</span>
|
||||
</button>
|
||||
|
||||
<button onclick="switchSection('models')" class="nav-item w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left">
|
||||
<i data-lucide="cpu" class="w-4 h-4">
|
||||
</i>
|
||||
<span>模型与 API</span>
|
||||
</button>
|
||||
|
||||
<button onclick="switchSection('mcp')" class="nav-item w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left">
|
||||
<i data-lucide="plug" class="w-4 h-4">
|
||||
</i>
|
||||
<span>MCP 服务</span>
|
||||
</button>
|
||||
|
||||
<button onclick="switchSection('skills')" class="nav-item w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left">
|
||||
<i data-lucide="zap" class="w-4 h-4">
|
||||
</i>
|
||||
<span>技能</span>
|
||||
</button>
|
||||
|
||||
<button onclick="switchSection('im')" class="nav-item w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left">
|
||||
<i data-lucide="message-square" class="w-4 h-4">
|
||||
</i>
|
||||
<span>IM 频道</span>
|
||||
</button>
|
||||
|
||||
<button onclick="switchSection('workspace')" class="nav-item w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left">
|
||||
<i data-lucide="folder" class="w-4 h-4">
|
||||
</i>
|
||||
<span>工作区</span>
|
||||
</button>
|
||||
|
||||
<button onclick="switchSection('privacy')" class="nav-item w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left">
|
||||
<i data-lucide="shield" class="w-4 h-4">
|
||||
</i>
|
||||
<span>数据与隐私</span>
|
||||
</button>
|
||||
|
||||
<button onclick="switchSection('feedback')" class="nav-item w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left">
|
||||
<i data-lucide="help-circle" class="w-4 h-4">
|
||||
</i>
|
||||
<span>提交反馈</span>
|
||||
</button>
|
||||
|
||||
<button onclick="switchSection('about')" class="nav-item w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left">
|
||||
<i data-lucide="info" class="w-4 h-4">
|
||||
</i>
|
||||
<span>关于</span>
|
||||
</button>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="flex-1 overflow-y-auto custom-scrollbar bg-white p-8">
|
||||
|
||||
<!-- 通用设置 -->
|
||||
<div id="general" class="section active max-w-3xl">
|
||||
<h1 class="text-xl font-bold mb-6">账号与安全</h1>
|
||||
|
||||
<div class="card p-6 mb-8">
|
||||
<div class="flex justify-between items-center py-3 border-b border-gray-100">
|
||||
<span class="text-gray-700">手机号</span>
|
||||
<span class="text-gray-500">139****7141</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center py-4">
|
||||
<div>
|
||||
<div class="text-gray-700 mb-1">注销账号</div>
|
||||
<div class="text-xs text-gray-500">注销账号将删除您的账户和所有数据</div>
|
||||
</div>
|
||||
<button class="px-4 py-1.5 border border-red-200 text-red-600 rounded-lg hover:bg-red-50 text-xs">注销</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="text-xl font-bold mb-6">外观与行为</h1>
|
||||
|
||||
<div class="card p-6 space-y-6">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<div class="text-gray-700 mb-1">主题模式</div>
|
||||
<div class="text-xs text-gray-500">选择橙白浅色或 Neon Noir 深色模式。</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="w-8 h-8 rounded-full bg-gradient-to-br from-orange-400 to-orange-600 border-2 border-orange-500 ring-2 ring-orange-200">
|
||||
</button>
|
||||
<button class="w-8 h-8 rounded-full bg-gradient-to-br from-gray-800 to-black border border-gray-600">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center py-3 border-t border-gray-100">
|
||||
<div>
|
||||
<div class="text-gray-700 mb-1">开机自启</div>
|
||||
<div class="text-xs text-gray-500">登录时自动启动 ZCLAW。</div>
|
||||
</div>
|
||||
<input type="checkbox" class="toggle-switch">
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center py-3 border-t border-gray-100">
|
||||
<div>
|
||||
<div class="text-gray-700 mb-1">显示工具调用</div>
|
||||
<div class="text-xs text-gray-500">在对话消息中展示模型的工具调用详情块。</div>
|
||||
</div>
|
||||
<input type="checkbox" class="toggle-switch">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-12 text-center">
|
||||
<button class="text-gray-400 hover:text-gray-600 text-sm">退出登录</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用量统计 -->
|
||||
<div id="usage" class="section max-w-3xl">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h1 class="text-xl font-bold">用量统计</h1>
|
||||
<button class="text-xs text-gray-500 hover:text-gray-700 px-3 py-1.5 border border-gray-200 rounded-lg">刷新</button>
|
||||
</div>
|
||||
|
||||
<div class="text-xs text-gray-500 mb-4">本设备所有已保存对话的 Token 用量汇总。</div>
|
||||
|
||||
<div class="grid grid-cols-3 gap-4 mb-8">
|
||||
<div class="card p-5">
|
||||
<div class="text-2xl font-bold mb-1">4</div>
|
||||
<div class="text-xs text-gray-500">会话数</div>
|
||||
</div>
|
||||
<div class="card p-5">
|
||||
<div class="text-2xl font-bold mb-1">35</div>
|
||||
<div class="text-xs text-gray-500">消息数</div>
|
||||
</div>
|
||||
<div class="card p-5">
|
||||
<div class="text-2xl font-bold mb-1">8.7 M</div>
|
||||
<div class="text-xs text-gray-500">总 Token</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-sm font-semibold mb-4">按模型</h2>
|
||||
|
||||
<div class="card divide-y divide-gray-100">
|
||||
<div class="p-4">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<span class="font-medium">qwen3.5-plus</span>
|
||||
<span class="text-xs text-gray-500">12 条消息</span>
|
||||
</div>
|
||||
<div class="token-bar mb-2">
|
||||
<div class="token-fill-input" style="width: 99%">
|
||||
</div>
|
||||
<div class="token-fill-output" style="width: 1%">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between text-xs text-gray-500">
|
||||
<span>输入: 7.6 M</span>
|
||||
<span>输出: ~80.4 k</span>
|
||||
<span>总计: ~7.7 M</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<span class="font-medium">glm-5</span>
|
||||
<span class="text-xs text-gray-500">22 条消息</span>
|
||||
</div>
|
||||
<div class="token-bar mb-2">
|
||||
<div class="token-fill-input" style="width: 90%">
|
||||
</div>
|
||||
<div class="token-fill-output" style="width: 10%">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between text-xs text-gray-500">
|
||||
<span>输入: 814.5 k</span>
|
||||
<span>输出: ~97.2 k</span>
|
||||
<span>总计: ~911.6 k</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<span class="font-medium">glm-4.7</span>
|
||||
<span class="text-xs text-gray-500">1 条消息</span>
|
||||
</div>
|
||||
<div class="token-bar mb-2">
|
||||
<div class="token-fill-input" style="width: 95%">
|
||||
</div>
|
||||
<div class="token-fill-output" style="width: 5%">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between text-xs text-gray-500">
|
||||
<span>输入: 82.9 k</span>
|
||||
<span>输出: ~3.0 k</span>
|
||||
<span>总计: ~85.9 k</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4 mt-4 text-xs">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-3 h-3 bg-orange-500 rounded">
|
||||
</div>
|
||||
<span class="text-gray-600">输入 Token</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-3 h-3 bg-orange-200 rounded">
|
||||
</div>
|
||||
<span class="text-gray-600">输出 Token</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 积分详情 -->
|
||||
<div id="credits" class="section max-w-3xl">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h1 class="text-xl font-bold">积分</h1>
|
||||
<div class="flex gap-2">
|
||||
<button class="text-xs text-gray-500 hover:text-gray-700 px-3 py-1.5 border border-gray-200 rounded-lg">刷新</button>
|
||||
<button class="text-xs text-white bg-orange-500 hover:bg-orange-600 px-3 py-1.5 rounded-lg">去充值</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mb-8">
|
||||
<div class="text-xs text-gray-500 mb-1">总积分</div>
|
||||
<div class="text-3xl font-bold">2268</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-1 mb-6 flex rounded-lg bg-gray-50">
|
||||
<button class="flex-1 py-2 rounded-md bg-white shadow-sm text-xs font-medium">全部</button>
|
||||
<button class="flex-1 py-2 rounded-md text-xs text-gray-500 hover:text-gray-700">消耗</button>
|
||||
<button class="flex-1 py-2 rounded-md text-xs text-gray-500 hover:text-gray-700">获得</button>
|
||||
</div>
|
||||
|
||||
<div class="card divide-y divide-gray-100">
|
||||
<div class="flex justify-between items-center p-4">
|
||||
<div>
|
||||
<div class="text-sm text-gray-700">ZCLAW网页搜索</div>
|
||||
<div class="text-xs text-gray-500 mt-1">2026年03月11日 12:02:02</div>
|
||||
</div>
|
||||
<div class="text-gray-500 font-medium">-6</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-4">
|
||||
<div>
|
||||
<div class="text-sm text-gray-700">ZCLAW网页搜索</div>
|
||||
<div class="text-xs text-gray-500 mt-1">2026年03月11日 12:01:58</div>
|
||||
</div>
|
||||
<div class="text-gray-500 font-medium">-6</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-4">
|
||||
<div>
|
||||
<div class="text-sm text-gray-700">ZCLAW网页搜索</div>
|
||||
<div class="text-xs text-gray-500 mt-1">2026年03月11日 12:01:46</div>
|
||||
</div>
|
||||
<div class="text-gray-500 font-medium">-6</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-4">
|
||||
<div>
|
||||
<div class="text-sm text-gray-700">ZCLAW网页搜索</div>
|
||||
<div class="text-xs text-gray-500 mt-1">2026年03月11日 12:01:43</div>
|
||||
</div>
|
||||
<div class="text-gray-500 font-medium">-6</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 模型与 API -->
|
||||
<div id="models" class="section max-w-3xl">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h1 class="text-xl font-bold">模型与 API</h1>
|
||||
<button class="text-xs text-gray-500 hover:text-gray-700 px-3 py-1.5 border border-gray-200 rounded-lg">重新连接</button>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xs font-semibold text-gray-500 mb-3 uppercase tracking-wider">内置模型</h3>
|
||||
<div class="card p-4">
|
||||
<span class="text-sm text-gray-700">Pony-Alpha-2</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">自定义模型</h3>
|
||||
<button onclick="openModal('addModelModal')" class="text-xs text-orange-600 hover:underline">添加自定义模型</button>
|
||||
</div>
|
||||
|
||||
<div class="card divide-y divide-gray-100">
|
||||
<div class="flex justify-between items-center p-4">
|
||||
<span class="text-sm">4.7</span>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<button class="text-orange-600 hover:underline">设为默认</button>
|
||||
<button class="text-gray-500 hover:underline">编辑</button>
|
||||
<button class="text-red-500 hover:underline">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-4">
|
||||
<span class="text-sm">glm5</span>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<button class="text-orange-600 hover:underline">设为默认</button>
|
||||
<button class="text-gray-500 hover:underline">编辑</button>
|
||||
<button class="text-red-500 hover:underline">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-4 bg-orange-50/50">
|
||||
<span class="text-sm">qwen3.5-plus</span>
|
||||
<div class="flex gap-2 text-xs items-center">
|
||||
<span class="px-2 py-1 bg-green-100 text-green-700 rounded text-xs">当前选择</span>
|
||||
<button class="text-orange-600 hover:underline">编辑</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-4">
|
||||
<span class="text-sm">kimi-k2.5</span>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<button class="text-orange-600 hover:underline">设为默认</button>
|
||||
<button class="text-gray-500 hover:underline">编辑</button>
|
||||
<button class="text-red-500 hover:underline">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-4">
|
||||
<span class="text-sm">MiniMax-M2.5</span>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<button class="text-orange-600 hover:underline">设为默认</button>
|
||||
<button class="text-gray-500 hover:underline">编辑</button>
|
||||
<button class="text-red-500 hover:underline">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-medium">Gateway URL</span>
|
||||
<span class="px-2 py-0.5 bg-red-50 text-red-600 rounded text-xs border border-red-100">未连接</span>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="text-xs text-gray-500 hover:text-gray-700 px-3 py-1.5 border border-gray-200 rounded-lg">重新连接</button>
|
||||
<button class="text-xs text-white bg-orange-500 hover:bg-orange-600 px-3 py-1.5 rounded-lg">重置连接</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card p-3 text-xs text-gray-600 font-mono bg-gray-50">
|
||||
ws://127.0.0.1:18789
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MCP 服务 -->
|
||||
<div id="mcp" class="section max-w-3xl">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h1 class="text-xl font-bold">MCP 服务</h1>
|
||||
<div class="flex gap-2">
|
||||
<button class="text-xs text-gray-500 hover:text-gray-700 px-3 py-1.5 border border-gray-200 rounded-lg">刷新</button>
|
||||
<button onclick="openModal('addMcpModal')" class="text-xs text-white bg-orange-500 hover:bg-orange-600 px-3 py-1.5 rounded-lg flex items-center gap-1">
|
||||
<i data-lucide="plus" class="w-3 h-3">
|
||||
</i>
|
||||
添加服务
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-xs text-gray-500 mb-6">MCP（模型上下文协议）服务为 Agent 扩展外部工具 — 文件系统、数据库、网页搜索等。</div>
|
||||
|
||||
<div class="card divide-y divide-gray-100 mb-6">
|
||||
<div class="flex justify-between items-center p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<i data-lucide="file-text" class="w-4 h-4 text-gray-500">
|
||||
</i>
|
||||
<span class="text-sm">File System</span>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="text-xs px-3 py-1.5 border border-gray-200 rounded-lg hover:bg-gray-50">停用</button>
|
||||
<button class="text-xs px-3 py-1.5 border border-gray-200 rounded-lg hover:bg-gray-50">设置</button>
|
||||
<button class="text-xs px-3 py-1.5 border border-gray-200 rounded-lg hover:bg-gray-50 text-red-600">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<i data-lucide="globe" class="w-4 h-4 text-gray-500">
|
||||
</i>
|
||||
<span class="text-sm">Web Fetch</span>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="text-xs px-3 py-1.5 border border-gray-200 rounded-lg hover:bg-gray-50">停用</button>
|
||||
<button class="text-xs px-3 py-1.5 border border-gray-200 rounded-lg hover:bg-gray-50">设置</button>
|
||||
<button class="text-xs px-3 py-1.5 border border-gray-200 rounded-lg hover:bg-gray-50 text-red-600">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="text-xs text-gray-500 mb-3">快速添加模版 <span class="text-gray-400 ml-2">一键添加常用 MCP 服务</span>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="text-xs text-white bg-orange-500 hover:bg-orange-600 px-4 py-2 rounded-lg flex items-center gap-1">
|
||||
<i data-lucide="plus" class="w-3 h-3">
|
||||
</i>
|
||||
Brave Search
|
||||
</button>
|
||||
<button class="text-xs text-white bg-orange-500 hover:bg-orange-600 px-4 py-2 rounded-lg flex items-center gap-1">
|
||||
<i data-lucide="plus" class="w-3 h-3">
|
||||
</i>
|
||||
SQLite
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 技能 -->
|
||||
<div id="skills" class="section max-w-3xl">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h1 class="text-xl font-bold">技能</h1>
|
||||
<button class="text-xs text-gray-500 hover:text-gray-700 px-3 py-1.5 border border-gray-200 rounded-lg">刷新</button>
|
||||
</div>
|
||||
|
||||
<div class="card p-4 mb-6 text-center text-sm text-gray-500 bg-gray-50/50">
|
||||
Gateway 未连接。请先连接 Gateway 再管理技能。
|
||||
</div>
|
||||
|
||||
<div class="card p-6 mb-6">
|
||||
<h3 class="font-medium mb-2">额外技能目录</h3>
|
||||
<p class="text-xs text-gray-500 mb-4">包含 SKILL.md 文件的额外目录。保存到 Gateway 配置的 skills.load.extraDirs 中。</p>
|
||||
<div class="flex gap-2">
|
||||
<input type="text" value="~/.opencode/skills" class="flex-1 px-3 py-2 border border-gray-200 rounded-lg text-sm bg-gray-50">
|
||||
<button class="text-xs text-gray-400 px-4 py-2">添加</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 mb-6">
|
||||
<button class="px-4 py-1.5 bg-orange-500 text-white rounded-full text-xs font-medium">全部 (0)</button>
|
||||
<button class="px-4 py-1.5 bg-gray-100 text-gray-600 rounded-full text-xs hover:bg-gray-200">可用 (0)</button>
|
||||
<button class="px-4 py-1.5 bg-gray-100 text-gray-600 rounded-full text-xs hover:bg-gray-200">已安装 (0)</button>
|
||||
</div>
|
||||
|
||||
<div class="card p-12 text-center text-gray-500">
|
||||
<p class="text-sm mb-2">尚未发现任何技能。</p>
|
||||
<p class="text-xs">连接 Gateway 后即可查看可用技能。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- IM 频道 -->
|
||||
<div id="im" class="section max-w-3xl">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h1 class="text-xl font-bold">IM 频道</h1>
|
||||
<div class="flex gap-2">
|
||||
<span class="text-xs text-gray-400 flex items-center">加载中...</span>
|
||||
<button class="text-xs text-white bg-orange-500 hover:bg-orange-600 px-3 py-1.5 rounded-lg flex items-center gap-1">
|
||||
<i data-lucide="plus" class="w-3 h-3">
|
||||
</i>
|
||||
添加频道
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card h-64 flex items-center justify-center mb-6">
|
||||
<span class="text-gray-500 text-sm">加载中...</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="text-xs text-gray-500 mb-3">快速添加</div>
|
||||
<button class="text-xs text-white bg-orange-500 hover:bg-orange-600 px-4 py-2 rounded-lg flex items-center gap-1">
|
||||
<i data-lucide="plus" class="w-3 h-3">
|
||||
</i>
|
||||
飞书
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 工作区 -->
|
||||
<div id="workspace" class="section max-w-3xl">
|
||||
<h1 class="text-xl font-bold mb-2">工作区</h1>
|
||||
<div class="text-xs text-gray-500 mb-6">配置本地项目目录与上下文持久化行为。</div>
|
||||
|
||||
<div class="card p-6 mb-6">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">默认项目目录</label>
|
||||
<div class="text-xs text-gray-500 mb-3">ZCLAW 项目和上下文文件的保存位置。</div>
|
||||
<div class="flex gap-2">
|
||||
<input type="text" value="~/.openclaw-ZCLAW/workspace" class="flex-1 px-3 py-2 border border-gray-200 rounded-lg text-sm bg-gray-50">
|
||||
<button class="text-xs px-4 py-2 border border-gray-200 rounded-lg hover:bg-gray-50">浏览</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 space-y-6">
|
||||
<div class="flex justify-between items-start">
|
||||
<div class="flex-1 pr-4">
|
||||
<div class="font-medium text-gray-900 mb-1">限制文件访问范围</div>
|
||||
<div class="text-xs text-gray-500 leading-relaxed">
|
||||
开启后，Agent 的工作空间将限制在工作目录内。关闭后可访问更大范围，可能导致误操作。无论开关状态，均建议提前备份重要文件。请注意：受技术限制，我们无法保证完全阻止目录外执行或由此带来的外部影响；请自行评估风险并谨慎使用。
|
||||
</div>
|
||||
</div>
|
||||
<input type="checkbox" class="toggle-switch mt-1" checked>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center py-3 border-t border-gray-100">
|
||||
<div>
|
||||
<div class="font-medium text-gray-900 mb-1">自动保存上下文</div>
|
||||
<div class="text-xs text-gray-500">自动将聊天记录和提取的产物保存到本地工作区文件夹。</div>
|
||||
</div>
|
||||
<input type="checkbox" class="toggle-switch" checked>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center py-3 border-t border-gray-100">
|
||||
<div>
|
||||
<div class="font-medium text-gray-900 mb-1">文件监听</div>
|
||||
<div class="text-xs text-gray-500">监听本地文件变更，实时更新 Agent 上下文。</div>
|
||||
</div>
|
||||
<input type="checkbox" class="toggle-switch" checked>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center py-3 border-t border-gray-100">
|
||||
<div>
|
||||
<div class="font-medium text-gray-900 mb-1">从 OpenClaw 迁移</div>
|
||||
<div class="text-xs text-gray-500">将 OpenClaw 的配置、对话记录、技能等数据迁移到 ZCLAW</div>
|
||||
</div>
|
||||
<button class="text-xs px-4 py-2 border border-gray-200 rounded-lg hover:bg-gray-50">开始迁移</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据与隐私 -->
|
||||
<div id="privacy" class="section max-w-3xl">
|
||||
<h1 class="text-xl font-bold mb-2">数据与隐私</h1>
|
||||
<div class="text-xs text-gray-500 mb-6">查看数据存储位置与 ZCLAW 的网络出站范围。</div>
|
||||
|
||||
<div class="card p-6 mb-6">
|
||||
<h3 class="font-medium mb-2">本地数据路径</h3>
|
||||
<div class="text-xs text-gray-500 mb-3">所有工作区文件、对话记录和 Agent 输出均存储在此本地目录。</div>
|
||||
<div class="p-3 bg-gray-50 border border-gray-200 rounded-lg text-xs text-gray-600 font-mono">
|
||||
~/.openclaw-ZCLAW/workspace
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 mb-6">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<h3 class="font-medium">优化计划</h3>
|
||||
<input type="checkbox" class="toggle-switch mt-1">
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 leading-relaxed">
|
||||
我们诚邀您加入优化提升计划，您的加入会帮助我们更好地迭代产品：在去标识化处理后，我们可能将您输入与生成的信息以及屏幕操作信息用于模型的训练与优化。我们尊重您的个人信息主体权益，您有权选择不允许我们将您的信息用于此目的。您也可以在后续使用中的任何时候通过"设置"中的开启或关闭按钮选择加入或退出优化计划。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card p-6">
|
||||
<h3 class="font-medium mb-4">备案信息</h3>
|
||||
<div class="space-y-3 text-xs">
|
||||
<div class="flex">
|
||||
<span class="text-gray-500 w-28 flex-shrink-0">ICP 备案/许可证号</span>
|
||||
<span class="text-gray-700">京 ICP 备 20011824 号 -21</span>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<span class="text-gray-500 w-28 flex-shrink-0">算法备案</span>
|
||||
<div class="space-y-1 text-gray-700">
|
||||
<div>智谱 ChatGLM 生成算法（网信算备 110108105858001230019 号）</div>
|
||||
<div>智谱 ChatGLM 搜索算法（网信算备 110108105858004240011 号）</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<span class="text-gray-500 w-28 flex-shrink-0">大模型备案登记</span>
|
||||
<span class="text-gray-700">Beijing-AutoGLM-2025060650053</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4 mt-6 pt-4 border-t border-gray-100">
|
||||
<a href="#" class="text-orange-600 text-xs hover:underline flex items-center gap-1">
|
||||
<i data-lucide="external-link" class="w-3 h-3">
|
||||
</i>
|
||||
隐私政策
|
||||
</a>
|
||||
<a href="#" class="text-orange-600 text-xs hover:underline flex items-center gap-1">
|
||||
<i data-lucide="external-link" class="w-3 h-3">
|
||||
</i>
|
||||
用户协议
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 提交反馈 -->
|
||||
<div id="feedback" class="section max-w-3xl">
|
||||
<h1 class="text-xl font-bold mb-2">提交反馈</h1>
|
||||
<div class="text-xs text-gray-500 mb-6">请描述你遇到的问题或建议。默认会附带本地日志，便于快速定位问题。</div>
|
||||
|
||||
<div class="card p-2">
|
||||
<textarea
|
||||
class="w-full h-48 p-4 bg-transparent border-none resize-none focus:outline-none text-sm text-gray-700 placeholder-gray-400"
|
||||
placeholder="请尽量详细描述复现步骤、期望结果和实际结果"
|
||||
>
|
||||
</textarea>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<button class="px-6 py-2 bg-gray-100 text-gray-400 rounded-lg text-sm cursor-not-allowed" disabled>提交</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 关于 -->
|
||||
<div id="about" class="section max-w-3xl">
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<div class="w-16 h-16 bg-black rounded-2xl flex items-center justify-center text-white">
|
||||
<i data-lucide="cat" class="w-10 h-10">
|
||||
</i>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-xl font-bold text-gray-900">ZCLAW</h1>
|
||||
<div class="text-sm text-gray-500">版本 0.2.12</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="card p-4 flex justify-between items-center">
|
||||
<span class="text-sm text-gray-700">检查更新</span>
|
||||
<button class="text-xs text-white bg-orange-500 hover:bg-orange-600 px-4 py-2 rounded-lg flex items-center gap-1">
|
||||
<i data-lucide="refresh-cw" class="w-3 h-3">
|
||||
</i>
|
||||
检查更新
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="card p-4 flex justify-between items-center">
|
||||
<div>
|
||||
<div class="text-sm text-gray-700 mb-1">更新日志</div>
|
||||
<div class="text-xs text-gray-500">查看当前版本的更新内容</div>
|
||||
</div>
|
||||
<button class="text-xs px-4 py-2 border border-gray-200 rounded-lg hover:bg-gray-50">更新日志</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-12 text-center text-xs text-gray-400">
|
||||
© 2026 ZhipuAI | by AutoGLM
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- 添加模型弹窗 -->
|
||||
<div id="addModelModal" class="fixed inset-0 z-50 hidden">
|
||||
<div class="modal-overlay absolute inset-0" onclick="closeModal('addModelModal')">
|
||||
</div>
|
||||
<div class="absolute inset-0 flex items-center justify-center p-4 pointer-events-none">
|
||||
<div class="bg-white rounded-2xl shadow-2xl w-full max-w-md pointer-events-auto max-h-[90vh] overflow-y-auto custom-scrollbar">
|
||||
<div class="sticky top-0 bg-white border-b border-gray-100 p-6 flex justify-between items-center z-10">
|
||||
<h3 class="text-lg font-bold">添加模型</h3>
|
||||
<button onclick="closeModal('addModelModal')" class="text-gray-400 hover:text-gray-600">
|
||||
<i data-lucide="x" class="w-5 h-5">
|
||||
</i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="p-6 space-y-4">
|
||||
<div class="bg-yellow-50 border border-yellow-100 rounded-lg p-3 text-xs text-yellow-800 flex items-start gap-2">
|
||||
<i data-lucide="alert-circle" class="w-4 h-4 flex-shrink-0 mt-0.5">
|
||||
</i>
|
||||
<span>添加外部模型即表示你理解并同意自行承担使用风险。</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">* 服务商</label>
|
||||
<select class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500">
|
||||
<option>智谱 (ZhipuAI)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">* 模型 ID</label>
|
||||
<input type="text" placeholder="请选择模型" class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">显示名称</label>
|
||||
<input type="text" placeholder="请填写显示名称" class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">智谱 API Key</label>
|
||||
<div class="relative">
|
||||
<input type="password" placeholder="请填写 API Key（可选）" class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 pr-10">
|
||||
<button class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400">
|
||||
<i data-lucide="eye" class="w-4 h-4">
|
||||
</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">API 协议</label>
|
||||
<select class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500">
|
||||
<option>OpenAI</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Base URL</label>
|
||||
<input type="text" value="https://open.bigmodel.cn/api/paas/v4" class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sticky bottom-0 bg-white border-t border-gray-100 p-6 flex justify-end gap-3">
|
||||
<button onclick="closeModal('addModelModal')" class="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg text-sm">取消</button>
|
||||
<button class="px-4 py-2 bg-orange-500 text-white rounded-lg text-sm hover:bg-orange-600">添加</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 添加 MCP Server 弹窗 -->
|
||||
<div id="addMcpModal" class="fixed inset-0 z-50 hidden">
|
||||
<div class="modal-overlay absolute inset-0" onclick="closeModal('addMcpModal')">
|
||||
</div>
|
||||
<div class="absolute inset-0 flex items-center justify-center p-4 pointer-events-none">
|
||||
<div class="bg-white rounded-2xl shadow-2xl w-full max-w-md pointer-events-auto max-h-[90vh] overflow-y-auto custom-scrollbar">
|
||||
<div class="sticky top-0 bg-white border-b border-gray-100 p-6 flex justify-between items-center z-10">
|
||||
<h3 class="text-lg font-bold">添加 MCP Server</h3>
|
||||
<button onclick="closeModal('addMcpModal')" class="text-gray-400 hover:text-gray-600">
|
||||
<i data-lucide="x" class="w-5 h-5">
|
||||
</i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="p-6 space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">* Server 名称</label>
|
||||
<input type="text" placeholder="例如：filesystem" class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">连接方式</label>
|
||||
<select class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500">
|
||||
<option>本地进程 (stdio)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">* 命令</label>
|
||||
<input type="text" placeholder="例如：npx、uvx、node" class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">参数（空格分隔）</label>
|
||||
<input type="text" placeholder="例如：-y @modelcontextprotocol/server-filesystem /Users/me/De..." class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">环境变量（每行 KEY=VALUE）</label>
|
||||
<textarea placeholder="BRAVE_API_KEY=xxx NODE_ENV=production" class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 h-24 resize-none">
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sticky bottom-0 bg-white border-t border-gray-100 p-6 flex justify-end gap-3">
|
||||
<button onclick="closeModal('addMcpModal')" class="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg text-sm">取消</button>
|
||||
<button class="px-4 py-2 bg-orange-500 text-white rounded-lg text-sm hover:bg-orange-600">添加</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
|
||||
function switchSection(sectionId) {
|
||||
// 隐藏所有section
|
||||
document.querySelectorAll('.section').forEach(el => {
|
||||
el.classList.remove('active');
|
||||
});
|
||||
|
||||
// 显示目标section
|
||||
document.getElementById(sectionId).classList.add('active');
|
||||
|
||||
// 更新导航状态
|
||||
document.querySelectorAll('.nav-item').forEach(el => {
|
||||
el.classList.remove('active');
|
||||
});
|
||||
|
||||
// 找到对应的nav按钮并激活
|
||||
const navButtons = document.querySelectorAll('.nav-item');
|
||||
navButtons.forEach(btn => {
|
||||
if (btn.getAttribute('onclick').includes(sectionId)) {
|
||||
btn.classList.add('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function openModal(modalId) {
|
||||
document.getElementById(modalId).classList.remove('hidden');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeModal(modalId) {
|
||||
document.getElementById(modalId).classList.add('hidden');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
// ESC键关闭弹窗
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape') {
|
||||
closeModal('addModelModal');
|
||||
closeModal('addMcpModal');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
709
docs/archive/openclaw-legacy/openclaw-deep-dive.md
Normal file
709
docs/archive/openclaw-legacy/openclaw-deep-dive.md
Normal file
@@ -0,0 +1,709 @@
|
||||
# OpenClaw 深度理解与 ZCLAW 设计映射
|
||||
|
||||
**日期**: 2026-03-12
|
||||
**目的**: 先彻底理解 OpenClaw 的产品哲学、运行机制、配置模型与扩展边界，再据此反推 ZCLAW 每一个功能页和设置项为什么存在、应该达成什么效果。
|
||||
|
||||
---
|
||||
|
||||
## 一、结论先行
|
||||
|
||||
OpenClaw **不是一个“聊天 UI + 模型接入器”**，而是一个围绕本地执行、持续上下文、设备身份、消息路由、技能生态与主动服务组织起来的 **本地优先 Agent 操作系统**。
|
||||
|
||||
如果只把它理解成：
|
||||
|
||||
- WebSocket Gateway
|
||||
- 模型调用
|
||||
- 聊天窗口
|
||||
|
||||
那会错过它真正的核心：
|
||||
|
||||
- **Agent 是一个有独立工作空间、人格、约束和记忆边界的长期运行实体**
|
||||
- **Gateway 是执行中枢，不只是转发层**
|
||||
- **配置文件不是“偏好设置”，而是系统行为定义**
|
||||
- **AGENTS.md / SOUL.md / USER.md / IDENTITY.md 不是装饰文件，而是 Agent 的可审计大脑**
|
||||
- **Heartbeat / Channels / Skills / MCP / Tools / Sandbox / Bindings 是一套完整的运行时系统**
|
||||
|
||||
对 ZCLAW 来说，这意味着：
|
||||
|
||||
- 我们的“设置页”本质上不应该只是 UI 偏好页
|
||||
- 很多设置项的真实目标是 **配置 OpenClaw Runtime**，不是更新前端本地 state
|
||||
- “快速配置”不应被理解为普通表单，而应被理解为 **创建/配置一个新的 Agent 实例**
|
||||
- 右侧 `Agent` 区域不应只是展示文案，而应反映当前选中 Agent 的真实身份、边界、工作目录、用户上下文与运行约束
|
||||
|
||||
---
|
||||
|
||||
## 二、OpenClaw 的本质：它到底是什么
|
||||
|
||||
### 1. 它是 Agent Runtime，而不是聊天前端
|
||||
|
||||
从官方文档与协议设计看，OpenClaw 的核心不是 UI，而是下面这些长期存在的运行对象：
|
||||
|
||||
- **Gateway**
|
||||
- **Agent workspace**
|
||||
- **Sessions**
|
||||
- **Channels**
|
||||
- **Bindings**
|
||||
- **Heartbeat**
|
||||
- **Device identity / pairing**
|
||||
- **Skills / Tools / MCP / Plugins**
|
||||
|
||||
聊天只是这些能力暴露给人的一个入口。
|
||||
|
||||
### 2. 它的核心价值是“执行 + 持续性 + 可控性”
|
||||
|
||||
OpenClaw 的设计哲学非常稳定，几乎所有模块都服务于下面三件事：
|
||||
|
||||
- **执行**
|
||||
- 能真正读写文件、跑命令、控浏览器、发消息
|
||||
- **持续性**
|
||||
- 不只是一次性问答，而是可长期运转的 Agent
|
||||
- **可控性**
|
||||
- 用户能看到配置、文本指令、工作区与约束，而不是黑盒
|
||||
|
||||
这决定了 OpenClaw 与很多“AI 工作台”产品的根本不同：
|
||||
|
||||
- 它强调的是 **Agent 作为系统角色**
|
||||
- 不是把模型套上聊天框就结束
|
||||
|
||||
---
|
||||
|
||||
## 三、OpenClaw 的系统骨架
|
||||
|
||||
### 1. Gateway：系统中枢
|
||||
|
||||
Gateway 是 OpenClaw 的真正控制面板。它负责：
|
||||
|
||||
- WebSocket 协议握手与会话维持
|
||||
- Agent 运行时管理
|
||||
- Session/stream 事件分发
|
||||
- Channels 消息收发
|
||||
- 配置热加载与配置 RPC
|
||||
- Skills / Tools / Plugins / Heartbeat 协调
|
||||
- Device auth / pairing / scopes
|
||||
|
||||
所以对 ZCLAW 而言：
|
||||
|
||||
- 前端不是系统中心
|
||||
- 前端只是 **OpenClaw Runtime 的一个控制界面**
|
||||
|
||||
### 2. Workspace：每个 Agent 的“根目录”
|
||||
|
||||
官方文档明确说明：Agent 有自己的 workspace，里面放 bootstrap 文件和长期上下文，例如：
|
||||
|
||||
- `AGENTS.md`
|
||||
- `SOUL.md`
|
||||
- `USER.md`
|
||||
- `IDENTITY.md`
|
||||
- `TOOLS.md`
|
||||
- `HEARTBEAT.md`
|
||||
- `memory.md`
|
||||
- `memory/YYYY-MM-DD.md`
|
||||
|
||||
这说明 OpenClaw 的“Agent 配置”不仅是 JSON，还是 **文件系统上的可读可改上下文**。
|
||||
|
||||
### 3. 多 Agent：多个独立人格 / 工作空间 / 路由单元
|
||||
|
||||
官方 `Multi-Agent Routing` 文档给出的不是“多 Agent 协作流水线”，而是：
|
||||
|
||||
- 多个 `agentId`
|
||||
- 多个 `workspace`
|
||||
- 多个 `bindings`
|
||||
- 多个渠道账号/电话号码/机器人身份
|
||||
- 多套独立人格、记忆、沙箱与工具权限
|
||||
|
||||
这意味着 OpenClaw 的多 Agent，本质上更像：
|
||||
|
||||
- 多个长期助手
|
||||
- 多个角色实例
|
||||
- 多个路由终点
|
||||
|
||||
而不是：
|
||||
|
||||
- Planner / Executor / Combiner 这种任务分解型多智能体架构
|
||||
|
||||
对 ZCLAW 的直接影响：
|
||||
|
||||
- 我们左侧“分身”更接近 OpenClaw 的 `agents.list`
|
||||
- 不应把“分身”只做成前端标签或临时角色描述
|
||||
- 每个分身都应该最终映射到一个真实的 Agent 配置单元
|
||||
|
||||
---
|
||||
|
||||
## 四、配置模型：OpenClaw 为什么“像操作系统”
|
||||
|
||||
### 1. `~/.openclaw/openclaw.json` 是系统配置，不是普通偏好设置
|
||||
|
||||
官方配置文档说明，`openclaw.json` 用来描述整个系统行为，例如：
|
||||
|
||||
- `agents.defaults.*`
|
||||
- `agents.list[]`
|
||||
- `channels.*`
|
||||
- `bindings`
|
||||
- `heartbeat`
|
||||
- `env`
|
||||
- `tools`
|
||||
- `sandbox`
|
||||
- `plugins`
|
||||
- `skills`
|
||||
|
||||
并且支持：
|
||||
|
||||
- `openclaw configure`
|
||||
- `openclaw config get/set/unset`
|
||||
- `config.get`
|
||||
- `config.apply`
|
||||
- `config.patch`
|
||||
- 热更新与重启语义
|
||||
|
||||
这说明 ZCLAW 的很多设置页，理应围绕下面的目标设计：
|
||||
|
||||
- 让用户理解自己正在配置 **哪个 OpenClaw 子系统**
|
||||
- 让前端变成一个对配置进行可视化编辑的控制台
|
||||
|
||||
### 2. 配置是有层级和优先级的
|
||||
|
||||
OpenClaw 的很多能力都采用“默认值 + 局部覆盖”模型：
|
||||
|
||||
- `agents.defaults.*` 作为全局默认
|
||||
- `agents.list[].*` 作为每个 Agent 的覆盖
|
||||
- `channels.defaults.*` 作为全渠道默认
|
||||
- `channels.<channel>.*` 覆盖
|
||||
- `channels.<channel>.accounts.<id>.*` 再覆盖
|
||||
|
||||
这意味着 ZCLAW 做设置页时，必须把下面三类东西区分开：
|
||||
|
||||
- **系统级设置**
|
||||
- **Agent 级设置**
|
||||
- **渠道/账号级设置**
|
||||
|
||||
否则用户会搞不清：
|
||||
|
||||
- 当前改的是所有 Agent 还是某一个 Agent
|
||||
- 当前改的是显示行为还是路由行为
|
||||
- 当前改的是默认值还是具体实例
|
||||
|
||||
---
|
||||
|
||||
## 五、Bootstrap 文件的职责：为什么 OpenClaw 不靠数据库隐藏一切
|
||||
|
||||
### 1. `AGENTS.md`：操作规范与行为准则
|
||||
|
||||
默认 `AGENTS.md` 强调：
|
||||
|
||||
- 首次启动要建立 workspace
|
||||
- Session 开始要先读 `SOUL.md`、`USER.md`、`memory.md`
|
||||
- 不要泄露隐私和秘密
|
||||
- 不要在外部消息面上发送半成品结果
|
||||
- 工具和技能是通过 `SKILL.md`/`TOOLS.md` 组织的
|
||||
|
||||
它的定位更接近：
|
||||
|
||||
- Agent 的操作协议
|
||||
- 安全规范
|
||||
- 会话启动 checklist
|
||||
|
||||
### 2. `SOUL.md`：身份、气质、边界
|
||||
|
||||
官方模板把 `SOUL.md` 定义成：
|
||||
|
||||
- Core Truths
|
||||
- Boundaries
|
||||
- Vibe
|
||||
- Continuity
|
||||
|
||||
也就是说，`SOUL.md` 不是“角色介绍”，而是：
|
||||
|
||||
- Agent 的底层人格与底线
|
||||
- 它如何说话、如何决策、哪里必须克制
|
||||
|
||||
### 3. `USER.md`：关于用户这个人
|
||||
|
||||
`USER.md` 的职责不是泛化的“设置”，而是：
|
||||
|
||||
- 记录这个 Agent 正在服务的那个人是谁
|
||||
- TA 的习惯、上下文、沟通偏好、时区、关注点
|
||||
|
||||
### 4. `IDENTITY.md`：Agent 的外显身份
|
||||
|
||||
官方模板中 `IDENTITY.md` 明确包含：
|
||||
|
||||
- Name
|
||||
- Creature
|
||||
- Vibe
|
||||
- Emoji
|
||||
- Avatar
|
||||
|
||||
这非常重要，因为它解释了 AutoClaw/类似产品里右侧 `Agent` 面板为什么会有：
|
||||
|
||||
- 名字
|
||||
- emoji
|
||||
- 风格
|
||||
- 形象
|
||||
|
||||
对 ZCLAW 的直接映射：
|
||||
|
||||
- 右侧 `Agent` 区域展示的不是随机卡片
|
||||
- 它应该是 Agent 的外显身份与用户上下文的可视化投影
|
||||
|
||||
---
|
||||
|
||||
## 六、Agent 的真正含义：OpenClaw 里“一个 Agent”是什么
|
||||
|
||||
结合官方 `Multi-Agent Routing` 文档，可以把一个 Agent 理解成：
|
||||
|
||||
- 一个 `agentId`
|
||||
- 一个独立 workspace / agentDir
|
||||
- 一组 bootstrap 文件
|
||||
- 一套工具与 sandbox 规则
|
||||
- 一套 session 历史
|
||||
- 一组可能的 channel bindings
|
||||
- 一种人格 / 工作方式 / 角色定位
|
||||
|
||||
因此“创建一个新 Agent”至少意味着下面几件事之一：
|
||||
|
||||
- 在 `agents.list[]` 中新增条目
|
||||
- 为它准备独立 workspace 或 `agentDir`
|
||||
- 写入/复制对应的 `AGENTS.md / SOUL.md / USER.md / IDENTITY.md`
|
||||
- 给它绑定渠道、peer、账号或默认路由规则
|
||||
- 根据风险模型配置它的工具权限/沙箱/Heartbeat
|
||||
|
||||
这也是为什么“快速配置”绝不能被简化成：
|
||||
|
||||
- 只存几个前端字段
|
||||
- 只改一个 Zustand store
|
||||
- 只改显示文案
|
||||
|
||||
它的本质是：
|
||||
|
||||
- **创建一个新的 Agent 实体**
|
||||
|
||||
---
|
||||
|
||||
## 七、Routing：为什么 OpenClaw 的多 Agent 不只是“列表切换”
|
||||
|
||||
官方路由顺序大致是：
|
||||
|
||||
- peer 精确匹配
|
||||
- parentPeer 继承匹配
|
||||
- guild/team/roles 等平台级规则
|
||||
- accountId 规则
|
||||
- channel fallback
|
||||
- default agent / first agent / main
|
||||
|
||||
这说明 Agent 不是只在 UI 中被“选中”，而是在运行时通过消息来源自动路由。
|
||||
|
||||
对 ZCLAW 的启发：
|
||||
|
||||
- 左侧分身列表只是 **人能看懂的入口**
|
||||
- 真正完成 OpenClaw 化，还需要绑定路由语义
|
||||
- 后续应该把“分身”扩展为：
|
||||
- Agent 基本资料
|
||||
- 渠道路由绑定
|
||||
- 默认 Agent / fallback Agent
|
||||
- 每 Agent 的 workspace / tools / heartbeat
|
||||
|
||||
---
|
||||
|
||||
## 八、Heartbeat：为什么“定时任务页”不能只做 cron 列表
|
||||
|
||||
官方 Heartbeat 文档显示：
|
||||
|
||||
- Heartbeat 是 **定期触发一个完整 Agent turn**
|
||||
- 默认会读 `HEARTBEAT.md`
|
||||
- 如果没事做，返回 `HEARTBEAT_OK`
|
||||
- 可以配置投递目标，如 `none`、`last` 或具体渠道
|
||||
- 可以设置 active hours
|
||||
- 支持 per-agent heartbeat 覆盖
|
||||
|
||||
这说明 Heartbeat 与普通 cron 的区别在于：
|
||||
|
||||
- cron 是“按时间执行动作”
|
||||
- Heartbeat 是“按时间唤醒 Agent 去检查是否有事要做”
|
||||
|
||||
对 ZCLAW 的直接含义：
|
||||
|
||||
- “定时任务页”如果只展示 cron 表达式，会偏离 OpenClaw
|
||||
- 应该更多展示：
|
||||
- 哪些 Agent 开启了 heartbeat
|
||||
- Heartbeat 多久触发一次
|
||||
- 触发时会看什么（HEARTBEAT.md）
|
||||
- 结果发到哪里
|
||||
- 活跃时段限制
|
||||
|
||||
---
|
||||
|
||||
## 九、Skills：为什么它不是“插件市场”，而是 Agent 的工作知识库
|
||||
|
||||
官方文档与命令表明：
|
||||
|
||||
- `openclaw skills list`
|
||||
- `openclaw skills info <name>`
|
||||
- `openclaw skills check`
|
||||
|
||||
以及仓库中多处强调：
|
||||
|
||||
- `SKILL.md`
|
||||
- 渐进式披露
|
||||
- 每个技能是任务说明 + 规则 + 可选脚本/工具的组合
|
||||
|
||||
因此 Skills 的真实价值不是“多装几个功能按钮”，而是：
|
||||
|
||||
- 把复杂任务封装成可复用工作流
|
||||
- 控制模型只在需要时展开更多上下文
|
||||
- 让 Agent 在执行具体任务时有稳定手册可读
|
||||
|
||||
对 ZCLAW 的影响：
|
||||
|
||||
- 技能页不应该只是展示一个目录列表
|
||||
- 它的目标应该是让用户理解：
|
||||
- 当前 Agent 可用哪些技能
|
||||
- 每个技能解决什么问题
|
||||
- 技能是否可被当前 Agent 触发
|
||||
- 额外目录实际上影响的是 Agent 的能力面
|
||||
|
||||
---
|
||||
|
||||
## 十、Channels：为什么 IM 频道不是“集成列表”而是系统输入面
|
||||
|
||||
OpenClaw 的渠道模型并不是简单“接一个 webhook”这么轻。
|
||||
|
||||
它包含：
|
||||
|
||||
- channel 类型
|
||||
- accounts（多账号/多 bot）
|
||||
- accountId
|
||||
- allow/deny / mention / thread 绑定
|
||||
- peer/group/direct message 路由
|
||||
- bindings 到 agent
|
||||
|
||||
这意味着渠道页的真正目标是：
|
||||
|
||||
- 管理消息从哪里进系统
|
||||
- 管理不同输入源归属哪个 Agent
|
||||
- 管理默认/显式路由规则
|
||||
|
||||
因此 ZCLAW 的 IM 频道页未来应围绕：
|
||||
|
||||
- 已接入哪些 channel
|
||||
- 每个 channel 有哪些 account
|
||||
- 每个 account 绑定了哪些 agent
|
||||
- 每个 Agent 接哪些 peer/group
|
||||
- 是否 require mention
|
||||
|
||||
而不是只做：
|
||||
|
||||
- “飞书开/关”
|
||||
- “添加一个渠道按钮”
|
||||
|
||||
---
|
||||
|
||||
## 十一、MCP：在 OpenClaw 里意味着什么
|
||||
|
||||
从现有资料可以确认，OpenClaw 原生支持 MCP / RPC adapters / 外部工具扩展。
|
||||
|
||||
在 OpenClaw 语境下，MCP 的作用不是点缀，而是：
|
||||
|
||||
- 给 Agent 扩展新的上下文来源与工具面
|
||||
- 让技能可以调用标准化外部能力
|
||||
- 让模型在不写死工具的情况下复用第三方协议能力
|
||||
|
||||
因此 ZCLAW 的 MCP 服务页的目的应是：
|
||||
|
||||
- 不是本地 toggle 假状态
|
||||
- 而是管理 Agent 当前可访问的工具能力集合
|
||||
|
||||
---
|
||||
|
||||
## 十二、Device Auth：为什么 Gateway 连接不是普通 WebSocket 连接
|
||||
|
||||
官方协议和 troubleshooting 文档表明：
|
||||
|
||||
- 握手不是简单 `ws.connect`
|
||||
- Gateway 会先发 `connect.challenge`
|
||||
- 客户端必须：
|
||||
- 等待 challenge
|
||||
- 使用 challenge 参与签名 payload
|
||||
- 发送 `device.nonce`
|
||||
- 携带 `device.id / publicKey / signature / signedAt`
|
||||
- `device.id` 来源于公钥指纹
|
||||
- `device auth` 与 token / deviceToken / pairing / scopes 共同决定是否给权限
|
||||
|
||||
这件事对 ZCLAW 很关键，因为它说明：
|
||||
|
||||
- “连接 Gateway”不是 UI 层小问题
|
||||
- 它背后是 OpenClaw 的安全边界
|
||||
- 前端任何“连接设置”都必须尊重设备身份与鉴权语义
|
||||
|
||||
我们这次调试里已经验证：
|
||||
|
||||
- 少字段会被拒绝
|
||||
- 错误 `device.id` 会触发 `device-id-mismatch`
|
||||
- 错误 payload 会触发 `device signature invalid`
|
||||
- 错误 `client.mode` 也会直接握手失败
|
||||
|
||||
所以后续实现必须把 Gateway 连接视作 **协议适配工程**，而不是按钮状态问题。
|
||||
|
||||
---
|
||||
|
||||
## 十三、ZCLAW 的功能设置为什么存在：逐页重解释
|
||||
|
||||
下面用 OpenClaw 视角重写 ZCLAW 设置页目的。
|
||||
|
||||
### 1. 通用
|
||||
|
||||
目的不是“桌面偏好”。
|
||||
|
||||
真实目标：
|
||||
|
||||
- 控制连接状态
|
||||
- 暴露一部分系统级行为开关
|
||||
- 说明 Agent 的运行模式、安全边界与可见性
|
||||
|
||||
### 2. 模型与 API
|
||||
|
||||
真实目标：
|
||||
|
||||
- 管理 OpenClaw 的 provider / model defaults
|
||||
- 决定 Agent 运行时使用的主模型与 fallback
|
||||
- 调试 Gateway 连接与鉴权
|
||||
|
||||
### 3. MCP 服务
|
||||
|
||||
真实目标：
|
||||
|
||||
- 定义 Agent 可以接入哪些外部能力
|
||||
- 把工具面显式暴露给用户管理
|
||||
|
||||
### 4. 技能
|
||||
|
||||
真实目标：
|
||||
|
||||
- 管理 Agent 可以调用的工作流知识库
|
||||
- 让用户知道 Agent 的“会做什么”来自哪里
|
||||
|
||||
### 5. IM 频道
|
||||
|
||||
真实目标：
|
||||
|
||||
- 管理系统从哪里收消息
|
||||
- 管理消息如何路由到 Agent
|
||||
|
||||
### 6. 工作区
|
||||
|
||||
真实目标：
|
||||
|
||||
- 确定 Agent 的执行边界
|
||||
- 决定 bootstrap 文件、上下文、技能和文件访问根目录
|
||||
- 影响 sandbox / file restriction / file watching 等运行时行为
|
||||
|
||||
### 7. 数据与隐私
|
||||
|
||||
真实目标：
|
||||
|
||||
- 让用户理解数据存储在哪里
|
||||
- 让用户知道哪些行为在本地、哪些可能涉及外部服务
|
||||
- 明确优化计划 / telemetry 是否参与
|
||||
|
||||
### 8. 分身 / 快速配置
|
||||
|
||||
真实目标：
|
||||
|
||||
- 创建一个新的 Agent 实例
|
||||
- 配置其身份、角色、风格、工作目录、约束和用户上下文
|
||||
- 最终应该映射到：
|
||||
- `agents.list[]`
|
||||
- agent workspace / agentDir
|
||||
- `IDENTITY.md / SOUL.md / USER.md / AGENTS.md`
|
||||
|
||||
### 9. 右侧 Agent 面板
|
||||
|
||||
真实目标：
|
||||
|
||||
- 展示当前 Agent 的外显身份
|
||||
- 展示它如何理解用户
|
||||
- 展示它的边界、工作目录、当前模型和关注领域
|
||||
|
||||
---
|
||||
|
||||
## 十四、对 ZCLAW 当前实现的启发
|
||||
|
||||
### 1. 已经接近正确方向的部分
|
||||
|
||||
- 三栏桌面结构
|
||||
- 分身 / IM / 定时任务主界面骨架
|
||||
- 对 OpenClaw Gateway 的接入方向
|
||||
- 自定义插件模式
|
||||
- 使用 bootstrap 文件与默认配置模板
|
||||
- 将中文模型、飞书、UI RPC 作为 OpenClaw 上层定制
|
||||
|
||||
### 2. 当前最容易继续偏离的部分
|
||||
|
||||
- 把设置页做成前端本地假状态
|
||||
- 把分身做成只影响 UI 的列表项
|
||||
- 把快速配置当成“多几个表单字段”
|
||||
- 把 Heartbeat 误做成 cron 列表
|
||||
- 把技能页误做成目录浏览器
|
||||
- 把 IM 页误做成渠道开关
|
||||
|
||||
### 3. 应当优先建立的统一原则
|
||||
|
||||
后续所有功能实现都建议遵循下面这个判断标准：
|
||||
|
||||
> 如果一个页面改动之后，没有改变 OpenClaw Runtime 的真实行为、真实配置、真实路由、真实工作区或真实 Agent 上下文，那它大概率还只是“演示 UI”，不是系统能力。
|
||||
|
||||
---
|
||||
|
||||
## 十五、对当前几个关键争议点的明确判断
|
||||
|
||||
### 1. “快速配置到底是什么？”
|
||||
|
||||
结论：
|
||||
|
||||
- **快速配置 = 创建 / 更新一个 Agent**
|
||||
- 不是普通设置
|
||||
- 不是只改前端 state
|
||||
- 不是只改 `quickConfig` JSON
|
||||
|
||||
### 2. “右侧 Agent 区域应该显示什么？”
|
||||
|
||||
结论：
|
||||
|
||||
- 当前选中 Agent 的真实身份与用户上下文
|
||||
- 不是硬编码卡片
|
||||
- 不是随机占位数据
|
||||
|
||||
### 3. “Clone / 分身 应该如何理解？”
|
||||
|
||||
结论：
|
||||
|
||||
- 在 ZCLAW 语境里，它应该逐步收敛为 OpenClaw 的 Agent 实例
|
||||
- 不是任务拆解型多智能体
|
||||
- 不是单纯聊天角色标签
|
||||
|
||||
### 4. “连接 Gateway 为什么难？”
|
||||
|
||||
结论：
|
||||
|
||||
- 因为它不是普通 ws 连接，而是设备身份 + token/scopes + challenge 签名协议
|
||||
|
||||
---
|
||||
|
||||
## 十六、建议的 ZCLAW 后续实现顺序
|
||||
|
||||
### P0：先把 Gateway 协议适配做对
|
||||
|
||||
包括：
|
||||
|
||||
- 正确 `client.id / client.mode`
|
||||
- 正确 `device.id`
|
||||
- 正确 v2/v3 签名 payload
|
||||
- 正确 token/deviceToken 处理
|
||||
- 正确错误展示
|
||||
|
||||
### P1：把“分身”升级为真实 Agent 模型
|
||||
|
||||
包括：
|
||||
|
||||
- `agents.list` 映射
|
||||
- 选中 Agent 的真实状态
|
||||
- 右侧 Agent 面板绑定真实字段
|
||||
|
||||
### P2：把快速配置升级为 Agent 创建向导
|
||||
|
||||
包括：
|
||||
|
||||
- 基本身份
|
||||
- 用户上下文
|
||||
- 工作目录
|
||||
- 工具/文件限制
|
||||
- heartbeat / skills / channels 初始策略
|
||||
|
||||
### P3：把设置页升级为 OpenClaw Runtime 配置面板
|
||||
|
||||
包括：
|
||||
|
||||
- `config.get / config.patch / config.apply`
|
||||
- agent defaults vs per-agent overrides
|
||||
- channels/accounts/bindings
|
||||
- skills / mcp / workspace / privacy
|
||||
|
||||
### P4：做真正的产品化封装
|
||||
|
||||
包括：
|
||||
|
||||
- Tauri sidecar 管理 Gateway
|
||||
- 首次安装/配置向导
|
||||
- 错误诊断与修复建议
|
||||
- AutoClaw 风格的上层体验
|
||||
|
||||
---
|
||||
|
||||
## 十七、给后续开发的操作性原则
|
||||
|
||||
后续写代码时，建议每次先问自己：
|
||||
|
||||
- 这个功能对应的是 OpenClaw 的哪个子系统？
|
||||
- 它改的是系统级、Agent 级，还是渠道/账号级？
|
||||
- 它落地到哪里：JSON 配置、workspace 文件、bindings、channel account，还是 runtime state？
|
||||
- 它改变的是 UI 表象，还是 Agent 的真实行为？
|
||||
- 它是否应该反映在右侧 Agent 面板 / 左侧分身列表 / 渠道路由 / heartbeat 行为中？
|
||||
|
||||
如果这些问题答不清，通常说明实现路径还没对齐 OpenClaw。
|
||||
|
||||
---
|
||||
|
||||
## 十八、参考资料
|
||||
|
||||
### 官方公开资料
|
||||
|
||||
1. OpenClaw Gateway Protocol
|
||||
https://docs.openclaw.ai/gateway/protocol
|
||||
2. OpenClaw Gateway Troubleshooting
|
||||
https://docs.openclaw.ai/gateway/troubleshooting
|
||||
3. OpenClaw Configuration
|
||||
https://docs.openclaw.ai/gateway/configuration
|
||||
4. OpenClaw Multi-Agent Routing
|
||||
https://docs.openclaw.ai/concepts/multi-agent
|
||||
5. OpenClaw Heartbeat
|
||||
https://docs.openclaw.ai/gateway/heartbeat
|
||||
6. OpenClaw Skills CLI
|
||||
https://docs.openclaw.ai/cli/skills
|
||||
7. OpenClaw Default AGENTS.md
|
||||
https://docs.openclaw.ai/reference/AGENTS.default
|
||||
8. OpenClaw SOUL.md Template
|
||||
https://docs.openclaw.ai/reference/templates/SOUL
|
||||
9. OpenClaw USER Template
|
||||
https://docs.openclaw.ai/reference/templates/USER
|
||||
10. OpenClaw IDENTITY Template
|
||||
https://docs.openclaw.ai/reference/templates/IDENTITY
|
||||
11. Third-party client authentication guide issue
|
||||
https://github.com/openclaw/openclaw/issues/17571
|
||||
12. Device signature mismatch issue
|
||||
https://github.com/openclaw/openclaw/issues/39667
|
||||
|
||||
### 仓库内现有文档
|
||||
|
||||
1. `docs/deviation-analysis.md`
|
||||
2. `docs/architecture-v2.md`
|
||||
3. `README.md`
|
||||
4. `config/openclaw.default.json`
|
||||
5. `config/AGENTS.md`
|
||||
6. `config/SOUL.md`
|
||||
7. `config/USER.md`
|
||||
8. `config/IDENTITY.md`
|
||||
|
||||
---
|
||||
|
||||
## 十九、这份文档对 ZCLAW 当前工作的直接作用
|
||||
|
||||
它可以作为后续所有实现的判断依据，尤其是：
|
||||
|
||||
- Gateway 连接修复
|
||||
- 分身/快速配置重构
|
||||
- 右侧 Agent 面板设计
|
||||
- 工作区设置页语义校正
|
||||
- IM/Skills/MCP/Heartbeat 页面重构
|
||||
|
||||
一句话总结：
|
||||
|
||||
> ZCLAW 不是要“做一个像 AutoClaw 的前端”，而是要“在真正理解 OpenClaw 运行模型之后，做一个面向中文场景的 Tauri 封装层”。
|
||||
958
docs/archive/openclaw-legacy/openclaw-knowledge-base.md
Normal file
958
docs/archive/openclaw-legacy/openclaw-knowledge-base.md
Normal file
@@ -0,0 +1,958 @@
|
||||
# OpenClaw 线上知识库
|
||||
|
||||
**版本**: 1.0.0
|
||||
**最后更新**: 2026-03-12
|
||||
**目的**: 为 ZClaw 项目提供全面、结构化的 OpenClaw 抷术参考
|
||||
|
||||
---
|
||||
|
||||
## 目录
|
||||
|
||||
1. [核心概念](#核心概念)
|
||||
2. [系统架构](#系统架构)
|
||||
3. [Gateway 协议](#gateway-协议)
|
||||
4. [配置系统](#配置系统)
|
||||
5. [Skills 与 Tools](#skills-与-tools)
|
||||
6. [插件开发](#插件开发)
|
||||
7. [多 Agent 路由](#多-agent-路由)
|
||||
8. [安全与沙箱](#安全与沙箱)
|
||||
9. [Heartbeat 机制](#heartbeat-机制)
|
||||
10. [Channels 通道系统](#channels-通道系统)
|
||||
11. [最佳实践](#最佳实践)
|
||||
|
||||
12. [ZClaw 映射指南](#zclaw-映射指南)
|
||||
|
||||
---
|
||||
|
||||
## 核心概念
|
||||
|
||||
### OpenClaw 是什么？
|
||||
|
||||
OpenClaw 是一个 **自托管的 AI Agent 硴关**，不是简单的"聊天 UI + 模型接入器"。
|
||||
|
||||
**核心定位**：
|
||||
- **自托管**: 运行在你自己的硬件上，你的规则
|
||||
- **多通道**: 一个 Gateway 同时服务 WhatsApp、Telegram、Discord、飞书等多个渠道
|
||||
- **Agent 原生**: 为编码 Agent 构建，支持工具调用、会话、记忆、多 Agent 路由
|
||||
- **开源**: MIT 许可，社区驱动
|
||||
|
||||
**关键洞察**： OpenClaw 的核心价值是 **执行 + 持续性 + 可控性**：
|
||||
- **执行**: 能真正读写文件、跑命令、控浏览器、发消息
|
||||
- **持续性**: 不只是一次性问答，而是可长期运转的 Agent
|
||||
- **可控性**: 用户能看到配置、文本指令、工作区与约束，而不是黑盒
|
||||
|
||||
### Agent 的真正含义
|
||||
|
||||
在 OpenClaw 中，一个 Agent 包含：
|
||||
- 一个 `agentId`
|
||||
- 一个独立 workspace / agentDir
|
||||
- 一组 bootstrap 文件 (`AGENTS.md`、`SOUL.md`、`USER.md`、`IDENTITY.md`)
|
||||
- 一套工具与 sandbox 规则
|
||||
- 一套 session 历史
|
||||
- 一组可能的 channel bindings
|
||||
- 一种人格 / 工作方式 / 角色定位
|
||||
|
||||
### Bootstrap 文件职责
|
||||
|
||||
| 文件 | 职责 | 内容示例 |
|
||||
|------|------|----------|
|
||||
| `AGENTS.md` | 操作规范与行为准则 | 会话启动 checklist、安全规范、工具使用规则 |
|
||||
| `SOUL.md` | 身份、气质、边界 | Core Truths、Boundaries、Vibe、Continuity |
|
||||
| `USER.md` | 关于用户的信息 | 用户习惯、上下文、沟通偏好、时区 |
|
||||
| `IDENTITY.md` | Agent 外显身份 | Name、Emoji、Avatar、Vibe |
|
||||
| `HEARTBEAT.md` | 心跳任务指令 | 定时检查任务、触发条件、投递目标 |
|
||||
|
||||
---
|
||||
|
||||
## 系统架构
|
||||
|
||||
### 四层架构
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ 应用层 (Application) │
|
||||
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
|
||||
│ │WhatsApp │ │Telegram │ │ Discord │ │ 飞书 │ │
|
||||
│ └────┬────┘ └────┬────┘ └────┬────┘ └────┬────┘ │
|
||||
│ │ │ │ │ │
|
||||
│ └────────────┴────────────┴────────────┘ │
|
||||
│ │ │
|
||||
│ ▼ │
|
||||
│ ┌───────────────────────────────────────────────────────┐ │
|
||||
│ │ Gateway (中枢) │ │
|
||||
│ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │
|
||||
│ │ │ WebSocket │ │ HTTP API │ │ Config │ │ │
|
||||
│ │ │ Server │ │ Server │ │ Manager │ │ │
|
||||
│ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │
|
||||
│ └───────────────────────────────────────────────────────┘ │
|
||||
│ │ │
|
||||
│ ▼ │
|
||||
│ ┌───────────────────────────────────────────────────────┐ │
|
||||
│ │ Agent Runtime │ │
|
||||
│ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │
|
||||
│ │ │ Skills │ │ Tools │ │ Memory │ │ │
|
||||
│ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │
|
||||
│ └───────────────────────────────────────────────────────┘ │
|
||||
│ │ │
|
||||
│ ▼ │
|
||||
│ ┌───────────────────────────────────────────────────────┐ │
|
||||
│ │ LLM Providers │ │
|
||||
│ │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │ │
|
||||
│ │ │ Claude │ │ GPT-4 │ │ GLM │ │ Qwen │ │ │
|
||||
│ │ └────────┘ └────────┘ └────────┘ └────────┘ │ │
|
||||
│ └───────────────────────────────────────────────────────┘ │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Gateway 职责
|
||||
|
||||
Gateway 是 OpenClaw 的真正控制面板：
|
||||
|
||||
- WebSocket 协议握手与会话维持
|
||||
- Agent 运行时管理
|
||||
- Session/stream 事件分发
|
||||
- Channels 消息收发
|
||||
- 配置热加载与配置 RPC
|
||||
- Skills / Tools / Plugins / Heartbeat 协调
|
||||
- Device auth / pairing / scopes
|
||||
|
||||
### Workspace 结构
|
||||
|
||||
```
|
||||
~/.openclaw/
|
||||
├── openclaw.json # 主配置文件
|
||||
├── .env # 环境变量
|
||||
├── workspace/ # 默认工作区
|
||||
│ ├── AGENTS.md
|
||||
│ ├── SOUL.md
|
||||
│ ├── USER.md
|
||||
│ ├── IDENTITY.md
|
||||
│ ├── memory.md
|
||||
│ └── memory/
|
||||
│ └── YYYY-MM-DD.md
|
||||
├── agents/ # 多 Agent 状态目录
|
||||
│ └── <agentId>/
|
||||
│ ├── agent/
|
||||
│ │ └── auth-profiles.json
|
||||
│ └── sessions/
|
||||
│ └── <sessionKey>.jsonl
|
||||
└── skills/ # 托管技能目录
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Gateway 协议
|
||||
|
||||
### WebSocket 帧类型
|
||||
|
||||
```typescript
|
||||
// 请求帧
|
||||
interface GatewayRequest {
|
||||
type: 'req';
|
||||
id: string;
|
||||
method: string;
|
||||
params?: Record<string, any>;
|
||||
}
|
||||
|
||||
// 响应帧
|
||||
interface GatewayResponse {
|
||||
type: 'res';
|
||||
id: string;
|
||||
ok: boolean;
|
||||
payload?: any;
|
||||
error?: any;
|
||||
}
|
||||
|
||||
// 事件帧
|
||||
interface GatewayEvent {
|
||||
type: 'event';
|
||||
event: string;
|
||||
payload?: any;
|
||||
seq?: number;
|
||||
}
|
||||
```
|
||||
|
||||
### 握手流程
|
||||
|
||||
```
|
||||
客户端 Gateway
|
||||
│ │
|
||||
│────── WebSocket Connect ────▶│
|
||||
│ │
|
||||
│◀───── connect.challenge ─────│ (包含 nonce)
|
||||
│ │
|
||||
│────── connect request ──────▶│ (包含 device 签名)
|
||||
│ │
|
||||
│◀───── connect response ──────│ (成功/失败)
|
||||
│ │
|
||||
│◀═══════ 事件流 ═══════════════│ (agent, chat, etc.)
|
||||
│ │
|
||||
```
|
||||
|
||||
### Device 认证
|
||||
|
||||
```typescript
|
||||
// 签名载荷格式 (v2)
|
||||
const payload = [
|
||||
'v2',
|
||||
deviceId,
|
||||
clientId,
|
||||
clientMode,
|
||||
role,
|
||||
scopes.join(','),
|
||||
String(signedAt),
|
||||
token || '',
|
||||
nonce,
|
||||
].join('|');
|
||||
|
||||
// 使用 Ed25519 签名
|
||||
const signature = nacl.sign.detached(messageBytes, secretKey);
|
||||
```
|
||||
|
||||
### 连接参数
|
||||
|
||||
```typescript
|
||||
interface ConnectParams {
|
||||
minProtocol: 3;
|
||||
maxProtocol: 3;
|
||||
client: {
|
||||
id: string; // 客户端标识
|
||||
version: string; // 客户端版本
|
||||
platform: string; // Win32/Darwin/Linux
|
||||
mode: 'operator' | 'node';
|
||||
};
|
||||
role: 'operator' | 'node';
|
||||
scopes: string[]; // ['operator.read', 'operator.write']
|
||||
auth?: { token?: string };
|
||||
device: {
|
||||
id: string; // 设备 ID (公钥指纹)
|
||||
publicKey: string; // Base64 编码的公钥
|
||||
signature: string; // 签名
|
||||
signedAt: number; // 签名时间戳
|
||||
nonce: string; // 服务器提供的 nonce
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
### 核心 RPC 方法
|
||||
|
||||
| 方法 | 描述 | 参数 |
|
||||
|------|------|------|
|
||||
| `agent` | 发送消息给 Agent | `message`, `sessionKey?`, `model?` |
|
||||
| `health` | 获取健康状态 | - |
|
||||
| `status` | 获取 Gateway 状态 | - |
|
||||
| `config.get` | 获取配置 | `path` |
|
||||
| `config.patch` | 更新配置 | `path`, `value` |
|
||||
| `send` | 通过渠道发送消息 | `channel`, `chatId`, `text` |
|
||||
|
||||
### Agent 流事件
|
||||
|
||||
```typescript
|
||||
interface AgentStreamEvent {
|
||||
stream: 'assistant' | 'tool' | 'lifecycle';
|
||||
delta?: string; // 增量文本
|
||||
content?: string; // 完整内容
|
||||
tool?: string; // 工具名称
|
||||
phase?: 'start' | 'end' | 'error';
|
||||
runId?: string; // 运行 ID
|
||||
error?: string; // 错误信息
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 配置系统
|
||||
|
||||
### 配置文件位置
|
||||
|
||||
```
|
||||
~/.openclaw/openclaw.json # 主配置
|
||||
~/.openclaw/.env # 环境变量
|
||||
```
|
||||
|
||||
### 配置层级与优先级
|
||||
|
||||
```
|
||||
agents.defaults.* # 全局默认
|
||||
↓ 覆盖
|
||||
agents.list[].* # 每个 Agent 的覆盖
|
||||
↓ 覆盖
|
||||
channels.defaults.* # 全渠道默认
|
||||
↓ 覆盖
|
||||
channels.<channel>.* # 单渠道覆盖
|
||||
↓ 覆盖
|
||||
channels.<channel>.accounts.<id>.* # 账号级覆盖
|
||||
```
|
||||
|
||||
### 热加载模式
|
||||
|
||||
| 模式 | 行为 |
|
||||
|------|------|
|
||||
| `hybrid` (默认) | 安全更改即时生效，关键更改自动重启 |
|
||||
| `hot` | 只热应用安全更改，需重启时记录警告 |
|
||||
| `restart` | 任何更改都重启 Gateway |
|
||||
| `off` | 禁用文件监控，手动重启生效 |
|
||||
|
||||
### CLI 配置命令
|
||||
|
||||
```bash
|
||||
# 查看配置
|
||||
openclaw config get agents.defaults.workspace
|
||||
|
||||
# 设置配置
|
||||
openclaw config set agents.defaults.heartbeat.every "2h"
|
||||
|
||||
# 删除配置
|
||||
openclaw config unset tools.web.search.apiKey
|
||||
|
||||
# 配置向导
|
||||
openclaw configure
|
||||
|
||||
# 完整设置向导
|
||||
openclaw onboard
|
||||
```
|
||||
|
||||
### 环境变量引用
|
||||
|
||||
```json
|
||||
{
|
||||
"gateway": {
|
||||
"auth": {
|
||||
"token": "${OPENCLAW_GATEWAY_TOKEN}"
|
||||
}
|
||||
},
|
||||
"models": {
|
||||
"providers": {
|
||||
"openai": {
|
||||
"apiKey": "${OPENAI_API_KEY}"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Skills 与 Tools
|
||||
|
||||
### Skills 加载位置与优先级
|
||||
|
||||
1. **Bundled skills**: 安装包自带
|
||||
2. **Managed/local skills**: `~/.openclaw/skills`
|
||||
3. **Workspace skills**: `<workspace>/skills`
|
||||
4. **Extra dirs**: `skills.load.extraDirs` 配置
|
||||
|
||||
**优先级**: workspace > managed > bundled > extraDirs
|
||||
|
||||
### SKILL.md 格式
|
||||
|
||||
```markdown
|
||||
---
|
||||
name: my-skill
|
||||
description: 技能描述
|
||||
homepage: https://example.com
|
||||
user-invocable: true
|
||||
disable-model-invocation: false
|
||||
---
|
||||
|
||||
# 技能标题
|
||||
|
||||
技能说明内容...
|
||||
|
||||
Use {baseDir} to reference skill folder path.
|
||||
```
|
||||
|
||||
### Skills vs Tools 区别
|
||||
|
||||
| 概念 | 描述 | 示例 |
|
||||
|------|------|------|
|
||||
| **Skills** | 任务说明 + 规则 + 可选脚本的组合 | 代码审查、文档生成 |
|
||||
| **Tools** | 类型化的可执行能力 | `exec`, `read`, `write`, `browser` |
|
||||
|
||||
### 内置 Tools
|
||||
|
||||
```json
|
||||
{
|
||||
"tools": {
|
||||
"exec": { "shell": true },
|
||||
"web": {
|
||||
"search": { "enabled": true }
|
||||
},
|
||||
"browser": { "enabled": true },
|
||||
"read": {},
|
||||
"write": {},
|
||||
"edit": {}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### MCP 支持
|
||||
|
||||
OpenClaw 原生支持 MCP (Model Context Protocol):
|
||||
- 给 Agent 扩展新的上下文来源与工具面
|
||||
- 让技能可以调用标准化外部能力
|
||||
- 让模型在不写死工具的情况下复用第三方协议能力
|
||||
|
||||
---
|
||||
|
||||
## 插件开发
|
||||
|
||||
### 插件结构
|
||||
|
||||
```
|
||||
my-plugin/
|
||||
├── openclaw.plugin.json # 必需: 插件清单
|
||||
├── index.ts # 入口文件
|
||||
├── package.json
|
||||
└── dist/
|
||||
```
|
||||
|
||||
### openclaw.plugin.json
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "my-plugin",
|
||||
"name": "My Plugin",
|
||||
"version": "1.0.0",
|
||||
"description": "Plugin description",
|
||||
"main": "dist/index.js",
|
||||
"skills": ["./skills"],
|
||||
"config": {
|
||||
"enabled": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 插件 API
|
||||
|
||||
```typescript
|
||||
interface PluginAPI {
|
||||
config: Record<string, any>;
|
||||
|
||||
// 注册 Gateway RPC 方法
|
||||
registerGatewayMethod(
|
||||
method: string,
|
||||
handler: (ctx: RpcContext) => void
|
||||
): void;
|
||||
|
||||
// 注册钩子
|
||||
registerHook(
|
||||
event: string,
|
||||
handler: (...args: any[]) => any,
|
||||
meta?: Record<string, any>
|
||||
): void;
|
||||
}
|
||||
|
||||
interface RpcContext {
|
||||
params: Record<string, any>;
|
||||
respond(ok: boolean, payload: any): void;
|
||||
}
|
||||
```
|
||||
|
||||
### ZClaw 插件示例
|
||||
|
||||
```typescript
|
||||
// plugins/zclaw-ui/index.ts
|
||||
export default function register(api: PluginAPI) {
|
||||
// 注册自定义 RPC 方法
|
||||
api.registerGatewayMethod('zclaw.clones.list', ({ respond }) => {
|
||||
const data = readZclawData();
|
||||
respond(true, { clones: data.clones });
|
||||
});
|
||||
|
||||
// 注册启动钩子
|
||||
api.registerHook('gateway:startup', async () => {
|
||||
console.log('[ZCLAW] Plugin loaded');
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 多 Agent 路由
|
||||
|
||||
### 路由规则 (按优先级)
|
||||
|
||||
1. `peer` 精确匹配 (DM/group/channel id)
|
||||
2. `parentPeer` 继承匹配 (thread 继承)
|
||||
3. `guildId + roles` (Discord 角色路由)
|
||||
4. `guildId` (Discord)
|
||||
5. `teamId` (Slack)
|
||||
6. `accountId` 规则
|
||||
7. channel-level 匹配 (`accountId: "*"`)
|
||||
8. fallback 到默认 Agent
|
||||
|
||||
### Binding 配置
|
||||
|
||||
```json
|
||||
{
|
||||
"bindings": [
|
||||
{
|
||||
"agentId": "work",
|
||||
"match": {
|
||||
"channel": "whatsapp",
|
||||
"accountId": "personal",
|
||||
"peer": { "kind": "direct", "id": "+15551234567" }
|
||||
}
|
||||
},
|
||||
{
|
||||
"agentId": "main",
|
||||
"match": { "channel": "whatsapp" }
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 多 Agent 配置示例
|
||||
|
||||
```json
|
||||
{
|
||||
"agents": {
|
||||
"list": [
|
||||
{
|
||||
"id": "home",
|
||||
"default": true,
|
||||
"workspace": "~/.openclaw/workspace-home"
|
||||
},
|
||||
{
|
||||
"id": "work",
|
||||
"workspace": "~/.openclaw/workspace-work",
|
||||
"model": "anthropic/claude-opus-4-6"
|
||||
}
|
||||
]
|
||||
},
|
||||
"bindings": [
|
||||
{ "agentId": "home", "match": { "channel": "whatsapp", "accountId": "personal" } },
|
||||
{ "agentId": "work", "match": { "channel": "whatsapp", "accountId": "biz" } }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 安全与沙箱
|
||||
|
||||
### 沙箱模式
|
||||
|
||||
| 模式 | 描述 |
|
||||
|------|------|
|
||||
| `off` | 无沙箱，直接执行 |
|
||||
| `write` | 只沙箱写操作 |
|
||||
| `all` | 所有操作都在沙箱中执行 |
|
||||
|
||||
### 工具策略
|
||||
|
||||
```json
|
||||
{
|
||||
"agents": {
|
||||
"list": [
|
||||
{
|
||||
"id": "family",
|
||||
"sandbox": { "mode": "all" },
|
||||
"tools": {
|
||||
"allow": ["read", "exec"],
|
||||
"deny": ["write", "browser"]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 安全检查清单
|
||||
|
||||
- [ ] 无硬编码密钥 (使用 env 引用)
|
||||
- [ ] DM 访问控制已配置
|
||||
- [ ] 群聊 mention 规则已设置
|
||||
- [ ] 工具权限最小化
|
||||
- [ ] 沙箱模式适当
|
||||
- [ ] Gateway 端口不对外暴露
|
||||
|
||||
---
|
||||
|
||||
## Heartbeat 机制
|
||||
|
||||
### 概念
|
||||
|
||||
Heartbeat 不是简单的 cron，而是 **定期触发一个完整 Agent turn**：
|
||||
- 默认读取 `HEARTBEAT.md`
|
||||
- 如果没事做，返回 `HEARTBEAT_OK`
|
||||
- 可以配置投递目标 (`none`、`last` 或具体渠道)
|
||||
- 可以设置 active hours
|
||||
- 支持 per-agent 覆盖
|
||||
|
||||
### 配置
|
||||
|
||||
```json
|
||||
{
|
||||
"agents": {
|
||||
"defaults": {
|
||||
"heartbeat": {
|
||||
"every": "1h",
|
||||
"activeHours": { "start": "09:00", "end": "18:00" },
|
||||
"deliverTo": "last"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### HEARTBEAT.md 示例
|
||||
|
||||
```markdown
|
||||
# 心跳任务
|
||||
|
||||
每小时检查:
|
||||
1. 是否有待处理的提醒
|
||||
2. 是否需要发送日报
|
||||
3. 日历事件提醒
|
||||
|
||||
如果无事可做，回复 HEARTBEAT_OK
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Channels 通道系统
|
||||
|
||||
### 支持的通道
|
||||
|
||||
| 通道 | 多账号 | 描述 |
|
||||
|------|--------|------|
|
||||
| WhatsApp | ✅ | 通过 Web WhatsApp |
|
||||
| Telegram | ✅ | Bot API |
|
||||
| Discord | ✅ | Bot + Guild |
|
||||
| 飞书 | ✅ | 企业自建应用 |
|
||||
| Slack | ✅ | Bot + Workspace |
|
||||
| iMessage | ❌ | macOS only |
|
||||
| Signal | ✅ | 通过 signald |
|
||||
|
||||
### 通道配置结构
|
||||
|
||||
```json
|
||||
{
|
||||
"channels": {
|
||||
"whatsapp": {
|
||||
"enabled": true,
|
||||
"dmPolicy": "pairing",
|
||||
"allowFrom": ["+15555550123"],
|
||||
"accounts": {
|
||||
"personal": {
|
||||
"authDir": "~/.openclaw/credentials/whatsapp/personal"
|
||||
},
|
||||
"biz": {
|
||||
"authDir": "~/.openclaw/credentials/whatsapp/biz"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 访问控制
|
||||
|
||||
```json
|
||||
{
|
||||
"channels": {
|
||||
"whatsapp": {
|
||||
"dmPolicy": "allowlist",
|
||||
"allowFrom": ["+15555550123"],
|
||||
"groups": {
|
||||
"*": { "requireMention": true }
|
||||
}
|
||||
}
|
||||
},
|
||||
"messages": {
|
||||
"groupChat": {
|
||||
"mentionPatterns": ["@openclaw", "小龙虾"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 最佳实践
|
||||
|
||||
### 1. 配置管理
|
||||
|
||||
```bash
|
||||
# 使用 CLI 而非直接编辑 JSON
|
||||
openclaw config set agents.defaults.model "anthropic/claude-sonnet-4-6"
|
||||
|
||||
# 验证配置
|
||||
openclaw doctor
|
||||
|
||||
# 查看日志
|
||||
openclaw logs --follow
|
||||
```
|
||||
|
||||
### 2. Agent 隔离
|
||||
|
||||
- 每个 Agent 使用独立 workspace
|
||||
- 不共享 `agentDir` (会导致 auth/session 冲突)
|
||||
- 敏感 Agent 启用沙箱
|
||||
|
||||
### 3. 密钥管理
|
||||
|
||||
```json
|
||||
// 使用环境变量引用
|
||||
{
|
||||
"models": {
|
||||
"providers": {
|
||||
"openai": {
|
||||
"apiKey": "${OPENAI_API_KEY}"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 4. 错误处理
|
||||
|
||||
- Gateway 连接是协议适配工程，不是简单的 ws 连接
|
||||
- 实现指数退避重连
|
||||
- 正确处理 `connect.challenge`
|
||||
|
||||
---
|
||||
|
||||
## ZClaw 映射指南
|
||||
|
||||
### 设置页面对应关系
|
||||
|
||||
| ZClaw 页面 | OpenClaw 子系统 | 真实目标 |
|
||||
|-----------|-----------------|----------|
|
||||
| 通用 | 系统级设置 | 控制连接状态、系统级行为开关 |
|
||||
| 模型与 API | providers / model defaults | 管理 provider 配置、主模型与 fallback |
|
||||
| MCP 服务 | Tools / MCP | 定义 Agent 可接入的外部能力 |
|
||||
| 技能 | Skills | 管理 Agent 可调用的工作流知识库 |
|
||||
| IM 频道 | Channels | 管理消息来源和路由规则 |
|
||||
| 工作区 | Workspace / Sandbox | 确定 Agent 执行边界 |
|
||||
| 数据与隐私 | Data / Telemetry | 明确数据存储位置和隐私设置 |
|
||||
| 分身/快速配置 | Agents / Bindings | 创建/配置新的 Agent 实例 |
|
||||
|
||||
### ZClaw 自定义 RPC 方法
|
||||
|
||||
```typescript
|
||||
// plugins/zclaw-ui 注册的方法
|
||||
client.listClones() // zclaw.clones.list
|
||||
client.createClone(opts) // zclaw.clones.create
|
||||
client.updateClone(id, opts) // zclaw.clones.update
|
||||
client.deleteClone(id) // zclaw.clones.delete
|
||||
client.getUsageStats() // zclaw.stats.usage
|
||||
client.getSessionStats() // zclaw.stats.sessions
|
||||
client.getWorkspaceInfo() // zclaw.workspace.info
|
||||
client.getPluginStatus() // zclaw.plugins.status
|
||||
client.getQuickConfig() // zclaw.config.quick
|
||||
client.listSkills() // zclaw.skills.list
|
||||
```
|
||||
|
||||
### 分身 (Clone) = Agent 实例
|
||||
|
||||
```typescript
|
||||
interface CloneConfig {
|
||||
id: string;
|
||||
name: string;
|
||||
role?: string;
|
||||
nickname?: string;
|
||||
scenarios?: string[];
|
||||
model?: string;
|
||||
workspaceDir?: string;
|
||||
workspaceResolvedPath?: string;
|
||||
restrictFiles?: boolean;
|
||||
privacyOptIn?: boolean;
|
||||
userName?: string;
|
||||
userRole?: string;
|
||||
bootstrapReady?: boolean;
|
||||
bootstrapFiles?: Array<{ name: string; path: string; exists: boolean }>;
|
||||
}
|
||||
```
|
||||
|
||||
### 判断标准
|
||||
|
||||
> 如果一个页面改动之后，没有改变 OpenClaw Runtime 的真实行为、真实配置、真实路由、真实工作区或真实 Agent 上下文，那它大概率还只是"演示 UI"，不是系统能力。
|
||||
|
||||
---
|
||||
|
||||
## ZCLAW 桌面 Gateway 握手排障案例（2026-03）
|
||||
|
||||
### 症状演进
|
||||
|
||||
1. 初始表现为桌面端长时间停留在“握手中...”
|
||||
2. 修正握手客户端身份后，错误表象变成 `WebSocket connection failed`
|
||||
3. 修复候选地址 fallback 的错误覆盖后，暴露出真实错误 `origin not allowed`
|
||||
4. 自动补齐 `gateway.controlUi.allowedOrigins` 后，错误继续推进为 `pairing required`
|
||||
|
||||
### 已确认的排查结论
|
||||
|
||||
- `gateway.auth.token` 已正确从 `openclaw.json` 读取并注入桌面端连接
|
||||
- Tauri 调试版实际运行的是 `target/debug/resources/openclaw-runtime`
|
||||
- Gateway WebSocket 握手客户端身份需满足当前 schema：
|
||||
- `client.id=cli`
|
||||
- `client.mode=cli`
|
||||
- `role=operator`
|
||||
- 浏览器 / WebView 环境与 Node 探针的关键差异是会附带 `Origin`
|
||||
- Tauri WebView 需要被加入：
|
||||
- `gateway.controlUi.allowedOrigins`
|
||||
- `http://tauri.localhost`
|
||||
- `tauri://localhost`
|
||||
- 当 `origin not allowed` 被解决后，Gateway 会继续要求对当前设备完成 pairing
|
||||
|
||||
### 有效的排障方法
|
||||
|
||||
#### 1. 先分离“网络失败”和“协议失败”
|
||||
|
||||
如果 UI 只显示 `WebSocket connection failed`，先检查连接代码是否在多个候选地址之间 fallback，并把更早的握手错误覆盖掉。
|
||||
ZCLAW 的处理方式是：
|
||||
|
||||
- 仅对以下错误继续尝试下一个候选地址：
|
||||
- `WebSocket connection failed`
|
||||
- `Gateway handshake timed out`
|
||||
- `WebSocket closed before handshake completed`
|
||||
- 对握手 / 鉴权 / schema 错误立即停止 fallback，原样暴露给 UI
|
||||
|
||||
#### 2. 用独立协议探针验证 Gateway 真正接受的握手参数
|
||||
|
||||
在本案例中，Node 探针证明了：
|
||||
|
||||
- `cli/cli/operator` 是可接受的客户端身份
|
||||
- 设备 `deviceId` 必须和 `publicKey` 的派生规则一致
|
||||
- 仅靠终端探针成功并不能证明 Tauri WebView 一定能连通，因为 WebView 会额外带 `Origin`
|
||||
|
||||
#### 3. 优先检查本地 Gateway 的 pending / paired devices
|
||||
|
||||
可用命令：
|
||||
|
||||
```powershell
|
||||
openclaw devices list --json
|
||||
```
|
||||
|
||||
本案例中，`pairing required` 发生时，`devices list` 已能看到当前桌面端的 pending 请求，说明：
|
||||
|
||||
- 连接已到达 Gateway
|
||||
- 当前缺的是“批准这台设备”，不是 token 或网络
|
||||
|
||||
### ZCLAW 当前修复策略
|
||||
|
||||
#### A. 连接前自动准备本地 Gateway
|
||||
|
||||
桌面端在 Tauri 运行时连接前，先调用本地准备逻辑：
|
||||
|
||||
- 确保 `gateway.controlUi.allowedOrigins` 包含：
|
||||
- `http://tauri.localhost`
|
||||
- `tauri://localhost`
|
||||
- 如果配置被修改且 Gateway 正在运行，自动重启 Gateway 使配置生效
|
||||
|
||||
#### B. 握手遇到 `pairing required` 时自动批准本机桌面设备
|
||||
|
||||
当前策略只在**本地 loopback Gateway** 下启用：
|
||||
|
||||
- 仅匹配 `ws://127.0.0.1:*` 或 `ws://localhost:*`
|
||||
- 前端读取当前桌面端持久化的 `deviceId/publicKey`
|
||||
- Tauri 侧调用：
|
||||
|
||||
```powershell
|
||||
openclaw devices list --json
|
||||
openclaw devices approve <requestId> --json --token <token> --url <url>
|
||||
```
|
||||
|
||||
- 只批准同时匹配以下条件的 pending request：
|
||||
- `deviceId`
|
||||
- `publicKey`
|
||||
- 批准成功后立即重试连接
|
||||
|
||||
### 后续遇到同类问题时的最短排障顺序
|
||||
|
||||
1. 确认当前运行的是目标 `desktop.exe`
|
||||
2. 确认 `openclaw.json` 中有 `gateway.auth.token`
|
||||
3. 确认 WebView localStorage 已持久化 `zclaw_gateway_url` / `zclaw_gateway_token`
|
||||
4. 把握手错误原样暴露，不要让 fallback 覆盖
|
||||
5. 若报 `origin not allowed`：
|
||||
- 检查 `gateway.controlUi.allowedOrigins`
|
||||
6. 若报 `pairing required`：
|
||||
- 检查 `openclaw devices list --json`
|
||||
- 看当前桌面设备是否进入 `pending`
|
||||
7. 如果 pending 存在，优先做“只批准本机当前设备”的自动化，而不是直接放宽所有设备
|
||||
|
||||
---
|
||||
|
||||
## ZCLAW 桌面聊天 / 模型配置协议错配案例（2026-03）
|
||||
|
||||
### 症状
|
||||
|
||||
- 桌面端显示 Gateway 已连接，但发送消息立即失败
|
||||
- 常见错误文案为：
|
||||
- `invalid agent params: must have required property 'idempotencyKey'`
|
||||
- `invalid agent params: must NOT have additional properties: model`
|
||||
- 模型与 API 页面可以切换本地显示值，但不会改变 Gateway 的真实默认模型
|
||||
|
||||
### 根因
|
||||
|
||||
- ZCLAW 桌面端此前仍按旧协议调用 `agent`：
|
||||
- 发送了顶层 `model`
|
||||
- 没有发送必填 `idempotencyKey`
|
||||
- 当前 OpenClaw runtime 的 `agent` schema 已变更为：
|
||||
- `message` 必填
|
||||
- `idempotencyKey` 必填
|
||||
- `model` 不是允许的顶层字段
|
||||
- 桌面端“模型切换”之前只是本地 Zustand 状态，没有写回 Gateway 配置，因此不会影响真实运行时行为
|
||||
|
||||
### 有效排查方法
|
||||
|
||||
1. 不要只看仓库里的旧 client 封装，要直接核对当前实际 runtime 的 schema
|
||||
2. 如果仓库源码里搜不到新字段（如 `idempotencyKey`），优先检查打包后的 `openclaw-runtime`
|
||||
3. 在本案例中，真实约束来自 runtime 中的 `AgentParamsSchema`：
|
||||
- `message: NonEmptyString`
|
||||
- `idempotencyKey: NonEmptyString`
|
||||
- `agentId/sessionKey/...` 可选
|
||||
- `additionalProperties: false`
|
||||
4. 对模型配置，不要只改前端本地状态；应优先确认 runtime 是否已暴露：
|
||||
- `models.list`
|
||||
- `config.get`
|
||||
- `config.apply`
|
||||
|
||||
### ZCLAW 当前修复策略
|
||||
|
||||
- `desktop/src/lib/gateway-client.ts`
|
||||
- `chat()` 改为发送 `idempotencyKey`
|
||||
- 停止发送非法顶层 `model`
|
||||
- 新增 `models.list` / `config.get` / `config.apply` 客户端接口
|
||||
- `desktop/src/store/chatStore.ts`
|
||||
- 发送消息时不再把本地 `clone_*` 直接当作 runtime `agentId`
|
||||
- 继续保留前端会话与分身关联信息，避免 UI 上下文丢失
|
||||
- `desktop/src/components/Settings/ModelsAPI.tsx`
|
||||
- 改为基于真实 Gateway 配置读写默认模型与中文模型插件 Provider 配置
|
||||
- `desktop/src/components/ChatArea.tsx`
|
||||
- 聊天输入区模型下拉改为通过 `config.apply` 更新 Gateway 默认模型，而不是只切本地显示
|
||||
|
||||
### 当前结论
|
||||
|
||||
- 如果错误同时出现 `missing idempotencyKey` 和 `unexpected property model`，优先判断为“桌面端协议版本落后于当前 runtime”
|
||||
- 如果模型切换只改变 UI 文案、不会改变新会话的实际模型，说明它仍是“演示态”，应改为落到 `config.get/config.apply`
|
||||
|
||||
---
|
||||
|
||||
## 参考资料
|
||||
|
||||
### 官方文档
|
||||
|
||||
- [OpenClaw 官方文档](https://docs.openclaw.ai/)
|
||||
- [Gateway 配置参考](https://docs.openclaw.ai/gateway/configuration)
|
||||
- [Multi-Agent 路由](https://docs.openclaw.ai/concepts/multi-agent)
|
||||
- [Skills 文档](https://docs.openclaw.ai/tools/skills)
|
||||
- [Heartbeat 文档](https://docs.openclaw.ai/gateway/heartbeat)
|
||||
|
||||
### 社区资源
|
||||
|
||||
- [OpenClaw 中文指南](https://yeasy.gitbook.io/openclaw_guide/)
|
||||
- [awesome-openclaw-skills](https://github.com/VoltAgent/awesome-openclaw-skills)
|
||||
- [OpenClaw 源码解析](https://www.ququ123.top/2026/03/openclaw-gateway-startup/)
|
||||
|
||||
### ZClaw 内部参考
|
||||
|
||||
- `docs/openclaw-deep-dive.md` - 深度分析
|
||||
- `config/openclaw.default.json` - 默认配置
|
||||
- `plugins/zclaw-ui/index.ts` - 插件实现
|
||||
- `desktop/src/lib/gateway-client.ts` - 客户端实现
|
||||
479
docs/archive/openclaw-legacy/zclaw-openclaw-roadmap.md
Normal file
479
docs/archive/openclaw-legacy/zclaw-openclaw-roadmap.md
Normal file
@@ -0,0 +1,479 @@
|
||||
# ZCLAW 功能 -> OpenClaw 子系统落地路线图
|
||||
|
||||
**日期**: 2026-03-12
|
||||
**依据**: `docs/openclaw-deep-dive.md`
|
||||
**目标**: 把 ZCLAW 从“像 OpenClaw 的桌面 UI”推进为“真正围绕 OpenClaw Runtime 的 Tauri 封装层”。
|
||||
|
||||
---
|
||||
|
||||
## 一、总原则
|
||||
|
||||
后续所有功能都按同一条映射链设计与验收：
|
||||
|
||||
> ZCLAW 功能 -> OpenClaw 子系统 -> 真实配置/文件/路由/运行时行为 -> 前端展示与操作
|
||||
|
||||
如果一个功能改完后：
|
||||
|
||||
- 没有改变 OpenClaw 的真实配置
|
||||
- 没有改变 Agent 的真实身份/工作区/边界
|
||||
- 没有改变 Channel / Heartbeat / Skills / MCP / Gateway 的真实行为
|
||||
|
||||
那它仍然只是 UI 占位，不算真正落地。
|
||||
|
||||
---
|
||||
|
||||
## 二、路线图总览
|
||||
|
||||
| 阶段 | 主题 | 目标 | 结果 |
|
||||
|---|---|---|---|
|
||||
| **R0** | Gateway 协议与连接 | 让 ZCLAW 成为一个可稳定连上 OpenClaw Gateway 的控制端 | `连接/重连/状态/错误` 可用 |
|
||||
| **R1** | Agent 模型收敛 | 把 `分身/快速配置/右侧 Agent 面板` 收敛成真实 Agent Profile | `Clone -> Agent Profile` |
|
||||
| **R2** | 配置控制面板化 | 把设置页从“本地状态”收敛为 OpenClaw 配置编辑器 | `config/get/patch/apply` |
|
||||
| **R3** | Workspace / Bootstrap 文件 | 让 Agent 身份、人格、用户上下文落到 workspace 文件 | `IDENTITY/SOUL/USER/AGENTS` |
|
||||
| **R4** | Channels / Bindings | 让 IM 页面真正管理渠道输入与路由 | `channels + bindings` |
|
||||
| **R5** | Heartbeat / 定时任务 | 把“定时任务页”升级为 Heartbeat 控制台 | `heartbeat + HEARTBEAT.md` |
|
||||
| **R6** | Skills / MCP | 让技能与工具能力成为真实可管理能力面 | `skills + mcp` |
|
||||
| **R7** | 产品化壳层 | 完成 Tauri sidecar、安装、诊断、迁移与回归体系 | 可交付桌面产品 |
|
||||
|
||||
---
|
||||
|
||||
## 三、功能 -> OpenClaw 子系统映射
|
||||
|
||||
## 1. Gateway 连接
|
||||
|
||||
### 对应子系统
|
||||
|
||||
- `Gateway WebSocket Protocol`
|
||||
- `device auth`
|
||||
- `pairing`
|
||||
- `scopes`
|
||||
- `auth.token / auth.deviceToken`
|
||||
|
||||
### ZCLAW 当前功能
|
||||
|
||||
- 设置页里的 Gateway URL
|
||||
- 右侧连接状态卡片
|
||||
- 自动连接逻辑
|
||||
|
||||
### 应落地到
|
||||
|
||||
- `desktop/src/lib/gateway-client.ts`
|
||||
- 协议握手适配
|
||||
- 正确错误码展示
|
||||
- 后续可补 `pairing required / token drift / device auth` 诊断提示
|
||||
|
||||
### 验收标准
|
||||
|
||||
- 能稳定连接本地 OpenClaw Gateway
|
||||
- 状态能从 `disconnected -> connecting -> handshaking -> connected`
|
||||
- 错误能区分：
|
||||
- token 问题
|
||||
- device auth 问题
|
||||
- mode/client id 问题
|
||||
- pairing 问题
|
||||
|
||||
### 优先级
|
||||
|
||||
- **最高**
|
||||
|
||||
---
|
||||
|
||||
## 2. 分身 / 快速配置 / 右侧 Agent 区域
|
||||
|
||||
### 对应子系统
|
||||
|
||||
- `agents.list[]`
|
||||
- `workspace / agentDir`
|
||||
- `IDENTITY.md`
|
||||
- `SOUL.md`
|
||||
- `USER.md`
|
||||
- `AGENTS.md`
|
||||
|
||||
### ZCLAW 当前功能
|
||||
|
||||
- 左侧分身列表
|
||||
- 快速配置弹层
|
||||
- 右侧 `Agent` 标签页
|
||||
|
||||
### 正确语义
|
||||
|
||||
- **分身 = Agent 实例**
|
||||
- **快速配置 = 新建 / 更新 Agent Profile**
|
||||
- **右侧 Agent 区域 = 当前 Agent 的身份与上下文可视化**
|
||||
|
||||
### 应落地到
|
||||
|
||||
- 插件层：`zclaw-ui` 中的 Agent Profile RPC
|
||||
- 数据层：从 `CloneConfig` 升级为 `AgentProfile`
|
||||
- 前端层：`CloneManager / RightPanel / chatStore`
|
||||
- 工作区层：为每个 Agent 生成/更新 bootstrap 文件
|
||||
|
||||
### 验收标准
|
||||
|
||||
- 创建 Agent 后，左侧、聊天头部、右侧 Agent 面板一致
|
||||
- Agent 的身份字段有统一来源
|
||||
- 不再依赖单纯前端本地 fallback agent
|
||||
|
||||
### 优先级
|
||||
|
||||
- **最高**
|
||||
|
||||
---
|
||||
|
||||
## 3. 工作区设置
|
||||
|
||||
### 对应子系统
|
||||
|
||||
- `agents.defaults.workspace`
|
||||
- `agents.list[].workspace`
|
||||
- `sandbox`
|
||||
- `tools allow/deny`
|
||||
- bootstrap files
|
||||
|
||||
### ZCLAW 当前功能
|
||||
|
||||
- 工作目录
|
||||
- 文件限制
|
||||
- 自动保存上下文
|
||||
- 文件监听
|
||||
|
||||
### 正确语义
|
||||
|
||||
工作区不是 UI 里的一个路径输入框，而是：
|
||||
|
||||
- Agent 的上下文根目录
|
||||
- bootstrap 文件所在位置
|
||||
- 文件访问边界
|
||||
- 工具执行边界的基础
|
||||
|
||||
### 应落地到
|
||||
|
||||
- `config.patch/apply`
|
||||
- workspace info RPC
|
||||
- Agent 级与 defaults 级区分
|
||||
|
||||
### 验收标准
|
||||
|
||||
- 改动工作区后，OpenClaw 配置能真实更新
|
||||
- 右侧 Agent 面板能展示当前 Agent 的工作目录与边界
|
||||
|
||||
### 优先级
|
||||
|
||||
- **高**
|
||||
|
||||
---
|
||||
|
||||
## 4. IM 频道页
|
||||
|
||||
### 对应子系统
|
||||
|
||||
- `channels.*`
|
||||
- `channels.<channel>.accounts`
|
||||
- `bindings`
|
||||
- mention / allowlist / route target
|
||||
|
||||
### 正确语义
|
||||
|
||||
IM 页不是“集成列表”，而是：
|
||||
|
||||
- 管理消息从哪里进入系统
|
||||
- 管理这些消息如何路由到哪个 Agent
|
||||
|
||||
### 应落地到
|
||||
|
||||
- `channels.list/status` + 插件探测
|
||||
- 后续补 `bindings` 可视化
|
||||
- 账号级与渠道级配置区分
|
||||
|
||||
### 验收标准
|
||||
|
||||
- 至少能看清当前有哪些 channel/account
|
||||
- 至少能表达“这个输入源会进入哪个 Agent”
|
||||
|
||||
### 优先级
|
||||
|
||||
- **高**
|
||||
|
||||
---
|
||||
|
||||
## 5. 定时任务页
|
||||
|
||||
### 对应子系统
|
||||
|
||||
- `agents.defaults.heartbeat`
|
||||
- `agents.list[].heartbeat`
|
||||
- `HEARTBEAT.md`
|
||||
|
||||
### 正确语义
|
||||
|
||||
不是单纯 cron 列表，而是：
|
||||
|
||||
- 哪些 Agent 会被定期唤醒
|
||||
- 唤醒后看什么
|
||||
- 没事时如何 ack
|
||||
- 结果发去哪里
|
||||
|
||||
### 应落地到
|
||||
|
||||
- `heartbeat.tasks` 读取
|
||||
- heartbeat 配置编辑
|
||||
- `HEARTBEAT.md` 管理入口
|
||||
|
||||
### 验收标准
|
||||
|
||||
- UI 中明确 Heartbeat 是 Agent turn，不是普通定时脚本
|
||||
|
||||
### 优先级
|
||||
|
||||
- **中高**
|
||||
|
||||
---
|
||||
|
||||
## 6. 技能页
|
||||
|
||||
### 对应子系统
|
||||
|
||||
- `skills`
|
||||
- `SKILL.md`
|
||||
- extra skill dirs
|
||||
|
||||
### 正确语义
|
||||
|
||||
技能页的目标是：
|
||||
|
||||
- 告诉用户 Agent 会做什么
|
||||
- 告诉用户这些能力从哪些 skill 目录和手册里来
|
||||
|
||||
### 应落地到
|
||||
|
||||
- 真实技能目录扫描
|
||||
- `openclaw skills list/info/check` 对应能力
|
||||
- extraDirs 与当前 Agent 能力面关联
|
||||
|
||||
### 验收标准
|
||||
|
||||
- 不只是维护一个字符串数组
|
||||
- 能看到技能来源与状态
|
||||
|
||||
### 优先级
|
||||
|
||||
- **中高**
|
||||
|
||||
---
|
||||
|
||||
## 7. MCP 服务页
|
||||
|
||||
### 对应子系统
|
||||
|
||||
- MCP / RPC adapters / 外部工具能力面
|
||||
|
||||
### 正确语义
|
||||
|
||||
不是前端模板收藏，而是：
|
||||
|
||||
- Agent 当前能调用哪些外部能力
|
||||
- 这些能力如何被配置、启用与管理
|
||||
|
||||
### 优先级
|
||||
|
||||
- **中高**
|
||||
|
||||
---
|
||||
|
||||
## 8. 用量统计 / 会话 / 系统信息
|
||||
|
||||
### 对应子系统
|
||||
|
||||
- sessions
|
||||
- usage
|
||||
- plugin status
|
||||
- gateway health
|
||||
|
||||
### 目标
|
||||
|
||||
- 提供可观察性
|
||||
- 让用户知道 Agent 是否真的在运行、运行了多少、谁在消耗成本
|
||||
|
||||
### 优先级
|
||||
|
||||
- **中**
|
||||
|
||||
---
|
||||
|
||||
## 四、阶段化执行方案
|
||||
|
||||
## Phase A：把“分身系统”收敛成 Agent Profile 层
|
||||
|
||||
### 目标
|
||||
|
||||
先把最接近用户感知的核心链路做对：
|
||||
|
||||
- 左侧分身
|
||||
- 快速配置
|
||||
- 右侧 Agent 面板
|
||||
- 聊天头部 Agent 名称
|
||||
|
||||
### 具体动作
|
||||
|
||||
1. 引入统一 `AgentProfile` 类型
|
||||
2. 插件层 `CloneConfig` 升级为更完整 profile
|
||||
3. store 层把 `clones` 视为 `agentProfiles`
|
||||
4. `chatStore.currentAgent` 不再自带孤立 fallback 逻辑
|
||||
5. quick config 默认值与 workspace/profile 字段打通
|
||||
|
||||
### 阶段验收
|
||||
|
||||
- 创建出来的 Agent，在所有 UI 位置是一致实体
|
||||
- 刷新后仍能从持久化数据恢复
|
||||
|
||||
---
|
||||
|
||||
## Phase B：让 Quick Config 不再只是 JSON 临时缓存
|
||||
|
||||
### 目标
|
||||
|
||||
把 quick config 从：
|
||||
|
||||
- `zclaw.config.quick` 的一份附加偏好
|
||||
|
||||
收敛到：
|
||||
|
||||
- Agent 创建向导 / 最近一次 Agent 草稿
|
||||
|
||||
### 具体动作
|
||||
|
||||
1. 区分 `quickConfigDraft` 与 `agentProfiles`
|
||||
2. 保存快速配置时，不再误导成“系统总配置”
|
||||
3. 后续为 bootstrap 文件生成预留字段映射
|
||||
|
||||
### 阶段验收
|
||||
|
||||
- quick config 有清晰职责
|
||||
- 不和真实 Agent Profile 混淆
|
||||
|
||||
---
|
||||
|
||||
## Phase C：把 Agent Profile 继续落到 workspace/bootstrap 文件
|
||||
|
||||
### 目标
|
||||
|
||||
让 Agent 的身份不是只活在 `zclaw-data.json` 里。
|
||||
|
||||
### 具体动作
|
||||
|
||||
1. 为 Agent 生成独立 workspace 或 profile 目录
|
||||
2. 写入/更新：
|
||||
- `IDENTITY.md`
|
||||
- `USER.md`
|
||||
- `SOUL.md`
|
||||
- `AGENTS.md`
|
||||
3. 让右侧 Agent 面板字段与这些文件的内容有映射关系
|
||||
|
||||
### 阶段验收
|
||||
|
||||
- Agent 真正拥有可审计、可读、可迁移的文本身份
|
||||
|
||||
---
|
||||
|
||||
## Phase D：设置页全面收敛为 OpenClaw 配置控制台
|
||||
|
||||
### 目标
|
||||
|
||||
把现有 Settings 页从 local state 管理升级为：
|
||||
|
||||
- OpenClaw config 编辑器
|
||||
- Gateway runtime 控制台
|
||||
|
||||
### 关键动作
|
||||
|
||||
- 优先用 `config.get / patch / apply`
|
||||
- 区分：
|
||||
- defaults
|
||||
- per-agent
|
||||
- per-channel/account
|
||||
|
||||
---
|
||||
|
||||
## 五、当前代码库的立即修正项
|
||||
|
||||
## 1. 数据模型不一致
|
||||
|
||||
当前前端 `Clone` 已经包含：
|
||||
|
||||
- `workspaceDir`
|
||||
- `restrictFiles`
|
||||
- `privacyOptIn`
|
||||
- `userName`
|
||||
- `userRole`
|
||||
|
||||
但插件层 `CloneConfig` 仍未完整持久化这些字段。
|
||||
|
||||
### 立即动作
|
||||
|
||||
- 插件层升级 `CloneConfig`
|
||||
- `create/update/list` 全链路透传这些字段
|
||||
|
||||
## 2. `chatStore` 与 `gatewayStore` 双重 Agent 模型并存
|
||||
|
||||
当前问题：
|
||||
|
||||
- `chatStore.agents/currentAgent` 仍是 UI 型实体
|
||||
- `gatewayStore.clones` 是更接近真实 profile 的实体
|
||||
|
||||
### 立即动作
|
||||
|
||||
- 让 `currentAgent` 选择依赖真实 profile id
|
||||
- 补一个从 profile 派生 chat agent 的适配层
|
||||
|
||||
## 3. quickConfig 语义仍不清晰
|
||||
|
||||
### 立即动作
|
||||
|
||||
- 在代码与文档中明确：
|
||||
- 它是草稿 / 最近一次快速配置输入
|
||||
- 它不是 Agent 全量真源
|
||||
|
||||
---
|
||||
|
||||
## 六、下一步开发顺序
|
||||
|
||||
### 立即执行
|
||||
|
||||
1. **修 Agent Profile 数据模型一致性**
|
||||
2. **收敛 Quick Config 与 Agent Profile 的职责边界**
|
||||
3. **让右侧 Agent 面板只读真实 profile 数据**
|
||||
|
||||
### 之后执行
|
||||
|
||||
4. Gateway 协议继续收口
|
||||
5. Workspace / bootstrap 文件生成
|
||||
6. IM / Heartbeat / Skills / MCP 分页逐个真实化
|
||||
|
||||
---
|
||||
|
||||
## 七、完成定义
|
||||
|
||||
当下面这些条件满足时，才能认为 ZCLAW 已经真正开始 OpenClaw 化：
|
||||
|
||||
- 分身不再只是 UI 列表，而是 Agent 实体
|
||||
- 快速配置不再只是表单，而是 Agent 创建向导
|
||||
- 右侧 Agent 面板展示真实 Agent Profile
|
||||
- 设置页改的是 OpenClaw 真实运行配置
|
||||
- Heartbeat / Channels / Skills / MCP 不再是占位页
|
||||
- Gateway 连接协议稳定可诊断
|
||||
|
||||
---
|
||||
|
||||
## 八、本轮执行建议
|
||||
|
||||
本轮优先做：
|
||||
|
||||
- **Agent Profile 统一模型**
|
||||
- **插件层持久化字段补齐**
|
||||
- **前端选择/展示逻辑收敛**
|
||||
|
||||
原因：
|
||||
|
||||
- 这条链最贴近用户感知
|
||||
- 能直接验证 `openclaw-deep-dive.md` 的核心判断
|
||||
- 也是后续 workspace/bootstrap/channel/binding 的前置基础
|
||||
816
docs/claw-ecosystem-deep-dive-report.md
Normal file
816
docs/claw-ecosystem-deep-dive-report.md
Normal file
@@ -0,0 +1,816 @@
|
||||
# Claw 生态系统深度调研报告
|
||||
|
||||
> **调研主题**：深度对比分析 OpenClaw 及其衍生系统（OpenFang/ZeroClaw/NanoClaw）功能架构，评估 QClaw、AutoClaw 的技术选型建议
|
||||
>
|
||||
> **调研日期**：2026-03-13
|
||||
>
|
||||
> **调研方法**：多源搜索（GitHub、技术博客、知乎、Medium、Reddit）、交叉验证、架构分析
|
||||
|
||||
---
|
||||
|
||||
## 目录
|
||||
|
||||
1. [执行摘要](#执行摘要)
|
||||
2. [Claw 系列发展脉络](#claw-系列发展脉络)
|
||||
3. [OpenClaw 核心架构深度分析](#openclaw-核心架构深度分析)
|
||||
4. [衍生系统对比分析](#衍生系统对比分析)
|
||||
5. [QClaw 与 AutoClaw 技术分析](#qclaw-与-autoclaw-技术分析)
|
||||
6. [技术选型建议](#技术选型建议)
|
||||
7. [独立洞察与趋势预测](#独立洞察与趋势预测)
|
||||
8. [参考来源](#参考来源)
|
||||
|
||||
---
|
||||
|
||||
## 执行摘要
|
||||
|
||||
### 核心发现
|
||||
|
||||
1. **OpenClaw 是当前最成熟的个人 AI 助手框架**，由奥地利开发者 Peter Steinberger 于 2025 年 11 月创建，4 个月内获得 25 万+ GitHub Stars，成为 GitHub 历史增长最快的开源项目。
|
||||
|
||||
2. **Claw 生态系统呈现三层分化**：
|
||||
- **完整方案层**：OpenClaw（功能全、生态丰富）
|
||||
- **轻量替代层**：ZeroClaw（Rust 极致性能）、NanoClaw（容器隔离）
|
||||
- **专用变体层**：PicoClaw、TinyClaw、IronClaw 等
|
||||
|
||||
3. **QClaw 和 AutoClaw 的技术选型建议**：
|
||||
- **QClaw（腾讯）**：建议基于 **OpenClaw**，因其需要微信/QQ 深度集成和大规模用户支持
|
||||
- **AutoClaw**：建议基于 **ZeroClaw**，因其定位为边缘计算、Docker 容器化的轻量级 Agent
|
||||
|
||||
### 关键数据
|
||||
|
||||
| 指标 | OpenClaw | ZeroClaw | NanoClaw |
|
||||
|------|----------|----------|----------|
|
||||
| **GitHub Stars** | 250,000+ | ~15,000 | ~8,000 |
|
||||
| **代码规模** | ~390,000 行 | ~50,000 行 | ~5,000 行 |
|
||||
| **内存占用** | >1GB | <5MB | >100MB |
|
||||
| **启动时间** | 2-5 秒 | <10ms | ~30 秒 |
|
||||
| **语言** | TypeScript | Rust | TypeScript |
|
||||
| **技能数量** | 13,729+ | 兼容 OpenClaw | Skills 系统 |
|
||||
|
||||
---
|
||||
|
||||
## Claw 系列发展脉络
|
||||
|
||||
### 时间线
|
||||
|
||||
```
|
||||
2025-11 ─────────────────────────────────────────────────────────────► 2026-03
|
||||
|
||||
│
|
||||
├─► OpenClaw v1.0 发布 (Peter Steinberger)
|
||||
│ └─ 原名 Clawdbot/Moltbot
|
||||
│
|
||||
├─► 2025-12: GitHub Stars 突破 10 万
|
||||
│
|
||||
├─► 2026-01: 生态爆发期
|
||||
│ ├─ ZeroClaw 发布 (Rust 重写)
|
||||
│ ├─ NanoClaw 发布 (精简版)
|
||||
│ ├─ PicoClaw, TinyClaw, IronClaw 相继出现
|
||||
│ └─ ClawHub 技能市场上线
|
||||
│
|
||||
├─► 2026-02: 企业采用期
|
||||
│ ├─ 腾讯发布 QClaw 内测
|
||||
│ ├─ OpenAI 成立 OpenClaw 基金会
|
||||
│ └─ LongCat 效率引擎集成
|
||||
│
|
||||
└─► 2026-03: 生态成熟期
|
||||
├─ 13,729+ 技能发布
|
||||
├─ 100,000+ 活跃用户
|
||||
└─ 多个企业级变体发布
|
||||
```
|
||||
|
||||
### 系统关系图谱
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ OpenClaw (核心) │
|
||||
│ Peter Steinberger @steipete │
|
||||
│ 2025-11 首发 │
|
||||
│ 250,000+ GitHub Stars │
|
||||
└─────────────────┬───────────────────┘
|
||||
│
|
||||
┌────────────────────────────┼────────────────────────────┐
|
||||
│ │ │
|
||||
▼ ▼ ▼
|
||||
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
|
||||
│ OpenFang │ │ ZeroClaw │ │ NanoClaw │
|
||||
│ Rust 重写 │ │ Rust 重写 │ │ TypeScript │
|
||||
│ 生产级 OS │ │ 极致轻量 │ │ 容器隔离 │
|
||||
│ 16 层安全 │ │ <5MB RAM │ │ Agent Swarms │
|
||||
│ 40 通道 │ │ 边缘计算 │ │ 群组隔离 │
|
||||
│ Hands 系统 │ │ │ │ │
|
||||
└─────────────────┘ └─────────────────┘ └─────────────────┘
|
||||
│ │ │
|
||||
└────────────────────────────┼────────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────────────────┐
|
||||
│ 其他变体 │
|
||||
│ │
|
||||
│ • PicoClaw (极简) │
|
||||
│ • TinyClaw (轻量) │
|
||||
│ • IronClaw (安全强化) │
|
||||
│ • Nanobot (自动化) │
|
||||
│ • ClawWork (工作流) │
|
||||
└─────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────────────────┐
|
||||
│ 企业定制版本 │
|
||||
│ │
|
||||
│ • QClaw (腾讯) │
|
||||
│ • AutoClaw (轻量容器) │
|
||||
│ • LongCat (美团) │
|
||||
└─────────────────────────┘
|
||||
```
|
||||
|
||||
### 设计哲学对比
|
||||
|
||||
| 系统 | 设计哲学 | 核心取舍 |
|
||||
|------|----------|----------|
|
||||
| **OpenClaw** | "Gateway 是控制平面，助手才是产品" | 功能完整 vs 复杂度高 |
|
||||
| **ZeroClaw** | "极致轻量，边缘优先" | 性能 vs 生态丰富度 |
|
||||
| **NanoClaw** | "小到可以理解" | 简洁 vs 功能完整 |
|
||||
| **PicoClaw** | "最小可行" | 极简 vs 扩展性 |
|
||||
|
||||
---
|
||||
|
||||
## OpenClaw 核心架构深度分析
|
||||
|
||||
### 整体架构图
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────────┐
|
||||
│ 通信渠道层 (Channels) │
|
||||
│ WhatsApp | Telegram | Slack | Discord | Signal | iMessage | Matrix │
|
||||
│ Feishu | LINE | Teams | WebChat | Nostr | Twitch | Zalo | IRC │
|
||||
└───────────────────────────────────┬─────────────────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────────────────────────────────────────────────────────────────┐
|
||||
│ Gateway 控制平面 │
|
||||
│ ws://127.0.0.1:18789 │
|
||||
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
|
||||
│ │ Sessions │ │ Channels │ │ Config │ │ Cron │ │
|
||||
│ │ 会话管理 │ │ 渠道管理 │ │ 配置管理 │ │ 定时任务 │ │
|
||||
│ └─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘ │
|
||||
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
|
||||
│ │ Webhooks │ │ Presence │ │ Tools │ │ Canvas │ │
|
||||
│ │ 钩子触发 │ │ 在线状态 │ │ 工具调用 │ │ 可视化面板 │ │
|
||||
│ └─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘ │
|
||||
└───────────────────────────────────┬─────────────────────────────────────┘
|
||||
│
|
||||
┌─────────────────────────┼─────────────────────────┐
|
||||
│ │ │
|
||||
▼ ▼ ▼
|
||||
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
|
||||
│ Pi Agent │ │ CLI / WebChat │ │ Companion Apps │
|
||||
│ (RPC 模式) │ │ 命令行/Web │ │ macOS/iOS/And │
|
||||
│ │ │ │ │ roid │
|
||||
│ ┌───────────┐ │ │ ┌───────────┐ │ │ │
|
||||
│ │ Tool │ │ │ │ Agent │ │ │ Voice Wake │
|
||||
│ │ Streaming │ │ │ │ Commands │ │ │ Canvas │
|
||||
│ │ Block │ │ │ │ Control │ │ │ Camera │
|
||||
│ │ Streaming │ │ │ │ Debug │ │ │ Notifications│
|
||||
│ └───────────┘ │ │ └───────────┘ │ │ │
|
||||
└─────────────────┘ └─────────────────┘ └─────────────────┘
|
||||
```
|
||||
|
||||
### 核心子系统
|
||||
|
||||
#### 1. Gateway WebSocket 网络
|
||||
|
||||
**职责**：单一 WebSocket 控制平面，管理所有客户端、工具和事件
|
||||
|
||||
**关键特性**：
|
||||
- 会话管理、状态持久化、配置热更新
|
||||
- Cron 定时任务、Webhook 触发器
|
||||
- 默认端口：18789
|
||||
|
||||
```typescript
|
||||
// 配置示例
|
||||
gateway:
|
||||
bind: loopback // 绑定到本地回环
|
||||
port: 18789 // WebSocket 端口
|
||||
tailscale:
|
||||
mode: off|serve|funnel // Tailscale 暴露模式
|
||||
auth:
|
||||
mode: password // 认证模式
|
||||
```
|
||||
|
||||
#### 2. Agent Runtime (Pi)
|
||||
|
||||
**设计模式**：RPC 模式的 Agent 运行时
|
||||
|
||||
**Agent Loop 架构**：
|
||||
```
|
||||
Think → Plan → Act → Observe → (循环)
|
||||
│ │ │ │
|
||||
▼ ▼ ▼ ▼
|
||||
推理 规划 执行 观察
|
||||
```
|
||||
|
||||
**核心能力**：
|
||||
- Tool Streaming：工具执行状态的实时流式传输
|
||||
- Block Streaming：响应内容的分块流式输出
|
||||
- Session Model：main 会话、群组隔离、激活模式
|
||||
|
||||
#### 3. 插件/技能系统
|
||||
|
||||
**三层技能架构**：
|
||||
|
||||
| 类型 | 位置 | 说明 |
|
||||
|------|------|------|
|
||||
| **Bundled Skills** | 内置 | 核心技能，随 Gateway 分发 |
|
||||
| **Managed Skills** | ClawHub | 自动搜索、按需拉取 |
|
||||
| **Workspace Skills** | `~/.openclaw/workspace/skills/` | 用户自定义技能 |
|
||||
|
||||
**技能定义结构**：
|
||||
```
|
||||
~/.openclaw/workspace/
|
||||
├── AGENTS.md # Agent 行为定义
|
||||
├── SOUL.md # 人格/身份定义
|
||||
├── TOOLS.md # 工具使用指南
|
||||
└── skills/
|
||||
└── <skill-name>/
|
||||
└── SKILL.md # 技能描述文件
|
||||
```
|
||||
|
||||
#### 4. 多渠道适配器
|
||||
|
||||
**支持渠道** (20+)：
|
||||
|
||||
| 渠道 | 实现库 | 特性 |
|
||||
|------|--------|------|
|
||||
| WhatsApp | Baileys | 设备配对、群组支持 |
|
||||
| Telegram | grammY | Bot Token、Webhook |
|
||||
| Slack | Bolt | App Token、事件订阅 |
|
||||
| Discord | discord.js | Guilds、DM Policy |
|
||||
| Signal | signal-cli | 端到端加密 |
|
||||
| iMessage | BlueBubbles | macOS 专用 |
|
||||
| Feishu | 飞书开放平台 | 企业通讯 |
|
||||
|
||||
#### 5. 工具系统
|
||||
|
||||
**内置工具类别**：
|
||||
|
||||
| 类别 | 工具 | 说明 |
|
||||
|------|------|------|
|
||||
| **执行** | `bash`, `process` | 命令执行、进程管理 |
|
||||
| **文件** | `read`, `write`, `edit` | 文件操作 |
|
||||
| **浏览器** | `browser` | CDP 控制的 Chrome/Chromium |
|
||||
| **Canvas** | `canvas.*` | A2UI 可视化工作区 |
|
||||
| **节点** | `nodes.*` | 设备能力调用 |
|
||||
| **会话** | `sessions_*` | 多 Agent 协作 |
|
||||
| **调度** | `cron` | 定时任务 |
|
||||
|
||||
### 技术栈详情
|
||||
|
||||
| 组件 | 技术选型 |
|
||||
|------|----------|
|
||||
| **运行时** | Node.js 22+ |
|
||||
| **语言** | TypeScript (390,000+ 行) |
|
||||
| **包管理** | npm / pnpm / bun |
|
||||
| **构建** | tsx (开发) / tsc (生产) |
|
||||
|
||||
### 优劣势分析
|
||||
|
||||
#### 优势
|
||||
|
||||
| 优势 | 详情 |
|
||||
|------|------|
|
||||
| **完整的个人助手解决方案** | 不是框架，而是可直接使用的产品 |
|
||||
| **多渠道原生支持** | 20+ 平台开箱即用 |
|
||||
| **本地优先架构** | 数据隐私、低延迟、无云依赖 |
|
||||
| **丰富的工具生态** | 内置浏览器、Canvas、节点控制等 |
|
||||
| **灵活的模型支持** | 多 LLM 提供商、故障转移 |
|
||||
| **活跃的社区** | 500+ 贡献者、快速增长 |
|
||||
| **企业级特性** | 沙箱、权限、远程访问 |
|
||||
|
||||
#### 劣势
|
||||
|
||||
| 劣势 | 详情 |
|
||||
|------|------|
|
||||
| **学习曲线陡峭** | 390,000+ 行代码，架构复杂 |
|
||||
| **资源消耗较高** | Node.js 22+、浏览器实例、多进程 |
|
||||
| **文档分散** | 大量文档但需要时间导航 |
|
||||
| **TypeScript 依赖** | 不熟悉 TS 的开发者上手困难 |
|
||||
| **主要面向个人** | 企业多租户场景需要定制 |
|
||||
|
||||
---
|
||||
|
||||
## 衍生系统对比分析
|
||||
|
||||
### ZeroClaw - Rust 极致性能版
|
||||
|
||||
#### 核心特性
|
||||
|
||||
| 特性 | 数据 |
|
||||
|------|------|
|
||||
| **编程语言** | Rust (100%) |
|
||||
| **二进制大小** | ~8.8 MB |
|
||||
| **内存占用** | <5 MB |
|
||||
| **启动时间** | <10ms (0.8GHz 核心) |
|
||||
| **部署方式** | 单二进制文件 |
|
||||
| **运行平台** | Linux, macOS, Windows (ARM64, x86, RISC-V) |
|
||||
|
||||
#### Trait 驱动架构
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ ZeroClaw Runtime │
|
||||
├─────────────────────────────────────────────────────────┤
|
||||
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
|
||||
│ │Provider │ │ Channel │ │ Memory │ │ Tools │ │
|
||||
│ │ (Trait) │ │ (Trait) │ │ (Trait) │ │ (Trait) │ │
|
||||
│ └────┬────┘ └────┬────┘ └────┬────┘ └────┬────┘ │
|
||||
│ │ │ │ │ │
|
||||
│ ┌────┴──────────┴──────────┴──────────┴────┐ │
|
||||
│ │ Core Orchestrator │ │
|
||||
│ └──────────────────────────────────────────┘ │
|
||||
│ │ │
|
||||
│ ┌────┴────┐ │
|
||||
│ │ Runtime │ ── Native / Docker │
|
||||
│ └─────────┘ │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**可替换 Trait**：
|
||||
- **Provider**：支持 22+ AI 模型提供商
|
||||
- **Channel**：CLI, Telegram, Discord, Slack, WhatsApp, Matrix 等
|
||||
- **Memory**：SQLite 混合搜索、PostgreSQL、Markdown 文件
|
||||
- **Runtime**：Native 或 Docker 沙箱
|
||||
|
||||
#### 最佳适用场景
|
||||
|
||||
| 场景 | 说明 |
|
||||
|------|------|
|
||||
| **边缘计算/IoT** | 可在 $10 硬件、树莓派等低功耗设备运行 |
|
||||
| **资源受限环境** | VPS、嵌入式系统、低内存云实例 |
|
||||
| **高安全性要求** | 金融、合规场景，需要 RBAC 和审计日志 |
|
||||
| **多模型切换** | 需要在 22+ 模型提供商间灵活切换 |
|
||||
| **离线/本地部署** | 支持 Ollama、llama.cpp、vLLM 本地推理 |
|
||||
|
||||
---
|
||||
|
||||
### NanoClaw - 容器隔离精简版
|
||||
|
||||
#### 核心特性
|
||||
|
||||
| 特性 | 数据 |
|
||||
|------|------|
|
||||
| **编程语言** | TypeScript/Node.js |
|
||||
| **代码规模** | ~几百行核心代码 |
|
||||
| **部署方式** | Node.js 环境 + Docker |
|
||||
| **运行平台** | macOS, Linux |
|
||||
|
||||
#### 架构设计
|
||||
|
||||
```
|
||||
Channels --> SQLite --> Polling loop --> Container (Claude Agent SDK) --> Response
|
||||
```
|
||||
|
||||
**关键特性**：
|
||||
1. **容器隔离安全**：Agent 在 Linux 容器中运行，文件系统隔离
|
||||
2. **AI 原生设计**：无安装向导 - Claude Code 引导设置
|
||||
3. **Skills 优于 Features**：通过 `/add-whatsapp`, `/add-telegram` 等 skills 添加功能
|
||||
4. **Agent Swarms**：首个支持 Agent 群体的个人 AI 助手
|
||||
5. **群组隔离**：每个群组有独立的 CLAUDE.md 记忆
|
||||
|
||||
#### 最佳适用场景
|
||||
|
||||
| 场景 | 说明 |
|
||||
|------|------|
|
||||
| **个人定制** | 想要完全理解并定制自己 AI 助手的用户 |
|
||||
| **快速原型** | 用 Claude Code 快速迭代和定制 |
|
||||
| **隐私敏感用户** | 不信任复杂软件，希望审计代码 |
|
||||
| **Agent 协作** | 需要 Agent Swarms 协作的复杂任务 |
|
||||
|
||||
---
|
||||
|
||||
### OpenFang - 生产级 Agent 操作系统
|
||||
|
||||
#### 基本信息
|
||||
|
||||
| 项目 | 详情 |
|
||||
|------|------|
|
||||
| **开发者** | Jaber (RightNow) |
|
||||
| **发布时间** | 2026年 |
|
||||
| **当前版本** | v0.3.30 |
|
||||
| **语言** | Rust (137,728 行) |
|
||||
| **GitHub Stars** | 12,000+ |
|
||||
|
||||
#### 与 OpenClaw 的关系
|
||||
|
||||
OpenFang 是**受 OpenClaw 启发但完全独立构建**的项目：
|
||||
- 不是 OpenClaw 的 fork
|
||||
- 从零开始用 Rust 重写
|
||||
- 提供 OpenClaw 迁移工具 (`openfang migrate --from openclaw`)
|
||||
- 兼容 SKILL.md 格式和 ClawHub 市场
|
||||
|
||||
#### 核心创新：Hands 自主智能体系统
|
||||
|
||||
| Hand | 功能描述 |
|
||||
|------|----------|
|
||||
| **Clip** | YouTube 视频处理：下载、识别精彩片段、生成竖屏短视频、添加字幕和 AI 配音、发布到 Telegram/WhatsApp |
|
||||
| **Lead** | 每日自动发现潜在客户、网络调研丰富信息、0-100 评分、去重、生成 CSV/JSON/Markdown 报告 |
|
||||
| **Collector** | OSINT 级情报收集：持续监控目标（公司/人物/话题）、变化检测、情感追踪、知识图谱构建 |
|
||||
| **Predictor** | 超级预测引擎：多源信号收集、校准推理链、置信区间预测、Brier 评分跟踪准确度 |
|
||||
| **Researcher** | 深度自主研究：跨源交叉验证、CRAAP 可信度评估、APA 格式引用、多语言支持 |
|
||||
| **Twitter** | 自主 Twitter 账户管理：7种内容格式轮换、最佳发布时间调度、提及响应、审批队列 |
|
||||
| **Browser** | 网页自动化：导航网站、填表、点击按钮、多步骤工作流（强制购买审批门控） |
|
||||
|
||||
#### 16 层安全系统
|
||||
|
||||
| # | 安全系统 | 功能 |
|
||||
|---|----------|------|
|
||||
| 1 | WASM 双重计量沙箱 | 工具代码在 WebAssembly 中运行，带燃料计量 + 纪元中断 |
|
||||
| 2 | Merkle 哈希链审计 | 每个操作加密链接到前一个，篡改任一条目整个链断裂 |
|
||||
| 3 | 信息流污染追踪 | 标签在执行中传播，机密从源头到汇点全程追踪 |
|
||||
| 4 | Ed25519 签名代理清单 | 每个代理身份和能力集加密签名 |
|
||||
| 5 | SSRF 防护 | 阻止私有 IP、云元数据端点、DNS 重绑定攻击 |
|
||||
| 6 | 机密零化 | `Zeroizing<String>` 自动从内存中擦除 API 密钥 |
|
||||
| 7 | OFP 互认证 | HMAC-SHA256 基于随机数的 P2P 网络验证 |
|
||||
| 8 | 能力门控 | 基于角色的访问控制 |
|
||||
| 9 | 安全头 | CSP, X-Frame-Options, HSTS 等 |
|
||||
| 10 | 健康端点编辑 | 公共健康检查返回最少信息 |
|
||||
| 11 | 子进程沙箱 | `env_clear()` + 选择性变量传递 |
|
||||
| 12 | 提示注入扫描器 | 检测覆盖尝试和数据泄露模式 |
|
||||
| 13 | 循环守卫 | SHA256 工具调用循环检测 + 断路器 |
|
||||
| 14 | 会话修复 | 7 阶段消息历史验证和自动恢复 |
|
||||
| 15 | 路径遍历防护 | 规范化 + 符号链接转义防护 |
|
||||
| 16 | GCRA 速率限制 | 成本感知令牌桶限流 |
|
||||
|
||||
#### 性能基准对比
|
||||
|
||||
| 指标 | OpenFang | OpenClaw | ZeroClaw |
|
||||
|------|----------|----------|----------|
|
||||
| **冷启动时间** | 180ms | 5.98s | 10ms |
|
||||
| **空闲内存** | 40MB | 394MB | 5MB |
|
||||
| **安装大小** | 32MB | 500MB | 8.8MB |
|
||||
| **安全系统** | 16层 | 3层 | 6层 |
|
||||
| **通道适配器** | 40 | 13 | 15 |
|
||||
| **LLM 提供商** | 27 | 10 | 28 |
|
||||
|
||||
#### 适用场景
|
||||
|
||||
| 场景 | 说明 |
|
||||
|------|------|
|
||||
| **企业生产环境** | 7x24 小时稳定运行、16 层安全防护 |
|
||||
| **自主工作流** | 需要代理在无人工干预下持续执行任务 |
|
||||
| **安全敏感场景** | 金融、医疗等需要审计追踪的行业 |
|
||||
| **多通道集成** | 需要同时接入 40+ 消息平台 |
|
||||
|
||||
---
|
||||
|
||||
### 其他变体一览
|
||||
|
||||
| 变体 | 定位 | 核心差异 |
|
||||
|------|------|----------|
|
||||
| **PicoClaw** | 最小可行 | 极简实现，适合学习 |
|
||||
| **TinyClaw** | 轻量级 | 资源占用小，功能精简 |
|
||||
| **IronClaw** | 安全强化 | 安全审计、合规支持 |
|
||||
| **Nanobot** | 自动化 | 任务自动化、工作流 |
|
||||
| **ClawWork** | 工作流 | 企业工作流集成 |
|
||||
|
||||
---
|
||||
|
||||
### 综合对比矩阵
|
||||
|
||||
| 维度 | OpenClaw | OpenFang | ZeroClaw | NanoClaw | PicoClaw |
|
||||
|------|----------|----------|----------|----------|----------|
|
||||
| **语言** | TypeScript | Rust | Rust | TypeScript | TypeScript |
|
||||
| **代码规模** | ~390,000 行 | ~137,000 行 | ~50,000 行 | ~5,000 行 | ~2,000 行 |
|
||||
| **内存** | >1GB | 40MB | <5MB | >100MB | <50MB |
|
||||
| **启动** | 2-5 秒 | 180ms | <10ms | ~30 秒 | <1 秒 |
|
||||
| **安全模型** | 3 层 | 16 层纵深防御 | 6 层 | 容器隔离 | 基础隔离 |
|
||||
| **配置** | 53 个配置文件 | 单个 TOML 文件 | 单个 TOML 文件 | 无配置文件 | 最小配置 |
|
||||
| **依赖** | 70+ | 零运行时依赖 | 零运行时依赖 | Node.js + Docker | Node.js |
|
||||
| **模型支持** | 50+ | 27 | 22+ | Claude Agent SDK | 少量 |
|
||||
| **渠道** | 20+ | 40 | 15+ | WhatsApp, Telegram 等 | 基础 |
|
||||
| **技能/工具** | 53 个 + 13,729 技能 | 53 个 + 60 技能 + 7 Hands | 12 个 | Skills 系统 | 基础 |
|
||||
| **适用规模** | 企业级 | 生产级企业 | 边缘/个人/企业 | 个人 | 学习/实验 |
|
||||
| **部署复杂度** | 高 | 中 | 低 | 中 | 低 |
|
||||
| **自主能力** | 被动响应 | 主动 Hands 系统 | 被动响应 | Agent Swarms | 无 |
|
||||
|
||||
---
|
||||
|
||||
## QClaw 与 AutoClaw 技术分析
|
||||
|
||||
### QClaw (腾讯 QuantumClaw)
|
||||
|
||||
#### 基本信息
|
||||
|
||||
| 项目 | 详情 |
|
||||
|------|------|
|
||||
| **开发者** | 腾讯 |
|
||||
| **发布时间** | 2026-03-09 内测 |
|
||||
| **定位** | 一键安装器，在微信和 QQ 内部署 OpenClaw AI Agent |
|
||||
| **技术栈** | 基于 OpenClaw |
|
||||
|
||||
#### 核心特性
|
||||
|
||||
1. **微信/QQ 深度集成**：直接在腾讯生态内运行 AI Agent
|
||||
2. **一键安装**：简化 OpenClaw 的部署流程
|
||||
3. **大规模用户支持**：面向腾讯 10 亿+ 用户
|
||||
|
||||
#### 技术选型建议：基于 OpenClaw
|
||||
|
||||
**推荐理由**：
|
||||
|
||||
| 因素 | 分析 |
|
||||
|------|------|
|
||||
| **生态兼容** | OpenClaw 已有 13,729+ 技能，可直接复用 |
|
||||
| **多渠道支持** | OpenClaw 的 20+ 渠道架构成熟 |
|
||||
| **社区支持** | 250,000+ Stars，活跃的开发者社区 |
|
||||
| **微信集成** | OpenClaw 已有 IM 集成经验 |
|
||||
| **企业级特性** | 沙箱、权限、多租户支持 |
|
||||
|
||||
**集成路径**：
|
||||
```
|
||||
OpenClaw Gateway
|
||||
│
|
||||
├──► WeChat Adapter (新增)
|
||||
│
|
||||
├──► QQ Adapter (新增)
|
||||
│
|
||||
└──► 腾讯云模型支持 (新增)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### AutoClaw (智谱AI 澳龙)
|
||||
|
||||
> **重要澄清**：AutoClaw 是智谱AI推出的商业化版本，与之前提到的 Docker 容器化版本不同。
|
||||
|
||||
#### 基本信息
|
||||
|
||||
| 项目 | 详情 |
|
||||
|------|------|
|
||||
| **开发者** | 智谱AI |
|
||||
| **定位** | 一键本地安装的 OpenClaw 商业版 |
|
||||
| **目标用户** | 小白用户、办公自动化 |
|
||||
| **技术门槛** | 极低（1分钟安装） |
|
||||
|
||||
#### 核心特性
|
||||
|
||||
1. **1分钟安装**：一键本地部署
|
||||
2. **50+ 预置技能**：开箱即用的办公技能
|
||||
3. **飞书深度集成**：企业通讯原生支持
|
||||
4. **GLM 模型支持**：智谱自研大模型
|
||||
|
||||
#### 商业化版本对比
|
||||
|
||||
| 产品 | 开发者 | 部署方式 | 技术门槛 | 核心优势 | 主要场景 |
|
||||
|------|--------|---------|---------|---------|---------|
|
||||
| **AutoClaw** | 智谱AI | 本地一键安装 | 极低 | 1分钟安装、50+预置技能、飞书集成 | 小白用户、办公自动化 |
|
||||
| **KimiClaw** | 月之暗面 | 云端托管 | 极低 | 5000+技能库、40GB云存储、多设备同步 | 需要丰富技能生态 |
|
||||
| **MaxClaw** | MiniMax | 云端托管 | 极低 | 10000+模板、原生图片视频生成 | 内容创作者 |
|
||||
| **QClaw** | 腾讯 | 微信/QQ 集成 | 极低 | 微信生态、腾讯云模型 | 微信用户 |
|
||||
|
||||
---
|
||||
|
||||
### 轻量级容器化版本（Docker 微服务场景）
|
||||
|
||||
对于需要 Docker 容器化、边缘计算场景的**轻量级 AI Agent**，推荐基于 **ZeroClaw**：
|
||||
|
||||
#### 技术选型建议：基于 ZeroClaw
|
||||
|
||||
**推荐理由**：
|
||||
|
||||
| 因素 | 分析 |
|
||||
|------|------|
|
||||
| **资源效率** | ZeroClaw <5MB 内存，适合边缘计算 |
|
||||
| **启动速度** | <10ms 启动，适合微服务 |
|
||||
| **Docker 友好** | 单二进制文件，容器化简单 |
|
||||
| **多平台支持** | ARM64, x86, RISC-V 全覆盖 |
|
||||
| **安全设计** | Gateway 配对、文件系统隔离 |
|
||||
|
||||
**集成路径**：
|
||||
```
|
||||
ZeroClaw Binary (< 9MB)
|
||||
│
|
||||
├──► Docker 镜像 (Alpine 基础)
|
||||
│
|
||||
├──► Kubernetes Helm Chart
|
||||
│
|
||||
└──► 边缘设备支持 (树莓派等)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 技术选型建议
|
||||
|
||||
### 决策矩阵
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ 你的需求是什么？ │
|
||||
└─────────────────┬───────────────────┘
|
||||
│
|
||||
┌─────────────────┬───────────────────┼───────────────────┬─────────────────┐
|
||||
│ │ │ │ │
|
||||
▼ ▼ ▼ ▼ ▼
|
||||
┌─────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────┐
|
||||
│ 完整功能 │ │ 生产级 OS │ │ 极致性能 │ │ 简洁可控 │ │ 最小化 │
|
||||
│ 丰富生态 │ │ 自主运行 │ │ 边缘部署 │ │ 快速定制 │ │ 学习 │
|
||||
└────┬────┘ └──────┬──────┘ └──────┬──────┘ └──────┬──────┘ └────┬────┘
|
||||
│ │ │ │ │
|
||||
▼ ▼ ▼ ▼ ▼
|
||||
┌─────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────┐
|
||||
│OpenClaw │ │ OpenFang │ │ ZeroClaw │ │ NanoClaw │ │PicoClaw │
|
||||
│ │ │ │ │ │ │ │ │ │
|
||||
│• 企业级 │ │• 7x24 运行 │ │• IoT/边缘 │ │• 个人定制 │ │• 极简 │
|
||||
│• 多渠道 │ │• 16 层安全 │ │• 资源受限 │ │• 容器隔离 │ │• 学习 │
|
||||
│• 大规模 │ │• Hands 系统 │ │• 安全优先 │ │• Agent群 │ │• 实验 │
|
||||
│• 技能多 │ │• 40 通道 │ │• Rust 性能 │ │• Claude原生│ │ │
|
||||
└─────────┘ └─────────────┘ └─────────────┘ └─────────────┘ └─────────┘
|
||||
```
|
||||
|
||||
### 场景推荐
|
||||
|
||||
| 场景 | 推荐系统 | 理由 |
|
||||
|------|----------|------|
|
||||
| **企业级 AI 助手** | OpenClaw | 功能完整、生态丰富、企业级支持 |
|
||||
| **生产级自主运行** | OpenFang | Hands 系统、7x24 小时稳定运行、16 层安全 |
|
||||
| **微信/QQ 集成** | OpenClaw | 多渠道架构成熟、技能生态 |
|
||||
| **边缘计算** | ZeroClaw | <5MB 内存、<10ms 启动 |
|
||||
| **Docker 微服务** | ZeroClaw | 单二进制、容器友好 |
|
||||
| **个人定制** | NanoClaw | 代码简洁、Claude Code 集成 |
|
||||
| **学习/实验** | PicoClaw | 最小实现、易于理解 |
|
||||
| **安全敏感** | OpenFang | 16 层纵深防御、Merkle 审计链 |
|
||||
| **金融/合规** | OpenFang | WASM 沙箱、信息流追踪、RBAC |
|
||||
|
||||
### QClaw 与 AutoClaw 的最终建议
|
||||
|
||||
#### QClaw（腾讯）选型建议
|
||||
|
||||
| 系统 | 推荐基础 | 核心理由 |
|
||||
|------|----------|----------|
|
||||
| **QClaw** | **OpenClaw** 或 **OpenFang** | 微信/QQ 集成需要成熟的 IM 框架。OpenClaw 有更丰富的技能生态；OpenFang 有更强的安全性和自主能力 |
|
||||
|
||||
**选择 OpenClaw 的理由**：
|
||||
- 13,729+ 技能生态，可直接复用
|
||||
- 250,000+ 社区，技术支持丰富
|
||||
- 多渠道架构成熟，微信集成经验已有
|
||||
- TypeScript 生态，中国开发者熟悉
|
||||
|
||||
**选择 OpenFang 的理由**：
|
||||
- 16 层安全系统，满足合规要求
|
||||
- 40 个通道适配器，覆盖更广
|
||||
- Hands 自主系统，更智能化
|
||||
- Rust 性能优势，资源消耗低 90%
|
||||
|
||||
**建议**：
|
||||
- 如果追求**快速上线和生态复用** → 选择 OpenClaw
|
||||
- 如果追求**安全合规和长期运营** → 选择 OpenFang
|
||||
|
||||
#### AutoClaw（智谱AI）分析
|
||||
|
||||
**澄清**：AutoClaw 是智谱AI 推出的**商业化产品**，而非需要选型的技术基础。它是基于 OpenClaw 的打包优化版本：
|
||||
|
||||
- 1分钟本地安装
|
||||
- 50+ 预置技能
|
||||
- 飞书深度集成
|
||||
- GLM 模型支持
|
||||
|
||||
**市场定位**：面向小白用户和办公自动化场景，降低 OpenClaw 的使用门槛。
|
||||
|
||||
#### 轻量级容器化 Agent 选型建议
|
||||
|
||||
对于需要 Docker 容器化、边缘计算场景的**轻量级 AI Agent**：
|
||||
|
||||
| 系统 | 推荐基础 | 核心理由 |
|
||||
|------|----------|----------|
|
||||
| **边缘计算/微服务 Agent** | **ZeroClaw** | <5MB 内存、<10ms 启动、单二进制文件 |
|
||||
| **安全敏感场景** | **OpenFang** | 16 层纵深防御、WASM 沙箱、Merkle 审计链 |
|
||||
| **个人定制/快速原型** | **NanoClaw** | 代码简洁、Claude Code 集成、容器隔离 |
|
||||
|
||||
#### 商业化版本选型建议
|
||||
|
||||
| 用户类型 | 推荐方案 | 理由 |
|
||||
|---------|---------|------|
|
||||
| **技术小白** | AutoClaw（智谱AI） | 1分钟安装、预置技能、无门槛 |
|
||||
| **内容创作者** | MaxClaw（MiniMax） | 10000+ 模板、图片视频生成 |
|
||||
| **需要丰富技能** | KimiClaw（月之暗面） | 5000+ 技能库、40GB 云存储 |
|
||||
| **微信生态用户** | QClaw（腾讯） | 微信/QQ 深度集成 |
|
||||
| **技术用户/企业** | OpenClaw/OpenFang 自托管 | 完全控制、数据主权 |
|
||||
|
||||
---
|
||||
|
||||
## 独立洞察与趋势预测
|
||||
|
||||
### 洞察 1：Claw 生态的三层分化将持续
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ Claw 生态三层架构 │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 第一层：完整方案层 │
|
||||
│ ├── OpenClaw (核心) │
|
||||
│ └── 企业定制版 (QClaw, LongCat) │
|
||||
│ • 功能完整、生态丰富 │
|
||||
│ • 适合企业级部署 │
|
||||
│ │
|
||||
│ 第二层：轻量替代层 │
|
||||
│ ├── ZeroClaw (Rust) │
|
||||
│ └── NanoClaw (容器) │
|
||||
│ • 性能优先、资源高效 │
|
||||
│ • 适合边缘计算、个人定制 │
|
||||
│ │
|
||||
│ 第三层：专用变体层 │
|
||||
│ ├── PicoClaw, TinyClaw, IronClaw │
|
||||
│ └── 特定场景优化 │
|
||||
│ • 极简、专用、学习 │
|
||||
│ • 适合实验和特定需求 │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 洞察 2：Rust 在 AI Agent 领域的崛起
|
||||
|
||||
ZeroClaw 的成功证明 Rust 在 AI Agent 领域的潜力：
|
||||
- **内存安全**：消除整类内存漏洞
|
||||
- **零成本抽象**：Trait 系统实现高度可组合性
|
||||
- **性能优势**：<5MB 内存 vs >1GB (TypeScript)
|
||||
|
||||
**预测**：未来会有更多 AI Agent 框架采用 Rust 重写。
|
||||
|
||||
### 洞察 3：容器隔离成为安全标准
|
||||
|
||||
NanoClaw 的容器隔离设计代表了一个趋势：
|
||||
- **沙箱隔离**：Agent 在容器内运行
|
||||
- **文件系统隔离**：只能访问显式挂载的目录
|
||||
- **资源限制**：CPU/内存/网络可控制
|
||||
|
||||
**预测**：企业级 AI Agent 部署将普遍采用容器隔离。
|
||||
|
||||
### 洞察 4：技能生态成为核心竞争力
|
||||
|
||||
OpenClaw 的 13,729+ 技能形成了强大的网络效应：
|
||||
- 用户选择框架时，技能数量是关键因素
|
||||
- 技能可移植性成为框架间竞争的焦点
|
||||
- ClawHub 模式可能被其他框架复制
|
||||
|
||||
**预测**：技能标准化和跨框架移植将成为 2026 年的重点。
|
||||
|
||||
### 洞察 5：中国企业定制化加速
|
||||
|
||||
QClaw、LongCat 等中国企业的定制版本表明：
|
||||
- 微信、飞书等本土渠道的深度集成需求
|
||||
- 中国本土 LLM 的支持需求
|
||||
- 合规和数据本地化要求
|
||||
|
||||
**预测**：2026 年将出现更多中国本土化的 AI Agent 框架。
|
||||
|
||||
---
|
||||
|
||||
## 参考来源
|
||||
|
||||
### 英文资源
|
||||
|
||||
- [OpenClaw GitHub Repository](https://github.com/openclaw/openclaw)
|
||||
- [OpenFang GitHub Repository](https://github.com/RightNow-AI/openfang)
|
||||
- [ZeroClaw GitHub Repository](https://github.com/zeroclaw-labs/zeroclaw)
|
||||
- [NanoClaw GitHub Repository](https://github.com/qwibitai/nanoclaw)
|
||||
- [QClaw (QuantumClaw) GitHub](https://github.com/QuantumClaw/QClaw)
|
||||
- [AutoClaw Official Site](https://autoclaws.org/lightweight-ai-agent/)
|
||||
- [OpenClaw Architecture Deep Dive (Towards AI)](https://pub.towardsai.net/openclaw-architecture-deep-dive-building-production-ready-ai-agents-from-scratch-e693c1002ae8)
|
||||
- [210,000 GitHub Stars Analysis (Medium)](https://medium.com/@Micheal-Lanham/210-000-github-stars-in-10-days-what-openclaws-architecture-teaches-us-about-building-personal-ai-dae040fab58f)
|
||||
- [OpenClaw vs ZeroClaw Comparison (SparkCo)](https://sparkco.ai/blog/openclaw-vs-zeroclaw-which-ai-agent-framework-should-you-choose-in-2026)
|
||||
- [ZeroClaw vs OpenClaw vs PicoClaw](https://zeroclaw.net/zeroclaw-vs-openclaw-vs-picoclaw)
|
||||
- [5 Best OpenClaw Alternatives (BuildMVPFast)](https://www.buildmvpfast.com/blog/best-openclaw-alternatives-personal-ai-agents-2026)
|
||||
- [AI Agent Frameworks - The Claw Ecosystem](https://waelmansour.com/blog/ai-agent-frameworks-the-claw-ecosystem/)
|
||||
- [Tencent QClaw Launch (Beam.ai)](https://beam.ai/agentic-insights/tencent-launches-qclaw-what-the-ai-agent-mainstream-moment-means-for-enterprise)
|
||||
- [OpenFang Official Documentation](https://openfang.sh/)
|
||||
- [OpenFang Workflows Documentation](https://openfang.sh/docs/workflows)
|
||||
- [Medium: I Ignored 30+ OpenClaw Alternatives Until OpenFang](https://medium.com/@agentnativedev/i-ignored-30-openclaw-alternatives-until-openfang-ff11851b83f1)
|
||||
- [Slashdot: OpenFang vs ZeroClaw Comparison](https://slashdot.org/software/comparison/OpenFang-vs-ZeroClaw/)
|
||||
- [DataCamp: OpenClaw vs Nanobot](https://www.datacamp.com/blog/openclaw-vs-nanobot)
|
||||
- [OpenClaw Design Patterns (Part 5 of 7)](https://kenhuangus.substack.com/p/openclaw-design-patterns-part-5-of)
|
||||
- [OpenClaw for Product Managers 2026 Guide](https://medium.com/@mohit15856/openclaw-for-product-managers-building-products-in-the-ai-agent-era-2026-guide-71d18641200f)
|
||||
|
||||
### 中文资源
|
||||
|
||||
- [OpenClaw 生态全解析 - 知乎](https://zhuanlan.zhihu.com/p/2009662986390876443)
|
||||
- [深度解读：OpenClaw 架构及生态 - 53AI](https://www.53ai.com/news/Openclaw/2026020325180.html)
|
||||
- [OpenClaw 深度研究报告 - ModelScope](https://www.modelscope.cn/learn/5618)
|
||||
- [OpenClaw 是什么？- 飞书博客](https://www.larksuite.com/zh_cn/blog/openclaw)
|
||||
- [LongCat 为 OpenClaw 装上效率引擎 - 美团技术团队](https://tech.meituan.com/2026/03/09/longcat-openclaw.html)
|
||||
- [OpenClaw 官方指南 (GitBook)](https://yeasy.gitbook.io/openclaw_guide)
|
||||
- [OpenClaw Skills 开发教程 - 知乎](https://zhuanlan.zhihu.com/p/2013710082840469620)
|
||||
- [OpenFang 中文官网](https://openfang.cc)
|
||||
- [Rang's Note: OpenFang 项目介绍](https://wurang.net/posts/openfang-intro/)
|
||||
- [智谱AI 发布 AutoClaw - Pandaily](https://pandaily.com/zhipu-ai-launches-auto-claw-a-one-click-local-open-claw-that-turns-p-cs-into-24-7-ai-agents)
|
||||
- [OpenClaw 中文社区](https://clawd.org.cn/)
|
||||
- [OpenClaw 真实评测 2026 - 腾讯云](https://cloud.tencent.com/developer/article/2636337)
|
||||
- [企业级 OpenClaw 四大方案技术路径深度解析 - 新浪财经](https://finance.sina.com.cn/tech/roll/2026-03-10/doc-inhqpaep9999746.shtml)
|
||||
- [OpenClaw 引爆全球 AI 代理革命 - 知乎](https://zhuanlan.zhihu.com/p/2011161924377794450)
|
||||
- [2026 年 OpenClaw Skills 生态完全指南 - 阿里云开发者](https://developer.aliyun.com/article/1712034)
|
||||
|
||||
---
|
||||
|
||||
*报告生成时间：2026-03-13*
|
||||
*调研方法：多源搜索、交叉验证、架构分析*
|
||||
*数据来源：GitHub、技术博客、知乎、Medium、Reddit、官方文档*
|
||||
File diff suppressed because one or more lines are too long
83
docs/knowledge-base/README.md
Normal file
83
docs/knowledge-base/README.md
Normal file
@@ -0,0 +1,83 @@
|
||||
# ZCLAW 知识库
|
||||
|
||||
> 记录开发过程中的经验、问题和解决方案，为项目演化提供知识储备。
|
||||
|
||||
## 目录结构
|
||||
|
||||
```
|
||||
knowledge-base/
|
||||
├── README.md # 本文件 - 索引
|
||||
├── openfang-websocket-protocol.md # OpenFang WebSocket 协议实际实现
|
||||
├── troubleshooting.md # 常见问题排查
|
||||
├── frontend-integration.md # 前端集成模式
|
||||
├── agent-provider-config.md # Agent 和 LLM 提供商配置
|
||||
├── tauri-desktop.md # Tauri 桌面端开发笔记
|
||||
├── feature-checklist.md # 功能清单和验证状态
|
||||
└── hands-integration-lessons.md # Hands 集成经验总结
|
||||
```
|
||||
|
||||
## 快速索引
|
||||
|
||||
### 协议与通信
|
||||
|
||||
| 主题 | 文件 | 关键词 |
|
||||
|------|------|--------|
|
||||
| WebSocket 流式聊天 | [openfang-websocket-protocol.md](./openfang-websocket-protocol.md) | 流式响应, 事件类型, 消息格式 |
|
||||
| REST API | [openfang-websocket-protocol.md](./openfang-websocket-protocol.md#rest-api) | Agent, Hands, Health |
|
||||
|
||||
### 故障排查
|
||||
|
||||
| 问题类型 | 文件 | 常见原因 |
|
||||
|---------|------|----------|
|
||||
| 连接失败 | [troubleshooting.md](./troubleshooting.md) | 端口、认证、配置 |
|
||||
| 流式响应不工作 | [troubleshooting.md](./troubleshooting.md) | 事件类型、代理配置 |
|
||||
| LLM 错误 | [troubleshooting.md](./troubleshooting.md) | API Key 未配置 |
|
||||
|
||||
### 开发指南
|
||||
|
||||
| 主题 | 文件 | 说明 |
|
||||
|------|------|------|
|
||||
| 前端集成 | [frontend-integration.md](./frontend-integration.md) | React + Zustand 模式 |
|
||||
| Agent 配置 | [agent-provider-config.md](./agent-provider-config.md) | LLM 提供商配置 |
|
||||
| Tauri 开发 | [tauri-desktop.md](./tauri-desktop.md) | 桌面端开发注意事项 |
|
||||
| 功能清单 | [feature-checklist.md](./feature-checklist.md) | 所有功能的验证状态 |
|
||||
| Hands 集成 | [hands-integration-lessons.md](./hands-integration-lessons.md) | Hands 功能集成经验 |
|
||||
|
||||
## 版本历史
|
||||
|
||||
| 日期 | 版本 | 变更 |
|
||||
|------|------|------|
|
||||
| 2026-03-14 | v1.1 | 添加 Hands 集成经验总结、功能清单 |
|
||||
| 2026-03-14 | v1.0 | 初始创建，记录 OpenFang WebSocket 协议发现 |
|
||||
|
||||
---
|
||||
|
||||
## 贡献指南
|
||||
|
||||
当遇到以下情况时，请更新知识库：
|
||||
|
||||
1. **发现协议与文档不一致** - 记录实际行为
|
||||
2. **解决了一个棘手的 bug** - 记录根因和解决方案
|
||||
3. **找到了更好的实现方式** - 记录模式和最佳实践
|
||||
4. **踩了坑** - 记录避坑指南
|
||||
|
||||
### 文档格式
|
||||
|
||||
```markdown
|
||||
# 主题
|
||||
|
||||
## 问题描述
|
||||
简要描述遇到的问题
|
||||
|
||||
## 根本原因
|
||||
解释为什么会发生
|
||||
|
||||
## 解决方案
|
||||
具体的解决步骤
|
||||
|
||||
## 代码示例
|
||||
相关代码片段
|
||||
|
||||
## 相关文件
|
||||
列出涉及的源文件
|
||||
```
|
||||
296
docs/knowledge-base/agent-provider-config.md
Normal file
296
docs/knowledge-base/agent-provider-config.md
Normal file
@@ -0,0 +1,296 @@
|
||||
# Agent 和 LLM 提供商配置
|
||||
|
||||
> 记录 OpenFang Agent 配置和 LLM 提供商设置。
|
||||
|
||||
---
|
||||
|
||||
## 1. 配置文件位置
|
||||
|
||||
```
|
||||
~/.openfang/
|
||||
├── config.toml # 主配置文件
|
||||
├── .env # 环境变量 (API Keys)
|
||||
├── secrets.env # 敏感信息
|
||||
└── data/ # Agent 数据
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. 主配置文件
|
||||
|
||||
### config.toml 示例
|
||||
|
||||
```toml
|
||||
[default_model]
|
||||
provider = "bailian"
|
||||
model = "qwen3.5-plus"
|
||||
api_key_env = "BAILIAN_API_KEY"
|
||||
|
||||
[kernel]
|
||||
data_dir = "C:\\Users\\szend\\.openfang\\data"
|
||||
|
||||
[memory]
|
||||
decay_rate = 0.05
|
||||
```
|
||||
|
||||
### 配置项说明
|
||||
|
||||
| 配置项 | 说明 | 示例值 |
|
||||
|--------|------|--------|
|
||||
| `default_model.provider` | 默认 LLM 提供商 | `bailian`, `zhipu`, `gemini` |
|
||||
| `default_model.model` | 默认模型名称 | `qwen3.5-plus`, `glm-4-flash` |
|
||||
| `default_model.api_key_env` | API Key 环境变量名 | `BAILIAN_API_KEY` |
|
||||
| `kernel.data_dir` | 数据目录 | `~/.openfang/data` |
|
||||
| `memory.decay_rate` | 记忆衰减率 | `0.05` |
|
||||
|
||||
---
|
||||
|
||||
## 3. LLM 提供商配置
|
||||
|
||||
### 3.1 支持的提供商
|
||||
|
||||
| 提供商 | 环境变量 | 模型示例 |
|
||||
|--------|----------|----------|
|
||||
| zhipu | `ZHIPU_API_KEY` | glm-4-flash, glm-4-plus |
|
||||
| bailian | `BAILIAN_API_KEY` | qwen3.5-plus, qwen-max |
|
||||
| gemini | `GEMINI_API_KEY` | gemini-2.5-flash |
|
||||
| deepseek | `DEEPSEEK_API_KEY` | deepseek-chat |
|
||||
| openai | `OPENAI_API_KEY` | gpt-4, gpt-3.5-turbo |
|
||||
| groq | `GROQ_API_KEY` | llama-3.1-70b |
|
||||
|
||||
### 3.2 配置 API Key
|
||||
|
||||
**方式 1: .env 文件**
|
||||
|
||||
```bash
|
||||
# ~/.openfang/.env
|
||||
ZHIPU_API_KEY=your_zhipu_key_here
|
||||
BAILIAN_API_KEY=your_bailian_key_here
|
||||
GEMINI_API_KEY=your_gemini_key_here
|
||||
DEEPSEEK_API_KEY=your_deepseek_key_here
|
||||
```
|
||||
|
||||
**方式 2: 环境变量**
|
||||
|
||||
```bash
|
||||
# Windows PowerShell
|
||||
$env:ZHIPU_API_KEY = "your_key"
|
||||
./openfang.exe start
|
||||
|
||||
# Linux/macOS
|
||||
export ZHIPU_API_KEY=your_key
|
||||
./openfang start
|
||||
```
|
||||
|
||||
### 3.3 验证配置
|
||||
|
||||
```bash
|
||||
# 检查 Agent 状态
|
||||
curl -s http://127.0.0.1:50051/api/status | jq '.agents[] | {name, model_provider, model_name, state}'
|
||||
|
||||
# 测试聊天
|
||||
curl -X POST "http://127.0.0.1:50051/api/agents/{agentId}/message" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"message":"Hello"}'
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Agent 管理
|
||||
|
||||
### 4.1 查看所有 Agent
|
||||
|
||||
```bash
|
||||
curl -s http://127.0.0.1:50051/api/agents | jq
|
||||
```
|
||||
|
||||
返回示例：
|
||||
```json
|
||||
[
|
||||
{
|
||||
"id": "f77004c8-418f-4132-b7d4-7ecb9d66f44c",
|
||||
"name": "General Assistant",
|
||||
"model_provider": "zhipu",
|
||||
"model_name": "glm-4-flash",
|
||||
"state": "Running"
|
||||
},
|
||||
{
|
||||
"id": "ad95a98b-459e-4eac-b1b4-c7130fe5519a",
|
||||
"name": "sales-assistant",
|
||||
"model_provider": "bailian",
|
||||
"model_name": "qwen3.5-plus",
|
||||
"state": "Running"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### 4.2 Agent 状态
|
||||
|
||||
| 状态 | 说明 |
|
||||
|------|------|
|
||||
| `Running` | 正常运行 |
|
||||
| `Stopped` | 已停止 |
|
||||
| `Error` | 错误状态 |
|
||||
|
||||
### 4.3 默认 Agent 选择
|
||||
|
||||
前端代码应动态选择可用的 Agent：
|
||||
|
||||
```typescript
|
||||
// gatewayStore.ts
|
||||
loadClones: async () => {
|
||||
const client = get().client;
|
||||
const clones = await client.getClones();
|
||||
|
||||
// 自动设置第一个可用 Agent 为默认
|
||||
if (clones.length > 0 && clones[0].id) {
|
||||
const currentDefault = client.getDefaultAgentId();
|
||||
const defaultExists = clones.some(c => c.id === currentDefault);
|
||||
|
||||
if (!defaultExists) {
|
||||
client.setDefaultAgentId(clones[0].id);
|
||||
}
|
||||
}
|
||||
|
||||
set({ clones });
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. 常见问题
|
||||
|
||||
### 5.1 "Missing API key" 错误
|
||||
|
||||
**症状**:
|
||||
```
|
||||
Missing API key: No LLM provider configured.
|
||||
Set an API key (e.g. GROQ_API_KEY) and restart
|
||||
```
|
||||
|
||||
**解决方案**:
|
||||
|
||||
1. 检查 Agent 使用的提供商：
|
||||
```bash
|
||||
curl -s http://127.0.0.1:50051/api/agents | jq '.[] | select(.name=="AgentName") | .model_provider'
|
||||
```
|
||||
|
||||
2. 配置对应的 API Key：
|
||||
```bash
|
||||
echo "PROVIDER_API_KEY=your_key" >> ~/.openfang/.env
|
||||
```
|
||||
|
||||
3. 重启 OpenFang：
|
||||
```bash
|
||||
./openfang.exe restart
|
||||
```
|
||||
|
||||
### 5.2 找到可用的 Agent
|
||||
|
||||
当某个 Agent 的提供商未配置时，切换到其他 Agent：
|
||||
|
||||
| 推荐顺序 | Agent | 提供商 | 说明 |
|
||||
|---------|-------|--------|------|
|
||||
| 1 | General Assistant | zhipu | 通常已配置 |
|
||||
| 2 | coder | gemini | 开发任务 |
|
||||
| 3 | researcher | gemini | 研究任务 |
|
||||
|
||||
### 5.3 API Key 验证失败
|
||||
|
||||
**症状**: `Request failed: Invalid API key`
|
||||
|
||||
**检查**:
|
||||
1. API Key 格式是否正确
|
||||
2. API Key 是否过期
|
||||
3. 提供商服务是否可用
|
||||
|
||||
---
|
||||
|
||||
## 6. 前端集成
|
||||
|
||||
### 6.1 显示 Agent 信息
|
||||
|
||||
```typescript
|
||||
function AgentSelector() {
|
||||
const clones = useGatewayStore((state) => state.clones);
|
||||
const currentAgent = useChatStore((state) => state.currentAgent);
|
||||
|
||||
return (
|
||||
<select value={currentAgent?.id} onChange={handleAgentChange}>
|
||||
{clones.map((agent) => (
|
||||
<option key={agent.id} value={agent.id}>
|
||||
{agent.name} ({agent.model_provider})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 6.2 处理提供商错误
|
||||
|
||||
```typescript
|
||||
onError: (error: string) => {
|
||||
if (error.includes('Missing API key')) {
|
||||
// 提示用户配置 API Key 或切换 Agent
|
||||
showNotification({
|
||||
type: 'warning',
|
||||
message: '当前 Agent 的 LLM 提供商未配置，请切换到其他 Agent',
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. 配置最佳实践
|
||||
|
||||
### 7.1 多提供商配置
|
||||
|
||||
配置多个提供商作为备用：
|
||||
|
||||
```bash
|
||||
# ~/.openfang/.env
|
||||
ZHIPU_API_KEY=your_primary_key
|
||||
BAILIAN_API_KEY=your_backup_key
|
||||
GEMINI_API_KEY=your_gemini_key
|
||||
```
|
||||
|
||||
### 7.2 模型选择策略
|
||||
|
||||
| 用途 | 推荐模型 | 提供商 |
|
||||
|------|----------|--------|
|
||||
| 日常对话 | glm-4-flash | zhipu |
|
||||
| 开发任务 | gemini-2.5-flash | gemini |
|
||||
| 深度推理 | qwen3.5-plus | bailian |
|
||||
| 快速响应 | deepseek-chat | deepseek |
|
||||
|
||||
### 7.3 错误恢复
|
||||
|
||||
```typescript
|
||||
async function sendMessageWithFallback(content: string) {
|
||||
const agents = useGatewayStore.getState().clones;
|
||||
|
||||
for (const agent of agents) {
|
||||
try {
|
||||
return await client.chatStream(content, callbacks, { agentId: agent.id });
|
||||
} catch (err) {
|
||||
if (err.message.includes('Missing API key')) {
|
||||
console.warn(`Agent ${agent.name} not configured, trying next...`);
|
||||
continue;
|
||||
}
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
throw new Error('No configured agents available');
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 更新历史
|
||||
|
||||
| 日期 | 变更 |
|
||||
|------|------|
|
||||
| 2026-03-14 | 初始版本 |
|
||||
317
docs/knowledge-base/feature-checklist.md
Normal file
317
docs/knowledge-base/feature-checklist.md
Normal file
@@ -0,0 +1,317 @@
|
||||
# ZCLAW Desktop 功能清单
|
||||
|
||||
> 列出所有功能模块，逐一验证完整性和可用性。
|
||||
|
||||
**验证日期**: 2026-03-14
|
||||
**验证环境**: Windows 11, OpenFang 0.4.0, Tauri Desktop
|
||||
|
||||
---
|
||||
|
||||
## 1. 核心聊天功能
|
||||
|
||||
| 功能 | 组件位置 | 验证状态 | 说明 |
|
||||
|------|----------|----------|------|
|
||||
| 发送消息 | `ChatArea.tsx` | ✅ 通过 | REST API 已验证 |
|
||||
| 流式响应 | `chatStore.ts` | ✅ 通过 | WebSocket text_delta 已验证 |
|
||||
| 对话历史 | `ConversationList.tsx` | ⚠️ UI待验证 | localStorage 持久化 |
|
||||
| Agent 切换 | `CloneManager.tsx` | ✅ 通过 | 10 个 Agent 可用 |
|
||||
| 新建对话 | `ChatArea.tsx` | ⚠️ UI待验证 | 需手动验证 |
|
||||
|
||||
## 2. 分身管理 (Agents/Clones)
|
||||
|
||||
| 功能 | 组件位置 | 验证状态 | 说明 |
|
||||
|------|----------|----------|------|
|
||||
| 分身列表 | `CloneManager.tsx` | ✅ 通过 | API 返回 10 个 Agent |
|
||||
| 创建分身 | `CloneManager.tsx` | ⚠️ UI待验证 | API 支持 |
|
||||
| 编辑分身 | `RightPanel.tsx` | ⚠️ UI待验证 | API 支持 |
|
||||
| 删除分身 | `CloneManager.tsx` | ⚠️ UI待验证 | API 支持 |
|
||||
|
||||
## 3. IM 频道
|
||||
|
||||
| 功能 | 组件位置 | 验证状态 | 说明 |
|
||||
|------|----------|----------|------|
|
||||
| 频道列表 | `ChannelList.tsx` | ✅ 通过 | API 返回 40 个频道 |
|
||||
| 飞书集成 | `Settings/IMChannels.tsx` | ⚠️ 未配置 | 需配置 API Key |
|
||||
| 频道连接 | `gatewayStore.ts` | ⚠️ UI待验证 | 需手动验证 |
|
||||
|
||||
## 4. 定时任务
|
||||
|
||||
| 功能 | 组件位置 | 验证状态 | 说明 |
|
||||
|------|----------|----------|------|
|
||||
| 任务列表 | `TaskList.tsx` | ❌ API 404 | OpenFang 0.4.0 未实现 |
|
||||
| 任务状态 | `gatewayStore.ts` | ❌ API 404 | OpenFang 0.4.0 未实现 |
|
||||
|
||||
## 5. OpenFang 特有功能
|
||||
|
||||
### 5.1 Hands 面板
|
||||
|
||||
| 功能 | 组件位置 | 验证状态 | 说明 |
|
||||
|------|----------|----------|------|
|
||||
| Hands 列表 | `HandList.tsx` | ✅ 通过 | 左侧导航显示 8 个 Hands |
|
||||
| Hand 任务面板 | `HandTaskPanel.tsx` | ✅ 通过 | 中间区域显示任务和结果 |
|
||||
| 触发 Hand | `HandTaskPanel.tsx` | ⚠️ UI待验证 | 6 个 requirements_met=true |
|
||||
| 审批流程 | `HandsPanel.tsx` | ⚠️ UI待验证 | 需手动验证 |
|
||||
| 取消执行 | `gateway-client.ts` | ⚠️ UI待验证 | API 已实现 |
|
||||
|
||||
> **更新 (2026-03-14)**: Hands UI 已重构：
|
||||
> - 左侧 Sidebar 显示 `HandList` 组件
|
||||
> - 中间区域显示 `HandTaskPanel` 组件
|
||||
> - 右侧面板已移除 Hands 标签
|
||||
> - 所有 UI 文本已中文化
|
||||
|
||||
### 5.2 Workflows
|
||||
|
||||
| 功能 | 组件位置 | 验证状态 | 说明 |
|
||||
|------|----------|----------|------|
|
||||
| Workflow 列表 | `WorkflowList.tsx` | ✅ 通过 | API 返回空数组 (无配置) |
|
||||
| 执行 Workflow | `RightPanel.tsx` | ⚠️ 无数据 | 无可用 Workflow |
|
||||
|
||||
### 5.3 Triggers
|
||||
|
||||
| 功能 | 组件位置 | 验证状态 | 说明 |
|
||||
|------|----------|----------|------|
|
||||
| Trigger 列表 | `TriggersPanel.tsx` | ✅ 通过 | API 返回空数组 (无配置) |
|
||||
| 启用/禁用 | `TriggersPanel.tsx` | ⚠️ 无数据 | 无可用 Trigger |
|
||||
|
||||
### 5.4 审计日志
|
||||
|
||||
| 功能 | 组件位置 | 验证状态 | 说明 |
|
||||
|------|----------|----------|------|
|
||||
| 日志列表 | `AuditLogsPanel.tsx` | ❌ API 404 | OpenFang 0.4.0 未实现 |
|
||||
| 刷新日志 | `AuditLogsPanel.tsx` | ❌ API 404 | OpenFang 0.4.0 未实现 |
|
||||
|
||||
### 5.5 安全状态
|
||||
|
||||
| 功能 | 组件位置 | 验证状态 | 说明 |
|
||||
|------|----------|----------|------|
|
||||
| 安全层显示 | `SecurityStatus.tsx` | ❌ API 404 | OpenFang 0.4.0 未实现 |
|
||||
| 安全等级 | `SecurityStatus.tsx` | ❌ API 404 | OpenFang 0.4.0 未实现 |
|
||||
|
||||
## 6. 设置页面
|
||||
|
||||
### 6.1 通用设置
|
||||
|
||||
| 功能 | 组件位置 | 验证状态 | 说明 |
|
||||
|------|----------|----------|------|
|
||||
| Gateway 连接 | `Settings/General.tsx` | ✅ 通过 | 连接状态正确显示 |
|
||||
| 后端切换 | `Settings/General.tsx` | ⚠️ UI待验证 | OpenClaw/OpenFang 切换 |
|
||||
| 主题切换 | `Settings/General.tsx` | ⚠️ UI待验证 | 深色/浅色 |
|
||||
| 开机自启 | `Settings/General.tsx` | ⚠️ UI待验证 | Tauri 专用 |
|
||||
|
||||
### 6.2 模型与 API
|
||||
|
||||
| 功能 | 组件位置 | 验证状态 | 说明 |
|
||||
|------|----------|----------|------|
|
||||
| 模型选择 | `Settings/ModelsAPI.tsx` | ⚠️ UI待验证 | 多个提供商可用 |
|
||||
| API Key 管理 | `Settings/ModelsAPI.tsx` | ⚠️ UI待验证 | .env 配置 |
|
||||
|
||||
### 6.3 其他设置
|
||||
|
||||
| 功能 | 组件位置 | 验证状态 | 说明 |
|
||||
|------|----------|----------|------|
|
||||
| 技能目录 | `Settings/Skills.tsx` | ✅ 通过 | API 返回空 (无配置) |
|
||||
| MCP 服务 | `Settings/MCPServices.tsx` | ❌ API 404 | OpenFang 0.4.0 未实现 |
|
||||
| 工作区配置 | `Settings/Workspace.tsx` | ❌ API 404 | OpenFang 0.4.0 未实现 |
|
||||
| 隐私设置 | `Settings/Privacy.tsx` | ⚠️ UI待验证 | UI 存在 |
|
||||
| 用量统计 | `Settings/UsageStats.tsx` | ✅ 通过 | API 返回 Agent 统计 |
|
||||
| 关于页面 | `Settings/About.tsx` | ✅ 通过 | 显示版本 0.2.0 |
|
||||
|
||||
## 7. 右侧面板
|
||||
|
||||
| 功能 | 组件位置 | 验证状态 | 说明 |
|
||||
|------|----------|----------|------|
|
||||
| 连接状态 | `RightPanel.tsx` | ✅ 通过 | 显示 connected |
|
||||
| 运行时信息 | `RightPanel.tsx` | ✅ 通过 | 版本 0.4.0 |
|
||||
| 会话统计 | `RightPanel.tsx` | ⚠️ UI待验证 | 需手动验证 |
|
||||
|
||||
## 8. 侧边栏
|
||||
|
||||
| 功能 | 组件位置 | 验证状态 | 说明 |
|
||||
|------|----------|----------|------|
|
||||
| 分身 Tab | `Sidebar.tsx` | ⚠️ UI待验证 | 需手动验证 |
|
||||
| Hands Tab | `Sidebar.tsx` | ✅ 通过 | 显示 `HandList` 组件 |
|
||||
| Workflow Tab | `Sidebar.tsx` | ⚠️ UI待验证 | 显示 `TaskList` 组件 |
|
||||
| 设置入口 | `Sidebar.tsx` | ⚠️ UI待验证 | 需手动验证 |
|
||||
|
||||
> **更新 (2026-03-14)**: Sidebar 已重构：
|
||||
> - Tab 从 "分身/IM/任务" 改为 "分身/HANDS/Workflow"
|
||||
> - Hands Tab 使用 `HandList` 组件显示自主能力包
|
||||
> - IM 频道功能移至设置页面
|
||||
|
||||
---
|
||||
|
||||
## 验证结果汇总
|
||||
|
||||
| 类别 | 总数 | 通过 | 部分通过 | 失败 | 待UI验证 |
|
||||
|------|------|------|----------|------|----------|
|
||||
| 核心聊天 | 5 | 2 | 0 | 0 | 3 |
|
||||
| 分身管理 | 4 | 1 | 0 | 0 | 3 |
|
||||
| IM 频道 | 3 | 1 | 0 | 0 | 2 |
|
||||
| 定时任务 | 2 | 0 | 0 | 2 | 0 |
|
||||
| Hands | 4 | 1 | 0 | 0 | 3 |
|
||||
| Workflows | 2 | 1 | 0 | 0 | 1 |
|
||||
| Triggers | 2 | 1 | 0 | 0 | 1 |
|
||||
| 审计日志 | 2 | 0 | 0 | 2 | 0 |
|
||||
| 安全状态 | 2 | 0 | 0 | 2 | 0 |
|
||||
| 设置页面 | 12 | 3 | 0 | 3 | 6 |
|
||||
| 右侧面板 | 3 | 2 | 0 | 0 | 1 |
|
||||
| 侧边栏 | 4 | 0 | 0 | 1 | 3 |
|
||||
| **总计** | **45** | **12** | **0** | **10** | **23** |
|
||||
|
||||
---
|
||||
|
||||
## 验证方法
|
||||
|
||||
1. **API 测试**: 通过 curl/Node.js 直接测试后端 API
|
||||
2. **UI 验证**: 在 Tauri 窗口中手动操作验证
|
||||
3. **状态检查**: 检查 Zustand store 状态变化
|
||||
|
||||
---
|
||||
|
||||
## 图例
|
||||
|
||||
- ✅ 通过 - 功能完整可用
|
||||
- ⚠️ 部分通过 - 基本功能可用，有已知问题
|
||||
- ❌ 失败 - 功能不可用或严重 bug
|
||||
- ⏳ 待验证 - 尚未测试
|
||||
|
||||
---
|
||||
|
||||
## 关键发现
|
||||
|
||||
### API 已验证功能
|
||||
|
||||
| API 端点 | 状态 | 返回数据 |
|
||||
|----------|------|----------|
|
||||
| `/api/health` | ✅ | `{status: "ok", version: "0.4.0"}` |
|
||||
| `/api/agents` | ✅ | 10 个 Agent |
|
||||
| `/api/hands` | ✅ | 8 个 Hands (6 个就绪) |
|
||||
| `/api/channels` | ✅ | 40 个频道 |
|
||||
| `/api/usage` | ✅ | Agent 统计数据 |
|
||||
| `/api/workflows` | ✅ | 空数组 (无配置) |
|
||||
| `/api/triggers` | ✅ | 空数组 (无配置) |
|
||||
| `/api/skills` | ✅ | 空数组 (无配置) |
|
||||
| `/api/config` | ✅ | 配置信息 |
|
||||
| `/api/status` | ✅ | 运行状态 |
|
||||
|
||||
### WebSocket 流式聊天验证
|
||||
|
||||
| 验证项 | 状态 |
|
||||
|--------|------|
|
||||
| 连接成功 | ✅ |
|
||||
| connected 事件 | ✅ |
|
||||
| typing 事件 | ✅ |
|
||||
| phase 事件 | ✅ |
|
||||
| text_delta 事件 | ✅ |
|
||||
| response 事件 | ✅ |
|
||||
|
||||
### OpenFang 0.4.0 未实现的 API
|
||||
|
||||
以下 API 返回 404，在当前版本中不可用：
|
||||
|
||||
- `/api/tasks` - 定时任务
|
||||
- `/api/audit/logs` - 审计日志
|
||||
- `/api/security/status` - 安全状态
|
||||
- `/api/plugins` - 插件管理
|
||||
- `/api/workspace` - 工作区配置
|
||||
|
||||
---
|
||||
|
||||
## 建议优先级
|
||||
|
||||
### P0 - 核心功能 (必须验证)
|
||||
|
||||
1. ✅ 流式聊天 - 已验证
|
||||
2. ⚠️ 对话历史 - 需 UI 验证
|
||||
3. ⚠️ Agent 切换 - 需 UI 验证
|
||||
|
||||
### P1 - 重要功能
|
||||
|
||||
1. ⚠️ Hands 触发 - 需 UI 验证
|
||||
2. ⚠️ 设置页面 - 需 UI 验证
|
||||
3. ⚠️ IM 频道 - 需配置后验证
|
||||
|
||||
### P2 - 可延后
|
||||
|
||||
1. ❌ 定时任务 - OpenFang 未实现
|
||||
2. ❌ 审计日志 - OpenFang 未实现
|
||||
3. ❌ 安全状态 - OpenFang 未实现
|
||||
|
||||
---
|
||||
|
||||
## 手动 UI 验证清单
|
||||
|
||||
请在 Tauri 桌面窗口中进行以下测试：
|
||||
|
||||
### 聊天功能
|
||||
- [ ] 发送消息，验证流式响应显示
|
||||
- [ ] 创建新对话
|
||||
- [ ] 切换对话
|
||||
- [ ] 删除对话
|
||||
|
||||
### 分身管理
|
||||
- [ ] 查看 10 个 Agent
|
||||
- [ ] 切换 Agent
|
||||
- [ ] 编辑 Agent 名称
|
||||
|
||||
### Hands 面板
|
||||
- [ ] 查看 8 个 Hands
|
||||
- [ ] 触发一个 requirements_met=true 的 Hand
|
||||
- [ ] 验证审批流程
|
||||
|
||||
### 设置页面
|
||||
- [ ] 验证后端切换 (OpenClaw/OpenFang)
|
||||
- [ ] 验证主题切换
|
||||
- [ ] 查看用量统计
|
||||
|
||||
---
|
||||
|
||||
## 更新历史
|
||||
|
||||
| 日期 | 变更 |
|
||||
|------|------|
|
||||
| 2026-03-14 | Hands UI 重构：新增 `HandList.tsx`、`HandTaskPanel.tsx`，移除右侧 Hands 标签 |
|
||||
| 2026-03-14 | 初始版本，完成 API 级别验证 |
|
||||
| 2026-03-14 | 完成 Web 前端验证 (Vite 代理测试) |
|
||||
|
||||
---
|
||||
|
||||
## Web 前端验证结果 (2026-03-14)
|
||||
|
||||
### 前端资源加载
|
||||
|
||||
| 验证项 | 状态 |
|
||||
|--------|------|
|
||||
| HTML 加载 | ✅ 200 OK |
|
||||
| React 引用 | ✅ |
|
||||
| Root 节点 | ✅ |
|
||||
| Script 标签 | ✅ |
|
||||
|
||||
### API 代理测试 (通过 Vite)
|
||||
|
||||
| API 端点 | 状态 | 说明 |
|
||||
|----------|------|------|
|
||||
| `/api/health` | ✅ 200 | 健康检查 |
|
||||
| `/api/agents` | ✅ 200 | Agent 列表 |
|
||||
| `/api/hands` | ✅ 200 | Hands 列表 |
|
||||
| `/api/channels` | ✅ 200 | 频道列表 |
|
||||
| `/api/status` | ✅ 200 | 系统状态 |
|
||||
| `/api/usage` | ✅ 200 | 用量统计 |
|
||||
| `/api/config` | ✅ 200 | 配置信息 |
|
||||
| `/api/workflows` | ✅ 200 | Workflows |
|
||||
| `/api/triggers` | ✅ 200 | Triggers |
|
||||
| `/api/skills` | ✅ 200 | Skills |
|
||||
|
||||
### WebSocket 代理测试
|
||||
|
||||
| 验证项 | 状态 |
|
||||
|--------|------|
|
||||
| 代理连接 | ✅ |
|
||||
| 消息发送 | ✅ |
|
||||
| 流式响应 | ✅ |
|
||||
|
||||
### 访问地址
|
||||
|
||||
- **Web 前端**: http://localhost:1420
|
||||
- **API 基础路径**: http://localhost:1420/api
|
||||
- **WebSocket**: ws://localhost:1420/api/agents/{agentId}/ws
|
||||
401
docs/knowledge-base/frontend-integration.md
Normal file
401
docs/knowledge-base/frontend-integration.md
Normal file
@@ -0,0 +1,401 @@
|
||||
# 前端集成模式
|
||||
|
||||
> 记录 ZCLAW Desktop 前端与 OpenFang 后端的集成模式和最佳实践。
|
||||
|
||||
---
|
||||
|
||||
## 1. 架构概览
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ React UI │
|
||||
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
|
||||
│ │ ChatArea│ │ Sidebar │ │Settings │ │ Panels │ │
|
||||
│ └────┬────┘ └────┬────┘ └────┬────┘ └────┬────┘ │
|
||||
│ │ │ │ │ │
|
||||
│ └────────────┴────────────┴────────────┘ │
|
||||
│ │ │
|
||||
│ Zustand Store │
|
||||
│ ┌──────────────┼──────────────┐ │
|
||||
│ │ │ │ │
|
||||
│ chatStore gatewayStore settingsStore │
|
||||
│ │ │ │ │
|
||||
└───────────┼──────────────┼──────────────┼──────────────┘
|
||||
│ │ │
|
||||
└──────────────┼──────────────┘
|
||||
│
|
||||
GatewayClient
|
||||
┌─────────┴─────────┐
|
||||
│ │
|
||||
WebSocket (流式) REST API (非流式)
|
||||
│ │
|
||||
└─────────┬─────────┘
|
||||
│
|
||||
OpenFang Backend
|
||||
(port 50051)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. 状态管理
|
||||
|
||||
### 2.1 Store 分层
|
||||
|
||||
| Store | 职责 | 关键状态 |
|
||||
|-------|------|----------|
|
||||
| `chatStore` | 聊天消息、对话、流式状态 | messages, conversations, isStreaming |
|
||||
| `gatewayStore` | Gateway 连接、Agent、Hands | connectionState, clones, hands |
|
||||
| `settingsStore` | 用户设置、主题 | backendType, theme |
|
||||
|
||||
### 2.2 chatStore 核心模式
|
||||
|
||||
```typescript
|
||||
// chatStore.ts
|
||||
interface ChatState {
|
||||
// 状态
|
||||
messages: Message[];
|
||||
conversations: Conversation[];
|
||||
isStreaming: boolean;
|
||||
|
||||
// 操作
|
||||
addMessage: (message: Message) => void;
|
||||
updateMessage: (id: string, updates: Partial<Message>) => void;
|
||||
sendMessage: (content: string) => Promise<void>;
|
||||
}
|
||||
|
||||
// sendMessage 实现
|
||||
sendMessage: async (content: string) => {
|
||||
// 1. 添加用户消息
|
||||
addMessage({ id: `user_${Date.now()}`, role: 'user', content });
|
||||
|
||||
// 2. 创建助手消息占位符
|
||||
const assistantId = `assistant_${Date.now()}`;
|
||||
addMessage({ id: assistantId, role: 'assistant', content: '', streaming: true });
|
||||
set({ isStreaming: true });
|
||||
|
||||
try {
|
||||
// 3. 优先使用流式 API
|
||||
if (client.getState() === 'connected') {
|
||||
await client.chatStream(content, {
|
||||
onDelta: (delta) => {
|
||||
// 累积更新内容
|
||||
updateMessage(assistantId, {
|
||||
content: /* 当前内容 + delta */
|
||||
});
|
||||
},
|
||||
onComplete: () => {
|
||||
updateMessage(assistantId, { streaming: false });
|
||||
set({ isStreaming: false });
|
||||
},
|
||||
onError: (error) => {
|
||||
updateMessage(assistantId, { content: `⚠️ ${error}`, error });
|
||||
},
|
||||
});
|
||||
} else {
|
||||
// 4. Fallback 到 REST API
|
||||
const result = await client.chat(content);
|
||||
updateMessage(assistantId, { content: result.response, streaming: false });
|
||||
}
|
||||
} catch (err) {
|
||||
// 5. 错误处理
|
||||
updateMessage(assistantId, { content: `⚠️ ${err.message}`, error: err.message });
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 2.3 gatewayStore 核心模式
|
||||
|
||||
```typescript
|
||||
// gatewayStore.ts
|
||||
interface GatewayState {
|
||||
connectionState: 'disconnected' | 'connecting' | 'connected';
|
||||
clones: AgentProfile[];
|
||||
hands: Hand[];
|
||||
|
||||
connect: () => Promise<void>;
|
||||
loadClones: () => Promise<void>;
|
||||
loadHands: () => Promise<void>;
|
||||
}
|
||||
|
||||
// 连接流程
|
||||
connect: async () => {
|
||||
const client = getGatewayClient();
|
||||
set({ connectionState: 'connecting' });
|
||||
|
||||
try {
|
||||
await client.connect();
|
||||
set({ connectionState: 'connected' });
|
||||
|
||||
// 自动加载数据
|
||||
await get().loadClones();
|
||||
await get().loadHands();
|
||||
} catch (err) {
|
||||
set({ connectionState: 'disconnected' });
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. GatewayClient 模式
|
||||
|
||||
### 3.1 单例模式
|
||||
|
||||
```typescript
|
||||
// gateway-client.ts
|
||||
let instance: GatewayClient | null = null;
|
||||
|
||||
export function getGatewayClient(): GatewayClient {
|
||||
if (!instance) {
|
||||
instance = new GatewayClient();
|
||||
}
|
||||
return instance;
|
||||
}
|
||||
```
|
||||
|
||||
### 3.2 流式聊天实现
|
||||
|
||||
```typescript
|
||||
class GatewayClient {
|
||||
private streamCallbacks = new Map<string, StreamCallbacks>();
|
||||
|
||||
async chatStream(
|
||||
message: string,
|
||||
callbacks: StreamCallbacks,
|
||||
options?: { sessionKey?: string; agentId?: string }
|
||||
): Promise<{ runId: string }> {
|
||||
const runId = generateRunId();
|
||||
const agentId = options?.agentId || this.defaultAgentId;
|
||||
|
||||
// 存储回调
|
||||
this.streamCallbacks.set(runId, callbacks);
|
||||
|
||||
// 连接 WebSocket
|
||||
const ws = this.connectOpenFangStream(agentId, runId, options?.sessionKey, message);
|
||||
|
||||
return { runId };
|
||||
}
|
||||
|
||||
private handleOpenFangStreamEvent(runId: string, event: unknown) {
|
||||
const callbacks = this.streamCallbacks.get(runId);
|
||||
if (!callbacks) return;
|
||||
|
||||
const e = event as OpenFangEvent;
|
||||
|
||||
switch (e.type) {
|
||||
case 'text_delta':
|
||||
callbacks.onDelta(e.content || '');
|
||||
break;
|
||||
case 'response':
|
||||
callbacks.onComplete();
|
||||
this.streamCallbacks.delete(runId);
|
||||
break;
|
||||
case 'error':
|
||||
callbacks.onError(e.content || 'Unknown error');
|
||||
this.streamCallbacks.delete(runId);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 3.3 回调类型定义
|
||||
|
||||
```typescript
|
||||
interface StreamCallbacks {
|
||||
onDelta: (delta: string) => void;
|
||||
onTool?: (tool: string, input: string, output: string) => void;
|
||||
onHand?: (name: string, status: string, result?: unknown) => void;
|
||||
onComplete: () => void;
|
||||
onError: (error: string) => void;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. 组件模式
|
||||
|
||||
### 4.1 使用 Store
|
||||
|
||||
```typescript
|
||||
// ChatArea.tsx
|
||||
function ChatArea() {
|
||||
// 使用 selector 优化性能
|
||||
const messages = useChatStore((state) => state.messages);
|
||||
const isStreaming = useChatStore((state) => state.isStreaming);
|
||||
const sendMessage = useChatStore((state) => state.sendMessage);
|
||||
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
### 4.2 流式消息渲染
|
||||
|
||||
```typescript
|
||||
function MessageBubble({ message }: { message: Message }) {
|
||||
return (
|
||||
<div className={cn(
|
||||
"message-bubble",
|
||||
message.streaming && "animate-pulse",
|
||||
message.error && "text-red-500"
|
||||
)}>
|
||||
{message.content}
|
||||
{message.streaming && (
|
||||
<span className="cursor-blink">▋</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 4.3 错误边界
|
||||
|
||||
```typescript
|
||||
class ErrorBoundary extends React.Component {
|
||||
state = { hasError: false };
|
||||
|
||||
static getDerivedStateFromError(error: Error) {
|
||||
return { hasError: true };
|
||||
}
|
||||
|
||||
componentDidCatch(error: Error, info: React.ErrorInfo) {
|
||||
console.error('Component error:', error, info);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
return <ErrorFallback onRetry={() => this.setState({ hasError: false })} />;
|
||||
}
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. 代理配置
|
||||
|
||||
### 5.1 Vite 开发代理
|
||||
|
||||
```typescript
|
||||
// vite.config.ts
|
||||
export default defineConfig({
|
||||
server: {
|
||||
port: 1420,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://127.0.0.1:50051',
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
ws: true, // WebSocket 支持
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### 5.2 动态后端切换
|
||||
|
||||
```typescript
|
||||
// 根据后端类型切换代理目标
|
||||
const BACKEND_PORTS = {
|
||||
openclaw: 18789,
|
||||
openfang: 50051,
|
||||
};
|
||||
|
||||
const backendType = localStorage.getItem('zclaw-backend') || 'openfang';
|
||||
const targetPort = BACKEND_PORTS[backendType];
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. 持久化
|
||||
|
||||
### 6.1 Zustand Persist
|
||||
|
||||
```typescript
|
||||
export const useChatStore = create<ChatState>()(
|
||||
persist(
|
||||
(set, get) => ({
|
||||
// ... state and actions
|
||||
}),
|
||||
{
|
||||
name: 'zclaw-chat-storage',
|
||||
partialize: (state) => ({
|
||||
conversations: state.conversations,
|
||||
currentModel: state.currentModel,
|
||||
}),
|
||||
onRehydrateStorage: () => (state) => {
|
||||
// 重建 Date 对象
|
||||
if (state?.conversations) {
|
||||
for (const conv of state.conversations) {
|
||||
conv.createdAt = new Date(conv.createdAt);
|
||||
conv.updatedAt = new Date(conv.updatedAt);
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. 最佳实践
|
||||
|
||||
### 7.1 不要直接调用 WebSocket
|
||||
|
||||
```typescript
|
||||
// ❌ 错误 - 在组件中直接创建 WebSocket
|
||||
function ChatArea() {
|
||||
const ws = new WebSocket(url); // 不要这样做
|
||||
}
|
||||
|
||||
// ✅ 正确 - 通过 GatewayClient
|
||||
function ChatArea() {
|
||||
const sendMessage = useChatStore((state) => state.sendMessage);
|
||||
// sendMessage 内部使用 GatewayClient
|
||||
}
|
||||
```
|
||||
|
||||
### 7.2 处理连接状态
|
||||
|
||||
```typescript
|
||||
// 显示连接状态给用户
|
||||
function ConnectionStatus() {
|
||||
const state = useGatewayStore((state) => state.connectionState);
|
||||
|
||||
return (
|
||||
<div className={cn(
|
||||
"status-indicator",
|
||||
state === 'connected' && "bg-green-500",
|
||||
state === 'connecting' && "bg-yellow-500",
|
||||
state === 'disconnected' && "bg-red-500"
|
||||
)}>
|
||||
{state}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 7.3 优雅降级
|
||||
|
||||
```typescript
|
||||
// 流式失败时降级到 REST
|
||||
try {
|
||||
await client.chatStream(message, callbacks);
|
||||
} catch (streamError) {
|
||||
console.warn('Stream failed, falling back to REST:', streamError);
|
||||
const result = await client.chat(message);
|
||||
// 处理 REST 响应
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 更新历史
|
||||
|
||||
| 日期 | 变更 |
|
||||
|------|------|
|
||||
| 2026-03-14 | 初始版本 |
|
||||
185
docs/knowledge-base/hands-integration-lessons.md
Normal file
185
docs/knowledge-base/hands-integration-lessons.md
Normal file
@@ -0,0 +1,185 @@
|
||||
# Hands 集成经验总结
|
||||
|
||||
**完成日期**: 2026-03-14
|
||||
**任务**: 将 OpenFang Hands 功能集成到 ZClaw 桌面客户端
|
||||
|
||||
---
|
||||
|
||||
## 一、任务概述
|
||||
|
||||
### 1.1 目标
|
||||
|
||||
将 OpenFang 的 Hands（自主能力包）功能深度集成到 ZClaw 桌面客户端，提供与 OpenFang Web 界面对等的用户体验。
|
||||
|
||||
### 1.2 完成内容
|
||||
|
||||
1. **布局重构**：
|
||||
- 左侧 Sidebar 的 Hands 标签显示自主能力包列表
|
||||
- 中间区域显示选中 Hand 的任务清单和执行结果
|
||||
- 右侧面板移除 Hands 相关内容
|
||||
|
||||
2. **中文化**：
|
||||
- 所有 UI 文本改为中文
|
||||
- 状态标签、按钮、提示信息全部本地化
|
||||
|
||||
3. **新增组件**：
|
||||
- `HandList.tsx` - 左侧导航的 Hands 列表
|
||||
- `HandTaskPanel.tsx` - Hand 任务和结果面板
|
||||
|
||||
---
|
||||
|
||||
## 二、关键技术决策
|
||||
|
||||
### 2.1 组件拆分策略
|
||||
|
||||
**决策**: 将 Hands 功能拆分为列表展示和详情展示两个独立组件
|
||||
|
||||
**理由**:
|
||||
- 符合单一职责原则
|
||||
- 便于独立维护和测试
|
||||
- 与现有布局结构匹配
|
||||
|
||||
**代码结构**:
|
||||
```
|
||||
desktop/src/components/
|
||||
├── HandList.tsx # 左侧列表组件
|
||||
├── HandTaskPanel.tsx # 中间详情面板
|
||||
├── Sidebar.tsx # 集成 HandList
|
||||
└── App.tsx # 路由和状态管理
|
||||
```
|
||||
|
||||
### 2.2 状态管理
|
||||
|
||||
**决策**: 使用 App.tsx 中的 selectedHandId 状态管理选中项
|
||||
|
||||
**实现**:
|
||||
```typescript
|
||||
// App.tsx
|
||||
const [selectedHandId, setSelectedHandId] = useState<string | undefined>(undefined);
|
||||
|
||||
// 传递给 Sidebar
|
||||
<Sidebar
|
||||
selectedHandId={selectedHandId}
|
||||
onSelectHand={setSelectedHandId}
|
||||
/>
|
||||
|
||||
// 中间区域根据状态显示不同内容
|
||||
{mainContentView === 'hands' && selectedHandId ? (
|
||||
<HandTaskPanel handId={selectedHandId} onBack={() => setSelectedHandId(undefined)} />
|
||||
) : ...}
|
||||
```
|
||||
|
||||
### 2.3 类型定义
|
||||
|
||||
**决策**: 扩展 gatewayStore 中的 Hand 类型以支持新 UI
|
||||
|
||||
**关键字段**:
|
||||
```typescript
|
||||
interface Hand {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
status: 'idle' | 'running' | 'needs_approval' | 'error' | 'unavailable' | 'setup_needed';
|
||||
icon?: string;
|
||||
toolCount?: number;
|
||||
// ... 其他字段
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 三、遇到的问题与解决方案
|
||||
|
||||
### 3.1 未使用导入错误
|
||||
|
||||
**问题**: 创建组件时引入了未使用的依赖
|
||||
|
||||
**解决**: 及时清理未使用的导入
|
||||
```typescript
|
||||
// 移除未使用的 useState
|
||||
// 移除未使用的类型 HandRun, RefreshCw
|
||||
```
|
||||
|
||||
### 3.2 布局一致性
|
||||
|
||||
**问题**: 新组件需要与现有 UI 风格保持一致
|
||||
|
||||
**解决**:
|
||||
- 使用 Tailwind CSS 类保持样式一致
|
||||
- 参考 ChatArea.tsx 等现有组件的结构
|
||||
- 使用 lucide-react 图标库保持图标一致
|
||||
|
||||
### 3.3 状态同步
|
||||
|
||||
**问题**: 选中 Hand 后需要同时更新左侧高亮和中间内容
|
||||
|
||||
**解决**:
|
||||
- 通过 props 传递 selectedHandId
|
||||
- 在 Sidebar 中处理点击事件并通知父组件
|
||||
- 使用回调函数 `onSelectHand` 实现状态提升
|
||||
|
||||
---
|
||||
|
||||
## 四、最佳实践
|
||||
|
||||
### 4.1 组件设计
|
||||
|
||||
1. **保持组件精简**: 每个组件不超过 300 行
|
||||
2. **使用 TypeScript 接口**: 明确定义 Props 类型
|
||||
3. **添加文档注释**: 说明组件用途和关键参数
|
||||
|
||||
### 4.2 状态管理
|
||||
|
||||
1. **状态提升**: 共享状态放在最近的共同父组件
|
||||
2. **单向数据流**: 通过 props 传递，通过回调更新
|
||||
3. **使用 Zustand**: 全局状态通过 store 管理
|
||||
|
||||
### 4.3 UI 开发
|
||||
|
||||
1. **中文化优先**: 所有用户可见文本使用中文
|
||||
2. **状态反馈**: 加载中、错误、空状态都要有明确提示
|
||||
3. **可访问性**: 添加 title 属性，使用语义化标签
|
||||
|
||||
---
|
||||
|
||||
## 五、后续工作
|
||||
|
||||
### 5.1 待完成功能
|
||||
|
||||
根据 `plans/fancy-sprouting-teacup.md` 计划：
|
||||
|
||||
1. **Phase 1**: HandsPanel 增强
|
||||
- 详情弹窗 (Details Modal)
|
||||
- Requirements 状态可视化
|
||||
- 工具和指标列表展示
|
||||
|
||||
2. **Phase 2**: WorkflowList 增强
|
||||
- 创建/编辑 Workflow
|
||||
- 执行历史查看
|
||||
|
||||
3. **Phase 3**: SchedulerPanel
|
||||
- 定时任务管理
|
||||
- 事件触发器
|
||||
|
||||
4. **Phase 4**: ApprovalsPanel
|
||||
- 独立审批页面
|
||||
- 筛选功能
|
||||
|
||||
### 5.2 技术债务
|
||||
|
||||
- [ ] 添加单元测试覆盖新组件
|
||||
- [ ] 处理 gatewayStore.ts 中的预存 TypeScript 错误
|
||||
- [ ] 实现真实的 API 调用（目前使用模拟数据）
|
||||
|
||||
---
|
||||
|
||||
## 六、参考资料
|
||||
|
||||
- [OpenFang 技术参考](../openfang-technical-reference.md)
|
||||
- [功能清单](./feature-checklist.md)
|
||||
- [前端集成指南](./frontend-integration.md)
|
||||
- [OpenFang WebSocket 协议](./openfang-websocket-protocol.md)
|
||||
|
||||
---
|
||||
|
||||
*文档创建: 2026-03-14*
|
||||
282
docs/knowledge-base/openfang-websocket-protocol.md
Normal file
282
docs/knowledge-base/openfang-websocket-protocol.md
Normal file
@@ -0,0 +1,282 @@
|
||||
# OpenFang WebSocket 协议实际实现
|
||||
|
||||
> **重要**: OpenFang 实际的 WebSocket 协议与官方文档有差异。本文档记录实际测试验证的协议格式。
|
||||
|
||||
**测试日期**: 2026-03-14
|
||||
**OpenFang 版本**: 0.4.0
|
||||
**测试环境**: Windows 11, Node.js v24
|
||||
|
||||
---
|
||||
|
||||
## 1. WebSocket 连接
|
||||
|
||||
### 端点 URL
|
||||
|
||||
```
|
||||
ws://127.0.0.1:50051/api/agents/{agentId}/ws
|
||||
```
|
||||
|
||||
- **端口**: 50051 (非文档中的 4200)
|
||||
- **agentId**: 必须是真实的 Agent UUID，不能使用 "default"
|
||||
|
||||
### 获取 Agent ID
|
||||
|
||||
```bash
|
||||
curl http://127.0.0.1:50051/api/agents
|
||||
```
|
||||
|
||||
返回示例：
|
||||
```json
|
||||
[
|
||||
{
|
||||
"id": "f77004c8-418f-4132-b7d4-7ecb9d66f44c",
|
||||
"name": "General Assistant",
|
||||
"model_provider": "zhipu",
|
||||
"model_name": "glm-4-flash",
|
||||
"state": "Running"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. 消息格式
|
||||
|
||||
### 发送消息 (实际格式)
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "message",
|
||||
"content": "Hello, how are you?",
|
||||
"session_id": "session_123"
|
||||
}
|
||||
```
|
||||
|
||||
### 文档中的格式 (错误)
|
||||
|
||||
```json
|
||||
// ❌ 这是错误的格式，不要使用
|
||||
{
|
||||
"type": "chat",
|
||||
"message": {
|
||||
"role": "user",
|
||||
"content": "Hello"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. 事件类型
|
||||
|
||||
### 连接事件
|
||||
|
||||
| 事件类型 | 说明 | 数据格式 |
|
||||
|---------|------|----------|
|
||||
| `connected` | 连接成功 | `{"agent_id": "uuid", "type": "connected"}` |
|
||||
| `agents_updated` | Agent 列表更新 | `{"agents": [...], "type": "agents_updated"}` |
|
||||
|
||||
### 聊天事件
|
||||
|
||||
| 事件类型 | 说明 | 数据格式 |
|
||||
|---------|------|----------|
|
||||
| `typing` | 输入状态 | `{"state": "start" 或 "stop", "type": "typing"}` |
|
||||
| `phase` | 阶段变化 | `{"phase": "streaming" 或 "done", "type": "phase"}` |
|
||||
| `text_delta` | 文本增量 | `{"content": "文本内容", "type": "text_delta"}` |
|
||||
| `response` | 完整响应 | `{"content": "...", "input_tokens": 100, "output_tokens": 50, "type": "response"}` |
|
||||
| `error` | 错误 | `{"content": "错误信息", "type": "error"}` |
|
||||
|
||||
### 文档中的事件 (错误)
|
||||
|
||||
| 文档事件 | 实际事件 |
|
||||
|---------|---------|
|
||||
| `stream.delta.content` | `text_delta.content` |
|
||||
| `stream.phase` | `phase` |
|
||||
|
||||
---
|
||||
|
||||
## 4. 事件序列
|
||||
|
||||
完整的聊天事件序列：
|
||||
|
||||
```
|
||||
1. connected - 连接成功
|
||||
2. typing (start) - 开始输入
|
||||
3. agents_updated - Agent 状态更新
|
||||
4. phase (streaming)- 流式输出开始
|
||||
5. text_delta - 文本增量 (可能多次)
|
||||
6. phase (done) - 流式输出完成
|
||||
7. typing (stop) - 输入结束
|
||||
8. response - 完整响应 (含 token 统计)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. 代码示例
|
||||
|
||||
### Node.js WebSocket 客户端
|
||||
|
||||
```javascript
|
||||
const WebSocket = require('ws');
|
||||
|
||||
const agentId = 'f77004c8-418f-4132-b7d4-7ecb9d66f44c';
|
||||
const ws = new WebSocket(`ws://127.0.0.1:50051/api/agents/${agentId}/ws`);
|
||||
|
||||
let fullContent = '';
|
||||
|
||||
ws.on('open', () => {
|
||||
// 发送消息 - 使用正确的格式
|
||||
ws.send(JSON.stringify({
|
||||
type: 'message',
|
||||
content: 'Hello!',
|
||||
session_id: 'test_session'
|
||||
}));
|
||||
});
|
||||
|
||||
ws.on('message', (data) => {
|
||||
const event = JSON.parse(data.toString());
|
||||
|
||||
switch (event.type) {
|
||||
case 'text_delta':
|
||||
// 累积文本内容
|
||||
fullContent += event.content || '';
|
||||
break;
|
||||
case 'response':
|
||||
console.log('Complete:', fullContent);
|
||||
console.log('Tokens:', event.input_tokens, event.output_tokens);
|
||||
break;
|
||||
case 'error':
|
||||
console.error('Error:', event.content);
|
||||
break;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### React + Zustand 集成
|
||||
|
||||
```typescript
|
||||
// chatStore.ts
|
||||
sendMessage: async (content: string) => {
|
||||
const client = getGatewayClient();
|
||||
|
||||
if (client.getState() === 'connected') {
|
||||
await client.chatStream(content, {
|
||||
onDelta: (delta: string) => {
|
||||
// 更新消息内容
|
||||
set((state) => ({
|
||||
messages: state.messages.map((m) =>
|
||||
m.id === assistantId
|
||||
? { ...m, content: m.content + delta }
|
||||
: m
|
||||
),
|
||||
}));
|
||||
},
|
||||
onComplete: () => {
|
||||
set({ isStreaming: false });
|
||||
},
|
||||
onError: (error: string) => {
|
||||
// 处理错误
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. Vite 代理配置
|
||||
|
||||
必须启用 WebSocket 代理：
|
||||
|
||||
```typescript
|
||||
// vite.config.ts
|
||||
export default defineConfig({
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://127.0.0.1:50051',
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
ws: true, // ✅ 必须启用
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. 常见错误
|
||||
|
||||
### 错误: "Unexpected server response: 400"
|
||||
|
||||
**原因**: Agent ID 无效或格式错误
|
||||
|
||||
**解决**: 使用真实的 Agent UUID，不要使用 "default"
|
||||
|
||||
### 错误: "Missing API key: No LLM provider configured"
|
||||
|
||||
**原因**: Agent 使用的 LLM 提供商未配置 API Key
|
||||
|
||||
**解决**:
|
||||
1. 检查 `~/.openfang/.env` 文件
|
||||
2. 确保对应提供商的 API Key 已设置
|
||||
3. 或使用已配置的 Agent (如 General Assistant - zhipu)
|
||||
|
||||
### 错误: WebSocket 连接成功但无响应
|
||||
|
||||
**原因**: 消息格式错误
|
||||
|
||||
**解决**: 确保使用 `{ type: 'message', content, session_id }` 格式
|
||||
|
||||
---
|
||||
|
||||
## 8. REST API 端点
|
||||
|
||||
### 健康检查
|
||||
|
||||
```bash
|
||||
GET /api/health
|
||||
# {"status":"ok","version":"0.4.0"}
|
||||
```
|
||||
|
||||
### Agent 列表
|
||||
|
||||
```bash
|
||||
GET /api/agents
|
||||
# 返回所有 Agent 数组
|
||||
```
|
||||
|
||||
### Hands 列表
|
||||
|
||||
```bash
|
||||
GET /api/hands
|
||||
# 返回所有 Hands 数组
|
||||
```
|
||||
|
||||
### REST 聊天 (非流式)
|
||||
|
||||
```bash
|
||||
POST /api/agents/{agentId}/message
|
||||
Content-Type: application/json
|
||||
|
||||
{"message": "Hello"}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 9. 相关文件
|
||||
|
||||
| 文件 | 说明 |
|
||||
|------|------|
|
||||
| `desktop/src/lib/gateway-client.ts` | WebSocket 客户端实现 |
|
||||
| `desktop/src/store/chatStore.ts` | 聊天状态管理 |
|
||||
| `desktop/vite.config.ts` | Vite 代理配置 |
|
||||
|
||||
---
|
||||
|
||||
## 更新历史
|
||||
|
||||
| 日期 | 变更 |
|
||||
|------|------|
|
||||
| 2026-03-14 | 初始版本，记录协议差异和实际实现 |
|
||||
417
docs/knowledge-base/tauri-desktop.md
Normal file
417
docs/knowledge-base/tauri-desktop.md
Normal file
@@ -0,0 +1,417 @@
|
||||
# Tauri 桌面端开发笔记
|
||||
|
||||
> 记录 ZCLAW Desktop Tauri 开发过程中的经验和注意事项。
|
||||
|
||||
---
|
||||
|
||||
## 1. 项目结构
|
||||
|
||||
```
|
||||
desktop/
|
||||
├── src/ # React 前端
|
||||
│ ├── components/ # UI 组件
|
||||
│ ├── store/ # Zustand 状态管理
|
||||
│ ├── lib/ # 工具库
|
||||
│ └── App.tsx # 入口组件
|
||||
├── src-tauri/ # Tauri Rust 后端
|
||||
│ ├── src/
|
||||
│ │ ├── lib.rs # 主入口
|
||||
│ │ └── main.rs # 主函数
|
||||
│ ├── Cargo.toml # Rust 依赖
|
||||
│ ├── tauri.conf.json # Tauri 配置
|
||||
│ └── build.rs # 构建脚本
|
||||
├── package.json
|
||||
└── vite.config.ts
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. 开发命令
|
||||
|
||||
### 2.1 常用命令
|
||||
|
||||
```bash
|
||||
# 启动开发服务器 (Vite + Tauri)
|
||||
pnpm tauri dev
|
||||
|
||||
# 仅启动前端 (Vite)
|
||||
pnpm dev
|
||||
|
||||
# 构建生产版本
|
||||
pnpm tauri build
|
||||
|
||||
# 类型检查
|
||||
pnpm tsc --noEmit
|
||||
```
|
||||
|
||||
### 2.2 命令说明
|
||||
|
||||
| 命令 | 说明 | 端口 |
|
||||
|------|------|------|
|
||||
| `pnpm dev` | 仅 Vite 开发服务器 | 1420 |
|
||||
| `pnpm tauri dev` | Tauri + Vite | 1420 (Vite) + Native Window |
|
||||
| `pnpm tauri build` | 生产构建 | - |
|
||||
|
||||
---
|
||||
|
||||
## 3. 配置文件
|
||||
|
||||
### 3.1 tauri.conf.json 关键配置
|
||||
|
||||
```json
|
||||
{
|
||||
"build": {
|
||||
"beforeDevCommand": "pnpm dev",
|
||||
"beforeBuildCommand": "pnpm build",
|
||||
"devPath": "http://localhost:1420",
|
||||
"distDir": "../dist"
|
||||
},
|
||||
"tauri": {
|
||||
"windows": [
|
||||
{
|
||||
"title": "ZCLAW",
|
||||
"width": 1200,
|
||||
"height": 800,
|
||||
"resizable": true,
|
||||
"fullscreen": false
|
||||
}
|
||||
],
|
||||
"security": {
|
||||
"csp": "default-src 'self'; connect-src 'self' ws://localhost:* ws://127.0.0.1:*"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 3.2 Vite 配置
|
||||
|
||||
```typescript
|
||||
// vite.config.ts
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
port: 1420,
|
||||
strictPort: true,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://127.0.0.1:50051',
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
ws: true, // WebSocket 支持
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. 常见问题
|
||||
|
||||
### 4.1 端口占用
|
||||
|
||||
**症状**: `Port 1420 is already in use`
|
||||
|
||||
**解决方案**:
|
||||
|
||||
```powershell
|
||||
# 查找占用进程
|
||||
netstat -ano | findstr "1420"
|
||||
|
||||
# 终止进程
|
||||
Stop-Process -Id <PID> -Force
|
||||
```
|
||||
|
||||
### 4.2 Tauri 编译失败
|
||||
|
||||
**常见原因**:
|
||||
|
||||
1. **Rust 版本过低**
|
||||
```bash
|
||||
rustup update
|
||||
```
|
||||
|
||||
2. **依赖缺失**
|
||||
```bash
|
||||
# Windows 需要 Visual Studio Build Tools
|
||||
# 安装: https://visualstudio.microsoft.com/visual-cpp-build-tools/
|
||||
|
||||
# 确保 C++ 工作负载已安装
|
||||
```
|
||||
|
||||
3. **Cargo 缓存问题**
|
||||
```bash
|
||||
cd desktop/src-tauri
|
||||
cargo clean
|
||||
cargo build
|
||||
```
|
||||
|
||||
### 4.3 窗口白屏
|
||||
|
||||
**排查步骤**:
|
||||
|
||||
1. 检查 Vite 开发服务器是否运行
|
||||
2. 打开 DevTools (F12) 查看控制台错误
|
||||
3. 检查 `tauri.conf.json` 中的 `devPath`
|
||||
|
||||
**解决方案**:
|
||||
|
||||
```typescript
|
||||
// 确保在 tauri.conf.json 中启用 devtools
|
||||
{
|
||||
"tauri": {
|
||||
"windows": [{
|
||||
"devtools": true // 开发模式下启用
|
||||
}]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 4.4 热重载不工作
|
||||
|
||||
**检查**:
|
||||
|
||||
1. `beforeDevCommand` 是否正确配置
|
||||
2. 文件监听限制 (Linux)
|
||||
```bash
|
||||
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf
|
||||
sudo sysctl -p
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. IPC 通信
|
||||
|
||||
### 5.1 Rust 端暴露命令
|
||||
|
||||
```rust
|
||||
// src-tauri/src/lib.rs
|
||||
#[tauri::command]
|
||||
fn get_app_version() -> String {
|
||||
env!("CARGO_PKG_VERSION").to_string()
|
||||
}
|
||||
|
||||
fn main() {
|
||||
tauri::Builder::default()
|
||||
.invoke_handler(tauri::generate_handler![
|
||||
get_app_version,
|
||||
// 其他命令
|
||||
])
|
||||
.run(tauri::generate_context!())
|
||||
.expect("error while running tauri application");
|
||||
}
|
||||
```
|
||||
|
||||
### 5.2 前端调用
|
||||
|
||||
```typescript
|
||||
import { invoke } from '@tauri-apps/api/core';
|
||||
|
||||
const version = await invoke<string>('get_app_version');
|
||||
```
|
||||
|
||||
### 5.3 常用 Tauri API
|
||||
|
||||
| API | 用途 |
|
||||
|-----|------|
|
||||
| `@tauri-apps/api/core` | invoke, convertFileSrc |
|
||||
| `@tauri-apps/api/window` | 窗口管理 |
|
||||
| `@tauri-apps/api/shell` | 执行 shell 命令 |
|
||||
| `@tauri-apps/api/fs` | 文件系统 |
|
||||
| `@tauri-apps/api/path` | 路径 API |
|
||||
|
||||
---
|
||||
|
||||
## 6. 安全配置
|
||||
|
||||
### 6.1 CSP 配置
|
||||
|
||||
```json
|
||||
{
|
||||
"tauri": {
|
||||
"security": {
|
||||
"csp": "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; connect-src 'self' ws://localhost:* ws://127.0.0.1:* http://127.0.0.1:*; font-src 'self' https://fonts.gstatic.com"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 6.2 允许的协议
|
||||
|
||||
确保 CSP 允许：
|
||||
- `ws://localhost:*` - 本地 WebSocket
|
||||
- `ws://127.0.0.1:*` - OpenFang WebSocket
|
||||
- `http://127.0.0.1:*` - OpenFang REST API
|
||||
|
||||
---
|
||||
|
||||
## 7. 本地 Gateway 集成
|
||||
|
||||
### 7.1 Bundled Runtime
|
||||
|
||||
ZCLAW Desktop 可以捆绑 OpenFang Runtime：
|
||||
|
||||
```
|
||||
desktop/src-tauri/resources/
|
||||
└── openfang-runtime/
|
||||
├── openfang.exe
|
||||
├── config/
|
||||
└── ...
|
||||
```
|
||||
|
||||
### 7.2 启动本地 Gateway
|
||||
|
||||
```rust
|
||||
#[tauri::command]
|
||||
async fn start_local_gateway(app: AppHandle) -> Result<(), String> {
|
||||
let resource_path = app.path_resolver()
|
||||
.resource_dir()
|
||||
.ok_or("Failed to get resource dir")?;
|
||||
|
||||
let openfang_path = resource_path.join("openfang-runtime/openfang.exe");
|
||||
|
||||
// 启动进程
|
||||
Command::new(openfang_path)
|
||||
.args(["start"])
|
||||
.spawn()
|
||||
.map_err(|e| e.to_string())?;
|
||||
|
||||
Ok(())
|
||||
}
|
||||
```
|
||||
|
||||
### 7.3 检测 Gateway 状态
|
||||
|
||||
```typescript
|
||||
// 前端检测
|
||||
async function checkGatewayStatus(): Promise<'running' | 'stopped'> {
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:50051/api/health');
|
||||
if (response.ok) {
|
||||
return 'running';
|
||||
}
|
||||
} catch {
|
||||
// Gateway 未运行
|
||||
}
|
||||
return 'stopped';
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 8. 构建发布
|
||||
|
||||
### 8.1 构建命令
|
||||
|
||||
```bash
|
||||
pnpm tauri build
|
||||
```
|
||||
|
||||
输出位置：
|
||||
```
|
||||
desktop/src-tauri/target/release/
|
||||
├── desktop.exe # 可执行文件
|
||||
└── bundle/
|
||||
├── msi/ # Windows 安装包
|
||||
└── nsis/ # NSIS 安装包
|
||||
```
|
||||
|
||||
### 8.2 构建配置
|
||||
|
||||
```json
|
||||
{
|
||||
"tauri": {
|
||||
"bundle": {
|
||||
"identifier": "com.zclaw.desktop",
|
||||
"icon": ["icons/32x32.png", "icons/128x128.png", "icons/icon.ico"],
|
||||
"targets": ["msi", "nsis"],
|
||||
"windows": {
|
||||
"certificateThumbprint": null,
|
||||
"digestAlgorithm": "sha256",
|
||||
"timestampUrl": ""
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 8.3 减小体积
|
||||
|
||||
```toml
|
||||
# Cargo.toml
|
||||
[profile.release]
|
||||
lto = true
|
||||
codegen-units = 1
|
||||
panic = "abort"
|
||||
strip = true
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 9. 调试技巧
|
||||
|
||||
### 9.1 启用 DevTools
|
||||
|
||||
开发模式下自动启用，生产模式需要在配置中启用：
|
||||
|
||||
```json
|
||||
{
|
||||
"tauri": {
|
||||
"windows": [{
|
||||
"devtools": true
|
||||
}]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 9.2 日志记录
|
||||
|
||||
```rust
|
||||
use log::{info, error};
|
||||
|
||||
#[tauri::command]
|
||||
fn some_command() -> Result<String, String> {
|
||||
info!("Command called");
|
||||
// ...
|
||||
Ok("result".to_string())
|
||||
}
|
||||
```
|
||||
|
||||
### 9.3 前端调试
|
||||
|
||||
```typescript
|
||||
// 开发模式下启用详细日志
|
||||
if (import.meta.env.DEV) {
|
||||
console.log('[Debug]', ...args);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 10. 性能优化
|
||||
|
||||
### 10.1 延迟加载
|
||||
|
||||
```typescript
|
||||
// 延迟加载非关键组件
|
||||
const Settings = lazy(() => import('./components/Settings'));
|
||||
const HandsPanel = lazy(() => import('./components/HandsPanel'));
|
||||
```
|
||||
|
||||
### 10.2 状态优化
|
||||
|
||||
```typescript
|
||||
// 使用 selector 避免不必要渲染
|
||||
const messages = useChatStore((state) => state.messages);
|
||||
// 而不是
|
||||
const store = useChatStore();
|
||||
const messages = store.messages; // 会导致所有状态变化都重渲染
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 更新历史
|
||||
|
||||
| 日期 | 变更 |
|
||||
|------|------|
|
||||
| 2026-03-14 | 初始版本 |
|
||||
276
docs/knowledge-base/troubleshooting.md
Normal file
276
docs/knowledge-base/troubleshooting.md
Normal file
@@ -0,0 +1,276 @@
|
||||
# 故障排查指南
|
||||
|
||||
> 记录开发过程中遇到的问题、根因分析和解决方案。
|
||||
|
||||
---
|
||||
|
||||
## 1. 连接问题
|
||||
|
||||
### 1.1 WebSocket 连接失败
|
||||
|
||||
**症状**: `WebSocket connection failed` 或 `Unexpected server response: 400`
|
||||
|
||||
**排查步骤**:
|
||||
|
||||
```bash
|
||||
# 1. 检查 OpenFang 是否运行
|
||||
curl http://127.0.0.1:50051/api/health
|
||||
|
||||
# 2. 检查端口是否正确
|
||||
netstat -ano | findstr "50051"
|
||||
|
||||
# 3. 验证 Agent ID
|
||||
curl http://127.0.0.1:50051/api/agents
|
||||
```
|
||||
|
||||
**常见原因**:
|
||||
|
||||
| 原因 | 解决方案 |
|
||||
|------|----------|
|
||||
| OpenFang 未启动 | `./openfang.exe start` |
|
||||
| 端口错误 | OpenFang 使用 50051，不是 4200 |
|
||||
| Agent ID 无效 | 使用 `/api/agents` 获取真实 UUID |
|
||||
|
||||
### 1.2 端口被占用
|
||||
|
||||
**症状**: `Port 1420 is already in use`
|
||||
|
||||
**解决方案**:
|
||||
|
||||
```bash
|
||||
# Windows - 查找并终止进程
|
||||
netstat -ano | findstr "1420"
|
||||
taskkill /PID <PID> /F
|
||||
|
||||
# 或使用 PowerShell
|
||||
Stop-Process -Id <PID> -Force
|
||||
```
|
||||
|
||||
### 1.3 Vite 代理不工作
|
||||
|
||||
**症状**: 前端请求返回 404 或 CORS 错误
|
||||
|
||||
**检查清单**:
|
||||
|
||||
- [ ] `vite.config.ts` 中配置了 `/api` 代理
|
||||
- [ ] `ws: true` 已启用（WebSocket 需要）
|
||||
- [ ] `changeOrigin: true` 已设置
|
||||
- [ ] 重启 Vite 开发服务器
|
||||
|
||||
---
|
||||
|
||||
## 2. 聊天问题
|
||||
|
||||
### 2.1 LLM API Key 未配置
|
||||
|
||||
**症状**:
|
||||
```
|
||||
Missing API key: No LLM provider configured.
|
||||
Set an API key (e.g. GROQ_API_KEY) and restart
|
||||
```
|
||||
|
||||
**根本原因**: Agent 使用的 LLM 提供商没有配置 API Key
|
||||
|
||||
**解决方案**:
|
||||
|
||||
1. 检查 Agent 使用的提供商：
|
||||
```bash
|
||||
curl -s http://127.0.0.1:50051/api/status | jq '.agents[] | {name, model_provider}'
|
||||
```
|
||||
|
||||
2. 配置对应的 API Key：
|
||||
```bash
|
||||
# 编辑 ~/.openfang/.env
|
||||
echo "ZHIPU_API_KEY=your_key" >> ~/.openfang/.env
|
||||
echo "BAILIAN_API_KEY=your_key" >> ~/.openfang/.env
|
||||
echo "GEMINI_API_KEY=your_key" >> ~/.openfang/.env
|
||||
```
|
||||
|
||||
3. 重启 OpenFang：
|
||||
```bash
|
||||
./openfang.exe restart
|
||||
```
|
||||
|
||||
**快速解决**: 使用已配置的 Agent
|
||||
|
||||
| Agent | 提供商 | 状态 |
|
||||
|-------|--------|------|
|
||||
| General Assistant | zhipu | 通常已配置 |
|
||||
|
||||
### 2.2 流式响应不显示
|
||||
|
||||
**症状**: 消息发送后无响应或响应不完整
|
||||
|
||||
**排查步骤**:
|
||||
|
||||
1. 确认 WebSocket 连接状态：
|
||||
```typescript
|
||||
console.log(client.getState()); // 应为 'connected'
|
||||
```
|
||||
|
||||
2. 检查事件处理：
|
||||
```typescript
|
||||
// 确保处理了 text_delta 事件
|
||||
ws.on('message', (data) => {
|
||||
const event = JSON.parse(data.toString());
|
||||
if (event.type === 'text_delta') {
|
||||
console.log('Delta:', event.content);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
3. 验证消息格式：
|
||||
```javascript
|
||||
// ✅ 正确
|
||||
{ type: 'message', content: 'Hello', session_id: 'xxx' }
|
||||
|
||||
// ❌ 错误
|
||||
{ type: 'chat', message: { role: 'user', content: 'Hello' } }
|
||||
```
|
||||
|
||||
### 2.3 消息格式错误
|
||||
|
||||
**症状**: WebSocket 连接成功，但发送消息后收到错误
|
||||
|
||||
**根本原因**: 使用了文档中的格式，而非实际格式
|
||||
|
||||
**正确的消息格式**:
|
||||
```json
|
||||
{
|
||||
"type": "message",
|
||||
"content": "你的消息内容",
|
||||
"session_id": "唯一会话ID"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. 前端问题
|
||||
|
||||
### 3.1 Zustand 状态不更新
|
||||
|
||||
**症状**: UI 不反映状态变化
|
||||
|
||||
**检查**:
|
||||
|
||||
1. 确保使用 selector：
|
||||
```typescript
|
||||
// ✅ 正确 - 使用 selector
|
||||
const messages = useChatStore((state) => state.messages);
|
||||
|
||||
// ❌ 错误 - 可能导致不必要的重渲染
|
||||
const store = useChatStore();
|
||||
const messages = store.messages;
|
||||
```
|
||||
|
||||
2. 检查 immer/persist 配置
|
||||
|
||||
### 3.2 流式消息累积错误
|
||||
|
||||
**症状**: 流式内容显示不正确或重复
|
||||
|
||||
**解决方案**:
|
||||
```typescript
|
||||
onDelta: (delta: string) => {
|
||||
set((state) => ({
|
||||
messages: state.messages.map((m) =>
|
||||
m.id === assistantId
|
||||
? { ...m, content: m.content + delta } // 累积内容
|
||||
: m
|
||||
),
|
||||
}));
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Tauri 桌面端问题
|
||||
|
||||
### 4.1 Tauri 编译失败
|
||||
|
||||
**常见错误**:
|
||||
- Rust 版本不兼容
|
||||
- 依赖缺失
|
||||
- Cargo.toml 配置错误
|
||||
|
||||
**解决方案**:
|
||||
```bash
|
||||
# 更新 Rust
|
||||
rustup update
|
||||
|
||||
# 清理并重新构建
|
||||
cd desktop/src-tauri
|
||||
cargo clean
|
||||
cargo build
|
||||
```
|
||||
|
||||
### 4.2 Tauri 窗口白屏
|
||||
|
||||
**原因**: Vite 开发服务器未启动或连接失败
|
||||
|
||||
**解决方案**:
|
||||
1. 确保 `pnpm dev` 在运行
|
||||
2. 检查 `tauri.conf.json` 中的 `beforeDevCommand`
|
||||
3. 检查浏览器控制台错误
|
||||
|
||||
### 4.3 Tauri 热重载不工作
|
||||
|
||||
**检查**:
|
||||
- `beforeDevCommand` 配置正确
|
||||
- 文件监听未超出限制（Linux: `fs.inotify.max_user_watches`）
|
||||
|
||||
---
|
||||
|
||||
## 5. 调试技巧
|
||||
|
||||
### 5.1 启用详细日志
|
||||
|
||||
```typescript
|
||||
// gateway-client.ts
|
||||
private log(level: string, message: string, data?: unknown) {
|
||||
if (this.debug) {
|
||||
console.log(`[GatewayClient:${level}]`, message, data || '');
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 5.2 WebSocket 抓包
|
||||
|
||||
```bash
|
||||
# 使用 wscat 测试
|
||||
npm install -g wscat
|
||||
wscat -c ws://127.0.0.1:50051/api/agents/{agentId}/ws
|
||||
```
|
||||
|
||||
### 5.3 检查 OpenFang 状态
|
||||
|
||||
```bash
|
||||
# 完整状态
|
||||
curl -s http://127.0.0.1:50051/api/status | jq
|
||||
|
||||
# Agent 状态
|
||||
curl -s http://127.0.0.1:50051/api/agents | jq '.[] | {id, name, state}'
|
||||
|
||||
# Hands 状态
|
||||
curl -s http://127.0.0.1:50051/api/hands | jq '.[] | {id, name, requirements_met}'
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. 错误代码参考
|
||||
|
||||
| 错误信息 | 原因 | 解决方案 |
|
||||
|---------|------|----------|
|
||||
| `Port 1420 is already in use` | Vite 服务器已运行 | 终止现有进程 |
|
||||
| `Unexpected server response: 400` | Agent ID 无效 | 使用真实 UUID |
|
||||
| `Missing API key` | LLM 提供商未配置 | 配置 API Key |
|
||||
| `Connection refused` | OpenFang 未运行 | 启动服务 |
|
||||
| `CORS error` | 代理未配置 | 检查 vite.config.ts |
|
||||
|
||||
---
|
||||
|
||||
## 更新历史
|
||||
|
||||
| 日期 | 变更 |
|
||||
|------|------|
|
||||
| 2026-03-14 | 初始版本 |
|
||||
@@ -1,7 +1,7 @@
|
||||
# ZClaw OpenFang 迁移 - 新会话提示词
|
||||
|
||||
> **更新日期**: 2026-03-13
|
||||
> **状态**: Phase 1-2 基础设施已完成，继续 Phase 3-7
|
||||
> **更新日期**: 2026-03-13 (Session 4)
|
||||
> **状态**: Phase 1-7 基本完成
|
||||
|
||||
---
|
||||
|
||||
@@ -9,36 +9,66 @@
|
||||
|
||||
### ✅ 已完成
|
||||
|
||||
1. **OpenFang 打包架构** (Phase 1-2)
|
||||
1. **OpenFang 打包架构** (Phase 1-2) ✅
|
||||
- 创建 `prepare-openfang-runtime.mjs` 跨平台下载脚本
|
||||
- 更新 Rust `lib.rs` 支持二进制运行时
|
||||
- 配置 Tauri 打包 `resources/openfang-runtime/`
|
||||
- 验证构建成功
|
||||
|
||||
2. **OpenFang 特性 UI 组件**
|
||||
- `HandsPanel.tsx` - Hands 管理界面
|
||||
2. **OpenFang 特性 UI 组件** ✅
|
||||
- `HandsPanel.tsx` - Hands 管理界面 (含审批流程)
|
||||
- `WorkflowList.tsx` - 工作流列表
|
||||
- `SecurityStatus.tsx` - 16层安全状态
|
||||
- `TriggersPanel.tsx` - 触发器管理
|
||||
- `AuditLogsPanel.tsx` - 审计日志
|
||||
- `AuditLogsPanel.tsx` - 审计日志 (已集成到 RightPanel)
|
||||
|
||||
3. **状态管理更新**
|
||||
3. **状态管理更新** ✅
|
||||
- `gatewayStore.ts` 添加 OpenFang 类型定义
|
||||
- `gateway-config.ts` 配置管理
|
||||
- `loadHands()`, `loadWorkflows()`, `loadTriggers()`, `loadSecurityStatus()` 方法
|
||||
- `approveHand()`, `cancelHand()`, `cancelWorkflow()` 方法
|
||||
- `isLoading` 状态管理
|
||||
- `connect()` 后自动加载 OpenFang 数据
|
||||
|
||||
### 🔄 进行中
|
||||
4. **Gateway Client** ✅
|
||||
- `gateway-client.ts` 已适配 OpenFang 协议
|
||||
- WebSocket 连接到 `ws://127.0.0.1:4200/ws`
|
||||
- REST API 调用 `/api/*` 端点
|
||||
- Ed25519 设备认证 + JWT
|
||||
- Hand 审批/取消 API
|
||||
|
||||
- **OpenFangClient 实现**: 需要完成 WebSocket 客户端适配 OpenFang 协议
|
||||
5. **后端切换功能** ✅
|
||||
- `Settings/General.tsx` 添加后端类型选择器
|
||||
- 支持 OpenClaw (TypeScript) 和 OpenFang (Rust) 切换
|
||||
- localStorage 持久化 `zclaw-backend`
|
||||
|
||||
### 📋 待完成 (Phase 3-7)
|
||||
6. **Tauri 后端完善** (Phase 5) ✅
|
||||
- `openfang_process_list` - 列出 OpenFang 进程
|
||||
- `openfang_process_logs` - 获取进程日志
|
||||
- `openfang_version` - 获取版本信息
|
||||
- 前端 `tauri-gateway.ts` 适配
|
||||
|
||||
7. **Hand 审批流程** (Phase 6.1) ✅
|
||||
- `approveHand()` / `cancelHand()` API
|
||||
- `HandsPanel.tsx` 审批 UI (批准/拒绝按钮)
|
||||
- 运行中取消执行功能
|
||||
|
||||
8. **测试基础设施** (Phase 7) ✅
|
||||
- `tests/fixtures/openfang-mock-server.ts` - 完整 Mock Server
|
||||
- 支持 REST API 和 WebSocket 模拟
|
||||
- `tests/desktop/integration/openfang-api.test.ts` - 34 个集成测试
|
||||
- 所有 63 个桌面端测试全部通过
|
||||
|
||||
9. **构建脚本修复** ✅
|
||||
- `tauri-build-bundled.mjs` 更新为使用 `prepare-openfang-runtime.mjs`
|
||||
|
||||
### 📋 可选后续工作
|
||||
|
||||
| Phase | 任务 | 状态 |
|
||||
|-------|------|------|
|
||||
| Phase 3 | 状态迁移 (gatewayStore 适配) | 待开始 |
|
||||
| Phase 4 | 插件迁移 (zclaw-*) | 待开始 |
|
||||
| Phase 5 | Tauri 后端完善 | 待开始 |
|
||||
| Phase 6 | UI 增强 (Hands/Workflow) | 待开始 |
|
||||
| Phase 7 | 测试验证 | 待开始 |
|
||||
| Phase 7.3 | E2E 测试 (Playwright) | 可选 |
|
||||
| - | CSP 配置 (生产环境) | 可选 |
|
||||
| - | chinese-writing 插件迁移 | 待定 |
|
||||
|
||||
---
|
||||
|
||||
@@ -74,37 +104,36 @@ ZClaw-Desktop-Setup.exe
|
||||
|
||||
---
|
||||
|
||||
## 测试
|
||||
|
||||
### 运行测试
|
||||
|
||||
```bash
|
||||
# 所有桌面端测试 (63 个)
|
||||
pnpm vitest run tests/desktop/
|
||||
|
||||
# 仅集成测试 (34 个)
|
||||
pnpm vitest run tests/desktop/integration/
|
||||
|
||||
# 单元测试
|
||||
pnpm vitest run tests/desktop/chatStore.test.ts
|
||||
pnpm vitest run tests/desktop/gatewayStore.test.ts
|
||||
```
|
||||
|
||||
### Mock Server
|
||||
|
||||
Mock Server (`tests/fixtures/openfang-mock-server.ts`) 提供：
|
||||
|
||||
- **REST API**: 所有 `/api/*` 端点
|
||||
- **WebSocket**: `/ws` 路径握手
|
||||
- **可配置数据**: Hands, Workflows, Triggers, Agents, Security Layers
|
||||
- **审计日志**: 可添加自定义日志条目
|
||||
|
||||
---
|
||||
|
||||
## 下一步工作
|
||||
|
||||
### 优先级 1: OpenFangClient 实现
|
||||
|
||||
文件: `desktop/src/lib/openfang-client.ts`
|
||||
|
||||
```typescript
|
||||
// 需要实现
|
||||
class OpenFangClient implements GatewayBackend {
|
||||
private ws: WebSocket;
|
||||
private url = 'ws://127.0.0.1:4200/ws';
|
||||
|
||||
async connect(): Promise<void> { /* OpenFang 认证协议 */ }
|
||||
async chat(message: string, opts?: ChatOptions): Promise<{runId: string}> { /* chat 格式 */ }
|
||||
onStream(callback: StreamCallback): () => void { /* 流式事件 */ }
|
||||
}
|
||||
```
|
||||
|
||||
### 优先级 2: gatewayStore 适配
|
||||
|
||||
文件: `desktop/src/store/gatewayStore.ts`
|
||||
|
||||
```typescript
|
||||
// 添加后端切换
|
||||
interface GatewayStore {
|
||||
backendType: 'openclaw' | 'openfang';
|
||||
switchBackend(type: 'openclaw' | 'openfang'): void;
|
||||
}
|
||||
```
|
||||
|
||||
### 优先级 3: 测试 OpenFang 集成
|
||||
### 优先级 1: 真实 OpenFang 集成测试
|
||||
|
||||
```bash
|
||||
# 1. 启动 OpenFang
|
||||
@@ -120,6 +149,12 @@ pnpm tauri:dev
|
||||
# - Hands/Workflow 功能
|
||||
```
|
||||
|
||||
### 优先级 2: 插件迁移 (chinese-writing)
|
||||
|
||||
将 `plugins/zclaw-chinese-models` 中的模型配置迁移到 OpenFang TOML 格式。
|
||||
|
||||
参考: `config/chinese-providers.toml`
|
||||
|
||||
---
|
||||
|
||||
## 构建命令
|
||||
@@ -152,9 +187,9 @@ pnpm prepare:openfang-runtime
|
||||
我正在开发 ZClaw Desktop，一个从 OpenClaw 迁移到 OpenFang 的 AI Agent 桌面客户端。
|
||||
|
||||
当前状态:
|
||||
- OpenFang 打包架构已完成
|
||||
- UI 组件已创建 (Hands, Workflow, Security)
|
||||
- 需要继续: OpenFangClient 实现、状态迁移、插件迁移
|
||||
- Phase 1-7 基本完成
|
||||
- 63 个测试全部通过
|
||||
- Mock Server 集成测试可用
|
||||
|
||||
请阅读 docs/new-session-prompt-openfang-migration.md 了解详细上下文，然后继续以下工作:
|
||||
[具体任务]
|
||||
|
||||
532
docs/openclaw-to-openfang-migration-brainstorm.md
Normal file
532
docs/openclaw-to-openfang-migration-brainstorm.md
Normal file
@@ -0,0 +1,532 @@
|
||||
# ZClaw: 从 OpenClaw 切换到 OpenFang 头脑风暴分析
|
||||
|
||||
> **分析日期**：2026-03-13
|
||||
> **目标**：评估 ZClaw 从 OpenClaw 切换到 OpenFang 的可行性、成本和收益
|
||||
|
||||
---
|
||||
|
||||
## 一、核心架构对比
|
||||
|
||||
### 1.1 当前 ZClaw 架构 (基于 OpenClaw)
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ ZClaw Desktop (当前) │
|
||||
├─────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
|
||||
│ │ React 19 │ │ Zustand │ │ TypeScript │ │
|
||||
│ │ UI Layer │───►│ Store │───►│ Gateway │ │
|
||||
│ │ │ │ │ │ Client │ │
|
||||
│ └─────────────┘ └─────────────┘ └──────┬──────┘ │
|
||||
│ │ │
|
||||
│ ▼ │
|
||||
│ ┌─────────────────────────────────────────────────────────┐ │
|
||||
│ │ OpenClaw Gateway (Node.js) │ │
|
||||
│ │ ws://127.0.0.1:18789 │ │
|
||||
│ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │
|
||||
│ │ │Sessions │ │Channels │ │ Config │ │ Cron │ │ │
|
||||
│ │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │ │
|
||||
│ └─────────────────────────────────────────────────────────┘ │
|
||||
│ │ │
|
||||
│ ▼ │
|
||||
│ ┌─────────────────────────────────────────────────────────┐ │
|
||||
│ │ Plugins/Skills (TypeScript) │ │
|
||||
│ │ • zclaw-chinese-models • zclaw-feishu • zclaw-ui │ │
|
||||
│ └─────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
|
||||
技术栈：Tauri 2.0 + React 19 + TypeScript + Node.js Gateway
|
||||
内存占用：>1GB (含 Node.js)
|
||||
启动时间：2-5 秒
|
||||
```
|
||||
|
||||
### 1.2 切换后架构 (基于 OpenFang)
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ ZClaw Desktop (OpenFang) │
|
||||
├─────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
|
||||
│ │ React 19 │ │ Zustand │ │ TypeScript │ │
|
||||
│ │ UI Layer │───►│ Store │───►│ Gateway │ │
|
||||
│ │ │ │ │ │ Client │ │
|
||||
│ └─────────────┘ └─────────────┘ └──────┬──────┘ │
|
||||
│ │ │
|
||||
│ ▼ │
|
||||
│ ┌─────────────────────────────────────────────────────────┐ │
|
||||
│ │ OpenFang Kernel (Rust) │ │
|
||||
│ │ ws://127.0.0.1:???? │ │
|
||||
│ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │
|
||||
│ │ │ Runtime │ │ Hands │ │ 16-Layer│ │ 40 │ │ │
|
||||
│ │ │ Engine │ │ System │ │ Security│ │ Channels│ │ │
|
||||
│ │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │ │
|
||||
│ └─────────────────────────────────────────────────────────┘ │
|
||||
│ │ │
|
||||
│ ▼ │
|
||||
│ ┌─────────────────────────────────────────────────────────┐ │
|
||||
│ │ Skills + Hands (Rust/WASM) │ │
|
||||
│ │ • 60 内置技能 • 7 个 Hands • MCP 模板 • WASM 沙箱 │ │
|
||||
│ └─────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
|
||||
技术栈：Tauri 2.0 + React 19 + TypeScript + Rust Gateway
|
||||
内存占用：~40MB
|
||||
启动时间：180ms
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 二、功能维度分析
|
||||
|
||||
### 2.1 功能增强
|
||||
|
||||
| 功能 | OpenClaw | OpenFang | 影响 |
|
||||
|------|----------|----------|------|
|
||||
| **Hands 自主系统** | ❌ 无 | ✅ 7 个 Hands | 🔥 **重大增强**：可提供自主工作流 |
|
||||
| **Workflow 引擎** | ❌ 基础 Cron | ✅ 完整 Workflow | 🔥 **重大增强**：多步骤编排 |
|
||||
| **通道支持** | 20+ | 40 | ✅ **增强**：覆盖更广 |
|
||||
| **LLM 提供商** | 50+ | 27 | ⚠️ **略减**：但覆盖主流 |
|
||||
| **技能生态** | 13,729+ | 60 内置 + 兼容 | ⚠️ **需要迁移**：生态差异 |
|
||||
| **Trigger 引擎** | ❌ 基础 | ✅ 9 种事件 | 🔥 **重大增强**：事件驱动 |
|
||||
|
||||
### 2.2 Hands 系统对 ZClaw 的价值
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ OpenFang Hands 对 ZClaw 的潜在价值 │
|
||||
├─────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌─────────────────────────────────────────────────────────┐ │
|
||||
│ │ Clip Hand - 视频处理 │ │
|
||||
│ │ • 用户发送 YouTube 链接 → 自动生成竖屏短视频 │ │
|
||||
│ │ • 自动添加字幕和 AI 配音 │ │
|
||||
│ │ • 直接发布到社交媒体 │ │
|
||||
│ └─────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─────────────────────────────────────────────────────────┐ │
|
||||
│ │ Lead Hand - 销售线索 │ │
|
||||
│ │ • 每日自动发现潜在客户 │ │
|
||||
│ │ • 生成评分报告 │ │
|
||||
│ │ • 适合 B2B 用户 │ │
|
||||
│ └─────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─────────────────────────────────────────────────────────┐ │
|
||||
│ │ Researcher Hand - 深度研究 │ │
|
||||
│ │ • 跨源交叉验证 │ │
|
||||
│ │ • CRAAP 可信度评估 │ │
|
||||
│ │ • 适合知识工作者 │ │
|
||||
│ └─────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─────────────────────────────────────────────────────────┐ │
|
||||
│ │ Browser Hand - 网页自动化 │ │
|
||||
│ │ • 自动填表、点击、导航 │ │
|
||||
│ │ • 多步骤工作流 │ │
|
||||
│ │ • 审批门控（安全） │ │
|
||||
│ └─────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
|
||||
💡 用户价值：从"被动响应"到"主动工作"的体验升级
|
||||
```
|
||||
|
||||
### 2.3 功能风险
|
||||
|
||||
| 风险 | 描述 | 缓解措施 |
|
||||
|------|------|----------|
|
||||
| **技能迁移** | 现有 zclaw-* 插件需要重写 | OpenFang 提供迁移工具，支持 SKILL.md 格式 |
|
||||
| **API 差异** | Gateway 协议可能不同 | 需要适配新的 WebSocket 协议 |
|
||||
| **生态不成熟** | OpenFang 社区较小 | 可考虑贡献代码，建立合作关系 |
|
||||
|
||||
---
|
||||
|
||||
## 三、安全性维度分析
|
||||
|
||||
### 3.1 安全架构对比
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ 安全架构对比 │
|
||||
├─────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ OpenClaw (3 层) OpenFang (16 层) │
|
||||
│ ───────────── ──────────────── │
|
||||
│ │
|
||||
│ ┌─────────────────┐ ┌─────────────────────────────┐ │
|
||||
│ │ 1. 应用级权限 │ │ 1. WASM 双重计量沙箱 │ │
|
||||
│ │ 2. DM 配对 │ │ 2. Merkle 哈希链审计 │ │
|
||||
│ │ 3. 沙箱隔离 │ │ 3. 信息流污染追踪 │ │
|
||||
│ └─────────────────┘ │ 4. Ed25519 签名代理清单 │ │
|
||||
│ │ 5. SSRF 防护 │ │
|
||||
│ │ 6. 机密零化 │ │
|
||||
│ │ 7. OFP 互认证 │ │
|
||||
│ │ 8. 能力门控 │ │
|
||||
│ │ 9. 安全头 │ │
|
||||
│ │ 10. 健康端点编辑 │ │
|
||||
│ │ 11. 子进程沙箱 │ │
|
||||
│ │ 12. 提示注入扫描器 │ │
|
||||
│ │ 13. 循环守卫 │ │
|
||||
│ │ 14. 会话修复 │ │
|
||||
│ │ 15. 路径遍历防护 │ │
|
||||
│ │ 16. GCRA 速率限制 │ │
|
||||
│ └─────────────────────────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 3.2 安全性对用户体验的影响
|
||||
|
||||
| 安全特性 | 用户体验影响 | 评分 |
|
||||
|----------|-------------|------|
|
||||
| **WASM 沙箱** | 透明，用户无感知 | ✅ 正面 |
|
||||
| **Merkle 审计链** | 可提供操作历史查看 | ✅ 正面 |
|
||||
| **提示注入扫描** | 可能误报，需要用户确认 | ⚠️ 中性 |
|
||||
| **能力门控 (RBAC)** | 首次使用需授权 | ⚠️ 轻微负面 |
|
||||
| **循环守卫** | 自动断路，保护用户 | ✅ 正面 |
|
||||
| **速率限制** | 高频使用时可能触发 | ⚠️ 轻微负面 |
|
||||
|
||||
### 3.3 安全性营销价值
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ 安全性作为产品卖点 │
|
||||
├─────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ "基于 OpenFang 的 ZClaw 提供： │
|
||||
│ │
|
||||
│ ✅ 16 层纵深防御 - 金融级安全保障 │
|
||||
│ ✅ WASM 沙箱隔离 - 代码执行安全可控 │
|
||||
│ ✅ Merkle 审计链 - 所有操作可追溯 │
|
||||
│ ✅ Ed25519 签名 - 设备身份验证 │
|
||||
│ ✅ 信息流追踪 - 防止数据泄露 │
|
||||
│ │
|
||||
│ 适合：企业用户、金融行业、医疗健康、政府机构 │
|
||||
│ " │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
|
||||
💡 安全性可成为企业版/专业版的差异化卖点
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 四、性能维度分析
|
||||
|
||||
### 4.1 性能指标对比
|
||||
|
||||
| 指标 | OpenClaw | OpenFang | 提升幅度 |
|
||||
|------|----------|----------|----------|
|
||||
| **冷启动时间** | 5.98s | 180ms | **33x 更快** |
|
||||
| **空闲内存** | 394MB | 40MB | **90% 更少** |
|
||||
| **安装大小** | 500MB | 32MB | **94% 更小** |
|
||||
| **响应延迟** | ~100ms | ~10ms | **10x 更快** |
|
||||
|
||||
### 4.2 性能对用户体验的影响
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ 性能提升带来的 UX 改善 │
|
||||
├─────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 启动体验： │
|
||||
│ ───────── │
|
||||
│ OpenClaw: 点击图标 → 等待 6 秒 → 可用 │
|
||||
│ OpenFang: 点击图标 → 等待 0.2 秒 → 可用 ⚡ "秒开"体验 │
|
||||
│ │
|
||||
│ 运行时体验： │
|
||||
│ ────────── │
|
||||
│ OpenClaw: 后台占用 400MB+ 内存，多任务时卡顿 │
|
||||
│ OpenFang: 后台占用 40MB 内存，几乎无感 💪 轻盈 │
|
||||
│ │
|
||||
│ 安装体验： │
|
||||
│ ───────── │
|
||||
│ OpenClaw: 下载 500MB，安装 2-3 分钟 │
|
||||
│ OpenFang: 下载 32MB，安装 10 秒 🚀 快速部署 │
|
||||
│ │
|
||||
│ 低配设备： │
|
||||
│ ───────── │
|
||||
│ OpenClaw: 8GB 以下内存设备体验差 │
|
||||
│ OpenFang: 可在 4GB 内存设备流畅运行 📱 覆盖更广 │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
|
||||
💡 性能提升 = 更好的首次印象 + 更广的设备覆盖 + 更低的用户流失
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 五、开发成本分析
|
||||
|
||||
### 5.1 迁移工作量估算
|
||||
|
||||
| 模块 | 工作内容 | 工作量 | 风险 |
|
||||
|------|----------|--------|------|
|
||||
| **GatewayClient** | 适配 OpenFang WebSocket 协议 | 3-5 天 | 中 |
|
||||
| **插件迁移** | 重写 zclaw-* 插件 | 10-15 天 | 高 |
|
||||
| **技能迁移** | 转换 SKILL.md 格式 | 2-3 天 | 低 |
|
||||
| **UI 适配** | 新增 Hands/Workflow 管理界面 | 5-7 天 | 低 |
|
||||
| **测试** | 全量回归测试 | 5-7 天 | 中 |
|
||||
| **文档更新** | 更新用户/开发文档 | 2-3 天 | 低 |
|
||||
|
||||
**总计**：27-40 天（约 1.5-2 个月）
|
||||
|
||||
### 5.2 技术栈变化
|
||||
|
||||
| 方面 | 变化 | 影响 |
|
||||
|------|------|------|
|
||||
| **后端语言** | TypeScript → Rust | 需要学习 Rust 或依赖社区 |
|
||||
| **插件开发** | TypeScript → Rust/WASM | 插件开发门槛提高 |
|
||||
| **调试工具** | Node.js 调试 → Rust 调试 | 调试方式变化 |
|
||||
| **构建流程** | npm/pnpm → Cargo + npm | CI/CD 需要调整 |
|
||||
|
||||
### 5.3 风险缓解
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ 迁移风险缓解策略 │
|
||||
├─────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 1. 渐进式迁移 │
|
||||
│ ───────────── │
|
||||
│ • 先保持 OpenClaw 版本维护 │
|
||||
│ • 并行开发 OpenFang 版本 │
|
||||
│ • 双版本并行运行一段时间 │
|
||||
│ │
|
||||
│ 2. 兼容层设计 │
|
||||
│ ───────────── │
|
||||
│ • 实现 OpenClaw 协议适配器 │
|
||||
│ • 现有插件无需修改即可运行 │
|
||||
│ • 逐步迁移到原生 OpenFang API │
|
||||
│ │
|
||||
│ 3. 社区合作 │
|
||||
│ ───────────── │
|
||||
│ • 与 OpenFang 团队建立联系 │
|
||||
│ • 贡献代码换取优先支持 │
|
||||
│ • 参与路线图讨论 │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 六、用户使用体验分析
|
||||
|
||||
### 6.1 用户体验变化矩阵
|
||||
|
||||
| 维度 | 变化 | 用户感知 | 重要性 |
|
||||
|------|------|----------|--------|
|
||||
| **启动速度** | 6s → 0.2s | ⭐⭐⭐⭐⭐ 极大提升 | 高 |
|
||||
| **内存占用** | 400MB → 40MB | ⭐⭐⭐⭐ 显著提升 | 中 |
|
||||
| **安装包大小** | 500MB → 32MB | ⭐⭐⭐⭐ 显著提升 | 中 |
|
||||
| **功能丰富度** | 基础 → +Hands | ⭐⭐⭐⭐⭐ 极大提升 | 高 |
|
||||
| **安全感** | 3 层 → 16 层 | ⭐⭐⭐⭐ 提升 | 中 |
|
||||
| **学习曲线** | 相似 | ⭐⭐⭐ 无变化 | - |
|
||||
| **稳定性** | 相似或更好 | ⭐⭐⭐⭐ 可能提升 | 高 |
|
||||
|
||||
### 6.2 新功能带来的用户体验升级
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ OpenFang 带来的 UX 升级 │
|
||||
├─────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 场景 1：内容创作者 │
|
||||
│ ────────────────── │
|
||||
│ Before: 手动下载视频 → 剪辑 → 添加字幕 → 上传 │
|
||||
│ After: 发送 YouTube 链接 → Clip Hand 自动完成全流程 │
|
||||
│ 价值：节省 90% 时间 │
|
||||
│ │
|
||||
│ 场景 2：销售人员 │
|
||||
│ ──────────────── │
|
||||
│ Before: 手动搜索潜在客户 → 整理信息 → 评分 │
|
||||
│ After: Lead Hand 每日自动发现 → 生成报告 → 推送通知 │
|
||||
│ 价值：被动获客，效率倍增 │
|
||||
│ │
|
||||
│ 场景 3：研究人员 │
|
||||
│ ──────────────── │
|
||||
│ Before: 手动搜索 → 多源对比 → 整理引用 │
|
||||
│ After: Researcher Hand 自动研究 → CRAAP 评估 → APA 引用 │
|
||||
│ 价值：研究效率提升 5x │
|
||||
│ │
|
||||
│ 场景 4：日常办公 │
|
||||
│ ──────────────── │
|
||||
│ Before: 手动填表 → 点击按钮 → 重复操作 │
|
||||
│ After: Browser Hand 自动化工作流 → 审批确认 → 完成 │
|
||||
│ 价值：从重复劳动中解放 │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 6.3 潜在负面体验
|
||||
|
||||
| 负面因素 | 描述 | 缓解措施 |
|
||||
|----------|------|----------|
|
||||
| **首次授权繁琐** | RBAC 需要用户确认权限 | 设计友好的授权引导流程 |
|
||||
| **速率限制** | 高频使用可能触发限制 | 可配置的速率限制策略 |
|
||||
| **功能缺失** | 部分技能尚未迁移 | 明确标注"即将推出" |
|
||||
| **学习成本** | Hands/Workflow 新概念 | 提供交互式教程 |
|
||||
|
||||
---
|
||||
|
||||
## 七、商业化影响分析
|
||||
|
||||
### 7.1 产品定位升级
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ 产品定位变化 │
|
||||
├─────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 当前 (OpenClaw)： │
|
||||
│ ───────────────── │
|
||||
│ "基于 OpenClaw 的 AI Agent 桌面客户端" │
|
||||
│ 定位：个人 AI 助手 │
|
||||
│ 差异化：桌面客户端、中文优化 │
|
||||
│ │
|
||||
│ 升级后 (OpenFang)： │
|
||||
│ ────────────────── │
|
||||
│ "基于 OpenFang 的生产级 AI Agent 桌面客户端" │
|
||||
│ 定位：生产力工具 / 企业级助手 │
|
||||
│ 差异化： │
|
||||
│ • 16 层金融级安全 │
|
||||
│ • Hands 自主工作流 │
|
||||
│ • 33x 更快启动 │
|
||||
│ • 90% 更低资源占用 │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 7.2 定价策略影响
|
||||
|
||||
| 版本 | 当前定价建议 | 升级后定价建议 | 理由 |
|
||||
|------|-------------|---------------|------|
|
||||
| **免费版** | 基础功能 | 基础功能 + 1 个 Hand | 吸引用户体验 |
|
||||
| **专业版** | ¥99/月 | ¥149/月 | Hands 带来价值提升 |
|
||||
| **企业版** | ¥299/月 | ¥499/月 | 安全合规价值 |
|
||||
| **定制版** | 按需 | 按需 + Hands 定制 | 新增服务收入 |
|
||||
|
||||
### 7.3 目标客户变化
|
||||
|
||||
| 客户群 | 当前匹配度 | 升级后匹配度 | 变化原因 |
|
||||
|--------|-----------|-------------|----------|
|
||||
| **个人用户** | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | 功能更强但可能过于复杂 |
|
||||
| **内容创作者** | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | Clip Hand 完美匹配 |
|
||||
| **销售人员** | ⭐⭐ | ⭐⭐⭐⭐⭐ | Lead Hand 完美匹配 |
|
||||
| **研究人员** | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | Researcher Hand 完美匹配 |
|
||||
| **企业用户** | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | 16 层安全 + 审计 |
|
||||
| **金融/医疗** | ⭐⭐ | ⭐⭐⭐⭐⭐ | 合规 + 安全 |
|
||||
|
||||
---
|
||||
|
||||
## 八、决策建议
|
||||
|
||||
### 8.1 SWOT 分析
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ SWOT 分析 │
|
||||
├──────────────────────┬──────────────────────────────────────────┤
|
||||
│ 优势 (S) │ 劣势 (W) │
|
||||
├──────────────────────┼──────────────────────────────────────────┤
|
||||
│ • 33x 启动速度提升 │ • 迁移成本 1.5-2 个月 │
|
||||
│ • 90% 内存减少 │ • 插件需要重写 │
|
||||
│ • 16 层安全防护 │ • 社区生态较小 │
|
||||
│ • Hands 自主系统 │ • Rust 开发门槛 │
|
||||
│ • Workflow 引擎 │ • API 需要适配 │
|
||||
│ • 40 通道支持 │ │
|
||||
├──────────────────────┼──────────────────────────────────────────┤
|
||||
│ 机会 (O) │ 威胁 (T) │
|
||||
├──────────────────────┼──────────────────────────────────────────┤
|
||||
│ • 企业市场拓展 │ • OpenFang 项目不够成熟 │
|
||||
│ • 金融/医疗行业 │ • 社区支持可能不足 │
|
||||
│ • 内容创作者市场 │ • 技术路线变化风险 │
|
||||
│ • 差异化竞争 │ • 用户学习成本 │
|
||||
│ • 定价提升空间 │ │
|
||||
└──────────────────────┴──────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 8.2 推荐策略
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ 推荐策略：渐进式双轨 │
|
||||
├─────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 阶段 1：调研验证 (1-2 周) │
|
||||
│ ──────────────────────── │
|
||||
│ • 深入研究 OpenFang API 文档 │
|
||||
│ • 评估 GatewayClient 适配工作量 │
|
||||
│ • 与 OpenFang 团队建立联系 │
|
||||
│ • 评估插件迁移可行性 │
|
||||
│ │
|
||||
│ 阶段 2：原型验证 (2-3 周) │
|
||||
│ ──────────────────────── │
|
||||
│ • 实现基础 GatewayClient 适配 │
|
||||
│ • 验证核心功能可用性 │
|
||||
│ • 评估性能提升实际效果 │
|
||||
│ • 收集团队反馈 │
|
||||
│ │
|
||||
│ 阶段 3：并行开发 (1-2 月) │
|
||||
│ ──────────────────────── │
|
||||
│ • 保持 OpenClaw 版本维护 │
|
||||
│ • 并行开发 OpenFang 版本 │
|
||||
│ • 实现插件兼容层 │
|
||||
│ • 内部测试和优化 │
|
||||
│ │
|
||||
│ 阶段 4：灰度发布 (2-4 周) │
|
||||
│ ──────────────────────── │
|
||||
│ • 选择部分用户进行 Beta 测试 │
|
||||
│ • 收集反馈并优化 │
|
||||
│ • 完善文档和教程 │
|
||||
│ │
|
||||
│ 阶段 5：正式切换 │
|
||||
│ ──────────────── │
|
||||
│ • 发布 OpenFang 版本为默认 │
|
||||
│ • OpenClaw 版本进入维护模式 │
|
||||
│ • 持续优化和迭代 │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 8.3 最终建议
|
||||
|
||||
| 条件 | 建议 |
|
||||
|------|------|
|
||||
| **如果追求快速迭代** | 保持 OpenClaw，关注 OpenFang 发展 |
|
||||
| **如果追求企业市场** | **强烈建议切换** OpenFang |
|
||||
| **如果追求差异化竞争** | **建议切换** OpenFang |
|
||||
| **如果资源有限** | 保持 OpenClaw，渐进评估 |
|
||||
| **如果目标是内容创作者/销售** | **强烈建议切换** OpenFang |
|
||||
|
||||
---
|
||||
|
||||
## 九、结论
|
||||
|
||||
### 切换到 OpenFang 的核心价值
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ │
|
||||
│ 🚀 性能：33x 启动速度 + 90% 内存节省 │
|
||||
│ │
|
||||
│ 🔒 安全：16 层纵深防御 + 金融级合规 │
|
||||
│ │
|
||||
│ 🤖 智能：Hands 自主系统 + Workflow 引擎 │
|
||||
│ │
|
||||
│ 📈 商业：企业市场 + 定价提升空间 │
|
||||
│ │
|
||||
│ ⚠️ 成本：1.5-2 个月迁移 + 插件重写 │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
|
||||
💡 总结：如果 ZClaw 的目标是成为"生产级 AI Agent 客户端"，
|
||||
切换到 OpenFang 是值得投入的战略选择。
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
*分析日期：2026-03-13*
|
||||
*分析版本：v1.0*
|
||||
968
docs/openfang-technical-reference.md
Normal file
968
docs/openfang-technical-reference.md
Normal file
@@ -0,0 +1,968 @@
|
||||
# OpenFang 技术参考文档
|
||||
|
||||
> **文档版本**：v1.0
|
||||
> **更新日期**：2026-03-13
|
||||
> **目标**：为 ZClaw 基于 OpenFang 定制开发提供技术参考
|
||||
|
||||
---
|
||||
|
||||
## 一、项目概述
|
||||
|
||||
### 1.1 基本信息
|
||||
|
||||
| 属性 | 值 |
|
||||
|------|-----|
|
||||
| **项目名称** | OpenFang |
|
||||
| **GitHub** | https://github.com/RightNow-AI/openfang |
|
||||
| **技术栈** | Rust (137,728 行代码) |
|
||||
| **架构** | 14 个 Crates 模块化设计 |
|
||||
| **定位** | Agent Operating System |
|
||||
| **许可** | MIT / Apache 2.0 |
|
||||
|
||||
### 1.2 核心特性
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ OpenFang 核心特性 │
|
||||
├─────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 🚀 性能优势 │
|
||||
│ ├── 冷启动：180ms (OpenClaw: 5.98s, 33x 提升) │
|
||||
│ ├── 内存占用：40MB (OpenClaw: 394MB, 90% 减少) │
|
||||
│ └── 安装大小：32MB (OpenClaw: 500MB, 94% 减少) │
|
||||
│ │
|
||||
│ 🔒 安全架构 (16 层纵深防御) │
|
||||
│ ├── WASM 双重计量沙箱 │
|
||||
│ ├── Merkle 哈希链审计 │
|
||||
│ ├── Ed25519 签名代理清单 │
|
||||
│ ├── 信息流污染追踪 │
|
||||
│ ├── SSRF 防护 + 机密零化 │
|
||||
│ └── ... 共 16 层安全机制 │
|
||||
│ │
|
||||
│ 🤖 Hands 自主系统 │
|
||||
│ ├── 7 个自主能力包 (Clip, Lead, Collector, Predictor, etc.) │
|
||||
│ └── 可扩展的自主任务框架 │
|
||||
│ │
|
||||
│ 📡 通道支持 │
|
||||
│ └── 40+ 集成通道 (微信、飞书、Telegram、Discord, etc.) │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 二、项目结构
|
||||
|
||||
### 2.1 Crate 架构
|
||||
|
||||
OpenFang 采用模块化的 Rust Crate 架构：
|
||||
|
||||
```
|
||||
openfang/
|
||||
├── crates/
|
||||
│ ├── openfang-kernel/ # 核心 Kernel - Agent 生命周期管理
|
||||
│ │ ├── src/
|
||||
│ │ │ ├── kernel.rs # 主内核实现
|
||||
│ │ │ ├── approval.rs # 审批系统
|
||||
│ │ │ ├── auth.rs # 认证模块
|
||||
│ │ │ ├── capabilities.rs # 能力系统
|
||||
│ │ │ ├── config.rs # 配置管理
|
||||
│ │ │ ├── scheduler.rs # 任务调度
|
||||
│ │ │ ├── supervisor.rs # 进程监控
|
||||
│ │ │ ├── triggers.rs # 触发器引擎
|
||||
│ │ │ └── workflow.rs # 工作流引擎
|
||||
│ │ └── Cargo.toml
|
||||
│ │
|
||||
│ ├── openfang-runtime/ # Agent Runtime
|
||||
│ │ ├── agent.rs # Agent 抽象
|
||||
│ │ ├── session.rs # 会话管理
|
||||
│ │ └── context.rs # 上下文处理
|
||||
│ │
|
||||
│ ├── openfang-hands/ # Hands 自主系统
|
||||
│ │ ├── clip/ # 视频处理 Hand
|
||||
│ │ ├── lead/ # 销售线索 Hand
|
||||
│ │ ├── collector/ # 数据收集 Hand
|
||||
│ │ ├── predictor/ # 预测分析 Hand
|
||||
│ │ ├── researcher/ # 深度研究 Hand
|
||||
│ │ ├── twitter/ # Twitter Hand
|
||||
│ │ └── browser/ # 浏览器自动化 Hand
|
||||
│ │
|
||||
│ ├── openfang-skills/ # 技能系统
|
||||
│ │ ├── skill_loader.rs # 技能加载器
|
||||
│ │ ├── skill_executor.rs # 技能执行器
|
||||
│ │ └── builtin/ # 内置技能 (60+)
|
||||
│ │
|
||||
│ ├── openfang-channels/ # 通道适配器
|
||||
│ │ ├── wechat/ # 微信
|
||||
│ │ ├── feishu/ # 飞书
|
||||
│ │ ├── telegram/ # Telegram
|
||||
│ │ ├── discord/ # Discord
|
||||
│ │ └── ... # 40+ 通道
|
||||
│ │
|
||||
│ ├── openfang-llm/ # LLM 提供商集成
|
||||
│ │ ├── providers/ # 27 个提供商
|
||||
│ │ └── openai_compat.rs # OpenAI 兼容层
|
||||
│ │
|
||||
│ ├── openfang-security/ # 安全层
|
||||
│ │ ├── sandbox/ # WASM 沙箱
|
||||
│ │ ├── audit/ # 审计链
|
||||
│ │ └── taint/ # 污染追踪
|
||||
│ │
|
||||
│ ├── openfang-api/ # API 层
|
||||
│ │ ├── rest/ # REST 端点
|
||||
│ │ ├── websocket/ # WebSocket 处理
|
||||
│ │ └── sse/ # Server-Sent Events
|
||||
│ │
|
||||
│ ├── openfang-cli/ # 命令行工具
|
||||
│ ├── openfang-config/ # 配置解析
|
||||
│ ├── openfang-migrate/ # OpenClaw 迁移工具
|
||||
│ └── openfang-utils/ # 通用工具
|
||||
│
|
||||
├── skills/ # 技能定义文件
|
||||
│ └── *.md # SKILL.md 格式
|
||||
│
|
||||
├── hands/ # Hand 定义文件
|
||||
│ └── *.toml # HAND.toml 格式
|
||||
│
|
||||
├── Cargo.toml # Workspace 配置
|
||||
└── README.md
|
||||
```
|
||||
|
||||
### 2.2 Kernel 核心模块
|
||||
|
||||
```rust
|
||||
// crates/openfang-kernel/src/lib.rs
|
||||
|
||||
//! Core kernel for the OpenFang Agent Operating System.
|
||||
//!
|
||||
//! The kernel manages agent lifecycles, memory, permissions, scheduling,
|
||||
//! and inter-agent communication.
|
||||
|
||||
pub mod approval; // 审批门控系统
|
||||
pub mod auth; // 认证与授权
|
||||
pub mod auto_reply; // 自动回复
|
||||
pub mod background; // 后台任务
|
||||
pub mod capabilities; // 能力系统 (RBAC)
|
||||
pub mod config; // 配置管理
|
||||
pub mod config_reload; // 热重载配置
|
||||
pub mod cron; // 定时任务
|
||||
pub mod error; // 错误处理
|
||||
pub mod event_bus; // 事件总线
|
||||
pub mod heartbeat; // 心跳检测
|
||||
pub mod kernel; // 核心实现
|
||||
pub mod metering; // 计量系统
|
||||
pub mod pairing; // 设备配对
|
||||
pub mod registry; // 服务注册
|
||||
pub mod scheduler; // 任务调度
|
||||
pub mod supervisor; // 进程监控
|
||||
pub mod triggers; // 触发器引擎
|
||||
pub mod whatsapp_gateway; // WhatsApp 网关
|
||||
pub mod wizard; // 设置向导
|
||||
pub mod workflow; // 工作流引擎
|
||||
|
||||
pub use kernel::DeliveryTracker;
|
||||
pub use kernel::OpenFangKernel;
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 三、API 协议
|
||||
|
||||
### 3.1 端点概览
|
||||
|
||||
| 协议 | 地址 | 用途 |
|
||||
|------|------|------|
|
||||
| **WebSocket** | `ws://127.0.0.1:4200/ws` | 实时聊天、事件流 |
|
||||
| **REST API** | `http://127.0.0.1:4200` | 资源管理、配置 |
|
||||
| **SSE** | `http://127.0.0.1:4200/events` | 服务器推送事件 |
|
||||
| **OpenAI 兼容** | `http://127.0.0.1:4200/v1` | OpenAI API 兼容层 |
|
||||
|
||||
### 3.2 WebSocket 协议
|
||||
|
||||
#### 连接
|
||||
|
||||
```javascript
|
||||
const ws = new WebSocket('ws://127.0.0.1:4200/ws');
|
||||
|
||||
// 认证
|
||||
ws.send(JSON.stringify({
|
||||
type: 'auth',
|
||||
device_id: 'your-device-id',
|
||||
signature: 'ed25519-signature'
|
||||
}));
|
||||
```
|
||||
|
||||
#### 消息格式
|
||||
|
||||
```typescript
|
||||
// 发送聊天消息
|
||||
interface ChatRequest {
|
||||
type: 'chat';
|
||||
session_id: string;
|
||||
message: {
|
||||
role: 'user';
|
||||
content: string;
|
||||
};
|
||||
options?: {
|
||||
model?: string;
|
||||
temperature?: number;
|
||||
max_tokens?: number;
|
||||
};
|
||||
}
|
||||
|
||||
// 接收流式响应
|
||||
interface StreamEvent {
|
||||
type: 'stream';
|
||||
session_id: string;
|
||||
delta: {
|
||||
content?: string;
|
||||
tool_call?: ToolCall;
|
||||
};
|
||||
done: boolean;
|
||||
}
|
||||
|
||||
// Agent 事件
|
||||
interface AgentEvent {
|
||||
type: 'agent_event';
|
||||
event_type: 'thinking' | 'tool_use' | 'tool_result' | 'hand_trigger';
|
||||
data: any;
|
||||
}
|
||||
```
|
||||
|
||||
#### 事件类型
|
||||
|
||||
```typescript
|
||||
// 触发器事件
|
||||
interface TriggerEvent {
|
||||
type: 'trigger';
|
||||
trigger_type: 'webhook' | 'schedule' | 'email' | 'message';
|
||||
payload: any;
|
||||
}
|
||||
|
||||
// 工作流事件
|
||||
interface WorkflowEvent {
|
||||
type: 'workflow';
|
||||
workflow_id: string;
|
||||
step: string;
|
||||
status: 'started' | 'completed' | 'failed';
|
||||
result?: any;
|
||||
}
|
||||
|
||||
// Hand 事件
|
||||
interface HandEvent {
|
||||
type: 'hand';
|
||||
hand_name: string;
|
||||
action: string;
|
||||
status: 'running' | 'completed' | 'needs_approval';
|
||||
result?: any;
|
||||
}
|
||||
```
|
||||
|
||||
### 3.3 REST API 端点
|
||||
|
||||
#### 核心 API (76 个端点)
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ REST API 端点分类 │
|
||||
├─────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ Agent 管理 │
|
||||
│ ├── GET /api/agents # 列出所有 Agent │
|
||||
│ ├── POST /api/agents # 创建 Agent │
|
||||
│ ├── GET /api/agents/:id # 获取 Agent 详情 │
|
||||
│ ├── PUT /api/agents/:id # 更新 Agent │
|
||||
│ ├── DELETE /api/agents/:id # 删除 Agent │
|
||||
│ └── POST /api/agents/:id/start # 启动 Agent │
|
||||
│ │
|
||||
│ Session 管理 │
|
||||
│ ├── GET /api/sessions # 列出会话 │
|
||||
│ ├── POST /api/sessions # 创建会话 │
|
||||
│ ├── GET /api/sessions/:id # 获取会话 │
|
||||
│ ├── DELETE /api/sessions/:id # 删除会话 │
|
||||
│ └── GET /api/sessions/:id/messages # 获取消息历史 │
|
||||
│ │
|
||||
│ Skills 管理 │
|
||||
│ ├── GET /api/skills # 列出技能 │
|
||||
│ ├── POST /api/skills # 创建技能 │
|
||||
│ ├── GET /api/skills/:id # 获取技能详情 │
|
||||
│ ├── PUT /api/skills/:id # 更新技能 │
|
||||
│ └── DELETE /api/skills/:id # 删除技能 │
|
||||
│ │
|
||||
│ Hands 管理 │
|
||||
│ ├── GET /api/hands # 列出 Hands │
|
||||
│ ├── GET /api/hands/:name # 获取 Hand 详情 │
|
||||
│ ├── POST /api/hands/:name/trigger # 触发 Hand │
|
||||
│ └── GET /api/hands/:name/status # 获取 Hand 状态 │
|
||||
│ │
|
||||
│ Channels 管理 │
|
||||
│ ├── GET /api/channels # 列出通道 │
|
||||
│ ├── POST /api/channels # 添加通道 │
|
||||
│ ├── GET /api/channels/:id # 获取通道配置 │
|
||||
│ ├── PUT /api/channels/:id # 更新通道 │
|
||||
│ └── DELETE /api/channels/:id # 删除通道 │
|
||||
│ │
|
||||
│ Workflow 管理 │
|
||||
│ ├── GET /api/workflows # 列出工作流 │
|
||||
│ ├── POST /api/workflows # 创建工作流 │
|
||||
│ ├── GET /api/workflows/:id # 获取工作流详情 │
|
||||
│ ├── POST /api/workflows/:id/execute # 执行工作流 │
|
||||
│ └── GET /api/workflows/:id/runs # 获取执行历史 │
|
||||
│ │
|
||||
│ Trigger 管理 │
|
||||
│ ├── GET /api/triggers # 列出触发器 │
|
||||
│ ├── POST /api/triggers # 创建触发器 │
|
||||
│ ├── GET /api/triggers/:id # 获取触发器详情 │
|
||||
│ └── DELETE /api/triggers/:id # 删除触发器 │
|
||||
│ │
|
||||
│ 配置管理 │
|
||||
│ ├── GET /api/config # 获取配置 │
|
||||
│ ├── PUT /api/config # 更新配置 │
|
||||
│ └── POST /api/config/reload # 热重载配置 │
|
||||
│ │
|
||||
│ 安全与审计 │
|
||||
│ ├── GET /api/audit/logs # 审计日志 │
|
||||
│ ├── GET /api/security/status # 安全状态 │
|
||||
│ └── GET /api/capabilities # 能力列表 │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 3.4 OpenAI 兼容 API
|
||||
|
||||
```bash
|
||||
# 聊天补全
|
||||
curl -X POST http://127.0.0.1:4200/v1/chat/completions \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"model": "gpt-4",
|
||||
"messages": [
|
||||
{"role": "user", "content": "Hello!"}
|
||||
],
|
||||
"stream": true
|
||||
}'
|
||||
|
||||
# 模型列表
|
||||
curl http://127.0.0.1:4200/v1/models
|
||||
|
||||
# Embeddings
|
||||
curl -X POST http://127.0.0.1:4200/v1/embeddings \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"model": "text-embedding-ada-002",
|
||||
"input": "Hello world"
|
||||
}'
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 四、配置系统
|
||||
|
||||
### 4.1 配置文件位置
|
||||
|
||||
```
|
||||
~/.openfang/
|
||||
├── config.toml # 主配置文件
|
||||
├── secrets.toml # 敏感配置 (权限 600)
|
||||
├── skills/ # 自定义技能
|
||||
│ └── *.md
|
||||
├── hands/ # 自定义 Hands
|
||||
│ └── *.toml
|
||||
├── data/ # 数据目录
|
||||
│ ├── sessions/ # 会话数据
|
||||
│ ├── audit/ # 审计日志
|
||||
│ └── cache/ # 缓存
|
||||
└── logs/ # 日志目录
|
||||
```
|
||||
|
||||
### 4.2 配置文件格式
|
||||
|
||||
```toml
|
||||
# ~/.openfang/config.toml
|
||||
|
||||
[server]
|
||||
host = "127.0.0.1"
|
||||
port = 4200
|
||||
websocket_port = 4200
|
||||
|
||||
[agent]
|
||||
default_model = "gpt-4"
|
||||
max_tokens = 4096
|
||||
temperature = 0.7
|
||||
timeout = 300
|
||||
|
||||
[security]
|
||||
# 16 层安全配置
|
||||
sandbox_enabled = true
|
||||
audit_enabled = true
|
||||
taint_tracking = true
|
||||
max_execution_time = 60
|
||||
rate_limit_rpm = 60
|
||||
|
||||
[llm]
|
||||
# LLM 提供商配置
|
||||
[[llm.providers]]
|
||||
name = "openai"
|
||||
api_key = "${OPENAI_API_KEY}"
|
||||
models = ["gpt-4", "gpt-3.5-turbo"]
|
||||
|
||||
[[llm.providers]]
|
||||
name = "anthropic"
|
||||
api_key = "${ANTHROPIC_API_KEY}"
|
||||
models = ["claude-3-opus", "claude-3-sonnet"]
|
||||
|
||||
[[llm.providers]]
|
||||
name = "deepseek"
|
||||
api_key = "${DEEPSEEK_API_KEY}"
|
||||
base_url = "https://api.deepseek.com/v1"
|
||||
models = ["deepseek-chat", "deepseek-coder"]
|
||||
|
||||
[channels]
|
||||
# 通道配置
|
||||
wechat_enabled = false
|
||||
feishu_enabled = true
|
||||
|
||||
[channels.feishu]
|
||||
app_id = "${FEISHU_APP_ID}"
|
||||
app_secret = "${FEISHU_APP_SECRET}"
|
||||
|
||||
[hands]
|
||||
# Hands 配置
|
||||
clip_enabled = true
|
||||
lead_enabled = true
|
||||
researcher_enabled = true
|
||||
|
||||
[workflow]
|
||||
# 工作流配置
|
||||
max_concurrent = 5
|
||||
default_timeout = 300
|
||||
|
||||
[triggers]
|
||||
# 触发器配置
|
||||
webhook_secret = "${WEBHOOK_SECRET}"
|
||||
```
|
||||
|
||||
### 4.3 环境变量
|
||||
|
||||
```bash
|
||||
# LLM API Keys
|
||||
export OPENAI_API_KEY="sk-..."
|
||||
export ANTHROPIC_API_KEY="sk-ant-..."
|
||||
export DEEPSEEK_API_KEY="sk-..."
|
||||
|
||||
# 通道凭证
|
||||
export FEISHU_APP_ID="cli_..."
|
||||
export FEISHU_APP_SECRET="..."
|
||||
export WECHAT_CORP_ID="..."
|
||||
|
||||
# 安全配置
|
||||
export WEBHOOK_SECRET="your-secret"
|
||||
export JWT_SECRET="your-jwt-secret"
|
||||
|
||||
# 可选配置
|
||||
export OPENFANG_LOG_LEVEL="info"
|
||||
export OPENFANG_DATA_DIR="~/.openfang/data"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 五、扩展机制
|
||||
|
||||
### 5.1 技能系统 (SKILL.md)
|
||||
|
||||
```markdown
|
||||
# skill-name
|
||||
|
||||
## 描述
|
||||
技能的简短描述
|
||||
|
||||
## 触发词
|
||||
- trigger1
|
||||
- trigger2
|
||||
|
||||
## 示例
|
||||
用户: 帮我执行 skill-name
|
||||
助手: [执行技能]
|
||||
|
||||
## 参数
|
||||
| 参数 | 类型 | 必需 | 描述 |
|
||||
|------|------|------|------|
|
||||
| param1 | string | 是 | 参数描述 |
|
||||
|
||||
## 实现
|
||||
```skill
|
||||
action: http_request
|
||||
method: POST
|
||||
url: https://api.example.com/endpoint
|
||||
```
|
||||
|
||||
## 权限
|
||||
- network:outbound
|
||||
- file:read
|
||||
```
|
||||
|
||||
### 5.2 Hand 系统 (HAND.toml)
|
||||
|
||||
```toml
|
||||
# hands/custom-hand/HAND.toml
|
||||
|
||||
name = "custom-hand"
|
||||
version = "1.0.0"
|
||||
description = "自定义 Hand 描述"
|
||||
|
||||
# 触发条件
|
||||
[trigger]
|
||||
type = "schedule" # schedule | webhook | event
|
||||
cron = "0 9 * * *" # 每天 9:00
|
||||
|
||||
# 能力需求
|
||||
[capabilities]
|
||||
network = true
|
||||
filesystem = ["read", "write"]
|
||||
browser = true
|
||||
|
||||
# 执行配置
|
||||
[execution]
|
||||
timeout = 300
|
||||
max_retries = 3
|
||||
approval_required = true
|
||||
|
||||
# 输出配置
|
||||
[output]
|
||||
channels = ["wechat", "email"]
|
||||
format = "markdown"
|
||||
```
|
||||
|
||||
### 5.3 自定义 Channel 适配器
|
||||
|
||||
```rust
|
||||
// src/custom_channel.rs
|
||||
|
||||
use openfang_channels::{Channel, ChannelConfig, Message};
|
||||
|
||||
pub struct CustomChannel {
|
||||
config: ChannelConfig,
|
||||
}
|
||||
|
||||
impl Channel for CustomChannel {
|
||||
async fn connect(&mut self) -> Result<(), ChannelError> {
|
||||
// 连接逻辑
|
||||
}
|
||||
|
||||
async fn send(&self, message: Message) -> Result<(), ChannelError> {
|
||||
// 发送消息
|
||||
}
|
||||
|
||||
async fn receive(&mut self) -> Result<Message, ChannelError> {
|
||||
// 接收消息
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 5.4 自定义 LLM 提供商
|
||||
|
||||
```rust
|
||||
// src/custom_provider.rs
|
||||
|
||||
use openfang_llm::{LLMProvider, CompletionRequest, CompletionResponse};
|
||||
|
||||
pub struct CustomProvider {
|
||||
api_key: String,
|
||||
base_url: String,
|
||||
}
|
||||
|
||||
impl LLMProvider for CustomProvider {
|
||||
async fn complete(
|
||||
&self,
|
||||
request: CompletionRequest,
|
||||
) -> Result<CompletionResponse, LLMError> {
|
||||
// 实现补全逻辑
|
||||
}
|
||||
|
||||
async fn stream(
|
||||
&self,
|
||||
request: CompletionRequest,
|
||||
) -> Result<impl Stream<Item = StreamChunk>, LLMError> {
|
||||
// 实现流式响应
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 六、Hands 系统详解
|
||||
|
||||
### 6.1 内置 Hands
|
||||
|
||||
| Hand | 功能 | 触发方式 | 适用场景 |
|
||||
|------|------|----------|----------|
|
||||
| **Clip** | 视频处理、竖屏生成 | 手动/自动 | 内容创作者 |
|
||||
| **Lead** | 销售线索发现 | 定时 | B2B 销售 |
|
||||
| **Collector** | 数据收集聚合 | 定时/事件 | 研究人员 |
|
||||
| **Predictor** | 预测分析 | 手动 | 数据分析 |
|
||||
| **Researcher** | 深度研究、交叉验证 | 手动 | 知识工作者 |
|
||||
| **Twitter** | Twitter 自动化 | 定时/事件 | 社媒运营 |
|
||||
| **Browser** | 浏览器自动化 | 手动/工作流 | 日常办公 |
|
||||
|
||||
### 6.2 Hand 工作流程
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ Hand 执行流程 │
|
||||
├─────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 触发条件 │
|
||||
│ ──────── │
|
||||
│ │ 定时 (Cron) │
|
||||
│ │ Webhook │
|
||||
│ │ 事件 (Event) │
|
||||
│ │ 手动触发 │
|
||||
│ │ │
|
||||
│ ▼ │
|
||||
│ ┌─────────────┐ │
|
||||
│ │ 能力检查 │ ← RBAC 门控 │
|
||||
│ └──────┬──────┘ │
|
||||
│ │ │
|
||||
│ ▼ │
|
||||
│ ┌─────────────┐ │
|
||||
│ │ 审批门控 │ ← 如果 approval_required = true │
|
||||
│ └──────┬──────┘ │
|
||||
│ │ │
|
||||
│ ▼ │
|
||||
│ ┌─────────────┐ │
|
||||
│ │ 执行 Hand │ ← WASM 沙箱隔离 │
|
||||
│ └──────┬──────┘ │
|
||||
│ │ │
|
||||
│ ▼ │
|
||||
│ ┌─────────────┐ │
|
||||
│ │ 结果输出 │ → 通道推送 / 存储 │
|
||||
│ └─────────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 七、安全架构
|
||||
|
||||
### 7.1 16 层纵深防御
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ OpenFang 16 层安全架构 │
|
||||
├─────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ Layer 1: WASM 双重计量沙箱 │
|
||||
│ ├── 指令计数限制 │
|
||||
│ └── 内存使用限制 │
|
||||
│ │
|
||||
│ Layer 2: Merkle 哈希链审计 │
|
||||
│ ├── 所有操作可追溯 │
|
||||
│ └── 防篡改日志 │
|
||||
│ │
|
||||
│ Layer 3: 信息流污染追踪 │
|
||||
│ ├── 标记不可信数据 │
|
||||
│ └── 阻止污染数据进入敏感操作 │
|
||||
│ │
|
||||
│ Layer 4: Ed25519 签名代理清单 │
|
||||
│ ├── 设备身份验证 │
|
||||
│ └── 请求签名验证 │
|
||||
│ │
|
||||
│ Layer 5: SSRF 防护 │
|
||||
│ ├── 白名单域名 │
|
||||
│ └── 内网地址阻止 │
|
||||
│ │
|
||||
│ Layer 6: 机密零化 │
|
||||
│ ├── API Key 内存加密 │
|
||||
│ └── 使用后立即清零 │
|
||||
│ │
|
||||
│ Layer 7: OFP 互认证 │
|
||||
│ ├── 双向 TLS │
|
||||
│ └── 证书固定 │
|
||||
│ │
|
||||
│ Layer 8: 能力门控 (RBAC) │
|
||||
│ ├── 最小权限原则 │
|
||||
│ └── 细粒度权限控制 │
|
||||
│ │
|
||||
│ Layer 9: 安全头 │
|
||||
│ ├── Content-Security-Policy │
|
||||
│ └── X-Frame-Options │
|
||||
│ │
|
||||
│ Layer 10: 健康端点编辑 │
|
||||
│ ├── 输入验证 │
|
||||
│ └── 输出编码 │
|
||||
│ │
|
||||
│ Layer 11: 子进程沙箱 │
|
||||
│ ├── seccomp 过滤 │
|
||||
│ └── namespace 隔离 │
|
||||
│ │
|
||||
│ Layer 12: 提示注入扫描器 │
|
||||
│ ├── 检测恶意提示 │
|
||||
│ └── 阻止注入攻击 │
|
||||
│ │
|
||||
│ Layer 13: 循环守卫 │
|
||||
│ ├── 递归深度限制 │
|
||||
│ └── 自动断路 │
|
||||
│ │
|
||||
│ Layer 14: 会话修复 │
|
||||
│ ├── 异常检测 │
|
||||
│ └── 自动恢复 │
|
||||
│ │
|
||||
│ Layer 15: 路径遍历防护 │
|
||||
│ ├── 路径规范化 │
|
||||
│ └── 访问控制 │
|
||||
│ │
|
||||
│ Layer 16: GCRA 速率限制 │
|
||||
│ ├── 请求速率控制 │
|
||||
│ └── 突发流量平滑 │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 7.2 WASM 沙箱
|
||||
|
||||
```rust
|
||||
// 沙箱配置示例
|
||||
SandboxConfig {
|
||||
max_instructions: 10_000_000,
|
||||
max_memory: 64 * 1024 * 1024, // 64MB
|
||||
timeout: Duration::from_secs(60),
|
||||
allowed_syscalls: vec![
|
||||
"read", "write", "close",
|
||||
// 仅允许安全的系统调用
|
||||
],
|
||||
network_access: false,
|
||||
filesystem_access: SandboxFS::ReadOnly("/data"),
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 八、OpenClaw 迁移
|
||||
|
||||
### 8.1 迁移工具
|
||||
|
||||
```bash
|
||||
# 从 OpenClaw 迁移
|
||||
openfang migrate --from openclaw
|
||||
|
||||
# 指定源目录
|
||||
openfang migrate --from openclaw --source ~/.openclaw
|
||||
|
||||
# 干运行（预览）
|
||||
openfang migrate --from openclaw --dry-run
|
||||
```
|
||||
|
||||
### 8.2 迁移映射
|
||||
|
||||
| OpenClaw | OpenFang | 说明 |
|
||||
|----------|----------|------|
|
||||
| `~/.openclaw/` | `~/.openfang/` | 配置目录 |
|
||||
| `config.yaml` | `config.toml` | 配置格式 |
|
||||
| `plugins/*/index.ts` | `skills/*.md` | 技能格式 |
|
||||
| `channels/*/` | `channels/*/` | 通道兼容 |
|
||||
| `agent/*/` | `agents/*/` | Agent 配置 |
|
||||
|
||||
### 8.3 技能迁移
|
||||
|
||||
```bash
|
||||
# OpenClaw 插件格式 (TypeScript)
|
||||
plugins/
|
||||
└── my-plugin/
|
||||
├── openclaw.plugin.json
|
||||
└── index.ts
|
||||
|
||||
# OpenFang 技能格式 (Markdown)
|
||||
skills/
|
||||
└── my-skill.md
|
||||
```
|
||||
|
||||
**迁移示例**:
|
||||
|
||||
```typescript
|
||||
// OpenClaw 插件 (index.ts)
|
||||
export default {
|
||||
name: 'my-plugin',
|
||||
triggers: ['触发词'],
|
||||
async handler(ctx) {
|
||||
return '结果';
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```markdown
|
||||
# OpenFang 技能 (my-skill.md)
|
||||
|
||||
## 触发词
|
||||
- 触发词
|
||||
|
||||
## 实现
|
||||
```skill
|
||||
action: javascript
|
||||
code: |
|
||||
return '结果';
|
||||
```
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 九、ZClaw 集成指南
|
||||
|
||||
### 9.1 GatewayClient 适配
|
||||
|
||||
```typescript
|
||||
// desktop/src/lib/openfang-client.ts
|
||||
|
||||
export class OpenFangClient {
|
||||
private ws: WebSocket | null = null;
|
||||
private url = 'ws://127.0.0.1:4200/ws';
|
||||
|
||||
async connect(deviceId: string, signature: string): Promise<void> {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.ws = new WebSocket(this.url);
|
||||
|
||||
this.ws.onopen = () => {
|
||||
// 认证
|
||||
this.ws!.send(JSON.stringify({
|
||||
type: 'auth',
|
||||
device_id: deviceId,
|
||||
signature
|
||||
}));
|
||||
resolve();
|
||||
};
|
||||
|
||||
this.ws.onerror = reject;
|
||||
});
|
||||
}
|
||||
|
||||
async chat(sessionId: string, message: string): Promise<void> {
|
||||
this.ws?.send(JSON.stringify({
|
||||
type: 'chat',
|
||||
session_id: sessionId,
|
||||
message: { role: 'user', content: message }
|
||||
}));
|
||||
}
|
||||
|
||||
onStream(callback: (event: StreamEvent) => void): void {
|
||||
this.ws?.addEventListener('message', (event) => {
|
||||
const data = JSON.parse(event.data);
|
||||
if (data.type === 'stream') {
|
||||
callback(data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Hand 触发
|
||||
async triggerHand(handName: string, params: any): Promise<void> {
|
||||
this.ws?.send(JSON.stringify({
|
||||
type: 'hand_trigger',
|
||||
hand_name: handName,
|
||||
params
|
||||
}));
|
||||
}
|
||||
|
||||
// Workflow 执行
|
||||
async executeWorkflow(workflowId: string, input: any): Promise<void> {
|
||||
this.ws?.send(JSON.stringify({
|
||||
type: 'workflow_execute',
|
||||
workflow_id: workflowId,
|
||||
input
|
||||
}));
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 9.2 端口配置
|
||||
|
||||
```typescript
|
||||
// OpenClaw
|
||||
const OPENCLAW_PORT = 18789;
|
||||
|
||||
// OpenFang
|
||||
const OPENFANG_PORT = 4200;
|
||||
|
||||
// 配置切换
|
||||
const GATEWAY_PORT = process.env.USE_OPENFANG === 'true'
|
||||
? OPENFANG_PORT
|
||||
: OPENCLAW_PORT;
|
||||
```
|
||||
|
||||
### 9.3 功能映射
|
||||
|
||||
| ZClaw 功能 | OpenClaw API | OpenFang API |
|
||||
|-----------|-------------|--------------|
|
||||
| 发送消息 | `chat` | `chat` |
|
||||
| 获取会话 | `/api/sessions` | `/api/sessions` |
|
||||
| 触发技能 | 插件系统 | `skill_trigger` |
|
||||
| Hand 自动化 | ❌ 无 | `hand_trigger` |
|
||||
| Workflow | ❌ 基础 | `workflow_execute` |
|
||||
| 审计日志 | ❌ 无 | `/api/audit/logs` |
|
||||
|
||||
---
|
||||
|
||||
## 十、开发命令
|
||||
|
||||
### 10.1 基本命令
|
||||
|
||||
```bash
|
||||
# 安装
|
||||
cargo install openfang
|
||||
|
||||
# 启动服务
|
||||
openfang start
|
||||
|
||||
# 停止服务
|
||||
openfang stop
|
||||
|
||||
# 查看状态
|
||||
openfang status
|
||||
|
||||
# 查看日志
|
||||
openfang logs
|
||||
|
||||
# 配置向导
|
||||
openfang wizard
|
||||
|
||||
# 迁移工具
|
||||
openfang migrate --from openclaw
|
||||
```
|
||||
|
||||
### 10.2 开发模式
|
||||
|
||||
```bash
|
||||
# 克隆仓库
|
||||
git clone https://github.com/RightNow-AI/openfang
|
||||
cd openfang
|
||||
|
||||
# 构建
|
||||
cargo build
|
||||
|
||||
# 运行测试
|
||||
cargo test
|
||||
|
||||
# 开发模式运行
|
||||
cargo run -- start --dev
|
||||
|
||||
# 构建 Release
|
||||
cargo build --release
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 十一、参考资料
|
||||
|
||||
### 11.1 官方资源
|
||||
|
||||
- **GitHub**: https://github.com/RightNow-AI/openfang
|
||||
- **文档**: https://docs.openfang.ai
|
||||
- **Discord**: https://discord.gg/openfang
|
||||
|
||||
### 11.2 相关文档
|
||||
|
||||
- [Claw 生态系统深度报告](./claw-ecosystem-deep-dive-report.md)
|
||||
- [OpenClaw 到 OpenFang 迁移分析](./openclaw-to-openfang-migration-brainstorm.md)
|
||||
- [ZClaw 项目指南](../CLAUDE.md)
|
||||
|
||||
---
|
||||
|
||||
*文档版本: v1.0 | 更新日期: 2026-03-13*
|
||||
Reference in New Issue
Block a user