回退组件库版本

packages/web/package.json

@@ -26,7 +26,7 @@
     "core-js": "^3.8.3",
     "crypto-browserify": "^3.12.0",
     "echarts": "5.4.3",
-    "element-plus": "^2.4.1",
+    "element-plus": "2.10.4",
     "generate-avatar": "1.4.10",
     "js-cookie": "3.0.5",
     "lodash": "^4.17.21",

packages/web/projects/vgpu/views/monitor/overview/index.vue

@@ -44,7 +44,7 @@
 
       <Block v-for="{ title, dataSource } in rangeConfig" :title="title" :key="title">
         <template #extra>
-          <time-picker v-model="times" type="datetimerange" size="small" :key="`time-picker-${title}`" />
+          <time-picker v-model="times" type="datetimerange" size="small" />
         </template>
         <echarts-plus :options="getRangeOptions(dataSource)" style="height: 250px" />
       </Block>

packages/web/src/components/TimePicker.vue

@@ -1,6 +1,5 @@
 <template>
   <el-date-picker
-    ref="pickerRef"
     v-model="value"
     :type="type"
     range-separator="至"
@@ -8,36 +7,24 @@
     end-placeholder="结束时间"
     unlink-panels
     :shortcuts="type.includes('range') && shortcuts"
-    :teleported="false" 
-    :append-to-body="false"
     class="date-picker"
     :disabled-date="disabledDate"
-    @visible-change="onVisibleChange"
     v-bind="$attrs"
-  />
+  ></el-date-picker>
 </template>
 
 <script setup lang="jsx">
-import { computed, defineProps, defineEmits, ref } from 'vue';
+import { computed, defineProps, defineEmits } from 'vue';
+import { ElDatePicker } from 'element-plus';
 
-// props 和 emits
 const props = defineProps({
   modelValue: {},
   type: { type: String, default: 'date' },
   parse: { type: Function, default: (times) => times },
 });
-const emits = defineEmits(['update:modelValue']);
-
-// 本组件自己的 ref 和显示状态
-const pickerRef = ref();
-const visible = ref(false);
 
-// 监听是否显示
-const onVisibleChange = (val) => {
-  visible.value = val;
-};
+const emits = defineEmits(['update:modelValue']);
 
-// 双向绑定
 const value = computed({
   get() {
     return props.modelValue;
@@ -47,44 +34,105 @@ const value = computed({
   },
 });
 
-// 快捷选项生成器
-function genShortcut(text, hoursAgo) {
-  return {
-    text,
+const shortcuts = [
+  {
+    text: '前 1 小时',
     value: () => {
       const end = new Date();
-      const start = new Date(end.getTime() - hoursAgo * 3600 * 1000);
-
-      // 只关闭当前面板
-      setTimeout(() => {
-        if (visible.value) {
-          pickerRef.value?.handleClose?.();
-        }
-      }, 0);
-
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 1);
       return [start, end];
     },
-  };
-}
-
-// 快捷选项
-const shortcuts = [
-  genShortcut('前 1 小时', 1),
-  genShortcut('前 6 小时', 6),
-  genShortcut('前 12 小时', 12),
-  genShortcut('前 1 天', 24),
-  genShortcut('前 2 天', 48),
-  genShortcut('前 3 天', 72),
-  genShortcut('前 1 周', 168),
+  },
+  {
+    text: '前 6 小时',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 6);
+      return [start, end];
+    },
+  },
+  {
+    text: '前 12 小时',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 12);
+      return [start, end];
+    },
+  },
+  {
+    text: '前 1 天',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24);
+      return [start, end];
+    },
+  },
+  {
+    text: '前 2 天',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 2);
+      return [start, end];
+    },
+  },
+  {
+    text: '前 3 天',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
+      return [start, end];
+    },
+  },
+  {
+    text: '前 1 周',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+      return [start, end];
+    },
+  },
+  // {
+  //   text: '前两周',
+  //   value: () => {
+  //     const end = new Date();
+  //     const start = new Date();
+  //     start.setTime(start.getTime() - 3600 * 1000 * 24 * 14);
+  //     return [start, end];
+  //   },
+  // },
+  // {
+  //   text: '前一个月',
+  //   value: () => {
+  //     const end = new Date();
+  //     const start = new Date();
+  //     start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+  //     return [start, end];
+  //   },
+  // },
+  // {
+  //   text: '前三个月',
+  //   value: () => {
+  //     const end = new Date();
+  //     const start = new Date();
+  //     start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+  //     return [start, end];
+  //   },
+  // },
 ];
 
-// 禁止选择未来时间
 const disabledDate = (time) => {
   return time.getTime() >= Date.now();
 };
 </script>
 
-<style scoped>
+<style>
 .date-picker {
   max-width: 450px;
 }