3518fc8ece
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>
477 lines
27 KiB
HTML
477 lines
27 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>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> |