3518fc8ece
Phase 4 completion: - Add ApprovalQueue component for managing pending approvals - Add ExecutionResult component for displaying hand/workflow results - Update Sidebar navigation to use unified AutomationPanel - Replace separate 'hands' and 'workflow' tabs with single 'automation' tab - Fix TypeScript type safety issues with unknown types in JSX expressions Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
366 lines
19 KiB
HTML
366 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WorkBuddy - 自动化</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
|
|
|
|
/* 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> |