feat(主题): 优化暗黑主题样式并添加新图标

refactor(UsageAnalysis): 重构图表组件支持主题切换
style(theme): 统一颜色变量命名格式

src/assets/svg/Database-network-point.svg

@@ -0,0 +1,9 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 13.5V11.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.5 15H2.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.5 15H15.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.5 15C10.5 15.8284 9.82841 16.5 9 16.5C8.17159 16.5 7.5 15.8284 7.5 15C7.5 14.1716 8.17159 13.5 9 13.5C9.82841 13.5 10.5 14.1716 10.5 15Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.875 6.375C13.875 9.06739 11.6924 11.25 9 11.25C6.30761 11.25 4.125 9.06739 4.125 6.375M13.875 6.375C13.875 3.68261 11.6924 1.5 9 1.5C6.30761 1.5 4.125 3.68261 4.125 6.375M13.875 6.375H4.125" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.875 6.375C10.875 9.06739 10.0355 11.25 9 11.25C7.96448 11.25 7.125 9.06739 7.125 6.375C7.125 3.68261 7.96448 1.5 9 1.5C10.0355 1.5 10.875 3.68261 10.875 6.375Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.875 6.375H4.125" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/svg/Peoples.svg

@@ -0,0 +1,6 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.125 7.5C8.57475 7.5 9.75 6.32475 9.75 4.875C9.75 3.42525 8.57475 2.25 7.125 2.25C5.67525 2.25 4.5 3.42525 4.5 4.875C4.5 6.32475 5.67525 7.5 7.125 7.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.2266 2.625C12.9889 3.08434 13.4987 3.92014 13.4987 4.875C13.4987 5.82986 12.9889 6.66566 12.2266 7.125" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.5 15.3V15.75H12.75V15.3C12.75 13.6198 12.75 12.7798 12.423 12.138C12.1354 11.5735 11.6765 11.1146 11.112 10.827C10.4702 10.5 9.63015 10.5 7.95 10.5H6.3C4.61985 10.5 3.77978 10.5 3.13803 10.827C2.57354 11.1146 2.1146 11.5735 1.82698 12.138C1.5 12.7798 1.5 13.6198 1.5 15.3Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.4974 15.75V15.3C16.4974 13.6199 16.4974 12.7798 16.1704 12.1381C15.8828 11.5736 15.4239 11.1147 14.8594 10.827" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/styles/element.scss

@@ -24,7 +24,7 @@
 // 普通主按钮 —— 纯色背景，不使用渐变色
 .el-button--primary.is-solid {
   border: none;
-  background: var(--el-color-primary-dark);
+  background: var(--admin-btn-bg);
   color: #fff;
 
   // &:hover {
@@ -39,7 +39,7 @@
     color: rgba(255, 255, 255, 0.5);
     transform: none;
     cursor: not-allowed;
-    background: var(--el-color-primary-dark);
+    background: var(--admin-btn-bg);
   }
 }
 

src/styles/theme.scss

@@ -19,7 +19,7 @@
   --el-color-primary-dark-2: #665fcc;
 
   // ---- Success 色 ----
-  --el-color-success: #35FFDD;
+  --el-color-success: #35ffdd;
   --el-color-success-light-3: #2bb9a1; /* 混合 30% 暗色 */
   --el-color-success-light-5: #258a79; /* 混合 50% 暗色 (Plain按钮的默认边框色) */
   --el-color-success-light-7: #1e5b50; /* 混合 70% 暗色 */
@@ -33,7 +33,6 @@
   /* 主要用于按钮按下 Active 时的状态反馈 */
   --el-color-success-dark-2: #5dffe4;
 
-
   // 自定义渐变按钮变量
   --btn-primary-gradient: linear-gradient(91deg, #5f53ff -40.99%, #8d53ff 88.34%);
   --btn-primary-gradient-hover: linear-gradient(95deg, #8d22ff -9.99%, #ae00ff 91.44%);
@@ -68,10 +67,10 @@ html.dark {
   --el-color-primary-light-9: #1f1e2c; // 90% ← 暗色极浅背景
   // ---- 暗色下 hover 变亮（与白色混合 20%） ----
   --el-color-primary-dark-2: #9992ff;
-  --el-color-primary-dark: rgba(255, 255, 255, 0.08);
+  
 
   // ---- Success 色（暗色模式） ----
-  --el-color-success: #35FFDD;
+  --el-color-success: #35ffdd;
   --el-color-success-light-3: #2bb9a1; /* 混合 30% 暗色 */
   --el-color-success-light-5: #258a79; /* 混合 50% 暗色 (Plain按钮的默认边框色) */
   --el-color-success-light-7: #1e5b50; /* 混合 70% 暗色 */
@@ -100,6 +99,7 @@ html.dark {
   --admin-text-secondary: #a3a6ad;
   --admin-border-color: rgba(255, 255, 255, 0.1);
   --admin-table-header-bg: #1d1e1f;
+  --admin-btn-bg: #2f2f2f;
 }
 
 // 全局平滑过渡（主题切换时）

src/views/sdk/components/UsageAnalysis.vue

@@ -1,61 +1,59 @@
 <template>
-	<div class="dashboard-container">
-		<!-- 顶部导航切换 -->
-		<div class="top-nav">
-			<div class="nav-item" :class="{ active: activeTab === 'bandwidth' }" @click="activeTab = 'bandwidth'">
-				<el-icon>
-					<Monitor />
-				</el-icon>
-				<span>带宽图表</span>
-			</div>
-			<div class="nav-item" :class="{ active: activeTab === 'users' }" @click="activeTab = 'users'">
-				<el-icon>
-					<User />
-				</el-icon>
-				<span>用户概况统计</span>
-			</div>
-		</div>
-
-		<!-- 过滤条件区域 -->
-		<div class="filter-bar">
-			<el-radio-group v-model="timeRange" class="dark-radio-group">
-				<el-radio-button label="3h">3小时</el-radio-button>
-				<el-radio-button label="12h">12小时</el-radio-button>
-				<el-radio-button label="1d">近1天</el-radio-button>
-				<el-radio-button label="7d">近7天</el-radio-button>
-			</el-radio-group>
-
-			<el-date-picker v-model="dateRange" type="datetimerange" range-separator="—" start-placeholder="开始日期"
-				end-placeholder="结束日期" class="dark-date-picker" />
-		</div>
-
-		<!-- 图表展示区域 -->
-		<div class="charts-wrapper">
-			<!-- 带宽图表视图 -->
-			<template v-if="activeTab === 'bandwidth'">
-				<div class="chart-card">
-					<div class="chart-title">收发带宽统计</div>
-					<v-chart class="chart-instance" :option="bandwidthInOutOption" autoresize />
-				</div>
-				<div class="chart-card">
-					<div class="chart-title">连接数统计</div>
-					<v-chart class="chart-instance" :option="connectionsOption" autoresize />
-				</div>
-			</template>
-
-			<!-- 用户概况统计视图 -->
-			<template v-if="activeTab === 'users'">
-				<div class="chart-card">
-					<div class="chart-title">新增用户</div>
-					<v-chart class="chart-instance" :option="newUsersOption" autoresize />
-				</div>
-				<div class="chart-card">
-					<div class="chart-title">活跃用户</div>
-					<v-chart class="chart-instance" :option="activeUsersOption" autoresize />
-				</div>
-			</template>
-		</div>
-	</div>
+  <el-card class="dashboard-container" shadow="never">
+    <!-- 顶部导航切换 -->
+    <div class="top-nav">
+      <div class="nav-item" :class="{ active: activeTab === 'bandwidth' }" @click="activeTab = 'bandwidth'">
+        <SvgIcon iconClass="Database-network-point" />
+        <span>带宽图表</span>
+      </div>
+      <div class="nav-item" :class="{ active: activeTab === 'users' }" @click="activeTab = 'users'">
+        <el-icon>
+          <User />
+        </el-icon>
+        <span>用户概况统计</span>
+      </div>
+    </div>
+
+    <!-- 过滤条件区域 -->
+    <div class="filter-bar">
+      <el-radio-group v-model="timeRange" class="dark-radio-group">
+        <el-radio-button label="3h">3小时</el-radio-button>
+        <el-radio-button label="12h">12小时</el-radio-button>
+        <el-radio-button label="1d">近1天</el-radio-button>
+        <el-radio-button label="7d">近7天</el-radio-button>
+      </el-radio-group>
+
+      <el-date-picker v-model="dateRange" type="datetimerange" range-separator="—" start-placeholder="开始日期"
+        end-placeholder="结束日期" class="dark-date-picker" />
+    </div>
+
+    <!-- 图表展示区域 -->
+    <div class="charts-wrapper">
+      <!-- 带宽图表视图 -->
+      <template v-if="activeTab === 'bandwidth'">
+        <div class="chart-card">
+          <div class="chart-title">收发带宽统计</div>
+          <v-chart class="chart-instance" :option="bandwidthInOutOption" autoresize />
+        </div>
+        <div class="chart-card">
+          <div class="chart-title">连接数统计</div>
+          <v-chart class="chart-instance" :option="connectionsOption" autoresize />
+        </div>
+      </template>
+
+      <!-- 用户概况统计视图 -->
+      <template v-if="activeTab === 'users'">
+        <div class="chart-card">
+          <div class="chart-title">新增用户</div>
+          <v-chart class="chart-instance" :option="newUsersOption" autoresize />
+        </div>
+        <div class="chart-card">
+          <div class="chart-title">活跃用户</div>
+          <v-chart class="chart-instance" :option="activeUsersOption" autoresize />
+        </div>
+      </template>
+    </div>
+  </el-card>
 </template>
 
 <script setup>
@@ -67,6 +65,7 @@ import { LineChart } from 'echarts/charts'
 import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import VChart from 'vue-echarts'
 import * as echarts from 'echarts/core'
+import { isDark } from '@/composables/useTheme'
 
 // 注册 ECharts 必须的组件
 use([CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
@@ -78,187 +77,164 @@ const dateRange = ref([new Date(2022, 9, 25, 14, 19, 39), new Date(2022, 9, 25,
 
 // --- Mock 数据生成工具 ---
 const generateTimeData = (count = 10) => {
-	let base = +new Date(2026, 2, 18, 11, 25, 2)
-	return Array.from({ length: count }, (_, i) => {
-		let d = new Date(base + i * 360000); // 间隔递增
-		return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`
-	})
+  let base = +new Date(2026, 2, 18, 11, 25, 2)
+  return Array.from({ length: count }, (_, i) => {
+    let d = new Date(base + i * 360000); // 间隔递增
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`
+  })
 }
 const generateRandomData = (count = 10, min = 0, max = 10) => {
-	return Array.from({ length: count }, () => (Math.random() * (max - min) + min).toFixed(3))
+  return Array.from({ length: count }, () => (Math.random() * (max - min) + min).toFixed(3))
 }
 
 const timeAxisData = generateTimeData(15)
 
-// --- 图表通用配置 ---
-const commonAxisLine = { lineStyle: { color: '#555' } }
-const commonSplitLine = { show: true, lineStyle: { color: '#333', type: 'dashed' } }
-const commonLabel = { color: '#aaa' }
+// --- 图表通用配置（响应式跟随主题） ---
+const chartColors = computed(() => {
+  return {
+    textPrimary: isDark.value ? '#e5eaf3' : '#303133',
+    textSecondary: isDark.value ? '#a3a6ad' : '#909399',
+    borderColor: isDark.value ? 'rgba(255, 255, 255, 0.1)' : '#e4e7ed',
+    cardBg: isDark.value ? '#1d1e1f' : '#ffffff'
+  }
+})
 
 // 1. 收发带宽统计图表 Option
 const bandwidthInOutOption = computed(() => ({
-	tooltip: { trigger: 'axis', backgroundColor: 'rgba(50,50,70,0.8)', textStyle: { color: '#fff' } },
-	legend: { data: ['实时上传流量', '实时下载流量'], textStyle: { color: '#ccc' }, top: 0, left: 100 },
-	grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
-	xAxis: { type: 'category', boundaryGap: false, data: timeAxisData, axisLine: commonAxisLine, axisLabel: commonLabel },
-	yAxis: { type: 'value', axisLine: commonAxisLine, splitLine: commonSplitLine, axisLabel: { ...commonLabel, formatter: '{value}bps' } },
-	series: [
-		{
-			name: '实时上传流量', type: 'line', smooth: true,
-			lineStyle: { color: '#9b59b6' }, itemStyle: { color: '#9b59b6' },
-			areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(155,89,182,0.3)' }, { offset: 1, color: 'rgba(155,89,182,0)' }]) },
-			data: generateRandomData(15, 2, 8)
-		},
-		{
-			name: '实时下载流量', type: 'line', smooth: true,
-			lineStyle: { color: '#3498db' }, itemStyle: { color: '#3498db' },
-			areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(52,152,219,0.3)' }, { offset: 1, color: 'rgba(52,152,219,0)' }]) },
-			data: generateRandomData(15, 2, 8)
-		}
-	]
+  tooltip: { trigger: 'axis', backgroundColor: chartColors.value.cardBg, borderColor: chartColors.value.borderColor, textStyle: { color: chartColors.value.textPrimary } },
+  legend: { data: ['实时上传流量', '实时下载流量'], textStyle: { color: chartColors.value.textSecondary }, top: 0, left: 100 },
+  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+  xAxis: { type: 'category', boundaryGap: false, data: timeAxisData, axisLine: { lineStyle: { color: chartColors.value.borderColor } }, axisLabel: { color: chartColors.value.textSecondary } },
+  yAxis: { type: 'value', axisLine: { lineStyle: { color: chartColors.value.borderColor } }, splitLine: { show: true, lineStyle: { color: chartColors.value.borderColor, type: 'dashed' } }, axisLabel: { color: chartColors.value.textSecondary, formatter: '{value}bps' } },
+  series: [
+    {
+      name: '实时上传流量', type: 'line', smooth: true,
+      lineStyle: { color: '#C9AAFF' }, itemStyle: { color: '#C9AAFF' },
+      areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(155,89,182,0.3)' }, { offset: 1, color: 'rgba(155,89,182,0)' }]) },
+      data: generateRandomData(15, 2, 8)
+    },
+    {
+      name: '实时下载流量', type: 'line', smooth: true,
+      lineStyle: { color: '#60CFFF' }, itemStyle: { color: '#60CFFF' },
+      areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(52,152,219,0.3)' }, { offset: 1, color: 'rgba(52,152,219,0)' }]) },
+      data: generateRandomData(15, 2, 8)
+    }
+  ]
 }))
 
 // 2. 连接数统计图表 Option
 const connectionsOption = computed(() => ({
-	tooltip: { trigger: 'axis', backgroundColor: 'rgba(50,50,70,0.8)', textStyle: { color: '#fff' } },
-	legend: { data: ['连接数量'], textStyle: { color: '#ccc' }, top: 0, left: 100 },
-	grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
-	xAxis: { type: 'category', boundaryGap: false, data: timeAxisData, axisLine: commonAxisLine, axisLabel: commonLabel },
-	yAxis: { type: 'value', axisLine: commonAxisLine, splitLine: commonSplitLine, axisLabel: commonLabel },
-	series: [
-		{
-			name: '连接数量', type: 'line', smooth: true,
-			lineStyle: { color: '#f39c12' }, itemStyle: { color: '#f39c12' },
-			areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(243,156,18,0.3)' }, { offset: 1, color: 'rgba(243,156,18,0)' }]) },
-			data: generateRandomData(15, 0, 1)
-		}
-	]
+  tooltip: { trigger: 'axis', backgroundColor: chartColors.value.cardBg, borderColor: chartColors.value.borderColor, textStyle: { color: chartColors.value.textPrimary } },
+  legend: { data: ['连接数量'], textStyle: { color: chartColors.value.textSecondary }, top: 0, left: 100 },
+  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+  xAxis: { type: 'category', boundaryGap: false, data: timeAxisData, axisLine: { lineStyle: { color: chartColors.value.borderColor } }, axisLabel: { color: chartColors.value.textSecondary } },
+  yAxis: { type: 'value', axisLine: { lineStyle: { color: chartColors.value.borderColor } }, splitLine: { show: true, lineStyle: { color: chartColors.value.borderColor, type: 'dashed' } }, axisLabel: { color: chartColors.value.textSecondary } },
+  series: [
+    {
+      name: '连接数量', type: 'line', smooth: true,
+      lineStyle: { color: '#FFBB5C' }, itemStyle: { color: '#FFBB5C' },
+      areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(243,156,18,0.3)' }, { offset: 1, color: 'rgba(243,156,18,0)' }]) },
+      data: generateRandomData(15, 0, 1)
+    }
+  ]
 }))
 
 // 3. 新增用户 Option
 const newUsersOption = computed(() => ({
-	tooltip: { trigger: 'axis', backgroundColor: 'rgba(50,50,70,0.8)', textStyle: { color: '#fff' } },
-	legend: { data: ['Android', 'IOS', 'Windows', 'Linux', 'Unknown'], textStyle: { color: '#ccc' }, top: 0, left: 100 },
-	grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
-	xAxis: { type: 'category', boundaryGap: false, data: timeAxisData, axisLine: commonAxisLine, axisLabel: commonLabel },
-	yAxis: { type: 'value', axisLine: commonAxisLine, splitLine: commonSplitLine, axisLabel: commonLabel },
-	series: [
-		{ name: 'Android', type: 'line', smooth: true, data: generateRandomData(15, 0, 1) },
-		{ name: 'IOS', type: 'line', smooth: true, data: generateRandomData(15, 0, 1) },
-		{ name: 'Windows', type: 'line', smooth: true, data: generateRandomData(15, 0, 1) },
-		{ name: 'Linux', type: 'line', smooth: true, data: generateRandomData(15, 0, 1) },
-		{ name: 'Unknown', type: 'line', smooth: true, data: generateRandomData(15, 0, 1) }
-	]
+  tooltip: { trigger: 'axis', backgroundColor: chartColors.value.cardBg, borderColor: chartColors.value.borderColor, textStyle: { color: chartColors.value.textPrimary } },
+  legend: { data: ['Android', 'IOS', 'Windows', 'Linux', 'Unknown'], textStyle: { color: chartColors.value.textSecondary }, top: 0, left: 100 },
+  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+  xAxis: { type: 'category', boundaryGap: false, data: timeAxisData, axisLine: { lineStyle: { color: chartColors.value.borderColor } }, axisLabel: { color: chartColors.value.textSecondary } },
+  yAxis: { type: 'value', axisLine: { lineStyle: { color: chartColors.value.borderColor } }, splitLine: { show: true, lineStyle: { color: chartColors.value.borderColor, type: 'dashed' } }, axisLabel: { color: chartColors.value.textSecondary } },
+  series: [
+    { name: 'Android', type: 'line', smooth: true, data: generateRandomData(15, 0, 1) },
+    { name: 'IOS', type: 'line', smooth: true, data: generateRandomData(15, 0, 1) },
+    { name: 'Windows', type: 'line', smooth: true, data: generateRandomData(15, 0, 1) },
+    { name: 'Linux', type: 'line', smooth: true, data: generateRandomData(15, 0, 1) },
+    { name: 'Unknown', type: 'line', smooth: true, data: generateRandomData(15, 0, 1) }
+  ]
 }))
 
 // 4. 活跃用户 Option
 const activeUsersOption = computed(() => ({
-	tooltip: { trigger: 'axis', backgroundColor: 'rgba(50,50,70,0.8)', textStyle: { color: '#fff' } },
-	legend: { data: ['活跃用户'], textStyle: { color: '#ccc' }, top: 0, left: 100 },
-	grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
-	xAxis: { type: 'category', boundaryGap: false, data: timeAxisData, axisLine: commonAxisLine, axisLabel: commonLabel },
-	yAxis: { type: 'value', axisLine: commonAxisLine, splitLine: commonSplitLine, axisLabel: commonLabel },
-	series: [
-		{
-			name: '活跃用户', type: 'line', smooth: true,
-			lineStyle: { color: '#2980b9' }, itemStyle: { color: '#2980b9' },
-			areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(41,128,185,0.3)' }, { offset: 1, color: 'rgba(41,128,185,0)' }]) },
-			data: generateRandomData(15, 0, 1)
-		}
-	]
+  tooltip: { trigger: 'axis', backgroundColor: chartColors.value.cardBg, borderColor: chartColors.value.borderColor, textStyle: { color: chartColors.value.textPrimary } },
+  legend: { data: ['活跃用户'], textStyle: { color: chartColors.value.textSecondary }, top: 0, left: 100 },
+  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+  xAxis: { type: 'category', boundaryGap: false, data: timeAxisData, axisLine: { lineStyle: { color: chartColors.value.borderColor } }, axisLabel: { color: chartColors.value.textSecondary } },
+  yAxis: { type: 'value', axisLine: { lineStyle: { color: chartColors.value.borderColor } }, splitLine: { show: true, lineStyle: { color: chartColors.value.borderColor, type: 'dashed' } }, axisLabel: { color: chartColors.value.textSecondary } },
+  series: [
+    {
+      name: '活跃用户', type: 'line', smooth: true,
+      lineStyle: { color: '#2980b9' }, itemStyle: { color: '#2980b9' },
+      areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(41,128,185,0.3)' }, { offset: 1, color: 'rgba(41,128,185,0)' }]) },
+      data: generateRandomData(15, 0, 1)
+    }
+  ]
 }))
 </script>
 
 <style scoped>
-/* 全局暗黑背景 */
 .dashboard-container {
-	padding: 20px;
-	color: #fff;
+  color: var(--admin-text-primary);
 }
 
 /* 顶部导航 Tabs */
 .top-nav {
-	display: flex;
-	gap: 10px;
-	margin-bottom: 20px;
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
 }
 
 .nav-item {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	padding: 10px 20px;
-	background-color: #2a2a32;
-	border-radius: 4px;
-	cursor: pointer;
-	color: #a0a0a0;
-	transition: all 0.3s;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 20px;
+  background-color: var(--admin-btn-bg);
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--admin-text-secondary);
+  transition: all 0.3s;
 }
 
 .nav-item.active {
-	background-color: #6366f1;
-	/* 类似截图中的紫色主色调 */
-	color: #fff;
+  background-color: var(--el-color-primary);
+  color: #fff;
 }
 
 /* 过滤栏 */
 .filter-bar {
-	background-color: #22222a;
-	padding: 15px;
-	border-radius: 6px;
-	display: flex;
-	align-items: center;
-	gap: 20px;
-	margin-bottom: 20px;
-}
-
-/* 强制修改 Element Plus 组件以适应深色背景 */
-:deep(.el-radio-button__inner) {
-	background-color: #2a2a32;
-	border-color: #333;
-	color: #a0a0a0;
-}
-
-:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
-	background-color: #4a4a5a;
-	border-color: #555;
-	color: #fff;
-	box-shadow: none;
-}
-
-:deep(.el-input__wrapper) {
-	background-color: #2a2a32;
-	box-shadow: 0 0 0 1px #333 inset;
-}
-
-:deep(.el-range-input) {
-	color: #ccc;
+  background-color: var(--admin-card-bg);
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  margin-bottom: 20px;
 }
 
 /* 图表区域 */
 .charts-wrapper {
-	display: flex;
-	flex-direction: column;
-	gap: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
 }
 
 .chart-card {
-	background-color: #22222a;
-	border-radius: 6px;
-	padding: 20px;
+  background-color: var(--admin-card-bg);
+  border-radius: 6px;
+  padding: 20px;
+  border: 1px solid var(--admin-border-color);
 }
 
 .chart-title {
-	font-size: 14px;
-	color: #fff;
-	margin-bottom: 10px;
-	position: absolute;
-	/* 让标题不影响 Echarts 的 Legend 布局 */
-	z-index: 10;
+  font-size: 14px;
+  color: var(--admin-text-primary);
+  margin-bottom: 10px;
+  font-weight: bold;
 }
 
 .chart-instance {
-	height: 350px;
-	width: 100%;
+  height: 350px;
+  width: 100%;
 }
 </style>