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>