From 27d718bf01843e4c9e61b5fd0b39ebe9f1c02685 Mon Sep 17 00:00:00 2001
From: HenryDu8133 <813367384@qq.com>
Date: Sun, 13 Sep 2026 10:29:12 +0800
Subject: [PATCH] =?UTF-8?q?fix(admin):=20=E6=97=A5=E6=9C=9F=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E8=BF=9B=E5=85=A5=E7=95=8C=E9=9D=A2=E5=90=8E=E5=BA=94?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E5=88=B0=E5=BD=93=E5=89=8D=E6=97=A5=E6=9C=9F?=
 =?UTF-8?q?/=E9=80=89=E4=B8=AD=E9=A1=B9=E5=B1=85=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

AdminDatePicker:
- scrollToDateElement 在 props.modelValue 为空时回退到今天
- onMounted: 空值时走 smooth(有滚动感)，有值走 auto(无声定位)，不再直接 return 停在最左

AdminMultiDatePicker:
- 新增 scrollToDateElement 通用 + watch(modelValue)
- onMounted 分两支: 有选中值时跳到首个 >= 今天的选中项 否则跳今天
- 目标超出 dateRange 时先扩 range 再滚 (避免定位不到元素)
---
 app/components/Admin/AdminDatePicker.vue      | 12 +++---
 app/components/Admin/AdminMultiDatePicker.vue | 42 +++++++++++++++----
 2 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/app/components/Admin/AdminDatePicker.vue b/app/components/Admin/AdminDatePicker.vue
index 30745f5..fb513ad 100644
--- a/app/components/Admin/AdminDatePicker.vue
+++ b/app/components/Admin/AdminDatePicker.vue
@@ -239,10 +239,12 @@ const selectDate = (dateValue) => {
   emit('change', dateValue)
 }
 
-const scrollToDateElement = (behavior = 'smooth') => {
-  if (!dateSelector.value || !props.modelValue) return
-  const el = dateSelector.value.querySelector(`[data-date="${props.modelValue}"]`)
-  if (el) el.scrollIntoView({ behavior, block: 'nearest', inline: 'center' })
+const scrollToDateElement = (behavior = 'smooth', targetDate = props.modelValue) => {
+  if (!dateSelector.value) return
+  const dateKey = targetDate || formatDateStr(today)
+  const el = dateSelector.value.querySelector(`[data-date="${dateKey}"]`)
+  if (!el) return
+  el.scrollIntoView({ behavior, block: 'nearest', inline: 'center' })
 }
 
 const handleWheel = (event) => {
@@ -324,7 +326,7 @@ watch(() => props.modelValue, () => {
 })
 
 onMounted(() => {
-  nextTick(() => scrollToDateElement('auto'))
+  nextTick(() => scrollToDateElement(props.modelValue ? 'auto' : 'smooth'))
 })
 </script>
 
diff --git a/app/components/Admin/AdminMultiDatePicker.vue b/app/components/Admin/AdminMultiDatePicker.vue
index db9553b..dfe6b9f 100644
--- a/app/components/Admin/AdminMultiDatePicker.vue
+++ b/app/components/Admin/AdminMultiDatePicker.vue
@@ -377,17 +377,18 @@ const handleScroll = () => {
   }
 }
 
+const scrollToDateElement = (targetDate, behavior = 'smooth') => {
+  if (!dateSelector.value || !targetDate) return
+  const el = dateSelector.value.querySelector(`[data-date="${targetDate}"]`)
+  if (el) el.scrollIntoView({ behavior, block: 'nearest', inline: 'center' })
+}
+
 const scrollToToday = () => {
   if (dateRange.value.start > 0 || dateRange.value.end < 0) {
     dateRange.value.start = -3
     dateRange.value.end = 25
   }
-  nextTick(() => {
-    if (!dateSelector.value) return
-    const todayStr = formatDateStr(today)
-    const el = dateSelector.value.querySelector(`[data-date="${todayStr}"]`)
-    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
-  })
+  nextTick(() => scrollToDateElement(formatDateStr(today), 'smooth'))
 }
 
 const toggleCalendar = () => {
@@ -399,8 +400,35 @@ const goToday = () => {
   calendarMonth.value = today.getMonth()
 }
 
+watch(() => props.modelValue, (newVal) => {
+  if (!newVal || !newVal.length) return
+  nextTick(() => {
+    // 跳到第一个 >= 今天的日期，否则跳第一个选中项
+    const todayStr = formatDateStr(today)
+    const target = newVal.find(d => d >= todayStr) || newVal[0]
+    // 如果目标超出当前范围，扩展 range
+    const diff0 = Math.round((new Date(target) - new Date(todayStr)) / 86400000)
+    if (diff0 < dateRange.value.start || diff0 > dateRange.value.end) {
+      dateRange.value.start = Math.min(dateRange.value.start, diff0 - 3)
+      dateRange.value.end = Math.max(dateRange.value.end, diff0 + 5)
+    }
+    nextTick(() => scrollToDateElement(target, 'smooth'))
+  })
+})
+
 onMounted(() => {
-  nextTick(() => scrollToToday())
+  if (props.modelValue && props.modelValue.length) {
+    const todayStr = formatDateStr(today)
+    const target = props.modelValue.find(d => d >= todayStr) || props.modelValue[0]
+    const diff0 = Math.round((new Date(target) - new Date(todayStr)) / 86400000)
+    if (diff0 < dateRange.value.start || diff0 > dateRange.value.end) {
+      dateRange.value.start = Math.min(dateRange.value.start, diff0 - 3)
+      dateRange.value.end = Math.max(dateRange.value.end, diff0 + 5)
+    }
+    nextTick(() => nextTick(() => scrollToDateElement(target, 'smooth')))
+  } else {
+    nextTick(() => scrollToToday())
+  }
 })
 </script>