From e592c7566236acfda6c16a8eb2d1f5d3d87c8c0a Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Tue, 7 Oct 2025 13:04:14 +0800
Subject: [PATCH] =?UTF-8?q?style(dashboard):=20=E6=9B=B4=E6=96=B0=E5=9B=BE?=
 =?UTF-8?q?=E8=A1=A8=E8=B0=83=E8=89=B2=E7=9B=98=E5=92=8C=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修改 base.css 中的图表调色盘颜色，提升视觉效果
- 在多个组件中引入统一的颜色工具函数，确保颜色一致性
- 优化仪表板组件的样式，提升用户体验和可读性
- 移除冗余的颜色定义，简化代码结构
---
 web/src/assets/css/base.css                   |   2 +-
 web/src/assets/css/dashboard.css              |   8 +-
 .../dashboard/AgentStatsComponent.vue         |  15 +-
 .../dashboard/CallStatsComponent.vue          |  59 +------
 .../dashboard/KnowledgeStatsComponent.vue     |  37 +----
 .../dashboard/ToolStatsComponent.vue          |   7 +-
 .../dashboard/UserStatsComponent.vue          |   7 +-
 web/src/utils/chartColors.js                  | 146 ++++++++++++++++++
 8 files changed, 175 insertions(+), 106 deletions(-)
 create mode 100644 web/src/utils/chartColors.js

diff --git a/web/src/assets/css/base.css b/web/src/assets/css/base.css
index a64f7ce2..71476518 100644
--- a/web/src/assets/css/base.css
+++ b/web/src/assets/css/base.css
@@ -82,7 +82,7 @@
 
   /* Chart Palette - 图表调色板 */
   --chart-palette-1: var(--chart-primary);
-  --chart-palette-2: #028ea0;            /* 浅一点的青蓝 */
+  --chart-palette-2: #11cbe3;            /* 浅一点的青蓝 */
   --chart-palette-3: #00b8a9;            /* 明亮青绿（邻近色） */
   --chart-palette-4: #f2c94c;            /* 柔和金黄（对比色） */
   --chart-palette-5: #eb5757;            /* 温暖红橙（强调） */
diff --git a/web/src/assets/css/dashboard.css b/web/src/assets/css/dashboard.css
index 8930604b..dbd4c168 100644
--- a/web/src/assets/css/dashboard.css
+++ b/web/src/assets/css/dashboard.css
@@ -341,11 +341,12 @@
 
 /* 使用更具体的选择器来覆盖 Ant Design 的默认样式 */
 .dashboard-card .ant-card-head {
-  border-bottom: 1px solid var(--gray-200) !important;
+  /* border-bottom: 1px solid var(--gray-200) !important; */
   min-height: 56px !important;
   padding: 0 20px !important;
   flex-shrink: 0;
   background-color: var(--gray-0) !important;
+  /* border: 1px solo; */
 }
 
 .dashboard-card .ant-card-head-title {
@@ -356,11 +357,16 @@
 
 .dashboard-card .ant-card-body {
   padding: 20px !important;
+  padding-top: 0px !important;
   flex: 1;
   overflow: auto;
   background-color: var(--gray-0) !important;
 }
 
+.dashboard-card .ant-card-extra {
+  padding-top: 0px !important;
+}
+
 /* 统计概览样式 */
 .stats-overview {
   margin-bottom: 16px;
diff --git a/web/src/components/dashboard/AgentStatsComponent.vue b/web/src/components/dashboard/AgentStatsComponent.vue
index f4c2834d..ab3c831b 100644
--- a/web/src/components/dashboard/AgentStatsComponent.vue
+++ b/web/src/components/dashboard/AgentStatsComponent.vue
@@ -98,6 +98,7 @@
 <script setup>
 import { ref, onMounted, watch, nextTick, computed } from 'vue'
 import * as echarts from 'echarts'
+import { getColorByIndex, getChartColor } from '@/utils/chartColors'
 
 // Props
 const props = defineProps({
@@ -164,9 +165,9 @@ const topPerformers = computed(() => {
 
 // 颜色辅助函数
 const getScoreColor = (score) => {
-  if (score >= 80) return '#3996ae'
-  if (score >= 60) return '#82c3d6'
-  return '#a3d8e8'
+  if (score >= 80) return getChartColor('primary')
+  if (score >= 60) return getChartColor('warning')
+  return getChartColor('accent')
 }
 
 
@@ -252,12 +253,12 @@ const initConversationToolChart = () => {
           return item ? item.conversation_count : 0
         }),
         itemStyle: {
-          color: '#3996ae',
+          color: getChartColor('primary'),
           borderRadius: [4, 4, 0, 0]
         },
         emphasis: {
           itemStyle: {
-            color: '#028ea0',
+            color: getChartColor('primary'),
             shadowBlur: 10,
             shadowColor: 'rgba(2, 142, 160, 0.3)'
           }
@@ -271,12 +272,12 @@ const initConversationToolChart = () => {
           return item ? item.tool_usage_count : 0
         }),
         itemStyle: {
-          color: '#00b8a9',
+          color: getChartColor('accent'),
           borderRadius: [4, 4, 0, 0]
         },
         emphasis: {
           itemStyle: {
-            color: '#028ea0',
+            color: getChartColor('primary'),
             shadowBlur: 10,
             shadowColor: 'rgba(2, 142, 160, 0.3)'
           }
diff --git a/web/src/components/dashboard/CallStatsComponent.vue b/web/src/components/dashboard/CallStatsComponent.vue
index ca03e665..e83a9408 100644
--- a/web/src/components/dashboard/CallStatsComponent.vue
+++ b/web/src/components/dashboard/CallStatsComponent.vue
@@ -42,6 +42,7 @@
 import { ref, computed, onMounted, onUnmounted, nextTick, defineExpose, watch } from 'vue'
 import * as echarts from 'echarts'
 import { dashboardApi } from '@/apis/dashboard_api'
+import { getColorByIndex, truncateLegend } from '@/utils/chartColors'
 
 const props = defineProps({
   loading: { type: Boolean, default: false },
@@ -81,62 +82,6 @@ let retryTimer = null
 const retryCount = ref(0)
 const maxRetry = 20
 
-// Build color palette from CSS variables in base.css
-let colorPalette = []
-const buildColorPalette = () => {
-  try {
-    const root = document.documentElement
-    const styles = getComputedStyle(root)
-    const pick = (name, fallback) => {
-      const v = styles.getPropertyValue(name)
-      return v && v.trim() ? v.trim() : fallback
-    }
-    const baseVars = [
-      ['--chart-primary', '#3996ae'],
-      ['--chart-success', '#52c41a'],
-      ['--chart-warning', '#faad14'],
-      ['--chart-error', '#f5222d'],
-      ['--chart-secondary', '#722ed1'],
-      ['--chart-accent', '#13c2c2'],
-    ]
-    const paletteVars = [
-      ['--chart-palette-1', '#3996ae'],
-      ['--chart-palette-2', '#028ea0'],
-      ['--chart-palette-3', '#00b8a9'],
-      ['--chart-palette-4', '#f2c94c'],
-      ['--chart-palette-5', '#eb5757'],
-      ['--chart-palette-6', '#2f80ed'],
-      ['--chart-palette-7', '#9b51e0'],
-      ['--chart-palette-8', '#56ccf2'],
-      ['--chart-palette-9', '#6fcf97'],
-      ['--chart-palette-10', '#333333'],
-    ]
-    const baseColors = baseVars.map(([n, f]) => pick(n, f))
-    const paletteColors = paletteVars.map(([n, f]) => pick(n, f))
-    // PRIORITY: palette first, then base
-    const merged = [...paletteColors, ...baseColors]
-      .filter(Boolean)
-      .filter((c, idx, arr) => arr.indexOf(c) === idx)
-    colorPalette = merged
-  } catch (e) {
-    // Fallback
-    colorPalette = [
-      '#3996ae', '#52c41a', '#faad14', '#f5222d', '#722ed1', '#13c2c2',
-      '#fa8c16', '#1890ff', '#95de64', '#69c0ff'
-    ]
-  }
-}
-
-const getColorByIndex = (index) => {
-  if (!colorPalette || colorPalette.length === 0) buildColorPalette()
-  return colorPalette[index % colorPalette.length]
-}
-
-const truncateLegend = (name) => {
-  if (!name) return ''
-  return name.length > 20 ? name.slice(0, 20) + '…' : name
-}
-
 const loadCallStats = async () => {
   callStatsLoading.value = true
   try {
@@ -178,7 +123,6 @@ const renderCallStatsChart = () => {
     callStatsChart.dispose()
   }
 
-  if (!colorPalette || colorPalette.length === 0) buildColorPalette()
 
   callStatsChart = echarts.init(container)
 
@@ -295,7 +239,6 @@ const cleanup = () => {
 defineExpose({ cleanup })
 
 onMounted(() => {
-  buildColorPalette()
   loadCallStats()
 })
 
diff --git a/web/src/components/dashboard/KnowledgeStatsComponent.vue b/web/src/components/dashboard/KnowledgeStatsComponent.vue
index ec0a1013..043721e5 100644
--- a/web/src/components/dashboard/KnowledgeStatsComponent.vue
+++ b/web/src/components/dashboard/KnowledgeStatsComponent.vue
@@ -94,6 +94,7 @@
 <script setup>
 import { ref, onMounted, watch, nextTick, computed } from 'vue'
 import * as echarts from 'echarts'
+import { getColorByIndex, getChartColor, getColorPalette } from '@/utils/chartColors'
 
 // Props
 const props = defineProps({
@@ -134,38 +135,8 @@ const formattedStorageSize = computed(() => {
 //   return nodes > 0 ? size / (nodes * 1024) : 0 // 转换为KB
 // })
 
-// 颜色数组 - 基于主题色的协调调色板
-const colorPalette = [
-  '#3996ae', // 主色调
-  '#5faec2', // 主色调浅色
-  '#82c3d6', // 主色调更浅
-  '#a3d8e8', // 主色调最浅
-  '#24839a', // 主色调深色
-  '#046a82', // 主色调更深
-  '#035065', // 主色调最深
-  '#c4eaf5', // 极浅色
-  '#e1f6fb', // 背景色
-  '#f2fbfd'  // 最浅背景色
-]
-
-const getColorByIndex = (index) => {
-  return colorPalette[index % colorPalette.length]
-}
-
-// 图例/分段颜色：与 base.css 中的 --chart-palette-* 保持一致（使用固定 HEX）
-const legendPalette = [
-  '#3996ae', // --chart-palette-1 -> var(--chart-primary)
-  '#028ea0', // --chart-palette-2
-  '#00b8a9', // --chart-palette-3
-  '#f2c94c', // --chart-palette-4
-  '#eb5757', // --chart-palette-5
-  '#2f80ed', // --chart-palette-6
-  '#9b51e0', // --chart-palette-7
-  '#56ccf2', // --chart-palette-8
-  '#6fcf97', // --chart-palette-9
-  '#333333'  // --chart-palette-10
-]
-const getLegendColorByIndex = (index) => legendPalette[index % legendPalette.length]
+// 使用统一的调色盘
+const getLegendColorByIndex = (index) => getColorByIndex(index)
 
 
 // 初始化数据库类型分布图 - 横向分段条
@@ -293,7 +264,7 @@ const initFileTypeChart = () => {
           show: true
         },
         data: data,
-        color: legendPalette
+        color: getColorPalette()
       }]
     }
 
diff --git a/web/src/components/dashboard/ToolStatsComponent.vue b/web/src/components/dashboard/ToolStatsComponent.vue
index 878af22b..e9106fef 100644
--- a/web/src/components/dashboard/ToolStatsComponent.vue
+++ b/web/src/components/dashboard/ToolStatsComponent.vue
@@ -86,6 +86,7 @@
 <script setup>
 import { ref, onMounted, watch, nextTick, computed } from 'vue'
 import * as echarts from 'echarts'
+import { getColorByIndex, getChartColor, getColorPalette } from '@/utils/chartColors'
 
 // Props
 const props = defineProps({
@@ -197,12 +198,12 @@ const initToolsChart = () => {
       type: 'bar',
       data: data.map(item => item.count),
       itemStyle: {
-        color: '#3996ae',
+        color: getChartColor('primary'),
         borderRadius: [0, 4, 4, 0]
       },
       emphasis: {
         itemStyle: {
-          color: '#028ea0',
+          color: getChartColor('primary'),
           shadowBlur: 10,
           shadowColor: 'rgba(2, 142, 160, 0.3)'
         }
@@ -257,7 +258,7 @@ const initErrorChart = () => {
           shadowColor: 'rgba(0, 0, 0, 0.5)'
         }
       },
-      color: ['#3996ae', '#028ea0', '#00b8a9', '#f2c94c', '#eb5757', '#2f80ed', '#9b51e0', '#56ccf2', '#6fcf97', '#333333']
+      color: getColorPalette()
     }]
   }
 
diff --git a/web/src/components/dashboard/UserStatsComponent.vue b/web/src/components/dashboard/UserStatsComponent.vue
index 3b96415b..58ec0129 100644
--- a/web/src/components/dashboard/UserStatsComponent.vue
+++ b/web/src/components/dashboard/UserStatsComponent.vue
@@ -30,6 +30,7 @@
 <script setup>
 import { ref, onMounted, watch, nextTick } from 'vue'
 import * as echarts from 'echarts'
+import { getChartColor } from '@/utils/chartColors'
 import { dashboardApi } from '@/apis/dashboard_api'
 
 // Props
@@ -105,7 +106,7 @@ const initActivityChart = () => {
       data: props.userStats.daily_active_users.map(item => item.active_users),
       smooth: true,
       lineStyle: {
-        color: '#3996ae',
+        color: getChartColor('primary'),
         width: 3
       },
       areaStyle: {
@@ -123,13 +124,13 @@ const initActivityChart = () => {
         }
       },
       itemStyle: {
-        color: '#3996ae',
+        color: getChartColor('primary'),
         borderWidth: 2,
         borderColor: '#fff'
       },
       emphasis: {
         itemStyle: {
-          color: '#24839a',
+          color: getChartColor('primary'),
           borderWidth: 3,
           borderColor: '#fff',
           shadowBlur: 10,
diff --git a/web/src/utils/chartColors.js b/web/src/utils/chartColors.js
new file mode 100644
index 00000000..46fac50a
--- /dev/null
+++ b/web/src/utils/chartColors.js
@@ -0,0 +1,146 @@
+/**
+ * Chart Color Palette Utility
+ * 统一的图表调色盘工具函数
+ * 从 CSS 变量中动态获取颜色，确保与主题保持一致
+ */
+
+let colorPalette = []
+let isInitialized = false
+
+/**
+ * Build color palette from CSS variables in base.css
+ * 从 base.css 中的 CSS 变量构建调色盘
+ */
+const buildColorPalette = () => {
+  try {
+    const root = document.documentElement
+    const styles = getComputedStyle(root)
+
+    const pick = (name, fallback) => {
+      const v = styles.getPropertyValue(name)
+      return v && v.trim() ? v.trim() : fallback
+    }
+
+    // Base chart colors
+    const baseVars = [
+      ['--chart-primary', '#3996ae'],
+      ['--chart-success', '#52c41a'],
+      ['--chart-warning', '#faad14'],
+      ['--chart-error', '#f5222d'],
+      ['--chart-secondary', '#722ed1'],
+      ['--chart-accent', '#13c2c2'],
+    ]
+
+    // Extended palette colors
+    const paletteVars = [
+      ['--chart-palette-1', '#3996ae'],
+      ['--chart-palette-2', '#028ea0'],
+      ['--chart-palette-3', '#00b8a9'],
+      ['--chart-palette-4', '#f2c94c'],
+      ['--chart-palette-5', '#eb5757'],
+      ['--chart-palette-6', '#2f80ed'],
+      ['--chart-palette-7', '#9b51e0'],
+      ['--chart-palette-8', '#56ccf2'],
+      ['--chart-palette-9', '#6fcf97'],
+      ['--chart-palette-10', '#333333'],
+    ]
+
+    const baseColors = baseVars.map(([n, f]) => pick(n, f))
+    const paletteColors = paletteVars.map(([n, f]) => pick(n, f))
+
+    // Priority: palette first, then base colors
+    const merged = [...paletteColors, ...baseColors]
+      .filter(Boolean)
+      .filter((c, idx, arr) => arr.indexOf(c) === idx) // Remove duplicates
+
+    colorPalette = merged
+    isInitialized = true
+  } catch (e) {
+    console.warn('Failed to build color palette from CSS variables, using fallback:', e)
+    // Fallback palette
+    colorPalette = [
+      '#3996ae', '#52c41a', '#faad14', '#f5222d', '#722ed1', '#13c2c2',
+      '#fa8c16', '#1890ff', '#95de64', '#69c0ff'
+    ]
+    isInitialized = true
+  }
+}
+
+/**
+ * Get color by index from the palette
+ * 根据索引从调色盘中获取颜色
+ * @param {number} index - Color index
+ * @returns {string} Color value
+ */
+export const getColorByIndex = (index) => {
+  if (!isInitialized || colorPalette.length === 0) {
+    buildColorPalette()
+  }
+  return colorPalette[index % colorPalette.length]
+}
+
+/**
+ * Get the entire color palette
+ * 获取完整的调色盘
+ * @returns {Array<string>} Color palette array
+ */
+export const getColorPalette = () => {
+  if (!isInitialized || colorPalette.length === 0) {
+    buildColorPalette()
+  }
+  return [...colorPalette] // Return a copy
+}
+
+/**
+ * Get specific chart colors by name
+ * 根据名称获取特定的图表颜色
+ * @param {string} colorName - Color name (primary, success, warning, error, secondary, accent)
+ * @returns {string} Color value
+ */
+export const getChartColor = (colorName) => {
+  const colorMap = {
+    primary: '#3996ae',
+    success: '#52c41a',
+    warning: '#faad14',
+    error: '#f5222d',
+    secondary: '#722ed1',
+    accent: '#13c2c2'
+  }
+
+  try {
+    const root = document.documentElement
+    const styles = getComputedStyle(root)
+    const cssVarName = `--chart-${colorName}`
+    const value = styles.getPropertyValue(cssVarName)
+    return value && value.trim() ? value.trim() : colorMap[colorName] || colorMap.primary
+  } catch (e) {
+    return colorMap[colorName] || colorMap.primary
+  }
+}
+
+/**
+ * Truncate legend text for better display
+ * 截断图例文本以便更好地显示
+ * @param {string} name - Legend name
+ * @param {number} maxLength - Maximum length (default: 20)
+ * @returns {string} Truncated name
+ */
+export const truncateLegend = (name, maxLength = 20) => {
+  if (!name) return ''
+  return name.length > maxLength ? name.slice(0, maxLength) + '…' : name
+}
+
+/**
+ * Initialize the color palette (call this when DOM is ready)
+ * 初始化调色盘（在 DOM 准备好时调用）
+ */
+export const initColorPalette = () => {
+  buildColorPalette()
+}
+
+// Auto-initialize when module is loaded
+if (typeof window !== 'undefined' && document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initColorPalette)
+} else if (typeof window !== 'undefined') {
+  initColorPalette()
+}