692 lines
38 KiB
HTML
692 lines
38 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>Saasfactor Dashboard</title>
|
|||
|
|
<!-- 引入Tailwind CSS -->
|
|||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|||
|
|
<!-- 引入Font Awesome图标 -->
|
|||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|||
|
|
<!-- 自定义Tailwind配置 -->
|
|||
|
|
<script>
|
|||
|
|
tailwind.config = {
|
|||
|
|
theme: {
|
|||
|
|
extend: {
|
|||
|
|
colors: {
|
|||
|
|
dark: {
|
|||
|
|
950: '#0a0c10', // 侧边栏背景
|
|||
|
|
900: '#0f1115', // 主页面背景
|
|||
|
|
800: '#121419',
|
|||
|
|
700: '#171922', // 卡片背景
|
|||
|
|
600: '#1a1c25',
|
|||
|
|
500: '#2a2c36', // 次要背景/边框
|
|||
|
|
},
|
|||
|
|
primary: {
|
|||
|
|
orange: '#ff9500',
|
|||
|
|
yellow: '#ffc247',
|
|||
|
|
cyan: '#36bffa',
|
|||
|
|
purple: '#a78bfa',
|
|||
|
|
danger: '#ef4444',
|
|||
|
|
success: '#10b981',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
fontFamily: {
|
|||
|
|
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style type="text/tailwindcss">
|
|||
|
|
@layer utilities {
|
|||
|
|
.content-auto {
|
|||
|
|
content-visibility: auto;
|
|||
|
|
}
|
|||
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
.scrollbar-hide {
|
|||
|
|
-ms-overflow-style: none;
|
|||
|
|
scrollbar-width: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body class="bg-dark-900 text-gray-100 font-sans min-h-screen flex overflow-x-hidden">
|
|||
|
|
<!-- 左侧侧边栏 -->
|
|||
|
|
<aside class="w-64 bg-dark-950 h-screen flex flex-col fixed left-0 top-0 overflow-y-auto scrollbar-hide z-10">
|
|||
|
|
<!-- 顶部Logo与组织信息 -->
|
|||
|
|
<div class="p-5 flex items-center gap-3">
|
|||
|
|
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-primary-orange to-red-500 flex items-center justify-center">
|
|||
|
|
<i class="fa-solid fa-basketball text-white"></i>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div class="font-semibold text-lg flex items-center gap-1">
|
|||
|
|
Organization
|
|||
|
|
<i class="fa-solid fa-chevron-down text-xs text-gray-400"></i>
|
|||
|
|
</div>
|
|||
|
|
<div class="text-sm text-gray-400">Saasfactor</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 导航菜单 -->
|
|||
|
|
<nav class="flex-1 px-3 py-2">
|
|||
|
|
<ul class="space-y-1">
|
|||
|
|
<!-- Dashboard 激活项 -->
|
|||
|
|
<li>
|
|||
|
|
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-dark-600 text-white">
|
|||
|
|
<i class="fa-solid fa-gauge w-5 text-center"></i>
|
|||
|
|
<span>Dashboard</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<!-- Agents -->
|
|||
|
|
<li>
|
|||
|
|
<a href="#" class="flex items-center justify-between px-3 py-2.5 rounded-lg hover:bg-dark-600 text-gray-300 hover:text-white transition-colors">
|
|||
|
|
<div class="flex items-center gap-3">
|
|||
|
|
<i class="fa-solid fa-robot w-5 text-center"></i>
|
|||
|
|
<span>Agents</span>
|
|||
|
|
</div>
|
|||
|
|
<span class="bg-dark-500 text-xs px-2 py-0.5 rounded-full">3</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<!-- MCP -->
|
|||
|
|
<li>
|
|||
|
|
<a href="#" class="flex items-center justify-between px-3 py-2.5 rounded-lg hover:bg-dark-600 text-gray-300 hover:text-white transition-colors">
|
|||
|
|
<div class="flex items-center gap-3">
|
|||
|
|
<i class="fa-solid fa-code w-5 text-center"></i>
|
|||
|
|
<span>MCP</span>
|
|||
|
|
</div>
|
|||
|
|
<span class="bg-dark-500 text-xs px-2 py-0.5 rounded-full">21</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<!-- Model APIs -->
|
|||
|
|
<li>
|
|||
|
|
<a href="#" class="flex items-center justify-between px-3 py-2.5 rounded-lg hover:bg-dark-600 text-gray-300 hover:text-white transition-colors">
|
|||
|
|
<div class="flex items-center gap-3">
|
|||
|
|
<i class="fa-solid fa-cube w-5 text-center"></i>
|
|||
|
|
<span>Model APIs</span>
|
|||
|
|
</div>
|
|||
|
|
<span class="bg-dark-500 text-xs px-2 py-0.5 rounded-full">13</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<!-- Policies -->
|
|||
|
|
<li>
|
|||
|
|
<a href="#" class="flex items-center justify-between px-3 py-2.5 rounded-lg hover:bg-dark-600 text-gray-300 hover:text-white transition-colors">
|
|||
|
|
<div class="flex items-center gap-3">
|
|||
|
|
<i class="fa-solid fa-shield-halved w-5 text-center"></i>
|
|||
|
|
<span>Policies</span>
|
|||
|
|
</div>
|
|||
|
|
<span class="bg-dark-500 text-xs px-2 py-0.5 rounded-full">1</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<!-- 分隔线 -->
|
|||
|
|
<li class="my-4 border-t border-dark-500"></li>
|
|||
|
|
|
|||
|
|
<!-- API Keys -->
|
|||
|
|
<li>
|
|||
|
|
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-dark-600 text-gray-300 hover:text-white transition-colors">
|
|||
|
|
<i class="fa-solid fa-key w-5 text-center"></i>
|
|||
|
|
<span>API Keys</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<!-- Settings -->
|
|||
|
|
<li>
|
|||
|
|
<a href="#" class="flex items-center justify-between px-3 py-2.5 rounded-lg hover:bg-dark-600 text-gray-300 hover:text-white transition-colors">
|
|||
|
|
<div class="flex items-center gap-3">
|
|||
|
|
<i class="fa-solid fa-gear w-5 text-center"></i>
|
|||
|
|
<span>Settings</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex gap-1">
|
|||
|
|
<span class="w-2 h-2 rounded-full bg-primary-orange"></span>
|
|||
|
|
<span class="w-2 h-2 rounded-full bg-yellow-500"></span>
|
|||
|
|
<span class="w-2 h-2 rounded-full bg-gray-500"></span>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<!-- Team -->
|
|||
|
|
<li>
|
|||
|
|
<a href="#" class="flex items-center justify-between px-3 py-2.5 rounded-lg hover:bg-dark-600 text-gray-300 hover:text-white transition-colors">
|
|||
|
|
<div class="flex items-center gap-3">
|
|||
|
|
<i class="fa-solid fa-users w-5 text-center"></i>
|
|||
|
|
<span>Team</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex gap-1">
|
|||
|
|
<span class="w-2 h-2 rounded-full bg-primary-orange"></span>
|
|||
|
|
<span class="w-2 h-2 rounded-full bg-blue-500"></span>
|
|||
|
|
<span class="w-2 h-2 rounded-full bg-gray-500"></span>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<!-- Service Accounts -->
|
|||
|
|
<li>
|
|||
|
|
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-dark-600 text-gray-300 hover:text-white transition-colors">
|
|||
|
|
<i class="fa-solid fa-user-shield w-5 text-center"></i>
|
|||
|
|
<span>Service Accounts</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<!-- Integrations -->
|
|||
|
|
<li>
|
|||
|
|
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-dark-600 text-gray-300 hover:text-white transition-colors">
|
|||
|
|
<i class="fa-solid fa-plug w-5 text-center"></i>
|
|||
|
|
<span>Integrations</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<!-- 分隔线 -->
|
|||
|
|
<li class="my-4 border-t border-dark-500"></li>
|
|||
|
|
|
|||
|
|
<!-- Information -->
|
|||
|
|
<li>
|
|||
|
|
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-dark-600 text-gray-300 hover:text-white transition-colors">
|
|||
|
|
<i class="fa-solid fa-circle-info w-5 text-center"></i>
|
|||
|
|
<span>Information</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<!-- Account -->
|
|||
|
|
<li>
|
|||
|
|
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-dark-600 text-gray-300 hover:text-white transition-colors">
|
|||
|
|
<i class="fa-solid fa-user w-5 text-center"></i>
|
|||
|
|
<span>Account</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</nav>
|
|||
|
|
|
|||
|
|
<!-- 底部用户信息 -->
|
|||
|
|
<div class="p-4 border-t border-dark-500">
|
|||
|
|
<div class="flex items-center gap-3">
|
|||
|
|
<img src="https://picsum.photos/id/64/40/40" alt="User Avatar" class="w-8 h-8 rounded-full object-cover">
|
|||
|
|
<div>
|
|||
|
|
<div class="font-medium text-sm">Alex Smith</div>
|
|||
|
|
<div class="text-xs text-gray-400">alex@gmail.com</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</aside>
|
|||
|
|
|
|||
|
|
<!-- 主内容区域 -->
|
|||
|
|
<main class="ml-64 flex-1 p-6">
|
|||
|
|
<!-- 顶部导航与日期选择区 -->
|
|||
|
|
<div class="flex justify-between items-center mb-6">
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<i class="fa-solid fa-gauge text-gray-400"></i>
|
|||
|
|
<span class="font-medium">Dashboard</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-4">
|
|||
|
|
<span class="text-gray-400">Date Range</span>
|
|||
|
|
<div class="flex items-center gap-2 bg-dark-600 rounded-lg px-3 py-2">
|
|||
|
|
<span>10 December</span>
|
|||
|
|
<span class="text-gray-400">To</span>
|
|||
|
|
<span>12 December</span>
|
|||
|
|
<i class="fa-solid fa-calendar text-gray-400"></i>
|
|||
|
|
</div>
|
|||
|
|
<button class="text-primary-orange hover:text-orange-400 transition-colors">Clear</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 卡片网格布局 -->
|
|||
|
|
<div class="grid grid-cols-3 gap-6">
|
|||
|
|
<!-- 第一行：3个状态卡片 -->
|
|||
|
|
<!-- Active Agents 卡片 -->
|
|||
|
|
<div class="bg-dark-700 rounded-xl p-5">
|
|||
|
|
<div class="flex justify-between items-center mb-4">
|
|||
|
|
<h3 class="font-semibold text-lg">Active Agents</h3>
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<span class="text-sm text-gray-400">Errors</span>
|
|||
|
|
<!-- 开启状态开关 -->
|
|||
|
|
<div class="w-10 h-5 rounded-full bg-primary-orange relative cursor-pointer">
|
|||
|
|
<div class="absolute right-0.5 top-0.5 w-4 h-4 rounded-full bg-white"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="text-4xl font-bold mb-4">3</div>
|
|||
|
|
<!-- 进度条 -->
|
|||
|
|
<div class="w-full h-2 rounded-full bg-dark-500 overflow-hidden mb-4">
|
|||
|
|
<div class="flex h-full">
|
|||
|
|
<div class="w-[33%] bg-primary-yellow"></div>
|
|||
|
|
<div class="w-[33%] bg-primary-cyan"></div>
|
|||
|
|
<div class="w-[34%] bg-primary-purple"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 明细列表 -->
|
|||
|
|
<ul class="space-y-2">
|
|||
|
|
<li class="flex justify-between items-center">
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<span class="w-3 h-3 rounded-sm bg-primary-yellow"></span>
|
|||
|
|
<span class="text-sm text-gray-300">template-google-adk-api</span>
|
|||
|
|
</div>
|
|||
|
|
<span class="text-sm">1</span>
|
|||
|
|
</li>
|
|||
|
|
<li class="flex justify-between items-center">
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<span class="w-3 h-3 rounded-sm bg-primary-cyan"></span>
|
|||
|
|
<span class="text-sm text-gray-300">mcp-google-adk-api</span>
|
|||
|
|
<span class="bg-primary-danger text-white text-xs px-1.5 py-0.5 rounded">Error</span>
|
|||
|
|
</div>
|
|||
|
|
<span class="text-sm">1</span>
|
|||
|
|
</li>
|
|||
|
|
<li class="flex justify-between items-center">
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<span class="w-3 h-3 rounded-sm bg-primary-purple"></span>
|
|||
|
|
<span class="text-sm text-gray-300">template-openai-api</span>
|
|||
|
|
<span class="bg-primary-danger text-white text-xs px-1.5 py-0.5 rounded">Error</span>
|
|||
|
|
</div>
|
|||
|
|
<span class="text-sm">1</span>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Active MCP Servers 卡片 -->
|
|||
|
|
<div class="bg-dark-700 rounded-xl p-5">
|
|||
|
|
<div class="flex justify-between items-center mb-4">
|
|||
|
|
<h3 class="font-semibold text-lg">Active MCP Servers</h3>
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<span class="text-sm text-gray-400">Errors</span>
|
|||
|
|
<!-- 关闭状态开关 -->
|
|||
|
|
<div class="w-10 h-5 rounded-full bg-dark-500 relative cursor-pointer">
|
|||
|
|
<div class="absolute left-0.5 top-0.5 w-4 h-4 rounded-full bg-gray-400"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="text-4xl font-bold mb-4">21</div>
|
|||
|
|
<!-- 进度条 -->
|
|||
|
|
<div class="w-full h-2 rounded-full bg-dark-500 overflow-hidden mb-4">
|
|||
|
|
<div class="flex h-full">
|
|||
|
|
<div class="w-[71%] bg-primary-yellow"></div>
|
|||
|
|
<div class="w-[19%] bg-primary-cyan"></div>
|
|||
|
|
<div class="w-[10%] bg-primary-purple"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 明细列表 -->
|
|||
|
|
<ul class="space-y-2">
|
|||
|
|
<li class="flex justify-between items-center">
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<span class="w-3 h-3 rounded-sm bg-primary-yellow"></span>
|
|||
|
|
<span class="text-sm text-gray-300">linear-demo</span>
|
|||
|
|
</div>
|
|||
|
|
<span class="text-sm">15</span>
|
|||
|
|
</li>
|
|||
|
|
<li class="flex justify-between items-center">
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<span class="w-3 h-3 rounded-sm bg-primary-cyan"></span>
|
|||
|
|
<span class="text-sm text-gray-300">google-maps</span>
|
|||
|
|
</div>
|
|||
|
|
<span class="text-sm">4</span>
|
|||
|
|
</li>
|
|||
|
|
<li class="flex justify-between items-center">
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<span class="w-3 h-3 rounded-sm bg-primary-purple"></span>
|
|||
|
|
<span class="text-sm text-gray-300">explorer-mcp</span>
|
|||
|
|
</div>
|
|||
|
|
<span class="text-sm">2</span>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Active Models 卡片 -->
|
|||
|
|
<div class="bg-dark-700 rounded-xl p-5">
|
|||
|
|
<div class="flex justify-between items-center mb-4">
|
|||
|
|
<h3 class="font-semibold text-lg">Active Models</h3>
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<span class="text-sm text-gray-400">Errors</span>
|
|||
|
|
<!-- 关闭状态开关 -->
|
|||
|
|
<div class="w-10 h-5 rounded-full bg-dark-500 relative cursor-pointer">
|
|||
|
|
<div class="absolute left-0.5 top-0.5 w-4 h-4 rounded-full bg-gray-400"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="text-4xl font-bold mb-4">13</div>
|
|||
|
|
<!-- 进度条 -->
|
|||
|
|
<div class="w-full h-2 rounded-full bg-dark-500 overflow-hidden mb-4">
|
|||
|
|
<div class="flex h-full">
|
|||
|
|
<div class="w-[46%] bg-primary-yellow"></div>
|
|||
|
|
<div class="w-[15%] bg-primary-cyan"></div>
|
|||
|
|
<div class="w-[39%] bg-primary-purple"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 明细列表 -->
|
|||
|
|
<ul class="space-y-2">
|
|||
|
|
<li class="flex justify-between items-center">
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<span class="w-3 h-3 rounded-sm bg-primary-yellow"></span>
|
|||
|
|
<span class="text-sm text-gray-300">gpt-40-2024-08-12</span>
|
|||
|
|
</div>
|
|||
|
|
<span class="text-sm">2</span>
|
|||
|
|
</li>
|
|||
|
|
<li class="flex justify-between items-center">
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<span class="w-3 h-3 rounded-sm bg-primary-cyan"></span>
|
|||
|
|
<span class="text-sm text-gray-300">cerebras-sandbox</span>
|
|||
|
|
</div>
|
|||
|
|
<span class="text-sm">6</span>
|
|||
|
|
</li>
|
|||
|
|
<li class="flex justify-between items-center">
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<span class="w-3 h-3 rounded-sm bg-primary-purple"></span>
|
|||
|
|
<span class="text-sm text-gray-300">sandbox-openai</span>
|
|||
|
|
</div>
|
|||
|
|
<span class="text-sm">5</span>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 第二行 -->
|
|||
|
|
<!-- All deployment request Insights 卡片（跨2列）【已修复对齐问题】 -->
|
|||
|
|
<div class="bg-dark-700 rounded-xl p-5 col-span-2">
|
|||
|
|
<h3 class="font-semibold text-lg mb-4">All deployment request Insights</h3>
|
|||
|
|
<!-- 数据概览 -->
|
|||
|
|
<div class="grid grid-cols-4 gap-4 mb-6">
|
|||
|
|
<div>
|
|||
|
|
<div class="text-sm text-gray-400 mb-1">Requests</div>
|
|||
|
|
<div class="text-2xl font-bold">36</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div class="text-sm text-gray-400 mb-1">Agents calls</div>
|
|||
|
|
<div class="text-2xl font-bold">3</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div class="text-sm text-gray-400 mb-1">MCP servers calls</div>
|
|||
|
|
<div class="text-2xl font-bold">21</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div class="text-sm text-gray-400 mb-1">Models requests</div>
|
|||
|
|
<div class="text-2xl font-bold">13</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 【重构后】图表容器 完美对齐0刻度 -->
|
|||
|
|
<div class="relative h-52 w-full">
|
|||
|
|
<!-- 绘图区（网格线+Y轴+柱子） 预留底部20px给时间标签 -->
|
|||
|
|
<div class="relative h-[calc(100%-20px)] w-full">
|
|||
|
|
<!-- 横向网格线 与Y轴刻度完全对齐 0刻度线在绘图区最底部 -->
|
|||
|
|
<div class="absolute left-0 top-0 w-full h-full z-0">
|
|||
|
|
<div class="absolute w-full h-[1px] bg-white/[0.06] top-0"></div>
|
|||
|
|
<div class="absolute w-full h-[1px] bg-white/[0.06] top-[25%]"></div>
|
|||
|
|
<div class="absolute w-full h-[1px] bg-white/[0.06] top-[50%]"></div>
|
|||
|
|
<div class="absolute w-full h-[1px] bg-white/[0.06] top-[75%]"></div>
|
|||
|
|
<div class="absolute w-full h-[1px] bg-white/[0.06] top-[100%]"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Y轴刻度 0刻度与绘图区最底部的0网格线完美垂直对齐 -->
|
|||
|
|
<div class="absolute left-0 top-0 h-full flex flex-col justify-between text-xs text-gray-500 z-10">
|
|||
|
|
<span>8</span>
|
|||
|
|
<span>6</span>
|
|||
|
|
<span>4</span>
|
|||
|
|
<span>2</span>
|
|||
|
|
<span>0</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 柱状图容器 柱子底部严丝合缝对齐0网格线 -->
|
|||
|
|
<div class="ml-6 h-full flex items-end justify-between gap-1 z-10 relative">
|
|||
|
|
<!-- 3:02 PM 柱子 -->
|
|||
|
|
<div class="flex items-end gap-1 h-full w-full justify-center">
|
|||
|
|
<div class="w-3 bg-primary-purple rounded-t-sm" style="height: 12.5%"></div>
|
|||
|
|
<div class="w-3 bg-primary-yellow rounded-t-sm" style="height: 25%"></div>
|
|||
|
|
<div class="w-3 bg-primary-cyan rounded-t-sm" style="height: 18.75%"></div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 3:07 PM 柱子 -->
|
|||
|
|
<div class="flex items-end gap-1 h-full w-full justify-center">
|
|||
|
|
<div class="w-3 bg-primary-purple rounded-t-sm" style="height: 25%"></div>
|
|||
|
|
<div class="w-3 bg-primary-yellow rounded-t-sm" style="height: 31.25%"></div>
|
|||
|
|
<div class="w-3 bg-primary-cyan rounded-t-sm" style="height: 25%"></div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 3:12 PM 柱子 -->
|
|||
|
|
<div class="flex items-end gap-1 h-full w-full justify-center">
|
|||
|
|
<div class="w-3 bg-primary-purple rounded-t-sm" style="height: 31.25%"></div>
|
|||
|
|
<div class="w-3 bg-primary-yellow rounded-t-sm" style="height: 62.5%"></div>
|
|||
|
|
<div class="w-3 bg-primary-cyan rounded-t-sm" style="height: 50%"></div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 3:17 PM 柱子 -->
|
|||
|
|
<div class="flex items-end gap-1 h-full w-full justify-center">
|
|||
|
|
<div class="w-3 bg-primary-purple rounded-t-sm" style="height: 31.25%"></div>
|
|||
|
|
<div class="w-3 bg-primary-yellow rounded-t-sm" style="height: 37.5%"></div>
|
|||
|
|
<div class="w-3 bg-primary-cyan rounded-t-sm" style="height: 25%"></div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 3:22 PM 柱子 -->
|
|||
|
|
<div class="flex items-end gap-1 h-full w-full justify-center">
|
|||
|
|
<div class="w-3 bg-primary-purple rounded-t-sm" style="height: 18.75%"></div>
|
|||
|
|
<div class="w-3 bg-primary-yellow rounded-t-sm" style="height: 31.25%"></div>
|
|||
|
|
<div class="w-3 bg-primary-cyan rounded-t-sm" style="height: 18.75%"></div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 3:27 PM 柱子 -->
|
|||
|
|
<div class="flex items-end gap-1 h-full w-full justify-center">
|
|||
|
|
<div class="w-3 bg-primary-purple rounded-t-sm" style="height: 18.75%"></div>
|
|||
|
|
<div class="w-3 bg-primary-yellow rounded-t-sm" style="height: 37.5%"></div>
|
|||
|
|
<div class="w-3 bg-primary-cyan rounded-t-sm" style="height: 31.25%"></div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 3:32 PM 柱子 -->
|
|||
|
|
<div class="flex items-end gap-1 h-full w-full justify-center">
|
|||
|
|
<div class="w-3 bg-primary-purple rounded-t-sm" style="height: 12.5%"></div>
|
|||
|
|
<div class="w-3 bg-primary-yellow rounded-t-sm" style="height: 25%"></div>
|
|||
|
|
<div class="w-3 bg-primary-cyan rounded-t-sm" style="height: 31.25%"></div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 3:37 PM 柱子 -->
|
|||
|
|
<div class="flex items-end gap-1 h-full w-full justify-center">
|
|||
|
|
<div class="w-3 bg-primary-purple rounded-t-sm" style="height: 31.25%"></div>
|
|||
|
|
<div class="w-3 bg-primary-yellow rounded-t-sm" style="height: 100%"></div>
|
|||
|
|
<div class="w-3 bg-primary-cyan rounded-t-sm" style="height: 37.5%"></div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 3:42 PM 柱子 -->
|
|||
|
|
<div class="flex items-end gap-1 h-full w-full justify-center">
|
|||
|
|
<div class="w-3 bg-primary-purple rounded-t-sm" style="height: 12.5%"></div>
|
|||
|
|
<div class="w-3 bg-primary-yellow rounded-t-sm" style="height: 62.5%"></div>
|
|||
|
|
<div class="w-3 bg-primary-cyan rounded-t-sm" style="height: 31.25%"></div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 3:47 PM 柱子 -->
|
|||
|
|
<div class="flex items-end gap-1 h-full w-full justify-center">
|
|||
|
|
<div class="w-3 bg-primary-purple rounded-t-sm" style="height: 31.25%"></div>
|
|||
|
|
<div class="w-3 bg-primary-yellow rounded-t-sm" style="height: 37.5%"></div>
|
|||
|
|
<div class="w-3 bg-primary-cyan rounded-t-sm" style="height: 25%"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 时间标签区 统一放在0刻度线下方 与对应柱子居中对齐 -->
|
|||
|
|
<div class="ml-6 w-full flex justify-between gap-1 mt-1">
|
|||
|
|
<span class="text-xs text-gray-500 w-full text-center">3:02 PM</span>
|
|||
|
|
<span class="text-xs text-gray-500 w-full text-center">3:07 PM</span>
|
|||
|
|
<span class="text-xs text-gray-500 w-full text-center">3:12 PM</span>
|
|||
|
|
<span class="text-xs text-gray-500 w-full text-center">3:17 PM</span>
|
|||
|
|
<span class="text-xs text-gray-500 w-full text-center">3:22 PM</span>
|
|||
|
|
<span class="text-xs text-gray-500 w-full text-center">3:27 PM</span>
|
|||
|
|
<span class="text-xs text-gray-500 w-full text-center">3:32 PM</span>
|
|||
|
|
<span class="text-xs text-gray-500 w-full text-center">3:37 PM</span>
|
|||
|
|
<span class="text-xs text-gray-500 w-full text-center">3:42 PM</span>
|
|||
|
|
<span class="text-xs text-gray-500 w-full text-center">3:47 PM</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 图例 -->
|
|||
|
|
<div class="flex justify-center gap-6 mt-4">
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<span class="w-3 h-3 rounded-sm bg-primary-purple"></span>
|
|||
|
|
<span class="text-xs text-gray-400">Agents calls</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<span class="w-3 h-3 rounded-sm bg-primary-yellow"></span>
|
|||
|
|
<span class="text-xs text-gray-400">MCP servers calls</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<span class="w-3 h-3 rounded-sm bg-primary-cyan"></span>
|
|||
|
|
<span class="text-xs text-gray-400">Models requests</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Top 10 requests 卡片 -->
|
|||
|
|
<div class="bg-dark-700 rounded-xl p-5">
|
|||
|
|
<h3 class="font-semibold text-lg mb-4">Top 10 requests</h3>
|
|||
|
|
<!-- 标签切换 -->
|
|||
|
|
<div class="flex mb-4">
|
|||
|
|
<button class="flex-1 bg-dark-500 text-white py-1.5 rounded-l-lg text-sm">General</button>
|
|||
|
|
<button class="flex-1 bg-transparent text-gray-400 py-1.5 rounded-r-lg text-sm hover:bg-dark-600 transition-colors">Errors</button>
|
|||
|
|
</div>
|
|||
|
|
<!-- 列表 -->
|
|||
|
|
<ul class="space-y-3">
|
|||
|
|
<li class="flex justify-between items-center">
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<i class="fa-solid fa-cube text-gray-400"></i>
|
|||
|
|
<span class="text-sm text-gray-300">gpt-40-2024-08-12</span>
|
|||
|
|
</div>
|
|||
|
|
<span class="text-sm">7</span>
|
|||
|
|
</li>
|
|||
|
|
<li class="flex justify-between items-center">
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<i class="fa-solid fa-code text-gray-400"></i>
|
|||
|
|
<span class="text-sm text-gray-300">google-maps</span>
|
|||
|
|
</div>
|
|||
|
|
<span class="text-sm">4</span>
|
|||
|
|
</li>
|
|||
|
|
<li class="flex justify-between items-center">
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<i class="fa-solid fa-code text-gray-400"></i>
|
|||
|
|
<span class="text-sm text-gray-300">explorer-mcp</span>
|
|||
|
|
</div>
|
|||
|
|
<span class="text-sm">2</span>
|
|||
|
|
</li>
|
|||
|
|
<li class="flex justify-between items-center">
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<i class="fa-solid fa-cube text-gray-400"></i>
|
|||
|
|
<span class="text-sm text-gray-300">template-google-adk-api</span>
|
|||
|
|
</div>
|
|||
|
|
<span class="text-sm">4</span>
|
|||
|
|
</li>
|
|||
|
|
<li class="flex justify-between items-center">
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<i class="fa-solid fa-cube text-gray-400"></i>
|
|||
|
|
<span class="text-sm text-gray-300">linear-demo</span>
|
|||
|
|
</div>
|
|||
|
|
<span class="text-sm">2</span>
|
|||
|
|
</li>
|
|||
|
|
<li class="flex justify-between items-center">
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<i class="fa-solid fa-code text-gray-400"></i>
|
|||
|
|
<span class="text-sm text-gray-300">cerebras-sandbox</span>
|
|||
|
|
</div>
|
|||
|
|
<span class="text-sm">1</span>
|
|||
|
|
</li>
|
|||
|
|
<li class="flex justify-between items-center">
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<i class="fa-solid fa-cube text-gray-400"></i>
|
|||
|
|
<span class="text-sm text-gray-300">sandbox-openai</span>
|
|||
|
|
</div>
|
|||
|
|
<span class="text-sm">2</span>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 第三行 -->
|
|||
|
|
<!-- What's new 卡片（跨2列） -->
|
|||
|
|
<div class="bg-dark-700 rounded-xl p-5 col-span-2">
|
|||
|
|
<div class="flex justify-between items-center mb-4">
|
|||
|
|
<h3 class="font-semibold text-lg">What's new</h3>
|
|||
|
|
<a href="#" class="text-primary-orange text-sm flex items-center gap-1 hover:text-orange-400 transition-colors">
|
|||
|
|
Full change log
|
|||
|
|
<i class="fa-solid fa-arrow-up-right-from-square"></i>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<p class="text-sm text-gray-400 mb-4">Stay up to date with our latest feature and improvements</p>
|
|||
|
|
<!-- 更新列表 -->
|
|||
|
|
<ul class="space-y-4">
|
|||
|
|
<li class="flex justify-between items-start">
|
|||
|
|
<div>
|
|||
|
|
<h4 class="font-medium mb-1">New framework supported: PydanticAI</h4>
|
|||
|
|
<p class="text-sm text-gray-400">Added support for PydanticAI framework</p>
|
|||
|
|
</div>
|
|||
|
|
<span class="text-xs text-gray-500">2025-04-12</span>
|
|||
|
|
</li>
|
|||
|
|
<li class="flex justify-between items-start">
|
|||
|
|
<div>
|
|||
|
|
<h4 class="font-medium mb-1">New framework supported: Google ADK</h4>
|
|||
|
|
<p class="text-sm text-gray-400">Added support for Google ADK (Agent Development Kit) framework</p>
|
|||
|
|
</div>
|
|||
|
|
<span class="text-xs text-gray-500">2025-04-07</span>
|
|||
|
|
</li>
|
|||
|
|
<li class="flex justify-between items-start">
|
|||
|
|
<div>
|
|||
|
|
<h4 class="font-medium mb-1">Improved Analytics Dashboard</h4>
|
|||
|
|
<p class="text-sm text-gray-400">Enhanced real-time monitoring with faster data refresh</p>
|
|||
|
|
</div>
|
|||
|
|
<span class="text-xs text-gray-500">2025-04-15</span>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Recent requests (10) 卡片 -->
|
|||
|
|
<div class="bg-dark-700 rounded-xl p-5">
|
|||
|
|
<h3 class="font-semibold text-lg mb-4">Recent requests (10)</h3>
|
|||
|
|
<!-- 列表 -->
|
|||
|
|
<ul class="space-y-3">
|
|||
|
|
<li class="flex items-center gap-3">
|
|||
|
|
<i class="fa-solid fa-cube text-gray-400"></i>
|
|||
|
|
<div class="flex-1">
|
|||
|
|
<div class="flex justify-between items-center">
|
|||
|
|
<span class="text-sm font-medium">linear-demo</span>
|
|||
|
|
<span class="text-xs text-gray-500">in 21 hours</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-1 text-xs text-primary-success">
|
|||
|
|
<i class="fa-solid fa-circle-check"></i>
|
|||
|
|
<span>Success</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="flex items-center gap-3">
|
|||
|
|
<i class="fa-solid fa-robot text-gray-400"></i>
|
|||
|
|
<div class="flex-1">
|
|||
|
|
<div class="flex justify-between items-center">
|
|||
|
|
<span class="text-sm font-medium">myagent</span>
|
|||
|
|
<span class="text-xs text-gray-500">in 21 hours</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-1 text-xs text-primary-success">
|
|||
|
|
<i class="fa-solid fa-circle-check"></i>
|
|||
|
|
<span>Success</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="flex items-center gap-3">
|
|||
|
|
<i class="fa-solid fa-cube text-gray-400"></i>
|
|||
|
|
<div class="flex-1">
|
|||
|
|
<div class="flex justify-between items-center">
|
|||
|
|
<span class="text-sm font-medium">linear-demo</span>
|
|||
|
|
<span class="text-xs text-gray-500">in 21 hours</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-1 text-xs text-primary-success">
|
|||
|
|
<i class="fa-solid fa-circle-check"></i>
|
|||
|
|
<span>Success</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="flex items-center gap-3">
|
|||
|
|
<i class="fa-solid fa-code text-gray-400"></i>
|
|||
|
|
<div class="flex-1">
|
|||
|
|
<div class="flex justify-between items-center">
|
|||
|
|
<span class="text-sm font-medium">gpt-40</span>
|
|||
|
|
<span class="text-xs text-gray-500">in 21 hours</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-1 text-xs text-primary-success">
|
|||
|
|
<i class="fa-solid fa-circle-check"></i>
|
|||
|
|
<span>Success</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="flex items-center gap-3">
|
|||
|
|
<i class="fa-solid fa-cube text-gray-400"></i>
|
|||
|
|
<div class="flex-1">
|
|||
|
|
<div class="flex justify-between items-center">
|
|||
|
|
<span class="text-sm font-medium">linear-demo</span>
|
|||
|
|
<span class="text-xs text-gray-500">in 21 hours</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-1 text-xs text-primary-success">
|
|||
|
|
<i class="fa-solid fa-circle-check"></i>
|
|||
|
|
<span>Success</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</main>
|
|||
|
|
</body>
|
|||
|
|
</html>
|