feat(monitor): 监控时间选择器统一为相对时间+自定义范围双模式

- VmMonitor/VmDetail/UserVmDetail/HostDetail 四个页面统一改造
- 支持「最近」模式（动态计算时间范围）和「自定义」模式（固定日期范围）
- 每小时流量图表同步应用双模式选择器
- 移除旧的 monitorShortcuts 快捷方式

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

src/views/virtualization/VmMonitor.vue

@@ -32,19 +32,34 @@
       <div class="toolbar-row">
         <div class="toolbar-item">
           <span class="toolbar-label">时间</span>
-          <el-select v-model="timeRange" style="width: 140px" @change="handleRefresh">
-            <el-option label="最近10分钟" :value="10" />
-            <el-option label="最近30分钟" :value="30" />
-            <el-option label="最近1小时" :value="60" />
-            <el-option label="最近3小时" :value="180" />
-            <el-option label="最近6小时" :value="360" />
-            <el-option label="最近12小时" :value="720" />
-            <el-option label="最近24小时" :value="1440" />
+          <el-radio-group v-model="timeMode" size="small" @change="handleRefresh">
+            <el-radio-button label="relative">最近</el-radio-button>
+            <el-radio-button label="fixed">自定义</el-radio-button>
+          </el-radio-group>
+          <el-select v-if="timeMode === 'relative'" v-model="timeRange" style="width: 130px" @change="handleRefresh">
+            <el-option label="10分钟" :value="10" />
+            <el-option label="30分钟" :value="30" />
+            <el-option label="1小时" :value="60" />
+            <el-option label="3小时" :value="180" />
+            <el-option label="6小时" :value="360" />
+            <el-option label="12小时" :value="720" />
+            <el-option label="24小时" :value="1440" />
           </el-select>
+          <el-date-picker
+            v-else
+            v-model="fixedDateRange"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始"
+            end-placeholder="结束"
+            size="small"
+            style="width: 340px"
+            @change="handleRefresh"
+          />
         </div>
         <div class="toolbar-item">
           <span class="toolbar-label">自动刷新</span>
-          <el-select v-model="autoRefreshInterval" style="width: 120px" @change="resetAutoRefresh">
+          <el-select v-model="autoRefreshInterval" style="width: 110px" @change="resetAutoRefresh">
             <el-option label="关闭" :value="0" />
             <el-option label="10秒" :value="10" />
             <el-option label="30秒" :value="30" />
@@ -91,7 +106,9 @@ const selectedMetrics = ref(['cpu', 'memory'])
 const metricsLoading = ref(false)
 const loaded = ref(false)
 const metricsDataMap = ref({})
+const timeMode = ref('relative')
 const timeRange = ref(60)
+const fixedDateRange = ref(null)
 const autoRefreshInterval = ref(0)
 let autoRefreshTimer = null
 
@@ -169,11 +186,23 @@ const loadVmList = async () => {
   }
 }
 
+const getTimeRange = () => {
+  if (timeMode.value === 'relative') {
+    const endTime = new Date()
+    const startTime = new Date(endTime - timeRange.value * 60 * 1000)
+    return { startTime, endTime }
+  } else {
+    if (!fixedDateRange.value || fixedDateRange.value.length < 2) return null
+    return { startTime: new Date(fixedDateRange.value[0]), endTime: new Date(fixedDateRange.value[1]) }
+  }
+}
+
 const handleRefresh = async () => {
   if (!selectedVms.value.length) return
+  const range = getTimeRange()
+  if (!range) { ElMessage.warning('请选择时间范围'); return }
   metricsLoading.value = true
-  const endTime = new Date()
-  const startTime = new Date(endTime - timeRange.value * 60 * 1000)
+  const { startTime, endTime } = range
   const interval = calcInterval(endTime - startTime)
 
   const dataMap = {}
@@ -208,7 +237,9 @@ const handleRefresh = async () => {
 }
 
 const renderCharts = () => {
-  const showDate = timeRange.value >= 720
+  const range = getTimeRange()
+  const spanMs = range ? (range.endTime - range.startTime) : 0
+  const showDate = spanMs >= 12 * 3600 * 1000
   const labelRotate = showDate ? 30 : 0
 
   for (const metric of selectedMetrics.value) {