refactor: support i18n

web/app/dashboard/_components/trend-panel.tsx

@@ -16,6 +16,7 @@ import {
   ChartTooltipContent,
   type ChartConfig,
 } from "@/components/ui/chart"
+import { useI18n } from "@/i18n/provider"
 
 type TrendPanelProps = {
   title: string
@@ -24,33 +25,37 @@ type TrendPanelProps = {
   distribution: DashboardStatusDistributionItem[]
 }
 
-const trendConfig = {
-  newCount: {
-    label: "新增",
-    color: "hsl(24 95% 53%)",
-  },
-  closedCount: {
-    label: "关闭",
-    color: "hsl(190 95% 39%)",
-  },
-} satisfies ChartConfig
-
-const distributionConfig = {
-  count: {
-    label: "数量",
-    theme: {
-      light: "hsl(222 47% 11%)",
-      dark: "hsl(210 40% 98%)",
-    },
-  },
-} satisfies ChartConfig
-
 export function TrendPanel({
   title,
   description,
   trend,
   distribution,
 }: TrendPanelProps) {
+  const t = useI18n()
+  const trendConfig = {
+    newCount: {
+      label: t("dashboardHome.chartNew"),
+      color: "hsl(24 95% 53%)",
+    },
+    closedCount: {
+      label: t("dashboardHome.chartClosed"),
+      color: "hsl(190 95% 39%)",
+    },
+  } satisfies ChartConfig
+  const distributionConfig = {
+    count: {
+      label: t("dashboardHome.chartCount"),
+      theme: {
+        light: "hsl(222 47% 11%)",
+        dark: "hsl(210 40% 98%)",
+      },
+    },
+  } satisfies ChartConfig
+  const localizedDistribution = distribution.map((item) => ({
+    ...item,
+    label: getStatusLabel(item.status, item.label, t),
+  }))
+
   return (
     <div className="grid gap-4 xl:grid-cols-[1.5fr_0.9fr]">
       <Card>
@@ -87,12 +92,12 @@ export function TrendPanel({
 
       <Card>
         <CardHeader>
-          <CardTitle>状态分布</CardTitle>
-          <CardDescription>当前状态数量分布</CardDescription>
+          <CardTitle>{t("dashboardHome.statusDistribution")}</CardTitle>
+          <CardDescription>{t("dashboardHome.statusDistributionDescription")}</CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
           <ChartContainer config={distributionConfig} className="h-72 w-full">
-            <BarChart data={distribution} layout="vertical" margin={{ left: 20 }}>
+            <BarChart data={localizedDistribution} layout="vertical" margin={{ left: 20 }}>
               <CartesianGrid horizontal={false} />
               <YAxis
                 type="category"
@@ -115,3 +120,22 @@ export function TrendPanel({
     </div>
   )
 }
+
+function getStatusLabel(
+  status: number,
+  fallback: string,
+  t: (key: string) => string
+) {
+  switch (status) {
+    case 1:
+      return t("dashboardHome.statusAiServing")
+    case 2:
+      return t("dashboardHome.statusPending")
+    case 3:
+      return t("dashboardHome.statusActive")
+    case 4:
+      return t("dashboardHome.statusClosed")
+    default:
+      return fallback
+  }
+}