feat(i18n): 支持多语言切换的国家选择器组件

app/pages/countryRegion/index.vue

@@ -1,8 +1,10 @@
 <script setup>
-import {ref} from 'vue';
+import {ref, computed, watch} from 'vue';
 import pinyin from 'pinyin';
 import countryCode from './data/index.js';
+import { useI18n } from 'vue-i18n'
 
+const { t, locale } = useI18n()
 const value = ref('');
 const alphabet = [
   'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M',
@@ -12,27 +14,41 @@ const alphabet = [
 function groupByPinyinInitial(data) {
   const grouped = {};
   data.forEach(country => {
-    const initial = pinyin(country.cn, {style: pinyin.STYLE_FIRST_LETTER})[0][0].toUpperCase();
+    // 根据当前语言选择对应的国家名称
+    const countryName = locale.value === 'zh-CN' ? country.cn : 
+                       locale.value === 'zh-TW' ? country.tw : 
+                       locale.value === 'ja-JP' ? country.ja :
+                       country.en;
+                       
+    const initial = locale.value === 'ja-JP' ? '' : 
+                   locale.value === 'zh-CN' || locale.value === 'zh-TW' ? 
+                   pinyin(countryName, {style: pinyin.STYLE_FIRST_LETTER})[0][0].toUpperCase() :
+                   countryName.charAt(0).toUpperCase();
+                   
     if (!grouped[initial]) {
       grouped[initial] = [];
     }
-    grouped[initial].push(country);
+    grouped[initial].push({
+      ...country,
+      displayName: countryName
+    });
   });
 
   return grouped;
 }
 
 const groupedCountries = ref([])
-const initData=()=>{
+const initData = () => {
   groupedCountries.value = groupByPinyinInitial(countryCode);
 }
+
 const searchCountry = computed(() => {
   if (!value.value) {
     return groupedCountries.value;
   }
   return Object.keys(groupedCountries.value).reduce((filtered, initial) => {
     const countries = groupedCountries.value[initial].filter(country =>
-        country.cn.includes(value.value)
+        country.displayName.toLowerCase().includes(value.value.toLowerCase())
     );
     if (countries.length > 0) {
       filtered[initial] = countries;
@@ -40,27 +56,47 @@ const searchCountry = computed(() => {
     return filtered;
   }, {});
 });
+
+const showIndexBar = computed(() => locale.value !== 'ja-JP')
+
 initData()
+
+// 监听语言变化，重新初始化数据
+watch(locale, () => {
+  initData()
+})
 </script>
 
 <template>
   <div>
     <van-sticky>
-      <van-search v-model="value" placeholder="请输入国家和地区"/>
+      <van-search v-model="value" :placeholder="t('countryRegion.searchPlaceholder')"/>
     </van-sticky>
-    <van-index-bar sticky :sticky-offset-top="55"  :index-list="alphabet">
+    <van-index-bar 
+      v-if="showIndexBar"
+      sticky 
+      :sticky-offset-top="55"  
+      :index-list="alphabet"
+    >
       <template v-for="(countries, index) in searchCountry" :key="index">
         <van-index-anchor
             :index="index"
         ></van-index-anchor>
-        <van-cell v-for="country in countries" :key="country.code" :title="country.cn">
+        <van-cell v-for="country in countries" :key="country.code" :title="country.displayName">
           <div class="pr-[25px]"> +{{ country.zone }}</div>
         </van-cell>
       </template>
-
-
     </van-index-bar>
-    <van-back-top right="15vw" bottom="10vh"/>
+
+    <div v-else>
+      <van-cell v-for="country in Object.values(searchCountry).flat()" 
+                :key="country.code" 
+                :title="country.displayName">
+        <div class="pr-[25px]"> +{{ country.zone }}</div>
+      </van-cell>
+    </div>
+
+    <van-back-top v-if="showIndexBar" right="15vw" bottom="10vh"/>
   </div>
 </template>