feat: add n18n

frontend/src/components/InlineVisualizationCard.tsx

@@ -1,12 +1,13 @@
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogDescription, DialogFooter } from "@/components/ui/dialog";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Code, Table as TableIcon, BarChart as ChartIcon, LayoutDashboard, Copy, Check } from "lucide-react";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { useDashboardStore, type ChartConfig } from "@/store/dashboardStore";
 import { useProjectStore } from "@/store/projectStore";
+import { useTranslation } from "react-i18next";
 import type { ChartSpec } from "@/store/visualizationStore";
 import { VegaChart } from "./VegaChart";
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
@@ -25,6 +26,7 @@ interface InlineVisualizationCardProps {
 }
 
 export function InlineVisualizationCard({ viz }: InlineVisualizationCardProps) {
+  const { t } = useTranslation();
   const [view, setView] = useState<'table' | 'chart'>('chart');
   const [confirmOpen, setConfirmOpen] = useState(false);
   const [copied, setCopied] = useState(false);
@@ -87,7 +89,7 @@ export function InlineVisualizationCard({ viz }: InlineVisualizationCardProps) {
   return (
     <Card className="w-full border border-zinc-100 shadow-none">
       <CardHeader className="pb-2">
-        <CardTitle className="text-base">{viz.chartSpec?.title || "可视化结果"}</CardTitle>
+        <CardTitle className="text-base">{viz.chartSpec?.title || t('visualizationResult')}</CardTitle>
       </CardHeader>
       <CardContent className="pt-0">
         <div className="flex items-center justify-between mb-3">
@@ -121,7 +123,7 @@ export function InlineVisualizationCard({ viz }: InlineVisualizationCardProps) {
                  <DialogHeader className="flex flex-row items-start justify-between pr-8">
                    <div>
                      <DialogTitle>Generated SQL Query</DialogTitle>
-                     <DialogDescription className="mt-1">用于生成当前图表的数据查询语句。</DialogDescription>
+                     <DialogDescription className="mt-1">{t('sqlQueryDescription')}</DialogDescription>
                    </div>
                    <Button
                      variant="outline"
@@ -132,12 +134,12 @@ export function InlineVisualizationCard({ viz }: InlineVisualizationCardProps) {
                     {copied ? (
                       <>
                         <Check className="h-3.5 w-3.5 text-emerald-500" />
-                        <span>已复制</span>
+                        <span>{t('copied')}</span>
                       </>
                     ) : (
                       <>
                         <Copy className="h-3.5 w-3.5" />
-                        <span>复制</span>
+                        <span>{t('copy')}</span>
                       </>
                     )}
                   </Button>
@@ -176,7 +178,7 @@ export function InlineVisualizationCard({ viz }: InlineVisualizationCardProps) {
               <VegaChart data={objectRows} spec={viz.chartSpec} />
             </div>
           ) : (
-            <div className="text-sm text-zinc-500">本次结果不适合图表展示。</div>
+            <div className="text-sm text-zinc-500">{t('resultNotSuitableForChart')}</div>
           )
         ) : objectRows.length > 0 ? (
           <ScrollArea className="h-80 border rounded-md">
@@ -198,15 +200,15 @@ export function InlineVisualizationCard({ viz }: InlineVisualizationCardProps) {
             </Table>
           </ScrollArea>
         ) : (
-          <div className="text-sm text-zinc-500">当前结果没有可渲染的结构化数据。</div>
+          <div className="text-sm text-zinc-500">{t('noStructuredDataToRender')}</div>
         )}
       </CardContent>
       <Dialog open={confirmOpen} onOpenChange={setConfirmOpen}>
         <DialogContent className="sm:max-w-md">
           <DialogHeader>
-            <DialogTitle>确认加入 Dashboard</DialogTitle>
+            <DialogTitle>{t('confirmAddToDashboard')}</DialogTitle>
             <DialogDescription>
-              将当前图表添加到 Dashboard，是否继续？
+              {t('confirmAddChartToDashboardDesc')}
             </DialogDescription>
           </DialogHeader>
           <DialogFooter>
@@ -217,10 +219,10 @@ export function InlineVisualizationCard({ viz }: InlineVisualizationCardProps) {
                 setPendingChart(null);
               }}
             >
-              取消
+              {t('cancel')}
             </Button>
             <Button onClick={handleConfirmAdd}>
-              确认添加
+              {t('confirmAdd')}
             </Button>
           </DialogFooter>
         </DialogContent>