feat(i18n): 添加国际化支持，更新语言切换功能

src/main.ts

@@ -4,6 +4,7 @@ import 'virtual:uno.css';
 
 import { createHead } from '@unhead/vue';
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
+import { createI18n } from 'vue-i18n';
 
 import { DataLoaderPlugin } from 'unplugin-vue-router/data-loaders';
 import App from './App.vue';
@@ -29,7 +30,25 @@ async function init() {
     // Register the plugin before the router
     .use(DataLoaderPlugin, { router })
     // adding the router will trigger the initial navigation
-    .use(router);
+    .use(router)
+    .use(
+      createI18n({
+        locale: 'zh_CN', // 默认显示语言
+        fallbackLocale: 'zh_CN',
+        messages: {
+          en_US: {
+            message: {
+              hello: 'hello',
+            },
+          },
+          zh_CN: {
+            message: {
+              hello: '你好',
+            },
+          },
+        },
+      }),
+    );
   app.config.globalProperties.$__DEV__ = $__DEV__;
   app.mount('#app');
 }

src/pages/index-page.vue

@@ -15,15 +15,23 @@ definePage({
 });
 
 import type { FunctionalComponent } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { locale } = useI18n();
+
+const handleLanguageChange = (event: Event) => {
+  const select = event.target as HTMLSelectElement;
+  locale.value = select.value;
+};
 
 // https://cn.vuejs.org/guide/extras/render-function#typing-functional-components
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const FComponent: FunctionalComponent<{ prop: string }> = (props, context) => (
-  <>
-    <div border="1 solid pink" text="pink">
-      <span>This is a functional component with prop: {JSON.stringify(props)}</span>
-    </div>
-  </>
+  // <>
+  <div border="1 solid pink" text="pink">
+    <span>This is a functional component with prop: {JSON.stringify(props)}</span>
+  </div>
+  // </>
 );
 </script>
 
@@ -36,7 +44,16 @@ const FComponent: FunctionalComponent<{ prop: string }> = (props, context) => (
     <li><router-link :to="{ name: '中文页面' }">中文-页面.page.vue</router-link></li>
     <li><router-link :to="{ name: 'Api' }">Api</router-link></li>
   </ul>
-  <FComponent prop="Hello World" />
+
+  <div b="1px solid pink" mt-8>
+    <select :value="locale" @change="handleLanguageChange">
+      <option value="zh_CN">中文</option>
+      <option value="en_US">English</option>
+    </select>
+    <h1>{{ $t('message.hello') }}</h1>
+  </div>
+
+  <FComponent prop="Hello World" style="margin-top: 8px"></FComponent>
   <div text-orange></div>
 
   <div b="1px solid pink" mt-8>