refactor(sdk): 重构组件命名并优化图表样式

将AddOrEdit组件重命名为SDKModal以更准确描述功能
统一图表tooltip样式并优化新增用户图表颜色配置

src/views/sdk/components/UsageAnalysis.vue

@@ -99,9 +99,31 @@ const chartColors = computed(() => {
   }
 })
 
+const tooltip =
+{
+  trigger: 'axis',
+  backgroundColor: 'transparent', // 必须设置为透明，否则会覆盖 extraCssText 的背景
+  borderWidth: 0, // 移除默认边框，使用 CSS 处理
+  padding: 0, // 移除内边距，完全由 CSS 控制
+  extraCssText: 'background: linear-gradient(180deg, rgba(101, 70, 255, 0.40) 0.33%, rgba(101, 70, 255, 0.10) 93.25%) !important; border: 1px solid #C6BAFF; border-radius: 4px; backdrop-filter: blur(4px); padding: 10px 16px; text-align: left;',
+  textStyle: {
+    color: '#fff',
+    align: 'left'
+  },
+  axisPointer: {
+    type: 'line',
+    lineStyle: {
+      color: '#ffffff',
+      type: 'dashed',
+      opacity: 0.5
+    }
+  }
+}
+
+
 // 1. 收发带宽统计图表 Option
 const bandwidthInOutOption = computed(() => ({
-  tooltip: { trigger: 'axis', backgroundColor: chartColors.value.cardBg, borderColor: chartColors.value.borderColor, textStyle: { color: chartColors.value.textPrimary } },
+  tooltip: tooltip,
   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 } },
@@ -124,7 +146,7 @@ const bandwidthInOutOption = computed(() => ({
 
 // 2. 连接数统计图表 Option
 const connectionsOption = computed(() => ({
-  tooltip: { trigger: 'axis', backgroundColor: chartColors.value.cardBg, borderColor: chartColors.value.borderColor, textStyle: { color: chartColors.value.textPrimary } },
+  tooltip: tooltip,
   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 } },
@@ -141,23 +163,48 @@ const connectionsOption = computed(() => ({
 
 // 3. 新增用户 Option
 const newUsersOption = computed(() => ({
-  tooltip: { trigger: 'axis', backgroundColor: chartColors.value.cardBg, borderColor: chartColors.value.borderColor, textStyle: { color: chartColors.value.textPrimary } },
+  tooltip: tooltip,
   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) }
+    {
+      name: 'Android', type: 'line', smooth: true,
+      lineStyle: { color: '#60FFC7' }, itemStyle: { color: '#60FFC7' },
+      areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(96,255,199,0.3)' }, { offset: 1, color: 'rgba(96,255,199,0)' }]) },
+      data: generateRandomData(15, 0, 1)
+    },
+    {
+      name: 'IOS', type: 'line', smooth: true,
+      lineStyle: { color: '#FFFAC3' }, itemStyle: { color: '#FFFAC3' },
+      areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(255,250,195,0.3)' }, { offset: 1, color: 'rgba(255,250,195,0)' }]) },
+      data: generateRandomData(15, 0, 1)
+    },
+    {
+      name: 'Windows', type: 'line', smooth: true,
+      lineStyle: { color: '#FF611D' }, itemStyle: { color: '#FF611D' },
+      areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(255,97,29,0.3)' }, { offset: 1, color: 'rgba(255,97,29,0)' }]) },
+      data: generateRandomData(15, 0, 1)
+    },
+    {
+      name: 'Linux', type: 'line', smooth: true,
+      lineStyle: { color: '#E084FF' }, itemStyle: { color: '#E084FF' },
+      areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(224,132,255,0.3)' }, { offset: 1, color: 'rgba(224,132,255,0)' }]) },
+      data: generateRandomData(15, 0, 1)
+    },
+    {
+      name: 'Unknown', type: 'line', smooth: true,
+      lineStyle: { color: '#6863FF' }, itemStyle: { color: '#6863FF' },
+      areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(104,99,255,0.3)' }, { offset: 1, color: 'rgba(104,99,255,0)' }]) },
+      data: generateRandomData(15, 0, 1)
+    }
   ]
 }))
 
 // 4. 活跃用户 Option
 const activeUsersOption = computed(() => ({
-  tooltip: { trigger: 'axis', backgroundColor: chartColors.value.cardBg, borderColor: chartColors.value.borderColor, textStyle: { color: chartColors.value.textPrimary } },
+  tooltip: tooltip,
   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 } },

src/views/sdk/index.vue

@@ -42,12 +42,12 @@
         <el-button type="danger" link>删除</el-button>
       </template>
     </TableCard>
-    <AddOrEdit v-model:visible="dialogForm.visible" />
+    <SDKModal v-model:visible="dialogForm.visible" />
   </div>
 </template>
 
 <script setup lang="ts">
-import AddOrEdit from './components/AddOrEdit.vue'
+import SDKModal from './components/SDKModal.vue'
 import TabFilter from '@/components/TabFilter/index.vue'
 import TableCard from '@/components/TableCard/index.vue'
 import { CirclePlus, Delete, MoreFilled, Refresh, Search, Upload } from '@element-plus/icons-vue'