iven/zclaw_openfang
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(hands): restructure Hands UI with Chinese localization

Browse Source 
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
2026-03-14 23:16:32 +08:00
parent 67e1da635d
commit 07079293f4
126 changed files with 36229 additions and 1035 deletions
Download Patch File Download Diff File Expand all files Collapse all files

432
docs/archive/openclaw-legacy/autoclaw界面/html版/2.html Normal file
View 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>