07079293f4
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>
949 lines
45 KiB
HTML
949 lines
45 KiB
HTML
<!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> |