refactor(charts): consolidate truncateRankName across all ranking charts

Replace per-component truncateName copies with the shared truncateRankName
from rankingChartLayout, and fix its ellipsis character to '…' (U+2026).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/analysis/ranking/charts/EChartConsecutiveRank.vue

@@ -7,7 +7,7 @@ import { computed } from 'vue'
 import type { EChartsOption, BarSeriesOption } from 'echarts'
 import { EChart } from '@/components/charts'
 import { SectionCard, ScrollableChart } from '@/components/UI'
-import { useRankingLayout } from '@/utils/rankingChartLayout'
+import { truncateRankName, useRankingLayout } from '@/utils/rankingChartLayout'
 
 interface ConsecutiveItem {
   memberId: number
@@ -74,18 +74,12 @@ const barColorInactive = {
   ],
 }
 
-// 截断名字
-function truncateName(name: string, maxLength = 8): string {
-  if (name.length <= maxLength) return name
-  return name.slice(0, maxLength) + '…'
-}
-
 // 生成 ECharts 配置
 const option = computed<EChartsOption>(() => {
   if (displayData.value.length === 0) return {}
 
   const reversedData = [...displayData.value].reverse()
-  const names = reversedData.map((item) => truncateName(item.name, rankingLayout.value.labelMaxLength))
+  const names = reversedData.map((item) => truncateRankName(item.name, rankingLayout.value.labelMaxLength))
   const maxValue = Math.max(...displayData.value.map((item) => item.maxConsecutiveDays), 1)
 
   return {

src/components/analysis/ranking/charts/EChartDivingRank.vue

@@ -8,7 +8,7 @@ import type { EChartsOption, BarSeriesOption } from 'echarts'
 import { EChart } from '@/components/charts'
 import { SectionCard, Tabs, TopNSelect } from '@/components/UI'
 import { formatFullDateTime } from '@/utils/dateFormat'
-import { useRankingLayout } from '@/utils/rankingChartLayout'
+import { truncateRankName, useRankingLayout } from '@/utils/rankingChartLayout'
 
 interface DivingItem {
   memberId: number
@@ -86,12 +86,6 @@ const barColor = {
   ],
 }
 
-// 截断名字
-function truncateName(name: string, maxLength = 8): string {
-  if (name.length <= maxLength) return name
-  return name.slice(0, maxLength) + '…'
-}
-
 // 格式化天数显示
 function formatDays(days: number): string {
   if (days === 0) return '今天'
@@ -104,7 +98,7 @@ const option = computed<EChartsOption>(() => {
   if (displayData.value.length === 0) return {}
 
   const reversedData = [...displayData.value].reverse()
-  const names = reversedData.map((item) => truncateName(item.name, rankingLayout.value.labelMaxLength))
+  const names = reversedData.map((item) => truncateRankName(item.name, rankingLayout.value.labelMaxLength))
   const maxDays = Math.max(...displayData.value.map((item) => item.daysSinceLastMessage), 1)
 
   const dataWithStyle = reversedData.map((item) => ({

src/components/analysis/ranking/charts/EChartNightOwlRank.vue

@@ -7,7 +7,7 @@ import { computed } from 'vue'
 import type { EChartsOption, BarSeriesOption } from 'echarts'
 import { EChart } from '@/components/charts'
 import { SectionCard, ScrollableChart } from '@/components/UI'
-import { useRankingLayout } from '@/utils/rankingChartLayout'
+import { truncateRankName, useRankingLayout } from '@/utils/rankingChartLayout'
 
 interface NightOwlItem {
   memberId: number
@@ -66,18 +66,12 @@ const colors = {
   h3to4: '#ef4444', // red-500 (3-4点)
 }
 
-// 截断名字
-function truncateName(name: string, maxLength = 8): string {
-  if (name.length <= maxLength) return name
-  return name.slice(0, maxLength) + '…'
-}
-
 // 生成 ECharts 配置
 const option = computed<EChartsOption>(() => {
   if (displayData.value.length === 0) return {}
 
   const reversedData = [...displayData.value].reverse()
-  const names = reversedData.map((item) => truncateName(item.name, rankingLayout.value.labelMaxLength))
+  const names = reversedData.map((item) => truncateRankName(item.name, rankingLayout.value.labelMaxLength))
   const maxValue = Math.max(...displayData.value.map((item) => item.totalNightMessages), 1)
 
   return {

src/components/analysis/ranking/charts/EChartStreakRank.vue

@@ -7,7 +7,7 @@ import { computed } from 'vue'
 import type { EChartsOption, BarSeriesOption } from 'echarts'
 import { EChart } from '@/components/charts'
 import { SectionCard, ScrollableChart } from '@/components/UI'
-import { useRankingLayout } from '@/utils/rankingChartLayout'
+import { truncateRankName, useRankingLayout } from '@/utils/rankingChartLayout'
 
 interface StreakItem {
   memberId: number
@@ -88,12 +88,6 @@ const activeColor = {
   ],
 }
 
-// 截断名字
-function truncateName(name: string, maxLength = 8): string {
-  if (name.length <= maxLength) return name
-  return name.slice(0, maxLength) + '…'
-}
-
 // 格式化日期区间
 function formatDateRange(start: string, end: string): string {
   return `${start} ~ ${end}`
@@ -107,7 +101,7 @@ function getValue(item: StreakItem): number {
 // 生成 ECharts 配置
 const option = computed<EChartsOption>(() => {
   const reversedData = [...displayData.value].reverse()
-  const names = reversedData.map((item) => truncateName(item.name, rankingLayout.value.labelMaxLength))
+  const names = reversedData.map((item) => truncateRankName(item.name, rankingLayout.value.labelMaxLength))
   const values = reversedData.map((item) => getValue(item))
   const maxValue = Math.max(...values, 1)
 

src/components/analysis/ranking/charts/EChartTimeRank.vue

@@ -7,7 +7,7 @@ import { computed } from 'vue'
 import type { EChartsOption, BarSeriesOption } from 'echarts'
 import { EChart } from '@/components/charts'
 import { SectionCard, ScrollableChart } from '@/components/UI'
-import { useRankingLayout } from '@/utils/rankingChartLayout'
+import { truncateRankName, useRankingLayout } from '@/utils/rankingChartLayout'
 
 interface TimeRankItem {
   memberId: number
@@ -62,12 +62,6 @@ const barColor = {
   ],
 }
 
-// 截断名字
-function truncateName(name: string, maxLength = 8): string {
-  if (name.length <= maxLength) return name
-  return name.slice(0, maxLength) + '…'
-}
-
 // 格式化时间
 function formatTime(ms: number): string {
   return (ms / 1000).toFixed(2) + 's'
@@ -78,7 +72,7 @@ const option = computed<EChartsOption>(() => {
   if (displayData.value.length === 0) return {}
 
   const reversedData = [...displayData.value].reverse()
-  const names = reversedData.map((item) => truncateName(item.name, rankingLayout.value.labelMaxLength))
+  const names = reversedData.map((item) => truncateRankName(item.name, rankingLayout.value.labelMaxLength))
 
   // 计算相对值：第一名时间最短，进度条最长（100%）
   // 使用反比例：第一名时间 / 当前时间 * 100

src/utils/rankingChartLayout.ts

@@ -35,5 +35,5 @@ export function useRankingLayout(): ComputedRef<RankingLayoutConfig> {
 
 export function truncateRankName(name: string, maxLength: number): string {
   if (name.length <= maxLength) return name
-  return `${name.slice(0, maxLength)}...`
+  return `${name.slice(0, maxLength)}…`
 }