feat(hands): restructure Hands UI with Chinese localization
Major changes: - Add HandList.tsx component for left sidebar - Add HandTaskPanel.tsx for middle content area - Restructure Sidebar tabs: 分身/HANDS/Workflow - Remove Hands tab from RightPanel - Localize all UI text to Chinese - Archive legacy OpenClaw documentation - Add Hands integration lessons document - Update feature checklist with new components UI improvements: - Left sidebar now shows Hands list with status icons - Middle area shows selected Hand's tasks and results - Consistent styling with Tailwind CSS - Chinese status labels and buttons Documentation: - Create docs/archive/openclaw-legacy/ for old docs - Add docs/knowledge-base/hands-integration-lessons.md - Update docs/knowledge-base/feature-checklist.md - Update docs/knowledge-base/README.md Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
iven
1
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>
|
||||
Reference in New Issue
Block a user