🏗️ 项目重构：模块化清理完成
This commit is contained in:
llama-research
283
modules/monitoring-dashboard/website/index.html
Normal file
283
modules/monitoring-dashboard/website/index.html
Normal file
@@ -0,0 +1,283 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AI Agent协作框架 - 真实的多Agent协作系统</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="nav-logo">
|
||||
<span class="logo-text">🤖 AI Agent协作</span>
|
||||
</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="#home">首页</a></li>
|
||||
<li><a href="#features">特性</a></li>
|
||||
<li><a href="#demo">演示</a></li>
|
||||
<li><a href="#docs">文档</a></li>
|
||||
<li><a href="#github" class="github-link">GitHub</a></li>
|
||||
</ul>
|
||||
<div class="hamburger">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section id="home" class="hero">
|
||||
<div class="hero-container">
|
||||
<div class="hero-content">
|
||||
<h1 class="hero-title">
|
||||
从模拟到真实<br>
|
||||
<span class="gradient-text">让每个AI Agent都拥有独立Git身份</span>
|
||||
</h1>
|
||||
<p class="hero-subtitle">
|
||||
不是让AI Agent假装协作，而是让每个Agent都有真实的Git身份：<br>
|
||||
独立的SSH密钥、GPG签名、用户名和邮箱，实现可追溯的团队协作历史
|
||||
</p>
|
||||
<div class="hero-buttons">
|
||||
<button class="btn btn-primary" onclick="startDemo()">
|
||||
🚀 立即体验
|
||||
</button>
|
||||
<button class="btn btn-secondary" onclick="scrollToSection('features')">
|
||||
📖 了解更多
|
||||
</button>
|
||||
</div>
|
||||
<div class="hero-stats">
|
||||
<div class="stat">
|
||||
<span class="stat-number">4</span>
|
||||
<span class="stat-label">预定义Agent</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-number">100%</span>
|
||||
<span class="stat-label">真实Git提交</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-number">一键</span>
|
||||
<span class="stat-label">快速启动</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div class="terminal-window">
|
||||
<div class="terminal-header">
|
||||
<div class="terminal-buttons">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="terminal-title">Agent协作演示</div>
|
||||
</div>
|
||||
<div class="terminal-content">
|
||||
<div class="terminal-line">
|
||||
<span class="prompt">$</span>
|
||||
<span class="command">./agents/switch_agent.sh claude-ai</span>
|
||||
</div>
|
||||
<div class="terminal-line">
|
||||
<span class="prompt">claude-ai@framework</span>
|
||||
<span class="command">git commit -m "设计系统架构"</span>
|
||||
</div>
|
||||
<div class="terminal-line">
|
||||
<span class="prompt">$</span>
|
||||
<span class="command">./agents/switch_agent.sh gemini-dev</span>
|
||||
</div>
|
||||
<div class="terminal-line">
|
||||
<span class="prompt">gemini-dev@framework</span>
|
||||
<span class="command">git commit -m "实现核心功能"</span>
|
||||
</div>
|
||||
<div class="terminal-line success">
|
||||
✅ 真实的协作历史已创建
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section id="features" class="features">
|
||||
<div class="container">
|
||||
<h2 class="section-title">核心特性</h2>
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🔐</div>
|
||||
<h3>真实身份系统</h3>
|
||||
<p>每个Agent拥有独立的SSH密钥、GPG签名和Git配置，确保每次提交都可追溯到具体Agent</p>
|
||||
<ul>
|
||||
<li>独立SSH密钥对</li>
|
||||
<li>GPG签名验证</li>
|
||||
<li>独立Git配置</li>
|
||||
<li>完整审计日志</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🎭</div>
|
||||
<h3>专业化角色</h3>
|
||||
<p>预定义四种专业化Agent角色，每个都有明确的责任边界和专长领域</p>
|
||||
<div class="roles-list">
|
||||
<div class="role-item">
|
||||
<strong>claude-ai</strong> - 架构师
|
||||
</div>
|
||||
<div class="role-item">
|
||||
<strong>gemini-dev</strong> - 开发者
|
||||
</div>
|
||||
<div class="role-item">
|
||||
<strong>qwen-ops</strong> - 运维
|
||||
</div>
|
||||
<div class="role-item">
|
||||
<strong>llama-research</strong> - 研究员
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">📊</div>
|
||||
<h3>实时协作监控</h3>
|
||||
<p>实时查看所有Agent的协作状态、提交统计和代码贡献分析</p>
|
||||
<div class="stats-preview">
|
||||
<div class="stat-bar">
|
||||
<span>claude-ai</span>
|
||||
<div class="bar"><div style="width: 25%"></div></div>
|
||||
<span>5次提交</span>
|
||||
</div>
|
||||
<div class="stat-bar">
|
||||
<span>gemini-dev</span>
|
||||
<div class="bar"><div style="width: 40%"></div></div>
|
||||
<span>8次提交</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Demo Section -->
|
||||
<section id="demo" class="demo">
|
||||
<div class="container">
|
||||
<h2 class="section-title">实时演示</h2>
|
||||
<div class="demo-container">
|
||||
<div class="demo-panel">
|
||||
<h3>Agent状态监控</h3>
|
||||
<div id="agent-status" class="agent-grid">
|
||||
<!-- 动态加载Agent状态 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-panel">
|
||||
<h3>最近活动</h3>
|
||||
<div id="recent-activity" class="activity-feed">
|
||||
<!-- 动态加载活动数据 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-actions">
|
||||
<button class="btn btn-primary" onclick="runDemo()">
|
||||
🎬 运行演示
|
||||
</button>
|
||||
<button class="btn btn-secondary" onclick="resetDemo()">
|
||||
🔄 重置演示
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quick Start Section -->
|
||||
<section class="quick-start">
|
||||
<div class="container">
|
||||
<h2 class="section-title">快速开始</h2>
|
||||
<div class="install-options">
|
||||
<div class="install-card">
|
||||
<h3>🚀 一键安装</h3>
|
||||
<div class="code-block">
|
||||
<pre><code class="language-bash">curl -fsSL https://raw.githubusercontent.com/your-org/agent-collaboration-framework/main/install.sh | bash</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="install-card">
|
||||
<h3>📦 手动安装</h3>
|
||||
<div class="code-block">
|
||||
<pre><code class="language-bash">git clone https://github.com/your-org/agent-collaboration-framework.git
|
||||
cd agent-collaboration-framework
|
||||
./install.sh</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="install-card">
|
||||
<h3>🐳 Docker</h3>
|
||||
<div class="code-block">
|
||||
<pre><code class="language-bash">docker run -it -v $(pwd):/workspace agent-collaboration:latest</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Documentation Section -->
|
||||
<section id="docs" class="documentation">
|
||||
<div class="container">
|
||||
<h2 class="section-title">文档中心</h2>
|
||||
<div class="docs-grid">
|
||||
<div class="doc-card">
|
||||
<h3>📚 快速入门</h3>
|
||||
<p>从零开始了解AI Agent协作框架</p>
|
||||
<a href="docs/quickstart.html" class="doc-link">开始阅读 →</a>
|
||||
</div>
|
||||
<div class="doc-card">
|
||||
<h3>🏗️ 架构指南</h3>
|
||||
<p>深入理解系统架构和设计原理</p>
|
||||
<a href="docs/architecture.html" class="doc-link">查看详情 →</a>
|
||||
</div>
|
||||
<div class="doc-card">
|
||||
<h3>🔧 API文档</h3>
|
||||
<p>完整的API参考和开发指南</p>
|
||||
<a href="docs/api.html" class="doc-link">浏览API →</a>
|
||||
</div>
|
||||
<div class="doc-card">
|
||||
<h3>🎯 使用案例</h3>
|
||||
<p>真实场景下的使用示例和最佳实践</p>
|
||||
<a href="docs/examples.html" class="doc-link">查看案例 →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<h4>AI Agent协作框架</h4>
|
||||
<p>让AI Agent拥有真实的Git身份，实现可追溯的团队协作</p>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>快速链接</h4>
|
||||
<ul>
|
||||
<li><a href="#home">首页</a></li>
|
||||
<li><a href="#features">特性</a></li>
|
||||
<li><a href="#demo">演示</a></li>
|
||||
<li><a href="#docs">文档</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>社区</h4>
|
||||
<ul>
|
||||
<li><a href="https://github.com/your-org/agent-collaboration-framework">GitHub</a></li>
|
||||
<li><a href="https://github.com/your-org/agent-collaboration-framework/issues">问题反馈</a></li>
|
||||
<li><a href="https://github.com/your-org/agent-collaboration-framework/discussions">讨论</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© 2024 AI Agent协作框架. 开源项目，欢迎贡献</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
345
modules/monitoring-dashboard/website/script.js
Normal file
345
modules/monitoring-dashboard/website/script.js
Normal file
@@ -0,0 +1,345 @@
|
||||
// 全局变量
|
||||
let agents = [
|
||||
{ id: 'code-reviewer', name: 'Code Reviewer', status: 'active', commits: 12, tasks: 3 },
|
||||
{ id: 'test-runner', name: 'Test Runner', status: 'active', commits: 8, tasks: 5 },
|
||||
{ id: 'deploy-bot', name: 'Deploy Bot', status: 'inactive', commits: 3, tasks: 0 },
|
||||
{ id: 'doc-writer', name: 'Doc Writer', status: 'active', commits: 15, tasks: 2 }
|
||||
];
|
||||
|
||||
let activities = [
|
||||
{ type: 'commit', message: 'Code Reviewer pushed 3 new commits', time: '2 minutes ago' },
|
||||
{ type: 'test', message: 'Test Runner completed 5 test cases', time: '5 minutes ago' },
|
||||
{ type: 'deploy', message: 'Deploy Bot deployed to staging', time: '10 minutes ago' },
|
||||
{ type: 'docs', message: 'Doc Writer updated API documentation', time: '15 minutes ago' }
|
||||
];
|
||||
|
||||
// 初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initializeDemo();
|
||||
initializeTerminal();
|
||||
initializeStats();
|
||||
setupScrollEffects();
|
||||
});
|
||||
|
||||
// 演示区域初始化
|
||||
function initializeDemo() {
|
||||
updateAgentGrid();
|
||||
updateActivityFeed();
|
||||
|
||||
// 每3秒更新一次演示数据
|
||||
setInterval(updateDemoData, 3000);
|
||||
}
|
||||
|
||||
// 更新代理网格
|
||||
function updateAgentGrid() {
|
||||
const grid = document.getElementById('agent-grid');
|
||||
if (!grid) return;
|
||||
|
||||
grid.innerHTML = '';
|
||||
agents.forEach(agent => {
|
||||
const card = createAgentCard(agent);
|
||||
grid.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
// 创建代理卡片
|
||||
function createAgentCard(agent) {
|
||||
const card = document.createElement('div');
|
||||
card.className = `agent-card agent-status-${agent.status}`;
|
||||
|
||||
const statusIcon = agent.status === 'active' ? '🟢' : '🔴';
|
||||
|
||||
card.innerHTML = `
|
||||
<div>
|
||||
<strong>${agent.name}</strong>
|
||||
<div style="font-size: 0.9rem; color: #666;">
|
||||
${statusIcon} ${agent.status}
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: right; font-size: 0.9rem;">
|
||||
<div>📊 ${agent.commits} commits</div>
|
||||
<div>📝 ${agent.tasks} tasks</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
// 更新活动流
|
||||
function updateActivityFeed() {
|
||||
const feed = document.getElementById('activity-feed');
|
||||
if (!feed) return;
|
||||
|
||||
feed.innerHTML = '';
|
||||
activities.forEach(activity => {
|
||||
const item = createActivityItem(activity);
|
||||
feed.appendChild(item);
|
||||
});
|
||||
}
|
||||
|
||||
// 创建活动项
|
||||
function createActivityItem(activity) {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'activity-item';
|
||||
|
||||
const icon = getActivityIcon(activity.type);
|
||||
|
||||
item.innerHTML = `
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<span>${icon}</span>
|
||||
<span>${activity.message}</span>
|
||||
</div>
|
||||
<div style="font-size: 0.8rem; color: #666; margin-top: 0.5rem;">
|
||||
${activity.time}
|
||||
</div>
|
||||
`;
|
||||
|
||||
return item;
|
||||
}
|
||||
|
||||
// 获取活动图标
|
||||
function getActivityIcon(type) {
|
||||
const icons = {
|
||||
'commit': '💻',
|
||||
'test': '🧪',
|
||||
'deploy': '🚀',
|
||||
'docs': '📚'
|
||||
};
|
||||
return icons[type] || '📝';
|
||||
}
|
||||
|
||||
// 更新演示数据
|
||||
function updateDemoData() {
|
||||
// 随机更新代理状态
|
||||
agents.forEach(agent => {
|
||||
if (Math.random() > 0.7) {
|
||||
agent.status = agent.status === 'active' ? 'inactive' : 'active';
|
||||
}
|
||||
if (Math.random() > 0.5) {
|
||||
agent.commits += Math.floor(Math.random() * 3);
|
||||
}
|
||||
});
|
||||
|
||||
// 添加新活动
|
||||
const newActivity = generateRandomActivity();
|
||||
activities.unshift(newActivity);
|
||||
if (activities.length > 5) {
|
||||
activities.pop();
|
||||
}
|
||||
|
||||
updateAgentGrid();
|
||||
updateActivityFeed();
|
||||
updateStats();
|
||||
}
|
||||
|
||||
// 生成随机活动
|
||||
function generateRandomActivity() {
|
||||
const types = ['commit', 'test', 'deploy', 'docs'];
|
||||
const messages = {
|
||||
'commit': ['Code Reviewer pushed new features', 'Test Runner fixed bugs', 'Deploy Bot merged PR'],
|
||||
'test': ['Test Runner passed all tests', 'Code Reviewer added unit tests', 'Doc Writer tested examples'],
|
||||
'deploy': ['Deploy Bot deployed to production', 'Code Reviewer released v2.0', 'Test Runner deployed hotfix'],
|
||||
'docs': ['Doc Writer updated README', 'Code Reviewer improved comments', 'Deploy Bot added changelog']
|
||||
};
|
||||
|
||||
const type = types[Math.floor(Math.random() * types.length)];
|
||||
const message = messages[type][Math.floor(Math.random() * messages[type].length)];
|
||||
|
||||
return {
|
||||
type: type,
|
||||
message: message,
|
||||
time: 'just now'
|
||||
};
|
||||
}
|
||||
|
||||
// 终端模拟
|
||||
function initializeTerminal() {
|
||||
const terminal = document.getElementById('terminal-content');
|
||||
if (!terminal) return;
|
||||
|
||||
const commands = [
|
||||
{ prompt: 'user@spore-colony:~$', command: 'spore init', output: '✓ Initializing Spore Colony...\n✓ Creating agent identities...\n✓ Setting up Git repositories...\n✓ Spore Colony initialized successfully!' },
|
||||
{ prompt: 'user@spore-colony:~$', command: 'spore agent list', output: '🟢 code-reviewer (Active)\n🟢 test-runner (Active)\n🔴 deploy-bot (Inactive)\n🟢 doc-writer (Active)' },
|
||||
{ prompt: 'user@spore-colony:~$', command: 'spore task create "Add new feature"', output: '✓ Task created and assigned to code-reviewer\n📊 Progress: 0% → 25% → 50% → 75% → 100%\n✅ Task completed successfully!' }
|
||||
];
|
||||
|
||||
let currentCommand = 0;
|
||||
|
||||
function typeCommand() {
|
||||
if (currentCommand >= commands.length) return;
|
||||
|
||||
const cmd = commands[currentCommand];
|
||||
const line = document.createElement('div');
|
||||
line.className = 'terminal-line';
|
||||
line.innerHTML = `<span class="prompt">${cmd.prompt}</span> <span class="command">${cmd.command}</span>`;
|
||||
terminal.appendChild(line);
|
||||
|
||||
setTimeout(() => {
|
||||
const outputLine = document.createElement('div');
|
||||
outputLine.className = 'terminal-line';
|
||||
outputLine.innerHTML = `<span class="success">${cmd.output}</span>`;
|
||||
terminal.appendChild(outputLine);
|
||||
|
||||
currentCommand++;
|
||||
if (currentCommand < commands.length) {
|
||||
setTimeout(typeCommand, 2000);
|
||||
}
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
typeCommand();
|
||||
}
|
||||
|
||||
// 统计信息
|
||||
function initializeStats() {
|
||||
updateStats();
|
||||
}
|
||||
|
||||
function updateStats() {
|
||||
const totalCommits = agents.reduce((sum, agent) => sum + agent.commits, 0);
|
||||
const activeAgents = agents.filter(agent => agent.status === 'active').length;
|
||||
const totalTasks = agents.reduce((sum, agent) => sum + agent.tasks, 0);
|
||||
|
||||
animateCounter('total-commits', totalCommits);
|
||||
animateCounter('active-agents', activeAgents);
|
||||
animateCounter('total-tasks', totalTasks);
|
||||
|
||||
updateProgressBars();
|
||||
}
|
||||
|
||||
// 数字动画
|
||||
function animateCounter(elementId, targetValue) {
|
||||
const element = document.getElementById(elementId);
|
||||
if (!element) return;
|
||||
|
||||
const startValue = parseInt(element.textContent) || 0;
|
||||
const duration = 1000;
|
||||
const startTime = performance.now();
|
||||
|
||||
function updateCounter(currentTime) {
|
||||
const elapsed = currentTime - startTime;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
|
||||
const currentValue = Math.floor(startValue + (targetValue - startValue) * progress);
|
||||
element.textContent = currentValue;
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(updateCounter);
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(updateCounter);
|
||||
}
|
||||
|
||||
// 进度条更新
|
||||
function updateProgressBars() {
|
||||
const progressBars = document.querySelectorAll('.bar div');
|
||||
progressBars.forEach(bar => {
|
||||
const width = Math.floor(Math.random() * 30) + 70; // 70-100%
|
||||
bar.style.width = width + '%';
|
||||
});
|
||||
}
|
||||
|
||||
// 滚动效果
|
||||
function setupScrollEffects() {
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('animate-in');
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// 观察所有需要动画的元素
|
||||
document.querySelectorAll('.feature-card, .demo-panel, .install-card, .doc-card').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
}
|
||||
|
||||
// 平滑滚动到锚点
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 响应式菜单
|
||||
function toggleMobileMenu() {
|
||||
const navMenu = document.querySelector('.nav-menu');
|
||||
navMenu.classList.toggle('active');
|
||||
}
|
||||
|
||||
// 复制代码功能
|
||||
function copyToClipboard(elementId) {
|
||||
const element = document.getElementById(elementId);
|
||||
if (!element) return;
|
||||
|
||||
const text = element.textContent;
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
// 显示复制成功提示
|
||||
const toast = document.createElement('div');
|
||||
toast.textContent = 'Copied to clipboard!';
|
||||
toast.style.cssText = `
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: #27ca3f;
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
z-index: 1000;
|
||||
animation: slideIn 0.3s ease;
|
||||
`;
|
||||
|
||||
document.body.appendChild(toast);
|
||||
setTimeout(() => {
|
||||
toast.remove();
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
// 添加CSS动画
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-in {
|
||||
animation: fadeInUp 0.6s ease forwards;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.nav-menu.active {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: white;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
659
modules/monitoring-dashboard/website/styles.css
Normal file
659
modules/monitoring-dashboard/website/styles.css
Normal file
@@ -0,0 +1,659 @@
|
||||
/* Reset and Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
z-index: 1000;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.nav-menu a {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-menu a:hover {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.github-link {
|
||||
background: #2563eb;
|
||||
color: white !important;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.github-link:hover {
|
||||
background: #1d4ed8;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hamburger span {
|
||||
width: 25px;
|
||||
height: 3px;
|
||||
background: #333;
|
||||
margin: 3px 0;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6rem 0 4rem;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hero-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 2rem;
|
||||
opacity: 0.9;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 1rem 2rem;
|
||||
border: none;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #ff6b6b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #ff5252;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: white;
|
||||
border: 2px solid white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: white;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.stat {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #ff6b6b;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Terminal Window */
|
||||
.terminal-window {
|
||||
background: #1a1a1a;
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.terminal-header {
|
||||
background: #2d2d2d;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.terminal-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.terminal-buttons span {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.terminal-buttons span:nth-child(1) { background: #ff5f56; }
|
||||
.terminal-buttons span:nth-child(2) { background: #ffbd2e; }
|
||||
.terminal-buttons span:nth-child(3) { background: #27ca3f; }
|
||||
|
||||
.terminal-title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
color: #888;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.terminal-content {
|
||||
padding: 1.5rem;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.terminal-line {
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.prompt {
|
||||
color: #27ca3f;
|
||||
}
|
||||
|
||||
.command {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.success {
|
||||
color: #27ca3f;
|
||||
}
|
||||
|
||||
/* Features Section */
|
||||
.features {
|
||||
padding: 6rem 0;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 3rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: white;
|
||||
border-radius: 1rem;
|
||||
padding: 2.5rem;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
color: #666;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.feature-card ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.feature-card li {
|
||||
padding: 0.25rem 0;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.feature-card li:before {
|
||||
content: "✓";
|
||||
color: #27ca3f;
|
||||
font-weight: bold;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.roles-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.role-item {
|
||||
padding: 0.5rem;
|
||||
background: #f8f9fa;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Demo Section */
|
||||
.demo {
|
||||
padding: 6rem 0;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.demo-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.demo-panel {
|
||||
background: white;
|
||||
border-radius: 1rem;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.demo-panel h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.agent-grid {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.agent-card {
|
||||
padding: 1rem;
|
||||
background: #f8f9fa;
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.agent-status-active {
|
||||
border-left: 4px solid #27ca3f;
|
||||
}
|
||||
|
||||
.agent-status-inactive {
|
||||
border-left: 4px solid #ff5f56;
|
||||
}
|
||||
|
||||
.activity-feed {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.activity-item {
|
||||
padding: 1rem;
|
||||
background: #f8f9fa;
|
||||
border-radius: 0.5rem;
|
||||
border-left: 4px solid #667eea;
|
||||
}
|
||||
|
||||
.demo-actions {
|
||||
text-align: center;
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Quick Start Section */
|
||||
.quick-start {
|
||||
padding: 6rem 0;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.install-options {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.install-card {
|
||||
background: white;
|
||||
border-radius: 1rem;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.install-card h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
background: #1a1a1a;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.code-block pre {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Documentation Section */
|
||||
.documentation {
|
||||
padding: 6rem 0;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.docs-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.doc-card {
|
||||
background: white;
|
||||
border-radius: 1rem;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.doc-card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.doc-card h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.doc-card p {
|
||||
color: #666;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.doc-link {
|
||||
color: #2563eb;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.doc-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
background: #1a1a1a;
|
||||
color: white;
|
||||
padding: 3rem 0 1rem;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.footer-section h4 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.footer-section ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.footer-section ul li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.footer-section a {
|
||||
color: #ccc;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.footer-section a:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
text-align: center;
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid #333;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.hamburger {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero-container {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.demo-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.install-options {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.docs-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hero-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
animation: fadeInUp 0.6s ease forwards;
|
||||
}
|
||||
|
||||
.feature-card:nth-child(2) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
.feature-card:nth-child(3) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
/* Stats Animation */
|
||||
.stats-preview {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.stat-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.stat-bar span {
|
||||
font-size: 0.9rem;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.bar {
|
||||
flex: 1;
|
||||
height: 8px;
|
||||
background: #e0e0e0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bar div {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #667eea, #764ba2);
|
||||
transition: width 1s ease;
|
||||
}
|
||||
|
||||
/* Scrollbar Styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
Reference in New Issue
Block a user