refactor(UsageAnalysis): 优化组件代码结构并添加类型定义

- 移除冗余注释，简化模板结构
- 添加 TypeScript 类型定义
- 重构图表配置代码，提高可读性
- 调整日期选择器分隔符为中文
- 统一代码格式和样式顺序

src/views/sdk/components/UsageAnalysis.vue

@@ -1,6 +1,5 @@
 <template>
   <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" />
@@ -14,22 +13,25 @@
       </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-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" />
+      <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>
@@ -41,8 +43,7 @@
         </div>
       </template>
 
-      <!-- 用户概况统计视图 -->
-      <template v-if="activeTab === 'users'">
+      <template v-else>
         <div class="chart-card">
           <div class="chart-title">新增用户</div>
           <v-chart class="chart-instance" :option="newUsersOption" autoresize />
@@ -56,167 +57,297 @@
   </el-card>
 </template>
 
-<script setup>
-import { ref, computed } from 'vue'
-import { Monitor, User } from '@element-plus/icons-vue'
+<script setup lang="ts">
+import { User } from '@element-plus/icons-vue'
 import { use } from 'echarts/core'
-import { CanvasRenderer } from 'echarts/renderers'
+import * as echarts from 'echarts/core'
 import { LineChart } from 'echarts/charts'
-import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
 import VChart from 'vue-echarts'
-import * as echarts from 'echarts/core'
 import { isDark } from '@/composables/useTheme'
 
-// 注册 ECharts 必须的组件
+type UsageTab = 'bandwidth' | 'users'
+type TimeRange = '3h' | '12h' | '1d' | '7d'
+
 use([CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
 
-// 状态控制
-const activeTab = ref('bandwidth')
-const timeRange = ref('3h')
-const dateRange = ref([new Date(2022, 9, 25, 14, 19, 39), new Date(2022, 9, 25, 14, 19, 39)])
+const activeTab = ref<UsageTab>('bandwidth')
+const timeRange = ref<TimeRange>('3h')
+const dateRange = ref<[Date, Date]>([
+  new Date(2026, 2, 18, 8, 0, 0),
+  new Date(2026, 2, 18, 11, 0, 0),
+])
 
-// --- Mock 数据生成工具 ---
-const generateTimeData = (count = 10) => {
-  let base = +new Date(2026, 2, 18, 11, 25, 2)
+function generateTimeData(count = 10) {
+  const 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 date = new Date(base + i * 360000)
+    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`
   })
 }
-const generateRandomData = (count = 10, min = 0, max = 10) => {
-  return Array.from({ length: count }, () => (Math.random() * (max - min) + min).toFixed(3))
+
+function generateRandomData(count = 10, min = 0, max = 10) {
+  return Array.from({ length: count }, () => Number((Math.random() * (max - min) + min).toFixed(3)))
 }
 
 const timeAxisData = generateTimeData(15)
 
-// --- 图表通用配置（响应式跟随主题） ---
-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'
-  }
-})
+const chartColors = computed(() => ({
+  textPrimary: isDark.value ? '#e5eaf3' : '#303133',
+  textSecondary: isDark.value ? '#a3a6ad' : '#909399',
+  borderColor: isDark.value ? 'rgba(255, 255, 255, 0.1)' : '#e4e7ed',
+}))
 
-const tooltip =
-{
+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;',
+  backgroundColor: 'transparent',
+  borderWidth: 0,
+  padding: 0,
+  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'
+    align: 'left',
   },
   axisPointer: {
     type: 'line',
     lineStyle: {
       color: '#ffffff',
       type: 'dashed',
-      opacity: 0.5
-    }
-  }
-}
-
+      opacity: 0.5,
+    },
+  },
+} as const
 
-// 1. 收发带宽统计图表 Option
 const bandwidthInOutOption = computed(() => ({
-  tooltip: tooltip,
-  legend: { data: ['实时上传流量', '实时下载流量'], textStyle: { color: chartColors.value.textSecondary }, top: 0, left: 100 },
+  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 } },
-  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' } },
+  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: '#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)
-    }
-  ]
+      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: tooltip,
-  legend: { data: ['连接数量'], textStyle: { color: chartColors.value.textSecondary }, top: 0, left: 100 },
+  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 } },
-  yAxis: { type: 'value', axisLine: { lineStyle: { color: chartColors.value.borderColor } }, splitLine: { show: true, lineStyle: { color: chartColors.value.borderColor, type: 'dashed' } }, axisLabel: { color: chartColors.value.textSecondary } },
+  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)
-    }
-  ]
+      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: tooltip,
-  legend: { data: ['Android', 'IOS', 'Windows', 'Linux', 'Unknown'], textStyle: { color: chartColors.value.textSecondary }, top: 0, left: 100 },
+  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 } },
+  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,
-      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: '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: '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: '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: '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)
-    }
-  ]
+      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: tooltip,
-  legend: { data: ['活跃用户'], textStyle: { color: chartColors.value.textSecondary }, top: 0, left: 100 },
+  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 } },
-  yAxis: { type: 'value', axisLine: { lineStyle: { color: chartColors.value.borderColor } }, splitLine: { show: true, lineStyle: { color: chartColors.value.borderColor, type: 'dashed' } }, axisLabel: { color: chartColors.value.textSecondary } },
+  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)
-    }
-  ]
+      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>
 
@@ -225,7 +356,6 @@ const activeUsersOption = computed(() => ({
   color: var(--admin-text-primary);
 }
 
-/* 顶部导航 Tabs */
 .top-nav {
   display: flex;
   gap: 10px;
@@ -249,17 +379,15 @@ const activeUsersOption = computed(() => ({
   color: #fff;
 }
 
-/* 过滤栏 */
 .filter-bar {
-  background-color: var(--admin-card-bg);
-  border-radius: 6px;
   display: flex;
   align-items: center;
   gap: 20px;
   margin-bottom: 20px;
+  border-radius: 6px;
+  background-color: var(--admin-card-bg);
 }
 
-/* 图表区域 */
 .charts-wrapper {
   display: flex;
   flex-direction: column;
@@ -267,21 +395,21 @@ const activeUsersOption = computed(() => ({
 }
 
 .chart-card {
-  background-color: var(--admin-card-bg);
-  border-radius: 6px;
   padding: 20px;
   border: 1px solid var(--admin-border-color);
+  border-radius: 6px;
+  background-color: var(--admin-card-bg);
 }
 
 .chart-title {
-  font-size: 14px;
-  color: var(--admin-text-primary);
   margin-bottom: 10px;
-  font-weight: bold;
+  color: var(--admin-text-primary);
+  font-size: 14px;
+  font-weight: 700;
 }
 
 .chart-instance {
-  height: 350px;
   width: 100%;
+  height: 350px;
 }
-</style>
+</style>