From 816c1eb573e32be40d93e86c94bb331def7234a1 Mon Sep 17 00:00:00 2001 From: digua Date: Mon, 15 Jun 2026 19:22:37 +0800 Subject: [PATCH] refactor(charts): consolidate truncateRankName across all ranking charts MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../analysis/ranking/charts/EChartConsecutiveRank.vue | 10 ++-------- .../analysis/ranking/charts/EChartDivingRank.vue | 10 ++-------- .../analysis/ranking/charts/EChartNightOwlRank.vue | 10 ++-------- .../analysis/ranking/charts/EChartStreakRank.vue | 10 ++-------- .../analysis/ranking/charts/EChartTimeRank.vue | 10 ++-------- src/utils/rankingChartLayout.ts | 2 +- 6 files changed, 11 insertions(+), 41 deletions(-) diff --git a/src/components/analysis/ranking/charts/EChartConsecutiveRank.vue b/src/components/analysis/ranking/charts/EChartConsecutiveRank.vue index 1f5c153e..3c19ecc1 100644 --- a/src/components/analysis/ranking/charts/EChartConsecutiveRank.vue +++ b/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(() => { 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 { diff --git a/src/components/analysis/ranking/charts/EChartDivingRank.vue b/src/components/analysis/ranking/charts/EChartDivingRank.vue index b19e01a4..7c58b9e9 100644 --- a/src/components/analysis/ranking/charts/EChartDivingRank.vue +++ b/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(() => { 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) => ({ diff --git a/src/components/analysis/ranking/charts/EChartNightOwlRank.vue b/src/components/analysis/ranking/charts/EChartNightOwlRank.vue index f575ca36..437584b0 100644 --- a/src/components/analysis/ranking/charts/EChartNightOwlRank.vue +++ b/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(() => { 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 { diff --git a/src/components/analysis/ranking/charts/EChartStreakRank.vue b/src/components/analysis/ranking/charts/EChartStreakRank.vue index cdecffc4..6e964be3 100644 --- a/src/components/analysis/ranking/charts/EChartStreakRank.vue +++ b/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(() => { 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) diff --git a/src/components/analysis/ranking/charts/EChartTimeRank.vue b/src/components/analysis/ranking/charts/EChartTimeRank.vue index 7b25828d..db12603b 100644 --- a/src/components/analysis/ranking/charts/EChartTimeRank.vue +++ b/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(() => { 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 diff --git a/src/utils/rankingChartLayout.ts b/src/utils/rankingChartLayout.ts index 0b351fa6..c9647891 100644 --- a/src/utils/rankingChartLayout.ts +++ b/src/utils/rankingChartLayout.ts @@ -35,5 +35,5 @@ export function useRankingLayout(): ComputedRef { export function truncateRankName(name: string, maxLength: number): string { if (name.length <= maxLength) return name - return `${name.slice(0, maxLength)}...` + return `${name.slice(0, maxLength)}…` }