Import vue-i18n & Translate the Apps page

package.json

@@ -17,6 +17,7 @@
     "mingcute_icon": "^2.9.4",
     "pinia": "^2.1.7",
     "vue": "^3.4.29",
+    "vue-i18n": "9",
     "vue-router": "^4.3.3"
   },
   "devDependencies": {

src/i18n/en.json

@@ -0,0 +1,24 @@
+{
+  "apps": {
+    "tabs": {
+      "AppStore": "App Store",
+      "Messages": "Messages",
+      "Photos": "Photos"
+    },
+    "appList": {
+      "TV": "TV",
+      "Music": "Music",
+      "Mindfulness": "Mindfulness",
+      "Settings": "Settings",
+      "Freeform": "Freeform",
+      "Safari": "Safari",
+      "Photos": "Photos",
+      "Notes": "Notes",
+      "AppStore": "App Store",
+      "Mail": "Mail",
+      "Messages": "Messages",
+      "Keynote": "Keynote",
+      "CompatibleApps": "Compatible Apps"
+    }
+  }
+}

src/i18n/index.ts

@@ -0,0 +1,34 @@
+// https://vue-i18n.intlify.dev/
+import { createI18n } from 'vue-i18n'
+import en from './en.json'
+import zh from './zh.json'
+
+const messages = {
+  en,
+  zh
+}
+
+// 获取语言
+export function getLanguage() {
+  // 获取浏览器语言
+  const language = navigator.language.toLowerCase()
+  // 获取 messages 的所有 key
+  const locales = Object.keys(messages)
+  // 遍历所有 key，判断是否包含当前语言
+  for (const locale of locales) {
+    if (language.indexOf(locale) > -1) {
+      return locale
+    }
+  }
+  return 'en'
+}
+
+// 创建i18n实例
+const i18n = createI18n({
+  legacy: false,
+  locale: getLanguage(),
+  fallbackLocale: 'en',
+  messages: messages
+})
+
+export default i18n

src/i18n/zh.json

@@ -0,0 +1,24 @@
+{
+  "apps": {
+    "tabs": {
+      "AppStore": "App Store",
+      "Messages": "信息",
+      "Photos": "照片"
+    },
+    "appList": {
+      "TV": "TV",
+      "Music": "音乐",
+      "Mindfulness": "正念",
+      "Settings": "设置",
+      "Freeform": "无边记",
+      "Safari": "Safari浏览器",
+      "Photos": "照片",
+      "Notes": "备忘录",
+      "AppStore": "App Store",
+      "Mail": "邮件",
+      "Messages": "信息",
+      "Keynote": "Keynote",
+      "CompatibleApps": "兼容App"
+    }
+  }
+}

src/main.ts

@@ -1,17 +1,19 @@
 import './assets/style/main.scss'
 
 import { createApp } from 'vue'
-import { createPinia } from 'pinia'
 
 // 导入 MingCute 图标库
 import 'mingcute_icon/font/Mingcute.css'
 
 import App from './App.vue'
 import router from './router'
+import pinia from './stores'
+import i18n from './i18n'
 
 const app = createApp(App)
 
-app.use(createPinia())
 app.use(router)
+app.use(pinia)
+app.use(i18n)
 
 app.mount('#app')

src/stores/index.ts

@@ -0,0 +1,4 @@
+// https://pinia.vuejs.org/
+import { createPinia } from 'pinia'
+
+export default createPinia()

src/views/apps/index.vue

@@ -42,6 +42,7 @@
 <script setup lang="ts">
 import { type Tab } from '@/types/tabBar'
 import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 
 import TabBar from '@/components/TabBar/index.vue'
 import PaginationDots from '@/components/Pagination/index.vue'
@@ -50,23 +51,25 @@ defineOptions({
   name: 'AppsView'
 })
 
+const { t } = useI18n()
+
 // 定义标签项
 const tabs: Tab[] = [
   {
     icon: 'appstore_line',
-    name: 'App Store',
+    name: t('apps.tabs.AppStore'),
     path: '/appstore',
     active: true
   },
   {
     icon: 'group_2_line',
-    name: 'Messages',
+    name: t('apps.tabs.Messages'),
     path: '/messages',
     active: false
   },
   {
     icon: 'pic_line',
-    name: 'Photos',
+    name: t('apps.tabs.Photos'),
     path: '/photos',
     active: false
   }
@@ -75,59 +78,59 @@ const tabs: Tab[] = [
 // 定义app列表
 const appList = [
   {
-    name: 'TV',
+    name: t('apps.appList.TV'),
     icon: 'TV.png'
   },
   {
-    name: 'Music',
+    name: t('apps.appList.Music'),
     icon: 'Music.png',
     path: '/music'
   },
   {
-    name: 'Mindfulness',
+    name: t('apps.appList.Mindfulness'),
     icon: 'Mindfulness.png'
   },
   {
-    name: 'Settings',
+    name: t('apps.appList.Settings'),
     icon: 'Settings.png',
     path: '/settings'
   },
   {
-    name: 'Freeform',
+    name: t('apps.appList.Freeform'),
     icon: 'Freeform.png'
   },
   {
-    name: 'Safari',
+    name: t('apps.appList.Safari'),
     icon: 'Safari.png',
     path: '/safari'
   },
   {
-    name: 'Photos',
+    name: t('apps.appList.Photos'),
     icon: 'Photos.png',
     path: '/photos'
   },
   {
-    name: 'Notes',
+    name: t('apps.appList.Notes'),
     icon: 'Notes.png'
   },
   {
-    name: 'App Store',
+    name: t('apps.appList.AppStore'),
     icon: 'AppStore.png'
   },
   {
-    name: 'Mail',
+    name: t('apps.appList.Mail'),
     icon: 'Mail.png'
   },
   {
-    name: 'Messages',
+    name: t('apps.appList.Messages'),
     icon: 'Messages.png'
   },
   {
-    name: 'Keynote',
+    name: t('apps.appList.Keynote'),
     icon: 'Keynote.png'
   },
   {
-    name: 'Compatible Apps',
+    name: t('apps.appList.CompatibleApps'),
     icon: 'CompatibleApps.png'
   }
 ]

src/views/hello/index.vue

@@ -81,7 +81,7 @@ const animationFunction = () => {
   left: 0;
   width: 100vw;
   height: 100vh;
-  background: rgba(0, 0, 0, 0.5);
+  // background: rgba(0, 0, 0, 0.5);
   display: flex;
   flex-direction: column;
   justify-content: center;