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

feat(automation): complete unified automation system redesign

Browse Source 
Phase 4 completion:
- Add ApprovalQueue component for managing pending approvals
- Add ExecutionResult component for displaying hand/workflow results
- Update Sidebar navigation to use unified AutomationPanel
- Replace separate 'hands' and 'workflow' tabs with single 'automation' tab
- Fix TypeScript type safety issues with unknown types in JSX expressions

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
iven
2026-03-18 17:12:05 +08:00
parent 3a7631e035
commit 3518fc8ece
74 changed files with 4984 additions and 687 deletions
Download Patch File Download Diff File Expand all files Collapse all files

477
docs/archive/openclaw-legacy/workbuddy界面/专家.html Normal file
View File

@@ -0,0 +1,477 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WorkBuddy - 专家中心</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
overflow: hidden;
}
/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
/* Hide scrollbar for category nav but keep functionality */
.category-scroll::-webkit-scrollbar { display: none; }
.category-scroll { -ms-overflow-style: none; scrollbar-width: none; }
/* Expert card animations */
.expert-card {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-top: 4px solid #8b5cf6;
}
.expert-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
/* Avatar ring animation on hover */
.avatar-ring {
transition: all 0.3s ease;
}
.expert-card:hover .avatar-ring {
box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2);
}
/* Category tab active indicator */
.category-tab {
position: relative;
white-space: nowrap;
}
.category-tab.active::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 2px;
background-color: #8b5cf6;
}
/* Summon button pulse */
@keyframes pulse-purple {
0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4); }
50% { box-shadow: 0 0 0 10px rgba(139, 92, 246, 0); }
}
.summon-btn {
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
transition: all 0.3s ease;
}
.summon-btn:hover {
transform: scale(1.05);
box-shadow: 0 10px 20px -5px rgba(139, 92, 246, 0.4);
}
.summon-btn:active {
transform: scale(0.98);
}
/* Tag styling */
.expert-tag {
background-color: #f3e8ff;
color: #7c3aed;
font-size: 0.75rem;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-weight: 500;
display: inline-block;
}
/* Sidebar active state */
.sidebar-item.active {
background-color: #f3f4f6;
font-weight: 500;
}
</style>
</head>
<body class="bg-white h-screen flex text-gray-800">
<!-- Left Sidebar -->
<aside class="w-64 bg-white border-r border-gray-200 flex flex-col h-full flex-shrink-0">
<!-- App Header -->
<div class="h-14 flex items-center px-4 border-b border-gray-100 flex-shrink-0">
<div class="flex items-center gap-2">
<div class="w-8 h-8 bg-gradient-to-br from-emerald-400 to-teal-500 rounded-lg flex items-center justify-center text-white font-bold text-lg shadow-sm">
<i class="fas fa-code text-sm"></i>
</div>
<span class="font-bold text-lg text-gray-800 tracking-tight">WorkBuddy</span>
</div>
<button class="ml-auto p-1.5 hover:bg-gray-100 rounded-lg text-gray-400 transition-colors">
<i class="far fa-clone text-sm"></i>
</button>
</div>
<!-- Menu Items -->
<nav class="flex-1 py-3 px-3 space-y-0.5 overflow-y-auto">
<!-- Search -->
<div class="px-1 mb-3">
<div class="relative">
<i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"></i>
<input type="text" placeholder="搜索任务"
class="w-full pl-9 pr-8 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 transition-all">
<button class="absolute right-2 top-1/2 -translate-y-1/2 p-1 hover:bg-gray-200 rounded text-gray-400 transition-colors">
<i class="fas fa-sliders-h text-xs"></i>
</button>
</div>
</div>
<!-- New Task Button -->
<button class="w-full flex items-center gap-3 px-3 py-2 hover:bg-gray-100 rounded-lg text-gray-700 transition-colors mb-1">
<i class="far fa-check-square text-emerald-600 w-5"></i>
<span class="font-medium">新建任务</span>
</button>
<!-- Nav Items -->
<a href="#" class="sidebar-item flex items-center gap-3 px-3 py-2 text-gray-600 rounded-lg transition-colors">
<i class="fas fa-robot text-gray-400 w-5"></i>
<span>Claw</span>
</a>
<a href="#" class="sidebar-item active flex items-center gap-3 px-3 py-2 text-gray-900 rounded-lg transition-colors">
<i class="fas fa-user-tie text-gray-700 w-5"></i>
<span>专家</span>
</a>
<a href="#" class="sidebar-item flex items-center gap-3 px-3 py-2 text-gray-600 rounded-lg transition-colors">
<i class="fas fa-wand-magic-sparkles text-gray-400 w-5"></i>
<span>技能</span>
</a>
<a href="#" class="sidebar-item flex items-center gap-3 px-3 py-2 text-gray-600 rounded-lg transition-colors">
<i class="fas fa-puzzle-piece text-gray-400 w-5"></i>
<span>插件</span>
</a>
<a href="#" class="sidebar-item flex items-center gap-3 px-3 py-2 text-gray-600 rounded-lg transition-colors">
<i class="far fa-clock text-gray-400 w-5"></i>
<span>自动化</span>
</a>
<!-- Empty State -->
<div class="mt-8 px-4 text-center">
<p class="text-gray-900 font-medium mb-1">暂无任务</p>
<p class="text-gray-400 text-sm">点击上方按钮开始新任务</p>
</div>
</nav>
<!-- User Profile -->
<div class="p-3 border-t border-gray-200 flex-shrink-0">
<button class="flex items-center gap-3 w-full hover:bg-gray-50 p-2 rounded-lg transition-colors">
<div class="w-8 h-8 bg-gradient-to-br from-emerald-400 to-cyan-500 rounded-full flex items-center justify-center text-white font-bold shadow-sm">
<i class="fas fa-robot text-xs"></i>
</div>
<span class="flex-1 text-left text-sm font-medium text-gray-700">iven</span>
<i class="fas fa-chevron-right text-gray-400 text-xs"></i>
</button>
</div>
</aside>
<!-- Main Content -->
<main class="flex-1 flex flex-col h-full bg-white overflow-hidden">
<!-- Top Bar -->
<header class="h-14 bg-white border-b border-gray-200 flex items-center justify-between px-6 flex-shrink-0">
<div class="flex items-center gap-2">
<div class="w-8 h-8 bg-gradient-to-br from-emerald-400 to-teal-500 rounded-lg flex items-center justify-center text-white font-bold">
<i class="fas fa-code text-sm"></i>
</div>
<span class="font-bold text-lg">WorkBuddy</span>
</div>
<div class="text-sm text-gray-600 font-medium">Agents</div>
<div class="flex items-center gap-2">
<button class="p-2 hover:bg-gray-100 rounded-lg text-gray-500">
<i class="fas fa-minus text-xs"></i>
</button>
<button class="p-2 hover:bg-gray-100 rounded-lg text-gray-500">
<i class="far fa-square text-xs"></i>
</button>
<button class="p-2 hover:bg-red-50 rounded-lg text-gray-500 hover:text-red-500">
<i class="fas fa-times text-xs"></i>
</button>
</div>
</header>
<!-- Content Area -->
<div class="flex-1 overflow-y-auto bg-gray-50/50">
<div class="max-w-7xl mx-auto px-8 py-8">
<!-- Header Section -->
<div class="mb-8">
<h1 class="text-3xl font-bold text-gray-900 mb-2">专家中心</h1>
<p class="text-gray-500 text-base">按行业分类浏览专家，召唤他们为你服务</p>
</div>
<!-- Category Tabs -->
<div class="mb-8 border-b border-gray-200">
<div class="category-scroll flex gap-8 overflow-x-auto pb-0">
<button class="category-tab active pb-3 text-violet-600 font-medium text-sm" onclick="filterExperts('all', this)">
全部
</button>
<button class="category-tab pb-3 text-gray-500 hover:text-gray-700 font-medium text-sm transition-colors" onclick="filterExperts('design', this)">
设计 <span class="text-gray-400 ml-1">(8)</span>
</button>
<button class="category-tab pb-3 text-gray-500 hover:text-gray-700 font-medium text-sm transition-colors" onclick="filterExperts('engineering', this)">
工程技术 <span class="text-gray-400 ml-1">(21)</span>
</button>
<button class="category-tab pb-3 text-gray-500 hover:text-gray-700 font-medium text-sm transition-colors" onclick="filterExperts('marketing', this)">
市场营销 <span class="text-gray-400 ml-1">(26)</span>
</button>
<button class="category-tab pb-3 text-gray-500 hover:text-gray-700 font-medium text-sm transition-colors" onclick="filterExperts('media', this)">
付费媒体 <span class="text-gray-400 ml-1">(7)</span>
</button>
<button class="category-tab pb-3 text-gray-500 hover:text-gray-700 font-medium text-sm transition-colors" onclick="filterExperts('sales', this)">
销售 <span class="text-gray-400 ml-1">(8)</span>
</button>
<button class="category-tab pb-3 text-gray-500 hover:text-gray-700 font-medium text-sm transition-colors" onclick="filterExperts('product', this)">
产品 <span class="text-gray-400 ml-1">(4)</span>
</button>
<button class="category-tab pb-3 text-gray-500 hover:text-gray-700 font-medium text-sm transition-colors" onclick="filterExperts('pm', this)">
项目管理 <span class="text-gray-400 ml-1">(6)</span>
</button>
<button class="category-tab pb-3 text-gray-500 hover:text-gray-700 font-medium text-sm transition-colors" onclick="filterExperts('quality', this)">
质量测试 <span class="text-gray-400 ml-1">(12)</span>
</button>
</div>
</div>
<!-- Experts Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" id="expertsGrid">
<!-- Expert Card: Kai -->
<div class="expert-card bg-white rounded-2xl p-6 border border-gray-100 flex flex-col items-center text-center relative overflow-hidden group" data-category="marketing">
<div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-violet-500 to-purple-600"></div>
<div class="avatar-ring w-20 h-20 rounded-full overflow-hidden mb-4 border-4 border-white shadow-lg relative">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Kai&backgroundColor=b6e3f4&clothing=graphicShirt&eyebrows=default&eyes=happy&mouth=smile&top=shortHair"
alt="Kai" class="w-full h-full object-cover">
</div>
<h3 class="text-lg font-bold text-gray-900 mb-2">Kai</h3>
<span class="expert-tag mb-3">内容创作专家</span>
<p class="text-gray-500 text-sm leading-relaxed mb-6 flex-1 line-clamp-3">
擅长创作引人入胜的多平台内容，让品牌故事触达目标受众
</p>
<button class="summon-btn w-full py-2.5 rounded-xl text-white font-medium text-sm flex items-center justify-center gap-2 shadow-lg shadow-violet-200" onclick="summonExpert('Kai')">
<i class="fas fa-plus"></i>
立即召唤
</button>
</div>
<!-- Expert Card: Phoebe -->
<div class="expert-card bg-white rounded-2xl p-6 border border-gray-100 flex flex-col items-center text-center relative overflow-hidden group" data-category="engineering">
<div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-violet-500 to-purple-600"></div>
<div class="avatar-ring w-20 h-20 rounded-full overflow-hidden mb-4 border-4 border-white shadow-lg">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Phoebe&backgroundColor=c0aede&clothing=collarAndSweater&eyes=default&mouth=default&top=longHair"
alt="Phoebe" class="w-full h-full object-cover">
</div>
<h3 class="text-lg font-bold text-gray-900 mb-2">Phoebe</h3>
<span class="expert-tag mb-3">数据分析报告师</span>
<p class="text-gray-500 text-sm leading-relaxed mb-6 flex-1 line-clamp-3">
将复杂数据转化为清晰可执行的业务报告，让数据驱动决策
</p>
<button class="summon-btn w-full py-2.5 rounded-xl text-white font-medium text-sm flex items-center justify-center gap-2 shadow-lg shadow-violet-200" onclick="summonExpert('Phoebe')">
<i class="fas fa-plus"></i>
立即召唤
</button>
</div>
<!-- Expert Card: Jude -->
<div class="expert-card bg-white rounded-2xl p-6 border border-gray-100 flex flex-col items-center text-center relative overflow-hidden group" data-category="sales">
<div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-violet-500 to-purple-600"></div>
<div class="avatar-ring w-20 h-20 rounded-full overflow-hidden mb-4 border-4 border-white shadow-lg">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Jude&backgroundColor=ffdfbf&clothing=blazerAndShirt&eyes=default&mouth=smile&top=shortHair"
alt="Jude" class="w-full h-full object-cover">
</div>
<h3 class="text-lg font-bold text-gray-900 mb-2">Jude</h3>
<span class="expert-tag mb-3">中国电商运营专家</span>
<p class="text-gray-500 text-sm leading-relaxed mb-6 flex-1 line-clamp-3">
精通天猫京东拼多多等平台运营，从选品到爆款一站式操盘
</p>
<button class="summon-btn w-full py-2.5 rounded-xl text-white font-medium text-sm flex items-center justify-center gap-2 shadow-lg shadow-violet-200" onclick="summonExpert('Jude')">
<i class="fas fa-plus"></i>
立即召唤
</button>
</div>
<!-- Expert Card: Maya -->
<div class="expert-card bg-white rounded-2xl p-6 border border-gray-100 flex flex-col items-center text-center relative overflow-hidden group" data-category="media">
<div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-violet-500 to-purple-600"></div>
<div class="avatar-ring w-20 h-20 rounded-full overflow-hidden mb-4 border-4 border-white shadow-lg">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Maya&backgroundColor=ffd5dc&clothing=graphicShirt&eyes=default&mouth=smile&top=longHair"
alt="Maya" class="w-full h-full object-cover">
</div>
<h3 class="text-lg font-bold text-gray-900 mb-2">Maya</h3>
<span class="expert-tag mb-3">抖音策略专家</span>
<p class="text-gray-500 text-sm leading-relaxed mb-6 flex-1 line-clamp-3">
精通抖音算法和内容营销，助力品牌打造短视频爆款并实现商业变现
</p>
<button class="summon-btn w-full py-2.5 rounded-xl text-white font-medium text-sm flex items-center justify-center gap-2 shadow-lg shadow-violet-200" onclick="summonExpert('Maya')">
<i class="fas fa-plus"></i>
立即召唤
</button>
</div>
<!-- Expert Card: Ula -->
<div class="expert-card bg-white rounded-2xl p-6 border border-gray-100 flex flex-col items-center text-center relative overflow-hidden group" data-category="sales">
<div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-violet-500 to-purple-600"></div>
<div class="avatar-ring w-20 h-20 rounded-full overflow-hidden mb-4 border-4 border-white shadow-lg">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Ula&backgroundColor=d1d4f9&clothing=collarAndSweater&eyes=default&mouth=default&top=shortHair"
alt="Ula" class="w-full h-full object-cover">
</div>
<h3 class="text-lg font-bold text-gray-900 mb-2">Ula</h3>
<span class="expert-tag mb-3">销售教练</span>
<p class="text-gray-500 text-sm leading-relaxed mb-6 flex-1 line-clamp-3">
用苏格拉底式提问训练销售团队，从60%达标到总统俱乐部
</p>
<button class="summon-btn w-full py-2.5 rounded-xl text-white font-medium text-sm flex items-center justify-center gap-2 shadow-lg shadow-violet-200" onclick="summonExpert('Ula')">
<i class="fas fa-plus"></i>
立即召唤
</button>
</div>
<!-- Expert Card: Ben -->
<div class="expert-card bg-white rounded-2xl p-6 border border-gray-100 flex flex-col items-center text-center relative overflow-hidden group" data-category="design">
<div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-violet-500 to-purple-600"></div>
<div class="avatar-ring w-20 h-20 rounded-full overflow-hidden mb-4 border-4 border-white shadow-lg">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Ben&backgroundColor=c0aede&clothing=blazerAndShirt&eyes=default&mouth=smile&top=shortHair"
alt="Ben" class="w-full h-full object-cover">
</div>
<h3 class="text-lg font-bold text-gray-900 mb-2">Ben</h3>
<span class="expert-tag mb-3">品牌策略师</span>
<p class="text-gray-500 text-sm leading-relaxed mb-6 flex-1 line-clamp-3">
15年品牌战略经验，守护品牌一致性的终极捍卫者
</p>
<button class="summon-btn w-full py-2.5 rounded-xl text-white font-medium text-sm flex items-center justify-center gap-2 shadow-lg shadow-violet-200" onclick="summonExpert('Ben')">
<i class="fas fa-plus"></i>
立即召唤
</button>
</div>
<!-- Expert Card: Fay -->
<div class="expert-card bg-white rounded-2xl p-6 border border-gray-100 flex flex-col items-center text-center relative overflow-hidden group" data-category="marketing">
<div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-violet-500 to-purple-600"></div>
<div class="avatar-ring w-20 h-20 rounded-full overflow-hidden mb-4 border-4 border-white shadow-lg">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Fay&backgroundColor=ffdfbf&clothing=graphicShirt&eyes=default&mouth=smile&top=longHair"
alt="Fay" class="w-full h-full object-cover">
</div>
<h3 class="text-lg font-bold text-gray-900 mb-2">Fay</h3>
<span class="expert-tag mb-3">小红书运营专家</span>
<p class="text-gray-500 text-sm leading-relaxed mb-6 flex-1 line-clamp-3">
深谙小红书种草生态和推荐机制，打造高互动率种草内容
</p>
<button class="summon-btn w-full py-2.5 rounded-xl text-white font-medium text-sm flex items-center justify-center gap-2 shadow-lg shadow-violet-200" onclick="summonExpert('Fay')">
<i class="fas fa-plus"></i>
立即召唤
</button>
</div>
<!-- Expert Card: Tess -->
<div class="expert-card bg-white rounded-2xl p-6 border border-gray-100 flex flex-col items-center text-center relative overflow-hidden group" data-category="product">
<div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-violet-500 to-purple-600"></div>
<div class="avatar-ring w-20 h-20 rounded-full overflow-hidden mb-4 border-4 border-white shadow-lg">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Tess&backgroundColor=b6e3f4&clothing=collarAndSweater&eyes=default&mouth=default&top=longHair"
alt="Tess" class="w-full h-full object-cover">
</div>
<h3 class="text-lg font-bold text-gray-900 mb-2">Tess</h3>
<span class="expert-tag mb-3">招聘专家</span>
<p class="text-gray-500 text-sm leading-relaxed mb-6 flex-1 line-clamp-3">
精通人才招聘全流程，从简历筛选到面试评估，为企业寻找最佳人才
</p>
<button class="summon-btn w-full py-2.5 rounded-xl text-white font-medium text-sm flex items-center justify-center gap-2 shadow-lg shadow-violet-200" onclick="summonExpert('Tess')">
<i class="fas fa-plus"></i>
立即召唤
</button>
</div>
</div>
<!-- Loading More Indicator -->
<div class="mt-12 text-center">
<div class="inline-flex items-center gap-2 text-gray-400 text-sm">
<i class="fas fa-circle-notch fa-spin"></i>
<span>更多专家加载中...</span>
</div>
</div>
</div>
</div>
</main>
<!-- Toast Notification -->
<div id="toast" class="fixed bottom-8 right-8 bg-gray-900 text-white px-6 py-3 rounded-xl shadow-2xl transform translate-y-20 opacity-0 transition-all duration-300 flex items-center gap-3 z-50">
<i class="fas fa-check-circle text-emerald-400"></i>
<span id="toastMessage">已召唤专家</span>
</div>
<script>
// Filter experts by category
function filterExperts(category, element) {
// Update active tab
document.querySelectorAll('.category-tab').forEach(tab => {
tab.classList.remove('active', 'text-violet-600');
tab.classList.add('text-gray-500');
});
element.classList.add('active', 'text-violet-600');
element.classList.remove('text-gray-500');
// Filter cards with animation
const cards = document.querySelectorAll('.expert-card');
cards.forEach(card => {
if (category === 'all' || card.dataset.category === category) {
card.style.display = 'flex';
setTimeout(() => {
card.style.opacity = '1';
card.style.transform = 'translateY(0)';
}, 50);
} else {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
setTimeout(() => {
card.style.display = 'none';
}, 300);
}
});
}
// Summon expert action
function summonExpert(name) {
const toast = document.getElementById('toast');
const toastMessage = document.getElementById('toastMessage');
toastMessage.textContent = `已召唤 ${name} 为您服务`;
toast.classList.remove('translate-y-20', 'opacity-0');
setTimeout(() => {
toast.classList.add('translate-y-20', 'opacity-0');
}, 3000);
}
// Add scroll animation for cards on load
window.addEventListener('load', () => {
const cards = document.querySelectorAll('.expert-card');
cards.forEach((card, index) => {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
setTimeout(() => {
card.style.transition = 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)';
card.style.opacity = '1';
card.style.transform = 'translateY(0)';
}, index * 100);
});
});
// Horizontal scroll with mouse wheel for category tabs
document.querySelector('.category-scroll').addEventListener('wheel', (e) => {
if (e.deltaY !== 0) {
e.preventDefault();
e.currentTarget.scrollLeft += e.deltaY;
}
});
</script>
</body>
</html>