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
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 的演进过程。
|
||||
BIN
docs/archive/openclaw-legacy/autoclaw界面/1.png
Normal file
BIN
docs/archive/openclaw-legacy/autoclaw界面/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 528 KiB |
BIN
docs/archive/openclaw-legacy/autoclaw界面/10.png
Normal file
BIN
docs/archive/openclaw-legacy/autoclaw界面/10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 529 KiB |
BIN
docs/archive/openclaw-legacy/autoclaw界面/11.png
Normal file
BIN
docs/archive/openclaw-legacy/autoclaw界面/11.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 587 KiB |
BIN
docs/archive/openclaw-legacy/autoclaw界面/12.png
Normal file
BIN
docs/archive/openclaw-legacy/autoclaw界面/12.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 312 KiB |
BIN
docs/archive/openclaw-legacy/autoclaw界面/13.png
Normal file
BIN
docs/archive/openclaw-legacy/autoclaw界面/13.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 332 KiB |
BIN
docs/archive/openclaw-legacy/autoclaw界面/2.png
Normal file
BIN
docs/archive/openclaw-legacy/autoclaw界面/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 624 KiB |
BIN
docs/archive/openclaw-legacy/autoclaw界面/3.png
Normal file
BIN
docs/archive/openclaw-legacy/autoclaw界面/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 382 KiB |
BIN
docs/archive/openclaw-legacy/autoclaw界面/4.png
Normal file
BIN
docs/archive/openclaw-legacy/autoclaw界面/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 391 KiB |
BIN
docs/archive/openclaw-legacy/autoclaw界面/5.png
Normal file
BIN
docs/archive/openclaw-legacy/autoclaw界面/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 441 KiB |
BIN
docs/archive/openclaw-legacy/autoclaw界面/6.png
Normal file
BIN
docs/archive/openclaw-legacy/autoclaw界面/6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 391 KiB |
BIN
docs/archive/openclaw-legacy/autoclaw界面/7.png
Normal file
BIN
docs/archive/openclaw-legacy/autoclaw界面/7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 373 KiB |
BIN
docs/archive/openclaw-legacy/autoclaw界面/8.png
Normal file
BIN
docs/archive/openclaw-legacy/autoclaw界面/8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 399 KiB |
BIN
docs/archive/openclaw-legacy/autoclaw界面/9.png
Normal file
BIN
docs/archive/openclaw-legacy/autoclaw界面/9.png
Normal file
Binary file not shown.
|
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>
|
||||
310
docs/archive/openclaw-legacy/deviation-analysis.md
Normal file
310
docs/archive/openclaw-legacy/deviation-analysis.md
Normal file
@@ -0,0 +1,310 @@
|
||||
# ZCLAW 偏离分析报告
|
||||
|
||||
**日期**: 2026-03-11
|
||||
**目的**: 对标 QClaw / AutoClaw / OpenClaw，分析当前项目是否偏离初衷
|
||||
|
||||
---
|
||||
|
||||
## 一、三大产品深度理解
|
||||
|
||||
### 1. OpenClaw — 开源核心 (GitHub 28万+ Stars)
|
||||
|
||||
OpenClaw 是一个**本地优先的 AI 代理平台**，不是简单的聊天机器人，而是一个能真正操控电脑执行任务的系统。
|
||||
|
||||
**核心架构:**
|
||||
|
||||
| 组件 | 说明 |
|
||||
|------|------|
|
||||
| **Gateway** | Node.js 进程，是整个系统的**核心控制面板**，管理 sessions、channels、tools、events |
|
||||
| **Channel Plugins** | IM 渠道适配器 — WhatsApp, Telegram, Slack, Discord, iMessage 等 10+ 种 |
|
||||
| **心跳引擎 (Heartbeat)** | 定期唤醒，检查 HEARTBEAT.md 任务清单，**主动**执行预定任务 |
|
||||
| **持久化身份** | SOUL.md(性格)、MEMORY.md(长期记忆)、AGENTS.md(角色配置) — **纯文本，Git 可控** |
|
||||
| **Skills 系统** | SKILL.md 文件 + 脚本，三级渐进式披露，100+ 预配置技能 |
|
||||
| **MCP 支持** | 模型上下文协议，JSON-RPC 2.0，扩展外部工具 (File System, Web Fetch, DB 等) |
|
||||
| **核心工具** | bash(命令行)、read/write(文件系统)、browser(浏览器控制) |
|
||||
| **插件体系** | Channel / Memory / Tool / Provider 四类插件 |
|
||||
| **存储** | 默认 SQLite，支持向量存储、知识图谱 |
|
||||
|
||||
**关键设计哲学:**
|
||||
- **本地优先**: 所有数据和执行都在本地
|
||||
- **透明可控**: 纯文本配置，用户能完全掌控 AI 的"大脑"
|
||||
- **执行而非建议**: 不是只出主意，而是真正动手做事
|
||||
- **自我进化**: Agent 可修改自身指令、改进工作流
|
||||
|
||||
---
|
||||
|
||||
### 2. QClaw — 腾讯产品化封装
|
||||
|
||||
QClaw **不是**腾讯从零重写的框架，而是**围绕 OpenClaw 做的一次产品化封装**。
|
||||
|
||||
**核心卖点:**
|
||||
- **一键安装**: 下载即用，无需配置环境
|
||||
- **微信 + QQ 双端接入**: 腾讯核心优势，在微信/QQ中直接对话指挥电脑
|
||||
- **内置国产模型**: Kimi, MiniMax, GLM, DeepSeek + 自定义模型
|
||||
- **5000+ Skills 生态**: ClawHub、GitHub 等丰富生态
|
||||
- **持续记忆**: 记住偏好和上下文
|
||||
- **本地部署**: 操控文件、浏览器、邮件
|
||||
|
||||
**使用场景:**
|
||||
- 远程操作电脑文件/网页
|
||||
- 社媒自动运营
|
||||
- GitHub 项目自动开发
|
||||
- 学术论文自动整理
|
||||
- 每日天气定时提醒
|
||||
|
||||
---
|
||||
|
||||
### 3. AutoClaw — 智谱 AutoGLM 定制版 (v0.2.12)
|
||||
|
||||
基于 OpenClaw 的智谱定制版，核心是**飞书集成**。
|
||||
|
||||
**从 13 张界面截图提取的完整功能架构:**
|
||||
|
||||
#### 主界面布局
|
||||
- **左侧栏 3 个 Tab**: 分身 / IM频道 / 定时任务
|
||||
- **中间**: 聊天区域 + 发送框 + 模型选择器 (glm-5)
|
||||
- **右侧**: 代码/文件区域 + Agent 面板
|
||||
|
||||
#### 设置系统 (10 个页面)
|
||||
| 页面 | 功能 |
|
||||
|------|------|
|
||||
| 通用 | 账号安全、主题(白色/Neon Noir)、开机自启、显示工具调用 |
|
||||
| 用量统计 | 会话数/消息数/总Token，按模型分类统计 |
|
||||
| 积分详情 | 积分总量、消耗/获得明细 |
|
||||
| **模型与API** | 内置模型(Pony-Alpha-2) + 自定义模型(glm-5/qwen3.5-plus/kimi-k2.5/MiniMax-M2.5) + **Gateway URL** (ws://127.0.0.1:18789) |
|
||||
| **MCP 服务** | File System / Web Fetch + 快速添加(Brave Search, SQLite) |
|
||||
| **技能** | SKILL.md 文件管理，额外技能目录 (~/.opencode/skills) |
|
||||
| **IM 频道** | 添加/管理频道，快速添加飞书 |
|
||||
| **工作区** | 项目目录、文件访问限制、自动保存上下文、文件监听、从OpenClaw迁移 |
|
||||
| 数据与隐私 | 本地数据路径、优化计划 |
|
||||
| 提交反馈 / 关于 | 反馈表单、版本信息 |
|
||||
|
||||
#### 核心概念
|
||||
- **分身 (Clone)**: 每个分身是独立的 Agent 实例，有自己的配置和对话历史
|
||||
- **快速配置**: 名字、角色、昵称、使用场景(编程/写作/产品/数据分析/设计/运维/研发/营销)
|
||||
- **Gateway WebSocket 连接**: ws://127.0.0.1:18789 — 这是 OpenClaw Gateway 的连接方式
|
||||
- **工作区**: 默认 ~/.openclaw-autoclaw/workspace，文件访问沙盒
|
||||
|
||||
---
|
||||
|
||||
## 二、当前 ZCLAW 项目现状
|
||||
|
||||
### 已有的代码 (37 文件, 2378 行)
|
||||
|
||||
| 模块 | 内容 |
|
||||
|------|------|
|
||||
| src/config/ | Zod 配置管理 |
|
||||
| src/utils/ | Logger + ID 生成器 |
|
||||
| src/db/ | SQLite Schema (8表) + BaseDAO |
|
||||
| src/core/ai/ | 智谱GLM + OpenAI Provider + AIManager |
|
||||
| src/core/multi-agent/ | MessageBus + BaseAgent + Planner/Executor/Combiner + Orchestrator |
|
||||
| src/core/remote-execution/ | 并发队列 + 任务管理 |
|
||||
| src/core/task-orchestration/ | 拓扑排序 + 计划执行 |
|
||||
| src/core/memory/ | 内存记忆 + 用户画像 |
|
||||
| src/core/proactive/ | node-cron 定时任务 |
|
||||
| src/im/ | IM Gateway + 飞书适配器 |
|
||||
| src/api/ | ZClawAPI for Tauri |
|
||||
| src/app.ts | ZClawApp 主类 |
|
||||
| desktop/ | Tauri + React 三栏布局 |
|
||||
|
||||
---
|
||||
|
||||
## 三、偏离分析 — 核心问题
|
||||
|
||||
### 🔴 严重偏离
|
||||
|
||||
#### 1. 架构根本性偏离 — 没有基于 OpenClaw
|
||||
|
||||
**问题**: 项目初衷是"学习 QClaw 跟 AutoClaw，打造结合 Tauri + OpenClaw 的系统"，但当前代码**完全没有 OpenClaw 的影子**。
|
||||
|
||||
- OpenClaw 的核心是 **Gateway** (Node.js 进程 + WebSocket)
|
||||
- QClaw 和 AutoClaw 都是**围绕 OpenClaw 做封装**
|
||||
- 我们的 ZCLAW 却从零自己发明了一套架构 (RemoteExecutionEngine / TaskOrchestrator / AgentOrchestrator)
|
||||
- 这些自创系统**不是 OpenClaw 的概念**，等于在重造轮子
|
||||
|
||||
**应该**: 直接集成 OpenClaw Gateway，或至少学习其架构模式来构建
|
||||
|
||||
#### 2. Skills 系统完全缺失
|
||||
|
||||
**问题**: Skills 是 OpenClaw/QClaw/AutoClaw 的**核心扩展机制**。
|
||||
|
||||
- OpenClaw 有 100+ 预配置技能
|
||||
- QClaw 有 5000+ Skills 生态
|
||||
- AutoClaw 截图显示有完整的技能管理界面
|
||||
- Skills 基于 SKILL.md 文件，三级渐进式披露，解决 Token 成本
|
||||
- 我们的 `src/skills/` 目录是**空的**，完全没有实现
|
||||
|
||||
#### 3. MCP (模型上下文协议) 完全缺失
|
||||
|
||||
**问题**: MCP 是现代 AI Agent 的标准工具扩展协议。
|
||||
|
||||
- AutoClaw 内置: File System、Web Fetch，可快速添加 Brave Search、SQLite
|
||||
- OpenClaw 原生支持 MCP
|
||||
- 我们完全没有 MCP 支持
|
||||
|
||||
#### 4. 工具执行层是"假的"
|
||||
|
||||
**问题**: OpenClaw 能**真正**操控电脑 — 执行 Shell 命令、读写文件、控制浏览器。
|
||||
|
||||
- 我们的 BrowserAgent / FileAgent / TerminalAgent 实际上是**用 AI 模拟输出结果**
|
||||
- 没有任何真实的命令执行、文件操作或浏览器控制能力
|
||||
- 用户期望"操控电脑完成任务"，我们只能"假装操作然后编结果"
|
||||
|
||||
---
|
||||
|
||||
### 🟡 方向偏离
|
||||
|
||||
#### 5. "多Agent协作" vs "分身(Clone)"概念错位
|
||||
|
||||
**问题**:
|
||||
- AutoClaw 的"分身"是**独立的 Agent 实例**，每个分身有自己的名字、角色、记忆、对话
|
||||
- 我们的"多 Agent"是面向**任务拆解**的 (Planner → Executor → Combiner)
|
||||
- 这是两种完全不同的概念
|
||||
|
||||
**AutoClaw 的分身**: 像是雇了多个助手，每个负责不同领域
|
||||
**我们的多 Agent**: 像是一个任务流水线，Planner 规划 → Executor 执行 → Combiner 汇总
|
||||
|
||||
#### 6. 持久化方式偏离
|
||||
|
||||
**问题**:
|
||||
- OpenClaw 用**纯文本文件**: SOUL.md, MEMORY.md, AGENTS.md — 透明、Git 可控
|
||||
- 我们用 SQLite 数据库表
|
||||
- 数据库不是错的，但缺少 OpenClaw 的**透明可控**理念
|
||||
- 用户无法像 Git 那样管理 AI 的"大脑"
|
||||
|
||||
#### 7. 心跳引擎缺失
|
||||
|
||||
**问题**:
|
||||
- OpenClaw 的核心特色是**心跳引擎** — 定期唤醒，检查 HEARTBEAT.md，主动执行任务
|
||||
- 这是"主动服务"的真正含义
|
||||
- 我们的 ProactiveServiceSystem 只是简单的 node-cron 定时器包装
|
||||
|
||||
#### 8. 工作区 (Workspace) 概念缺失
|
||||
|
||||
**问题**:
|
||||
- AutoClaw 有完整的工作区管理: 项目目录、文件访问沙盒、上下文自动保存、文件监听
|
||||
- 这是 Agent 安全执行的基础
|
||||
- 我们完全没有工作区概念
|
||||
|
||||
---
|
||||
|
||||
### 🟢 方向正确
|
||||
|
||||
| 功能 | 评价 |
|
||||
|------|------|
|
||||
| 左侧栏三个 Tab (分身/IM频道/定时任务) | ✅ 与 AutoClaw 布局一致 |
|
||||
| 多模型 Provider 支持 | ✅ 但需加 Gateway WebSocket 连接 |
|
||||
| IM 网关 + 飞书适配器 | ✅ 但应更像 OpenClaw Channel Plugin |
|
||||
| 定时任务 | ✅ 需升级为心跳引擎模式 |
|
||||
| SQLite 数据库 | ✅ OpenClaw 也用 SQLite，但需补充纯文本文件 |
|
||||
| Tauri 桌面应用 | ✅ 与目标一致 (QClaw用Electron, 我们用Tauri更好) |
|
||||
| 配置管理 (.env) | ✅ 需要但方向对 |
|
||||
|
||||
---
|
||||
|
||||
## 四、偏离程度评估
|
||||
|
||||
```
|
||||
整体偏离程度: ████████░░ 75%
|
||||
```
|
||||
|
||||
**核心原因**: 项目从**"基于 OpenClaw 做 Tauri 封装"**变成了**"从零自建 AI Agent 框架"**。
|
||||
|
||||
这就像是：
|
||||
- 目标是造一辆"基于丰田平台的改装车"
|
||||
- 实际上在从零造发动机、底盘和变速箱
|
||||
- 造出来的还跟丰田的规格不兼容
|
||||
|
||||
---
|
||||
|
||||
## 五、修正建议
|
||||
|
||||
### 方案 A: 直接集成 OpenClaw（推荐）
|
||||
|
||||
```
|
||||
OpenClaw Gateway (npm install openclaw)
|
||||
↕ WebSocket (ws://127.0.0.1:18789)
|
||||
Tauri Desktop App (我们的前端)
|
||||
↕ Tauri Commands
|
||||
React UI (学习 AutoClaw 的界面设计)
|
||||
```
|
||||
|
||||
**步骤:**
|
||||
1. 安装 OpenClaw 作为依赖（或子进程启动）
|
||||
2. 通过 WebSocket 连接 OpenClaw Gateway
|
||||
3. Tauri 前端做 UI 封装（学 AutoClaw 的设计）
|
||||
4. 添加自定义 Channel Plugin (微信/QQ/飞书)
|
||||
5. 添加自定义 Skills
|
||||
6. 添加 MCP 服务管理
|
||||
|
||||
**优点**: 直接获得 OpenClaw 的全部能力 (真实工具执行、Skills 生态、MCP 等)
|
||||
**缺点**: 学习成本，依赖外部项目
|
||||
|
||||
### 方案 B: 学习架构重构（折中）
|
||||
|
||||
保留 Tauri + 自己的后端，但按 OpenClaw 的架构模式重构：
|
||||
|
||||
1. **重构为 Gateway 模式**: 把我们的后端重构为 OpenClaw 风格的 Gateway
|
||||
2. **实现 Skills 系统**: SKILL.md 文件 + 渐进式披露
|
||||
3. **实现 MCP 支持**: JSON-RPC 2.0 工具扩展协议
|
||||
4. **实现真实工具**: bash 命令执行、文件读写、浏览器控制 (Playwright)
|
||||
5. **实现分身系统**: 每个分身 = 独立 Agent 实例 + 独立配置/记忆
|
||||
6. **实现心跳引擎**: HEARTBEAT.md + 定期检查 + 主动执行
|
||||
7. **实现工作区**: 项目沙盒 + 文件监听 + 上下文保存
|
||||
8. **补充纯文本持久化**: SOUL.md + MEMORY.md + AGENTS.md
|
||||
|
||||
**优点**: 深度学习理解架构，自主可控
|
||||
**缺点**: 工作量大，可能重复造轮子
|
||||
|
||||
### 方案 C: 混合方案（务实）
|
||||
|
||||
- OpenClaw 作为执行引擎（子进程运行或 WebSocket 连接）
|
||||
- Tauri 做桌面 UI 封装（仿 AutoClaw 界面）
|
||||
- 自己实现差异化功能（微信接入、中文 Skills、国产模型优化）
|
||||
|
||||
---
|
||||
|
||||
## 六、需要保留 vs 需要重写 vs 需要新建
|
||||
|
||||
### ✅ 保留
|
||||
- `src/config/` — 配置管理（调整 key 名称对标 OpenClaw）
|
||||
- `src/utils/` — Logger + ID 生成器
|
||||
- `src/db/` — SQLite 层（OpenClaw 也用 SQLite）
|
||||
- `src/core/ai/` — 多模型 Provider（补充 Gateway 连接方式）
|
||||
- `src/im/` — IM 网关（重构为 Channel Plugin 模式）
|
||||
- `desktop/` — Tauri 前端（大幅扩展界面）
|
||||
|
||||
### 🔄 重写
|
||||
- `src/core/multi-agent/` → 重构为**分身 (Clone) 系统**
|
||||
- `src/core/remote-execution/` → 重构为**真实工具执行层** (bash/file/browser)
|
||||
- `src/core/task-orchestration/` → 简化，交给 LLM 自主规划
|
||||
- `src/core/proactive/` → 重构为**心跳引擎**
|
||||
- `src/core/memory/` → 补充纯文本文件 (MEMORY.md)
|
||||
- `src/app.ts` → 重构为 **Gateway 模式**
|
||||
|
||||
### 🆕 新建
|
||||
- `src/skills/` — Skills 系统（SKILL.md 加载/解析/注册）
|
||||
- `src/mcp/` — MCP 协议支持
|
||||
- `src/tools/` — 真实工具执行 (bash, file, browser via Playwright)
|
||||
- `src/workspace/` — 工作区管理（沙盒、文件监听、上下文保存）
|
||||
- `src/gateway/` — WebSocket Gateway 服务
|
||||
- 前端设置页面（通用/用量统计/模型API/MCP/技能/IM/工作区/隐私）
|
||||
|
||||
---
|
||||
|
||||
## 七、结论
|
||||
|
||||
**当前项目已经严重偏离了"学习 QClaw/AutoClaw + 基于 OpenClaw"的初衷。**
|
||||
|
||||
核心问题不在于代码质量（代码是可以编译的），而在于**架构方向**：我们在自己发明一套 AI Agent 框架，而不是基于 OpenClaw 做 Tauri 封装。
|
||||
|
||||
建议选择方案后，优先做以下事情：
|
||||
1. 深入研究 OpenClaw 源码和 Gateway 架构
|
||||
2. 确定是直接集成还是学习重构
|
||||
3. 实现 Skills 系统和 MCP 支持
|
||||
4. 实现真实工具执行能力
|
||||
5. 按 AutoClaw 界面设计前端
|
||||
|
||||
---
|
||||
|
||||
*本报告基于 QClaw 官网、AutoClaw 官网 + 13张界面截图、OpenClaw GitHub + 技术文章的深度分析*
|
||||
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 的前置基础
|
||||
Reference in New Issue
Block a user