From 5c1bc7b9853e6798f7c3fa15939db9c1f85de712 Mon Sep 17 00:00:00 2001
From: QuangNN <nquang17@gmail.com>
Date: Sun, 8 Oct 2023 16:57:07 +0700
Subject: [PATCH] add vue i18n

---
 web/build/constant.js             |  2 +-
 web/i18n/messages/cn.json         | 13 +++++++++++++
 web/i18n/messages/en.json         | 13 +++++++++++++
 web/src/views/error-page/401.vue  |  2 +-
 web/src/views/error-page/403.vue  |  2 +-
 web/src/views/error-page/404.vue  |  2 +-
 web/src/views/error-page/500.vue  |  2 +-
 web/src/views/workbench/index.vue | 20 ++++++++++++--------
 8 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/web/build/constant.js b/web/build/constant.js
index 17a1bf0..cf58a73 100644
--- a/web/build/constant.js
+++ b/web/build/constant.js
@@ -17,7 +17,7 @@ export const PROXY_CONFIG = {
    * @转发路径  http://localhost:9999/api/v1/user
    */
   '/api/v1': {
-    target: 'http://localhost:9999',
+    target: 'http://127.0.0.1:9999',
     changeOrigin: true,
   },
 }
diff --git a/web/i18n/messages/cn.json b/web/i18n/messages/cn.json
index fba511a..d166c4f 100644
--- a/web/i18n/messages/cn.json
+++ b/web/i18n/messages/cn.json
@@ -6,6 +6,19 @@
       "message_input_username_password": "请输入用户名和密码",
       "message_verifying": "正在验证...",
       "message_login_success": "登录成功"
+    },
+    "workbench": {
+      "label_workbench": "工作台",
+      "text_hello": "hello, {username}",
+      "text_welcome": "今天又是元气满满的一天!",
+      "label_number_of_items": "项目数",
+      "label_upcoming": "待办",
+      "label_information": "消息",
+      "label_project": "项目",
+      "label_more": "更多"
+    },
+    "errors": {
+      "text_back_to_home": "返回首页"
     }
   }
 }
\ No newline at end of file
diff --git a/web/i18n/messages/en.json b/web/i18n/messages/en.json
index 65e9dcf..7f7ebc7 100644
--- a/web/i18n/messages/en.json
+++ b/web/i18n/messages/en.json
@@ -6,6 +6,19 @@
       "message_input_username_password": "Please enter username and password",
       "message_verifying": "Verifying...",
       "message_login_success": "Login successful"
+    },
+    "workbench": {
+      "label_workbench": "Workbench",
+      "text_hello": "hello, {username}",
+      "text_welcome": "Today is another day full of energy!",
+      "label_number_of_items": "Number of items",
+      "label_upcoming": "Upcoming",
+      "label_information": "Information",
+      "label_project": "Project",
+      "label_more": "More"
+    },
+    "errors": {
+      "text_back_to_home": "Back to home"
     }
   }
 }
\ No newline at end of file
diff --git a/web/src/views/error-page/401.vue b/web/src/views/error-page/401.vue
index affcaf1..43e60f0 100644
--- a/web/src/views/error-page/401.vue
+++ b/web/src/views/error-page/401.vue
@@ -5,7 +5,7 @@
         <icon-custom-unauthorized text-400px text-primary></icon-custom-unauthorized>
       </template>
       <template #footer>
-        <n-button type="primary" @click="replace('/')">返回首页</n-button>
+        <n-button type="primary" @click="replace('/')">{{ $t('views.errors.text_back_to_home') }}</n-button>
       </template>
     </n-result>
   </AppPage>
diff --git a/web/src/views/error-page/403.vue b/web/src/views/error-page/403.vue
index 3b4310f..a1ae555 100644
--- a/web/src/views/error-page/403.vue
+++ b/web/src/views/error-page/403.vue
@@ -5,7 +5,7 @@
         <icon-custom-forbidden text-400px text-primary></icon-custom-forbidden>
       </template>
       <template #footer>
-        <n-button type="primary" @click="replace('/')">返回首页</n-button>
+        <n-button type="primary" @click="replace('/')">{{ $t('views.errors.text_back_to_home') }}</n-button>
       </template>
     </n-result>
   </AppPage>
diff --git a/web/src/views/error-page/404.vue b/web/src/views/error-page/404.vue
index b231839..8213d74 100644
--- a/web/src/views/error-page/404.vue
+++ b/web/src/views/error-page/404.vue
@@ -5,7 +5,7 @@
         <icon-custom-not-found text-400px text-primary></icon-custom-not-found>
       </template>
       <template #footer>
-        <n-button type="primary" @click="replace('/')">返回首页</n-button>
+        <n-button type="primary" @click="replace('/')">{{ $t('views.errors.text_back_to_home') }}</n-button>
       </template>
     </n-result>
   </AppPage>
diff --git a/web/src/views/error-page/500.vue b/web/src/views/error-page/500.vue
index 006037c..3971a9e 100644
--- a/web/src/views/error-page/500.vue
+++ b/web/src/views/error-page/500.vue
@@ -5,7 +5,7 @@
         <icon-custom-server-error text-400px text-primary></icon-custom-server-error>
       </template>
       <template #footer>
-        <n-button type="primary" @click="replace('/')">返回首页</n-button>
+        <n-button type="primary" @click="replace('/')">{{ $t('views.errors.text_back_to_home') }}</n-button>
       </template>
     </n-result>
   </AppPage>
diff --git a/web/src/views/workbench/index.vue b/web/src/views/workbench/index.vue
index 8f1b03a..dc6f09c 100644
--- a/web/src/views/workbench/index.vue
+++ b/web/src/views/workbench/index.vue
@@ -6,8 +6,8 @@
           <div flex items-center>
             <img rounded-full width="60" :src="userStore.avatar" />
             <div ml-10>
-              <p text-20 font-semibold>hello, {{ userStore.name }}</p>
-              <p mt-5 text-14 op-60>今天又是元气满满的一天!</p>
+              <p text-20 font-semibold> {{ $t('views.workbench.text_hello', {username: userStore.name}) }}</p>
+              <p mt-5 text-14 op-60>{{ $t('views.workbench.text_welcome') }}</p>
             </div>
           </div>
           <n-space :size="12" :wrap="false">
@@ -16,9 +16,9 @@
         </div>
       </n-card>
 
-      <n-card title="项目" size="small" :segmented="true" mt-15 rounded-10>
+      <n-card :title="$t('views.workbench.label_project')" size="small" :segmented="true" mt-15 rounded-10>
         <template #header-extra>
-          <n-button text type="primary">更多</n-button>
+          <n-button text type="primary">{{$t('views.workbench.label_more')}}</n-button>
         </template>
         <div flex flex-wrap justify-between>
           <n-card
@@ -29,7 +29,7 @@
             title="Vue FastAPI Admin"
             size="small"
           >
-            <p op-60>一个基于 Vue3.0、FastAPI、Naive UI 的轻量级后台管理模板</p>
+            <p op-60>{{dummyText}}</p>
           </n-card>
         </div>
       </n-card>
@@ -39,21 +39,25 @@
 
 <script setup>
 import { useUserStore } from '@/store'
+import { useI18n } from 'vue-i18n'
+
+const dummyText = "一个基于 Vue3.0、FastAPI、Naive UI 的轻量级后台管理模板"
+const {t} = useI18n({ useScope: "global" })
 
 const statisticData = [
   {
     id: 0,
-    label: '项目数',
+    label: t('views.workbench.label_number_of_items'),
     value: '25',
   },
   {
     id: 1,
-    label: '待办',
+    label: t('views.workbench.label_upcoming'),
     value: '4/16',
   },
   {
     id: 2,
-    label: '消息',
+    label: t('views.workbench.label_information'),
     value: '12',
   },
 ]