feat(web): update TopBar component

- TopBar.vue: update top bar component

web/src/components/layout/TopBar.vue

@@ -266,17 +266,10 @@ const calendarOpen = ref(false)
 const draftStart = ref(props.customRange.start)
 const draftEnd = ref(props.customRange.end)
 
-const fallbackRangeLabels = ['今日', '本周', '本月']
-const dateLabels = {
-  '今日': '2024-07-12',
-  '本周': '2024-07-06 ~ 2024-07-12',
-  '本月': '2024-07'
-}
-
 const rangeOptions = computed(() =>
   props.ranges.map((range, index) => ({
     value: range,
-    label: fallbackRangeLabels[index] ?? String(range)
+    label: String(range)
   }))
 )
 
@@ -287,7 +280,7 @@ const activeOption = computed(() =>
 const isCustomRange = computed(() => props.activeRange === 'custom')
 const activeDateLabel = computed(() => {
   if (isCustomRange.value) return formatRangeLabel(props.customRange.start, props.customRange.end)
-  return dateLabels[activeOption.value?.label] ?? '2024-07-06 ~ 2024-07-12'
+  return buildPresetRangeLabel(activeOption.value?.label)
 })
 
 const canApplyCustomRange = computed(() =>
@@ -320,6 +313,43 @@ function formatRangeLabel(start, end) {
   if (start === end) return start
   return `${start} ~ ${end}`
 }
+
+function toDateLabel(date) {
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}
+
+function buildPresetRangeLabel(label) {
+  const now = new Date()
+  const today = toDateLabel(now)
+
+  if (label === '今日') {
+    return today
+  }
+
+  if (label === '近10日') {
+    const start = new Date(now)
+    start.setHours(0, 0, 0, 0)
+    start.setDate(start.getDate() - 9)
+    return `${toDateLabel(start)} ~ ${today}`
+  }
+
+  if (label === '本周') {
+    const start = new Date(now)
+    const day = start.getDay() || 7
+    start.setHours(0, 0, 0, 0)
+    start.setDate(start.getDate() - day + 1)
+    return `${toDateLabel(start)} ~ ${today}`
+  }
+
+  if (label === '本月') {
+    return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
+  }
+
+  return today
+}
 </script>
 
 <style scoped>