feat(admin): KSM内存去重管理+监控图表增强+额度统计UI重构+流量管理合并 -- 缘由: 后端新增KSM状态/配置接口,监控数据改为绝对值,额度统计需可视化 -- 预期: HostDetail支持KSM查看/启停/调参,内存图表改为绝对值+磁盘IOPS图+流量趋势图,额度统计改为环形进度卡片,流量策略与统计合并为流量管理tab,订单代金券改为非必填,VmManage显示累计流量

Co-authored-by: Cursor <cursoragent@cursor.com>

src/views/user-vm/UserVmDetail.vue

@@ -439,6 +439,11 @@
                     <div class="metric-summary-value">↓{{ formatNetLabel(latestMetrics.net_rx) }}</div>
                     <div class="metric-summary-sub">↑{{ formatNetLabel(latestMetrics.net_tx) }}</div>
                   </div>
+                  <div class="metric-summary-card">
+                    <div class="metric-summary-label">累计流量</div>
+                    <div class="metric-summary-value">{{ latestMetrics.traffic_used_mb != null ? latestMetrics.traffic_used_mb + ' MB' : '-' }}</div>
+                    <div class="metric-summary-sub">&nbsp;</div>
+                  </div>
                 </div>
               </template>
               <template v-if="metricsData">
@@ -451,7 +456,7 @@
                   </el-col>
                   <el-col :span="12">
                     <el-card shadow="hover" class="metrics-card">
-                      <template #header><span class="metrics-title"><el-icon><Monitor /></el-icon> 内存使用率</span></template>
+                      <template #header><span class="metrics-title"><el-icon><Monitor /></el-icon> 内存使用</span></template>
                       <div ref="memChartRef" class="chart-container"></div>
                     </el-card>
                   </el-col>
@@ -470,13 +475,27 @@
                     </el-card>
                   </el-col>
                 </el-row>
+                <el-row :gutter="16" style="margin-top: 16px">
+                  <el-col :span="12">
+                    <el-card shadow="hover" class="metrics-card">
+                      <template #header><span class="metrics-title"><el-icon><Monitor /></el-icon> 磁盘 IOPS</span></template>
+                      <div ref="diskIopsChartRef" class="chart-container"></div>
+                    </el-card>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-card shadow="hover" class="metrics-card">
+                      <template #header><span class="metrics-title"><el-icon><Monitor /></el-icon> 流量使用趋势</span></template>
+                      <div ref="trafficUsedChartRef" class="chart-container"></div>
+                    </el-card>
+                  </el-col>
+                </el-row>
               </template>
               <el-empty v-else-if="!metricsLoading" description="暂无监控数据" :image-size="80" />
             </div>
           </el-tab-pane>
 
-          <!-- 流量策略 -->
-          <el-tab-pane v-if="isVmGoods" label="流量策略" name="trafficPolicy">
+          <!-- 流量管理（合并流量策略 + 流量统计） -->
+          <el-tab-pane v-if="isVmGoods" label="流量管理" name="trafficManage">
             <div class="section-block">
               <div class="section-header">
                 <h3 class="section-title">流量策略</h3>
@@ -494,6 +513,30 @@
               </el-descriptions>
               <el-empty v-else-if="!trafficPolicyLoading" description="暂无流量策略数据" :image-size="60" />
             </div>
+            <div class="section-block" style="margin-top:16px">
+              <div class="section-header">
+                <h3 class="section-title">每小时流量</h3>
+                <div style="display: flex; align-items: center; gap: 8px">
+                  <el-date-picker
+                    v-model="trafficHourlyRange"
+                    type="datetimerange"
+                    range-separator="至"
+                    start-placeholder="开始时间"
+                    end-placeholder="结束时间"
+                    size="small"
+                    style="width: 360px"
+                    :shortcuts="monitorShortcuts"
+                    @change="loadTrafficHourly"
+                  />
+                  <el-button size="small" :icon="Refresh" @click="loadTrafficHourly" :loading="trafficHourlyLoading">刷新</el-button>
+                </div>
+              </div>
+              <el-card v-if="trafficHourlyData.length" shadow="hover" class="metrics-card" style="margin-top:12px">
+                <template #header><span class="metrics-title"><el-icon><Refresh /></el-icon> 每小时流量（MB）</span></template>
+                <div ref="trafficHourlyChartRef" class="chart-container"></div>
+              </el-card>
+              <el-empty v-else-if="!trafficHourlyLoading" description="暂无流量统计数据" :image-size="60" />
+            </div>
           </el-tab-pane>
 
         </el-tabs>
@@ -1126,7 +1169,7 @@ import {
   getUserVmPostGroupDetail,
   getUserVmNetworkList, getUserVmNetworkDetail, getUserVmNetworkingList, createUserVmNetworking, assignUserVmNetworking, removeUserVmNetworkingNetwork, deleteUserVmNetworking,
   getUserGoodsDetail,
-  getUserVmMetricsHistory,
+  getUserVmMetricsHistory, getUserVmTrafficHourly,
   getUserVmTrafficPolicy, updateUserVmTrafficPolicy, addUserVmFixedTraffic, addUserVmTemporaryTraffic,
   setUserVmNetworkPrimary, resetUserVmMac,
   disconnectUserVmNetwork, connectUserVmNetwork
@@ -1318,7 +1361,7 @@ const handleTabChange = (tab) => {
   if (tab === 'security') loadSgLockInfo()
   if (tab === 'networking') loadNetworkings()
   if (tab === 'monitor' && !metricsData.value) loadMetricsHistory()
-  if (tab === 'trafficPolicy') loadTrafficPolicy()
+  if (tab === 'trafficManage') { loadTrafficPolicy(); loadTrafficHourly() }
 }
 
 // 请求安全组详情补充 lock 字段（使用用户虚拟机安全组详情接口）
@@ -2215,6 +2258,55 @@ const submitAddTraffic = async () => {
   } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '操作失败')) } finally { trafficPolicyLoading.value = false }
 }
 
+// ---- 每小时流量统计 ----
+const trafficHourlyRange = ref(null)
+const trafficHourlyData = ref([])
+const trafficHourlyLoading = ref(false)
+const trafficHourlyChartRef = ref(null)
+let trafficHourlyChart = null
+
+const loadTrafficHourly = async () => {
+  if (!userGoodsId.value) return
+  if (!trafficHourlyRange.value) {
+    const now = new Date()
+    trafficHourlyRange.value = [new Date(now.getTime() - 24 * 3600 * 1000), now]
+  }
+  trafficHourlyLoading.value = true
+  try {
+    const res = await getUserVmTrafficHourly({
+      user_goods_id: userGoodsId.value,
+      start: new Date(trafficHourlyRange.value[0]).toISOString(),
+      end_time: new Date(trafficHourlyRange.value[1]).toISOString()
+    })
+    const raw = res?.data?.data?.data
+    trafficHourlyData.value = typeof raw === 'string' ? JSON.parse(raw) : (Array.isArray(raw) ? raw : [])
+    nextTick(renderTrafficHourlyChart)
+  } catch { trafficHourlyData.value = [] } finally { trafficHourlyLoading.value = false }
+}
+
+const renderTrafficHourlyChart = () => {
+  if (!trafficHourlyChartRef.value || !trafficHourlyData.value.length) return
+  if (!trafficHourlyChart) trafficHourlyChart = echarts.init(trafficHourlyChartRef.value)
+  const data = trafficHourlyData.value
+  const times = data.map(d => {
+    const date = new Date(d.bucket)
+    return date.toLocaleTimeString('zh-CN', { hour12: false, hour: '2-digit', minute: '2-digit' })
+  })
+  const toMB = (b) => +(b / 1048576).toFixed(2)
+  trafficHourlyChart.setOption({
+    tooltip: { trigger: 'axis', formatter: (params) => params.map(p => `${p.marker}${p.seriesName}: ${p.value} MB`).join('<br/>') },
+    legend: { data: ['下行', '上行', '合计'], bottom: 0 },
+    grid: { top: 10, right: 16, bottom: 40, left: 50 },
+    xAxis: { type: 'category', data: times, boundaryGap: false, axisLabel: { fontSize: 10 } },
+    yAxis: { type: 'value', name: 'MB', axisLabel: { fontSize: 10 } },
+    series: [
+      { name: '下行', type: 'bar', stack: 'traffic', data: data.map(d => toMB(d.rx_bytes)), itemStyle: { color: '#409EFF' } },
+      { name: '上行', type: 'bar', stack: 'traffic', data: data.map(d => toMB(d.tx_bytes)), itemStyle: { color: '#67C23A' } },
+      { name: '合计', type: 'line', smooth: true, data: data.map(d => toMB(d.total_bytes)), itemStyle: { color: '#E6A23C' }, lineStyle: { width: 2 } }
+    ]
+  }, true)
+}
+
 // ---- 转移 ----
 const transferVisible = ref(false)
 const showTransferUserSelector = ref(false)
@@ -2267,11 +2359,15 @@ const submitEditGoods = async () => {
 const cpuChartRef = ref(null)
 const memChartRef = ref(null)
 const diskChartRef = ref(null)
+const diskIopsChartRef = ref(null)
 const netChartRef = ref(null)
+const trafficUsedChartRef = ref(null)
 let cpuChart = null
 let memChart = null
 let diskChart = null
+let diskIopsChart = null
 let netChart = null
+let trafficUsedChart = null
 
 const metricsData = ref(null)
 const metricsLoading = ref(false)
@@ -2398,9 +2494,28 @@ const renderMetricsCharts = () => {
   })
 
   const cpuData = metrics.map(m => m.cpu_usage ?? 0)
-  const memData = metrics.map(m => m.mem_total ? ((m.mem_used / m.mem_total) * 100) : 0)
+  const memData = metrics.map(m => m.mem_used ?? 0)
+  const memTotal = Math.max(...metrics.map(m => m.mem_total ?? 0))
+  const memAxisFmt = memTotal >= 1048576
+    ? (v) => (v / 1048576).toFixed(1) + ' GB'
+    : memTotal >= 1024
+      ? (v) => (v / 1024).toFixed(0) + ' MB'
+      : (v) => v + ' KB'
+
   const diskReadData = metrics.map(m => m.disk_read ?? 0)
   const diskWriteData = metrics.map(m => m.disk_write ?? 0)
+
+  const diskReadRate = []
+  const diskWriteRate = []
+  for (let i = 0; i < metrics.length; i++) {
+    if (i === 0) { diskReadRate.push(0); diskWriteRate.push(0); continue }
+    const dt = (new Date(metrics[i].bucket) - new Date(metrics[i - 1].bucket)) / 1000
+    if (dt > 0) {
+      diskReadRate.push(+Math.max(0, ((metrics[i].disk_read ?? 0) - (metrics[i - 1].disk_read ?? 0)) / dt / 1024).toFixed(2))
+      diskWriteRate.push(+Math.max(0, ((metrics[i].disk_write ?? 0) - (metrics[i - 1].disk_write ?? 0)) / dt / 1024).toFixed(2))
+    } else { diskReadRate.push(0); diskWriteRate.push(0) }
+  }
+
   const netRxData = metrics.map(m => m.net_rx ?? 0)
   const netTxData = metrics.map(m => m.net_tx ?? 0)
 
@@ -2421,9 +2536,9 @@ const renderMetricsCharts = () => {
   if (memChartRef.value) {
     if (!memChart) memChart = echarts.init(memChartRef.value)
     memChart.setOption({
-      tooltip: { trigger: 'axis', formatter: (p) => `${p[0].axisValue}<br/>${p[0].marker} 内存: ${p[0].value.toFixed(1)}%` },
-      grid: baseGrid, xAxis: makeXAxis(),
-      yAxis: { type: 'value', min: 0, max: 100, axisLabel: { fontSize: 10, formatter: v => v + '%' } },
+      tooltip: { trigger: 'axis', formatter: (p) => `${p[0].axisValue}<br/>${p[0].marker} 内存: ${formatMemKB(p[0].value)}` },
+      grid: { ...baseGrid, left: 60 }, xAxis: makeXAxis(),
+      yAxis: { type: 'value', min: 0, max: memTotal || undefined, axisLabel: { fontSize: 10, formatter: memAxisFmt } },
       series: [makeSeries('内存', memData, '#67c23a')]
     }, true)
   }
@@ -2442,6 +2557,20 @@ const renderMetricsCharts = () => {
     }, true)
   }
 
+  if (diskIopsChartRef.value) {
+    if (!diskIopsChart) diskIopsChart = echarts.init(diskIopsChartRef.value)
+    diskIopsChart.setOption({
+      tooltip: { trigger: 'axis', formatter: (params) => {
+        let s = params[0].axisValue
+        params.forEach(p => { s += `<br/>${p.marker} ${p.seriesName}: ${formatBytesRaw(p.value)}/s` })
+        return s
+      }},
+      grid: baseGrid, xAxis: makeXAxis(),
+      yAxis: { type: 'value', min: 0, axisLabel: { fontSize: 10, formatter: v => formatBytesRaw(v) + '/s' } },
+      series: [makeSeries('读取', diskReadRate, '#409eff'), makeSeries('写入', diskWriteRate, '#e6a23c')]
+    }, true)
+  }
+
   if (netChartRef.value) {
     if (!netChart) netChart = echarts.init(netChartRef.value)
     netChart.setOption({
@@ -2455,13 +2584,32 @@ const renderMetricsCharts = () => {
       series: [makeSeries('接收', netRxData, '#409eff'), makeSeries('发送', netTxData, '#e6a23c')]
     }, true)
   }
+
+  if (trafficUsedChartRef.value) {
+    if (!trafficUsedChart) trafficUsedChart = echarts.init(trafficUsedChartRef.value)
+    const trafficDelta = []
+    for (let i = 0; i < metrics.length; i++) {
+      if (i === 0) { trafficDelta.push(0); continue }
+      const delta = Math.max(0, (metrics[i].traffic_used_mb ?? 0) - (metrics[i - 1].traffic_used_mb ?? 0))
+      trafficDelta.push(+delta.toFixed(2))
+    }
+    trafficUsedChart.setOption({
+      tooltip: { trigger: 'axis', formatter: (p) => `${p[0].axisValue}<br/>${p[0].marker} 流量增量: ${p[0].value} MB` },
+      grid: baseGrid, xAxis: makeXAxis(),
+      yAxis: { type: 'value', min: 0, axisLabel: { fontSize: 10, formatter: v => v + ' MB' } },
+      series: [makeSeries('流量增量', trafficDelta, '#722ed1')]
+    }, true)
+  }
 }
 
 const disposeCharts = () => {
   cpuChart?.dispose(); cpuChart = null
   memChart?.dispose(); memChart = null
   diskChart?.dispose(); diskChart = null
+  diskIopsChart?.dispose(); diskIopsChart = null
   netChart?.dispose(); netChart = null
+  trafficUsedChart?.dispose(); trafficUsedChart = null
+  trafficHourlyChart?.dispose(); trafficHourlyChart = null
 }
 
 onMounted(() => { loadDetail() })