feat(front): enhance chart tooltip functionality with custom value formatting and update date format

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)
                                 },
                             })
                         "

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>

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>