perf(admin): 调小日期滚动条的滚动跨度,避免一次飞太远
构建并部署 BYW VoiceHub / Preflight 语法与构建检查 (push) Successful in 2m32s
构建并部署 BYW VoiceHub / 部署到生产服务器 (push) Canceled after 0s
构建并部署 BYW VoiceHub / 构建并推送容器镜像 (push) Canceled after 6m43s

- 滚轮/左右箭头: 单次滚动量 200px -> 120px (约2~3个日期卡片)
- 横向条初始长度: 单选 31天(-15~+15)->19天(-8~+10) / 多选 46天(0~45)->29天(0~28)
- 无限扩展步长: 碰到边缘一次+7天 -> +3天(多选额外做了 Math.max(0,start) 防越界)
- 回到今日重置范围 / 快捷选期外扩范围 一并调小
This commit is contained in:
2026-09-13 09:19:48 +08:00
parent 71bbd88bb8
commit ec39f6ab56
2 changed files with 16 additions and 16 deletions
+9 -9
View File
@@ -169,7 +169,7 @@ const emit = defineEmits(['update:modelValue', 'change'])
const dateSelector = ref(null) const dateSelector = ref(null)
const isFirstDateVisible = ref(false) const isFirstDateVisible = ref(false)
const isLastDateVisible = ref(false) const isLastDateVisible = ref(false)
const dateRange = ref({ start: -15, end: 15 }) const dateRange = ref({ start: -8, end: 10 })
const showCalendar = ref(false) const showCalendar = ref(false)
const pad = (n) => n.toString().padStart(2, '0') const pad = (n) => n.toString().padStart(2, '0')
@@ -248,7 +248,7 @@ const scrollToDateElement = (behavior = 'smooth') => {
const handleWheel = (event) => { const handleWheel = (event) => {
event.preventDefault() event.preventDefault()
if (!dateSelector.value) return if (!dateSelector.value) return
const scrollAmount = 200 const scrollAmount = 120
const currentScroll = dateSelector.value.scrollLeft const currentScroll = dateSelector.value.scrollLeft
dateSelector.value.scrollTo({ dateSelector.value.scrollTo({
left: event.deltaY > 0 ? currentScroll + scrollAmount : currentScroll - scrollAmount, left: event.deltaY > 0 ? currentScroll + scrollAmount : currentScroll - scrollAmount,
@@ -258,7 +258,7 @@ const handleWheel = (event) => {
const scrollDates = (direction) => { const scrollDates = (direction) => {
if (!dateSelector.value) return if (!dateSelector.value) return
const scrollAmount = 200 const scrollAmount = 120
const currentScroll = dateSelector.value.scrollLeft const currentScroll = dateSelector.value.scrollLeft
dateSelector.value.scrollTo({ dateSelector.value.scrollTo({
left: direction === 'right' ? currentScroll + scrollAmount : currentScroll - scrollAmount, left: direction === 'right' ? currentScroll + scrollAmount : currentScroll - scrollAmount,
@@ -271,14 +271,14 @@ const handleScroll = () => {
const { scrollLeft, scrollWidth, clientWidth } = dateSelector.value const { scrollLeft, scrollWidth, clientWidth } = dateSelector.value
if (scrollLeft < 50) { if (scrollLeft < 50) {
const oldScrollWidth = scrollWidth const oldScrollWidth = scrollWidth
dateRange.value.start -= 7 dateRange.value.start -= 3
nextTick(() => { nextTick(() => {
const newScrollWidth = dateSelector.value.scrollWidth const newScrollWidth = dateSelector.value.scrollWidth
dateSelector.value.scrollLeft += newScrollWidth - oldScrollWidth dateSelector.value.scrollLeft += newScrollWidth - oldScrollWidth
}) })
} }
if (scrollWidth - scrollLeft - clientWidth < 50) { if (scrollWidth - scrollLeft - clientWidth < 50) {
dateRange.value.end += 7 dateRange.value.end += 3
} }
} }
@@ -286,8 +286,8 @@ const scrollToToday = () => {
const todayStr = formatDateStr(today) const todayStr = formatDateStr(today)
if (props.modelValue !== todayStr) selectDate(todayStr) if (props.modelValue !== todayStr) selectDate(todayStr)
if (dateRange.value.start > 0 || dateRange.value.end < 0) { if (dateRange.value.start > 0 || dateRange.value.end < 0) {
dateRange.value.start = -15 dateRange.value.start = -8
dateRange.value.end = 15 dateRange.value.end = 10
} }
nextTick(() => scrollToDateElement('smooth')) nextTick(() => scrollToDateElement('smooth'))
} }
@@ -312,8 +312,8 @@ const handleQuickSelect = (dateValue) => {
const d = new Date(dateValue) const d = new Date(dateValue)
const diffDays = Math.round((d - today) / (1000 * 60 * 60 * 24)) const diffDays = Math.round((d - today) / (1000 * 60 * 60 * 24))
if (diffDays < dateRange.value.start || diffDays > dateRange.value.end) { if (diffDays < dateRange.value.start || diffDays > dateRange.value.end) {
dateRange.value.start = diffDays - 5 dateRange.value.start = diffDays - 3
dateRange.value.end = diffDays + 10 dateRange.value.end = diffDays + 5
} }
nextTick(() => scrollToDateElement('smooth')) nextTick(() => scrollToDateElement('smooth'))
}) })
@@ -191,7 +191,7 @@ const emit = defineEmits(['update:modelValue', 'change'])
const dateSelector = ref(null) const dateSelector = ref(null)
const isFirstDateVisible = ref(false) const isFirstDateVisible = ref(false)
const isLastDateVisible = ref(false) const isLastDateVisible = ref(false)
const dateRange = ref({ start: 0, end: 45 }) const dateRange = ref({ start: 0, end: 28 })
const showCalendar = ref(false) const showCalendar = ref(false)
const lastClickedDate = ref('') const lastClickedDate = ref('')
@@ -343,7 +343,7 @@ const applyBatchAction = (action) => {
const handleWheel = (event) => { const handleWheel = (event) => {
event.preventDefault() event.preventDefault()
if (!dateSelector.value) return if (!dateSelector.value) return
const scrollAmount = 200 const scrollAmount = 120
const currentScroll = dateSelector.value.scrollLeft const currentScroll = dateSelector.value.scrollLeft
dateSelector.value.scrollTo({ dateSelector.value.scrollTo({
left: event.deltaY > 0 ? currentScroll + scrollAmount : currentScroll - scrollAmount, left: event.deltaY > 0 ? currentScroll + scrollAmount : currentScroll - scrollAmount,
@@ -353,7 +353,7 @@ const handleWheel = (event) => {
const scrollDates = (direction) => { const scrollDates = (direction) => {
if (!dateSelector.value) return if (!dateSelector.value) return
const scrollAmount = 200 const scrollAmount = 120
const currentScroll = dateSelector.value.scrollLeft const currentScroll = dateSelector.value.scrollLeft
dateSelector.value.scrollTo({ dateSelector.value.scrollTo({
left: direction === 'right' ? currentScroll + scrollAmount : currentScroll - scrollAmount, left: direction === 'right' ? currentScroll + scrollAmount : currentScroll - scrollAmount,
@@ -364,23 +364,23 @@ const scrollDates = (direction) => {
const handleScroll = () => { const handleScroll = () => {
if (!dateSelector.value) return if (!dateSelector.value) return
const { scrollLeft, scrollWidth, clientWidth } = dateSelector.value const { scrollLeft, scrollWidth, clientWidth } = dateSelector.value
if (scrollLeft < 50) { if (scrollLeft < 50 && dateRange.value.start > 0) {
const oldScrollWidth = scrollWidth const oldScrollWidth = scrollWidth
dateRange.value.start -= 7 dateRange.value.start = Math.max(0, dateRange.value.start - 3)
nextTick(() => { nextTick(() => {
const newScrollWidth = dateSelector.value.scrollWidth const newScrollWidth = dateSelector.value.scrollWidth
dateSelector.value.scrollLeft += newScrollWidth - oldScrollWidth dateSelector.value.scrollLeft += newScrollWidth - oldScrollWidth
}) })
} }
if (scrollWidth - scrollLeft - clientWidth < 50) { if (scrollWidth - scrollLeft - clientWidth < 50) {
dateRange.value.end += 7 dateRange.value.end += 3
} }
} }
const scrollToToday = () => { const scrollToToday = () => {
if (dateRange.value.start > 0 || dateRange.value.end < 0) { if (dateRange.value.start > 0 || dateRange.value.end < 0) {
dateRange.value.start = 0 dateRange.value.start = 0
dateRange.value.end = 30 dateRange.value.end = 20
} }
nextTick(() => { nextTick(() => {
if (!dateSelector.value) return if (!dateSelector.value) return