feat(system): 通知管理与文件选择器来源筛选

- 新增通知管理（渠道卡片化、模板 CRUD、参数按钮插入）

- ImageSelector/AvatarSelector 增加上传来源 is_admin 筛选

- 宿主机详情页实时指标与硬件/网卡 IPv6 展示优化

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

src/views/virtualization/HostDetail.vue

@@ -54,6 +54,18 @@
           <span class="status-label">带宽</span>
           <span class="status-value">↓{{ detail.rx_bandwidth || 0 }} / ↑{{ detail.tx_bandwidth || 0 }} Mbps</span>
         </div>
+        <div class="status-item" v-if="loadAvg">
+          <span class="status-label">负载</span>
+          <span class="status-value">
+            <span :style="{ color: loadColor(loadAvg['1min'], hostMetrics?.cpu?.cpu_count) }">{{ loadAvg['1min']?.toFixed(2) }}</span> /
+            <span :style="{ color: loadColor(loadAvg['5min'], hostMetrics?.cpu?.cpu_count) }">{{ loadAvg['5min']?.toFixed(2) }}</span> /
+            <span :style="{ color: loadColor(loadAvg['15min'], hostMetrics?.cpu?.cpu_count) }">{{ loadAvg['15min']?.toFixed(2) }}</span>
+          </span>
+        </div>
+        <div class="status-item" v-if="hostMetrics?.internet_speed">
+          <span class="status-label">实时网速</span>
+          <span class="status-value">↓{{ formatSpeedAuto(hostMetrics.internet_speed.rx_bytes) }} / ↑{{ formatSpeedAuto(hostMetrics.internet_speed.tx_bytes) }}</span>
+        </div>
         <div class="status-item">
           <span class="status-label">创建时间</span>
           <span class="status-value">{{ formatTimestamp(detail.created_at) }}</span>
@@ -131,6 +143,187 @@
               </div>
             </div>
           </div>
+          <!-- 实时监控概览 -->
+          <div class="section-block" v-loading="hostMetricsLoading">
+            <div class="section-header">
+              <h3 class="section-title"><svg class="sec-icon" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="#67c23a"/></svg> 实时监控</h3>
+              <el-button size="small" :icon="Refresh" @click="loadHostMetrics" :loading="hostMetricsLoading">刷新</el-button>
+            </div>
+            <div class="rt-grid" v-if="hostMetrics">
+              <!-- CPU -->
+              <div class="rt-card" v-if="hostMetrics.cpu">
+                <div class="rt-card-icon cpu-icon">
+                  <svg viewBox="0 0 24 24" width="22" height="22"><path d="M15 3H9v2H7v2H5v2H3v6h2v2h2v2h2v2h6v-2h2v-2h2v-2h2V9h-2V7h-2V5h-2V3zm0 2v2h2v2h2v6h-2v2h-2v2H9v-2H7v-2H5V9h2V7h2V5h6z" fill="currentColor"/><rect x="10" y="10" width="4" height="4" rx="0.5" fill="currentColor"/></svg>
+                </div>
+                <div class="rt-card-body">
+                  <span class="rt-label">CPU</span>
+                  <span class="rt-value" :style="{ color: quotaColor(hostMetrics.cpu.cpu_usage_percent ?? 0) }">{{ hostMetrics.cpu.cpu_usage_percent?.toFixed(1) }}<small>%</small></span>
+                  <el-progress :percentage="Math.min(100, hostMetrics.cpu.cpu_usage_percent ?? 0)" :show-text="false" :stroke-width="6" :color="quotaColor(hostMetrics.cpu.cpu_usage_percent ?? 0)" />
+                  <span class="rt-sub">{{ hostMetrics.cpu.cpu_count }} 逻辑核心</span>
+                </div>
+              </div>
+              <!-- 内存 -->
+              <div class="rt-card" v-if="hostMetrics.memory">
+                <div class="rt-card-icon mem-icon">
+                  <svg viewBox="0 0 24 24" width="22" height="22"><path d="M4 5h16a1 1 0 011 1v12a1 1 0 01-1 1H4a1 1 0 01-1-1V6a1 1 0 011-1zm1 2v10h14V7H5zm2 2h2v6H7V9zm4 0h2v6h-2V9zm4 2h2v4h-2v-4z" fill="currentColor"/></svg>
+                </div>
+                <div class="rt-card-body">
+                  <span class="rt-label">内存</span>
+                  <span class="rt-value" :style="{ color: quotaColor(hostMetrics.memory.percent ?? 0) }">{{ hostMetrics.memory.percent?.toFixed(1) }}<small>%</small></span>
+                  <el-progress :percentage="Math.min(100, hostMetrics.memory.percent ?? 0)" :show-text="false" :stroke-width="6" :color="quotaColor(hostMetrics.memory.percent ?? 0)" />
+                  <span class="rt-sub">{{ formatBytesAuto(hostMetrics.memory.used) }} / {{ formatBytesAuto(hostMetrics.memory.total) }}</span>
+                </div>
+              </div>
+              <!-- 负载 -->
+              <div class="rt-card" v-if="loadAvg">
+                <div class="rt-card-icon load-icon">
+                  <svg viewBox="0 0 24 24" width="22" height="22"><path d="M3 13h2v8H3v-8zm4-4h2v12H7V9zm4-4h2v16h-2V5zm4 6h2v10h-2V11zm4-2h2v12h-2V9z" fill="currentColor"/></svg>
+                </div>
+                <div class="rt-card-body">
+                  <span class="rt-label">系统负载</span>
+                  <div class="load-pills">
+                    <span class="load-pill" :style="{ '--lc': loadColor(loadAvg['1min'], hostMetrics?.cpu?.cpu_count) }">
+                      <em>1m</em>{{ loadAvg['1min']?.toFixed(2) }}
+                    </span>
+                    <span class="load-pill" :style="{ '--lc': loadColor(loadAvg['5min'], hostMetrics?.cpu?.cpu_count) }">
+                      <em>5m</em>{{ loadAvg['5min']?.toFixed(2) }}
+                    </span>
+                    <span class="load-pill" :style="{ '--lc': loadColor(loadAvg['15min'], hostMetrics?.cpu?.cpu_count) }">
+                      <em>15m</em>{{ loadAvg['15min']?.toFixed(2) }}
+                    </span>
+                  </div>
+                  <span class="rt-sub">核心数 {{ hostMetrics?.cpu?.cpu_count ?? '-' }}，满载阈值 {{ hostMetrics?.cpu?.cpu_count ?? '-' }}.00</span>
+                </div>
+              </div>
+              <!-- 网络 -->
+              <div class="rt-card" v-if="hostMetrics.internet_speed">
+                <div class="rt-card-icon net-icon">
+                  <svg viewBox="0 0 24 24" width="22" height="22"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" fill="currentColor"/></svg>
+                </div>
+                <div class="rt-card-body">
+                  <span class="rt-label">网络带宽</span>
+                  <div class="net-bw-row">
+                    <span class="net-bw-item rx"><svg viewBox="0 0 12 12" width="12" height="12"><path d="M6 2v8M3 7l3 3 3-3" stroke="#67c23a" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>{{ formatSpeedAuto(hostMetrics.internet_speed.rx_bytes) }}</span>
+                    <span class="net-bw-item tx"><svg viewBox="0 0 12 12" width="12" height="12"><path d="M6 10V2M3 5l3-3 3 3" stroke="#409eff" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>{{ formatSpeedAuto(hostMetrics.internet_speed.tx_bytes) }}</span>
+                  </div>
+                  <span class="rt-sub" v-if="hostMetrics.network">累计 ↓{{ formatBytesAuto(hostMetrics.network.rx_bytes) }} ↑{{ formatBytesAuto(hostMetrics.network.tx_bytes) }}</span>
+                </div>
+              </div>
+            </div>
+            <!-- 磁盘使用 -->
+            <template v-if="metricsDisks.length">
+              <h4 class="rt-subtitle"><svg viewBox="0 0 24 24" width="16" height="16" style="vertical-align:-2px"><path d="M4 4h16a2 2 0 012 2v12a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2zm0 2v12h16V6H4zm2 8h2v2H6v-2zm4 0h8v2h-8v-2z" fill="#909399"/></svg> 磁盘挂载</h4>
+              <div class="disk-list">
+                <div class="disk-item" v-for="disk in metricsDisks" :key="disk.path">
+                  <div class="disk-head">
+                    <code class="disk-path">{{ disk.path }}</code>
+                    <span class="disk-detail">{{ formatBytesAuto(disk.used) }} / {{ formatBytesAuto(disk.total) }}</span>
+                    <span class="disk-pct" :style="{ color: quotaColor(disk.percent) }">{{ disk.percent.toFixed(1) }}%</span>
+                  </div>
+                  <el-progress :percentage="Math.min(100, disk.percent)" :show-text="false" :stroke-width="6" :color="quotaColor(disk.percent)" />
+                </div>
+              </div>
+            </template>
+            <el-empty v-if="!hostMetrics && !hostMetricsLoading" description="暂无实时监控数据" :image-size="60" />
+          </div>
+
+          <!-- 硬件与系统信息 -->
+          <div class="section-block" v-if="hardwareInfo">
+            <h3 class="section-title clickable" @click="showHardwareInfo = !showHardwareInfo">
+              <svg class="sec-icon" viewBox="0 0 24 24"><path d="M20 8h-3V6c0-1.1-.9-2-2-2H9c-1.1 0-2 .9-2 2v2H4c-1.1 0-2 .9-2 2v10h20V10c0-1.1-.9-2-2-2zM9 6h6v2H9V6zm11 12H4v-6h16v6zm0-8H4v-0c0 0 0 0 0 0h16v0z" fill="#606266"/></svg>
+              硬件与系统
+              <el-icon class="section-arrow" :class="{ expanded: showHardwareInfo }"><ArrowRight /></el-icon>
+            </h3>
+            <div v-show="showHardwareInfo">
+              <!-- 系统概览 -->
+              <div class="hw-overview" v-if="hardwareInfo.system_info">
+                <div class="hw-ov-item">
+                  <svg viewBox="0 0 24 24" width="18" height="18"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-.22-13h-.06c-.4 0-.72.32-.72.72v4.72c0 .35.18.68.49.86l4.15 2.49c.34.2.78.1.98-.24.21-.34.1-.79-.25-.99l-3.87-2.3V7.72c0-.4-.32-.72-.72-.72z" fill="#409eff"/></svg>
+                  <div><em>运行</em>{{ formatUptime(hardwareInfo.system_info.uptime_seconds) }}</div>
+                </div>
+                <div class="hw-ov-item">
+                  <svg viewBox="0 0 24 24" width="18" height="18"><path d="M20 18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H1v2h22v-2h-3zM4 6h16v10H4V6z" fill="#67c23a"/></svg>
+                  <div><em>主机</em>{{ hardwareInfo.system_info.hostname }}</div>
+                </div>
+                <div class="hw-ov-item">
+                  <svg viewBox="0 0 24 24" width="18" height="18"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z" fill="#e6a23c"/></svg>
+                  <div><em>系统</em>{{ hardwareInfo.system_info.distro || hardwareInfo.system_info.os }}</div>
+                </div>
+                <div class="hw-ov-item">
+                  <svg viewBox="0 0 24 24" width="18" height="18"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" fill="#909399"/></svg>
+                  <div><em>内核</em><span class="mono-text" style="font-size:12px">{{ hardwareInfo.system_info.os }}</span></div>
+                </div>
+              </div>
+              <!-- CPU / 内存 -->
+              <div class="hw-spec-grid">
+                <div class="hw-spec-card">
+                  <div class="hw-spec-icon"><svg viewBox="0 0 24 24" width="20" height="20"><path d="M15 3H9v2H7v2H5v2H3v6h2v2h2v2h2v2h6v-2h2v-2h2v-2h2V9h-2V7h-2V5h-2V3zm0 2v2h2v2h2v6h-2v2h-2v2H9v-2H7v-2H5V9h2V7h2V5h6z" fill="#409eff"/><rect x="10" y="10" width="4" height="4" rx="0.5" fill="#409eff"/></svg></div>
+                  <div class="hw-spec-body">
+                    <span class="hw-spec-label">处理器</span>
+                    <span class="hw-spec-main">{{ hardwareInfo.cpu_model }}</span>
+                    <span class="hw-spec-detail">{{ hardwareInfo.cpu_physical_cores }}C / {{ hardwareInfo.cpu_logical_cores }}T · {{ formatCpuFreq(hardwareInfo.cpu_freq) }}</span>
+                  </div>
+                </div>
+                <div class="hw-spec-card">
+                  <div class="hw-spec-icon"><svg viewBox="0 0 24 24" width="20" height="20"><path d="M4 5h16a1 1 0 011 1v12a1 1 0 01-1 1H4a1 1 0 01-1-1V6a1 1 0 011-1zm1 2v10h14V7H5zm2 2h2v6H7V9zm4 0h2v6h-2V9zm4 2h2v4h-2v-4z" fill="#67c23a"/></svg></div>
+                  <div class="hw-spec-body">
+                    <span class="hw-spec-label">内存</span>
+                    <span class="hw-spec-main">{{ formatBytesAuto(hardwareInfo.memory_total) }}</span>
+                    <span class="hw-spec-detail">Swap {{ hardwareInfo.swap_total ? formatBytesAuto(hardwareInfo.swap_total) : '无' }} · {{ hardwareInfo.system_info?.arch || '-' }}</span>
+                  </div>
+                </div>
+              </div>
+              <!-- 磁盘设备 -->
+              <template v-if="hardwareInfo.disk_devices && hardwareInfo.disk_devices.length">
+                <h4 class="hw-subtitle"><svg viewBox="0 0 24 24" width="14" height="14" style="vertical-align:-1px"><path d="M4 4h16a2 2 0 012 2v12a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2zm0 2v12h16V6H4zm2 8h2v2H6v-2zm4 0h8v2h-8v-2z" fill="#606266"/></svg> 存储设备</h4>
+                <div class="hw-disk-cards">
+                  <div class="hw-disk-card" v-for="dev in hardwareInfo.disk_devices" :key="dev.name">
+                    <div class="hw-disk-icon">
+                      <svg v-if="dev.type === 'ssd'" viewBox="0 0 24 24" width="28" height="28"><rect x="3" y="6" width="18" height="12" rx="2" stroke="#67c23a" stroke-width="1.5" fill="none"/><path d="M8 10l2 2-2 2M12 14h4" stroke="#67c23a" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                      <svg v-else viewBox="0 0 24 24" width="28" height="28"><circle cx="12" cy="12" r="9" stroke="#909399" stroke-width="1.5" fill="none"/><circle cx="12" cy="12" r="3" stroke="#909399" stroke-width="1.5" fill="none"/><line x1="12" y1="3" x2="12" y2="6" stroke="#909399" stroke-width="1.5"/></svg>
+                    </div>
+                    <div class="hw-disk-info">
+                      <span class="hw-disk-name">/dev/{{ dev.name }}</span>
+                      <span class="hw-disk-model">{{ dev.model || '-' }}</span>
+                    </div>
+                    <div class="hw-disk-meta">
+                      <el-tag :type="dev.type === 'ssd' ? 'success' : 'info'" size="small" effect="plain">{{ (dev.type || 'HDD').toUpperCase() }}</el-tag>
+                      <span class="hw-disk-size">{{ formatBytesAuto(dev.size) }}</span>
+                    </div>
+                  </div>
+                </div>
+              </template>
+              <!-- 网卡 -->
+              <template v-if="filteredNics.length">
+                <h4 class="hw-subtitle"><svg viewBox="0 0 24 24" width="14" height="14" style="vertical-align:-1px"><path d="M20 2H4a2 2 0 00-2 2v16a2 2 0 002 2h16a2 2 0 002-2V4a2 2 0 00-2-2zM8 18H6v-4h2v4zm4 0h-2V8h2v10zm4 0h-2v-6h2v6z" fill="#606266"/></svg> 网卡</h4>
+                <div class="nic-cards">
+                  <div class="nic-card" v-for="nic in filteredNics" :key="nic.name" :class="{ 'nic-down': !nic.is_up }">
+                    <div class="nic-head">
+                      <svg viewBox="0 0 24 24" width="16" height="16"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" :fill="nic.is_up ? '#67c23a' : '#c0c4cc'"/></svg>
+                      <span class="nic-name">{{ nic.name }}</span>
+                      <el-tag :type="nic.is_up ? 'success' : 'info'" size="small" effect="plain" class="nic-tag">{{ nic.is_up ? 'UP' : 'DOWN' }}</el-tag>
+                      <span class="nic-speed" v-if="nic.speed_mbps">{{ nic.speed_mbps >= 1000 ? (nic.speed_mbps/1000)+'G' : nic.speed_mbps+'M' }}</span>
+                    </div>
+                    <div class="nic-body">
+                      <div class="nic-row" v-if="nic._ipv4List.length">
+                        <span class="nic-k">IPv4</span>
+                        <div class="nic-addr-list"><span class="nic-addr" v-for="(ip, i) in nic._ipv4List" :key="i">{{ ip }}</span></div>
+                      </div>
+                      <div class="nic-row" v-if="nic._ipv6List.length">
+                        <span class="nic-k">IPv6</span>
+                        <div class="nic-addr-list"><span class="nic-addr v6" v-for="(ip, i) in nic._ipv6List" :key="i">{{ ip }}</span></div>
+                      </div>
+                      <div class="nic-row" v-if="nic._mac">
+                        <span class="nic-k">MAC</span>
+                        <code class="nic-mac">{{ nic._mac }}</code>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </div>
+          </div>
+
           <div class="section-block">
             <h3 class="section-title clickable" @click="showDetailDiskIo = !showDetailDiskIo">
               硬盘 IO 限制
@@ -746,7 +939,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeft, ArrowRight, Refresh, Edit, Delete, Monitor, Coin, Connection, Search, Plus, Key, CopyDocument } from '@element-plus/icons-vue'
 import {
-  getRemoteHostDetail, updateRemoteHost, deleteRemoteHost,
+  getRemoteHostDetail, getRemoteHostMetrics, updateRemoteHost, deleteRemoteHost,
   getUserNetworkingList, getUserNetworkingDetail, createUserNetworking, deleteUserNetworking,
   assignUserNetworking, removeUserNetworkingNetwork,
   createHostToken, getMetricsHistory, getHostQuotaStats,
@@ -887,6 +1080,7 @@ const getTokenIoBwFactor = () => ioBwUnitOptions.find(u => u.label === tokenIoBw
 const showDiskIoSection = ref(false)
 const showTokenDiskIo = ref(false)
 const showDetailDiskIo = ref(false)
+const showHardwareInfo = ref(false)
 
 const formData = reactive({
   name: '', base_url: '', ip: '', token: '', port: 22, user: '', password: '', private_key: '',
@@ -962,6 +1156,111 @@ const loadDetail = async () => {
   } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '加载失败')) } finally { loading.value = false }
 }
 
+// ---- 实时监控指标 ----
+const hostMetrics = ref(null)
+const hostMetricsLoading = ref(false)
+const hardwareInfo = ref(null)
+const loadAvg = ref(null)
+
+const loadHostMetrics = async () => {
+  if (!hostId.value) return
+  hostMetricsLoading.value = true
+  try {
+    const res = await getRemoteHostMetrics({ service_id: serviceId.value, host_id: hostId.value })
+    const body = res?.data
+    if (body?.code === 200 && body?.data) {
+      const raw = body.data.data ?? body.data
+      hostMetrics.value = raw
+      if (raw.hardware_json) {
+        try { hardwareInfo.value = JSON.parse(raw.hardware_json) } catch { hardwareInfo.value = null }
+      }
+      if (raw.load_avg_json) {
+        try { loadAvg.value = JSON.parse(raw.load_avg_json) } catch { loadAvg.value = null }
+      }
+      if (raw.ksm && !ksmStats.value) {
+        ksmStats.value = raw.ksm
+      }
+    }
+  } catch (e) {
+    console.warn('加载实时指标失败:', e)
+  } finally {
+    hostMetricsLoading.value = false
+  }
+}
+
+const metricsDisks = computed(() => {
+  if (!hostMetrics.value?.disk) return []
+  return Object.entries(hostMetrics.value.disk).map(([path, info]) => {
+    const pct = info.percent ?? (info.total ? ((info.used / info.total) * 100) : 0)
+    return { path, ...info, percent: pct }
+  })
+})
+
+const formatBytesAuto = (val) => {
+  if (!val && val !== 0) return '-'
+  val = Number(val)
+  if (val >= 1099511627776) return (val / 1099511627776).toFixed(2) + ' TB'
+  if (val >= 1073741824) return (val / 1073741824).toFixed(2) + ' GB'
+  if (val >= 1048576) return (val / 1048576).toFixed(2) + ' MB'
+  if (val >= 1024) return (val / 1024).toFixed(1) + ' KB'
+  return val + ' B'
+}
+
+const formatSpeedAuto = (val) => {
+  if (!val && val !== 0) return '0 B/s'
+  val = Number(val)
+  if (val >= 1073741824) return (val / 1073741824).toFixed(1) + ' GB/s'
+  if (val >= 1048576) return (val / 1048576).toFixed(1) + ' MB/s'
+  if (val >= 1024) return (val / 1024).toFixed(1) + ' KB/s'
+  return val + ' B/s'
+}
+
+const formatCpuFreq = (freq) => {
+  if (!freq) return '-'
+  if (typeof freq === 'object') {
+    const cur = freq.current ? (freq.current >= 1000 ? (freq.current / 1000).toFixed(2) + ' GHz' : freq.current.toFixed(0) + ' MHz') : ''
+    const max = freq.max ? (freq.max >= 1000 ? (freq.max / 1000).toFixed(1) + ' GHz' : freq.max + ' MHz') : ''
+    if (cur && max) return `${cur}（最高 ${max}）`
+    return cur || max || '-'
+  }
+  const v = Number(freq)
+  return v >= 1000 ? (v / 1000).toFixed(2) + ' GHz' : v + ' MHz'
+}
+
+const formatUptime = (seconds) => {
+  if (!seconds) return '-'
+  const d = Math.floor(seconds / 86400)
+  const h = Math.floor((seconds % 86400) / 3600)
+  const m = Math.floor((seconds % 3600) / 60)
+  const parts = []
+  if (d > 0) parts.push(`${d} 天`)
+  if (h > 0) parts.push(`${h} 小时`)
+  if (m > 0 && d === 0) parts.push(`${m} 分钟`)
+  return parts.join(' ') || '< 1 分钟'
+}
+
+const loadColor = (val, cores) => {
+  if (!cores) return '#909399'
+  const ratio = val / cores
+  if (ratio >= 1) return '#f56c6c'
+  if (ratio >= 0.7) return '#e6a23c'
+  return '#67c23a'
+}
+
+const filteredNics = computed(() => {
+  if (!hardwareInfo.value?.nic_info) return []
+  const skipPrefixes = ['vnet', 'veth', 'ovs-', 'br-int', 'tap']
+  return hardwareInfo.value.nic_info
+    .filter(nic => !skipPrefixes.some(p => nic.name.startsWith(p)))
+    .map(nic => {
+      const addrs = nic.addresses || []
+      const ipv4List = addrs.filter(a => a.family?.includes('AF_INET') && !a.family?.includes('AF_INET6')).map(a => a.address)
+      const ipv6List = addrs.filter(a => a.family?.includes('AF_INET6')).map(a => a.address)
+      const macEntry = addrs.find(a => a.family?.includes('AF_PACKET'))
+      return { ...nic, _ipv4List: ipv4List, _ipv6List: ipv6List, _mac: macEntry?.address || '' }
+    })
+})
+
 // ---- 额度统计 ----
 const quotaStats = ref(null)
 const quotaStatsLoading = ref(false)
@@ -1637,6 +1936,7 @@ const initPage = () => {
   historicalMetricsData.value = null
   disposeCharts()
   loadDetail()
+  loadHostMetrics()
   if (activeTab.value === 'monitor') loadHistoricalMetrics()
 }
 
@@ -1745,4 +2045,80 @@ onBeforeUnmount(() => { isPageActive = false; disposeCharts() })
 .quota-disk-detail { font-size: 12px; color: #86909c; flex: 1; text-align: right; }
 .quota-disk-pct { font-size: 13px; font-weight: 600; min-width: 48px; text-align: right; }
 
+/* 实时监控 */
+.sec-icon { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; }
+.rt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
+.rt-card { display: flex; gap: 14px; background: #fff; border: 1px solid #ebeef5; border-radius: 10px; padding: 18px 20px; transition: box-shadow .2s, border-color .2s; }
+.rt-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06); border-color: #d9ecff; }
+.rt-card-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; }
+.cpu-icon { background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%); }
+.mem-icon { background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%); }
+.load-icon { background: linear-gradient(135deg, #e6a23c 0%, #f0c78a 100%); }
+.net-icon { background: linear-gradient(135deg, #909399 0%, #b1b3b8 100%); }
+.rt-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
+.rt-label { font-size: 12px; color: #86909c; font-weight: 500; }
+.rt-value { font-size: 26px; font-weight: 700; line-height: 1.1; }
+.rt-value small { font-size: 14px; font-weight: 500; margin-left: 1px; }
+.rt-sub { font-size: 11px; color: #a8abb2; margin-top: 2px; }
+
+.load-pills { display: flex; gap: 8px; margin: 4px 0 2px; }
+.load-pill { display: inline-flex; align-items: center; gap: 4px; background: #f7f8fa; border: 1px solid #ebeef5; border-radius: 6px; padding: 4px 10px; font-size: 15px; font-weight: 700; color: var(--lc, #1d2129); }
+.load-pill em { font-style: normal; font-size: 10px; font-weight: 500; color: #a8abb2; text-transform: uppercase; }
+
+.net-bw-row { display: flex; gap: 16px; margin: 6px 0 2px; }
+.net-bw-item { display: inline-flex; align-items: center; gap: 5px; font-size: 16px; font-weight: 700; color: #1d2129; }
+
+.rt-subtitle { font-size: 13px; font-weight: 600; color: #606266; margin: 20px 0 10px; display: flex; align-items: center; gap: 6px; }
+.disk-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
+.disk-item { background: #fff; border: 1px solid #ebeef5; border-radius: 8px; padding: 12px 16px; transition: box-shadow .2s; }
+.disk-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,.04); }
+.disk-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
+.disk-path { font-size: 13px; font-family: 'Consolas','Monaco',monospace; color: #1d2129; background: #f0f2f5; padding: 2px 8px; border-radius: 4px; }
+.disk-detail { font-size: 12px; color: #86909c; flex: 1; text-align: right; }
+.disk-pct { font-size: 13px; font-weight: 700; min-width: 44px; text-align: right; }
+
+/* 硬件信息 */
+.hw-overview { display: flex; flex-wrap: wrap; gap: 0; background: #f7f8fa; border-radius: 8px; border: 1px solid #ebeef5; margin-bottom: 16px; overflow: hidden; }
+.hw-ov-item { flex: 1; min-width: 180px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-right: 1px solid #ebeef5; }
+.hw-ov-item:last-child { border-right: none; }
+.hw-ov-item div { display: flex; flex-direction: column; min-width: 0; }
+.hw-ov-item em { font-style: normal; font-size: 11px; color: #a8abb2; line-height: 1; margin-bottom: 2px; }
+.hw-ov-item div { font-size: 13px; color: #1d2129; font-weight: 500; word-break: break-all; }
+
+.hw-spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; margin-bottom: 16px; }
+.hw-spec-card { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid #ebeef5; border-radius: 10px; padding: 16px 20px; }
+.hw-spec-icon { flex-shrink: 0; width: 40px; height: 40px; background: #f0f7ff; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
+.hw-spec-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.hw-spec-label { font-size: 11px; color: #a8abb2; }
+.hw-spec-main { font-size: 14px; font-weight: 600; color: #1d2129; word-break: break-word; }
+.hw-spec-detail { font-size: 12px; color: #86909c; }
+
+.hw-subtitle { font-size: 13px; font-weight: 600; color: #606266; margin: 16px 0 10px; display: flex; align-items: center; gap: 6px; }
+
+.hw-disk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
+.hw-disk-card { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #ebeef5; border-radius: 10px; padding: 14px 18px; transition: box-shadow .2s; }
+.hw-disk-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.05); }
+.hw-disk-icon { flex-shrink: 0; width: 44px; height: 44px; background: #f0f7ff; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
+.hw-disk-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.hw-disk-name { font-size: 14px; font-weight: 600; color: #1d2129; font-family: 'Consolas','Monaco',monospace; }
+.hw-disk-model { font-size: 12px; color: #86909c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.hw-disk-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
+.hw-disk-size { font-size: 15px; font-weight: 700; color: #1d2129; }
+
+.nic-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
+.nic-card { background: #fff; border: 1px solid #ebeef5; border-radius: 10px; padding: 14px 18px; transition: box-shadow .2s; }
+.nic-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.05); }
+.nic-card.nic-down { opacity: .55; }
+.nic-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
+.nic-name { font-size: 14px; font-weight: 600; color: #1d2129; }
+.nic-tag { margin-left: auto; }
+.nic-speed { font-size: 12px; color: #86909c; font-weight: 500; }
+.nic-body { display: flex; flex-direction: column; gap: 4px; }
+.nic-row { display: flex; align-items: center; gap: 8px; }
+.nic-k { font-size: 11px; color: #a8abb2; min-width: 32px; font-weight: 500; }
+.nic-addr-list { display: flex; flex-wrap: wrap; gap: 4px; }
+.nic-addr { display: inline-block; background: #f0f7ff; border: 1px solid #d9ecff; border-radius: 4px; padding: 1px 8px; font-size: 12px; font-family: 'Consolas','Monaco',monospace; color: #409eff; }
+.nic-addr.v6 { background: #fdf6ec; border-color: #faecd8; color: #e6a23c; font-size: 11px; }
+.nic-mac { font-size: 12px; color: #606266; }
+
 </style>