Add Database page with new connection feature

- Reorganize project structure: move frontend to web/ directory
- Add Database page with connection list (name, type, subtables, status, created, actions)
- Integrate Element Plus for UI components with dark theme support
- Add Quicksand font for rounded UI design
- Configure root package.json to run frontend from web/ directory

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

web/src/views/Dashboard.vue

@@ -0,0 +1,439 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+// 显示的数字（用于动画）
+const displayStats = ref({
+  activeAgents: 0,
+  activeMCP: 0,
+  activeModels: 0,
+  requests: 0,
+  agentsCalls: 0,
+  mcpCalls: 0,
+  modelRequests: 0,
+})
+
+// 目标数字
+const targetStats = {
+  activeAgents: 3,
+  activeMCP: 21,
+  activeModels: 13,
+  requests: 36,
+  agentsCalls: 3,
+  mcpCalls: 21,
+  modelRequests: 13,
+}
+
+// 数字滚动动画函数
+const animateNumber = (key: keyof typeof displayStats.value, target: number) => {
+  const duration = 2000
+  const startTime = Date.now()
+  const startValue = 0
+
+  const animate = () => {
+    const elapsed = Date.now() - startTime
+    const progress = Math.min(elapsed / duration, 1)
+    // 使用easeOut曲线
+    const eased = 1 - Math.pow(1 - progress, 3)
+    displayStats.value[key] = Math.floor(startValue + (target - startValue) * eased)
+
+    if (progress < 1) {
+      requestAnimationFrame(animate)
+    } else {
+      displayStats.value[key] = target
+    }
+  }
+  animate()
+}
+
+onMounted(() => {
+  // 页面加载后依次动画每个数字
+  setTimeout(() => animateNumber('activeAgents', targetStats.activeAgents), 0)
+  setTimeout(() => animateNumber('activeMCP', targetStats.activeMCP), 300)
+  setTimeout(() => animateNumber('activeModels', targetStats.activeModels), 600)
+  // deployment insights 数字动画（延迟900ms，在顶部stats之后）
+  setTimeout(() => animateNumber('requests', targetStats.requests), 900)
+  setTimeout(() => animateNumber('agentsCalls', targetStats.agentsCalls), 1000)
+  setTimeout(() => animateNumber('mcpCalls', targetStats.mcpCalls), 1100)
+  setTimeout(() => animateNumber('modelRequests', targetStats.modelRequests), 1200)
+})
+
+// Agents列表
+const agents = ref([
+  { name: 'template-google-adk-api', count: 1, color: 'bg-primary-yellow', status: 'success' },
+  { name: 'mcp-google-adk-api', count: 1, color: 'bg-primary-cyan', status: 'error' },
+  { name: 'template-openai-api', count: 1, color: 'bg-primary-purple', status: 'error' },
+])
+
+// MCP Servers列表
+const mcpServers = ref([
+  { name: 'linear-demo', count: 15, color: 'bg-primary-yellow' },
+  { name: 'google-maps', count: 4, color: 'bg-primary-cyan' },
+  { name: 'explorer-mcp', count: 2, color: 'bg-primary-purple' },
+])
+
+// Models列表
+const models = ref([
+  { name: 'gpt-40-2024-08-12', count: 2, color: 'bg-primary-yellow' },
+  { name: 'cerebras-sandbox', count: 6, color: 'bg-primary-cyan' },
+  { name: 'sandbox-openai', count: 5, color: 'bg-primary-purple' },
+])
+
+// 图表数据
+const chartData = ref([
+  { time: '3:02 PM', agents: 1, mcp: 2, models: 1.5 },
+  { time: '3:07 PM', agents: 2, mcp: 2.5, models: 2 },
+  { time: '3:12 PM', agents: 2.5, mcp: 5, models: 4 },
+  { time: '3:17 PM', agents: 2.5, mcp: 3, models: 2 },
+  { time: '3:22 PM', agents: 1.5, mcp: 2.5, models: 1.5 },
+  { time: '3:27 PM', agents: 1.5, mcp: 3, models: 2.5 },
+  { time: '3:32 PM', agents: 1, mcp: 2, models: 2.5 },
+  { time: '3:37 PM', agents: 2.5, mcp: 8, models: 3 },
+  { time: '3:42 PM', agents: 1, mcp: 5, models: 2.5 },
+  { time: '3:47 PM', agents: 2.5, mcp: 3, models: 2 },
+])
+
+// Top 10请求
+const topRequests = ref([
+  { name: 'gpt-40-2024-08-12', type: 'cube', count: 7 },
+  { name: 'google-maps', type: 'code', count: 4 },
+  { name: 'explorer-mcp', type: 'code', count: 2 },
+  { name: 'template-google-adk-api', type: 'cube', count: 4 },
+  { name: 'linear-demo', type: 'cube', count: 2 },
+  { name: 'cerebras-sandbox', type: 'code', count: 1 },
+  { name: 'sandbox-openai', type: 'cube', count: 2 },
+])
+
+// What's new
+const whatsNew = ref([
+  { title: 'New framework supported: PydanticAI', desc: 'Added support for PydanticAI framework', date: '2025-04-12' },
+  { title: 'New framework supported: Google ADK', desc: 'Added support for Google ADK (Agent Development Kit) framework', date: '2025-04-07' },
+  { title: 'Improved Analytics Dashboard', desc: 'Enhanced real-time monitoring with faster data refresh', date: '2025-04-15' },
+])
+
+// Recent requests
+const recentRequests = ref([
+  { name: 'linear-demo', type: 'cube', time: '21 hours', status: 'success' },
+  { name: 'myagent', type: 'robot', time: '21 hours', status: 'success' },
+  { name: 'linear-demo', type: 'cube', time: '21 hours', status: 'success' },
+  { name: 'gpt-40', type: 'code', time: '21 hours', status: 'success' },
+  { name: 'linear-demo', type: 'cube', time: '21 hours', status: 'success' },
+])
+
+// 开关状态
+const agentErrorEnabled = ref(true)
+const mcpErrorEnabled = ref(false)
+const modelErrorEnabled = ref(false)
+
+// Top requests标签切换
+const topRequestsTab = ref<'general' | 'errors'>('general')
+</script>
+
+<template>
+  <!-- 主内容区域 -->
+  <div class="p-6 min-h-screen">
+      <!-- 顶部导航与日期选择区 -->
+      <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 relative cursor-pointer transition-colors"
+                :class="agentErrorEnabled ? 'bg-primary-orange' : 'bg-dark-500'"
+                @click="agentErrorEnabled = !agentErrorEnabled"
+              >
+                <div
+                  class="absolute top-0.5 w-4 h-4 rounded-full bg-white transition-transform"
+                  :class="agentErrorEnabled ? 'right-0.5' : 'left-0.5'"
+                ></div>
+              </div>
+            </div>
+          </div>
+          <div class="text-4xl font-bold mb-4">{{ displayStats.activeAgents }}</div>
+          <!-- 进度条 - 三个同时动画 -->
+          <div class="w-full h-2 rounded-full bg-dark-500 overflow-hidden mb-4 relative">
+            <!-- 黄色 -->
+            <div class="absolute left-0 top-0 h-full bg-primary-yellow progress-bar" style="--target-width: 33%"></div>
+            <!-- 蓝色 -->
+            <div class="absolute top-0 h-full bg-primary-cyan progress-bar" style="left: 33%; --target-width: 33%"></div>
+            <!-- 紫色 -->
+            <div class="absolute top-0 h-full bg-primary-purple progress-bar" style="left: 66%; --target-width: 34%"></div>
+          </div>
+          <!-- 明细列表 -->
+          <ul class="space-y-2">
+            <li v-for="agent in agents" :key="agent.name" class="flex justify-between items-center">
+              <div class="flex items-center gap-2">
+                <span class="w-3 h-3 rounded-sm" :class="agent.color"></span>
+                <span class="text-sm text-gray-300">{{ agent.name }}</span>
+                <span v-if="agent.status === 'error'" class="bg-primary-danger text-white text-xs px-1.5 py-0.5 rounded">Error</span>
+              </div>
+              <span class="text-sm">{{ agent.count }}</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 relative cursor-pointer transition-colors"
+                :class="mcpErrorEnabled ? 'bg-primary-orange' : 'bg-dark-500'"
+                @click="mcpErrorEnabled = !mcpErrorEnabled"
+              >
+                <div
+                  class="absolute top-0.5 w-4 h-4 rounded-full transition-transform"
+                  :class="mcpErrorEnabled ? 'right-0.5 bg-white' : 'left-0.5 bg-gray-400'"
+                ></div>
+              </div>
+            </div>
+          </div>
+          <div class="text-4xl font-bold mb-4">{{ displayStats.activeMCP }}</div>
+          <!-- 进度条 - 三个同时动画 -->
+          <div class="w-full h-2 rounded-full bg-dark-500 overflow-hidden mb-4 relative">
+            <div class="absolute left-0 top-0 h-full bg-primary-yellow progress-bar" style="--target-width: 71%"></div>
+            <div class="absolute top-0 h-full bg-primary-cyan progress-bar" style="left: 71%; --target-width: 19%"></div>
+            <div class="absolute top-0 h-full bg-primary-purple progress-bar" style="left: 90%; --target-width: 10%"></div>
+          </div>
+          <!-- 明细列表 -->
+          <ul class="space-y-2">
+            <li v-for="server in mcpServers" :key="server.name" class="flex justify-between items-center">
+              <div class="flex items-center gap-2">
+                <span class="w-3 h-3 rounded-sm" :class="server.color"></span>
+                <span class="text-sm text-gray-300">{{ server.name }}</span>
+              </div>
+              <span class="text-sm">{{ server.count }}</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 relative cursor-pointer transition-colors"
+                :class="modelErrorEnabled ? 'bg-primary-orange' : 'bg-dark-500'"
+                @click="modelErrorEnabled = !modelErrorEnabled"
+              >
+                <div
+                  class="absolute top-0.5 w-4 h-4 rounded-full transition-transform"
+                  :class="modelErrorEnabled ? 'right-0.5 bg-white' : 'left-0.5 bg-gray-400'"
+                ></div>
+              </div>
+            </div>
+          </div>
+          <div class="text-4xl font-bold mb-4">{{ displayStats.activeModels }}</div>
+          <!-- 进度条 - 三个同时动画 -->
+          <div class="w-full h-2 rounded-full bg-dark-500 overflow-hidden mb-4 relative">
+            <div class="absolute left-0 top-0 h-full bg-primary-yellow progress-bar" style="--target-width: 46%"></div>
+            <div class="absolute top-0 h-full bg-primary-cyan progress-bar" style="left: 46%; --target-width: 15%"></div>
+            <div class="absolute top-0 h-full bg-primary-purple progress-bar" style="left: 61%; --target-width: 39%"></div>
+          </div>
+          <!-- 明细列表 -->
+          <ul class="space-y-2">
+            <li v-for="model in models" :key="model.name" class="flex justify-between items-center">
+              <div class="flex items-center gap-2">
+                <span class="w-3 h-3 rounded-sm" :class="model.color"></span>
+                <span class="text-sm text-gray-300">{{ model.name }}</span>
+              </div>
+              <span class="text-sm">{{ model.count }}</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">{{ displayStats.requests }}</div>
+            </div>
+            <div>
+              <div class="text-sm text-gray-400 mb-1">Agents calls</div>
+              <div class="text-2xl font-bold">{{ displayStats.agentsCalls }}</div>
+            </div>
+            <div>
+              <div class="text-sm text-gray-400 mb-1">MCP servers calls</div>
+              <div class="text-2xl font-bold">{{ displayStats.mcpCalls }}</div>
+            </div>
+            <div>
+              <div class="text-sm text-gray-400 mb-1">Models requests</div>
+              <div class="text-2xl font-bold">{{ displayStats.modelRequests }}</div>
+            </div>
+          </div>
+          <!-- 纯CSS模拟柱状图 -->
+          <div class="relative h-52 w-full">
+            <!-- 绘图区（网格线+Y轴+柱子） 预留底部20px给时间标签 -->
+            <div class="relative h-[calc(100%-20px)] w-full">
+              <!-- 横向网格线 -->
+              <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轴刻度 -->
+              <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">
+                <div
+                  v-for="item in chartData"
+                  :key="item.time"
+                  class="flex items-end gap-1 h-full w-full justify-center"
+                >
+                  <!-- 所有柱子同时动画 -->
+                  <div
+                    class="w-3 bg-primary-yellow rounded-t-sm chart-bar"
+                    :style="{ height: (item.mcp / 8 * 100) + '%' }"
+                  ></div>
+                  <div
+                    class="w-3 bg-primary-cyan rounded-t-sm chart-bar"
+                    :style="{ height: (item.models / 8 * 100) + '%' }"
+                  ></div>
+                  <div
+                    class="w-3 bg-primary-purple rounded-t-sm chart-bar"
+                    :style="{ height: (item.agents / 8 * 100) + '%' }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 时间标签区 -->
+            <div class="ml-6 w-full flex justify-between gap-1 mt-1">
+              <span v-for="item in chartData" :key="item.time" class="text-xs text-gray-500 w-full text-center">{{ item.time }}</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 border border-dark-500 rounded-lg overflow-hidden">
+            <button
+              class="flex-1 py-2 text-sm font-medium transition-colors"
+              :class="topRequestsTab === 'general' ? 'bg-dark-500 text-white' : 'bg-dark-600 text-gray-400 hover:text-white'"
+              @click="topRequestsTab = 'general'"
+            >
+              General
+            </button>
+            <button
+              class="flex-1 py-2 text-sm font-medium transition-colors"
+              :class="topRequestsTab === 'errors' ? 'bg-dark-500 text-white' : 'bg-dark-600 text-gray-400 hover:text-white'"
+              @click="topRequestsTab = 'errors'"
+            >
+              Errors
+            </button>
+          </div>
+          <!-- 列表 -->
+          <ul class="space-y-3">
+            <li v-for="req in topRequests" :key="req.name" class="flex justify-between items-center">
+              <div class="flex items-center gap-2">
+                <i :class="['fa-solid', req.type === 'cube' ? 'fa-cube' : 'fa-code', 'text-gray-400']"></i>
+                <span class="text-sm text-gray-300">{{ req.name }}</span>
+              </div>
+              <span class="text-sm">{{ req.count }}</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 v-for="item in whatsNew" :key="item.title" class="flex justify-between items-start">
+              <div>
+                <h4 class="font-medium mb-1">{{ item.title }}</h4>
+                <p class="text-sm text-gray-400">{{ item.desc }}</p>
+              </div>
+              <span class="text-xs text-gray-500">{{ item.date }}</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 v-for="(req, index) in recentRequests" :key="index" class="flex items-center gap-3">
+              <i :class="['fa-solid', req.type === 'cube' ? 'fa-cube' : req.type === 'robot' ? 'fa-robot' : 'fa-code', 'text-gray-400']"></i>
+              <div class="flex-1">
+                <div class="flex justify-between items-center">
+                  <span class="text-sm font-medium">{{ req.name }}</span>
+                  <span class="text-xs text-gray-500">in {{ req.time }}</span>
+                </div>
+                <div class="flex items-center gap-1 text-xs text-primary-success">
+                  <i class="fa-solid fa-circle-check"></i>
+                  <span>{{ req.status }}</span>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+</template>