feat: support i18n for chinese

lanthora · Dec 12, 2024 · 9b6350d · 9b6350d
1 parent c5ef9cb
commit 9b6350d
Show file tree

Hide file tree

Showing 25 changed files with 920 additions and 210 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,3 +5,4 @@ cookie
 *.mmdb
 *.crt
 *.key
+.history
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -30,3 +30,5 @@ coverage
 *.tsbuildinfo
 
 stats.html
+
+.history
diff --git a/frontend/index.html b/frontend/index.html
@@ -1,13 +1,16 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Candy</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Candy</title>
+</head>
+
+<body style="margin: 0; padding: 0; height: 100vh; width: 100vw">
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+
 </html>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -15,6 +15,7 @@
     "ant-design-vue": "^4.2.3",
     "axios": "^1.7.2",
     "vue": "^3.4.29",
+    "vue-i18n": "^10.0.5",
     "vue-router": "^4.4.0"
   },
   "devDependencies": {

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -1,5 +1,15 @@
 <template>
   <main>
+    <div class="lang-switch">
+      <a-select
+        v-model:value="currentLang"
+        style="width: 120px"
+        @change="handleLangChange"
+      >
+        <a-select-option value="en-US">English</a-select-option>
+        <a-select-option value="zh-CN">中文</a-select-option>
+      </a-select>
+    </div>
     <RouterView />
   </main>
 </template>
@@ -8,8 +18,19 @@
 import axios from 'axios'
 import { message } from 'ant-design-vue'
 import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { ref } from 'vue'
+import { LOCAL_LANGUAGE_KEY } from './i18n'
 
 const router = useRouter()
+const { locale } = useI18n()
+const currentLang = ref(locale.value)
+
+const handleLangChange = (value) => {
+  locale.value = value
+  currentLang.value = value
+  localStorage.setItem(LOCAL_LANGUAGE_KEY, value)
+}
 
 axios.interceptors.response.use(
   (response) => {
@@ -28,3 +49,12 @@ axios.interceptors.response.use(
   }
 )
 </script>
+
+<style scoped>
+.lang-switch {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 1000;
+}
+</style>
diff --git a/frontend/src/components/AdminSider.vue b/frontend/src/components/AdminSider.vue
@@ -4,19 +4,19 @@
     <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline" @click="handleMenuClick">
       <a-menu-item key="setting">
         <setting-outlined />
-        <span class="nav-text">Setting</span>
+        <span class="nav-text">{{ $t('components.sider.setting') }}</span>
       </a-menu-item>
       <a-menu-item key="user">
         <team-outlined />
-        <span class="nav-text">User</span>
+        <span class="nav-text">{{ $t('components.sider.user') }}</span>
       </a-menu-item>
       <a-menu-item key="license">
         <copyright-outlined />
-        <span class="nav-text">License</span>
+        <span class="nav-text">{{ $t('components.sider.license') }}</span>
       </a-menu-item>
       <a-menu-item key="logout">
         <logout-outlined />
-        <span class="nav-text">Logout</span>
+        <span class="nav-text">{{ $t('components.sider.logout') }}</span>
       </a-menu-item>
     </a-menu>
   </a-layout-sider>

diff --git a/frontend/src/components/FooterView.vue b/frontend/src/components/FooterView.vue
@@ -1,3 +1,3 @@
 <template>
-  <a-layout-footer style="text-align: center">Cacao © 2024</a-layout-footer>
+  <a-layout-footer style="text-align: center">{{ $t('components.footer.copyright') }}</a-layout-footer>
 </template>
diff --git a/frontend/src/components/SvgIcon.vue b/frontend/src/components/SvgIcon.vue
@@ -0,0 +1,24 @@
+<template>
+  <component :is="iconComponent" />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import IconFlagUs from '~icons/circle-flags/us'
+import IconFlagCn from '~icons/circle-flags/cn'
+
+const props = defineProps({
+  icon: {
+    type: String,
+    required: true
+  }
+})
+
+const iconComponent = computed(() => {
+  const icons = {
+    'flag-us': IconFlagUs,
+    'flag-cn': IconFlagCn
+  }
+  return icons[props.icon]
+})
+</script> 
diff --git a/frontend/src/components/UserSider.vue b/frontend/src/components/UserSider.vue
@@ -4,27 +4,27 @@
     <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline" @click="handleMenuClick">
       <a-menu-item key="statistics">
         <bar-chart-outlined />
-        <span class="nav-text">Statistics</span>
+        <span class="nav-text">{{ $t('components.sider.statistics') }}</span>
       </a-menu-item>
       <a-menu-item key="network">
         <apartment-outlined />
-        <span class="nav-text">Network</span>
+        <span class="nav-text">{{ $t('components.sider.network') }}</span>
       </a-menu-item>
       <a-menu-item key="device">
         <desktop-outlined />
-        <span class="nav-text">Device</span>
+        <span class="nav-text">{{ $t('components.sider.device') }}</span>
       </a-menu-item>
       <a-menu-item key="route">
         <thunderbolt-outlined />
-        <span class="nav-text">Route</span>
+        <span class="nav-text">{{ $t('components.sider.route') }}</span>
       </a-menu-item>
       <a-menu-item key="user">
         <user-outlined />
-        <span class="nav-text">User</span>
+        <span class="nav-text">{{ $t('components.sider.user') }}</span>
       </a-menu-item>
       <a-menu-item key="logout">
         <logout-outlined />
-        <span class="nav-text">Logout</span>
+        <span class="nav-text">{{ $t('components.sider.logout') }}</span>
       </a-menu-item>
     </a-menu>
   </a-layout-sider>
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,3 +5,4 @@ cookie @@
     *.mmdb
     *.crt
     *.key
+    .history
Original file line number	Diff line number	Diff line change
Expand Up		@@ -30,3 +30,5 @@ coverage
		*.tsbuildinfo

		stats.html

		.history