From 2218e033763b3c1e51b81666a8bfdede5321a71f 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 17:38:15 +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

---
 packages/web/src/components/TimePicker.vue | 28 +++++++++++++++-------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/web/src/components/TimePicker.vue b/packages/web/src/components/TimePicker.vue
index f1e82de..9289cc0 100644
--- a/packages/web/src/components/TimePicker.vue
+++ b/packages/web/src/components/TimePicker.vue
@@ -10,15 +10,15 @@
     :shortcuts="type.includes('range') && shortcuts"
     class="date-picker"
     :disabled-date="disabledDate"
+    @visible-change="onVisibleChange"
     v-bind="$attrs"
   />
 </template>
 
 <script setup lang="jsx">
 import { computed, defineProps, defineEmits, ref } from 'vue';
-import { ElDatePicker } from 'element-plus';
 
-// props & emits
+// Props 和 Emits
 const props = defineProps({
   modelValue: {},
   type: { type: String, default: 'date' },
@@ -26,10 +26,16 @@ const props = defineProps({
 });
 const emits = defineEmits(['update:modelValue']);
 
-// picker ref
+// picker 引用 和 当前面板是否显示
 const pickerRef = ref();
+const visible = ref(false);
 
-// 双向绑定
+// 显示状态变化监听
+const onVisibleChange = (val) => {
+  visible.value = val;
+};
+
+// 双向绑定逻辑
 const value = computed({
   get() {
     return props.modelValue;
@@ -39,17 +45,21 @@ const value = computed({
   },
 });
 
-// 生成快捷选项的封装函数
+// 快捷时间生成函数
 function genShortcut(text, hoursAgo) {
   return {
     text,
     value: () => {
       const end = new Date();
       const start = new Date(end.getTime() - hoursAgo * 3600 * 1000);
-      // 延迟关闭弹窗，确保值更新后再关闭
+
+      // 只关闭当前打开的面板，避免影响其他 time-picker
       setTimeout(() => {
-        pickerRef.value?.handleClose?.();
+        if (visible.value) {
+          pickerRef.value?.handleClose?.();
+        }
       }, 0);
+
       return [start, end];
     },
   };
@@ -66,13 +76,13 @@ const shortcuts = [
   genShortcut('前 1 周', 168),
 ];
 
-// 禁止选择未来时间
+// 禁用未来时间
 const disabledDate = (time) => {
   return time.getTime() >= Date.now();
 };
 </script>
 
-<style>
+<style scoped>
 .date-picker {
   max-width: 450px;
 }