feat: 优化日期跳转体验

Author: orilights

src/App.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { start } from 'node:repl'
 import LoadingIndicator from '@/components/common/LoadingIndicator.vue'
 import Switch from '@/components/common/Switch.vue'
 import Header from '@/components/Header.vue'
@@ -136,6 +137,21 @@ const newsDataSorted = computed(() => {
   return data as NewsData[]
 })
 
+const dateRange = computed(() => {
+  const range = { min: '', max: '' }
+  if (newsDataSorted.value.length) {
+    if (sortBy.value === 'asc') {
+      range.min = formatTime(newsDataSorted.value[0].startTime, true)
+      range.max = formatTime(newsDataSorted.value[newsDataSorted.value.length - 1].startTime, true)
+    }
+    else {
+      range.min = formatTime(newsDataSorted.value[newsDataSorted.value.length - 1].startTime, true)
+      range.max = formatTime(newsDataSorted.value[0].startTime, true)
+    }
+  }
+  return range
+})
+
 onMounted(() => {
   document.addEventListener('click', (event) => {
     if (showSetting.value) {
@@ -350,6 +366,7 @@ function handleScrollByDate() {
           <div class="my-2 flex items-center">
             <input
               v-model="jumpDate"
+              v-bind="dateRange"
               type="date"
               class="rounded-md border border-black/20 bg-transparent px-1 transition-colors hover:border-blue-500"
             >

src/components/NewsList.vue

@@ -4,7 +4,6 @@ import { ITEM_GAP, SHADOW_ITEM, VISIT_PERSIST_KEY } from '@/constants'
 import { state } from '@/state'
 import { limitSetSize } from '@/utils'
 import { useElementBounding, useElementSize, useThrottle } from '@vueuse/core'
-import { useToast } from 'vue-toastification'
 
 const props = defineProps<{
   config: NewsItemConfig
@@ -50,9 +49,15 @@ function scrollByDate(date: string) {
   let target
   if (props.sortBy === 'desc') {
     target = newsList.value.find(news => new Date(news.startTime) <= new Date(`${date} 23:59:59`))
+    if (!target) {
+      target = newsList.value[newsList.value.length - 1]
+    }
   }
   else {
     target = newsList.value.find(news => new Date(news.startTime) >= new Date(`${date} 00:00:00`))
+    if (!target) {
+      target = newsList.value[newsList.value.length - 1]
+    }
   }
   if (target) {
     const containerTop = containerRef.value?.offsetTop || 0

src/utils/time.ts

@@ -1,10 +1,15 @@
-export function formatTime(timestamp: number) {
-  if (timestamp.toString().length === 10)
-    timestamp *= 1000
-  const date = new Date(timestamp)
+export function formatTime(time: number | string, dateOnly: boolean = false) {
+  if (typeof time === 'number') {
+    if (time.toString().length === 10)
+      time *= 1000
+  }
+  const date = new Date(time)
   const year = date.getFullYear()
-  const month = date.getMonth() + 1
-  const day = date.getDate()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  if (dateOnly) {
+    return `${year}-${month}-${day}`
+  }
   const hour = String(date.getHours()).padStart(2, '0')
   const minute = String(date.getMinutes()).padStart(2, '0')
   const second = String(date.getSeconds()).padStart(2, '0')