From 6fe3c412f4a6023d84419031cefbe74784c2a322 Mon Sep 17 00:00:00 2001 From: "DESKTOP-72TV0V4\\caoxiaozhu" Date: Fri, 6 Mar 2026 09:29:16 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0Dashboard=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E5=B8=83=E5=B1=80=E5=92=8C=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 将Dashboard顶部的卡片改为CPU、内存、Active Agents三个卡片 - 移除Active MCP Servers和Active Models卡片 - 增强Element Plus下拉框暗色主题样式 - 修复旧HTML文件导致的Tailwind冲突问题 - 统一下拉框样式与输入框风格 Co-Authored-By: Claude Opus 4.6 --- web/src/style.css | 72 +++++++++++----- web/src/views/Dashboard.vue | 159 +++++++++++++----------------------- web/vite.config.ts | 5 ++ 3 files changed, 116 insertions(+), 120 deletions(-) diff --git a/web/src/style.css b/web/src/style.css index cef2903..b113384 100644 --- a/web/src/style.css +++ b/web/src/style.css @@ -36,27 +36,49 @@ html.dark .el-select { --el-select-input-focus-border-color: #ff9500; } -html.dark .el-select .el-input__wrapper { - background-color: #1a1c25; - box-shadow: 0 0 0 1px #2a2c36 inset; +html.dark .el-select .el-input__wrapper, +html.dark .el-select .el-select__wrapper { + background-color: #1a1c25 !important; + border: 1px solid #2a2c36; border-radius: 8px; transition: all 0.2s ease; + padding: 2px 11px; + min-height: 42px; +} + +html.dark .el-select.el-select--large .el-input__wrapper { + padding: 5px 11px; + min-height: 46px; } html.dark .el-select .el-input__wrapper:hover { - box-shadow: 0 0 0 1px #ff9500 inset; + border-color: #ff9500; } html.dark .el-select .el-input__wrapper.is-focus { - box-shadow: 0 0 0 1px #ff9500 inset; + border-color: #ff9500; } html.dark .el-select .el-input__inner { color: #ffffff; + line-height: 1.5; +} + +html.dark .el-select .el-input__wrapper { + display: flex; + align-items: center; +} + +html.dark .el-select .el-select__wrapper { + box-shadow: none !important; +} + +html.dark .el-select .el-select__wrapper .el-select__selected-item { + line-height: normal; } html.dark .el-select .el-input__inner::placeholder { - color: #71717a; + color: #6b7280; } /* 下拉箭头 */ @@ -78,21 +100,22 @@ html.dark .el-select .el-input__suffix .el-select__caret:hover { } /* 下拉菜单 */ +.el-select-dropdown.el-popper, html.dark .el-select-dropdown { - background-color: #171922; - border: 1px solid #2a2c36; + background-color: #1a1c25 !important; + border: 1px solid #2a2c36 !important; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } html.dark .el-select-dropdown__item { - color: #ffffff; + color: #ffffff !important; padding: 8px 12px; transition: all 0.2s; } html.dark .el-select-dropdown__item:hover { - background-color: #1a1c25; + background-color: #1a1c25 !important; } html.dark .el-select-dropdown__item.is-selected { @@ -118,23 +141,34 @@ html.dark .el-select-dropdown__empty { } /* popper 箭头 */ +.el-popper.is-light, html.dark .el-popper.is-light { - background: #171922; - border: 1px solid #2a2c36; + background: #1a1c25 !important; + border: 1px solid #2a2c36 !important; } +.el-popper.is-light .el-popper__arrow::before, html.dark .el-popper.is-light .el-popper__arrow::before { - background: #171922; - border-color: #2a2c36; + background: #1a1c25 !important; + border-color: #2a2c36 !important; } -/* 输入框尺寸 */ -html.dark .el-select.el-select--large .el-input__wrapper { - padding: 4px 11px; +/* 选中项文字居中 */ +html.dark .el-select .el-select__wrapper { + display: flex; + align-items: center; } -html.dark .el-select.el-select--default .el-input__wrapper { - padding: 3px 10px; +html.dark .el-select .el-select__selected-item, +html.dark .el-select .el-select__placeholder { + line-height: 20px !important; + display: flex; + align-items: center; +} + +html.dark .el-select .el-select__selected-item > span { + display: inline-flex; + align-items: center; } /* 多选标签 */ diff --git a/web/src/views/Dashboard.vue b/web/src/views/Dashboard.vue index c9e60a1..6516bdd 100644 --- a/web/src/views/Dashboard.vue +++ b/web/src/views/Dashboard.vue @@ -3,9 +3,9 @@ import { ref, onMounted } from 'vue' // 显示的数字（用于动画） const displayStats = ref({ + cpu: 0, + memory: 0, activeAgents: 0, - activeMCP: 0, - activeModels: 0, requests: 0, agentsCalls: 0, mcpCalls: 0, @@ -14,9 +14,9 @@ const displayStats = ref({ // 目标数字 const targetStats = { + cpu: 45, + memory: 72, activeAgents: 3, - activeMCP: 21, - activeModels: 13, requests: 36, agentsCalls: 3, mcpCalls: 21, @@ -47,9 +47,9 @@ const animateNumber = (key: keyof typeof displayStats.value, target: number) => onMounted(() => { // 页面加载后依次动画每个数字 - setTimeout(() => animateNumber('activeAgents', targetStats.activeAgents), 0) - setTimeout(() => animateNumber('activeMCP', targetStats.activeMCP), 300) - setTimeout(() => animateNumber('activeModels', targetStats.activeModels), 600) + setTimeout(() => animateNumber('cpu', targetStats.cpu), 0) + setTimeout(() => animateNumber('memory', targetStats.memory), 200) + setTimeout(() => animateNumber('activeAgents', targetStats.activeAgents), 400) // deployment insights 数字动画（延迟900ms，在顶部stats之后） setTimeout(() => animateNumber('requests', targetStats.requests), 900) setTimeout(() => animateNumber('agentsCalls', targetStats.agentsCalls), 1000) @@ -64,20 +64,6 @@ const agents = ref([ { 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 }, @@ -121,8 +107,6 @@ const recentRequests = ref([ // 开关状态 const agentErrorEnabled = ref(true) -const mcpErrorEnabled = ref(false) -const modelErrorEnabled = ref(false) // Top requests标签切换 const topRequestsTab = ref<'general' | 'errors'>('general') @@ -152,6 +136,56 @@ const topRequestsTab = ref<'general' | 'errors'>('general')
+ +
+
+

CPU Usage

+
+ Live + +
+
+
{{ displayStats.cpu }}%
+ +
+
+
+ +
+ 0% + 50% + 100% +
+
+ + +
+
+

Memory Usage

+
+ Live + +
+
+
{{ displayStats.memory }}%
+ +
+
+
+ +
+ 0% + 50% + 100% +
+
+
@@ -172,13 +206,10 @@ const topRequestsTab = ref<'general' | 'errors'>('general')
{{ displayStats.activeAgents }}
- +
-
-
-
@@ -194,80 +225,6 @@ const topRequestsTab = ref<'general' | 'errors'>('general')
- -
-
-

Active MCP Servers

-
- Errors -
-
-
-
-
-
{{ displayStats.activeMCP }}
- -
-
-
-
-
- -
    -
  • -
    - - {{ server.name }} -
    - {{ server.count }} -
    • -
-
- - -
-
-

Active Models

-
- Errors -
-
-
-
-
-
{{ displayStats.activeModels }}
- -
-
-
-
-
- -
    -
  • -
    - - {{ model.name }} -
    - {{ model.count }} -
    • -
-
-
diff --git a/web/vite.config.ts b/web/vite.config.ts index 9beb4c3..37febd9 100644 --- a/web/vite.config.ts +++ b/web/vite.config.ts @@ -8,5 +8,10 @@ export default defineConfig({ alias: { '@': resolve(__dirname, 'src') } + }, + server: { + fs: { + allow: ['..'] + } } })