add vue i18n

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,
   },
 }

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": "返回首页"
     }
   }
 }

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"
     }
   }
 }

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>

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>

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>

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>

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 text-20 font-semibold> {{ $t('views.workbench.text_hello', {username: userStore.name}) }}</p>
-              <p mt-5 text-14 op-60>今天又是元气满满的一天!</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',
   },
 ]