feat: support i18n (#5)

glitzma · happy760690 · pany-ang · web-flow · commit 396eb0323c5a · 2025-03-10T20:07:07.000+08:00
Co-authored-by: glitzma &lt;glitteringma@gmail.com&gt;
Co-authored-by: pany &lt;939630029@qq.com&gt;
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "vant": "4.9.17",
     "vconsole": "3.15.1",
     "vue": "3.5.13",
+    "vue-i18n": "11.1.1",
     "vue-router": "4.5.0"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/pages/demo/i18n.vue b/src/pages/demo/i18n.vue
@@ -1,5 +1,44 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { Locale } from "vant"
+import enUS from "vant/es/locale/lang/en-US"
+import { useI18n } from "vue-i18n"
+import NoticeBar from "./components/NoticeBar.vue"
+
+const { t, locale } = useI18n()
+
+const checked = ref<string>(locale.value)
+
+function onChange(name: string) {
+  locale.value = name
+  name === "en" ? Locale.use("en-US", enUS) : Locale.use("zh-CN")
+}
+</script>
 
 <template>
-  <van-empty description="作者正在努力，点个 Star 为作者加速！" />
+  <div un-mb-20px>
+    <NoticeBar :text="t('text')" />
+    <van-radio-group v-model="checked" @change="onChange">
+      <van-cell-group :title="t('title')" inset>
+        <van-cell title="中文" @click="checked = 'zh-CN'">
+          <template #right-icon>
+            <van-radio name="zh-CN" />
+          </template>
+        </van-cell>
+        <van-cell title="English" @click="checked = 'en'">
+          <template #right-icon>
+            <van-radio name="en" />
+          </template>
+        </van-cell>
+      </van-cell-group>
+    </van-radio-group>
+    <van-calendar
+      :poppable="false"
+      :show-confirm="false"
+      un-h-500px
+      un-mx-16px
+      un-my-20px
+      un-rounded-8px
+      un-overflow-hidden
+    />
+  </div>
 </template>
diff --git a/src/plugins/i18n.ts b/src/plugins/i18n.ts
@@ -0,0 +1,21 @@
+import type { App } from "vue"
+import { createI18n } from "vue-i18n"
+
+const i18n = createI18n({
+  locale: "zh-CN",
+  fallbackLocale: "zh-CN",
+  messages: {
+    "zh-CN": {
+      text: "现在语言环境为中文",
+      title: "切换语言"
+    },
+    "en": {
+      text: "The current language is English",
+      title: "Switch language"
+    }
+  }
+})
+
+export function installI18n(app: App) {
+  app.use(i18n)
+}
diff --git a/src/plugins/index.ts b/src/plugins/index.ts
@@ -1,8 +1,10 @@
 import type { App } from "vue"
 import { installConsole } from "./console"
+import { installI18n } from "./i18n"
 import { installPermissionDirective } from "./permission-directive"
 
 export function installPlugins(app: App) {
   installPermissionDirective(app)
   installConsole()
+  installI18n(app)
 }
diff --git a/src/router/index.ts b/src/router/index.ts
@@ -143,25 +143,25 @@ export const demoRoutes: RouteRecordRaw[] = [
         }
       }
     }
-  }
-]
-
-/** 空示例页面 */
-export const emptyDemoRoutes: RouteRecordRaw[] = [
+  },
   {
     path: "/i18n",
     component: () => import("@/pages/demo/i18n.vue"),
     name: "I18n",
     meta: {
-      title: "国际化 / 多语言",
+      title: "国际化 / i18n",
       layout: {
         navBar: {
           showNavBar: true,
           showLeftArrow: true
         }
       }
     }
-  },
+  }
+]
+
+/** 空示例页面 */
+export const emptyDemoRoutes: RouteRecordRaw[] = [
   {
     path: "/markdown",
     component: () => import("@/pages/demo/markdown.vue"),
diff --git a/types/auto/components.d.ts b/types/auto/components.d.ts
@@ -11,6 +11,7 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     VanButton: typeof import('vant/es')['Button']
+    VanCalendar: typeof import('vant/es')['Calendar']
     VanCell: typeof import('vant/es')['Cell']
     VanCellGroup: typeof import('vant/es')['CellGroup']
     VanConfigProvider: typeof import('vant/es')['ConfigProvider']

Original file line number	Diff line number	Diff line change
`@@ -143,25 +143,25 @@ export const demoRoutes: RouteRecordRaw[] = [`
`143`	`143`	`}`
`144`	`144`	`}`
`145`	`145`	`}`
`146`		`- }`
`147`		`-]`
`148`		`-`
`149`		`-/** 空示例页面 */`
`150`		`-export const emptyDemoRoutes: RouteRecordRaw[] = [`
	`146`	`+ },`
`151`	`147`	`{`
`152`	`148`	`path: "/i18n",`
`153`	`149`	`component: () => import("@/pages/demo/i18n.vue"),`
`154`	`150`	`name: "I18n",`
`155`	`151`	`meta: {`
`156`		`- title: "国际化 / 多语言",`
	`152`	`+ title: "国际化 / i18n",`
`157`	`153`	`layout: {`
`158`	`154`	`navBar: {`
`159`	`155`	`showNavBar: true,`
`160`	`156`	`showLeftArrow: true`
`161`	`157`	`}`
`162`	`158`	`}`
`163`	`159`	`}`
`164`		`- },`
	`160`	`+ }`
	`161`	`+]`
	`162`	`+`
	`163`	`+/** 空示例页面 */`
	`164`	`+export const emptyDemoRoutes: RouteRecordRaw[] = [`
`165`	`165`	`{`
`166`	`166`	`path: "/markdown",`
`167`	`167`	`component: () => import("@/pages/demo/markdown.vue"),`