feat: 解决国际化

Author: wa-monster

package.json

@@ -22,6 +22,7 @@
     "@types/react-dom": "^18.2.11",
     "ahooks": "^3.7.8",
     "antd": "^5.10.0",
+    "axios": "^1.6.2",
     "classnames": "^2.3.2",
     "cross-env": "^7.0.3",
     "dayjs": "1.11.10",

pnpm-lock.yaml

@@ -62,5 +62,17 @@
 	"新密码": "New Password",
 	"确认新密码": "Repeat New Password",
 	"基本资料": "Base Info",
-	"修改密码": "Change Password"
+	"修改密码": "Change Password",
+	"收入": "money",
+	"访问": "visit",
+	"下载": "download",
+	"留言": "message",
+	"快捷入口": "Quick Mehtod",
+	"月": "month",
+	"访问趋势": "Access Trends",
+	"每月收入": "Monthly Income",
+	"用户昵称": "nickname",
+	"性别": "sex",
+	"男": "man",
+	"女": "woman"
 }

src/i18n/locale/en-us.json

@@ -61,5 +61,17 @@
 	"新密码": "新密码",
 	"确认新密码": "确认新密码",
 	"基本资料": "基本资料",
-	"修改密码": "修改密码"
+	"修改密码": "修改密码",
+	"收入": "收入",
+	"访问": "访问",
+	"下载": "下载",
+	"留言": "留言",
+	"快捷入口": "快捷入口",
+	"月": "月",
+	"访问趋势": "访问趋势",
+	"每月收入": "每月收入",
+	"用户昵称": "用户昵称",
+	"性别": "性别",
+	"男": "男",
+	"女": "女"
 }

src/i18n/locale/zh-cn.json

@@ -14,6 +14,7 @@ import {
 import { Card } from "antd";
 import ReactEcharts from "echarts-for-react";
 import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 // import echarts from "echarts";
 const HomeCard = ({
   children,
@@ -58,28 +59,29 @@ const QuickCard = (props: {
   );
 };
 function Home() {
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const option1 = {
     xAxis: {
       type: "category",
       data: [
-        "1月",
-        "2月",
-        "3月",
-        "4月",
-        "5月",
-        "6月",
-        "7月",
-        "8月",
-        "9月",
-        "10月",
-        "11月",
-        "12月",
+        `1${t("月")}`,
+        `2${t("月")}`,
+        `3${t("月")}`,
+        `4${t("月")}`,
+        `5${t("月")}`,
+        `6${t("月")}`,
+        `7${t("月")}`,
+        `8${t("月")}`,
+        `9${t("月")}`,
+        `10${t("月")}`,
+        `11${t("月")}`,
+        `12${t("月")}`,
       ],
     },
     yAxis: {
       type: "value",
-      name: "访问趋势",
+      name: t("访问趋势"),
     },
     series: [
       {
@@ -92,23 +94,23 @@ function Home() {
     xAxis: {
       type: "category",
       data: [
-        "1月",
-        "2月",
-        "3月",
-        "4月",
-        "5月",
-        "6月",
-        "7月",
-        "8月",
-        "9月",
-        "10月",
-        "11月",
-        "12月",
+        `1${t("月")}`,
+        `2${t("月")}`,
+        `3${t("月")}`,
+        `4${t("月")}`,
+        `5${t("月")}`,
+        `6${t("月")}`,
+        `7${t("月")}`,
+        `8${t("月")}`,
+        `9${t("月")}`,
+        `10${t("月")}`,
+        `11${t("月")}`,
+        `12${t("月")}`,
       ],
     },
     yAxis: {
       type: "value",
-      name: "每月收入",
+      name: t("每月收入"),
     },
     series: [
       {
@@ -133,39 +135,39 @@ function Home() {
   ];
   const QuickCardList = [
     {
-      label: "用户管理",
+      label: t("用户管理"),
       handleClick: () => {
         navigate("/systemManage/userManage");
       },
       bgColor: "",
       children: <TeamOutlined style={{ fontSize: "32px" }} />,
     },
     {
-      label: "角色管理",
+      label: t("角色管理"),
       bgColor: "",
       handleClick: () => {
         navigate("/systemManage/roleManage");
       },
       children: <AuditOutlined style={{ fontSize: "32px" }} />,
     },
     {
-      label: "菜单管理",
+      label: t("菜单管理"),
       bgColor: "",
       handleClick: () => {
         navigate("/systemManage/menuManage");
       },
       children: <AppstoreAddOutlined style={{ fontSize: "32px" }} />,
     },
     {
-      label: "聚合蜂窝图",
+      label: t("聚合蜂窝图"),
       bgColor: "",
       handleClick: () => {
         navigate("/technicalStudy/aggregatedHex");
       },
       children: <DeploymentUnitOutlined style={{ fontSize: "32px" }} />,
     },
     {
-      label: "个人中心",
+      label: t("个人中心"),
       bgColor: "",
       handleClick: () => {
         navigate("/personal");
@@ -188,7 +190,7 @@ function Home() {
           </div>
           <div>
             <span className="home-card-num">10000</span>
-            <span>收入</span>
+            <span>{t("收入")}</span>
           </div>
         </HomeCard>
         <HomeCard className="bg-[#f96868]">
@@ -197,7 +199,7 @@ function Home() {
           </div>
           <div>
             <span className="home-card-num">200000</span>
-            <span>访问</span>
+            <span>{t("访问")}</span>
           </div>
         </HomeCard>
         <HomeCard className="bg-[#15c377]">
@@ -206,7 +208,7 @@ function Home() {
           </div>
           <div>
             <span className="home-card-num">1000</span>
-            <span>下载</span>
+            <span>{t("下载")}</span>
           </div>
         </HomeCard>
         <HomeCard className="bg-[#926dde]">
@@ -215,11 +217,11 @@ function Home() {
           </div>
           <div>
             <span className="home-card-num">203</span>
-            <span>留言</span>
+            <span>{t("留言")}</span>
           </div>
         </HomeCard>
       </div>
-      <Card title="快捷入口" bordered={false}>
+      <Card title={t("快捷入口")} bordered={false}>
         <div
           className="grid justify-between justify-items-center"
           style={{

src/pages/Home/index.tsx

@@ -55,9 +55,6 @@ const PasswordForm = () => {
       wrapperCol={{
         span: 10,
       }}
-      style={{
-        maxWidth: 600,
-      }}
     >
       <Form.Item
         label={t("旧密码")}
@@ -107,27 +104,27 @@ const BseInfo = () => {
       }}
     >
       <Form.Item
-        label="用户昵称"
+        label={t("用户昵称")}
         name="nickName"
-        rules={[{ required: true, message: "用户昵称" }]}
+        rules={[{ required: true, message: t("用户昵称") }]}
       >
         <Input></Input>
       </Form.Item>
       <Form.Item
-        label="手机号码"
+        label={t("手机号码")}
         name="phone"
-        rules={[{ required: true, message: "手机号码" }]}
+        rules={[{ required: true, message: t("手机号码") }]}
       >
         <Input></Input>
       </Form.Item>
       <Form.Item
-        label="性别"
+        label={t("性别")}
         name="sex"
-        rules={[{ required: true, message: "性别" }]}
+        rules={[{ required: true, message: t("性别") }]}
       >
         <Radio.Group onChange={onChange}>
-          <Radio value={1}>男</Radio>
-          <Radio value={2}>女</Radio>
+          <Radio value={1}>{t("男")}</Radio>
+          <Radio value={2}>{t("女")}</Radio>
         </Radio.Group>
       </Form.Item>
       <Form.Item>

src/pages/Personal/index.tsx

@@ -0,0 +1 @@
+export default {};