feat(automation): complete unified automation system redesign
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
524
docs/archive/openclaw-legacy/workbuddy界面/claw.html
Normal file
524
docs/archive/openclaw-legacy/workbuddy界面/claw.html
Normal file
@@ -0,0 +1,524 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>WorkBuddy - Claw</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; }
|
||||
|
||||
/* Robot floating animation */
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-8px); }
|
||||
}
|
||||
.robot-float { animation: float 4s ease-in-out infinite; }
|
||||
|
||||
/* Title styling */
|
||||
.claw-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.claw-icon {
|
||||
color: #dc2626;
|
||||
display: inline-block;
|
||||
transform: rotate(-15deg);
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
|
||||
.ideas-text {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ideas-underline {
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: linear-gradient(90deg, #a78bfa 0%, #c084fc 100%);
|
||||
opacity: 0.6;
|
||||
border-radius: 4px;
|
||||
transform: rotate(-1deg);
|
||||
}
|
||||
|
||||
.star-icon {
|
||||
color: #10b981;
|
||||
font-size: 0.8rem;
|
||||
vertical-align: super;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
/* Dropdown animations */
|
||||
.dropdown-menu {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(-10px);
|
||||
transition: all 0.15s ease-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
.dropdown-menu.active {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* Input area focus */
|
||||
.input-container {
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
.input-container:focus-within {
|
||||
border-color: #6366f1;
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
|
||||
/* Button hover effects */
|
||||
.tool-btn {
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
.tool-btn:hover {
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
.tool-btn.active {
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
/* Sidebar item selected state */
|
||||
.sidebar-item {
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
.sidebar-item:hover {
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
.sidebar-item.active {
|
||||
background-color: #f3f4f6;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Model list item */
|
||||
.model-item {
|
||||
transition: background-color 0.15s;
|
||||
}
|
||||
.model-item:hover {
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
/* Send button */
|
||||
.send-btn {
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.send-btn:hover {
|
||||
background-color: #10b981;
|
||||
color: white;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
</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 select-none">
|
||||
<!-- 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>
|
||||
|
||||
<!-- Claw Item (Active with icons) -->
|
||||
<div class="sidebar-item active flex items-center justify-between px-3 py-2 rounded-lg cursor-pointer group">
|
||||
<div class="flex items-center gap-3">
|
||||
<i class="fas fa-robot text-gray-700 w-5"></i>
|
||||
<span>Claw</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button class="p-1 hover:bg-gray-200 rounded text-gray-500" title="打开文件夹">
|
||||
<i class="far fa-folder-open text-xs"></i>
|
||||
</button>
|
||||
<button class="p-1 hover:bg-gray-200 rounded text-gray-500" title="设置">
|
||||
<i class="fas fa-cog text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Other 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-user-tie 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-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 relative bg-white">
|
||||
<!-- Top Bar -->
|
||||
<header class="h-14 bg-white border-b border-gray-200 flex items-center justify-between px-4 flex-shrink-0">
|
||||
<div class="flex-1"></div>
|
||||
<div class="text-sm text-gray-600 font-medium">Agents</div>
|
||||
<div class="flex-1 flex justify-end items-center gap-1">
|
||||
<button class="w-8 h-8 flex items-center justify-center hover:bg-gray-100 rounded-lg text-gray-500 transition-colors">
|
||||
<i class="fas fa-minus text-xs"></i>
|
||||
</button>
|
||||
<button class="w-8 h-8 flex items-center justify-center hover:bg-gray-100 rounded-lg text-gray-500 transition-colors">
|
||||
<i class="far fa-square text-xs"></i>
|
||||
</button>
|
||||
<button class="w-8 h-8 flex items-center justify-center hover:bg-red-50 hover:text-red-500 rounded-lg text-gray-500 transition-colors">
|
||||
<i class="fas fa-times text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Content Area -->
|
||||
<div class="flex-1 overflow-y-auto bg-white flex flex-col items-center justify-center p-8">
|
||||
<div class="w-full max-w-3xl flex flex-col items-center">
|
||||
|
||||
<!-- Robot Mascot -->
|
||||
<div class="robot-float mb-6 relative">
|
||||
<div class="w-24 h-24 relative">
|
||||
<img src="https://api.dicebear.com/7.x/bottts/svg?seed=claw-red&backgroundColor=ffdfbf&eyes=happy"
|
||||
alt="Claw Robot"
|
||||
class="w-full h-full drop-shadow-xl">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<h1 class="claw-title mb-1 text-center">
|
||||
Claw<span class="claw-icon"><i class="fas fa-paw"></i></span>Your
|
||||
<span class="ideas-text">Ideas<span class="ideas-underline"></span></span>
|
||||
</h1>
|
||||
<h2 class="claw-title mb-6 text-center">
|
||||
Into Reality<span class="star-icon"><i class="fas fa-star"></i></span>
|
||||
</h2>
|
||||
|
||||
<!-- Description -->
|
||||
<div class="text-center text-gray-600 mb-8 space-y-1">
|
||||
<p class="text-base">通过 Claw，让 Agent 随时随地接手并推进你的工作。</p>
|
||||
<p class="text-base">前往 Claw 设置，连接企业微信、飞书、钉钉或 QQ，把任务带到每一个消息入口。</p>
|
||||
</div>
|
||||
|
||||
<!-- Input Area -->
|
||||
<div class="w-full input-container bg-white rounded-2xl shadow-sm relative">
|
||||
<!-- Input Toolbar -->
|
||||
<div class="flex items-center gap-1 px-4 pt-3 pb-2">
|
||||
<button class="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-gray-100 text-gray-600 transition-colors" title="提及">
|
||||
<i class="fas fa-at"></i>
|
||||
</button>
|
||||
<button class="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-gray-100 text-gray-600 transition-colors" title="附件">
|
||||
<i class="fas fa-paperclip"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Text Input -->
|
||||
<div class="px-4 pb-2">
|
||||
<textarea
|
||||
placeholder="输入消息..."
|
||||
class="w-full h-20 resize-none outline-none text-gray-700 placeholder-gray-400 text-base leading-relaxed bg-transparent"
|
||||
style="min-height: 60px;"></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Toolbar -->
|
||||
<div class="px-3 pb-3 flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Craft Dropdown -->
|
||||
<div class="relative" id="craftDropdown">
|
||||
<button onclick="toggleDropdown('craftDropdown')" class="tool-btn flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium text-gray-700 border border-gray-200 bg-white">
|
||||
<i class="far fa-window-maximize text-xs text-gray-500"></i>
|
||||
<span>Craft</span>
|
||||
<i class="fas fa-chevron-down text-xs text-gray-400 ml-1"></i>
|
||||
</button>
|
||||
<!-- Craft Menu -->
|
||||
<div class="dropdown-menu absolute bottom-full left-0 mb-2 w-48 bg-white border border-gray-200 rounded-xl shadow-xl py-1.5 z-50">
|
||||
<button class="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 text-left text-sm text-gray-700">
|
||||
<i class="far fa-window-maximize text-gray-500"></i>
|
||||
<span>Craft</span>
|
||||
<i class="fas fa-check text-emerald-500 ml-auto text-xs"></i>
|
||||
</button>
|
||||
<button class="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 text-left text-sm text-gray-700">
|
||||
<i class="far fa-calendar-check text-gray-500"></i>
|
||||
<span>Plan</span>
|
||||
</button>
|
||||
<button class="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 text-left text-sm text-gray-700">
|
||||
<i class="far fa-comment-dots text-gray-500"></i>
|
||||
<span>Ask</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Auto Dropdown -->
|
||||
<div class="relative" id="autoDropdown">
|
||||
<button onclick="toggleDropdown('autoDropdown')" class="tool-btn flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium text-gray-700 border border-gray-200 bg-white">
|
||||
<i class="fas fa-layer-group text-xs text-gray-500"></i>
|
||||
<span>Auto</span>
|
||||
<i class="fas fa-chevron-down text-xs text-gray-400 ml-1"></i>
|
||||
</button>
|
||||
<!-- Model Menu -->
|
||||
<div class="dropdown-menu absolute bottom-full left-0 mb-2 w-64 bg-white border border-gray-200 rounded-xl shadow-xl py-2 z-50">
|
||||
<div class="px-3 py-1.5 text-xs text-gray-400 font-medium uppercase tracking-wider">内置模型</div>
|
||||
|
||||
<button class="model-item w-full flex items-center gap-3 px-4 py-2 text-left">
|
||||
<i class="fas fa-layer-group text-gray-600 text-sm"></i>
|
||||
<span class="flex-1 text-sm text-gray-700">Auto</span>
|
||||
<i class="fas fa-check text-emerald-500 text-xs"></i>
|
||||
</button>
|
||||
|
||||
<button class="model-item w-full flex items-center gap-3 px-4 py-2 text-left">
|
||||
<i class="fas fa-wave-square text-pink-500 text-sm"></i>
|
||||
<span class="text-sm text-gray-700">MiniMax-M2.5</span>
|
||||
<i class="fas fa-snowflake text-gray-300 text-xs ml-auto"></i>
|
||||
</button>
|
||||
|
||||
<button class="model-item w-full flex items-center gap-3 px-4 py-2 text-left">
|
||||
<div class="w-5 h-5 bg-purple-600 rounded flex items-center justify-center text-white text-xs font-bold">Z</div>
|
||||
<span class="text-sm text-gray-700">GLM-5.0</span>
|
||||
<i class="fas fa-snowflake text-gray-300 text-xs ml-auto"></i>
|
||||
</button>
|
||||
|
||||
<button class="model-item w-full flex items-center gap-3 px-4 py-2 text-left">
|
||||
<div class="w-5 h-5 bg-purple-500 rounded flex items-center justify-center text-white text-xs font-bold">Z</div>
|
||||
<span class="text-sm text-gray-700">GLM-4.7</span>
|
||||
<i class="fas fa-snowflake text-gray-300 text-xs ml-auto"></i>
|
||||
</button>
|
||||
|
||||
<button class="model-item w-full flex items-center gap-3 px-4 py-2 text-left">
|
||||
<div class="w-5 h-5 bg-gray-800 rounded flex items-center justify-center text-white text-xs font-bold">K</div>
|
||||
<span class="text-sm text-gray-700">Kimi-K2.5</span>
|
||||
<i class="fas fa-snowflake text-gray-300 text-xs ml-auto"></i>
|
||||
</button>
|
||||
|
||||
<button class="model-item w-full flex items-center gap-3 px-4 py-2 text-left">
|
||||
<div class="w-5 h-5 bg-gray-700 rounded flex items-center justify-center text-white text-xs font-bold">K</div>
|
||||
<span class="text-sm text-gray-700">Kimi-K2-Thinking</span>
|
||||
<i class="fas fa-snowflake text-gray-300 text-xs ml-auto"></i>
|
||||
</button>
|
||||
|
||||
<button class="model-item w-full flex items-center gap-3 px-4 py-2 text-left">
|
||||
<i class="fas fa-fish text-blue-500 text-sm"></i>
|
||||
<span class="text-sm text-gray-700">DeepSeek-V3.2</span>
|
||||
<i class="fas fa-snowflake text-gray-300 text-xs ml-auto"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Skills Dropdown -->
|
||||
<div class="relative" id="skillsDropdown">
|
||||
<button onclick="toggleDropdown('skillsDropdown')" class="tool-btn flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium text-gray-700 border border-gray-200 bg-white">
|
||||
<i class="fas fa-wand-magic-sparkles text-xs text-gray-500"></i>
|
||||
<span>Skills</span>
|
||||
</button>
|
||||
<!-- Skills Menu -->
|
||||
<div class="dropdown-menu absolute bottom-full left-0 mb-2 w-80 bg-white border border-gray-200 rounded-xl shadow-xl py-2 z-50">
|
||||
<div class="px-3 pb-2">
|
||||
<div class="relative">
|
||||
<i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs"></i>
|
||||
<input type="text" placeholder="搜索技能" class="w-full pl-8 pr-3 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm outline-none focus:border-emerald-500">
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-4 text-center text-gray-400 text-sm">
|
||||
未找到技能
|
||||
</div>
|
||||
<div class="border-t border-gray-100 mt-1">
|
||||
<button class="w-full flex items-center gap-2 px-4 py-2.5 hover:bg-gray-50 text-left text-sm text-gray-700">
|
||||
<i class="fas fa-file-import text-gray-500"></i>
|
||||
<span>导入技能</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Folder Selection -->
|
||||
<div class="relative" id="folderDropdown">
|
||||
<button onclick="toggleDropdown('folderDropdown')" class="tool-btn flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm text-gray-600 hover:text-gray-800 transition-colors">
|
||||
<i class="far fa-folder text-xs"></i>
|
||||
<span>Claw</span>
|
||||
<i class="fas fa-chevron-down text-xs ml-1"></i>
|
||||
</button>
|
||||
<!-- Folder Menu -->
|
||||
<div class="dropdown-menu absolute bottom-full right-0 mb-2 w-72 bg-white border border-gray-200 rounded-xl shadow-xl py-2 z-50">
|
||||
<div class="px-3 pb-2">
|
||||
<div class="relative">
|
||||
<i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs"></i>
|
||||
<input type="text" placeholder="搜索工作空间" class="w-full pl-8 pr-8 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm outline-none focus:border-emerald-500">
|
||||
<i class="fas fa-search absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="w-full flex items-center justify-between px-4 py-2.5 hover:bg-gray-50 text-left text-sm text-gray-700">
|
||||
<span>从空文件夹开始</span>
|
||||
</button>
|
||||
|
||||
<button class="w-full flex items-center gap-2 px-4 py-2.5 hover:bg-gray-50 text-left text-sm text-gray-700">
|
||||
<i class="far fa-folder-open text-gray-400"></i>
|
||||
<span>打开新文件夹</span>
|
||||
</button>
|
||||
|
||||
<div class="border-t border-gray-100 my-1"></div>
|
||||
|
||||
<button class="w-full flex items-center justify-between px-4 py-2.5 hover:bg-gray-50 text-left bg-gray-50">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-medium text-gray-900">Claw</span>
|
||||
<span class="text-xs text-gray-500 truncate max-w-[200px]">c:\Users\szend\WorkBudd...</span>
|
||||
</div>
|
||||
<i class="fas fa-check text-emerald-500 text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Send Button -->
|
||||
<button class="send-btn w-9 h-9 bg-gray-200 rounded-lg flex items-center justify-center text-gray-400 hover:bg-emerald-500 hover:text-white transition-all">
|
||||
<i class="fas fa-paper-plane text-sm"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
// Track active dropdown
|
||||
let activeDropdown = null;
|
||||
|
||||
function toggleDropdown(id) {
|
||||
const dropdown = document.getElementById(id);
|
||||
const menu = dropdown.querySelector('.dropdown-menu');
|
||||
|
||||
// Close if clicking same dropdown
|
||||
if (activeDropdown === id) {
|
||||
menu.classList.remove('active');
|
||||
activeDropdown = null;
|
||||
return;
|
||||
}
|
||||
|
||||
// Close all others
|
||||
document.querySelectorAll('.dropdown-menu').forEach(m => {
|
||||
m.classList.remove('active');
|
||||
});
|
||||
|
||||
// Open this one
|
||||
menu.classList.add('active');
|
||||
activeDropdown = id;
|
||||
|
||||
// Prevent event bubbling
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
// Close dropdowns when clicking outside
|
||||
document.addEventListener('click', function(e) {
|
||||
if (!e.target.closest('.relative')) {
|
||||
document.querySelectorAll('.dropdown-menu').forEach(m => {
|
||||
m.classList.remove('active');
|
||||
});
|
||||
activeDropdown = null;
|
||||
}
|
||||
});
|
||||
|
||||
// Auto-resize textarea
|
||||
const textarea = document.querySelector('textarea');
|
||||
textarea.addEventListener('input', function() {
|
||||
this.style.height = 'auto';
|
||||
this.style.height = Math.max(60, this.scrollHeight) + 'px';
|
||||
});
|
||||
|
||||
// Model selection interaction
|
||||
document.querySelectorAll('.model-item').forEach(item => {
|
||||
item.addEventListener('click', function() {
|
||||
// Remove check from all
|
||||
document.querySelectorAll('.model-item .fa-check').forEach(check => {
|
||||
check.remove();
|
||||
});
|
||||
// Add check to clicked
|
||||
const check = document.createElement('i');
|
||||
check.className = 'fas fa-check text-emerald-500 text-xs ml-auto';
|
||||
this.appendChild(check);
|
||||
});
|
||||
});
|
||||
|
||||
// Prevent dropdown close when clicking inside
|
||||
document.querySelectorAll('.dropdown-menu').forEach(menu => {
|
||||
menu.addEventListener('click', function(e) {
|
||||
if (e.target.tagName !== 'BUTTON' && !e.target.closest('button')) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
477
docs/archive/openclaw-legacy/workbuddy界面/专家.html
Normal file
477
docs/archive/openclaw-legacy/workbuddy界面/专家.html
Normal 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>
|
||||
537
docs/archive/openclaw-legacy/workbuddy界面/技能.html
Normal file
537
docs/archive/openclaw-legacy/workbuddy界面/技能.html
Normal file
@@ -0,0 +1,537 @@
|
||||
<!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; }
|
||||
|
||||
/* Skill card animations */
|
||||
.skill-card {
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
.skill-card:hover {
|
||||
border-color: #d1d5db;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Add button animation */
|
||||
.add-btn {
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
.add-btn:hover {
|
||||
border-color: #10b981;
|
||||
color: #10b981;
|
||||
background-color: #ecfdf5;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.add-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
.add-btn.added {
|
||||
background-color: #10b981;
|
||||
border-color: #10b981;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Icon container */
|
||||
.skill-icon {
|
||||
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.skill-card:hover .skill-icon {
|
||||
background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
|
||||
}
|
||||
|
||||
/* Sidebar active state */
|
||||
.sidebar-item.active {
|
||||
background-color: #f3f4f6;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Search input focus */
|
||||
.search-input:focus {
|
||||
border-color: #10b981;
|
||||
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
/* Import button hover */
|
||||
.import-btn {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.import-btn:hover {
|
||||
background-color: #f3f4f6;
|
||||
border-color: #d1d5db;
|
||||
}
|
||||
</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 flex items-center gap-3 px-3 py-2 text-gray-600 rounded-lg transition-colors">
|
||||
<i class="fas fa-user-tie text-gray-400 w-5"></i>
|
||||
<span>专家</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-wand-magic-sparkles 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-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-white">
|
||||
<div class="max-w-6xl mx-auto px-8 py-8">
|
||||
|
||||
<!-- Header Section -->
|
||||
<div class="flex items-start justify-between mb-8">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-1">技能</h1>
|
||||
<p class="text-gray-500 text-base">赋予 WorkBuddy 更强大的能力</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<!-- Search -->
|
||||
<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" id="skillSearch" placeholder="搜索技能"
|
||||
class="search-input w-64 pl-9 pr-4 py-2 bg-white border border-gray-300 rounded-lg text-sm outline-none transition-all">
|
||||
</div>
|
||||
|
||||
<!-- Import Button -->
|
||||
<button class="import-btn flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50" onclick="importSkill()">
|
||||
<i class="fas fa-plus text-xs"></i>
|
||||
导入技能
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Installed Count -->
|
||||
<div class="mb-6">
|
||||
<span class="text-gray-900 font-medium">已安装</span>
|
||||
<span class="ml-2 px-2 py-0.5 bg-gray-100 text-gray-600 text-xs rounded-full" id="installedCount">0</span>
|
||||
</div>
|
||||
|
||||
<!-- Recommended Section -->
|
||||
<div>
|
||||
<h2 class="text-base font-semibold text-gray-900 mb-4">推荐</h2>
|
||||
|
||||
<!-- Skills Grid -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4" id="skillsGrid">
|
||||
|
||||
<!-- Skill Card 1 -->
|
||||
<div class="skill-card bg-white rounded-xl p-4 flex items-center gap-4 group cursor-pointer" data-name="find-skills">
|
||||
<div class="skill-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-hammer text-gray-600 text-lg"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-semibold text-gray-900 text-sm mb-0.5">find-skills</h3>
|
||||
<p class="text-gray-500 text-sm truncate">Helps users discover and install agent skills whe...</p>
|
||||
</div>
|
||||
<button class="add-btn w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-emerald-600 flex-shrink-0" onclick="toggleSkill(this, 'find-skills')">
|
||||
<i class="fas fa-plus text-sm"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Skill Card 2 -->
|
||||
<div class="skill-card bg-white rounded-xl p-4 flex items-center gap-4 group cursor-pointer" data-name="workbuddy-channel-setup">
|
||||
<div class="skill-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-hammer text-gray-600 text-lg"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-semibold text-gray-900 text-sm mb-0.5">workbuddy-channel-setup</h3>
|
||||
<p class="text-gray-500 text-sm truncate">Automate WorkBuddy channel integration setu...</p>
|
||||
</div>
|
||||
<button class="add-btn w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-emerald-600 flex-shrink-0" onclick="toggleSkill(this, 'workbuddy-channel-setup')">
|
||||
<i class="fas fa-plus text-sm"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Skill Card 3 -->
|
||||
<div class="skill-card bg-white rounded-xl p-4 flex items-center gap-4 group cursor-pointer" data-name="FBS-BookWriter">
|
||||
<div class="skill-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-hammer text-gray-600 text-lg"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-semibold text-gray-900 text-sm mb-0.5">FBS-BookWriter</h3>
|
||||
<p class="text-gray-500 text-sm truncate">福帮手出品 | 人机协同写书。联网校验-千书千面...</p>
|
||||
</div>
|
||||
<button class="add-btn w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-emerald-600 flex-shrink-0" onclick="toggleSkill(this, 'FBS-BookWriter')">
|
||||
<i class="fas fa-plus text-sm"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Skill Card 4 -->
|
||||
<div class="skill-card bg-white rounded-xl p-4 flex items-center gap-4 group cursor-pointer" data-name="xiaohongshu">
|
||||
<div class="skill-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-hammer text-gray-600 text-lg"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-semibold text-gray-900 text-sm mb-0.5">xiaohongshu</h3>
|
||||
<p class="text-gray-500 text-sm truncate">小红书（RedNote）内容工具。使用场景：搜索...</p>
|
||||
</div>
|
||||
<button class="add-btn w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-emerald-600 flex-shrink-0" onclick="toggleSkill(this, 'xiaohongshu')">
|
||||
<i class="fas fa-plus text-sm"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Skill Card 5 -->
|
||||
<div class="skill-card bg-white rounded-xl p-4 flex items-center gap-4 group cursor-pointer" data-name="agentmail">
|
||||
<div class="skill-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-hammer text-gray-600 text-lg"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-semibold text-gray-900 text-sm mb-0.5">agentmail</h3>
|
||||
<p class="text-gray-500 text-sm truncate">Email inbox for AI agents. Check messages, sen...</p>
|
||||
</div>
|
||||
<button class="add-btn w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-emerald-600 flex-shrink-0" onclick="toggleSkill(this, 'agentmail')">
|
||||
<i class="fas fa-plus text-sm"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Skill Card 6 -->
|
||||
<div class="skill-card bg-white rounded-xl p-4 flex items-center gap-4 group cursor-pointer" data-name="apple-notes">
|
||||
<div class="skill-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-hammer text-gray-600 text-lg"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-semibold text-gray-900 text-sm mb-0.5">apple-notes</h3>
|
||||
<p class="text-gray-500 text-sm truncate">Manage Apple Notes via the `memo` CLI on ma...</p>
|
||||
</div>
|
||||
<button class="add-btn w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-emerald-600 flex-shrink-0" onclick="toggleSkill(this, 'apple-notes')">
|
||||
<i class="fas fa-plus text-sm"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Skill Card 7 -->
|
||||
<div class="skill-card bg-white rounded-xl p-4 flex items-center gap-4 group cursor-pointer" data-name="apple-reminders">
|
||||
<div class="skill-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-hammer text-gray-600 text-lg"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-semibold text-gray-900 text-sm mb-0.5">apple-reminders</h3>
|
||||
<p class="text-gray-500 text-sm truncate">Manage Apple Reminders via the `remindctl` CL...</p>
|
||||
</div>
|
||||
<button class="add-btn w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-emerald-600 flex-shrink-0" onclick="toggleSkill(this, 'apple-reminders')">
|
||||
<i class="fas fa-plus text-sm"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Skill Card 8 -->
|
||||
<div class="skill-card bg-white rounded-xl p-4 flex items-center gap-4 group cursor-pointer" data-name="blogwatcher">
|
||||
<div class="skill-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-hammer text-gray-600 text-lg"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-semibold text-gray-900 text-sm mb-0.5">blogwatcher</h3>
|
||||
<p class="text-gray-500 text-sm truncate">Monitor blogs and RSS/Atom feeds for updates...</p>
|
||||
</div>
|
||||
<button class="add-btn w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-emerald-600 flex-shrink-0" onclick="toggleSkill(this, 'blogwatcher')">
|
||||
<i class="fas fa-plus text-sm"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Skill Card 9 -->
|
||||
<div class="skill-card bg-white rounded-xl p-4 flex items-center gap-4 group cursor-pointer" data-name="cos-vectors">
|
||||
<div class="skill-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-hammer text-gray-600 text-lg"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-semibold text-gray-900 text-sm mb-0.5">cos-vectors</h3>
|
||||
<p class="text-gray-500 text-sm truncate">Manage Tencent Cloud COS vector buckets via ...</p>
|
||||
</div>
|
||||
<button class="add-btn w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-emerald-600 flex-shrink-0" onclick="toggleSkill(this, 'cos-vectors')">
|
||||
<i class="fas fa-plus text-sm"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Skill Card 10 -->
|
||||
<div class="skill-card bg-white rounded-xl p-4 flex items-center gap-4 group cursor-pointer" data-name="gifgrep">
|
||||
<div class="skill-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-hammer text-gray-600 text-lg"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-semibold text-gray-900 text-sm mb-0.5">gifgrep</h3>
|
||||
<p class="text-gray-500 text-sm truncate">Search GIF providers with CLI/TUI, download re...</p>
|
||||
</div>
|
||||
<button class="add-btn w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-emerald-600 flex-shrink-0" onclick="toggleSkill(this, 'gifgrep')">
|
||||
<i class="fas fa-plus text-sm"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Skill Card 11 -->
|
||||
<div class="skill-card bg-white rounded-xl p-4 flex items-center gap-4 group cursor-pointer" data-name="github">
|
||||
<div class="skill-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-hammer text-gray-600 text-lg"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-semibold text-gray-900 text-sm mb-0.5">github</h3>
|
||||
<p class="text-gray-500 text-sm truncate">Interact with GitHub using the `gh` CLI. Use `gh ...</p>
|
||||
</div>
|
||||
<button class="add-btn w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-emerald-600 flex-shrink-0" onclick="toggleSkill(this, 'github')">
|
||||
<i class="fas fa-plus text-sm"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Skill Card 12 -->
|
||||
<div class="skill-card bg-white rounded-xl p-4 flex items-center gap-4 group cursor-pointer" data-name="gog">
|
||||
<div class="skill-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-hammer text-gray-600 text-lg"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-semibold text-gray-900 text-sm mb-0.5">gog</h3>
|
||||
<p class="text-gray-500 text-sm truncate">Google Workspace CLI for Gmail, Calendar, Driv...</p>
|
||||
</div>
|
||||
<button class="add-btn w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-emerald-600 flex-shrink-0" onclick="toggleSkill(this, 'gog')">
|
||||
<i class="fas fa-plus text-sm"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Skill Card 13 -->
|
||||
<div class="skill-card bg-white rounded-xl p-4 flex items-center gap-4 group cursor-pointer" data-name="healthcheck">
|
||||
<div class="skill-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-hammer text-gray-600 text-lg"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-semibold text-gray-900 text-sm mb-0.5">healthcheck</h3>
|
||||
<p class="text-gray-500 text-sm truncate">Track water and sleep with JSON file storage.</p>
|
||||
</div>
|
||||
<button class="add-btn w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-emerald-600 flex-shrink-0" onclick="toggleSkill(this, 'healthcheck')">
|
||||
<i class="fas fa-plus text-sm"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Skill Card 14 -->
|
||||
<div class="skill-card bg-white rounded-xl p-4 flex items-center gap-4 group cursor-pointer" data-name="himalaya">
|
||||
<div class="skill-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-hammer text-gray-600 text-lg"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-semibold text-gray-900 text-sm mb-0.5">himalaya</h3>
|
||||
<p class="text-gray-500 text-sm truncate">CLI to manage emails via IMAP/SMTP. Use `him...</p>
|
||||
</div>
|
||||
<button class="add-btn w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-emerald-600 flex-shrink-0" onclick="toggleSkill(this, 'himalaya')">
|
||||
<i class="fas fa-plus text-sm"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State (Hidden by default) -->
|
||||
<div id="emptyState" class="hidden mt-12 text-center py-12">
|
||||
<div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<i class="fas fa-search text-gray-400 text-2xl"></i>
|
||||
</div>
|
||||
<p class="text-gray-500">未找到相关技能</p>
|
||||
</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>
|
||||
let installedCount = 0;
|
||||
const installedSkills = new Set();
|
||||
|
||||
// Toggle skill installation
|
||||
function toggleSkill(btn, skillName) {
|
||||
const icon = btn.querySelector('i');
|
||||
|
||||
if (installedSkills.has(skillName)) {
|
||||
// Uninstall
|
||||
installedSkills.delete(skillName);
|
||||
btn.classList.remove('added');
|
||||
icon.classList.remove('fa-check');
|
||||
icon.classList.add('fa-plus');
|
||||
installedCount--;
|
||||
showToast(`已卸载 ${skillName}`);
|
||||
} else {
|
||||
// Install
|
||||
installedSkills.add(skillName);
|
||||
btn.classList.add('added');
|
||||
icon.classList.remove('fa-plus');
|
||||
icon.classList.add('fa-check');
|
||||
installedCount++;
|
||||
showToast(`已安装 ${skillName}`);
|
||||
}
|
||||
|
||||
document.getElementById('installedCount').textContent = installedCount;
|
||||
}
|
||||
|
||||
// Import skill action
|
||||
function importSkill() {
|
||||
showToast('请选择要导入的技能文件');
|
||||
}
|
||||
|
||||
// Show toast notification
|
||||
function showToast(message) {
|
||||
const toast = document.getElementById('toast');
|
||||
const toastMessage = document.getElementById('toastMessage');
|
||||
|
||||
toastMessage.textContent = message;
|
||||
toast.classList.remove('translate-y-20', 'opacity-0');
|
||||
|
||||
setTimeout(() => {
|
||||
toast.classList.add('translate-y-20', 'opacity-0');
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
// Search functionality
|
||||
document.getElementById('skillSearch').addEventListener('input', function(e) {
|
||||
const searchTerm = e.target.value.toLowerCase();
|
||||
const cards = document.querySelectorAll('.skill-card');
|
||||
let visibleCount = 0;
|
||||
|
||||
cards.forEach(card => {
|
||||
const name = card.getAttribute('data-name').toLowerCase();
|
||||
const desc = card.querySelector('p').textContent.toLowerCase();
|
||||
|
||||
if (name.includes(searchTerm) || desc.includes(searchTerm)) {
|
||||
card.style.display = 'flex';
|
||||
visibleCount++;
|
||||
} else {
|
||||
card.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Show/hide empty state
|
||||
const emptyState = document.getElementById('emptyState');
|
||||
if (visibleCount === 0) {
|
||||
emptyState.classList.remove('hidden');
|
||||
} else {
|
||||
emptyState.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
// Add stagger animation on load
|
||||
window.addEventListener('load', () => {
|
||||
const cards = document.querySelectorAll('.skill-card');
|
||||
cards.forEach((card, index) => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(10px)';
|
||||
setTimeout(() => {
|
||||
card.style.transition = 'all 0.3s ease';
|
||||
card.style.opacity = '1';
|
||||
card.style.transform = 'translateY(0)';
|
||||
}, index * 30);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
489
docs/archive/openclaw-legacy/workbuddy界面/新建任务.html
Normal file
489
docs/archive/openclaw-legacy/workbuddy界面/新建任务.html
Normal file
@@ -0,0 +1,489 @@
|
||||
<!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, "Helvetica Neue", Arial, 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;
|
||||
}
|
||||
|
||||
/* Dropdown animations */
|
||||
.dropdown-enter {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(-10px);
|
||||
}
|
||||
.dropdown-enter-active {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
transition: opacity 0.1s ease-out, transform 0.1s ease-out;
|
||||
}
|
||||
|
||||
/* Gradient text effect for title */
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Custom shadow for cards */
|
||||
.card-shadow {
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
/* Input area focus ring */
|
||||
.input-focus-ring:focus-within {
|
||||
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
|
||||
border-color: #6366f1;
|
||||
}
|
||||
|
||||
/* Skill tag hover effect */
|
||||
.skill-tag {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.skill-tag:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* Robot animation */
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
.robot-float {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50 h-screen flex text-gray-800">
|
||||
|
||||
<!-- Left Sidebar -->
|
||||
<aside class="w-64 bg-white border-r border-gray-200 flex flex-col h-full">
|
||||
<!-- App Header -->
|
||||
<div class="h-14 flex items-center px-4 border-b border-gray-100">
|
||||
<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">
|
||||
<i class="fas fa-code"></i>
|
||||
</div>
|
||||
<span class="font-bold text-lg text-gray-800">CodeBuddy</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Menu Items -->
|
||||
<nav class="flex-1 py-4 px-3 space-y-1 overflow-y-auto">
|
||||
<!-- Search -->
|
||||
<div class="px-2 mb-4">
|
||||
<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-4 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-colors">
|
||||
<button class="absolute right-2 top-1/2 -translate-y-1/2 p-1 hover:bg-gray-200 rounded text-gray-400">
|
||||
<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.5 bg-gray-100 hover:bg-gray-200 rounded-lg text-gray-700 font-medium transition-colors mb-2">
|
||||
<i class="far fa-check-square text-emerald-600"></i>
|
||||
<span>新建任务</span>
|
||||
</button>
|
||||
|
||||
<!-- Nav Items -->
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-600 hover:bg-gray-50 rounded-lg transition-colors group">
|
||||
<i class="fas fa-robot text-gray-400 group-hover:text-emerald-600 w-5"></i>
|
||||
<span>Claw</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-600 hover:bg-gray-50 rounded-lg transition-colors group">
|
||||
<i class="fas fa-user-tie text-gray-400 group-hover:text-emerald-600 w-5"></i>
|
||||
<span>专家</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-600 hover:bg-gray-50 rounded-lg transition-colors group">
|
||||
<i class="fas fa-wand-magic-sparkles text-gray-400 group-hover:text-emerald-600 w-5"></i>
|
||||
<span>技能</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-600 hover:bg-gray-50 rounded-lg transition-colors group">
|
||||
<i class="fas fa-puzzle-piece text-gray-400 group-hover:text-emerald-600 w-5"></i>
|
||||
<span>插件</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-600 hover:bg-gray-50 rounded-lg transition-colors group">
|
||||
<i class="far fa-clock text-gray-400 group-hover:text-emerald-600 w-5"></i>
|
||||
<span>自动化</span>
|
||||
</a>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div class="mt-8 px-4 text-center">
|
||||
<p class="text-gray-500 text-sm mb-1">暂无任务</p>
|
||||
<p class="text-gray-400 text-xs">点击上方按钮开始新任务</p>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- User Profile -->
|
||||
<div class="p-4 border-t border-gray-200">
|
||||
<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">
|
||||
<i class="fas fa-robot text-sm"></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 relative">
|
||||
<!-- Top Bar -->
|
||||
<header class="h-14 bg-white border-b border-gray-200 flex items-center justify-between px-6">
|
||||
<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>
|
||||
<button class="ml-2 p-1.5 hover:bg-gray-100 rounded-lg text-gray-400">
|
||||
<i class="far fa-clone text-sm"></i>
|
||||
</button>
|
||||
</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-gray-100 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-white">
|
||||
<div class="max-w-5xl mx-auto px-8 py-12">
|
||||
|
||||
<!-- Hero Section -->
|
||||
<div class="text-center mb-12">
|
||||
<!-- Robot Mascot -->
|
||||
<div class="robot-float mb-6 inline-block">
|
||||
<div class="w-24 h-24 mx-auto relative">
|
||||
<img src="https://api.dicebear.com/7.x/bottts/svg?seed=claw&backgroundColor=ffdfbf"
|
||||
alt="Claw Robot"
|
||||
class="w-full h-full drop-shadow-2xl">
|
||||
<!-- Decorative elements -->
|
||||
<div class="absolute -top-2 -right-2 w-6 h-6 bg-red-500 rounded-full flex items-center justify-center text-white text-xs animate-pulse">
|
||||
<i class="fas fa-code"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<h1 class="text-4xl font-bold text-gray-800 mb-2 tracking-tight">
|
||||
Claw <span class="text-red-500 mx-1"><i class="fas fa-claw"></i></span> Your Ideas
|
||||
</h1>
|
||||
<h2 class="text-4xl font-bold text-gray-800 mb-4 tracking-tight">
|
||||
Into Reality
|
||||
<span class="inline-block ml-1 text-emerald-400 animate-pulse">*</span>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<!-- Feature Cards -->
|
||||
<div class="grid grid-cols-2 gap-6 mb-10 max-w-3xl mx-auto">
|
||||
<!-- Code Development Card -->
|
||||
<div class="bg-gray-50 rounded-2xl p-6 card-shadow border border-gray-100 relative overflow-hidden group hover:border-gray-200 transition-all">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 bg-gray-400 text-white text-xs px-4 py-1 rounded-b-lg font-medium">
|
||||
代码开发
|
||||
</div>
|
||||
<div class="mt-4 text-center">
|
||||
<h3 class="text-gray-500 font-medium mb-2">面向代码与工程交付</h3>
|
||||
</div>
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-gray-100/50 opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||
</div>
|
||||
|
||||
<!-- Daily Office Card -->
|
||||
<div class="bg-gray-50 rounded-2xl p-6 card-shadow border border-gray-100 relative overflow-hidden group hover:border-indigo-200 transition-all">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 bg-indigo-500 text-white text-xs px-4 py-1 rounded-b-lg font-medium shadow-lg shadow-indigo-200">
|
||||
日常办公
|
||||
</div>
|
||||
<div class="mt-4 text-center">
|
||||
<h3 class="text-indigo-600 font-medium mb-3">面向日常工作与知识生产</h3>
|
||||
<p class="text-gray-500 text-sm leading-relaxed px-2">
|
||||
将整理、写作、规划与跟进交给 AI 智能体推进，并获得结构化、可落地的工作成果。
|
||||
</p>
|
||||
</div>
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-indigo-50/30 opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Input Area -->
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="bg-white border border-gray-200 rounded-2xl input-focus-ring transition-all">
|
||||
<!-- Input Toolbar -->
|
||||
<div class="flex items-center gap-2 px-4 py-3 border-b border-gray-100">
|
||||
<button class="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-gray-100 text-gray-600 transition-colors" title="@提及">
|
||||
<i class="fas fa-at"></i>
|
||||
</button>
|
||||
<button class="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-gray-100 text-gray-600 transition-colors" title="附件">
|
||||
<i class="fas fa-paperclip"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Text Input -->
|
||||
<div class="px-4 py-3">
|
||||
<textarea
|
||||
placeholder="输入消息..."
|
||||
class="w-full h-24 resize-none outline-none text-gray-700 placeholder-gray-400 text-base leading-relaxed bg-transparent"
|
||||
style="min-height: 80px;"></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Toolbar -->
|
||||
<div class="px-4 py-3 flex items-center justify-between border-t border-gray-100">
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Craft Dropdown -->
|
||||
<div class="relative" id="craftDropdown">
|
||||
<button onclick="toggleDropdown('craftDropdown')" class="flex items-center gap-2 px-3 py-1.5 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium text-gray-700 transition-colors">
|
||||
<i class="far fa-window-maximize text-xs"></i>
|
||||
<span>Craft</span>
|
||||
<i class="fas fa-chevron-down text-xs ml-1"></i>
|
||||
</button>
|
||||
<!-- Dropdown Menu -->
|
||||
<div class="hidden absolute bottom-full left-0 mb-2 w-48 bg-white border border-gray-200 rounded-xl shadow-xl py-1 z-50">
|
||||
<button class="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 text-left text-sm">
|
||||
<i class="far fa-window-maximize text-gray-400"></i>
|
||||
<span>Craft</span>
|
||||
<i class="fas fa-check text-emerald-500 ml-auto text-xs"></i>
|
||||
</button>
|
||||
<button class="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 text-left text-sm">
|
||||
<i class="far fa-calendar-check text-gray-400"></i>
|
||||
<span>Plan</span>
|
||||
</button>
|
||||
<button class="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 text-left text-sm">
|
||||
<i class="far fa-comment-dots text-gray-400"></i>
|
||||
<span>Ask</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Auto Dropdown -->
|
||||
<div class="relative" id="autoDropdown">
|
||||
<button onclick="toggleDropdown('autoDropdown')" class="flex items-center gap-2 px-3 py-1.5 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium text-gray-700 transition-colors">
|
||||
<i class="fas fa-layer-group text-xs"></i>
|
||||
<span>Auto</span>
|
||||
<i class="fas fa-chevron-down text-xs ml-1"></i>
|
||||
</button>
|
||||
<!-- Model Selection Dropdown -->
|
||||
<div class="hidden absolute bottom-full left-0 mb-2 w-64 bg-white border border-gray-200 rounded-xl shadow-xl py-2 z-50">
|
||||
<div class="px-3 py-1.5 text-xs text-gray-400 font-medium uppercase tracking-wider">内置模型</div>
|
||||
|
||||
<button class="w-full flex items-center gap-3 px-4 py-2 hover:bg-gray-50 text-left">
|
||||
<i class="fas fa-layer-group text-gray-600"></i>
|
||||
<span class="flex-1 text-sm">Auto</span>
|
||||
<i class="fas fa-check text-emerald-500 text-xs"></i>
|
||||
</button>
|
||||
|
||||
<button class="w-full flex items-center gap-3 px-4 py-2 hover:bg-gray-50 text-left">
|
||||
<i class="fas fa-wave-square text-pink-500"></i>
|
||||
<span class="text-sm">MiniMax-M2.5</span>
|
||||
<i class="fas fa-snowflake text-gray-300 text-xs ml-1"></i>
|
||||
</button>
|
||||
|
||||
<button class="w-full flex items-center gap-3 px-4 py-2 hover:bg-gray-50 text-left">
|
||||
<div class="w-4 h-4 bg-purple-600 rounded flex items-center justify-center text-white text-xs font-bold">Z</div>
|
||||
<span class="text-sm">GLM-5.0</span>
|
||||
<i class="fas fa-snowflake text-gray-300 text-xs ml-1"></i>
|
||||
</button>
|
||||
|
||||
<button class="w-full flex items-center gap-3 px-4 py-2 hover:bg-gray-50 text-left">
|
||||
<div class="w-4 h-4 bg-purple-500 rounded flex items-center justify-center text-white text-xs font-bold">Z</div>
|
||||
<span class="text-sm">GLM-4.7</span>
|
||||
<i class="fas fa-snowflake text-gray-300 text-xs ml-1"></i>
|
||||
</button>
|
||||
|
||||
<button class="w-full flex items-center gap-3 px-4 py-2 hover:bg-gray-50 text-left">
|
||||
<div class="w-4 h-4 bg-gray-800 rounded flex items-center justify-center text-white text-xs font-bold">K</div>
|
||||
<span class="text-sm">Kimi-K2.5</span>
|
||||
<i class="fas fa-snowflake text-gray-300 text-xs ml-1"></i>
|
||||
</button>
|
||||
|
||||
<button class="w-full flex items-center gap-3 px-4 py-2 hover:bg-gray-50 text-left">
|
||||
<div class="w-4 h-4 bg-gray-700 rounded flex items-center justify-center text-white text-xs font-bold">K</div>
|
||||
<span class="text-sm">Kimi-K2-Thinking</span>
|
||||
<i class="fas fa-snowflake text-gray-300 text-xs ml-1"></i>
|
||||
</button>
|
||||
|
||||
<button class="w-full flex items-center gap-3 px-4 py-2 hover:bg-gray-50 text-left">
|
||||
<i class="fas fa-fish text-blue-500"></i>
|
||||
<span class="text-sm">DeepSeek-V3.2</span>
|
||||
<i class="fas fa-snowflake text-gray-300 text-xs ml-1"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Skills Button -->
|
||||
<button class="flex items-center gap-2 px-3 py-1.5 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium text-gray-700 transition-colors">
|
||||
<i class="fas fa-wand-magic-sparkles text-xs"></i>
|
||||
<span>Skills</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Folder Selection -->
|
||||
<div class="relative" id="folderDropdown">
|
||||
<button onclick="toggleDropdown('folderDropdown')" class="flex items-center gap-2 px-3 py-1.5 hover:bg-gray-100 rounded-lg text-sm text-gray-600 transition-colors border border-gray-200">
|
||||
<i class="fas fa-desktop text-xs"></i>
|
||||
<span>选择文件夹</span>
|
||||
<i class="fas fa-chevron-down text-xs"></i>
|
||||
</button>
|
||||
<!-- Folder Menu -->
|
||||
<div class="hidden absolute bottom-full right-0 mb-2 w-72 bg-white border border-gray-200 rounded-xl shadow-xl py-2 z-50">
|
||||
<div class="px-3 py-2 border-b border-gray-100">
|
||||
<div class="relative">
|
||||
<i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs"></i>
|
||||
<input type="text" placeholder="搜索工作空间" class="w-full pl-8 pr-3 py-1.5 bg-gray-50 rounded-lg text-sm outline-none">
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 text-left text-sm">
|
||||
<span class="flex-1">从空文件夹开始</span>
|
||||
<i class="fas fa-check text-emerald-500 text-xs"></i>
|
||||
</button>
|
||||
<button class="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 text-left text-sm text-gray-600">
|
||||
<i class="far fa-folder-open"></i>
|
||||
<span>打开新文件夹</span>
|
||||
</button>
|
||||
<div class="px-4 py-2 text-xs text-gray-400 font-medium">Claw</div>
|
||||
<button class="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 text-left text-sm pl-8 text-gray-600">
|
||||
<span class="truncate">c:\Users\szend\WorkBuddy\Claw</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Send Button -->
|
||||
<button class="w-9 h-9 bg-gray-200 hover:bg-emerald-500 hover:text-white rounded-lg flex items-center justify-center text-gray-400 transition-all transform hover:scale-105">
|
||||
<i class="fas fa-paper-plane text-sm"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Skill Tags -->
|
||||
<div class="mt-6 flex flex-wrap justify-center gap-3">
|
||||
<button class="skill-tag px-4 py-2 bg-white border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 hover:text-gray-800">
|
||||
文档处理
|
||||
</button>
|
||||
<button class="skill-tag px-4 py-2 bg-white border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 hover:text-gray-800">
|
||||
视频生成
|
||||
</button>
|
||||
<button class="skill-tag px-4 py-2 bg-white border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 hover:text-gray-800">
|
||||
深度研究
|
||||
</button>
|
||||
<button class="skill-tag px-4 py-2 bg-white border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 hover:text-gray-800">
|
||||
幻灯片
|
||||
</button>
|
||||
<button class="skill-tag px-4 py-2 bg-white border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 hover:text-gray-800">
|
||||
数据分析
|
||||
</button>
|
||||
<button class="skill-tag px-4 py-2 bg-white border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 hover:text-gray-800">
|
||||
数据可视化
|
||||
</button>
|
||||
<button class="skill-tag px-4 py-2 bg-white border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 hover:text-gray-800">
|
||||
金融服务
|
||||
</button>
|
||||
<button class="skill-tag px-4 py-2 bg-white border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 hover:text-gray-800">
|
||||
产品管理
|
||||
</button>
|
||||
<button class="skill-tag px-4 py-2 bg-white border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 hover:text-gray-800">
|
||||
设计
|
||||
</button>
|
||||
<button class="skill-tag px-4 py-2 bg-white border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 hover:text-gray-800">
|
||||
邮件编辑
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
// Dropdown toggle functionality
|
||||
function toggleDropdown(id) {
|
||||
const dropdown = document.getElementById(id).querySelector('div[class*="hidden"], div[class*="block"]');
|
||||
const allDropdowns = document.querySelectorAll('[id$="Dropdown"] > div');
|
||||
|
||||
// Close all other dropdowns
|
||||
allDropdowns.forEach(d => {
|
||||
if (d !== dropdown) {
|
||||
d.classList.add('hidden');
|
||||
d.classList.remove('block');
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle current
|
||||
if (dropdown.classList.contains('hidden')) {
|
||||
dropdown.classList.remove('hidden');
|
||||
dropdown.classList.add('block');
|
||||
dropdown.classList.add('dropdown-enter');
|
||||
setTimeout(() => {
|
||||
dropdown.classList.add('dropdown-enter-active');
|
||||
dropdown.classList.remove('dropdown-enter');
|
||||
}, 10);
|
||||
} else {
|
||||
dropdown.classList.add('hidden');
|
||||
dropdown.classList.remove('block');
|
||||
}
|
||||
}
|
||||
|
||||
// Close dropdowns when clicking outside
|
||||
document.addEventListener('click', function(e) {
|
||||
if (!e.target.closest('[id$="Dropdown"]')) {
|
||||
document.querySelectorAll('[id$="Dropdown"] > div').forEach(d => {
|
||||
d.classList.add('hidden');
|
||||
d.classList.remove('block');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Auto-resize textarea
|
||||
const textarea = document.querySelector('textarea');
|
||||
textarea.addEventListener('input', function() {
|
||||
this.style.height = 'auto';
|
||||
this.style.height = Math.max(80, this.scrollHeight) + 'px';
|
||||
});
|
||||
|
||||
// Skill tag click effect
|
||||
document.querySelectorAll('.skill-tag').forEach(tag => {
|
||||
tag.addEventListener('click', function() {
|
||||
this.classList.toggle('bg-emerald-50');
|
||||
this.classList.toggle('border-emerald-200');
|
||||
this.classList.toggle('text-emerald-700');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
366
docs/archive/openclaw-legacy/workbuddy界面/自动化.html
Normal file
366
docs/archive/openclaw-legacy/workbuddy界面/自动化.html
Normal file
@@ -0,0 +1,366 @@
|
||||
<!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; }
|
||||
|
||||
/* Template card animations */
|
||||
.template-card {
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
.template-card:hover {
|
||||
border-color: #d1d5db;
|
||||
background-color: #fafafa;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* Icon container */
|
||||
.template-icon {
|
||||
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.template-card:hover .template-icon {
|
||||
background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Beta tag */
|
||||
.beta-tag {
|
||||
background-color: #6b7280;
|
||||
color: white;
|
||||
font-size: 0.75rem;
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
/* Sidebar active state */
|
||||
.sidebar-item.active {
|
||||
background-color: #f3f4f6;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Button hover effects */
|
||||
.btn-primary {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: #f3f4f6;
|
||||
border-color: #d1d5db;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background-color: #f9fafb;
|
||||
border-color: #d1d5db;
|
||||
}
|
||||
</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 flex items-center gap-3 px-3 py-2 text-gray-600 rounded-lg transition-colors">
|
||||
<i class="fas fa-user-tie 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-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 active flex items-center gap-3 px-3 py-2 text-gray-900 rounded-lg transition-colors">
|
||||
<i class="far fa-clock text-gray-700 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-white">
|
||||
<div class="max-w-6xl mx-auto px-8 py-8">
|
||||
|
||||
<!-- Header Section -->
|
||||
<div class="flex items-start justify-between mb-8">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<h1 class="text-2xl font-bold text-gray-900">自动化</h1>
|
||||
<span class="beta-tag">Beta</span>
|
||||
</div>
|
||||
<p class="text-gray-500 text-base">管理自动化任务并查看近期运行记录。</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="btn-secondary flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50" onclick="addAutomation()">
|
||||
<i class="fas fa-plus text-xs"></i>
|
||||
添加
|
||||
</button>
|
||||
<button class="btn-primary flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50" onclick="addFromTemplate()">
|
||||
从模版添加
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Templates Section -->
|
||||
<div>
|
||||
<h2 class="text-base font-medium text-gray-900 mb-4">从模版入手</h2>
|
||||
|
||||
<!-- Templates Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="templatesGrid">
|
||||
|
||||
<!-- Template 1: 每日 AI 新闻推送 -->
|
||||
<div class="template-card bg-white rounded-xl p-4 flex items-start gap-4 cursor-pointer group" onclick="useTemplate('每日 AI 新闻推送')">
|
||||
<div class="template-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i class="far fa-newspaper text-gray-600 text-xl"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0 pt-0.5">
|
||||
<h3 class="font-semibold text-gray-900 text-sm mb-1 group-hover:text-gray-700">每日 AI 新闻推送</h3>
|
||||
<p class="text-gray-500 text-sm leading-relaxed line-clamp-2">关注当天 AI 领域的重要动态，侧...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Template 2: 每日 5 个英语单词 -->
|
||||
<div class="template-card bg-white rounded-xl p-4 flex items-start gap-4 cursor-pointer group" onclick="useTemplate('每日 5 个英语单词')">
|
||||
<div class="template-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-gray-600 font-bold text-lg">文</span>
|
||||
<span class="text-gray-400 text-xs ml-0.5">A</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0 pt-0.5">
|
||||
<h3 class="font-semibold text-gray-900 text-sm mb-1 group-hover:text-gray-700">每日 5 个英语单词</h3>
|
||||
<p class="text-gray-500 text-sm leading-relaxed line-clamp-2">每天推荐 5 个高频实用英语单词...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Template 3: 每日儿童睡前故事 -->
|
||||
<div class="template-card bg-white rounded-xl p-4 flex items-start gap-4 cursor-pointer group" onclick="useTemplate('每日儿童睡前故事')">
|
||||
<div class="template-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i class="far fa-moon text-gray-600 text-xl"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0 pt-0.5">
|
||||
<h3 class="font-semibold text-gray-900 text-sm mb-1 group-hover:text-gray-700">每日儿童睡前故事</h3>
|
||||
<p class="text-gray-500 text-sm leading-relaxed line-clamp-2">生成 3-5 分钟可读的温和睡前故事...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Template 4: 每周工作周报 -->
|
||||
<div class="template-card bg-white rounded-xl p-4 flex items-start gap-4 cursor-pointer group" onclick="useTemplate('每周工作周报')">
|
||||
<div class="template-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-list-check text-gray-600 text-xl"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0 pt-0.5">
|
||||
<h3 class="font-semibold text-gray-900 text-sm mb-1 group-hover:text-gray-700">每周工作周报</h3>
|
||||
<p class="text-gray-500 text-sm leading-relaxed line-clamp-2">每周五汇总仓库 PR 与 Issue 进展...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Template 5: 经典电影推荐 -->
|
||||
<div class="template-card bg-white rounded-xl p-4 flex items-start gap-4 cursor-pointer group" onclick="useTemplate('经典电影推荐')">
|
||||
<div class="template-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-film text-gray-600 text-xl"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0 pt-0.5">
|
||||
<h3 class="font-semibold text-gray-900 text-sm mb-1 group-hover:text-gray-700">经典电影推荐</h3>
|
||||
<p class="text-gray-500 text-sm leading-relaxed line-clamp-2">推荐一部高分经典电影，简要介绍...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Template 6: 历史上的今天 -->
|
||||
<div class="template-card bg-white rounded-xl p-4 flex items-start gap-4 cursor-pointer group" onclick="useTemplate('历史上的今天')">
|
||||
<div class="template-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i class="far fa-calendar-alt text-gray-600 text-xl"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0 pt-0.5">
|
||||
<h3 class="font-semibold text-gray-900 text-sm mb-1 group-hover:text-gray-700">历史上的今天</h3>
|
||||
<p class="text-gray-500 text-sm leading-relaxed line-clamp-2">从科技、电影、音乐等领域挑选一...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Template 7: 每日一个为什么 -->
|
||||
<div class="template-card bg-white rounded-xl p-4 flex items-start gap-4 cursor-pointer group" onclick="useTemplate('每日一个为什么')">
|
||||
<div class="template-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i class="far fa-lightbulb text-gray-600 text-xl"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0 pt-0.5">
|
||||
<h3 class="font-semibold text-gray-900 text-sm mb-1 group-hover:text-gray-700">每日一个为什么</h3>
|
||||
<p class="text-gray-500 text-sm leading-relaxed line-clamp-2">每天抛出一个有趣问题，先提问再...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- My Automations Section (Empty State shown initially) -->
|
||||
<div class="mt-12 hidden" id="myAutomations">
|
||||
<h2 class="text-base font-medium text-gray-900 mb-4">我的自动化</h2>
|
||||
<div class="bg-gray-50 rounded-xl p-8 text-center border border-dashed border-gray-300">
|
||||
<p class="text-gray-500 text-sm">暂无自动化任务，从上方模版开始创建</p>
|
||||
</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>
|
||||
// Use template
|
||||
function useTemplate(templateName) {
|
||||
showToast(`已选择模版：${templateName}`);
|
||||
|
||||
// Show my automations section if hidden
|
||||
document.getElementById('myAutomations').classList.remove('hidden');
|
||||
}
|
||||
|
||||
// Add automation manually
|
||||
function addAutomation() {
|
||||
showToast('创建新的自动化任务');
|
||||
}
|
||||
|
||||
// Add from template
|
||||
function addFromTemplate() {
|
||||
// Scroll to templates section smoothly
|
||||
document.getElementById('templatesGrid').scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
showToast('请从下方选择模版');
|
||||
}
|
||||
|
||||
// Show toast notification
|
||||
function showToast(message) {
|
||||
const toast = document.getElementById('toast');
|
||||
const toastMessage = document.getElementById('toastMessage');
|
||||
|
||||
toastMessage.textContent = message;
|
||||
toast.classList.remove('translate-y-20', 'opacity-0');
|
||||
|
||||
setTimeout(() => {
|
||||
toast.classList.add('translate-y-20', 'opacity-0');
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
// Add stagger animation on load
|
||||
window.addEventListener('load', () => {
|
||||
const cards = document.querySelectorAll('.template-card');
|
||||
cards.forEach((card, index) => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(10px)';
|
||||
setTimeout(() => {
|
||||
card.style.transition = 'all 0.3s ease';
|
||||
card.style.opacity = '1';
|
||||
card.style.transform = 'translateY(0)';
|
||||
}, index * 50);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user