feat(country-region): 添加国家和地区选择功能

- 新增国家和地区数据文件，包含世界各国的名称、代码和区号
- 实现按拼音首字母分组的国家列表展示
- 添加搜索功能和回到顶部按钮
- 优化页面样式和交互

app/components/NationalMap/index.vue

@@ -1,9 +1,11 @@
-<script setup lang="ts">
+<script setup>
 
 </script>
 
 <template>
+<div>
   
+</div>
 </template>
 
 <style scoped>

app/pages/countryRegion/index.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { ref } from 'vue';
+import pinyin from 'pinyin';
+import countryCode from './data/index.js';
+
+const value = ref('');
+const alphabet = [
+  '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'
+];
+
+function groupByPinyinInitial(data) {
+  const grouped = {};
+  data.forEach(country => {
+    const initial = pinyin(country.cn, { style: pinyin.STYLE_FIRST_LETTER })[0][0].toUpperCase();
+    if (!grouped[initial]) {
+      grouped[initial] = [];
+    }
+    grouped[initial].push(country);
+  });
+
+  return grouped;
+}
+
+const groupedCountries = groupByPinyinInitial(countryCode);
+</script>
+
+<template>
+  <div>
+    <van-sticky>
+      <van-search v-model="value" placeholder="请输入国家和地区" />
+    </van-sticky>
+    <van-index-bar class="mt-[00px]" :index-list="alphabet">
+      <van-index-anchor
+          v-for="(countries, index) in groupedCountries"
+          :key="index"
+          :index="index"
+      >
+        <div class="text-#939393 text-[14px] pl-[16px] bg-[#F3F3F3]">{{ index }}</div>
+        <van-cell v-for="country in countries" :key="country.code" :title="country.cn"/>
+      </van-index-anchor>
+    </van-index-bar>
+    <van-back-top right="15vw" bottom="10vh" />
+  </div>
+</template>
+
+<style scoped>
+:deep(.van-index-anchor) {
+  padding: 0;
+}
+</style>

nuxt.config.js

@@ -22,7 +22,6 @@ export default defineNuxtConfig({
     '@vant/nuxt',
     '@unocss/nuxt',
     '@nuxtjs/color-mode',
-    '@nuxt/eslint',
     '@nuxtjs/i18n',
     '@pinia/nuxt',
     'pinia-plugin-persistedstate/nuxt',

package.json

@@ -17,6 +17,8 @@
     "@nuxtjs/i18n": "^9.1.1",
     "nuxt": "^3.15.0",
     "pinia-plugin-persistedstate": "^4.2.0",
+    "pinyin": "4.0.0-alpha.2",
+    "segmentit": "^2.0.3",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },