From b7f008cd72df576dd21d9b01da81dd93a1551d16 Mon Sep 17 00:00:00 2001
From: JustSong <quanpengsong@gmail.com>
Date: Sat, 1 Feb 2025 23:52:42 +0800
Subject: [PATCH] feat: i18n support

---
 .../public/locales/en/translation.json        | 23 ++++++++++++++++
 .../public/locales/zh/translation.json        | 23 ++++++++++++++++
 web/default/src/pages/Dashboard/index.js      | 26 ++++++++++++++++---
 3 files changed, 68 insertions(+), 4 deletions(-)

diff --git a/web/default/public/locales/en/translation.json b/web/default/public/locales/en/translation.json
index b11e66c7..c767a381 100644
--- a/web/default/public/locales/en/translation.json
+++ b/web/default/public/locales/en/translation.json
@@ -379,5 +379,28 @@
       "promote": "Promote",
       "demote": "Demote"
     }
+  },
+  "dashboard": {
+    "charts": {
+      "requests": {
+        "title": "Model Request Trend",
+        "tooltip": "Request Count"
+      },
+      "quota": {
+        "title": "Quota Usage Trend",
+        "tooltip": "Quota Used"
+      },
+      "tokens": {
+        "title": "Token Usage Trend",
+        "tooltip": "Token Count"
+      }
+    },
+    "statistics": {
+      "title": "Statistics",
+      "tooltip": {
+        "date": "Date",
+        "value": "Value"
+      }
+    }
   }
 }
diff --git a/web/default/public/locales/zh/translation.json b/web/default/public/locales/zh/translation.json
index 9fc0736c..6bad3ae7 100644
--- a/web/default/public/locales/zh/translation.json
+++ b/web/default/public/locales/zh/translation.json
@@ -379,5 +379,28 @@
       "promote": "提升",
       "demote": "降级"
     }
+  },
+  "dashboard": {
+    "charts": {
+      "requests": {
+        "title": "模型请求趋势",
+        "tooltip": "请求次数"
+      },
+      "quota": {
+        "title": "额度消费趋势",
+        "tooltip": "消费额度"
+      },
+      "tokens": {
+        "title": "Token 消费趋势",
+        "tooltip": "Token 数量"
+      }
+    },
+    "statistics": {
+      "title": "统计",
+      "tooltip": {
+        "date": "日期",
+        "value": "数值"
+      }
+    }
   }
 }
diff --git a/web/default/src/pages/Dashboard/index.js b/web/default/src/pages/Dashboard/index.js
index 03fd6451..fbb129f1 100644
--- a/web/default/src/pages/Dashboard/index.js
+++ b/web/default/src/pages/Dashboard/index.js
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Card, Grid, Statistic } from 'semantic-ui-react';
 import {
   LineChart,
@@ -53,6 +54,7 @@ const chartConfig = {
 };
 
 const Dashboard = () => {
+  const { t } = useTranslation();
   const [data, setData] = useState([]);
   const [summaryData, setSummaryData] = useState({
     todayRequests: 0,
@@ -194,7 +196,7 @@ const Dashboard = () => {
           <Card fluid className='chart-card'>
             <Card.Content>
               <Card.Header>
-                模型请求趋势
+                {t('dashboard.charts.requests.title')}
                 <span className='stat-value'>{summaryData.todayRequests}</span>
               </Card.Header>
               <div className='chart-container'>
@@ -220,6 +222,11 @@ const Dashboard = () => {
                         borderRadius: '4px',
                         boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
                       }}
+                      formatter={(value) => [
+                        value,
+                        t('dashboard.charts.requests.tooltip')
+                      ]}
+                      labelFormatter={(label) => `${t('dashboard.tooltip.date')}: ${label}`}
                     />
                     <Line
                       type='monotone'
@@ -240,7 +247,7 @@ const Dashboard = () => {
           <Card fluid className='chart-card'>
             <Card.Content>
               <Card.Header>
-                额度消费趋势
+                {t('dashboard.charts.quota.title')}
                 <span className='stat-value'>
                   ${summaryData.todayQuota.toFixed(3)}
                 </span>
@@ -268,6 +275,11 @@ const Dashboard = () => {
                         borderRadius: '4px',
                         boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
                       }}
+                      formatter={(value) => [
+                        value,
+                        t('dashboard.charts.quota.tooltip')
+                      ]}
+                      labelFormatter={(label) => `${t('dashboard.tooltip.date')}: ${label}`}
                     />
                     <Line
                       type='monotone'
@@ -288,7 +300,7 @@ const Dashboard = () => {
           <Card fluid className='chart-card'>
             <Card.Content>
               <Card.Header>
-                Token 消费趋势
+                {t('dashboard.charts.tokens.title')}
                 <span className='stat-value'>{summaryData.todayTokens}</span>
               </Card.Header>
               <div className='chart-container'>
@@ -314,6 +326,11 @@ const Dashboard = () => {
                         borderRadius: '4px',
                         boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
                       }}
+                      formatter={(value) => [
+                        value,
+                        t('dashboard.charts.tokens.tooltip')
+                      ]}
+                      labelFormatter={(label) => `${t('dashboard.tooltip.date')}: ${label}`}
                     />
                     <Line
                       type='monotone'
@@ -334,7 +351,7 @@ const Dashboard = () => {
       {/* 模型使用统计 */}
       <Card fluid className='chart-card'>
         <Card.Content>
-          <Card.Header>统计</Card.Header>
+          <Card.Header>{t('dashboard.statistics.title')}</Card.Header>
           <div className='chart-container'>
             <ResponsiveContainer width='100%' height={300}>
               <BarChart data={modelData}>
@@ -361,6 +378,7 @@ const Dashboard = () => {
                     borderRadius: '4px',
                     boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
                   }}
+                  labelFormatter={(label) => `${t('dashboard.tooltip.date')}: ${label}`}
                 />
                 <Legend
                   wrapperStyle={{