From c7c8f36b2f9e93582ea23be1d0e1f95b249ad295 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=8D=9A=E6=96=87?= <1179111926@qq.com>
Date: Thu, 7 Aug 2025 18:19:44 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=97=A5=E6=9C=9F=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=A4=9A=E4=B8=AA=E5=BC=B9=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../vgpu/views/monitor/overview/index.vue     |  2 +-
 packages/web/src/components/TimePicker.vue    | 19 ++++++++++---------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/web/projects/vgpu/views/monitor/overview/index.vue b/packages/web/projects/vgpu/views/monitor/overview/index.vue
index a5661ec..e41d2ea 100644
--- a/packages/web/projects/vgpu/views/monitor/overview/index.vue
+++ b/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" />
+          <time-picker v-model="times" type="datetimerange" size="small" :key="`time-picker-${title}`" />
         </template>
         <echarts-plus :options="getRangeOptions(dataSource)" style="height: 250px" />
       </Block>
diff --git a/packages/web/src/components/TimePicker.vue b/packages/web/src/components/TimePicker.vue
index 5fe5fb8..71fafaf 100644
--- a/packages/web/src/components/TimePicker.vue
+++ b/packages/web/src/components/TimePicker.vue
@@ -7,8 +7,9 @@
     start-placeholder="开始时间"
     end-placeholder="结束时间"
     unlink-panels
-    :teleported="false"
     :shortcuts="type.includes('range') && shortcuts"
+    :teleported="false" 
+    :append-to-body="false"
     class="date-picker"
     :disabled-date="disabledDate"
     @visible-change="onVisibleChange"
@@ -19,7 +20,7 @@
 <script setup lang="jsx">
 import { computed, defineProps, defineEmits, ref } from 'vue';
 
-// Props 和 Emits
+// props 和 emits
 const props = defineProps({
   modelValue: {},
   type: { type: String, default: 'date' },
@@ -27,16 +28,16 @@ const props = defineProps({
 });
 const emits = defineEmits(['update:modelValue']);
 
-// picker 引用 和 当前面板是否显示
+// 本组件自己的 ref 和显示状态
 const pickerRef = ref();
 const visible = ref(false);
 
-// 显示状态变化监听
+// 监听是否显示
 const onVisibleChange = (val) => {
   visible.value = val;
 };
 
-// 双向绑定逻辑
+// 双向绑定
 const value = computed({
   get() {
     return props.modelValue;
@@ -46,7 +47,7 @@ const value = computed({
   },
 });
 
-// 快捷时间生成函数
+// 快捷选项生成器
 function genShortcut(text, hoursAgo) {
   return {
     text,
@@ -54,7 +55,7 @@ function genShortcut(text, hoursAgo) {
       const end = new Date();
       const start = new Date(end.getTime() - hoursAgo * 3600 * 1000);
 
-      // 只关闭当前打开的面板，避免影响其他 time-picker
+      // 只关闭当前面板
       setTimeout(() => {
         if (visible.value) {
           pickerRef.value?.handleClose?.();
@@ -66,7 +67,7 @@ function genShortcut(text, hoursAgo) {
   };
 }
 
-// 快捷选项列表
+// 快捷选项
 const shortcuts = [
   genShortcut('前 1 小时', 1),
   genShortcut('前 6 小时', 6),
@@ -77,7 +78,7 @@ const shortcuts = [
   genShortcut('前 1 周', 168),
 ];
 
-// 禁用未来时间
+// 禁止选择未来时间
 const disabledDate = (time) => {
   return time.getTime() >= Date.now();
 };