feat(i18n): 重构国际化组件，添加新的语言支持和功能

src/components/i18nComp.vue

@@ -1,9 +0,0 @@
-<template>
-  <select>
-    TODO: i18n
-  </select>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped></style>

src/components/i18nComp/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <pre>
+&lt;i18n lang="json"&gt;
+{
+  "en": {
+    "unplugin-hello": "Hello, unplugin-vue-i18n!"
+  },
+  "ja": {
+    "unplugin-hello": "こんにちは、unplugin-vue-i18n!"
+  }
+}
+&lt;/i18n&gt;</pre
+  >
+  <br />
+  <button @click="showMessage">show messages</button>
+  <div><span class="label">$i18n.availableLocales</span>: {{ $i18n.availableLocales }}</div>
+  <p><span class="label">$t('message.hello')</span>: {{ $t('message.hello') }}</p>
+  <p><span class="label">t('message.hello'): Component1 locale messages: </span>: {{ t('message.hello') }}</p>
+  <p>
+    <span class="label">t('message.greeting'): Fallback global locale messages: </span>: {{ t('message.greeting') }}
+  </p>
+  <p><span class="label">$t('unplugin-hello')</span>: {{ $t('unplugin-hello') }}</p>
+
+  <select v-model="$i18n.locale">
+    <option v-for="lang in $i18n.availableLocales" :key="lang" :value="lang">{{ lang }}</option>
+  </select>
+</template>
+
+<script lang="ts">
+const messages = {
+  en: { message: { hello: 'hello component1' } },
+  ja: { message: { hello: 'こんにちは、component1' } },
+};
+</script>
+
+<script setup lang="ts">
+const { t } = useI18n({ messages });
+function showMessage() {
+  alert(JSON.stringify(messages, null, 2));
+}
+</script>
+
+<style scoped>
+.label {
+  color: #2c3e50;
+  font-weight: bold;
+  background-color: #f8f9fa;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: monospace;
+}
+</style>
+
+https://vue-i18n.intlify.dev/guide/advanced/sfc.html#unplugin-vue-i18n
+<i18n lang="json">
+{
+  "en": {
+    "unplugin-hello": "Hello, unplugin-vue-i18n!"
+  },
+  "ja": {
+    "unplugin-hello": "こんにちは、unplugin-vue-i18n!"
+  }
+}
+</i18n>

src/main.ts

@@ -8,6 +8,7 @@ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
 import { DataLoaderPlugin } from 'unplugin-vue-router/data-loaders';
 import App from './App.vue';
 import { router } from './router';
+import { createI18n } from 'vue-i18n';
 
 async function init() {
   if (import.meta.env.MODE === 'development' || 1 === 1) {
@@ -29,7 +30,29 @@ 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(
+      // https://vue-i18n.intlify.dev/guide/essentials/started.html#registering-the-i18n-plugin
+      createI18n({
+        legacy: false, // you must set `false`, to use Composition API
+        locale: navigator.language,
+        fallbackLocale: 'en',
+        messages: {
+          en: {
+            message: {
+              hello: 'hello world',
+              greeting: 'good morning, world!',
+            },
+          },
+          ja: {
+            message: {
+              hello: 'こんにちは、世界',
+              greeting: 'おはよう、世界！',
+            },
+          },
+        },
+      }),
+    );
   app.config.globalProperties.$__DEV__ = $__DEV__;
   app.mount('#app');
 }

src/pages/index-page.vue

@@ -1,5 +1,6 @@
 <script lang="tsx" setup>
-import I18nComp from '../components/i18nComp.vue';
+import { routes } from 'vue-router/auto-routes';
+import I18nComp from '../components/i18nComp/index.vue';
 
 useHead({
   // Titles
@@ -64,6 +65,9 @@ const FComponent: import('vue').FunctionalComponent<{ prop: string }> = (props,
   <div b="1px solid pink" mt-8 p-8>
     <SendSms />
   </div>
+  <div b="1px solid pink" mt-8 p-8>
+    <pre>{{ JSON.stringify(routes, null, 2) }}</pre>
+  </div>
 </template>
 
 <style module>

src/router/index.ts

@@ -1,7 +1,6 @@
 import { createProgressGuard, createLogGuard, createStackGuard } from 'utils4u/vue-router';
 import { createRouter, createWebHistory, type Router } from 'vue-router';
 import { routes, handleHotUpdate } from 'vue-router/auto-routes';
-console.debug(`routes :>> `, JSON.stringify(routes, null, 2));
 
 export const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),