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

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>