feat(dashboard, i18n): 增强仪表盘视觉效果与多语言支持

在英文、尼泊尔语和中文语言包中新增 “Other statuses” 翻译,提升仪表盘指标展示的清晰度。
在仪表盘中集成新的 StatCard 组件,用于更直观地展示关键指标数据。
更新仪表盘趋势图表,采用 recharts 实现更丰富的数据可视化效果。
重构现有组件与布局,优化整体交互与用户体验,使界面更加直观易用。
This commit is contained in:
2026-05-26 16:32:11 +08:00
parent eb83bcf360
commit 0bd9d8d3d8
11 changed files with 1580 additions and 515 deletions

View File

@@ -0,0 +1,78 @@
import type { ChartConfig } from "@/components/ui/chart";
/** 仪表盘图表色板,对齐 globals.css --chart-1 … --chart-5 */
export const DASHBOARD_CHART_COLORS = {
primary: "var(--chart-1)",
success: "var(--chart-2)",
warning: "var(--chart-3)",
violet: "var(--chart-4)",
rose: "var(--chart-5)",
muted: "var(--muted-foreground)",
} as const;
export function buildTrendChartConfig(labels: {
bet: string;
payout: string;
profit: string;
}): ChartConfig {
return {
bet: { label: labels.bet, color: DASHBOARD_CHART_COLORS.primary },
payout: { label: labels.payout, color: DASHBOARD_CHART_COLORS.rose },
profit: { label: labels.profit, color: DASHBOARD_CHART_COLORS.success },
};
}
export function buildFinanceStructureConfig(labels: {
win: string;
jackpot: string;
gross: string;
}): ChartConfig {
return {
win: { label: labels.win, color: DASHBOARD_CHART_COLORS.success },
jackpot: { label: labels.jackpot, color: DASHBOARD_CHART_COLORS.violet },
gross: { label: labels.gross, color: DASHBOARD_CHART_COLORS.primary },
};
}
export function buildPayoutPieConfig(labels: { win: string; jackpot: string }): ChartConfig {
return {
win: { label: labels.win, color: DASHBOARD_CHART_COLORS.success },
jackpot: { label: labels.jackpot, color: DASHBOARD_CHART_COLORS.violet },
};
}
export function buildSoldOutPieConfig(labels: Record<string, string>): ChartConfig {
return {
d4: { label: labels.d4, color: DASHBOARD_CHART_COLORS.primary },
d3: { label: labels.d3, color: DASHBOARD_CHART_COLORS.success },
d2: { label: labels.d2, color: DASHBOARD_CHART_COLORS.warning },
special: { label: labels.special, color: DASHBOARD_CHART_COLORS.violet },
other: { label: labels.other, color: DASHBOARD_CHART_COLORS.rose },
};
}
export function buildBatchProgressConfig(labels: {
pending: string;
published: string;
other: string;
}): ChartConfig {
return {
pending: { label: labels.pending, color: DASHBOARD_CHART_COLORS.warning },
published: { label: labels.published, color: DASHBOARD_CHART_COLORS.success },
other: { label: labels.other, color: DASHBOARD_CHART_COLORS.muted },
};
}
export function buildUsageBarConfig(label: string): ChartConfig {
return {
usage: { label, color: DASHBOARD_CHART_COLORS.primary },
};
}
export function buildSettlementBarConfig(
entries: { status: string; label: string; color: string }[],
): ChartConfig {
return Object.fromEntries(
entries.map((e) => [e.status, { label: e.label, color: e.color }]),
);
}