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>
457 lines
22 KiB
HTML
457 lines
22 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>新分身 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> |