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>
|
||||
@@ -3,7 +3,7 @@
|
||||
> **分类**: 智能层
|
||||
> **优先级**: P0 - 决定性
|
||||
> **成熟度**: L4 - 生产
|
||||
> **最后更新**: 2026-03-16
|
||||
> **最后更新**: 2026-03-18
|
||||
|
||||
---
|
||||
|
||||
@@ -26,8 +26,11 @@ Agent 记忆系统实现了跨会话的持久化记忆，支持 5 种记忆类
|
||||
|------|------|------|
|
||||
| 核心实现 | `desktop/src/lib/agent-memory.ts` | 记忆管理 |
|
||||
| 提取器 | `desktop/src/lib/memory-extractor.ts` | 会话记忆提取 |
|
||||
| LLM 服务 | `desktop/src/lib/llm-service.ts` | LLM 智能提取适配器 |
|
||||
| 向量搜索 | `desktop/src/lib/vector-memory.ts` | 语义搜索 |
|
||||
| UI 组件 | `desktop/src/components/MemoryPanel.tsx` | 记忆面板 |
|
||||
| 图谱 Store | `desktop/src/store/memoryGraphStore.ts` | 记忆图谱状态 |
|
||||
| UI 组件 | `desktop/src/components/MemoryPanel.tsx` | 记忆列表面板 |
|
||||
| 图谱组件 | `desktop/src/components/MemoryGraph.tsx` | 记忆关系图谱 |
|
||||
|
||||
---
|
||||
|
||||
@@ -209,13 +212,19 @@ function prune(options: PruneOptions): number {
|
||||
|
||||
- [x] 5 种记忆类型
|
||||
- [x] 关键词提取
|
||||
- [x] **LLM 智能提取** (2026-03-18)
|
||||
- 通过 OpenFang Gateway 调用 LLM 进行语义分析
|
||||
- 自动识别事实、偏好、经验、任务等记忆类型
|
||||
- 智能评估记忆重要性 (1-10)
|
||||
- [x] 规则提取 (备用方案)
|
||||
- [x] 相关性排序
|
||||
- [x] 重要性评分
|
||||
- [x] 访问追踪
|
||||
- [x] 去重机制
|
||||
- [x] 清理功能
|
||||
- [x] Markdown 导出
|
||||
- [x] UI 面板
|
||||
- [x] UI 面板 (MemoryPanel)
|
||||
- [x] **记忆图谱可视化** (MemoryGraph)
|
||||
|
||||
### 5.2 测试覆盖
|
||||
|
||||
@@ -230,6 +239,15 @@ function prune(options: PruneOptions): number {
|
||||
| 大量记忆时检索变慢 | 中 | 待处理 | Q2 |
|
||||
| 向量搜索需要 OpenViking | 低 | 可选 | - |
|
||||
|
||||
### 5.4 历史问题修复
|
||||
|
||||
| 问题 | 原因 | 解决方案 | 日期 |
|
||||
|------|------|---------|------|
|
||||
| Memory tab 为空 | `useLLM: false` 默认禁用 LLM 提取 | 启用 LLM 提取，降低阈值到 2 条消息 | 2026-03-18 |
|
||||
| Graph UI 与系统不一致 | 使用深色主题 `#1a1a2e` | 统一为浅色/暗色双主题支持 | 2026-03-18 |
|
||||
| agentId 不一致 | `MemoryPanel` 用 `'zclaw-main'`，`MemoryGraph` 用 `'default'` | 统一 fallback 为 `'zclaw-main'` | 2026-03-18 |
|
||||
| GatewayLLMAdapter 端点不存在 | 调用不存在的 `/api/llm/complete` | 改用 `/api/agents/{id}/message` | 2026-03-18 |
|
||||
|
||||
### 5.4 用户反馈
|
||||
|
||||
记忆系统有效减少了重复说明，希望提高自动提取的准确性。
|
||||
|
||||
@@ -3,18 +3,28 @@
|
||||
> **分类**: 智能层
|
||||
> **优先级**: P1 - 重要
|
||||
> **成熟度**: L4 - 生产
|
||||
> **最后更新**: 2026-03-17
|
||||
> **最后更新**: 2026-03-18
|
||||
|
||||
---
|
||||
|
||||
## ✅ UI 集成状态
|
||||
## ✅ 集成状态
|
||||
|
||||
> **当前状态**: ✅ 已集成
|
||||
> **当前状态**: ✅ 完全集成
|
||||
>
|
||||
> `AutonomyConfig.tsx` 组件已集成到 `RightPanel.tsx` 的 'autonomy' tab。
|
||||
>
|
||||
> **集成位置**: RightPanel 'autonomy' tab (点击 Shield 图标)
|
||||
|
||||
### 已集成的系统
|
||||
|
||||
| 系统 | 文件 | 集成状态 | 说明 |
|
||||
|------|------|---------|------|
|
||||
| 反思引擎 | `reflection-engine.ts` | ✅ 已集成 | 反思运行前检查授权 |
|
||||
| 上下文压缩 | `context-compactor.ts` | ✅ 已集成 | 压缩执行前检查授权 |
|
||||
| 身份更新 | `agent-identity.ts` | ✅ 已集成 | 身份变更前检查授权 |
|
||||
| 技能安装 | `skill-discovery.ts` | ✅ 已集成 | 技能安装/卸载前检查授权 |
|
||||
| 记忆提取 | `session-persistence.ts` | ✅ 已集成 | 记忆保存前检查授权 |
|
||||
|
||||
---
|
||||
|
||||
## 一、功能概述
|
||||
@@ -27,7 +37,7 @@
|
||||
|------|-----|
|
||||
| 分类 | 智能层 |
|
||||
| 优先级 | P1 |
|
||||
| 成熟度 | L2 (降级：UI 未集成) |
|
||||
| 成熟度 | L4 |
|
||||
| 依赖 | AuditLog, ApprovalWorkflow |
|
||||
|
||||
### 1.2 相关文件
|
||||
@@ -35,8 +45,8 @@
|
||||
| 文件 | 路径 | 用途 | 集成状态 |
|
||||
|------|------|------|---------|
|
||||
| 核心实现 | `desktop/src/lib/autonomy-manager.ts` | 授权逻辑 | ✅ 存在 |
|
||||
| 配置 UI | `desktop/src/components/AutonomyConfig.tsx` | 配置界面 | ❌ **未集成** |
|
||||
| 审批 UI | `desktop/src/components/ApprovalsPanel.tsx` | 审批界面 | ❌ **未集成** |
|
||||
| 配置 UI | `desktop/src/components/AutonomyConfig.tsx` | 配置界面 | ✅ 已集成 |
|
||||
| 审批 UI | `desktop/src/components/ApprovalsPanel.tsx` | 审批界面 | ✅ 已集成 |
|
||||
|
||||
---
|
||||
|
||||
@@ -76,8 +86,8 @@
|
||||
|
||||
| 等级 | 操作类型 | Supervised | Assisted | Autonomous |
|
||||
|------|---------|------------|----------|------------|
|
||||
| Low | memory_save, reflection_run | 需确认 | 自动 | 自动 |
|
||||
| Medium | hand_trigger, config_change | 需确认 | 需确认 | 自动 |
|
||||
| Low | memory_save, reflection_run, compaction_run | 需确认 | 自动 | 自动 |
|
||||
| Medium | hand_trigger, config_change, skill_install | 需确认 | 需确认 | 自动 |
|
||||
| High | memory_delete, identity_update | 需确认 | 需确认 | 需确认 |
|
||||
|
||||
### 2.5 设计约束
|
||||
@@ -112,6 +122,29 @@ interface AutonomyManager {
|
||||
创建审批请求 → 用户批准/拒绝
|
||||
```
|
||||
|
||||
### 3.3 集成模式
|
||||
|
||||
各系统集成自主检查的统一模式：
|
||||
|
||||
```typescript
|
||||
import { canAutoExecute } from './autonomy-manager';
|
||||
|
||||
async function someOperation(options?: { skipAutonomyCheck?: boolean }) {
|
||||
// 自主检查
|
||||
if (!options?.skipAutonomyCheck) {
|
||||
const { canProceed, decision } = canAutoExecute('action_type', importance);
|
||||
if (!canProceed) {
|
||||
console.log(`[Module] Autonomy check failed: ${decision.reason}`);
|
||||
return; // 或返回默认结果
|
||||
}
|
||||
console.log(`[Module] Autonomy check passed: ${decision.reason}`);
|
||||
}
|
||||
|
||||
// 执行实际操作
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 四、实际效果
|
||||
@@ -125,6 +158,10 @@ interface AutonomyManager {
|
||||
- [x] 操作回滚 (lib)
|
||||
- [x] 审批过期 (lib)
|
||||
- [x] **UI 审批面板** - ✅ 已集成到 RightPanel 'autonomy' tab
|
||||
- [x] **反思引擎集成** - ✅ 2026-03-18
|
||||
- [x] **上下文压缩集成** - ✅ 2026-03-18
|
||||
- [x] **身份更新集成** - ✅ 2026-03-18
|
||||
- [x] **技能安装集成** - ✅ 2026-03-18
|
||||
|
||||
### 4.2 已知问题
|
||||
|
||||
@@ -138,6 +175,10 @@ interface AutonomyManager {
|
||||
## 五、演化路线
|
||||
|
||||
### 5.1 短期计划（1-2 周）
|
||||
- [x] 集成反思引擎
|
||||
- [x] 集成上下文压缩
|
||||
- [x] 集成身份更新
|
||||
- [x] 集成技能安装
|
||||
- [ ] 优化审批 UI
|
||||
- [ ] 添加批量审批
|
||||
|
||||
|
||||
@@ -189,19 +189,20 @@
|
||||
| ~~ActiveLearningPanel~~ | ~~`ActiveLearningPanel.tsx`~~ | ~~主动学习面板~~ | ✅ 已集成 |
|
||||
| ~~SkillMarket~~ | ~~`SkillMarket.tsx`~~ | ~~技能市场~~ | ✅ 已集成 |
|
||||
| ~~SkillCard~~ | ~~`SkillMarket/SkillCard.tsx`~~ | ~~技能卡片~~ | ✅ 已集成 |
|
||||
| MemoryGraph | `MemoryGraph.tsx` | 记忆图谱可视化 | 中 |
|
||||
| ~~MemoryGraph~~ | ~~`MemoryGraph.tsx`~~ | ~~记忆图谱可视化~~ | ✅ 已集成到 RightPanel memory tab |
|
||||
| ~~AuditLogsPanel~~ | ~~`AuditLogsPanel.tsx`~~ | ~~审计日志面板~~ | ✅ 已集成 |
|
||||
| ~~SecurityLayersPanel~~ | ~~`SecurityLayersPanel.tsx`~~ | ~~安全层面板~~ | ✅ 已集成 |
|
||||
| TriggersPanel | `TriggersPanel.tsx` | 触发器管理 | 低 |
|
||||
| ApprovalsPanel | `ApprovalsPanel.tsx` | 审批管理面板 | 低 |
|
||||
| TeamOrchestrator | `TeamOrchestrator.tsx` | 团队编排器 | 低 |
|
||||
| ~~TriggersPanel~~ | ~~`TriggersPanel.tsx`~~ | ~~触发器管理~~ | ✅ 已集成到 SchedulerPanel triggers tab |
|
||||
| ~~ApprovalsPanel~~ | ~~`ApprovalsPanel.tsx`~~ | ~~审批管理面板~~ | ✅ 已集成到 HandsPanel approvals tab |
|
||||
| ~~TeamOrchestrator~~ | ~~`TeamOrchestrator.tsx`~~ | ~~团队编排器~~ | ✅ 已集成到 App team view orchestrator tab |
|
||||
| ~~SecurityStatus~~ | ~~`SecurityStatus.tsx`~~ | ~~安全状态显示~~ | ✅ 已集成 |
|
||||
| HeartbeatConfig | `HeartbeatConfig.tsx` | 心跳配置 | 低 |
|
||||
| CreateTriggerModal | `CreateTriggerModal.tsx` | 创建触发器弹窗 | 低 |
|
||||
| FeedbackButton | `Feedback/FeedbackButton.tsx` | 反馈按钮 | 低 |
|
||||
| FeedbackHistory | `Feedback/FeedbackHistory.tsx` | 反馈历史 | 低 |
|
||||
| FeedbackModal | `Feedback/FeedbackModal.tsx` | 反馈弹窗 | 低 |
|
||||
| MessageSearch | `MessageSearch.tsx` | 消息搜索 | 中 |
|
||||
| ~~FeedbackButton~~ | ~~`Feedback/FeedbackButton.tsx`~~ | ~~反馈按钮~~ | ✅ 已集成到 SettingsLayout |
|
||||
| ~~FeedbackHistory~~ | ~~`Feedback/FeedbackHistory.tsx`~~ | ~~反馈历史~~ | ✅ 已集成到 SettingsLayout |
|
||||
| ~~FeedbackModal~~ | ~~`Feedback/FeedbackModal.tsx`~~ | ~~反馈弹窗~~ | ✅ 已集成到 SettingsLayout |
|
||||
| ~~MessageSearch~~ | ~~`MessageSearch.tsx`~~ | ~~消息搜索~~ | ✅ Sidebar 已有搜索功能 |
|
||||
| ~~MemoryGraph~~ | ~~`MemoryGraph.tsx`~~ | ~~记忆图谱可视化~~ | ✅ 已集成到 RightPanel memory tab |
|
||||
| PersonalitySelector | `PersonalitySelector.tsx` | 个性选择器 | 低 |
|
||||
| ScenarioTags | `ScenarioTags.tsx` | 场景标签 | 低 |
|
||||
| BrowserHand/* | `BrowserHand/*.tsx` | Browser Hand 组件 | ✅ 已被 HandsPanel 使用 |
|
||||
@@ -254,12 +255,12 @@
|
||||
- ~~`HandParamsForm.tsx` → 集成到 HandsPanel 触发流程~~ - ✅ 已集成
|
||||
- ~~`HandApprovalModal.tsx` → 集成到 App.tsx 全局监听~~ - ✅ 已集成
|
||||
|
||||
### P2 - 增强 (锦上添花)
|
||||
### P2 - 增强 (锦上添花) - ✅ MemoryGraph、TriggersPanel 已完成
|
||||
|
||||
5. **集成其他组件**
|
||||
- `TriggersPanel.tsx` → 添加到 workflow 视图
|
||||
- ~~`TriggersPanel.tsx` → 添加到 workflow 视图~~ - ✅ 已集成到 SchedulerPanel (2026-03-18)
|
||||
- `ApprovalsPanel.tsx` → 添加到 hands 视图
|
||||
- `MemoryGraph.tsx` → 添加到 memory tab
|
||||
- ~~`MemoryGraph.tsx` → 添加到 memory tab~~ - ✅ 已集成 (2026-03-18)
|
||||
- `MessageSearch.tsx` → 添加到 ChatArea
|
||||
|
||||
---
|
||||
@@ -273,7 +274,6 @@
|
||||
| `02-intelligence-layer/03-reflection-engine.md` | L4 已完成 | ✅ 已更新为 L4 已集成 |
|
||||
| `02-intelligence-layer/05-autonomy-manager.md` | L4 已完成 | ✅ 已更新为 L4 已集成 |
|
||||
| `04-skills-ecosystem/00-skill-system.md` | L4 已完成 | ✅ 已更新为 L4 已集成 |
|
||||
| `01-core-features/03-workflow-engine.md` | L3 成熟 | 添加说明：Editor/History 未集成 |
|
||||
|
||||
---
|
||||
|
||||
@@ -297,7 +297,11 @@
|
||||
4. **Hands 参数和审批已集成** - ✅ HandParamsForm 和 HandApprovalModal 已集成 (2026-03-17)
|
||||
5. **Workflow 编辑器已集成** - ✅ WorkflowEditor 和 WorkflowHistory 已集成到 SchedulerPanel (2026-03-17)
|
||||
6. **安全与审计已集成** - ✅ AuditLogsPanel 和 SecurityLayersPanel 已集成到 SettingsLayout (2026-03-17)
|
||||
7. **部分"僵尸组件"** - ~2 组件存在但未渲染 (MemoryGraph, TriggersPanel)
|
||||
7. **记忆图谱已集成** - ✅ MemoryGraph 已集成到 RightPanel memory tab (2026-03-18)
|
||||
8. **触发器面板已集成** - ✅ TriggersPanel 已集成到 SchedulerPanel triggers tab (2026-03-18)
|
||||
9. **审批面板已集成** - ✅ ApprovalsPanel 已集成到 HandsPanel approvals tab (2026-03-18)
|
||||
10. **团队编排器已集成** - ✅ TeamOrchestrator 已集成到 App team view orchestrator tab (2026-03-18)
|
||||
11. **所有组件已集成** - ✅ 无剩余"僵尸组件"
|
||||
|
||||
### 建议行动
|
||||
|
||||
@@ -305,5 +309,8 @@
|
||||
2. ~~**短期**: 集成 SkillMarket 和 ActiveLearningPanel~~ - ✅ 已完成 (2026-03-17)
|
||||
3. ~~**短期**: 集成 HandParamsForm 和 HandApprovalModal~~ - ✅ 已完成 (2026-03-17)
|
||||
4. ~~**中期**: 集成 Workflow Editor/History 和 安全/审计组件~~ - ✅ 已完成 (2026-03-17)
|
||||
5. **长期**: 清理剩余"僵尸组件" (MemoryGraph, TriggersPanel)
|
||||
6. **长期**: 建立文档-代码同步机制，避免文档过时
|
||||
5. ~~**中期**: 集成 MemoryGraph~~ - ✅ 已完成 (2026-03-18)
|
||||
6. ~~**中期**: 集成 TriggersPanel~~ - ✅ 已完成 (2026-03-18)
|
||||
7. ~~**中期**: 集成 ApprovalsPanel~~ - ✅ 已完成 (2026-03-18)
|
||||
8. ~~**中期**: 集成 TeamOrchestrator~~ - ✅ 已完成 (2026-03-18)
|
||||
9. **长期**: 建立文档-代码同步机制，避免文档过时
|
||||
|
||||
@@ -546,6 +546,187 @@ if (clones && clones.length > 0) {
|
||||
2. 重新启动应用
|
||||
3. 完成引导流程 → 应该成功更新默认 Agent
|
||||
|
||||
### 3.4 刷新页面后对话内容丢失
|
||||
|
||||
**症状**: 切换 Tab 时对话正常保留，但按 F5 刷新页面后对话内容消失
|
||||
|
||||
**根本原因**: `onComplete` 回调中没有将当前对话保存到 `conversations` 数组，导致 `persist` 中间件无法持久化
|
||||
|
||||
**问题分析**:
|
||||
|
||||
Zustand 的 `persist` 中间件只保存 `partialize` 中指定的字段：
|
||||
```typescript
|
||||
partialize: (state) => ({
|
||||
conversations: state.conversations, // ← 从这里恢复
|
||||
currentModel: state.currentModel,
|
||||
currentAgentId: state.currentAgent?.id,
|
||||
currentConversationId: state.currentConversationId,
|
||||
}),
|
||||
```
|
||||
|
||||
但 `messages` 数组只在内存中，刷新后丢失。恢复逻辑依赖 `conversations` 数组：
|
||||
```typescript
|
||||
onRehydrateStorage: () => (state) => {
|
||||
if (state?.currentConversationId && state.conversations) {
|
||||
const currentConv = state.conversations.find(c => c.id === state.currentConversationId);
|
||||
if (currentConv) {
|
||||
state.messages = [...currentConv.messages]; // ← 从 conversations 恢复
|
||||
}
|
||||
}
|
||||
},
|
||||
```
|
||||
|
||||
**问题**: `onComplete` 回调中只更新了 `messages`，没有调用 `upsertActiveConversation` 保存到 `conversations`
|
||||
|
||||
**修复代码**:
|
||||
```typescript
|
||||
onComplete: () => {
|
||||
const state = get();
|
||||
|
||||
// Save conversation to persist across refresh
|
||||
const conversations = upsertActiveConversation([...state.conversations], state);
|
||||
const currentConvId = state.currentConversationId || conversations[0]?.id;
|
||||
|
||||
set({
|
||||
isStreaming: false,
|
||||
conversations, // ← 保存到 conversations 数组
|
||||
currentConversationId: currentConvId, // ← 确保 ID 被设置
|
||||
messages: state.messages.map((m) =>
|
||||
m.id === assistantId ? { ...m, streaming: false, runId } : m
|
||||
),
|
||||
});
|
||||
|
||||
// ... rest of the callback
|
||||
},
|
||||
```
|
||||
|
||||
**文件**: `desktop/src/store/chatStore.ts`
|
||||
|
||||
**验证修复**:
|
||||
1. 发送消息并获得 AI 回复
|
||||
2. 按 F5 刷新页面
|
||||
3. 对话内容应该保留
|
||||
|
||||
### 3.5 ChatArea 输入框布局错乱
|
||||
|
||||
**症状**: 对话过程中输入框被移动到页面顶部，而不是固定在底部
|
||||
|
||||
**根本原因**: `ChatArea` 组件返回的是 React Fragment (`<>...</>`)，没有包裹在 flex 容器中
|
||||
|
||||
**问题代码**:
|
||||
```typescript
|
||||
// ❌ 错误 - Fragment 没有 flex 布局
|
||||
return (
|
||||
<>
|
||||
<div className="h-14 ...">Header</div>
|
||||
<div className="flex-1 ...">Messages</div>
|
||||
<div className="border-t ...">Input</div>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
**修复代码**:
|
||||
```typescript
|
||||
// ✅ 正确 - 使用 flex 容器
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="h-14 flex-shrink-0 ...">Header</div>
|
||||
<div className="flex-1 overflow-y-auto ...">Messages</div>
|
||||
<div className="flex-shrink-0 ...">Input</div>
|
||||
</div>
|
||||
);
|
||||
```
|
||||
|
||||
**文件**: `desktop/src/components/ChatArea.tsx`
|
||||
|
||||
**布局原理**:
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ Header (h-14, flex-shrink-0) │ ← 固定高度
|
||||
├─────────────────────────────────────┤
|
||||
│ │
|
||||
│ Messages (flex-1, overflow-y-auto) │ ← 占据剩余空间，可滚动
|
||||
│ │
|
||||
├─────────────────────────────────────┤
|
||||
│ Input (flex-shrink-0) │ ← 固定在底部
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. 记忆系统问题
|
||||
|
||||
### 7.1 Memory Tab 为空，多轮对话后无记忆
|
||||
|
||||
**症状**: 经过多次对话后，右侧面板的"记忆"Tab 内容为空
|
||||
|
||||
**根本原因**: 多个配置问题导致记忆未被提取
|
||||
|
||||
**问题分析**:
|
||||
|
||||
1. **LLM 提取默认禁用**: `useLLM: false` 导致只使用规则提取
|
||||
2. **提取阈值过高**: `minMessagesForExtraction: 4` 短对话不会触发
|
||||
3. **agentId 不一致**: `MemoryPanel` 用 `'zclaw-main'`，`MemoryGraph` 用 `'default'`
|
||||
4. **Gateway 端点不存在**: `GatewayLLMAdapter` 调用 `/api/llm/complete`，OpenFang 无此端点
|
||||
|
||||
**修复方案**:
|
||||
|
||||
```typescript
|
||||
// 1. 启用 LLM 提取 (memory-extractor.ts)
|
||||
export const DEFAULT_EXTRACTION_CONFIG: ExtractionConfig = {
|
||||
useLLM: true, // 从 false 改为 true
|
||||
minMessagesForExtraction: 2, // 从 4 降低到 2
|
||||
// ...
|
||||
};
|
||||
|
||||
// 2. 统一 agentId fallback (MemoryGraph.tsx)
|
||||
const agentId = currentAgent?.id || 'zclaw-main'; // 从 'default' 改为 'zclaw-main'
|
||||
|
||||
// 3. 修复 Gateway 适配器端点 (llm-service.ts)
|
||||
// 使用 OpenFang 的 /api/agents/{id}/message 端点
|
||||
const response = await fetch(`/api/agents/${agentId}/message`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ message: fullPrompt, ... }),
|
||||
});
|
||||
```
|
||||
|
||||
**文件**:
|
||||
- `desktop/src/lib/memory-extractor.ts`
|
||||
- `desktop/src/lib/llm-service.ts`
|
||||
- `desktop/src/components/MemoryGraph.tsx`
|
||||
|
||||
**验证修复**:
|
||||
1. 打开浏览器控制台
|
||||
2. 进行至少 2 轮对话
|
||||
3. 查看日志: `[MemoryExtractor] Using LLM-powered semantic extraction`
|
||||
4. 检查 Memory Tab 是否显示提取的记忆
|
||||
|
||||
### 7.2 Memory Graph UI 与系统风格不一致
|
||||
|
||||
**症状**: 记忆图谱使用深色主题，与系统浅色主题不协调
|
||||
|
||||
**根本原因**: `MemoryGraph.tsx` 硬编码深色背景 `#1a1a2e`
|
||||
|
||||
**修复方案**:
|
||||
|
||||
```typescript
|
||||
// Canvas 背景 - 支持亮/暗双主题
|
||||
ctx.fillStyle = '#f9fafb'; // gray-50 (浅色)
|
||||
|
||||
// 工具栏 - 添加 dark: 变体
|
||||
<div className="bg-gray-100 dark:bg-gray-800/50">
|
||||
|
||||
// 图谱画布 - 添加 dark: 变体
|
||||
<div className="bg-gray-50 dark:bg-gray-900">
|
||||
```
|
||||
|
||||
**文件**: `desktop/src/components/MemoryGraph.tsx`
|
||||
|
||||
**设计规范**:
|
||||
- 使用 Tailwind 的 `dark:` 变体支持双主题
|
||||
- 强调色使用 `orange-500` 而非 `blue-600`
|
||||
- 文字颜色使用 `gray-700 dark:text-gray-300`
|
||||
|
||||
---
|
||||
|
||||
## 8. 相关文档
|
||||
@@ -560,6 +741,8 @@ if (clones && clones.length > 0) {
|
||||
|
||||
| 日期 | 变更 |
|
||||
|------|------|
|
||||
| 2026-03-18 | 添加记忆提取和图谱 UI 问题 |
|
||||
| 2026-03-18 | 添加刷新后对话丢失问题和 ChatArea 布局问题 |
|
||||
| 2026-03-17 | 添加首次使用引导流程 |
|
||||
| 2026-03-17 | 添加配置热重载限制问题 |
|
||||
| 2026-03-14 | 初始版本 |
|
||||
|
||||
Reference in New Issue
Block a user