feat: 重构前后端架构，添加Go后端和Python Agent服务
- 新增 Go 语言后端服务(server/)，包含用户认证、Agent管理、数据库连接等API - 新增 Python Agent 服务(agent/)，实现Agent核心逻辑和工具集 - 前端从原生HTML迁移到Vue.js框架(web/src/) - 添加 Docker Compose 支持(docker-compose.yml) - 添加项目架构文档(docs/ARCHITECTURE.md) - 添加环境变量示例(.env.example)和本地启动脚本(start-local.ps1) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
337
web/agents.html
337
web/agents.html
@@ -1,337 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Remo MVP Design Interface</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.4.0/css/all.min.css">
|
||||
<!-- 自定义Tailwind配置 -->
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#1E6BF9',
|
||||
figma: '#F24E1E',
|
||||
action: '#000000',
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style type="text/tailwindcss">
|
||||
@layer utilities {
|
||||
.node-shadow {
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
}
|
||||
.flow-line {
|
||||
@apply bg-gray-300 w-0.5;
|
||||
}
|
||||
.flow-line-h {
|
||||
@apply bg-gray-300 h-0.5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-100 font-sans h-screen flex flex-col overflow-hidden">
|
||||
<!-- 顶部浏览器模拟栏 -->
|
||||
<div class="bg-white border-b border-gray-200 px-4 py-2 flex items-center gap-2">
|
||||
<div class="flex gap-1.5">
|
||||
<div class="w-3 h-3 rounded-full bg-red-400"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-green-400"></div>
|
||||
</div>
|
||||
<div class="flex-1 mx-4 bg-gray-100 rounded-md px-3 py-1 text-sm text-gray-500 flex items-center gap-2">
|
||||
<i class="fa-solid fa-lock text-xs"></i>
|
||||
<span>Remo MVP Design</span>
|
||||
</div>
|
||||
<div class="flex gap-2 text-gray-500">
|
||||
<i class="fa-solid fa-chevron-left"></i>
|
||||
<i class="fa-solid fa-chevron-right opacity-50"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主内容三栏布局 -->
|
||||
<div class="flex flex-1 overflow-hidden">
|
||||
<!-- 左侧边栏 -->
|
||||
<aside class="w-64 bg-white border-r border-gray-200 flex flex-col h-full">
|
||||
<!-- 顶部导航信息 -->
|
||||
<div class="p-4 border-b border-gray-200">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<div class="flex items-center gap-1">
|
||||
<i class="fa-solid fa-th text-gray-600"></i>
|
||||
<span class="font-medium text-gray-800">Designera</span>
|
||||
<span class="text-gray-400">|</span>
|
||||
<span class="text-gray-600 text-sm">Web Design</span>
|
||||
</div>
|
||||
<i class="fa-solid fa-window-maximize text-gray-500"></i>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500">Drafts</p>
|
||||
</div>
|
||||
|
||||
<!-- 文件/资产标签栏 -->
|
||||
<div class="px-4 py-2 border-b border-gray-200">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex gap-4">
|
||||
<button class="text-sm font-medium text-gray-800 border-b-2 border-primary pb-1">File</button>
|
||||
<button class="text-sm font-medium text-gray-400 pb-1">Assets</button>
|
||||
</div>
|
||||
<i class="fa-solid fa-magnifying-glass text-gray-500 text-sm"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pages区域 -->
|
||||
<div class="p-4 border-b border-gray-200">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Pages</span>
|
||||
<button class="text-gray-500 hover:text-gray-800">
|
||||
<i class="fa-solid fa-plus text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 bg-gray-100 rounded px-3 py-2">
|
||||
<i class="fa-solid fa-palette text-sm text-gray-600"></i>
|
||||
<span class="text-sm font-medium text-gray-800">Design</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Layers区域 -->
|
||||
<div class="p-4 flex-1 overflow-y-auto">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<i class="fa-solid fa-layer-group text-xs text-gray-500"></i>
|
||||
<span class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Layers</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 中间画布区域 -->
|
||||
<main class="flex-1 bg-gray-50 relative overflow-auto">
|
||||
<!-- 流程图容器 -->
|
||||
<div class="min-h-full w-full flex flex-col items-center py-10 px-4">
|
||||
<!-- 节点1 -->
|
||||
<div class="node bg-white rounded-lg node-shadow w-72 p-3 relative z-10">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<input type="checkbox" checked class="w-5 h-5 rounded text-primary focus:ring-primary">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i class="fa-brands fa-figma text-figma text-lg"></i>
|
||||
<span class="font-medium text-gray-800">Figma</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-500">
|
||||
<i class="fa-solid fa-arrow-up-right-from-square text-sm"></i>
|
||||
<i class="fa-solid fa-pen text-sm"></i>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-700 ml-8 mt-1">1. Start your project from sketch</p>
|
||||
</div>
|
||||
|
||||
<!-- 连接线1 -->
|
||||
<div class="flow-line h-6"></div>
|
||||
|
||||
<!-- 节点2 Action黑色节点 -->
|
||||
<div class="node bg-action rounded-lg node-shadow w-72 p-3 relative z-10">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-5 h-5 flex items-center justify-center">
|
||||
<i class="fa-solid fa-bolt text-white text-sm"></i>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="font-medium text-white">Action</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-white/70">
|
||||
<i class="fa-solid fa-pen text-sm"></i>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-white/90 ml-8 mt-1">2. Take a frame and start designing</p>
|
||||
</div>
|
||||
|
||||
<!-- 连接线2 -->
|
||||
<div class="flow-line h-6"></div>
|
||||
|
||||
<!-- 节点3 -->
|
||||
<div class="node bg-white rounded-lg node-shadow w-72 p-3 relative z-10">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<input type="checkbox" checked class="w-5 h-5 rounded text-primary focus:ring-primary">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i class="fa-brands fa-figma text-figma text-lg"></i>
|
||||
<span class="font-medium text-gray-800">Figma</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-500">
|
||||
<i class="fa-solid fa-arrow-up-right-from-square text-sm"></i>
|
||||
<i class="fa-solid fa-pen text-sm"></i>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-700 ml-8 mt-1">3. Add few shapes</p>
|
||||
</div>
|
||||
|
||||
<!-- 连接线3 -->
|
||||
<div class="flow-line h-6"></div>
|
||||
|
||||
<!-- 节点4 -->
|
||||
<div class="node bg-white rounded-lg node-shadow w-72 p-3 relative z-10">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<input type="checkbox" checked class="w-5 h-5 rounded text-primary focus:ring-primary">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i class="fa-brands fa-figma text-figma text-lg"></i>
|
||||
<span class="font-medium text-gray-800">Figma</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-500">
|
||||
<i class="fa-solid fa-arrow-up-right-from-square text-sm"></i>
|
||||
<i class="fa-solid fa-pen text-sm"></i>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-700 ml-8 mt-1">4. Split into paths</p>
|
||||
</div>
|
||||
|
||||
<!-- 分支连接线 -->
|
||||
<div class="w-full max-w-2xl relative flex justify-center">
|
||||
<div class="flow-line h-6"></div>
|
||||
<div class="absolute top-6 w-full flex justify-center">
|
||||
<div class="flow-line-h w-2/3"></div>
|
||||
</div>
|
||||
<div class="absolute top-6 w-full flex justify-between px-[12.5%]">
|
||||
<div class="flow-line h-6"></div>
|
||||
<div class="flow-line h-6"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分支标签 -->
|
||||
<div class="w-full max-w-2xl flex justify-between px-[12.5%] mb-6">
|
||||
<span class="bg-primary text-white text-xs font-medium px-3 py-1 rounded-full">Path A</span>
|
||||
<span class="bg-primary text-white text-xs font-medium px-3 py-1 rounded-full">Path B</span>
|
||||
</div>
|
||||
|
||||
<!-- 双分支节点 -->
|
||||
<div class="w-full max-w-2xl flex justify-between px-4">
|
||||
<!-- 节点5 Path A -->
|
||||
<div class="node bg-white rounded-lg node-shadow w-72 p-3 relative z-10">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<input type="checkbox" checked class="w-5 h-5 rounded text-primary focus:ring-primary">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i class="fa-brands fa-figma text-figma text-lg"></i>
|
||||
<span class="font-medium text-gray-800">Figma</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-500">
|
||||
<i class="fa-solid fa-arrow-up-right-from-square text-sm"></i>
|
||||
<i class="fa-solid fa-pen text-sm"></i>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-700 ml-8 mt-1">5. Split into paths</p>
|
||||
</div>
|
||||
|
||||
<!-- 节点6 Path B -->
|
||||
<div class="node bg-white rounded-lg node-shadow w-72 p-3 relative z-10">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<input type="checkbox" checked class="w-5 h-5 rounded text-primary focus:ring-primary">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i class="fa-brands fa-figma text-figma text-lg"></i>
|
||||
<span class="font-medium text-gray-800">Figma</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-500">
|
||||
<i class="fa-solid fa-arrow-up-right-from-square text-sm"></i>
|
||||
<i class="fa-solid fa-pen text-sm"></i>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-700 ml-8 mt-1">6. Split into paths</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部工具栏 -->
|
||||
<div class="absolute bottom-4 left-1/2 -translate-x-1/2 bg-white rounded-full shadow-lg px-4 py-2 flex items-center gap-4">
|
||||
<button class="text-primary p-1.5 rounded hover:bg-gray-100">
|
||||
<i class="fa-solid fa-cursor-pointer"></i>
|
||||
</button>
|
||||
<button class="text-gray-600 p-1.5 rounded hover:bg-gray-100">
|
||||
<i class="fa-solid fa-hand"></i>
|
||||
</button>
|
||||
<button class="text-gray-600 p-1.5 rounded hover:bg-gray-100">
|
||||
<i class="fa-solid fa-plus"></i>
|
||||
</button>
|
||||
<button class="text-gray-600 p-1.5 rounded hover:bg-gray-100">
|
||||
<i class="fa-regular fa-square"></i>
|
||||
</button>
|
||||
<button class="text-gray-600 p-1.5 rounded hover:bg-gray-100">
|
||||
<i class="fa-solid fa-pen"></i>
|
||||
</button>
|
||||
<button class="text-gray-600 p-1.5 rounded hover:bg-gray-100">
|
||||
<i class="fa-solid fa-t"></i>
|
||||
</button>
|
||||
<button class="text-gray-600 p-1.5 rounded hover:bg-gray-100">
|
||||
<i class="fa-regular fa-circle"></i>
|
||||
</button>
|
||||
<div class="w-px h-5 bg-gray-200"></div>
|
||||
<button class="text-gray-600 p-1.5 rounded hover:bg-gray-100">
|
||||
<i class="fa-solid fa-code"></i>
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 右侧Copilot面板 -->
|
||||
<aside class="w-96 bg-white border-l border-gray-200 flex flex-col h-full">
|
||||
<!-- 顶部Copilot品牌区 -->
|
||||
<div class="p-6 flex flex-col items-center text-center border-b border-gray-200">
|
||||
<div class="w-16 h-16 rounded-xl bg-gradient-to-tr from-blue-500 via-purple-500 to-orange-400 mb-4 flex items-center justify-center">
|
||||
<div class="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-lg"></div>
|
||||
</div>
|
||||
<h2 class="text-xl font-semibold text-gray-800 mb-2">Hey, what's on your mind today?</h2>
|
||||
<button class="bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium px-4 py-2 rounded-lg transition">
|
||||
Get advice
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 聊天对话区 -->
|
||||
<div class="flex-1 overflow-y-auto p-4 flex flex-col gap-6">
|
||||
<!-- Copilot消息 -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<div class="w-5 h-5 rounded bg-gradient-to-tr from-blue-500 to-purple-500 flex items-center justify-center">
|
||||
<i class="fa-brands fa-microsoft text-white text-xs"></i>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-gray-700">Copilot</span>
|
||||
</div>
|
||||
<div class="bg-gray-100 rounded-2xl rounded-tl-none px-4 py-3 text-gray-700 ml-7">
|
||||
Advice on what, exactly? Whether it's life decisions, career choices, relationships, or something entirely random, I'm here to help. Let me know the topic, and we'll dive into it together!
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户消息 -->
|
||||
<div class="flex flex-col gap-2 items-end">
|
||||
<div class="bg-gray-800 rounded-2xl rounded-tr-none px-4 py-3 text-white max-w-[80%]">
|
||||
What are some common life decisions people seek advice on?
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部输入框 -->
|
||||
<div class="p-4 border-t border-gray-200">
|
||||
<div class="relative">
|
||||
<input type="text" placeholder="Ask anything..." class="w-full border border-gray-300 rounded-full px-4 py-3 pr-12 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
|
||||
<button class="absolute right-3 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center">
|
||||
<i class="fa-solid fa-arrow-up"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 mt-2 ml-2 text-xs text-gray-500">
|
||||
<i class="fa-brands fa-microsoft"></i>
|
||||
<span>Copilot by Microsoft</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,692 +0,0 @@
|
||||
<!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>
|
||||
909
web/graph.html
909
web/graph.html
@@ -1,909 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>思维本体元模型 — 知识图谱</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
|
||||
<script src="./graph-data.js"></script>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Microsoft YaHei', 'PingFang SC', -apple-system, sans-serif;
|
||||
background: #0a0e1a;
|
||||
color: #e6edf3;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
height: 52px;
|
||||
background: linear-gradient(90deg, #0f1628, #1a1040);
|
||||
border-bottom: 1px solid #2d2d55;
|
||||
flex-shrink: 0;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
#topbar .title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#topbar .title .icon {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
#topbar .title h1 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
background: linear-gradient(90deg, #8B5CF6, #3B82F6, #10B981);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
#topbar .subtitle {
|
||||
font-size: 12px;
|
||||
color: #8b949e;
|
||||
}
|
||||
|
||||
#topbar .controls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ctrl-btn {
|
||||
background: #1a1a2e;
|
||||
border: 1px solid #2d2d55;
|
||||
color: #c9d1d9;
|
||||
padding: 5px 12px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
.ctrl-btn:hover {
|
||||
background: #2d2d55;
|
||||
border-color: #8B5CF6;
|
||||
color: #8B5CF6;
|
||||
}
|
||||
|
||||
.ctrl-btn.active {
|
||||
background: #4C1D95;
|
||||
border-color: #8B5CF6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#main-layout {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#left-panel {
|
||||
width: 230px;
|
||||
background: #0f1628;
|
||||
border-right: 1px solid #2d2d55;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.panel-section {
|
||||
padding: 14px 14px 10px;
|
||||
border-bottom: 1px solid #1a1a2e;
|
||||
}
|
||||
|
||||
.panel-section-title {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.8px;
|
||||
color: #8b949e;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 5px 8px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: background .15s;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.legend-item:hover {
|
||||
background: #1a1a2e;
|
||||
}
|
||||
|
||||
.legend-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 0 6px currentColor;
|
||||
}
|
||||
|
||||
.legend-label {
|
||||
font-size: 13px;
|
||||
color: #c9d1d9;
|
||||
}
|
||||
|
||||
.legend-count {
|
||||
margin-left: auto;
|
||||
font-size: 11px;
|
||||
color: #8b949e;
|
||||
background: #1a1a2e;
|
||||
padding: 1px 6px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.scenario-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
margin-bottom: 4px;
|
||||
background: #1a1a2e;
|
||||
border: 1px solid #2d2d55;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
color: #c9d1d9;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
.scenario-btn:hover {
|
||||
border-color: #8B5CF6;
|
||||
color: #8B5CF6;
|
||||
background: #1a1040;
|
||||
}
|
||||
|
||||
.scenario-btn.active {
|
||||
border-color: var(--sc-color);
|
||||
color: var(--sc-color);
|
||||
background: rgba(139, 92, 246, .08);
|
||||
box-shadow: 0 0 8px rgba(139, 92, 246, .2);
|
||||
}
|
||||
|
||||
.scenario-btn .sc-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--sc-color);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.scenario-btn .sc-label {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.scenario-btn .sc-count {
|
||||
font-size: 10px;
|
||||
color: #8b949e;
|
||||
background: #0f1628;
|
||||
padding: 1px 5px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.rel-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 3px 0;
|
||||
font-size: 11px;
|
||||
color: #8b949e;
|
||||
}
|
||||
|
||||
.rel-line {
|
||||
width: 28px;
|
||||
height: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#chart-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#graph-hint {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(15, 22, 40, 0.85);
|
||||
border: 1px solid #2d2d55;
|
||||
border-radius: 8px;
|
||||
padding: 6px 14px;
|
||||
font-size: 11px;
|
||||
color: #8b949e;
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
#right-panel {
|
||||
width: 260px;
|
||||
background: #0f1628;
|
||||
border-left: 1px solid #2d2d55;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#detail-header {
|
||||
padding: 14px 16px 10px;
|
||||
border-bottom: 1px solid #1a1a2e;
|
||||
}
|
||||
|
||||
#detail-type-badge {
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 6px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#detail-name {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #e6edf3;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
#detail-tag {
|
||||
font-size: 11px;
|
||||
color: #8b949e;
|
||||
}
|
||||
|
||||
#detail-body {
|
||||
padding: 12px 16px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#detail-desc {
|
||||
font-size: 12px;
|
||||
color: #8b949e;
|
||||
line-height: 1.7;
|
||||
white-space: pre-wrap;
|
||||
background: #0a0e1a;
|
||||
border: 1px solid #1a1a2e;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#detail-connections {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.conn-title {
|
||||
font-size: 11px;
|
||||
color: #6e7681;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .5px;
|
||||
margin-bottom: 6px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.conn-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 2px;
|
||||
font-size: 11px;
|
||||
color: #8b949e;
|
||||
background: #0a0e1a;
|
||||
border: 1px solid #1a1a2e;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.conn-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.conn-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.conn-rel {
|
||||
font-size: 10px;
|
||||
color: #6e7681;
|
||||
}
|
||||
|
||||
#detail-placeholder {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #484f58;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#detail-placeholder .ph-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
#detail-placeholder .ph-text {
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
#stats-bar {
|
||||
display: flex;
|
||||
padding: 10px 16px;
|
||||
gap: 10px;
|
||||
border-top: 1px solid #1a1a2e;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-num {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 10px;
|
||||
color: #8b949e;
|
||||
}
|
||||
|
||||
/* 模拟控制栏 */
|
||||
#sim-bar {
|
||||
position: fixed;
|
||||
bottom: -160px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: min(820px, 94vw);
|
||||
background: linear-gradient(135deg, #1a1040, #0f1628);
|
||||
border: 1px solid #2d2d55;
|
||||
border-bottom: none;
|
||||
border-radius: 14px 14px 0 0;
|
||||
box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.6);
|
||||
z-index: 500;
|
||||
transition: bottom .4s cubic-bezier(.4, 0, .2, 1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#sim-bar.visible {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#sim-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 18px 8px;
|
||||
gap: 10px;
|
||||
border-bottom: 1px solid #1a1a2e;
|
||||
}
|
||||
|
||||
#sim-header .sim-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#sim-title {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #c084fc;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#sim-step-badge {
|
||||
font-size: 11px;
|
||||
background: #1a1a2e;
|
||||
color: #8b949e;
|
||||
padding: 3px 10px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #2d2d55;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
#sim-phase-badge {
|
||||
font-size: 10px;
|
||||
padding: 3px 9px;
|
||||
border-radius: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#sim-progress {
|
||||
height: 3px;
|
||||
background: #1a1a2e;
|
||||
margin: 0 18px;
|
||||
}
|
||||
|
||||
#sim-progress-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #8B5CF6, #c084fc);
|
||||
border-radius: 2px;
|
||||
transition: width .4s ease;
|
||||
}
|
||||
|
||||
#sim-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 18px 14px;
|
||||
}
|
||||
|
||||
#sim-desc {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
color: #c9d1d9;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
#sim-desc .sim-step-title {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #e6edf3;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
#sim-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sim-btn {
|
||||
padding: 7px 14px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #2d2d55;
|
||||
background: #1a1a2e;
|
||||
color: #c9d1d9;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
transition: all .2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sim-btn:hover {
|
||||
background: #2d2d55;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sim-btn:disabled {
|
||||
opacity: .35;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.sim-btn.primary {
|
||||
background: linear-gradient(135deg, #7C3AED, #8B5CF6);
|
||||
border-color: #7C3AED;
|
||||
color: #fff;
|
||||
box-shadow: 0 0 12px rgba(124, 58, 237, .4);
|
||||
}
|
||||
|
||||
.sim-btn.stop {
|
||||
background: #2d1f1f;
|
||||
border-color: #EF4444;
|
||||
color: #EF4444;
|
||||
}
|
||||
|
||||
.sim-btn.stop:hover {
|
||||
background: #EF4444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#sim-auto-btn.playing {
|
||||
background: linear-gradient(135deg, #059669, #10B981);
|
||||
border-color: #10B981;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #2d2d55;
|
||||
border-radius: 2px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="topbar">
|
||||
<div class="title">
|
||||
<span class="icon">🧠</span>
|
||||
<div>
|
||||
<h1>思维本体元模型 — 知识图谱</h1>
|
||||
<div class="subtitle">Thinking Ontology Meta-Model · ECharts Force-Directed Graph</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="controls">
|
||||
<button class="ctrl-btn" id="btn-reset">↺ 复位</button>
|
||||
<button class="ctrl-btn active" id="btn-labels">标签 ON</button>
|
||||
<button class="ctrl-btn active" id="btn-rules">规则边</button>
|
||||
<button class="ctrl-btn" id="btn-fullscreen">⛶ 全屏</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="main-layout">
|
||||
<div id="left-panel">
|
||||
<div class="panel-section">
|
||||
<div class="panel-section-title">节点类型图例</div>
|
||||
<div class="legend-item" onclick="filterByCategory(0)">
|
||||
<div class="legend-dot" style="background:#3B82F6;color:#3B82F6"></div>
|
||||
<span class="legend-label">语义对象</span>
|
||||
<span class="legend-count" id="cnt-0">—</span>
|
||||
</div>
|
||||
<div class="legend-item" onclick="filterByCategory(1)">
|
||||
<div class="legend-dot" style="background:#10B981;color:#10B981"></div>
|
||||
<span class="legend-label">对象行为</span>
|
||||
<span class="legend-count" id="cnt-1">—</span>
|
||||
</div>
|
||||
<div class="legend-item" onclick="filterByCategory(2)">
|
||||
<div class="legend-dot" style="background:#F59E0B;color:#F59E0B"></div>
|
||||
<span class="legend-label">约束规则</span>
|
||||
<span class="legend-count" id="cnt-2">—</span>
|
||||
</div>
|
||||
<div class="legend-item" onclick="filterByCategory(3)">
|
||||
<div class="legend-dot" style="background:#8B5CF6;color:#8B5CF6"></div>
|
||||
<span class="legend-label">编排流程</span>
|
||||
<span class="legend-count" id="cnt-3">—</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-section">
|
||||
<div class="panel-section-title">场景联动筛选</div>
|
||||
<div id="scenario-buttons"></div>
|
||||
<button class="ctrl-btn" style="width:100%;margin-top:6px;font-size:11px" onclick="clearScenario()">✕
|
||||
清除筛选</button>
|
||||
</div>
|
||||
<div class="panel-section">
|
||||
<div class="panel-section-title">关系类型</div>
|
||||
<div class="rel-item">
|
||||
<div class="rel-line" style="background:#3B82F6"></div><span>语义对象关系</span>
|
||||
</div>
|
||||
<div class="rel-item">
|
||||
<div class="rel-line" style="background:#10B981"></div><span>行为操作关系</span>
|
||||
</div>
|
||||
<div class="rel-item">
|
||||
<div class="rel-line"
|
||||
style="background:repeating-linear-gradient(90deg,#F59E0B 0,#F59E0B 4px,transparent 4px,transparent 8px)">
|
||||
</div><span>规则引用关系</span>
|
||||
</div>
|
||||
<div class="rel-item">
|
||||
<div class="rel-line" style="background:#8B5CF6"></div><span>流程调用关系</span>
|
||||
</div>
|
||||
<div class="rel-item">
|
||||
<div class="rel-line" style="background:#EF4444"></div><span>⭐ 核心关系</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="stats-bar">
|
||||
<div class="stat-item">
|
||||
<div class="stat-num" style="color:#3B82F6" id="s-nodes">—</div>
|
||||
<div class="stat-label">节点</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-num" style="color:#10B981" id="s-links">—</div>
|
||||
<div class="stat-label">关系</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="chart-container">
|
||||
<div id="chart"></div>
|
||||
<div id="graph-hint">🖱 拖拽节点 · 滚轮缩放 · 点击查看详情 · 双击流程触发场景</div>
|
||||
<div id="sim-bar">
|
||||
<div id="sim-header">
|
||||
<span class="sim-icon">🎬</span>
|
||||
<span id="sim-title">问题分析与解决 — 动态模拟</span>
|
||||
<span id="sim-phase-badge"></span>
|
||||
<span id="sim-step-badge">0 / 14</span>
|
||||
</div>
|
||||
<div id="sim-progress">
|
||||
<div id="sim-progress-bar" style="width:0%"></div>
|
||||
</div>
|
||||
<div id="sim-body">
|
||||
<div id="sim-desc">
|
||||
<div class="sim-step-title" id="sim-step-title">点击「下一步」开始模拟</div>
|
||||
<div id="sim-step-desc">逐步展示问题分析与解决的完整调用链路。</div>
|
||||
</div>
|
||||
<div id="sim-controls">
|
||||
<button class="sim-btn" id="sim-prev-btn" disabled onclick="simStep(-1)">◀ 上一步</button>
|
||||
<button class="sim-btn primary" id="sim-next-btn" onclick="simStep(1)">下一步 ▶</button>
|
||||
<button class="sim-btn" id="sim-auto-btn" onclick="simToggleAuto()">⏵ 自动</button>
|
||||
<button class="sim-btn stop" onclick="simStop()">■ 停止</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="right-panel">
|
||||
<div id="detail-placeholder">
|
||||
<div class="ph-icon">🔍</div>
|
||||
<div class="ph-text">点击图谱中任意节点<br>查看详细元数据信息</div>
|
||||
</div>
|
||||
<div id="detail-content" style="display:none;flex-direction:column;flex:1">
|
||||
<div id="detail-header">
|
||||
<div id="detail-type-badge"></div>
|
||||
<div id="detail-name"></div>
|
||||
<div id="detail-tag"></div>
|
||||
</div>
|
||||
<div id="detail-body">
|
||||
<div class="conn-title">节点描述</div>
|
||||
<div id="detail-desc"></div>
|
||||
<div id="detail-connections">
|
||||
<div class="conn-title" style="margin-top:14px">关联节点</div>
|
||||
<div id="conn-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const { CATEGORIES, NODES, LINKS, SCENARIOS, SIMULATION_STEPS } = ONTOLOGY_DATA;
|
||||
let chart = null, activeScenario = null, showLabels = true, showRuleEdges = true, catFilter = null;
|
||||
const CAT_COLORS = ['#3B82F6', '#10B981', '#F59E0B', '#8B5CF6'];
|
||||
const CAT_NAMES = ['语义对象', '对象行为', '约束规则', '编排流程'];
|
||||
const nodeMap = {}; NODES.forEach(n => nodeMap[n.id] = n);
|
||||
|
||||
document.getElementById('s-nodes').textContent = NODES.length;
|
||||
document.getElementById('s-links').textContent = LINKS.length;
|
||||
for (let i = 0; i < 4; i++) document.getElementById('cnt-' + i).textContent = NODES.filter(n => n.category === i).length;
|
||||
|
||||
// 场景按钮
|
||||
const scColors = { 'WF.ProblemSolving': '#F59E0B', 'WF.ArticleGen': '#3B82F6', 'WF.KnowledgeUpdate': '#10B981', 'WF.CognitionUpgrade': '#EF4444' };
|
||||
Object.entries(SCENARIOS).forEach(([key, sc]) => {
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'scenario-btn'; btn.dataset.key = key;
|
||||
btn.style.setProperty('--sc-color', scColors[key] || '#8B5CF6');
|
||||
btn.innerHTML = `<span class="sc-dot"></span><span class="sc-label">${sc.label}</span><span class="sc-count">${sc.nodes.length}节点</span>`;
|
||||
btn.onclick = () => activateScenario(key);
|
||||
document.getElementById('scenario-buttons').appendChild(btn);
|
||||
});
|
||||
|
||||
// 构建 ECharts 选项
|
||||
function buildOption(highlightIds = null) {
|
||||
const filteredLinks = showRuleEdges ? LINKS : LINKS.filter(l => l.relType !== 'reference');
|
||||
const nodes = NODES.map(n => {
|
||||
const hi = highlightIds ? highlightIds.includes(n.id) : true;
|
||||
const cv = catFilter === null || n.category === catFilter;
|
||||
const op = (hi && cv) ? 1 : 0.08;
|
||||
return {
|
||||
id: n.id, name: n.name, category: n.category,
|
||||
symbolSize: n.symbolSize * (hi ? 1 : 0.85),
|
||||
label: { show: showLabels && hi && cv, fontSize: n.category === 3 ? 11 : (n.category === 0 ? 10 : 9), fontWeight: n.category <= 1 ? 'bold' : 'normal' },
|
||||
itemStyle: {
|
||||
color: CAT_COLORS[n.category], opacity: op,
|
||||
shadowBlur: hi && n.tag && n.tag.includes('⭐') ? 20 : (hi ? 8 : 0),
|
||||
shadowColor: hi ? CAT_COLORS[n.category] : 'transparent',
|
||||
borderColor: hi && n.tag && n.tag.includes('⭐') ? '#FFD700' : CAT_COLORS[n.category],
|
||||
borderWidth: hi && n.tag && n.tag.includes('⭐') ? 2.5 : 0,
|
||||
}, _data: n,
|
||||
};
|
||||
});
|
||||
const links = filteredLinks.map(l => {
|
||||
const sv = highlightIds ? highlightIds.includes(l.source) : true;
|
||||
const tv = highlightIds ? highlightIds.includes(l.target) : true;
|
||||
const v = sv && tv;
|
||||
return {
|
||||
source: l.source, target: l.target,
|
||||
label: { show: v && showLabels && l.relType !== 'reference', formatter: l.label, fontSize: 9, color: '#8b949e' },
|
||||
lineStyle: { ...l.lineStyle, opacity: v ? (l.relType === 'reference' ? 0.5 : 0.75) : 0.03, curveness: 0.2, type: l.lineStyle.type || 'solid' },
|
||||
symbol: ['none', 'arrow'], symbolSize: [0, 7],
|
||||
};
|
||||
});
|
||||
return {
|
||||
backgroundColor: '#0a0e1a',
|
||||
tooltip: {
|
||||
trigger: 'item', backgroundColor: 'rgba(15,22,40,0.95)', borderColor: '#2d2d55', textStyle: { color: '#e6edf3', fontSize: 12 },
|
||||
formatter: p => { if (p.dataType !== 'node') return ''; const n = nodeMap[p.data.id]; if (!n) return ''; return `<div style="max-width:260px"><div style="color:${CAT_COLORS[n.category]};font-weight:bold;font-size:13px;margin-bottom:4px">${n.name.replace(/\n/g, ' ')}</div><div style="color:#8b949e;font-size:10px;margin-bottom:6px">[${CAT_NAMES[n.category]}] ${n.tag || ''}</div><div style="color:#c9d1d9;font-size:11px;line-height:1.6;white-space:pre-wrap">${n.desc || ''}</div></div>`; }
|
||||
},
|
||||
legend: { show: false },
|
||||
series: [{
|
||||
type: 'graph', layout: 'force', animation: true, animationDuration: 800, animationEasingUpdate: 'quinticInOut',
|
||||
data: nodes, links: links,
|
||||
categories: CATEGORIES.map((c, i) => ({ name: c.name, itemStyle: { color: CAT_COLORS[i] } })),
|
||||
roam: true, draggable: true, focusNodeAdjacency: false,
|
||||
symbol: (v, p) => { const c = p.data.category; return c === 3 ? 'diamond' : c === 2 ? 'roundRect' : 'circle'; },
|
||||
label: { show: showLabels, position: 'bottom', formatter: '{b}', color: '#c9d1d9', textBorderColor: '#0a0e1a', textBorderWidth: 3 },
|
||||
edgeLabel: { show: showLabels, fontSize: 9, color: '#8b949e' },
|
||||
force: { repulsion: 320, edgeLength: [80, 200], gravity: 0.06, layoutAnimation: true, friction: 0.6 },
|
||||
lineStyle: { curveness: 0.2 },
|
||||
emphasis: { focus: 'adjacency', scale: true, itemStyle: { shadowBlur: 20 }, lineStyle: { width: 3, opacity: 1 }, label: { show: true } },
|
||||
}]
|
||||
};
|
||||
}
|
||||
|
||||
function initChart() {
|
||||
chart = echarts.init(document.getElementById('chart'), 'dark');
|
||||
chart.setOption(buildOption());
|
||||
chart.on('click', p => { if (p.dataType === 'node') showDetail(p.data.id); });
|
||||
chart.on('dblclick', p => { if (p.dataType === 'node' && SCENARIOS[p.data.id]) activateScenario(p.data.id); });
|
||||
window.addEventListener('resize', () => chart.resize());
|
||||
}
|
||||
|
||||
function showDetail(nodeId) {
|
||||
const n = nodeMap[nodeId]; if (!n) return;
|
||||
document.getElementById('detail-placeholder').style.display = 'none';
|
||||
document.getElementById('detail-content').style.display = 'flex';
|
||||
const color = CAT_COLORS[n.category];
|
||||
const badge = document.getElementById('detail-type-badge');
|
||||
badge.textContent = CAT_NAMES[n.category]; badge.style.background = color + '22'; badge.style.color = color; badge.style.border = `1px solid ${color}55`;
|
||||
document.getElementById('detail-name').textContent = n.name.replace(/\n/g, ' ');
|
||||
document.getElementById('detail-name').style.color = color;
|
||||
document.getElementById('detail-tag').textContent = n.tag || '';
|
||||
document.getElementById('detail-desc').textContent = n.desc || '暂无描述';
|
||||
const connList = document.getElementById('conn-list'); connList.innerHTML = '';
|
||||
const rels = LINKS.filter(l => l.source === nodeId || l.target === nodeId);
|
||||
if (!rels.length) { connList.innerHTML = '<div style="color:#484f58;font-size:11px">无直接关联</div>'; return; }
|
||||
rels.slice(0, 12).forEach(l => {
|
||||
const isOut = l.source === nodeId, otherId = isOut ? l.target : l.source, o = nodeMap[otherId];
|
||||
if (!o) return;
|
||||
const div = document.createElement('div'); div.className = 'conn-item';
|
||||
div.innerHTML = `<div class="conn-dot" style="background:${CAT_COLORS[o.category]}"></div><div class="conn-text">${o.name.replace(/\n/g, ' ')}</div><div class="conn-rel">${isOut ? '→' : '←'} ${l.label}</div>`;
|
||||
div.onclick = () => showDetail(otherId); connList.appendChild(div);
|
||||
});
|
||||
}
|
||||
|
||||
function activateScenario(key) {
|
||||
activeScenario = key;
|
||||
document.querySelectorAll('.scenario-btn').forEach(b => b.classList.toggle('active', b.dataset.key === key));
|
||||
chart.setOption(buildOption(SCENARIOS[key].nodes));
|
||||
showDetail(key);
|
||||
if (SIMULATION_STEPS[key]) simInit(key); else simHide();
|
||||
}
|
||||
function clearScenario() {
|
||||
activeScenario = null; catFilter = null; simHide(); simClearTimer(); simCurrentStep = -1;
|
||||
document.querySelectorAll('.scenario-btn').forEach(b => b.classList.remove('active'));
|
||||
chart.setOption(buildOption());
|
||||
}
|
||||
function filterByCategory(cat) {
|
||||
catFilter = catFilter === cat ? null : cat;
|
||||
chart.setOption(buildOption(activeScenario ? SCENARIOS[activeScenario].nodes : null));
|
||||
}
|
||||
|
||||
document.getElementById('btn-reset').onclick = () => { clearScenario(); chart.dispatchAction({ type: 'restore' }); };
|
||||
document.getElementById('btn-labels').onclick = function () { showLabels = !showLabels; this.textContent = showLabels ? '标签 ON' : '标签 OFF'; this.classList.toggle('active', showLabels); chart.setOption(buildOption(activeScenario ? SCENARIOS[activeScenario].nodes : null)); };
|
||||
document.getElementById('btn-rules').onclick = function () { showRuleEdges = !showRuleEdges; this.textContent = showRuleEdges ? '规则边' : '规则边 OFF'; this.classList.toggle('active', showRuleEdges); chart.setOption(buildOption(activeScenario ? SCENARIOS[activeScenario].nodes : null)); };
|
||||
document.getElementById('btn-fullscreen').onclick = () => { if (!document.fullscreenElement) document.documentElement.requestFullscreen(); else document.exitFullscreen(); };
|
||||
|
||||
initChart();
|
||||
|
||||
// ================================================================
|
||||
// 动态模拟系统
|
||||
// ================================================================
|
||||
let simCurrentStep = -1, simScenarioKey = null, simAutoTimer = null, simIsPlaying = false;
|
||||
const PHASE_META = {
|
||||
process: { color: '#8B5CF6', bg: 'rgba(139,92,246,0.15)', label: '🟣 流程启动' },
|
||||
behavior: { color: '#10B981', bg: 'rgba(16,185,129,0.15)', label: '🟢 行为调用' },
|
||||
rule: { color: '#F59E0B', bg: 'rgba(245,158,11,0.15)', label: '🟠 规则引用' },
|
||||
entity: { color: '#3B82F6', bg: 'rgba(59,130,246,0.15)', label: '🔵 对象生成' },
|
||||
complete: { color: '#FFD700', bg: 'rgba(255,215,0,0.15)', label: '✅ 完成' },
|
||||
};
|
||||
|
||||
function simInit(key) {
|
||||
simScenarioKey = key; simCurrentStep = -1; simClearTimer(); simIsPlaying = false;
|
||||
document.getElementById('sim-auto-btn').classList.remove('playing');
|
||||
document.getElementById('sim-auto-btn').textContent = '⏵ 自动';
|
||||
document.getElementById('sim-title').textContent = (SCENARIOS[key] ? SCENARIOS[key].label : key) + ' — 动态模拟';
|
||||
document.getElementById('sim-step-badge').textContent = '0 / ' + SIMULATION_STEPS[key].length;
|
||||
document.getElementById('sim-step-title').textContent = '点击「下一步」开始模拟';
|
||||
document.getElementById('sim-step-desc').textContent = '逐步展示问题分析与解决的完整调用链路。';
|
||||
document.getElementById('sim-progress-bar').style.width = '0%';
|
||||
document.getElementById('sim-phase-badge').textContent = '';
|
||||
document.getElementById('sim-phase-badge').style.cssText = '';
|
||||
document.getElementById('sim-prev-btn').disabled = true;
|
||||
document.getElementById('sim-next-btn').disabled = false;
|
||||
document.getElementById('sim-next-btn').textContent = '下一步 ▶';
|
||||
document.getElementById('sim-bar').classList.add('visible');
|
||||
}
|
||||
function simHide() { document.getElementById('sim-bar').classList.remove('visible'); }
|
||||
function simClearTimer() { if (simAutoTimer) { clearInterval(simAutoTimer); simAutoTimer = null; } }
|
||||
|
||||
function simStep(dir) {
|
||||
if (!simScenarioKey) return;
|
||||
const steps = SIMULATION_STEPS[simScenarioKey], next = simCurrentStep + dir;
|
||||
if (next < 0 || next >= steps.length) return;
|
||||
simCurrentStep = next; simRenderStep(steps[simCurrentStep]);
|
||||
}
|
||||
|
||||
function simRenderStep(step) {
|
||||
const steps = SIMULATION_STEPS[simScenarioKey], total = steps.length;
|
||||
document.getElementById('sim-progress-bar').style.width = Math.round((step.stepNo / total) * 100) + '%';
|
||||
document.getElementById('sim-step-badge').textContent = step.stepNo + ' / ' + total;
|
||||
const pm = PHASE_META[step.phase] || PHASE_META.process;
|
||||
const badge = document.getElementById('sim-phase-badge');
|
||||
badge.textContent = pm.label; badge.style.cssText = `color:${pm.color};background:${pm.bg};border:1px solid ${pm.color}44;font-size:10px;padding:3px 9px;border-radius:10px;font-weight:700;`;
|
||||
document.getElementById('sim-step-title').textContent = step.title;
|
||||
document.getElementById('sim-step-desc').textContent = step.desc;
|
||||
document.getElementById('sim-prev-btn').disabled = simCurrentStep <= 0;
|
||||
const isLast = simCurrentStep >= total - 1;
|
||||
document.getElementById('sim-next-btn').disabled = isLast;
|
||||
document.getElementById('sim-next-btn').textContent = isLast ? '已完成 ✓' : '下一步 ▶';
|
||||
if (isLast && simIsPlaying) simToggleAuto();
|
||||
|
||||
const allNodeIds = step.allNodes, newNodeIds = step.newNodes || [];
|
||||
const activeEdgeSet = new Set(step.activeEdges.map(e => e.source + '__' + e.target));
|
||||
const edgeSeqMap = {}; step.activeEdges.forEach(e => { edgeSeqMap[e.source + '__' + e.target] = e; });
|
||||
|
||||
const simNodes = NODES.map(n => {
|
||||
const isActive = allNodeIds.includes(n.id), isNew = newNodeIds.includes(n.id) && !step.isComplete, isComp = step.isComplete;
|
||||
let sb = 0, sc = 'transparent', bw = 0, bc = CAT_COLORS[n.category];
|
||||
if (isNew) { sb = 30; sc = CAT_COLORS[n.category]; bw = 3; bc = '#fff'; }
|
||||
else if (isActive && isComp) { sb = 16; sc = CAT_COLORS[n.category]; }
|
||||
else if (isActive) { sb = 10; sc = CAT_COLORS[n.category]; }
|
||||
return {
|
||||
id: n.id, name: n.name, category: n.category,
|
||||
symbolSize: n.symbolSize * (isNew ? 1.22 : (isActive ? 1 : 0.8)),
|
||||
label: { show: isActive, fontSize: n.category === 3 ? 11 : (n.category === 0 ? 10 : 9), fontWeight: isNew ? 'bold' : 'normal', color: isNew ? '#fff' : '#c9d1d9', textBorderColor: '#0a0e1a', textBorderWidth: 3 },
|
||||
itemStyle: { color: CAT_COLORS[n.category], opacity: isActive ? 1 : 0.05, shadowBlur: sb, shadowColor: sc, borderWidth: bw, borderColor: bc },
|
||||
};
|
||||
});
|
||||
|
||||
const simLinks = LINKS.map(l => {
|
||||
const ek = l.source + '__' + l.target, ia = activeEdgeSet.has(ek), ei = edgeSeqMap[ek];
|
||||
return {
|
||||
source: l.source, target: l.target,
|
||||
label: { show: ia && !!ei, formatter: ei ? ei.label : l.label, fontSize: 10, fontWeight: 'bold', color: '#FFD700', textBorderColor: '#0a0e1a', textBorderWidth: 2, backgroundColor: 'rgba(0,0,0,0.55)', padding: [2, 5], borderRadius: 4 },
|
||||
lineStyle: { color: ia ? (pm.color || '#10B981') : l.lineStyle.color, width: ia ? (l.lineStyle.width || 1.5) + 1.5 : (l.lineStyle.width || 1.5), opacity: ia ? 0.92 : 0.03, curveness: 0.2, type: 'solid', shadowBlur: ia ? 12 : 0, shadowColor: ia ? (pm.color || '#10B981') : 'transparent' },
|
||||
symbol: ['none', 'arrow'], symbolSize: ia ? [0, 9] : [0, 6],
|
||||
};
|
||||
});
|
||||
|
||||
chart.setOption({ series: [{ data: simNodes, links: simLinks, force: { repulsion: 320, edgeLength: [80, 200], gravity: 0.06, layoutAnimation: false } }] }, false);
|
||||
}
|
||||
|
||||
function simToggleAuto() {
|
||||
simIsPlaying = !simIsPlaying; const btn = document.getElementById('sim-auto-btn');
|
||||
if (simIsPlaying) {
|
||||
btn.classList.add('playing'); btn.textContent = '⏸ 暂停';
|
||||
simAutoTimer = setInterval(() => { const s = SIMULATION_STEPS[simScenarioKey]; if (simCurrentStep >= s.length - 1) simToggleAuto(); else simStep(1); }, 2200);
|
||||
} else { btn.classList.remove('playing'); btn.textContent = '⏵ 自动'; simClearTimer(); }
|
||||
}
|
||||
function simStop() {
|
||||
simClearTimer(); simIsPlaying = false; simCurrentStep = -1; simScenarioKey = null; simHide();
|
||||
if (activeScenario) chart.setOption(buildOption(SCENARIOS[activeScenario].nodes)); else chart.setOption(buildOption());
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -46,6 +46,27 @@ html.dark .el-select .el-select__wrapper {
|
||||
min-height: 42px;
|
||||
}
|
||||
|
||||
html.dark .el-select:hover .el-input__wrapper,
|
||||
html.dark .el-select:hover .el-select__wrapper {
|
||||
background-color: #1a1c25 !important;
|
||||
}
|
||||
|
||||
/* 修复鼠标移出后出现白色背景的问题 */
|
||||
html.dark .el-select .el-input__wrapper:hover,
|
||||
html.dark .el-select .el-select__wrapper:hover {
|
||||
background-color: #1a1c25 !important;
|
||||
}
|
||||
|
||||
html.dark .el-select .el-input__wrapper,
|
||||
html.dark .el-select .el-select__wrapper {
|
||||
background-color: #1a1c25 !important;
|
||||
}
|
||||
|
||||
html.dark .el-form-item__content .el-input__wrapper,
|
||||
html.dark .el-form-item__content .el-select .el-input__wrapper {
|
||||
background-color: #1a1c25 !important;
|
||||
}
|
||||
|
||||
html.dark .el-select.el-select--large .el-input__wrapper {
|
||||
padding: 5px 11px;
|
||||
min-height: 46px;
|
||||
@@ -188,6 +209,31 @@ html.dark .el-select .el-tag .el-tag__close:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* el-checkbox 暗色主题 - 金黄色选中 */
|
||||
html.dark .el-checkbox {
|
||||
--el-checkbox-checked-text-color: #ffb700;
|
||||
--el-checkbox-checked-bg-color: #ffb700;
|
||||
--el-checkbox-checked-border-color: #ffb700;
|
||||
--el-checkbox-input-border-color-hover: #ffb700;
|
||||
}
|
||||
|
||||
html.dark .el-checkbox .el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
background-color: #ffb700;
|
||||
border-color: #ffb700;
|
||||
}
|
||||
|
||||
html.dark .el-checkbox .el-checkbox__input.is-checked .el-checkbox__inner::after {
|
||||
border-color: #1f2937;
|
||||
}
|
||||
|
||||
html.dark .el-checkbox .el-checkbox__label {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
html.dark .el-checkbox:hover .el-checkbox__inner {
|
||||
border-color: #ffb700;
|
||||
}
|
||||
|
||||
/* 柱状图增长动画 */
|
||||
@keyframes bar-grow {
|
||||
from {
|
||||
@@ -222,3 +268,344 @@ html.dark .el-select .el-tag .el-tag__close:hover {
|
||||
opacity: 0;
|
||||
animation: progress-grow 2.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
||||
}
|
||||
|
||||
/* ===== 通用组件交互优化 ===== */
|
||||
|
||||
/* 通用弹窗动画 */
|
||||
@keyframes modal-fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes modal-scale-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(10px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes modal-slide-up {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
animation: modal-fade-in 0.2s ease-out forwards;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
animation: modal-scale-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
|
||||
/* 按钮交互优化 */
|
||||
.btn-primary {
|
||||
@apply bg-gradient-to-r from-primary-orange to-red-500 text-white px-4 py-2 rounded-lg font-medium flex items-center gap-2 transition-all duration-200;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
@apply from-orange-500 to-red-600;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 8px rgba(255, 107, 53, 0.2);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
@apply opacity-50 cursor-not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply bg-dark-600 text-gray-300 px-4 py-2 rounded-lg border border-dark-500 transition-all duration-200;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
@apply bg-dark-500 border-gray-500;
|
||||
}
|
||||
|
||||
.btn-secondary:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
@apply p-2 rounded-lg transition-all duration-150;
|
||||
}
|
||||
|
||||
.btn-icon:hover {
|
||||
@apply bg-dark-500;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.btn-icon:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* 表单输入框交互 */
|
||||
.input-field {
|
||||
@apply w-full bg-dark-600 border border-dark-500 rounded-lg px-4 py-2.5 text-white placeholder-gray-500 transition-all duration-200;
|
||||
}
|
||||
|
||||
.input-field:focus {
|
||||
@apply outline-none border-primary-orange;
|
||||
box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.15);
|
||||
}
|
||||
|
||||
.input-field:hover:not(:focus) {
|
||||
@apply border-gray-500;
|
||||
}
|
||||
|
||||
/* 表格样式优化 */
|
||||
.table-row {
|
||||
@apply border-t border-dark-600 transition-all duration-200;
|
||||
}
|
||||
|
||||
.table-row:hover {
|
||||
@apply bg-dark-600/50;
|
||||
}
|
||||
|
||||
.table-row:active {
|
||||
@apply bg-dark-600;
|
||||
}
|
||||
|
||||
/* 表格头部 */
|
||||
.table-header {
|
||||
@apply bg-dark-600 text-sm font-medium text-gray-400;
|
||||
}
|
||||
|
||||
/* 搜索框交互 */
|
||||
.search-input {
|
||||
@apply bg-dark-600 border border-dark-500 rounded-lg py-2 pl-10 pr-4 text-white placeholder-gray-500 transition-all duration-200;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
@apply outline-none border-primary-orange;
|
||||
box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.15);
|
||||
}
|
||||
|
||||
.search-input:hover:not(:focus) {
|
||||
@apply border-gray-500;
|
||||
}
|
||||
|
||||
/* 空状态优化 */
|
||||
.empty-state {
|
||||
@apply py-12 text-center transition-all duration-300;
|
||||
}
|
||||
|
||||
.empty-state-icon {
|
||||
@apply text-gray-500 text-4xl mb-3 transition-transform duration-300;
|
||||
}
|
||||
|
||||
.empty-state:hover .empty-state-icon {
|
||||
@apply text-gray-400;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* 卡片悬停效果 */
|
||||
.card-hover {
|
||||
@apply transition-all duration-200;
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
@apply shadow-lg;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* 标签/徽章样式 */
|
||||
.badge {
|
||||
@apply px-2 py-1 rounded text-sm font-medium transition-all duration-200;
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
@apply bg-green-500/20 text-green-400;
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
@apply bg-yellow-500/20 text-yellow-400;
|
||||
}
|
||||
|
||||
.badge-error {
|
||||
@apply bg-red-500/20 text-red-400;
|
||||
}
|
||||
|
||||
.badge-info {
|
||||
@apply bg-blue-500/20 text-blue-400;
|
||||
}
|
||||
|
||||
.badge-default {
|
||||
@apply bg-gray-500/20 text-gray-400;
|
||||
}
|
||||
|
||||
/* 状态指示点 */
|
||||
.status-dot {
|
||||
@apply w-2 h-2 rounded-full transition-all duration-200;
|
||||
}
|
||||
|
||||
.status-dot-active {
|
||||
@apply bg-primary-success;
|
||||
box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
|
||||
}
|
||||
|
||||
.status-dot-inactive {
|
||||
@apply bg-gray-500;
|
||||
}
|
||||
|
||||
.status-dot-error {
|
||||
@apply bg-primary-danger;
|
||||
box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
|
||||
}
|
||||
|
||||
/* 加载动画 */
|
||||
@keyframes pulse-dot {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-pulse {
|
||||
animation: pulse-dot 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 步骤指示器 */
|
||||
.step-indicator {
|
||||
@apply flex items-center justify-center gap-4 py-4;
|
||||
}
|
||||
|
||||
.step-item {
|
||||
@apply flex items-center gap-2;
|
||||
}
|
||||
|
||||
.step-circle {
|
||||
@apply w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium transition-all duration-300;
|
||||
}
|
||||
|
||||
.step-line {
|
||||
@apply w-16 h-0.5 transition-all duration-300;
|
||||
}
|
||||
|
||||
/* 复选框优化 */
|
||||
.checkbox-custom {
|
||||
@apply w-4 h-4 rounded border-dark-500 bg-dark-600 text-primary-cyan transition-all duration-200;
|
||||
}
|
||||
|
||||
.checkbox-custom:focus {
|
||||
box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.2);
|
||||
}
|
||||
|
||||
.checkbox-custom:checked {
|
||||
@apply bg-primary-cyan border-primary-cyan;
|
||||
}
|
||||
|
||||
/* 工具提示 */
|
||||
.tooltip {
|
||||
@apply absolute z-50 px-2 py-1 text-xs rounded bg-dark-700 text-white shadow-lg pointer-events-none opacity-0 transition-opacity duration-200;
|
||||
}
|
||||
|
||||
.tooltip-visible {
|
||||
@apply opacity-100;
|
||||
}
|
||||
|
||||
/* 滚动条美化 */
|
||||
::-webkit-scrollbar {
|
||||
@apply w-2 h-2;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-dark-800 rounded-full;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-dark-600 rounded-full;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-gray-600;
|
||||
}
|
||||
|
||||
/* 渐变文字 */
|
||||
.text-gradient {
|
||||
@apply bg-clip-text text-transparent bg-gradient-to-r from-primary-orange to-red-500;
|
||||
}
|
||||
|
||||
/* 玻璃拟态效果 */
|
||||
.glass {
|
||||
@apply bg-dark-700/80 backdrop-blur-md border border-dark-500/50;
|
||||
}
|
||||
|
||||
/* 焦点环 */
|
||||
.focus-ring {
|
||||
@apply focus:outline-none focus:ring-2 focus:ring-primary-orange/50 focus:ring-offset-2 focus:ring-offset-dark-900;
|
||||
}
|
||||
|
||||
/* ===== 加载动画 ===== */
|
||||
|
||||
/* 简洁旋转 Loading */
|
||||
@keyframes loading-spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.loading-spin {
|
||||
animation: loading-spin 1s linear infinite;
|
||||
}
|
||||
|
||||
/* 三个点脉冲 */
|
||||
@keyframes loading-dots {
|
||||
0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
|
||||
40% { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
.loading-dots span {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin: 0 4px;
|
||||
border-radius: 50%;
|
||||
animation: loading-dots 1.4s ease-in-out infinite both;
|
||||
}
|
||||
|
||||
.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
|
||||
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
|
||||
.loading-dots span:nth-child(3) { animation-delay: 0s; }
|
||||
|
||||
/* 进度条动画 */
|
||||
@keyframes loading-progress {
|
||||
0% { width: 0%; }
|
||||
50% { width: 70%; }
|
||||
100% { width: 100%; }
|
||||
}
|
||||
|
||||
.loading-progress-bar {
|
||||
animation: loading-progress 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 骨架屏闪烁 */
|
||||
@keyframes loading-skeleton {
|
||||
0% { opacity: 0.4; }
|
||||
50% { opacity: 0.7; }
|
||||
100% { opacity: 0.4; }
|
||||
}
|
||||
|
||||
.loading-skeleton {
|
||||
animation: loading-skeleton 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@@ -231,7 +231,7 @@ const statusClass = (status: string) => {
|
||||
<i class="fa-solid fa-robot text-gray-400"></i>
|
||||
<span class="font-medium">Agents</span>
|
||||
</div>
|
||||
<button @click="openCreate" class="bg-gradient-to-r from-primary-orange to-red-500 hover:from-orange-500 hover:to-red-600 text-white px-4 py-2 rounded-lg font-medium flex items-center gap-2 transition-all">
|
||||
<button @click="openCreate" class="btn-primary">
|
||||
<i class="fa-solid fa-plus"></i>
|
||||
New Agent
|
||||
</button>
|
||||
@@ -245,7 +245,7 @@ const statusClass = (status: string) => {
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
placeholder="Search agents..."
|
||||
class="w-full bg-dark-600 border border-dark-500 rounded-lg py-2 pl-10 pr-4 text-white placeholder-gray-500 focus:outline-none focus:border-primary-orange"
|
||||
class="search-input w-full"
|
||||
>
|
||||
</div>
|
||||
<el-select v-model="filterStatus" placeholder="Select" class="w-40" size="large">
|
||||
@@ -271,7 +271,7 @@ const statusClass = (status: string) => {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="agent in filteredAgents()" :key="agent.id" class="border-t border-dark-600 hover:bg-dark-600/50 transition-colors">
|
||||
<tr v-for="agent in filteredAgents()" :key="agent.id" class="table-row">
|
||||
<td class="px-5 py-4">
|
||||
<div class="font-medium">{{ agent.name }}</div>
|
||||
<div class="text-sm text-gray-500">{{ agent.description }}</div>
|
||||
@@ -294,21 +294,21 @@ const statusClass = (status: string) => {
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<button
|
||||
@click="toggleStatus(agent)"
|
||||
class="p-2 rounded-lg hover:bg-dark-500 transition-colors"
|
||||
class="btn-icon"
|
||||
:title="agent.status === 'running' ? 'Stop' : 'Start'"
|
||||
>
|
||||
<i :class="['fa-solid', agent.status === 'running' ? 'fa-stop' : 'fa-play', 'text-gray-400 hover:text-white']"></i>
|
||||
<i :class="['fa-solid', agent.status === 'running' ? 'fa-stop' : 'fa-play', 'text-gray-400']"></i>
|
||||
</button>
|
||||
<button
|
||||
@click="openEdit(agent)"
|
||||
class="p-2 rounded-lg hover:bg-dark-500 transition-colors"
|
||||
class="btn-icon"
|
||||
title="Edit"
|
||||
>
|
||||
<i class="fa-solid fa-pen text-gray-400 hover:text-white"></i>
|
||||
<i class="fa-solid fa-pen text-gray-400"></i>
|
||||
</button>
|
||||
<button
|
||||
@click="deleteAgent(agent.id)"
|
||||
class="p-2 rounded-lg hover:bg-dark-500 transition-colors"
|
||||
class="btn-icon"
|
||||
title="Delete"
|
||||
>
|
||||
<i class="fa-solid fa-trash text-gray-400 hover:text-primary-danger"></i>
|
||||
@@ -328,7 +328,7 @@ const statusClass = (status: string) => {
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<Teleport to="body">
|
||||
<div v-if="isEditing" class="fixed inset-0 bg-black/60 flex items-center justify-center z-50" @click.self="cancelEdit">
|
||||
<div v-if="isEditing" class="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
|
||||
<div class="bg-dark-700 rounded-2xl w-full max-w-lg border border-dark-500 shadow-2xl">
|
||||
<!-- 弹窗头部 -->
|
||||
<div class="flex items-center justify-between p-5 border-b border-dark-500">
|
||||
@@ -345,7 +345,7 @@ const statusClass = (status: string) => {
|
||||
<input
|
||||
v-model="editForm.name"
|
||||
type="text"
|
||||
class="w-full bg-dark-600 border border-dark-500 rounded-lg px-4 py-2.5 text-white focus:outline-none focus:border-primary-orange"
|
||||
class="input-field"
|
||||
>
|
||||
</div>
|
||||
|
||||
@@ -374,7 +374,7 @@ const statusClass = (status: string) => {
|
||||
<textarea
|
||||
v-model="editForm.description"
|
||||
rows="3"
|
||||
class="w-full bg-dark-600 border border-dark-500 rounded-lg px-4 py-2.5 text-white focus:outline-none focus:border-primary-orange resize-none"
|
||||
class="input-field resize-none"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
@@ -383,13 +383,13 @@ const statusClass = (status: string) => {
|
||||
<div class="flex items-center justify-end gap-3 p-5 border-t border-dark-500">
|
||||
<button
|
||||
@click="cancelEdit"
|
||||
class="px-4 py-2 rounded-lg bg-dark-600 text-gray-300 hover:bg-dark-500 transition-colors"
|
||||
class="btn-secondary"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
@click="saveEdit"
|
||||
class="px-4 py-2 rounded-lg bg-gradient-to-r from-primary-orange to-red-500 text-white hover:from-orange-500 hover:to-red-600 transition-all"
|
||||
class="btn-primary"
|
||||
>
|
||||
Save Changes
|
||||
</button>
|
||||
@@ -400,7 +400,7 @@ const statusClass = (status: string) => {
|
||||
|
||||
<!-- 新建 Agent 模态框 -->
|
||||
<Teleport to="body">
|
||||
<div v-if="isCreating" class="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4" @click.self="closeCreate">
|
||||
<div v-if="isCreating" class="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4">
|
||||
<div class="bg-dark-800 rounded-2xl w-full max-w-6xl h-[85vh] border border-dark-600 shadow-2xl overflow-hidden flex flex-col animate-modal-in">
|
||||
<!-- 模态框头部 -->
|
||||
<div class="flex items-center justify-between p-5 border-b border-dark-600 bg-dark-700/50">
|
||||
@@ -625,13 +625,13 @@ const statusClass = (status: string) => {
|
||||
<div class="flex items-center gap-3">
|
||||
<button
|
||||
@click="closeCreate"
|
||||
class="px-6 py-2.5 rounded-xl bg-dark-600 text-gray-300 hover:bg-dark-500 border border-dark-500 transition-all hover:scale-105"
|
||||
class="btn-secondary px-6 py-2.5"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
@click="saveNewAgent"
|
||||
class="px-6 py-2.5 rounded-xl bg-gradient-to-r from-primary-orange to-red-500 text-white hover:from-orange-500 hover:to-red-600 transition-all hover:scale-105 shadow-lg shadow-primary-orange/30 flex items-center gap-2"
|
||||
class="btn-primary px-6 py-2.5"
|
||||
>
|
||||
<i class="fa-solid fa-plus"></i>
|
||||
Create Agent
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import { ref, nextTick } from 'vue'
|
||||
|
||||
interface MCPServer {
|
||||
id: number
|
||||
@@ -321,19 +320,28 @@ const isEditingFileClosing = ref(false)
|
||||
// AI 对话面板
|
||||
const isChatOpen = ref(false)
|
||||
|
||||
// 图谱生成相关
|
||||
// 流程生成相关
|
||||
const isGeneratingGraph = ref(false)
|
||||
const isGraphGenerated = ref(false)
|
||||
|
||||
const generateGraph = () => {
|
||||
isGeneratingGraph.value = true
|
||||
// 模拟生成图谱的等待过程
|
||||
// 模拟生成流程的等待过程
|
||||
setTimeout(() => {
|
||||
isGeneratingGraph.value = false
|
||||
isGraphGenerated.value = true
|
||||
nextTick(() => {
|
||||
initGraphChart()
|
||||
})
|
||||
// 初始化树结构 - 默认展开第一层
|
||||
if (workflowData.value.length > 0) {
|
||||
workflowData.value[0].expanded = true
|
||||
if (workflowData.value[0].children) {
|
||||
workflowData.value[0].children.forEach(child => {
|
||||
child.expanded = false
|
||||
if (child.children) {
|
||||
child.children.forEach(gc => gc.expanded = false)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}, 2500)
|
||||
}
|
||||
|
||||
@@ -424,254 +432,106 @@ const sendMessage = () => {
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
// 图谱相关
|
||||
const graphChartRef = ref<HTMLElement | null>(null)
|
||||
let chartInstance: echarts.ECharts | null = null
|
||||
// 流程相关 - 金字塔结构
|
||||
|
||||
const initGraphChart = () => {
|
||||
if (!graphChartRef.value) return
|
||||
|
||||
// 节点数据 - 更有科技感的节点，添加初始位置
|
||||
const nodes = [
|
||||
{ id: '1', name: '用户问题', category: 0, symbolSize: 70, x: 0, y: -200, desc: '用户提出的原始问题' },
|
||||
{ id: '2', name: '问题分析', category: 1, symbolSize: 55, x: 0, y: -80, desc: '对问题进行拆解和分析' },
|
||||
{ id: '3', name: '数据获取', category: 1, symbolSize: 50, x: -120, y: 20, desc: '从数据源获取相关信息' },
|
||||
{ id: '4', name: '方案生成', category: 2, symbolSize: 55, x: 0, y: 80, desc: '基于分析结果生成解决方案' },
|
||||
{ id: '5', name: '方案评估', category: 2, symbolSize: 45, x: 0, y: 180, desc: '评估方案的可行性和效果' },
|
||||
{ id: '6', name: '最终输出', category: 3, symbolSize: 60, x: 0, y: 280, desc: '生成最终的问题解答' },
|
||||
{ id: '7', name: '知识库', category: 0, symbolSize: 40, x: 150, y: 0, desc: '存储领域知识' },
|
||||
{ id: '8', name: '规则引擎', category: 2, symbolSize: 40, x: 120, y: 120, desc: '业务规则处理' },
|
||||
{ id: '9', name: 'AI模型', category: 3, symbolSize: 45, x: -100, y: 150, desc: '大语言模型调用' },
|
||||
{ id: '10', name: '向量检索', category: 1, symbolSize: 38, x: -150, y: -20, desc: '相似度检索' },
|
||||
]
|
||||
|
||||
const links = [
|
||||
{ source: '1', target: '2', label: '分析' },
|
||||
{ source: '2', target: '3', label: '获取' },
|
||||
{ source: '2', target: '7', label: '查询' },
|
||||
{ source: '2', target: '10', label: '检索' },
|
||||
{ source: '3', target: '4', label: '生成' },
|
||||
{ source: '10', target: '4', label: '增强' },
|
||||
{ source: '4', target: '5', label: '评估' },
|
||||
{ source: '4', target: '8', label: '校验' },
|
||||
{ source: '4', target: '9', label: '调用' },
|
||||
{ source: '5', target: '6', label: '输出' },
|
||||
{ source: '7', target: '4', label: '支撑' },
|
||||
]
|
||||
|
||||
// 深邃科技配色 - 更赛博朋克的感觉
|
||||
const CAT_COLORS = [
|
||||
{ main: '#00D9FF', glow: '#00D9FF', gradient: ['#0077B6', '#00D9FF'] }, // 青色 - 语义对象
|
||||
{ main: '#10B981', glow: '#10B981', gradient: ['#059669', '#34D399'] }, // 绿色 - 对象行为
|
||||
{ main: '#F59E0B', glow: '#F59E0B', gradient: ['#D97706', '#FBBF24'] }, // 琥珀色 - 约束规则
|
||||
{ main: '#8B5CF6', glow: '#A78BFA', gradient: ['#6D28D9', '#A78BFA'] }, // 紫色 - 编排流程
|
||||
]
|
||||
|
||||
const option = {
|
||||
backgroundColor: 'transparent',
|
||||
// 全局特效
|
||||
graphic: [
|
||||
{
|
||||
type: 'group',
|
||||
children: [
|
||||
// 背景光晕1
|
||||
{
|
||||
type: 'circle',
|
||||
shape: { cx: '30%', cy: '30%', r: 200 },
|
||||
style: { fill: 'radialGradient', gradient: { type: 'radial', colorStops: [{ offset: 0, color: 'rgba(0, 217, 255, 0.15)' }, { offset: 1, color: 'transparent' }] } },
|
||||
},
|
||||
// 背景光晕2
|
||||
{
|
||||
type: 'circle',
|
||||
shape: { cx: '70%', cy: '70%', r: 180 },
|
||||
style: { fill: 'radialGradient', gradient: { type: 'radial', colorStops: [{ offset: 0, color: 'rgba(139, 92, 246, 0.12)' }, { offset: 1, color: 'transparent' }] } },
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
backgroundColor: 'rgba(10, 14, 26, 0.95)',
|
||||
borderColor: 'rgba(0, 217, 255, 0.3)',
|
||||
borderWidth: 1,
|
||||
textStyle: { color: '#e6edf3', fontSize: 12 },
|
||||
extraCssText: 'box-shadow: 0 0 20px rgba(0, 217, 255, 0.2); border-radius: 8px;',
|
||||
},
|
||||
series: [{
|
||||
type: 'graph',
|
||||
layout: 'force',
|
||||
// 持续动画 - 节点漂浮
|
||||
animation: true,
|
||||
animationDuration: 1500,
|
||||
animationEasingUpdate: 'quinticInOut',
|
||||
// 布局参数 - 修复边连接问题
|
||||
force: {
|
||||
repulsion: 350,
|
||||
edgeLength: [80, 180],
|
||||
gravity: 0.1,
|
||||
layoutAnimation: true,
|
||||
friction: 0.85,
|
||||
alphaDecay: 0.02,
|
||||
},
|
||||
// 节点数据
|
||||
data: nodes.map(n => {
|
||||
const color = CAT_COLORS[n.category]
|
||||
return {
|
||||
id: n.id,
|
||||
name: n.name,
|
||||
category: n.category,
|
||||
symbolSize: n.symbolSize,
|
||||
x: n.x,
|
||||
y: n.y,
|
||||
// 渐变色节点
|
||||
symbol: 'circle',
|
||||
// 标签设置
|
||||
label: {
|
||||
show: true,
|
||||
position: 'bottom',
|
||||
distance: 8,
|
||||
fontSize: 11,
|
||||
fontWeight: 600,
|
||||
color: '#E2E8F0',
|
||||
textBorderColor: '#0a0e1a',
|
||||
textBorderWidth: 3,
|
||||
formatter: '{b}',
|
||||
},
|
||||
// 节点样式 - 科技感
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'radial',
|
||||
x: 0.3,
|
||||
y: 0.3,
|
||||
r: 0.7,
|
||||
colorStops: [
|
||||
{ offset: 0, color: color.gradient[1] },
|
||||
{ offset: 0.7, color: color.gradient[0] },
|
||||
{ offset: 1, color: color.main },
|
||||
],
|
||||
},
|
||||
shadowBlur: 25,
|
||||
shadowColor: color.glow,
|
||||
borderColor: 'rgba(255,255,255,0.3)',
|
||||
borderWidth: 1,
|
||||
},
|
||||
// 呼吸效果通过 emphasis 实现
|
||||
emphasis: {
|
||||
focus: 'adjacency',
|
||||
scale: 1.15,
|
||||
itemStyle: {
|
||||
shadowBlur: 40,
|
||||
shadowColor: color.glow,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2,
|
||||
},
|
||||
},
|
||||
// 原始数据
|
||||
_data: n,
|
||||
}
|
||||
}),
|
||||
// 边数据
|
||||
links: links.map((l) => {
|
||||
const sourceNode = nodes.find(n => n.id === l.source)
|
||||
const color = sourceNode ? CAT_COLORS[sourceNode.category] : CAT_COLORS[0]
|
||||
return {
|
||||
source: l.source,
|
||||
target: l.target,
|
||||
// 边标签
|
||||
label: {
|
||||
show: true,
|
||||
formatter: l.label,
|
||||
fontSize: 9,
|
||||
fontWeight: 500,
|
||||
color: '#94A3B8',
|
||||
backgroundColor: 'rgba(10, 14, 26, 0.8)',
|
||||
padding: [2, 6],
|
||||
borderRadius: 4,
|
||||
textBorderColor: 'transparent',
|
||||
},
|
||||
// 边样式 - 科技感
|
||||
lineStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0, y: 0, x2: 1, y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: color.main + '40' },
|
||||
{ offset: 0.5, color: color.main + '80' },
|
||||
{ offset: 1, color: color.main + '40' },
|
||||
],
|
||||
},
|
||||
width: 1.5,
|
||||
curveness: 0.15,
|
||||
opacity: 0.7,
|
||||
type: 'solid',
|
||||
},
|
||||
// 箭头 - 修复连线不连接到节点的问题
|
||||
edgeSymbol: 'none',
|
||||
edgeSymbolSize: 0,
|
||||
}
|
||||
}),
|
||||
// 允许拖拽和缩放
|
||||
roam: true,
|
||||
draggable: true,
|
||||
// 边标签
|
||||
edgeLabel: {
|
||||
show: true,
|
||||
fontSize: 10,
|
||||
color: '#94A3B8',
|
||||
},
|
||||
// 连线特效
|
||||
emphasis: {
|
||||
focus: 'adjacency',
|
||||
scale: true,
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
opacity: 1,
|
||||
shadowBlur: 15,
|
||||
shadowColor: '#00D9FF',
|
||||
},
|
||||
},
|
||||
// 顶部图例（隐藏）
|
||||
legend: { show: false },
|
||||
}],
|
||||
// 视觉映射
|
||||
visualMap: {
|
||||
show: false,
|
||||
type: 'continuous',
|
||||
dimension: 2,
|
||||
inRange: {
|
||||
color: ['#00D9FF', '#10B981', '#F59E0B', '#8B5CF6'],
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
chartInstance = echarts.init(graphChartRef.value)
|
||||
chartInstance.setOption(option)
|
||||
|
||||
// 初始布局动画后停止 - 使用 disableLayoutAnimation 来停止持续抖动
|
||||
setTimeout(() => {
|
||||
if (chartInstance) {
|
||||
chartInstance.setOption({
|
||||
series: [{
|
||||
force: {
|
||||
layoutAnimation: false, // 关闭布局动画，停止抖动
|
||||
},
|
||||
}],
|
||||
})
|
||||
}
|
||||
}, 3000)
|
||||
|
||||
// Handle resize
|
||||
const handleResize = () => chartInstance?.resize()
|
||||
window.addEventListener('resize', handleResize)
|
||||
// 流程节点 - 树形结构
|
||||
interface WorkflowNode {
|
||||
id: string
|
||||
name: string
|
||||
description: string
|
||||
icon: string
|
||||
color: string
|
||||
bgColor: string
|
||||
borderColor: string
|
||||
status: 'pending' | 'processing' | 'completed'
|
||||
expanded: boolean
|
||||
children?: WorkflowNode[]
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 图谱通过点击按钮生成，不再自动初始化
|
||||
})
|
||||
const workflowData = ref<WorkflowNode[]>([
|
||||
{
|
||||
id: 'output',
|
||||
name: '最终输出',
|
||||
description: '生成最终结果返回给用户',
|
||||
icon: 'fa-check-circle',
|
||||
color: 'text-green-400',
|
||||
bgColor: 'from-green-500/20 to-green-500/5',
|
||||
borderColor: 'border-green-500/30',
|
||||
status: 'pending',
|
||||
expanded: false,
|
||||
children: [
|
||||
{
|
||||
id: 'generate',
|
||||
name: '方案生成',
|
||||
description: '基于分析结果构建解决方案',
|
||||
icon: 'fa-lightbulb',
|
||||
color: 'text-primary-orange',
|
||||
bgColor: 'from-primary-orange/20 to-primary-orange/5',
|
||||
borderColor: 'border-primary-orange/30',
|
||||
status: 'pending',
|
||||
expanded: false,
|
||||
children: [
|
||||
{
|
||||
id: 'analyze',
|
||||
name: '问题分析',
|
||||
description: '拆解问题、提取关键信息、理解用户意图',
|
||||
icon: 'fa-microscope',
|
||||
color: 'text-purple-400',
|
||||
bgColor: 'from-purple-500/20 to-purple-500/5',
|
||||
borderColor: 'border-purple-500/30',
|
||||
status: 'pending',
|
||||
expanded: false,
|
||||
children: [
|
||||
{
|
||||
id: 'question',
|
||||
name: '用户问题',
|
||||
description: '输入原始需求和问题描述',
|
||||
icon: 'fa-question',
|
||||
color: 'text-primary-cyan',
|
||||
bgColor: 'from-primary-cyan/20 to-primary-cyan/5',
|
||||
borderColor: 'border-primary-cyan/30',
|
||||
status: 'pending',
|
||||
expanded: false,
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'data',
|
||||
name: '数据获取',
|
||||
description: '从知识库、向量数据库获取相关信息',
|
||||
icon: 'fa-database',
|
||||
color: 'text-green-400',
|
||||
bgColor: 'from-green-500/20 to-green-500/5',
|
||||
borderColor: 'border-green-500/30',
|
||||
status: 'pending',
|
||||
expanded: false,
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'evaluate',
|
||||
name: '方案评估',
|
||||
description: '验证方案可行性和效果',
|
||||
icon: 'fa-clipboard-check',
|
||||
color: 'text-yellow-400',
|
||||
bgColor: 'from-yellow-500/20 to-yellow-500/5',
|
||||
borderColor: 'border-yellow-500/30',
|
||||
status: 'pending',
|
||||
expanded: false,
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
onUnmounted(() => {
|
||||
chartInstance?.dispose()
|
||||
})
|
||||
// 展开/收起节点
|
||||
const toggleNode = (node: WorkflowNode) => {
|
||||
node.expanded = !node.expanded
|
||||
}
|
||||
|
||||
// 递归渲染节点
|
||||
const renderWorkflow = (nodes: WorkflowNode[], level: number = 0) => {
|
||||
return nodes
|
||||
}
|
||||
|
||||
const openCreate = () => {
|
||||
newSkillForm.value = {
|
||||
@@ -828,7 +688,7 @@ const statusClass = (status: string) => {
|
||||
animation: scale-in 0.5s ease-out forwards;
|
||||
}
|
||||
|
||||
/* 图谱节点动画 */
|
||||
/* 流程节点动画 */
|
||||
.graph-node {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
@@ -963,7 +823,7 @@ const statusClass = (status: string) => {
|
||||
</div>
|
||||
|
||||
<Teleport to="body">
|
||||
<div v-if="isEditing" class="fixed inset-0 bg-black/60 flex items-center justify-center z-50" @click.self="cancelEdit">
|
||||
<div v-if="isEditing" class="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
|
||||
<div class="bg-dark-700 rounded-2xl w-full max-w-lg border border-dark-500 shadow-2xl">
|
||||
<div class="flex items-center justify-between p-5 border-b border-dark-500">
|
||||
<h3 class="text-lg font-semibold">Edit Skill</h3>
|
||||
@@ -1032,7 +892,7 @@ const statusClass = (status: string) => {
|
||||
|
||||
<!-- 新建 Skill 模态框 -->
|
||||
<Teleport to="body">
|
||||
<div v-if="isCreating" class="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-6" @click.self="createStep === 1 && closeCreate()">
|
||||
<div v-if="isCreating" class="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-6">
|
||||
<!-- 步骤1：基本信息 -->
|
||||
<div v-if="createStep === 1" class="bg-dark-800 rounded-2xl w-full max-w-lg border border-dark-600 shadow-2xl overflow-hidden animate-modal-in">
|
||||
<!-- 头部 -->
|
||||
@@ -1299,100 +1159,319 @@ const statusClass = (status: string) => {
|
||||
:disabled="isGeneratingGraph || isGraphGenerated"
|
||||
class="w-full bg-gradient-to-r from-primary-orange to-red-500 hover:from-orange-500 hover:to-red-600 text-white font-medium py-2 px-3 rounded-lg transition-all flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<i :class="['fa-solid fa-project-diagram', isGraphGenerated ? 'text-green-400' : '']"></i>
|
||||
{{ isGraphGenerated ? '图谱已生成' : (isGeneratingGraph ? '生成中...' : '生成流程图谱') }}
|
||||
<i :class="['fa-solid fa-sitemap', isGraphGenerated ? 'text-green-400' : '']"></i>
|
||||
{{ isGraphGenerated ? '流程已生成' : (isGeneratingGraph ? '生成中...' : '生成流程') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 中间：图谱视图 -->
|
||||
<!-- 中间：流程视图 -->
|
||||
<div class="flex-1 relative overflow-hidden" style="background: linear-gradient(135deg, #0a0e1a 0%, #0f172a 50%, #0a0e1a 100%);">
|
||||
<!-- 未生成图谱时的提示 -->
|
||||
<!-- 未生成流程时的提示 -->
|
||||
<div v-if="!isGraphGenerated && !isGeneratingGraph" class="absolute inset-0 flex flex-col items-center justify-center z-10">
|
||||
<div class="w-24 h-24 rounded-2xl bg-dark-700 flex items-center justify-center mb-4">
|
||||
<i class="fa-solid fa-project-diagram text-4xl text-gray-600"></i>
|
||||
<i class="fa-solid fa-sitemap text-4xl text-gray-600"></i>
|
||||
</div>
|
||||
<p class="text-gray-500 text-sm">点击左侧按钮生成流程图谱</p>
|
||||
<p class="text-gray-500 text-sm">点击左侧按钮生成流程</p>
|
||||
</div>
|
||||
|
||||
<!-- 生成中的加载动画 -->
|
||||
<!-- 生成中的加载动画 - 现代化设计 -->
|
||||
<div v-else-if="isGeneratingGraph" class="absolute inset-0 flex flex-col items-center justify-center z-10">
|
||||
<!-- 科幻风格加载动画 -->
|
||||
<div class="relative">
|
||||
<!-- 外层六边形 -->
|
||||
<div class="w-40 h-40 relative animate-spin-slow">
|
||||
<svg viewBox="0 0 100 100" class="w-full h-full">
|
||||
<!-- 外圈 -->
|
||||
<polygon points="50,2 95,27 95,73 50,98 5,73 5,27" fill="none" stroke="rgba(0,217,255,0.3)" stroke-width="1"/>
|
||||
<polygon points="50,8 90,29 90,71 50,92 10,71 10,29" fill="none" stroke="rgba(0,217,255,0.5)" stroke-width="1.5"/>
|
||||
<!-- 内圈 -->
|
||||
<polygon points="50,15 82,33 82,67 50,85 18,67 18,33" fill="none" stroke="rgba(139,92,246,0.4)" stroke-width="1"/>
|
||||
<!-- 旋转的连接线 -->
|
||||
<line x1="50" y1="2" x2="50" y2="20" stroke="rgba(0,217,255,0.8)" stroke-width="2" class="animate-pulse"/>
|
||||
<line x1="98" y1="50" x2="80" y2="50" stroke="rgba(139,92,246,0.8)" stroke-width="2" class="animate-pulse"/>
|
||||
<line x1="50" y1="98" x2="50" y2="80" stroke="rgba(0,217,255,0.8)" stroke-width="2" class="animate-pulse"/>
|
||||
<line x1="2" y1="50" x2="20" y2="50" stroke="rgba(139,92,246,0.8)" stroke-width="2" class="animate-pulse"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 中心核心 -->
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<div class="w-16 h-16 rounded-full bg-gradient-to-br from-dark-900 to-dark-800 border-2 border-primary-cyan/50 flex items-center justify-center shadow-[0_0_30px_rgba(0,217,255,0.3)]">
|
||||
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary-cyan to-purple-500 animate-pulse-slow flex items-center justify-center">
|
||||
<i class="fa-solid fa-brain text-white text-lg"></i>
|
||||
</div>
|
||||
<!-- 现代化加载动画 -->
|
||||
<div class="flex flex-col items-center">
|
||||
<!-- 多层旋转环 + 脉冲点 -->
|
||||
<div class="relative w-24 h-24 mb-8">
|
||||
<!-- 外环 -->
|
||||
<div class="absolute inset-0 border-2 border-primary-cyan/20 rounded-full"></div>
|
||||
<div class="absolute inset-1 border-2 border-t-primary-cyan rounded-full loading-spin" style="animation-duration: 1.5s;"></div>
|
||||
<!-- 中环 - 反向 -->
|
||||
<div class="absolute inset-2 border-2 border-purple-500/30 rounded-full" style="animation: loading-spin 2s linear infinite reverse;"></div>
|
||||
<!-- 内环 -->
|
||||
<div class="absolute inset-4 border-2 border-primary-cyan/40 rounded-full" style="animation: loading-spin 1s linear infinite;"></div>
|
||||
<!-- 中心脉冲 -->
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<div class="w-3 h-3 bg-primary-cyan rounded-full animate-pulse"></div>
|
||||
</div>
|
||||
<!-- 周围脉冲点 -->
|
||||
<div class="absolute inset-0 flex items-center justify-center" style="animation: loading-dots 1.4s ease-in-out infinite both;">
|
||||
<span class="absolute w-2 h-2 bg-primary-cyan rounded-full" style="top: 10%;"></span>
|
||||
<span class="absolute w-2 h-2 bg-purple-500 rounded-full" style="right: 10%;"></span>
|
||||
<span class="absolute w-2 h-2 bg-primary-orange rounded-full" style="bottom: 10%;"></span>
|
||||
<span class="absolute w-2 h-2 bg-green-500 rounded-full" style="left: 10%;"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 浮动粒子 -->
|
||||
<div class="absolute top-2 left-1/2 w-2 h-2 rounded-full bg-primary-cyan animate-float-particle"></div>
|
||||
<div class="absolute bottom-4 right-2 w-1.5 h-1.5 rounded-full bg-purple-400 animate-float-particle" style="animation-delay: 0.5s"></div>
|
||||
<div class="absolute top-1/3 left-2 w-1 h-1 rounded-full bg-cyan-300 animate-float-particle" style="animation-delay: 1s"></div>
|
||||
</div>
|
||||
|
||||
<!-- 文字信息 -->
|
||||
<div class="mt-8 text-center">
|
||||
<div class="flex items-center justify-center gap-2 mb-2">
|
||||
<span class="w-2 h-2 rounded-full bg-primary-cyan animate-ping"></span>
|
||||
<span class="text-white font-medium tracking-wider">正在构建知识图谱</span>
|
||||
<!-- 文字 -->
|
||||
<div class="text-center mb-6">
|
||||
<p class="text-white font-medium text-lg mb-2">正在生成执行流程</p>
|
||||
<p class="text-gray-400 text-sm">Building your workflow...</p>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm">Neural Network Analysis</p>
|
||||
</div>
|
||||
|
||||
<!-- 科幻进度条 -->
|
||||
<div class="mt-8 w-64">
|
||||
<div class="relative h-1 bg-dark-800 rounded-full overflow-hidden border border-dark-600">
|
||||
<!-- 扫描线 -->
|
||||
<div class="absolute inset-0">
|
||||
<div class="h-full bg-gradient-to-r from-transparent via-primary-cyan/30 to-transparent animate-scan"></div>
|
||||
<!-- 步骤指示器 -->
|
||||
<div class="flex items-center gap-2 mb-6">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<div class="w-2 h-2 rounded-full bg-primary-cyan loading-pulse"></div>
|
||||
<span class="text-xs text-gray-500">分析</span>
|
||||
</div>
|
||||
<div class="w-8 h-px bg-dark-600"></div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<div class="w-2 h-2 rounded-full bg-gray-600"></div>
|
||||
<span class="text-xs text-gray-500">规划</span>
|
||||
</div>
|
||||
<div class="w-8 h-px bg-dark-600"></div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<div class="w-2 h-2 rounded-full bg-gray-600"></div>
|
||||
<span class="text-xs text-gray-500">执行</span>
|
||||
</div>
|
||||
<div class="w-8 h-px bg-dark-600"></div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<div class="w-2 h-2 rounded-full bg-gray-600"></div>
|
||||
<span class="text-xs text-gray-500">完成</span>
|
||||
</div>
|
||||
<!-- 进度 -->
|
||||
<div class="h-full bg-gradient-to-r from-primary-cyan via-purple-400 to-primary-cyan animate-progress-width bg-[length:200%_100%]"></div>
|
||||
</div>
|
||||
<div class="flex justify-between mt-2 text-xs text-gray-500 font-mono">
|
||||
<span>INITIALIZING</span>
|
||||
<span>0%</span>
|
||||
|
||||
<!-- 进度条 -->
|
||||
<div class="w-64">
|
||||
<div class="h-1 bg-dark-700 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-gradient-to-r from-primary-cyan via-purple-500 to-primary-orange loading-progress-bar rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 背景光效层 -->
|
||||
<div v-show="isGraphGenerated" class="absolute inset-0 overflow-hidden">
|
||||
<!-- 青色光晕 -->
|
||||
<div class="absolute top-0 left-0 w-[500px] h-[500px] rounded-full opacity-20" style="background: radial-gradient(circle, rgba(0, 217, 255, 0.3) 0%, transparent 70%); filter: blur(60px);"></div>
|
||||
<!-- 紫色光晕 -->
|
||||
<div class="absolute bottom-0 right-0 w-[400px] h-[400px] rounded-full opacity-15" style="background: radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, transparent 70%); filter: blur(60px);"></div>
|
||||
<!-- 网格线 -->
|
||||
<div class="absolute inset-0 opacity-10" style="background-image: linear-gradient(rgba(0, 217, 255, 0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 217, 255, 0.3) 1px, transparent 1px); background-size: 50px 50px;"></div>
|
||||
<!-- 青色光晕 - 更亮更柔和 -->
|
||||
<div class="absolute top-0 left-0 w-[500px] h-[500px] rounded-full opacity-30" style="background: radial-gradient(circle, rgba(0, 217, 255, 0.4) 0%, transparent 70%); filter: blur(80px);"></div>
|
||||
<!-- 紫色光晕 - 更亮更柔和 -->
|
||||
<div class="absolute bottom-0 right-0 w-[400px] h-[400px] rounded-full opacity-25" style="background: radial-gradient(circle, rgba(139, 92, 246, 0.4) 0%, transparent 70%); filter: blur(80px);"></div>
|
||||
<!-- 中心补充光效 -->
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] rounded-full opacity-15" style="background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%); filter: blur(100px);"></div>
|
||||
</div>
|
||||
|
||||
<!-- ECharts 图谱容器 -->
|
||||
<div v-show="isGraphGenerated" ref="graphChartRef" class="w-full h-full relative z-10"></div>
|
||||
<!-- 金字塔/树形流程图展示 -->
|
||||
<div v-show="isGraphGenerated" class="w-full h-full relative z-10 overflow-auto p-6">
|
||||
<!-- 流程标题 -->
|
||||
<div class="sticky top-0 bg-slate-900/80 backdrop-blur-sm px-4 py-3 border-b border-slate-700/50 mb-6 z-20">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="fa-solid fa-sitemap text-primary-cyan"></i>
|
||||
<span class="text-sm font-medium text-white">执行流程</span>
|
||||
<span class="px-2 py-0.5 rounded-full bg-slate-700 text-xs text-slate-300">4层</span>
|
||||
</div>
|
||||
<span class="text-xs text-slate-400">点击节点展开详情</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 树形结构 - 深邃版本 -->
|
||||
<div class="flex flex-col items-center">
|
||||
<!-- 递归渲染树节点 -->
|
||||
<template v-for="node in workflowData" :key="node.id">
|
||||
<div class="w-full flex flex-col items-center">
|
||||
<!-- 根节点 - 深邃设计 -->
|
||||
<div
|
||||
@click="toggleNode(node)"
|
||||
class="w-full max-w-lg cursor-pointer group"
|
||||
>
|
||||
<!-- 外层发光效果 -->
|
||||
<div
|
||||
class="relative p-1 rounded-2xl transition-all duration-500"
|
||||
:class="node.expanded ? 'opacity-100' : 'opacity-80 hover:opacity-100'"
|
||||
>
|
||||
<!-- 内层背景 -->
|
||||
<div
|
||||
class="relative bg-slate-800/70 backdrop-blur-xl border rounded-2xl p-5 overflow-hidden"
|
||||
:class="node.expanded ? `border-2 ${node.borderColor} shadow-lg shadow-${node.color.includes('green') ? 'green' : node.color.includes('orange') ? 'orange' : node.color.includes('purple') ? 'purple' : 'cyan'}-500/30` : 'border-slate-600/50'"
|
||||
>
|
||||
<!-- 背景光效 -->
|
||||
<div
|
||||
class="absolute inset-0 opacity-30 transition-opacity duration-500"
|
||||
:class="node.expanded ? 'opacity-100' : 'opacity-0'"
|
||||
:style="`background: linear-gradient(135deg, ${node.color.includes('green') ? 'rgba(34, 197, 94, 0.15)' : node.color.includes('orange') ? 'rgba(249, 115, 22, 0.15)' : node.color.includes('purple') ? 'rgba(168, 85, 247, 0.15)' : 'rgba(6, 182, 212, 0.15)'} 0%, transparent 100%);`"
|
||||
></div>
|
||||
|
||||
<!-- 网格纹理 -->
|
||||
<div class="absolute inset-0 opacity-10" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 20px 20px;"></div>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<div class="relative flex items-center gap-4">
|
||||
<!-- 图标容器 - 多层设计 -->
|
||||
<div class="relative">
|
||||
<!-- 外层光晕 -->
|
||||
<div
|
||||
class="absolute inset-0 rounded-2xl blur-xl opacity-40 transition-all duration-500"
|
||||
:class="node.expanded ? 'scale-150 opacity-40' : 'scale-100 opacity-0'"
|
||||
:style="`background: ${node.color.includes('green') ? '#22c55e' : node.color.includes('orange') ? '#f97316' : node.color.includes('purple') ? '#a855f7' : '#06b6d4'};`"
|
||||
></div>
|
||||
<!-- 图标框 -->
|
||||
<div
|
||||
class="relative w-16 h-16 rounded-2xl bg-gradient-to-br flex items-center justify-center border-2 backdrop-blur-sm"
|
||||
:class="[node.bgColor, node.borderColor]"
|
||||
>
|
||||
<i :class="['fa-solid', node.icon, node.color, 'text-2xl']"></i>
|
||||
</div>
|
||||
<!-- 状态指示点 -->
|
||||
<div
|
||||
class="absolute -bottom-1 -right-1 w-4 h-4 rounded-full border-2 border-slate-700 flex items-center justify-center"
|
||||
:class="node.status === 'completed' ? 'bg-green-500' : node.status === 'processing' ? 'bg-yellow-500' : 'bg-gray-500'"
|
||||
>
|
||||
<i v-if="node.status === 'completed'" class="fa-solid fa-check text-[8px] text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 文字内容 -->
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<h4 class="text-white font-bold text-lg tracking-wide">{{ node.name }}</h4>
|
||||
<span
|
||||
class="px-2.5 py-1 rounded-full text-xs font-semibold uppercase tracking-wider backdrop-blur-sm"
|
||||
:class="[
|
||||
node.status === 'completed' ? 'bg-green-500/30 text-green-400 border border-green-500/50' :
|
||||
node.status === 'processing' ? 'bg-yellow-500/30 text-yellow-400 border border-yellow-500/50' :
|
||||
'bg-slate-500/30 text-slate-300 border border-slate-500/50'
|
||||
]"
|
||||
>
|
||||
{{ node.status === 'completed' ? '✓ 完成' : node.status === 'processing' ? '◐ 进行中' : '○ 待处理' }}
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-slate-300 text-sm">{{ node.description }}</p>
|
||||
<!-- 底部信息 -->
|
||||
<div class="flex items-center gap-4 mt-2 text-xs text-slate-400">
|
||||
<span class="flex items-center gap-1">
|
||||
<i class="fa-solid fa-layer-group"></i>
|
||||
Level 1
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<i class="fa-solid fa-code-branch"></i>
|
||||
{{ node.children?.length || 0 }} 个子任务
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 展开箭头 -->
|
||||
<div
|
||||
v-if="node.children && node.children.length > 0"
|
||||
class="flex items-center justify-center w-8 h-8 rounded-lg bg-slate-700/50 border border-slate-600"
|
||||
>
|
||||
<i
|
||||
:class="['fa-solid fa-chevron-down text-slate-300 transition-transform duration-300', node.expanded ? 'rotate-180' : '']"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 连接线 + 子节点 -->
|
||||
<div v-if="node.expanded && node.children" class="w-full flex flex-col items-center mt-1">
|
||||
<!-- 垂直连接线 - 复杂设计 -->
|
||||
<div class="relative flex flex-col items-center">
|
||||
<!-- 主线 -->
|
||||
<div class="w-0.5 h-8 bg-gradient-to-b from-green-500/40 to-purple-500/40"></div>
|
||||
<!-- 发光点 -->
|
||||
<div class="absolute top-1/2 w-2 h-2 rounded-full bg-cyan-400 shadow-lg shadow-cyan-400/40"></div>
|
||||
</div>
|
||||
|
||||
<!-- 子节点容器 -->
|
||||
<div class="w-full flex justify-center gap-6">
|
||||
<div v-for="(child, idx) in node.children" :key="child.id" class="flex-1 flex flex-col items-center max-w-md">
|
||||
<!-- 水平连接线 -->
|
||||
<div class="w-full h-0.5 bg-gradient-to-r from-transparent via-purple-500/40 to-transparent mb-3"></div>
|
||||
|
||||
<!-- 子节点 - 深邃设计 -->
|
||||
<div
|
||||
@click.stop="toggleNode(child)"
|
||||
class="w-full cursor-pointer group"
|
||||
>
|
||||
<div
|
||||
class="relative p-0.5 rounded-xl transition-all duration-300"
|
||||
:class="child.expanded ? 'opacity-100' : 'opacity-80 hover:opacity-100'"
|
||||
>
|
||||
<div
|
||||
class="relative bg-slate-800/60 backdrop-blur-xl border rounded-xl p-4"
|
||||
:class="child.expanded ? `border-2 ${child.borderColor}` : 'border-slate-600/50'"
|
||||
>
|
||||
<!-- 背景微光 -->
|
||||
<div
|
||||
class="absolute inset-0 opacity-20 rounded-xl"
|
||||
:style="`background: linear-gradient(135deg, ${child.color.includes('green') ? 'rgba(34, 197, 94, 0.2)' : child.color.includes('orange') ? 'rgba(249, 115, 22, 0.2)' : child.color.includes('yellow') ? 'rgba(234, 179, 8, 0.2)' : 'rgba(6, 182, 212, 0.2)'} 0%, transparent 100%);`"
|
||||
></div>
|
||||
|
||||
<div class="relative flex items-center gap-3">
|
||||
<!-- 图标 -->
|
||||
<div class="relative">
|
||||
<div
|
||||
class="w-12 h-12 rounded-xl bg-gradient-to-br flex items-center justify-center border"
|
||||
:class="[child.bgColor, child.borderColor]"
|
||||
>
|
||||
<i :class="['fa-solid', child.icon, child.color, 'text-xl']"></i>
|
||||
</div>
|
||||
<!-- 序号标签 -->
|
||||
<div class="absolute -top-2 -left-2 w-5 h-5 rounded-full bg-slate-700 border border-slate-500 flex items-center justify-center text-[10px] text-slate-300 font-bold">
|
||||
{{ idx + 1 }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 文字 -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 mb-0.5">
|
||||
<h5 class="text-white font-semibold">{{ child.name }}</h5>
|
||||
<span
|
||||
v-if="child.children && child.children.length > 0"
|
||||
class="px-1.5 py-0.5 rounded bg-slate-700 text-slate-300 text-xs"
|
||||
>
|
||||
{{ child.children.length }}
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-slate-400 text-xs truncate">{{ child.description }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 箭头 -->
|
||||
<i
|
||||
v-if="child.children && child.children.length > 0"
|
||||
:class="['fa-solid fa-chevron-down text-slate-400 text-xs transition-transform duration-300', child.expanded ? 'rotate-180' : '']"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 孙子节点 -->
|
||||
<div v-if="child.expanded && child.children" class="mt-2 ml-4 space-y-2">
|
||||
<div
|
||||
v-for="(grandchild, gidx) in child.children"
|
||||
:key="grandchild.id"
|
||||
class="relative pl-4 border-l-2 border-slate-600/50"
|
||||
>
|
||||
<!-- 连接点 -->
|
||||
<div class="absolute -left-1 top-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-slate-500"></div>
|
||||
|
||||
<div class="flex items-center gap-3 p-2 rounded-lg bg-slate-700/30 hover:bg-slate-700/60 transition-colors cursor-pointer border border-transparent hover:border-slate-500">
|
||||
<div
|
||||
class="w-8 h-8 rounded-lg bg-gradient-to-br flex items-center justify-center border"
|
||||
:class="[grandchild.bgColor, grandchild.borderColor]"
|
||||
>
|
||||
<i :class="['fa-solid', grandchild.icon, grandchild.color, 'text-sm']"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h6 class="text-white font-medium text-sm">{{ grandchild.name }}</h6>
|
||||
<p class="text-slate-400 text-xs truncate">{{ grandchild.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部提示 -->
|
||||
<div v-show="isGraphGenerated" class="absolute bottom-4 left-1/2 -translate-x-1/2 bg-dark-700/80 backdrop-blur-sm border border-dark-500/50 rounded-lg px-4 py-2 text-xs text-gray-400 shadow-lg">
|
||||
<i class="fa-solid fa-info-circle mr-1 text-primary-cyan"></i>
|
||||
拖拽节点 · 滚轮缩放 · 点击查看详情
|
||||
<div v-show="isGraphGenerated" class="absolute bottom-4 left-1/2 -translate-x-1/2 bg-slate-800/80 backdrop-blur-sm border border-slate-600/50 rounded-lg px-4 py-2 text-xs text-slate-300 shadow-lg">
|
||||
<i class="fa-solid fa-sitemap mr-1 text-primary-cyan"></i>
|
||||
金字塔结构 · 4层执行流程 · 点击展开
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -211,7 +211,7 @@ const providerIcon = (provider: string) => {
|
||||
</div>
|
||||
|
||||
<Teleport to="body">
|
||||
<div v-if="isEditing" class="fixed inset-0 bg-black/60 flex items-center justify-center z-50" @click.self="cancelEdit">
|
||||
<div v-if="isEditing" class="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
|
||||
<div class="bg-dark-700 rounded-2xl w-full max-w-lg border border-dark-500 shadow-2xl">
|
||||
<div class="flex items-center justify-between p-5 border-b border-dark-500">
|
||||
<h3 class="text-lg font-semibold">Edit Model API</h3>
|
||||
|
||||
Reference in New Issue
Block a user