From e37402ff635a0229972951e922e797d87686124f Mon Sep 17 00:00:00 2001
From: keven1024 <keven@fudaoyuan.icu>
Date: Sat, 11 Apr 2026 12:16:47 +0800
Subject: [PATCH] feat(front): enhance chart tooltip functionality with custom
 value formatting and update date format

---
 front/components/About/AboutChartView.vue         | 10 +++++++++-
 front/components/Tiptap/Index.vue                 |  5 ++++-
 front/components/ui/chart/ChartTooltipContent.vue |  3 ++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/front/components/About/AboutChartView.vue b/front/components/About/AboutChartView.vue
index e3c1157..fdc9471 100644
--- a/front/components/About/AboutChartView.vue
+++ b/front/components/About/AboutChartView.vue
@@ -3,6 +3,7 @@ import { cx } from 'class-variance-authority'
 import { useQuery } from '@tanstack/vue-query'
 import { Skeleton } from '@/components/ui/skeleton'
 import dayjs from 'dayjs'
+import { filesize } from 'filesize'
 import { times } from 'lodash-es'
 import type { ChartConfig } from '@/components/ui/chart'
 import { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
@@ -209,8 +210,15 @@ const currentChartData = computed((): AreaChartConfig => {
                         :key="currentChartTab"
                         :template="
                             componentToString(currentChartData.config, ChartTooltipContent, {
+                                class: 'w-[14rem]',
                                 labelFormatter: (d) => {
-                                    return dayjs(d).format('MMM D')
+                                    return dayjs(d).format('MM-DD')
+                                },
+                                valueFormatter: (value, key) => {
+                                    if (key === 'file_size' && typeof value === 'number') {
+                                        return filesize(value)
+                                    }
+                                    return String(value)
                                 },
                             })
                         "
diff --git a/front/components/Tiptap/Index.vue b/front/components/Tiptap/Index.vue
index b979245..b99107c 100644
--- a/front/components/Tiptap/Index.vue
+++ b/front/components/Tiptap/Index.vue
@@ -60,7 +60,10 @@ onUnmounted(() => {
     >
     </editor-content>
     <!-- <BubbleMenuView :editor="editor as any" /> -->
-    <div v-if="modelValue?.length && modelValue?.length > 0" class="flex justify-end px-1 pt-1 text-xs text-gray-400 select-none">
+    <div
+        v-if="modelValue?.length && modelValue?.length > 0"
+        class="absolute bottom-2 right-3 flex justify-end px-2 py-1 text-xs text-gray-400 select-none bg-white rounded-md"
+    >
         {{ `${modelValue?.length ?? 0} 长度  ·  ${countWords(modelValue ?? '')} 字符` }}
     </div>
 </template>
diff --git a/front/components/ui/chart/ChartTooltipContent.vue b/front/components/ui/chart/ChartTooltipContent.vue
index 38082fe..8c0d69d 100644
--- a/front/components/ui/chart/ChartTooltipContent.vue
+++ b/front/components/ui/chart/ChartTooltipContent.vue
@@ -12,6 +12,7 @@ const props = withDefaults(
         nameKey?: string
         labelKey?: string
         labelFormatter?: (d: number | Date) => string
+        valueFormatter?: (value: unknown, key: string) => string
         payload?: Record<string, any>
         config?: ChartConfig
         class?: HTMLAttributes['class']
@@ -99,7 +100,7 @@ const tooltipLabel = computed(() => {
                             </span>
                         </div>
                         <span v-if="value" class="text-foreground font-mono font-medium tabular-nums">
-                            {{ value.toLocaleString() }}
+                            {{ props.valueFormatter ? props.valueFormatter(value, key) : value.toLocaleString() }}
                         </span>
                     </div>
                 </div>