feat(web): update TopBar component

- TopBar.vue: update top bar component

web/src/components/layout/TopBar.vue

@@ -266,29 +266,22 @@ const calendarOpen = ref(false)
 const draftStart = ref(props.customRange.start)
 const draftEnd = ref(props.customRange.end)
 
-const fallbackRangeLabels = ['今日', '本周', '本月']
+const rangeOptions = computed(() =>
-const dateLabels = {
+  props.ranges.map((range, index) => ({
-  '今日': '2024-07-12',
+    value: range,
-  '本周': '2024-07-06 ~ 2024-07-12',
+    label: String(range)
-  '本月': '2024-07'
+  }))
-}
+)
-
-const rangeOptions = computed(() =>
-  props.ranges.map((range, index) => ({
-    value: range,
-    label: fallbackRangeLabels[index] ?? String(range)
-  }))
-)
 
 const activeOption = computed(() =>
   rangeOptions.value.find((option) => option.value === props.activeRange) ?? rangeOptions.value[0]
 )
 
 const isCustomRange = computed(() => props.activeRange === 'custom')
-const activeDateLabel = computed(() => {
+const activeDateLabel = computed(() => {
-  if (isCustomRange.value) return formatRangeLabel(props.customRange.start, props.customRange.end)
+  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(() =>
   Boolean(draftStart.value && draftEnd.value && draftStart.value <= draftEnd.value)
@@ -315,12 +308,49 @@ function applyCustomRange() {
   calendarOpen.value = false
 }
 
-function formatRangeLabel(start, end) {
+function formatRangeLabel(start, end) {
-  if (!start || !end) return '选择时间段'
+  if (!start || !end) return '选择时间段'
-  if (start === end) return start
+  if (start === end) return start
-  return `${start} ~ ${end}`
+  return `${start} ~ ${end}`
-}
+}
-</script>
+
+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>
 .topbar {