修改日期组件多个弹框

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>

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();
 };