Merge remote-tracking branch 'origin/main'

app/pages/countryRegion/index.vue

@@ -11,11 +11,17 @@ const router = useRouter()
 console.log('router',router)
 const { t, locale } = useI18n()
 const value = ref('');
-const alphabet = [
+const alphabet = computed(() => {
-  '#',
+  if (!groupedCountries.value) return ['#'];
-  'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M',
+  
-  'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
+  // 获取所有实际存在的分组字母
-];
+  const letters = Object.keys(groupedCountries.value)
+    .filter(key => key !== '#')
+    .sort();
+    
+  // 确保 # 永远在最前
+  return ['#', ...letters];
+});
 
 // 常用国家的代码列表
 const frequentCountryCodes = ['CN', 'TW', 'JP', 'US'];
@@ -46,11 +52,19 @@ function groupByPinyinInitial(data) {
                          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' ? 
+      let initial;
-                     pinyin(countryName, {style: pinyin.STYLE_FIRST_LETTER})[0][0].toUpperCase() :
+      if (locale.value === 'zh-CN' || locale.value === 'zh-TW') {
-                     countryName.charAt(0).toUpperCase();
+        // 中文和繁体使用拼音首字母
+        const pinyinName = locale.value === 'zh-CN' ? country.cn : country.tw;
+        initial = pinyin(pinyinName, {style: pinyin.STYLE_FIRST_LETTER})[0][0].toUpperCase();
+      } else if (locale.value === 'ja-JP') {
+        initial = '';
+      } else {
+        // 英文使用 en 字段首字母
+        initial = country.en.charAt(0).toUpperCase();
+      }
                      
       if (!grouped[initial]) {
         grouped[initial] = [];
@@ -62,12 +76,38 @@ function groupByPinyinInitial(data) {
     }
   });
 
-  if (locale.value === 'ja-JP') {
+  // 对每个分组内的国家按照对应语言排序
-    // 日文环境下按照片假名排序
+  Object.keys(grouped).forEach(key => {
-    grouped[''] = grouped[''].sort((a, b) => a.displayName.localeCompare(b.displayName, 'ja-JP'));
+    grouped[key].sort((a, b) => {
-  }
+      if (locale.value === 'zh-CN' || locale.value === 'zh-TW') {
+        // 中文和繁体使用拼音排序
+        const pinyinA = pinyin(locale.value === 'zh-CN' ? a.cn : a.tw, {style: pinyin.STYLE_NORMAL}).join('');
+        const pinyinB = pinyin(locale.value === 'zh-CN' ? b.cn : b.tw, {style: pinyin.STYLE_NORMAL}).join('');
+        return pinyinA.localeCompare(pinyinB);
+      } else if (locale.value === 'ja-JP') {
+        return a.displayName.localeCompare(b.displayName, 'ja-JP');
+      } else {
+        return a.en.localeCompare(b.en);
+      }
+    });
+  });
 
-  return grouped;
+  if (locale.value === 'ja-JP') {
+    return grouped;
+  } else {
+    // 按字母顺序返回排序后的对象
+    const sortedGrouped = {};
+    // 确保 # 永远在最前
+    sortedGrouped['#'] = grouped['#'];
+    // 其他字母按顺序排序
+    Object.keys(grouped)
+      .filter(key => key !== '#')
+      .sort()
+      .forEach(key => {
+        sortedGrouped[key] = grouped[key];
+      });
+    return sortedGrouped;
+  }
 }
 
 const groupedCountries = ref([])
@@ -83,6 +123,7 @@ const searchCountry = computed(() => {
     const countries = groupedCountries.value[initial].filter(country =>
         country.displayName.toLowerCase().includes(value.value.toLowerCase())
     );
+    
     if (countries.length > 0) {
       filtered[initial] = countries;
     }
@@ -103,7 +144,7 @@ const handleCountrySelect = (country) => {
 }
 
 initData()
-
+console.log('searchCountry',searchCountry.value)
 // 监听语言变化，重新初始化数据
 watch(locale, () => {
   initData()