@robot-admin/naive-ui-components 0.4.3 → 0.4.4

package/dist/C_City2.js.map

@@ -1 +1 @@
-{"version":3,"file":"C_City2.js","names":["modelValue","placeholder","showLetters"],"sources":["../src/components/C_City/province.json","../src/components/C_City/index.vue","../src/components/C_City/index.vue","../src/components/C_City/index.vue"],"sourcesContent":["","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-05-30\r\n * @Description: 城市选择器组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <NPopover\r\n    v-model:show=\"visible\"\r\n    placement=\"bottom-start\"\r\n    :width=\"430\"\r\n    trigger=\"click\"\r\n    :show-arrow=\"false\"\r\n  >\r\n    <template #trigger>\r\n      <slot name=\"trigger\" :value=\"modelValue\" :visible=\"visible\">\r\n        <div class=\"city-selector-trigger\">\r\n          <span class=\"city-selector-trigger__text\">{{\r\n            modelValue || placeholder\r\n          }}</span>\r\n        </div>\r\n      </slot>\r\n    </template>\r\n\r\n    <div class=\"city-selector-content\">\r\n      <div class=\"city-selector-header\">\r\n        <NRadioGroup v-model:value=\"radioValue\" size=\"small\">\r\n          <NRadioButton value=\"city\">按城市</NRadioButton>\r\n          <NRadioButton value=\"province\">按省份</NRadioButton>\r\n        </NRadioGroup>\r\n        <NSelect\r\n          v-model:value=\"searchValue\"\r\n          class=\"city-selector-search\"\r\n          :options=\"searchOptions\"\r\n          filterable\r\n          clearable\r\n          placeholder=\"搜索城市\"\r\n          @update:value=\"handleSearchSelect\"\r\n        />\r\n      </div>\r\n\r\n      <div v-if=\"showLetters\" class=\"city-selector-letters\">\r\n        <span\r\n          v-for=\"letter in letters\"\r\n          :key=\"letter\"\r\n          class=\"city-selector-letter\"\r\n          @click=\"scrollToLetter(letter)\"\r\n        >\r\n          {{ letter }}\r\n        </span>\r\n      </div>\r\n\r\n      <NScrollbar class=\"city-selector-body\">\r\n        <div v-if=\"radioValue === 'city'\" class=\"city-list\">\r\n          <div\r\n            v-for=\"(cities, letter) in cityDataByLetter\"\r\n            :key=\"letter\"\r\n            :id=\"`letter-${letter}`\"\r\n            class=\"city-group\"\r\n          >\r\n            <div class=\"city-group__letter\">{{ letter }}:</div>\r\n            <div class=\"city-group__cities\">\r\n              <span\r\n                v-for=\"(city, index) in cities\"\r\n                :key=\"`${letter}-${index}`\"\r\n                class=\"city-item\"\r\n                :class=\"{ 'is-active': modelValue === city.name }\"\r\n                @click=\"handleCitySelect(city.name)\"\r\n              >\r\n                {{ city.name }}\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div v-else class=\"province-list\">\r\n          <div\r\n            v-for=\"province in allProvinces\"\r\n            :key=\"province.id\"\r\n            :id=\"`letter-${province.id}`\"\r\n            class=\"province-group\"\r\n          >\r\n            <div class=\"province-group__name\">{{ province.name }}:</div>\r\n            <div class=\"province-group__cities\">\r\n              <span\r\n                v-for=\"(city, index) in province.data\"\r\n                :key=\"`${province.id}-${index}`\"\r\n                class=\"city-item\"\r\n                :class=\"{ 'is-active': modelValue === city }\"\r\n                @click=\"handleCitySelect(city)\"\r\n              >\r\n                {{ city }}\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </NScrollbar>\r\n    </div>\r\n  </NPopover>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, onMounted } from \"vue\";\r\nimport {\r\n  NPopover,\r\n  NRadioGroup,\r\n  NRadioButton,\r\n  NSelect,\r\n  NScrollbar,\r\n} from \"naive-ui\";\r\nimport type { SelectOption } from \"naive-ui\";\r\nimport provinceData from \"./province.json\";\r\n\r\ndefineOptions({ name: \"C_City\" });\r\n\r\ninterface CityItem {\r\n  id: number;\r\n  spell: string;\r\n  name: string;\r\n}\r\n\r\n// 城市数据懒加载（83KB JSON 仅在组件挂载时加载）\r\nconst cityData = ref<{ cities: Record<string, CityItem[]> } | null>(null);\r\n\r\nonMounted(async () => {\r\n  const mod = await import(\"./city.json\");\r\n  cityData.value = mod.default ?? mod;\r\n});\r\n\r\ninterface ProvinceItem {\r\n  id?: string;\r\n  name: string;\r\n  data: string[];\r\n}\r\n\r\ninterface Props {\r\n  modelValue?: string;\r\n  placeholder?: string;\r\n  showLetters?: boolean;\r\n}\r\n\r\ninterface Emits {\r\n  (e: \"update:modelValue\", value: string): void;\r\n  (e: \"change\", value: string): void;\r\n}\r\n\r\nwithDefaults(defineProps<Props>(), {\r\n  placeholder: \"请选择城市\",\r\n  showLetters: true,\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst visible = ref(false);\r\nconst radioValue = ref<\"city\" | \"province\">(\"city\");\r\nconst searchValue = ref(\"\");\r\n\r\nconst allProvinces = computed(() => {\r\n  const provinces: ProvinceItem[] = [];\r\n  Object.values(provinceData).forEach((group) => {\r\n    provinces.push(...(group as ProvinceItem[]));\r\n  });\r\n  return provinces;\r\n});\r\n\r\nconst cityDataByLetter = computed(() => {\r\n  if (cityData.value?.cities) {\r\n    return cityData.value.cities;\r\n  }\r\n  // 数据未加载时，从省份数据生成城市索引作为 fallback\r\n  const cities: Record<string, CityItem[]> = {};\r\n  let cityId = 1;\r\n  const citySet = new Set<string>();\r\n  allProvinces.value.forEach((province) => {\r\n    province.data.forEach((cityName) => {\r\n      citySet.add(cityName);\r\n    });\r\n  });\r\n  Array.from(citySet).forEach((cityName) => {\r\n    const letter = cityName[0].toUpperCase();\r\n    if (!cities[letter]) cities[letter] = [];\r\n    cities[letter].push({ id: cityId++, name: cityName, spell: \"\" });\r\n  });\r\n  const sortedCities: Record<string, CityItem[]> = {};\r\n  Object.keys(cities)\r\n    .sort()\r\n    .forEach((letter) => {\r\n      sortedCities[letter] = cities[letter].sort((a, b) =>\r\n        a.name.localeCompare(b.name, \"zh-CN\"),\r\n      );\r\n    });\r\n  return sortedCities;\r\n});\r\n\r\nconst letters = computed(() => {\r\n  if (radioValue.value === \"city\") {\r\n    return Object.keys(cityDataByLetter.value).sort();\r\n  } else {\r\n    const provinceLetters = new Set<string>();\r\n    Object.keys(provinceData).forEach((key) => {\r\n      if (key !== \"直辖市\" && key !== \"港澳\") {\r\n        provinceLetters.add(key);\r\n      }\r\n    });\r\n    const result = Array.from(provinceLetters).sort();\r\n    result.push(\"直辖市\", \"港澳\");\r\n    return result;\r\n  }\r\n});\r\n\r\nconst searchOptions = computed((): SelectOption[] => {\r\n  if (radioValue.value === \"city\") {\r\n    const options: SelectOption[] = [];\r\n    Object.values(cityDataByLetter.value).forEach((cities) => {\r\n      (cities as CityItem[]).forEach((city) => {\r\n        options.push({\r\n          label: city.name,\r\n          value: city.name,\r\n        });\r\n      });\r\n    });\r\n    return options;\r\n  } else {\r\n    return allProvinces.value.flatMap((province) =>\r\n      province.data.map((city) => ({\r\n        label: `${city} (${province.name})`,\r\n        value: city,\r\n      })),\r\n    );\r\n  }\r\n});\r\n\r\nconst handleCitySelect = (cityName: string): void => {\r\n  emit(\"update:modelValue\", cityName);\r\n  emit(\"change\", cityName);\r\n  visible.value = false;\r\n};\r\n\r\nconst handleSearchSelect = (value: string): void => {\r\n  if (value) {\r\n    handleCitySelect(value);\r\n    searchValue.value = \"\";\r\n  }\r\n};\r\n\r\nconst scrollToLetter = (letter: string): void => {\r\n  const element = document.getElementById(`letter-${letter}`);\r\n  if (element) {\r\n    element.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\r\n  }\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-05-30\r\n * @Description: 城市选择器组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <NPopover\r\n    v-model:show=\"visible\"\r\n    placement=\"bottom-start\"\r\n    :width=\"430\"\r\n    trigger=\"click\"\r\n    :show-arrow=\"false\"\r\n  >\r\n    <template #trigger>\r\n      <slot name=\"trigger\" :value=\"modelValue\" :visible=\"visible\">\r\n        <div class=\"city-selector-trigger\">\r\n          <span class=\"city-selector-trigger__text\">{{\r\n            modelValue || placeholder\r\n          }}</span>\r\n        </div>\r\n      </slot>\r\n    </template>\r\n\r\n    <div class=\"city-selector-content\">\r\n      <div class=\"city-selector-header\">\r\n        <NRadioGroup v-model:value=\"radioValue\" size=\"small\">\r\n          <NRadioButton value=\"city\">按城市</NRadioButton>\r\n          <NRadioButton value=\"province\">按省份</NRadioButton>\r\n        </NRadioGroup>\r\n        <NSelect\r\n          v-model:value=\"searchValue\"\r\n          class=\"city-selector-search\"\r\n          :options=\"searchOptions\"\r\n          filterable\r\n          clearable\r\n          placeholder=\"搜索城市\"\r\n          @update:value=\"handleSearchSelect\"\r\n        />\r\n      </div>\r\n\r\n      <div v-if=\"showLetters\" class=\"city-selector-letters\">\r\n        <span\r\n          v-for=\"letter in letters\"\r\n          :key=\"letter\"\r\n          class=\"city-selector-letter\"\r\n          @click=\"scrollToLetter(letter)\"\r\n        >\r\n          {{ letter }}\r\n        </span>\r\n      </div>\r\n\r\n      <NScrollbar class=\"city-selector-body\">\r\n        <div v-if=\"radioValue === 'city'\" class=\"city-list\">\r\n          <div\r\n            v-for=\"(cities, letter) in cityDataByLetter\"\r\n            :key=\"letter\"\r\n            :id=\"`letter-${letter}`\"\r\n            class=\"city-group\"\r\n          >\r\n            <div class=\"city-group__letter\">{{ letter }}:</div>\r\n            <div class=\"city-group__cities\">\r\n              <span\r\n                v-for=\"(city, index) in cities\"\r\n                :key=\"`${letter}-${index}`\"\r\n                class=\"city-item\"\r\n                :class=\"{ 'is-active': modelValue === city.name }\"\r\n                @click=\"handleCitySelect(city.name)\"\r\n              >\r\n                {{ city.name }}\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div v-else class=\"province-list\">\r\n          <div\r\n            v-for=\"province in allProvinces\"\r\n            :key=\"province.id\"\r\n            :id=\"`letter-${province.id}`\"\r\n            class=\"province-group\"\r\n          >\r\n            <div class=\"province-group__name\">{{ province.name }}:</div>\r\n            <div class=\"province-group__cities\">\r\n              <span\r\n                v-for=\"(city, index) in province.data\"\r\n                :key=\"`${province.id}-${index}`\"\r\n                class=\"city-item\"\r\n                :class=\"{ 'is-active': modelValue === city }\"\r\n                @click=\"handleCitySelect(city)\"\r\n              >\r\n                {{ city }}\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </NScrollbar>\r\n    </div>\r\n  </NPopover>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, onMounted } from \"vue\";\r\nimport {\r\n  NPopover,\r\n  NRadioGroup,\r\n  NRadioButton,\r\n  NSelect,\r\n  NScrollbar,\r\n} from \"naive-ui\";\r\nimport type { SelectOption } from \"naive-ui\";\r\nimport provinceData from \"./province.json\";\r\n\r\ndefineOptions({ name: \"C_City\" });\r\n\r\ninterface CityItem {\r\n  id: number;\r\n  spell: string;\r\n  name: string;\r\n}\r\n\r\n// 城市数据懒加载（83KB JSON 仅在组件挂载时加载）\r\nconst cityData = ref<{ cities: Record<string, CityItem[]> } | null>(null);\r\n\r\nonMounted(async () => {\r\n  const mod = await import(\"./city.json\");\r\n  cityData.value = mod.default ?? mod;\r\n});\r\n\r\ninterface ProvinceItem {\r\n  id?: string;\r\n  name: string;\r\n  data: string[];\r\n}\r\n\r\ninterface Props {\r\n  modelValue?: string;\r\n  placeholder?: string;\r\n  showLetters?: boolean;\r\n}\r\n\r\ninterface Emits {\r\n  (e: \"update:modelValue\", value: string): void;\r\n  (e: \"change\", value: string): void;\r\n}\r\n\r\nwithDefaults(defineProps<Props>(), {\r\n  placeholder: \"请选择城市\",\r\n  showLetters: true,\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst visible = ref(false);\r\nconst radioValue = ref<\"city\" | \"province\">(\"city\");\r\nconst searchValue = ref(\"\");\r\n\r\nconst allProvinces = computed(() => {\r\n  const provinces: ProvinceItem[] = [];\r\n  Object.values(provinceData).forEach((group) => {\r\n    provinces.push(...(group as ProvinceItem[]));\r\n  });\r\n  return provinces;\r\n});\r\n\r\nconst cityDataByLetter = computed(() => {\r\n  if (cityData.value?.cities) {\r\n    return cityData.value.cities;\r\n  }\r\n  // 数据未加载时，从省份数据生成城市索引作为 fallback\r\n  const cities: Record<string, CityItem[]> = {};\r\n  let cityId = 1;\r\n  const citySet = new Set<string>();\r\n  allProvinces.value.forEach((province) => {\r\n    province.data.forEach((cityName) => {\r\n      citySet.add(cityName);\r\n    });\r\n  });\r\n  Array.from(citySet).forEach((cityName) => {\r\n    const letter = cityName[0].toUpperCase();\r\n    if (!cities[letter]) cities[letter] = [];\r\n    cities[letter].push({ id: cityId++, name: cityName, spell: \"\" });\r\n  });\r\n  const sortedCities: Record<string, CityItem[]> = {};\r\n  Object.keys(cities)\r\n    .sort()\r\n    .forEach((letter) => {\r\n      sortedCities[letter] = cities[letter].sort((a, b) =>\r\n        a.name.localeCompare(b.name, \"zh-CN\"),\r\n      );\r\n    });\r\n  return sortedCities;\r\n});\r\n\r\nconst letters = computed(() => {\r\n  if (radioValue.value === \"city\") {\r\n    return Object.keys(cityDataByLetter.value).sort();\r\n  } else {\r\n    const provinceLetters = new Set<string>();\r\n    Object.keys(provinceData).forEach((key) => {\r\n      if (key !== \"直辖市\" && key !== \"港澳\") {\r\n        provinceLetters.add(key);\r\n      }\r\n    });\r\n    const result = Array.from(provinceLetters).sort();\r\n    result.push(\"直辖市\", \"港澳\");\r\n    return result;\r\n  }\r\n});\r\n\r\nconst searchOptions = computed((): SelectOption[] => {\r\n  if (radioValue.value === \"city\") {\r\n    const options: SelectOption[] = [];\r\n    Object.values(cityDataByLetter.value).forEach((cities) => {\r\n      (cities as CityItem[]).forEach((city) => {\r\n        options.push({\r\n          label: city.name,\r\n          value: city.name,\r\n        });\r\n      });\r\n    });\r\n    return options;\r\n  } else {\r\n    return allProvinces.value.flatMap((province) =>\r\n      province.data.map((city) => ({\r\n        label: `${city} (${province.name})`,\r\n        value: city,\r\n      })),\r\n    );\r\n  }\r\n});\r\n\r\nconst handleCitySelect = (cityName: string): void => {\r\n  emit(\"update:modelValue\", cityName);\r\n  emit(\"change\", cityName);\r\n  visible.value = false;\r\n};\r\n\r\nconst handleSearchSelect = (value: string): void => {\r\n  if (value) {\r\n    handleCitySelect(value);\r\n    searchValue.value = \"\";\r\n  }\r\n};\r\n\r\nconst scrollToLetter = (letter: string): void => {\r\n  const element = document.getElementById(`letter-${letter}`);\r\n  if (element) {\r\n    element.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\r\n  }\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-05-30\r\n * @Description: 城市选择器组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <NPopover\r\n    v-model:show=\"visible\"\r\n    placement=\"bottom-start\"\r\n    :width=\"430\"\r\n    trigger=\"click\"\r\n    :show-arrow=\"false\"\r\n  >\r\n    <template #trigger>\r\n      <slot name=\"trigger\" :value=\"modelValue\" :visible=\"visible\">\r\n        <div class=\"city-selector-trigger\">\r\n          <span class=\"city-selector-trigger__text\">{{\r\n            modelValue || placeholder\r\n          }}</span>\r\n        </div>\r\n      </slot>\r\n    </template>\r\n\r\n    <div class=\"city-selector-content\">\r\n      <div class=\"city-selector-header\">\r\n        <NRadioGroup v-model:value=\"radioValue\" size=\"small\">\r\n          <NRadioButton value=\"city\">按城市</NRadioButton>\r\n          <NRadioButton value=\"province\">按省份</NRadioButton>\r\n        </NRadioGroup>\r\n        <NSelect\r\n          v-model:value=\"searchValue\"\r\n          class=\"city-selector-search\"\r\n          :options=\"searchOptions\"\r\n          filterable\r\n          clearable\r\n          placeholder=\"搜索城市\"\r\n          @update:value=\"handleSearchSelect\"\r\n        />\r\n      </div>\r\n\r\n      <div v-if=\"showLetters\" class=\"city-selector-letters\">\r\n        <span\r\n          v-for=\"letter in letters\"\r\n          :key=\"letter\"\r\n          class=\"city-selector-letter\"\r\n          @click=\"scrollToLetter(letter)\"\r\n        >\r\n          {{ letter }}\r\n        </span>\r\n      </div>\r\n\r\n      <NScrollbar class=\"city-selector-body\">\r\n        <div v-if=\"radioValue === 'city'\" class=\"city-list\">\r\n          <div\r\n            v-for=\"(cities, letter) in cityDataByLetter\"\r\n            :key=\"letter\"\r\n            :id=\"`letter-${letter}`\"\r\n            class=\"city-group\"\r\n          >\r\n            <div class=\"city-group__letter\">{{ letter }}:</div>\r\n            <div class=\"city-group__cities\">\r\n              <span\r\n                v-for=\"(city, index) in cities\"\r\n                :key=\"`${letter}-${index}`\"\r\n                class=\"city-item\"\r\n                :class=\"{ 'is-active': modelValue === city.name }\"\r\n                @click=\"handleCitySelect(city.name)\"\r\n              >\r\n                {{ city.name }}\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div v-else class=\"province-list\">\r\n          <div\r\n            v-for=\"province in allProvinces\"\r\n            :key=\"province.id\"\r\n            :id=\"`letter-${province.id}`\"\r\n            class=\"province-group\"\r\n          >\r\n            <div class=\"province-group__name\">{{ province.name }}:</div>\r\n            <div class=\"province-group__cities\">\r\n              <span\r\n                v-for=\"(city, index) in province.data\"\r\n                :key=\"`${province.id}-${index}`\"\r\n                class=\"city-item\"\r\n                :class=\"{ 'is-active': modelValue === city }\"\r\n                @click=\"handleCitySelect(city)\"\r\n              >\r\n                {{ city }}\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </NScrollbar>\r\n    </div>\r\n  </NPopover>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, onMounted } from \"vue\";\r\nimport {\r\n  NPopover,\r\n  NRadioGroup,\r\n  NRadioButton,\r\n  NSelect,\r\n  NScrollbar,\r\n} from \"naive-ui\";\r\nimport type { SelectOption } from \"naive-ui\";\r\nimport provinceData from \"./province.json\";\r\n\r\ndefineOptions({ name: \"C_City\" });\r\n\r\ninterface CityItem {\r\n  id: number;\r\n  spell: string;\r\n  name: string;\r\n}\r\n\r\n// 城市数据懒加载（83KB JSON 仅在组件挂载时加载）\r\nconst cityData = ref<{ cities: Record<string, CityItem[]> } | null>(null);\r\n\r\nonMounted(async () => {\r\n  const mod = await import(\"./city.json\");\r\n  cityData.value = mod.default ?? mod;\r\n});\r\n\r\ninterface ProvinceItem {\r\n  id?: string;\r\n  name: string;\r\n  data: string[];\r\n}\r\n\r\ninterface Props {\r\n  modelValue?: string;\r\n  placeholder?: string;\r\n  showLetters?: boolean;\r\n}\r\n\r\ninterface Emits {\r\n  (e: \"update:modelValue\", value: string): void;\r\n  (e: \"change\", value: string): void;\r\n}\r\n\r\nwithDefaults(defineProps<Props>(), {\r\n  placeholder: \"请选择城市\",\r\n  showLetters: true,\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst visible = ref(false);\r\nconst radioValue = ref<\"city\" | \"province\">(\"city\");\r\nconst searchValue = ref(\"\");\r\n\r\nconst allProvinces = computed(() => {\r\n  const provinces: ProvinceItem[] = [];\r\n  Object.values(provinceData).forEach((group) => {\r\n    provinces.push(...(group as ProvinceItem[]));\r\n  });\r\n  return provinces;\r\n});\r\n\r\nconst cityDataByLetter = computed(() => {\r\n  if (cityData.value?.cities) {\r\n    return cityData.value.cities;\r\n  }\r\n  // 数据未加载时，从省份数据生成城市索引作为 fallback\r\n  const cities: Record<string, CityItem[]> = {};\r\n  let cityId = 1;\r\n  const citySet = new Set<string>();\r\n  allProvinces.value.forEach((province) => {\r\n    province.data.forEach((cityName) => {\r\n      citySet.add(cityName);\r\n    });\r\n  });\r\n  Array.from(citySet).forEach((cityName) => {\r\n    const letter = cityName[0].toUpperCase();\r\n    if (!cities[letter]) cities[letter] = [];\r\n    cities[letter].push({ id: cityId++, name: cityName, spell: \"\" });\r\n  });\r\n  const sortedCities: Record<string, CityItem[]> = {};\r\n  Object.keys(cities)\r\n    .sort()\r\n    .forEach((letter) => {\r\n      sortedCities[letter] = cities[letter].sort((a, b) =>\r\n        a.name.localeCompare(b.name, \"zh-CN\"),\r\n      );\r\n    });\r\n  return sortedCities;\r\n});\r\n\r\nconst letters = computed(() => {\r\n  if (radioValue.value === \"city\") {\r\n    return Object.keys(cityDataByLetter.value).sort();\r\n  } else {\r\n    const provinceLetters = new Set<string>();\r\n    Object.keys(provinceData).forEach((key) => {\r\n      if (key !== \"直辖市\" && key !== \"港澳\") {\r\n        provinceLetters.add(key);\r\n      }\r\n    });\r\n    const result = Array.from(provinceLetters).sort();\r\n    result.push(\"直辖市\", \"港澳\");\r\n    return result;\r\n  }\r\n});\r\n\r\nconst searchOptions = computed((): SelectOption[] => {\r\n  if (radioValue.value === \"city\") {\r\n    const options: SelectOption[] = [];\r\n    Object.values(cityDataByLetter.value).forEach((cities) => {\r\n      (cities as CityItem[]).forEach((city) => {\r\n        options.push({\r\n          label: city.name,\r\n          value: city.name,\r\n        });\r\n      });\r\n    });\r\n    return options;\r\n  } else {\r\n    return allProvinces.value.flatMap((province) =>\r\n      province.data.map((city) => ({\r\n        label: `${city} (${province.name})`,\r\n        value: city,\r\n      })),\r\n    );\r\n  }\r\n});\r\n\r\nconst handleCitySelect = (cityName: string): void => {\r\n  emit(\"update:modelValue\", cityName);\r\n  emit(\"change\", cityName);\r\n  visible.value = false;\r\n};\r\n\r\nconst handleSearchSelect = (value: string): void => {\r\n  if (value) {\r\n    handleCitySelect(value);\r\n    searchValue.value = \"\";\r\n  }\r\n};\r\n\r\nconst scrollToLetter = (letter: string): void => {\r\n  const element = document.getElementById(`letter-${letter}`);\r\n  if (element) {\r\n    element.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\r\n  }\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n"],"mappings":"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"}
+{"version":3,"file":"C_City2.js","names":["modelValue","placeholder","showLetters"],"sources":["../src/components/C_City/province.json","../src/components/C_City/index.vue","../src/components/C_City/index.vue","../src/components/C_City/index.vue"],"sourcesContent":["","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-05-30\r\n * @Description: 城市选择器组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <NPopover\r\n    v-model:show=\"visible\"\r\n    placement=\"bottom-start\"\r\n    :width=\"430\"\r\n    trigger=\"click\"\r\n    :show-arrow=\"false\"\r\n  >\r\n    <template #trigger>\r\n      <slot name=\"trigger\" :value=\"modelValue\" :visible=\"visible\">\r\n        <div class=\"city-selector-trigger\">\r\n          <span class=\"city-selector-trigger__text\">{{\r\n            modelValue || placeholder\r\n          }}</span>\r\n        </div>\r\n      </slot>\r\n    </template>\r\n\r\n    <div class=\"city-selector-content\">\r\n      <div class=\"city-selector-header\">\r\n        <NRadioGroup v-model:value=\"radioValue\" size=\"small\">\r\n          <NRadioButton value=\"city\">按城市</NRadioButton>\r\n          <NRadioButton value=\"province\">按省份</NRadioButton>\r\n        </NRadioGroup>\r\n        <NSelect\r\n          v-model:value=\"searchValue\"\r\n          class=\"city-selector-search\"\r\n          :options=\"searchOptions\"\r\n          filterable\r\n          clearable\r\n          placeholder=\"搜索城市\"\r\n          @update:value=\"handleSearchSelect\"\r\n        />\r\n      </div>\r\n\r\n      <div v-if=\"showLetters\" class=\"city-selector-letters\">\r\n        <span\r\n          v-for=\"letter in letters\"\r\n          :key=\"letter\"\r\n          class=\"city-selector-letter\"\r\n          @click=\"scrollToLetter(letter)\"\r\n        >\r\n          {{ letter }}\r\n        </span>\r\n      </div>\r\n\r\n      <NScrollbar class=\"city-selector-body\">\r\n        <div v-if=\"radioValue === 'city'\" class=\"city-list\">\r\n          <div\r\n            v-for=\"(cities, letter) in cityDataByLetter\"\r\n            :key=\"letter\"\r\n            :id=\"`letter-${letter}`\"\r\n            class=\"city-group\"\r\n          >\r\n            <div class=\"city-group__letter\">{{ letter }}:</div>\r\n            <div class=\"city-group__cities\">\r\n              <span\r\n                v-for=\"(city, index) in cities\"\r\n                :key=\"`${letter}-${index}`\"\r\n                class=\"city-item\"\r\n                :class=\"{ 'is-active': modelValue === city.name }\"\r\n                @click=\"handleCitySelect(city.name)\"\r\n              >\r\n                {{ city.name }}\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div v-else class=\"province-list\">\r\n          <div\r\n            v-for=\"province in allProvinces\"\r\n            :key=\"province.id\"\r\n            :id=\"`letter-${province.id}`\"\r\n            class=\"province-group\"\r\n          >\r\n            <div class=\"province-group__name\">{{ province.name }}:</div>\r\n            <div class=\"province-group__cities\">\r\n              <span\r\n                v-for=\"(city, index) in province.data\"\r\n                :key=\"`${province.id}-${index}`\"\r\n                class=\"city-item\"\r\n                :class=\"{ 'is-active': modelValue === city }\"\r\n                @click=\"handleCitySelect(city)\"\r\n              >\r\n                {{ city }}\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </NScrollbar>\r\n    </div>\r\n  </NPopover>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, onMounted } from \"vue\";\r\nimport {\r\n  NPopover,\r\n  NRadioGroup,\r\n  NRadioButton,\r\n  NSelect,\r\n  NScrollbar,\r\n} from \"naive-ui\";\r\nimport type { SelectOption } from \"naive-ui\";\r\nimport provinceData from \"./province.json\";\r\n\r\ndefineOptions({ name: \"C_City\" });\r\n\r\ninterface CityItem {\r\n  id: number;\r\n  spell: string;\r\n  name: string;\r\n}\r\n\r\n// 城市数据懒加载（83KB JSON 仅在组件挂载时加载）\r\nconst cityData = ref<{ cities: Record<string, CityItem[]> } | null>(null);\r\n\r\nonMounted(async () => {\r\n  const mod = await import(\"./city.json\");\r\n  cityData.value = mod.default ?? mod;\r\n});\r\n\r\ninterface ProvinceItem {\r\n  id?: string;\r\n  name: string;\r\n  data: string[];\r\n}\r\n\r\ninterface Props {\r\n  modelValue?: string;\r\n  placeholder?: string;\r\n  showLetters?: boolean;\r\n}\r\n\r\ninterface Emits {\r\n  (e: \"update:modelValue\", value: string): void;\r\n  (e: \"change\", value: string): void;\r\n}\r\n\r\nwithDefaults(defineProps<Props>(), {\r\n  placeholder: \"请选择城市\",\r\n  showLetters: true,\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst visible = ref(false);\r\nconst radioValue = ref<\"city\" | \"province\">(\"city\");\r\nconst searchValue = ref(\"\");\r\n\r\nconst allProvinces = computed(() => {\r\n  const provinces: ProvinceItem[] = [];\r\n  Object.values(provinceData).forEach((group) => {\r\n    provinces.push(...(group as ProvinceItem[]));\r\n  });\r\n  return provinces;\r\n});\r\n\r\nconst cityDataByLetter = computed(() => {\r\n  if (cityData.value?.cities) {\r\n    return cityData.value.cities;\r\n  }\r\n  // 数据未加载时，从省份数据生成城市索引作为 fallback\r\n  const cities: Record<string, CityItem[]> = {};\r\n  let cityId = 1;\r\n  const citySet = new Set<string>();\r\n  allProvinces.value.forEach((province) => {\r\n    province.data.forEach((cityName) => {\r\n      citySet.add(cityName);\r\n    });\r\n  });\r\n  Array.from(citySet).forEach((cityName) => {\r\n    const letter = cityName[0].toUpperCase();\r\n    if (!cities[letter]) cities[letter] = [];\r\n    cities[letter].push({ id: cityId++, name: cityName, spell: \"\" });\r\n  });\r\n  const sortedCities: Record<string, CityItem[]> = {};\r\n  Object.keys(cities)\r\n    .sort()\r\n    .forEach((letter) => {\r\n      sortedCities[letter] = cities[letter].sort((a, b) =>\r\n        a.name.localeCompare(b.name, \"zh-CN\"),\r\n      );\r\n    });\r\n  return sortedCities;\r\n});\r\n\r\nconst letters = computed(() => {\r\n  if (radioValue.value === \"city\") {\r\n    return Object.keys(cityDataByLetter.value).sort();\r\n  } else {\r\n    const provinceLetters = new Set<string>();\r\n    Object.keys(provinceData).forEach((key) => {\r\n      if (key !== \"直辖市\" && key !== \"港澳\") {\r\n        provinceLetters.add(key);\r\n      }\r\n    });\r\n    const result = Array.from(provinceLetters).sort();\r\n    result.push(\"直辖市\", \"港澳\");\r\n    return result;\r\n  }\r\n});\r\n\r\nconst searchOptions = computed((): SelectOption[] => {\r\n  if (radioValue.value === \"city\") {\r\n    const options: SelectOption[] = [];\r\n    Object.values(cityDataByLetter.value).forEach((cities) => {\r\n      (cities as CityItem[]).forEach((city) => {\r\n        options.push({\r\n          label: city.name,\r\n          value: city.name,\r\n        });\r\n      });\r\n    });\r\n    return options;\r\n  } else {\r\n    return allProvinces.value.flatMap((province) =>\r\n      province.data.map((city) => ({\r\n        label: `${city} (${province.name})`,\r\n        value: city,\r\n      })),\r\n    );\r\n  }\r\n});\r\n\r\nconst handleCitySelect = (cityName: string): void => {\r\n  emit(\"update:modelValue\", cityName);\r\n  emit(\"change\", cityName);\r\n  visible.value = false;\r\n};\r\n\r\nconst handleSearchSelect = (value: string): void => {\r\n  if (value) {\r\n    handleCitySelect(value);\r\n    searchValue.value = \"\";\r\n  }\r\n};\r\n\r\nconst scrollToLetter = (letter: string): void => {\r\n  const element = document.getElementById(`letter-${letter}`);\r\n  if (element) {\r\n    element.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\r\n  }\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-05-30\r\n * @Description: 城市选择器组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <NPopover\r\n    v-model:show=\"visible\"\r\n    placement=\"bottom-start\"\r\n    :width=\"430\"\r\n    trigger=\"click\"\r\n    :show-arrow=\"false\"\r\n  >\r\n    <template #trigger>\r\n      <slot name=\"trigger\" :value=\"modelValue\" :visible=\"visible\">\r\n        <div class=\"city-selector-trigger\">\r\n          <span class=\"city-selector-trigger__text\">{{\r\n            modelValue || placeholder\r\n          }}</span>\r\n        </div>\r\n      </slot>\r\n    </template>\r\n\r\n    <div class=\"city-selector-content\">\r\n      <div class=\"city-selector-header\">\r\n        <NRadioGroup v-model:value=\"radioValue\" size=\"small\">\r\n          <NRadioButton value=\"city\">按城市</NRadioButton>\r\n          <NRadioButton value=\"province\">按省份</NRadioButton>\r\n        </NRadioGroup>\r\n        <NSelect\r\n          v-model:value=\"searchValue\"\r\n          class=\"city-selector-search\"\r\n          :options=\"searchOptions\"\r\n          filterable\r\n          clearable\r\n          placeholder=\"搜索城市\"\r\n          @update:value=\"handleSearchSelect\"\r\n        />\r\n      </div>\r\n\r\n      <div v-if=\"showLetters\" class=\"city-selector-letters\">\r\n        <span\r\n          v-for=\"letter in letters\"\r\n          :key=\"letter\"\r\n          class=\"city-selector-letter\"\r\n          @click=\"scrollToLetter(letter)\"\r\n        >\r\n          {{ letter }}\r\n        </span>\r\n      </div>\r\n\r\n      <NScrollbar class=\"city-selector-body\">\r\n        <div v-if=\"radioValue === 'city'\" class=\"city-list\">\r\n          <div\r\n            v-for=\"(cities, letter) in cityDataByLetter\"\r\n            :key=\"letter\"\r\n            :id=\"`letter-${letter}`\"\r\n            class=\"city-group\"\r\n          >\r\n            <div class=\"city-group__letter\">{{ letter }}:</div>\r\n            <div class=\"city-group__cities\">\r\n              <span\r\n                v-for=\"(city, index) in cities\"\r\n                :key=\"`${letter}-${index}`\"\r\n                class=\"city-item\"\r\n                :class=\"{ 'is-active': modelValue === city.name }\"\r\n                @click=\"handleCitySelect(city.name)\"\r\n              >\r\n                {{ city.name }}\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div v-else class=\"province-list\">\r\n          <div\r\n            v-for=\"province in allProvinces\"\r\n            :key=\"province.id\"\r\n            :id=\"`letter-${province.id}`\"\r\n            class=\"province-group\"\r\n          >\r\n            <div class=\"province-group__name\">{{ province.name }}:</div>\r\n            <div class=\"province-group__cities\">\r\n              <span\r\n                v-for=\"(city, index) in province.data\"\r\n                :key=\"`${province.id}-${index}`\"\r\n                class=\"city-item\"\r\n                :class=\"{ 'is-active': modelValue === city }\"\r\n                @click=\"handleCitySelect(city)\"\r\n              >\r\n                {{ city }}\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </NScrollbar>\r\n    </div>\r\n  </NPopover>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, onMounted } from \"vue\";\r\nimport {\r\n  NPopover,\r\n  NRadioGroup,\r\n  NRadioButton,\r\n  NSelect,\r\n  NScrollbar,\r\n} from \"naive-ui\";\r\nimport type { SelectOption } from \"naive-ui\";\r\nimport provinceData from \"./province.json\";\r\n\r\ndefineOptions({ name: \"C_City\" });\r\n\r\ninterface CityItem {\r\n  id: number;\r\n  spell: string;\r\n  name: string;\r\n}\r\n\r\n// 城市数据懒加载（83KB JSON 仅在组件挂载时加载）\r\nconst cityData = ref<{ cities: Record<string, CityItem[]> } | null>(null);\r\n\r\nonMounted(async () => {\r\n  const mod = await import(\"./city.json\");\r\n  cityData.value = mod.default ?? mod;\r\n});\r\n\r\ninterface ProvinceItem {\r\n  id?: string;\r\n  name: string;\r\n  data: string[];\r\n}\r\n\r\ninterface Props {\r\n  modelValue?: string;\r\n  placeholder?: string;\r\n  showLetters?: boolean;\r\n}\r\n\r\ninterface Emits {\r\n  (e: \"update:modelValue\", value: string): void;\r\n  (e: \"change\", value: string): void;\r\n}\r\n\r\nwithDefaults(defineProps<Props>(), {\r\n  placeholder: \"请选择城市\",\r\n  showLetters: true,\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst visible = ref(false);\r\nconst radioValue = ref<\"city\" | \"province\">(\"city\");\r\nconst searchValue = ref(\"\");\r\n\r\nconst allProvinces = computed(() => {\r\n  const provinces: ProvinceItem[] = [];\r\n  Object.values(provinceData).forEach((group) => {\r\n    provinces.push(...(group as ProvinceItem[]));\r\n  });\r\n  return provinces;\r\n});\r\n\r\nconst cityDataByLetter = computed(() => {\r\n  if (cityData.value?.cities) {\r\n    return cityData.value.cities;\r\n  }\r\n  // 数据未加载时，从省份数据生成城市索引作为 fallback\r\n  const cities: Record<string, CityItem[]> = {};\r\n  let cityId = 1;\r\n  const citySet = new Set<string>();\r\n  allProvinces.value.forEach((province) => {\r\n    province.data.forEach((cityName) => {\r\n      citySet.add(cityName);\r\n    });\r\n  });\r\n  Array.from(citySet).forEach((cityName) => {\r\n    const letter = cityName[0].toUpperCase();\r\n    if (!cities[letter]) cities[letter] = [];\r\n    cities[letter].push({ id: cityId++, name: cityName, spell: \"\" });\r\n  });\r\n  const sortedCities: Record<string, CityItem[]> = {};\r\n  Object.keys(cities)\r\n    .sort()\r\n    .forEach((letter) => {\r\n      sortedCities[letter] = cities[letter].sort((a, b) =>\r\n        a.name.localeCompare(b.name, \"zh-CN\"),\r\n      );\r\n    });\r\n  return sortedCities;\r\n});\r\n\r\nconst letters = computed(() => {\r\n  if (radioValue.value === \"city\") {\r\n    return Object.keys(cityDataByLetter.value).sort();\r\n  } else {\r\n    const provinceLetters = new Set<string>();\r\n    Object.keys(provinceData).forEach((key) => {\r\n      if (key !== \"直辖市\" && key !== \"港澳\") {\r\n        provinceLetters.add(key);\r\n      }\r\n    });\r\n    const result = Array.from(provinceLetters).sort();\r\n    result.push(\"直辖市\", \"港澳\");\r\n    return result;\r\n  }\r\n});\r\n\r\nconst searchOptions = computed((): SelectOption[] => {\r\n  if (radioValue.value === \"city\") {\r\n    const options: SelectOption[] = [];\r\n    Object.values(cityDataByLetter.value).forEach((cities) => {\r\n      (cities as CityItem[]).forEach((city) => {\r\n        options.push({\r\n          label: city.name,\r\n          value: city.name,\r\n        });\r\n      });\r\n    });\r\n    return options;\r\n  } else {\r\n    return allProvinces.value.flatMap((province) =>\r\n      province.data.map((city) => ({\r\n        label: `${city} (${province.name})`,\r\n        value: city,\r\n      })),\r\n    );\r\n  }\r\n});\r\n\r\nconst handleCitySelect = (cityName: string): void => {\r\n  emit(\"update:modelValue\", cityName);\r\n  emit(\"change\", cityName);\r\n  visible.value = false;\r\n};\r\n\r\nconst handleSearchSelect = (value: string): void => {\r\n  if (value) {\r\n    handleCitySelect(value);\r\n    searchValue.value = \"\";\r\n  }\r\n};\r\n\r\nconst scrollToLetter = (letter: string): void => {\r\n  const element = document.getElementById(`letter-${letter}`);\r\n  if (element) {\r\n    element.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\r\n  }\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-05-30\r\n * @Description: 城市选择器组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <NPopover\r\n    v-model:show=\"visible\"\r\n    placement=\"bottom-start\"\r\n    :width=\"430\"\r\n    trigger=\"click\"\r\n    :show-arrow=\"false\"\r\n  >\r\n    <template #trigger>\r\n      <slot name=\"trigger\" :value=\"modelValue\" :visible=\"visible\">\r\n        <div class=\"city-selector-trigger\">\r\n          <span class=\"city-selector-trigger__text\">{{\r\n            modelValue || placeholder\r\n          }}</span>\r\n        </div>\r\n      </slot>\r\n    </template>\r\n\r\n    <div class=\"city-selector-content\">\r\n      <div class=\"city-selector-header\">\r\n        <NRadioGroup v-model:value=\"radioValue\" size=\"small\">\r\n          <NRadioButton value=\"city\">按城市</NRadioButton>\r\n          <NRadioButton value=\"province\">按省份</NRadioButton>\r\n        </NRadioGroup>\r\n        <NSelect\r\n          v-model:value=\"searchValue\"\r\n          class=\"city-selector-search\"\r\n          :options=\"searchOptions\"\r\n          filterable\r\n          clearable\r\n          placeholder=\"搜索城市\"\r\n          @update:value=\"handleSearchSelect\"\r\n        />\r\n      </div>\r\n\r\n      <div v-if=\"showLetters\" class=\"city-selector-letters\">\r\n        <span\r\n          v-for=\"letter in letters\"\r\n          :key=\"letter\"\r\n          class=\"city-selector-letter\"\r\n          @click=\"scrollToLetter(letter)\"\r\n        >\r\n          {{ letter }}\r\n        </span>\r\n      </div>\r\n\r\n      <NScrollbar class=\"city-selector-body\">\r\n        <div v-if=\"radioValue === 'city'\" class=\"city-list\">\r\n          <div\r\n            v-for=\"(cities, letter) in cityDataByLetter\"\r\n            :key=\"letter\"\r\n            :id=\"`letter-${letter}`\"\r\n            class=\"city-group\"\r\n          >\r\n            <div class=\"city-group__letter\">{{ letter }}:</div>\r\n            <div class=\"city-group__cities\">\r\n              <span\r\n                v-for=\"(city, index) in cities\"\r\n                :key=\"`${letter}-${index}`\"\r\n                class=\"city-item\"\r\n                :class=\"{ 'is-active': modelValue === city.name }\"\r\n                @click=\"handleCitySelect(city.name)\"\r\n              >\r\n                {{ city.name }}\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div v-else class=\"province-list\">\r\n          <div\r\n            v-for=\"province in allProvinces\"\r\n            :key=\"province.id\"\r\n            :id=\"`letter-${province.id}`\"\r\n            class=\"province-group\"\r\n          >\r\n            <div class=\"province-group__name\">{{ province.name }}:</div>\r\n            <div class=\"province-group__cities\">\r\n              <span\r\n                v-for=\"(city, index) in province.data\"\r\n                :key=\"`${province.id}-${index}`\"\r\n                class=\"city-item\"\r\n                :class=\"{ 'is-active': modelValue === city }\"\r\n                @click=\"handleCitySelect(city)\"\r\n              >\r\n                {{ city }}\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </NScrollbar>\r\n    </div>\r\n  </NPopover>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, onMounted } from \"vue\";\r\nimport {\r\n  NPopover,\r\n  NRadioGroup,\r\n  NRadioButton,\r\n  NSelect,\r\n  NScrollbar,\r\n} from \"naive-ui\";\r\nimport type { SelectOption } from \"naive-ui\";\r\nimport provinceData from \"./province.json\";\r\n\r\ndefineOptions({ name: \"C_City\" });\r\n\r\ninterface CityItem {\r\n  id: number;\r\n  spell: string;\r\n  name: string;\r\n}\r\n\r\n// 城市数据懒加载（83KB JSON 仅在组件挂载时加载）\r\nconst cityData = ref<{ cities: Record<string, CityItem[]> } | null>(null);\r\n\r\nonMounted(async () => {\r\n  const mod = await import(\"./city.json\");\r\n  cityData.value = mod.default ?? mod;\r\n});\r\n\r\ninterface ProvinceItem {\r\n  id?: string;\r\n  name: string;\r\n  data: string[];\r\n}\r\n\r\ninterface Props {\r\n  modelValue?: string;\r\n  placeholder?: string;\r\n  showLetters?: boolean;\r\n}\r\n\r\ninterface Emits {\r\n  (e: \"update:modelValue\", value: string): void;\r\n  (e: \"change\", value: string): void;\r\n}\r\n\r\nwithDefaults(defineProps<Props>(), {\r\n  placeholder: \"请选择城市\",\r\n  showLetters: true,\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst visible = ref(false);\r\nconst radioValue = ref<\"city\" | \"province\">(\"city\");\r\nconst searchValue = ref(\"\");\r\n\r\nconst allProvinces = computed(() => {\r\n  const provinces: ProvinceItem[] = [];\r\n  Object.values(provinceData).forEach((group) => {\r\n    provinces.push(...(group as ProvinceItem[]));\r\n  });\r\n  return provinces;\r\n});\r\n\r\nconst cityDataByLetter = computed(() => {\r\n  if (cityData.value?.cities) {\r\n    return cityData.value.cities;\r\n  }\r\n  // 数据未加载时，从省份数据生成城市索引作为 fallback\r\n  const cities: Record<string, CityItem[]> = {};\r\n  let cityId = 1;\r\n  const citySet = new Set<string>();\r\n  allProvinces.value.forEach((province) => {\r\n    province.data.forEach((cityName) => {\r\n      citySet.add(cityName);\r\n    });\r\n  });\r\n  Array.from(citySet).forEach((cityName) => {\r\n    const letter = cityName[0].toUpperCase();\r\n    if (!cities[letter]) cities[letter] = [];\r\n    cities[letter].push({ id: cityId++, name: cityName, spell: \"\" });\r\n  });\r\n  const sortedCities: Record<string, CityItem[]> = {};\r\n  Object.keys(cities)\r\n    .sort()\r\n    .forEach((letter) => {\r\n      sortedCities[letter] = cities[letter].sort((a, b) =>\r\n        a.name.localeCompare(b.name, \"zh-CN\"),\r\n      );\r\n    });\r\n  return sortedCities;\r\n});\r\n\r\nconst letters = computed(() => {\r\n  if (radioValue.value === \"city\") {\r\n    return Object.keys(cityDataByLetter.value).sort();\r\n  } else {\r\n    const provinceLetters = new Set<string>();\r\n    Object.keys(provinceData).forEach((key) => {\r\n      if (key !== \"直辖市\" && key !== \"港澳\") {\r\n        provinceLetters.add(key);\r\n      }\r\n    });\r\n    const result = Array.from(provinceLetters).sort();\r\n    result.push(\"直辖市\", \"港澳\");\r\n    return result;\r\n  }\r\n});\r\n\r\nconst searchOptions = computed((): SelectOption[] => {\r\n  if (radioValue.value === \"city\") {\r\n    const options: SelectOption[] = [];\r\n    Object.values(cityDataByLetter.value).forEach((cities) => {\r\n      (cities as CityItem[]).forEach((city) => {\r\n        options.push({\r\n          label: city.name,\r\n          value: city.name,\r\n        });\r\n      });\r\n    });\r\n    return options;\r\n  } else {\r\n    return allProvinces.value.flatMap((province) =>\r\n      province.data.map((city) => ({\r\n        label: `${city} (${province.name})`,\r\n        value: city,\r\n      })),\r\n    );\r\n  }\r\n});\r\n\r\nconst handleCitySelect = (cityName: string): void => {\r\n  emit(\"update:modelValue\", cityName);\r\n  emit(\"change\", cityName);\r\n  visible.value = false;\r\n};\r\n\r\nconst handleSearchSelect = (value: string): void => {\r\n  if (value) {\r\n    handleCitySelect(value);\r\n    searchValue.value = \"\";\r\n  }\r\n};\r\n\r\nconst scrollToLetter = (letter: string): void => {\r\n  const element = document.getElementById(`letter-${letter}`);\r\n  if (element) {\r\n    element.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\r\n  }\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n"],"mappings":"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"}

package/dist/C_Code.cjs

@@ -1,5 +1 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-require('./C_Icon.js');
-const require_C_Code = require('./C_Code.js');
-
-exports.C_Code = require_C_Code.C_Code_default;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./C_Icon.js`);const e=require(`./C_Code.js`);exports.C_Code=e.t;

package/dist/C_Code.js

@@ -1,4 +1 @@
-import "./C_Icon2.js";
-import { t as C_Code_default } from "./C_Code2.js";
-
-export { C_Code_default as C_Code };
+import"./C_Icon2.js";import{t as e}from"./C_Code2.js";export{e as C_Code};

package/dist/C_Code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"C_Code.js","names":["showHeader","title","language","showFullscreen","code","showLineNumbers","wordWrap","trim"],"sources":["../src/components/C_Code/index.vue","../src/components/C_Code/index.vue","../src/components/C_Code/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-19\r\n * @Description: 全局代码高亮组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div class=\"c-code-wrapper\">\r\n    <!-- 代码标题栏 -->\r\n    <div v-if=\"showHeader\" class=\"c-code-header\">\r\n      <div class=\"c-code-title\">\r\n        <C_Icon\r\n          v-if=\"languageIcon\"\r\n          :name=\"languageIcon\"\r\n          :size=\"16\"\r\n          class=\"mr-2\"\r\n        />\r\n        <span>{{ title || getLanguageTitle(language) }}</span>\r\n      </div>\r\n      <div class=\"c-code-actions\">\r\n        <NTooltip trigger=\"hover\">\r\n          <template #trigger>\r\n            <NButton\r\n              size=\"tiny\"\r\n              quaternary\r\n              @click=\"copyCode\"\r\n              :loading=\"copying\"\r\n            >\r\n              <template #icon>\r\n                <C_Icon\r\n                  :name=\"copying ? 'mdi:loading' : 'mdi:content-copy'\"\r\n                  :loading=\"copying\"\r\n                />\r\n              </template>\r\n            </NButton>\r\n          </template>\r\n          复制代码\r\n        </NTooltip>\r\n\r\n        <NTooltip v-if=\"showFullscreen\" trigger=\"hover\">\r\n          <template #trigger>\r\n            <NButton size=\"tiny\" quaternary @click=\"toggleFullscreen\">\r\n              <template #icon>\r\n                <C_Icon\r\n                  :name=\"\r\n                    isFullscreen ? 'mdi:fullscreen-exit' : 'mdi:fullscreen'\r\n                  \"\r\n                />\r\n              </template>\r\n            </NButton>\r\n          </template>\r\n          {{ isFullscreen ? \"退出全屏\" : \"全屏查看\" }}\r\n        </NTooltip>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- 代码内容区域 -->\r\n    <div class=\"c-code-content\">\r\n      <div\r\n        class=\"code-wrapper\"\r\n        @mouseenter=\"showFloatingCopy = true\"\r\n        @mouseleave=\"showFloatingCopy = false\"\r\n      >\r\n        <NCode\r\n          :key=\"`code-${language}-${code.length}`\"\r\n          :code=\"code\"\r\n          :language=\"language\"\r\n          :hljs=\"hljs\"\r\n          :show-line-numbers=\"showLineNumbers\"\r\n          :word-wrap=\"wordWrap\"\r\n          :trim=\"trim\"\r\n          :style=\"codeStyle\"\r\n          @click=\"emit('click', $event)\"\r\n        />\r\n\r\n        <!-- 悬浮复制按钮 -->\r\n        <Transition name=\"fade\">\r\n          <div v-if=\"showFloatingCopy && !showHeader\" class=\"floating-copy-btn\">\r\n            <NTooltip trigger=\"hover\">\r\n              <template #trigger>\r\n                <NButton\r\n                  size=\"small\"\r\n                  quaternary\r\n                  @click=\"copyCode\"\r\n                  :loading=\"copying\"\r\n                  class=\"copy-floating\"\r\n                >\r\n                  <template #icon>\r\n                    <C_Icon\r\n                      :name=\"copying ? 'mdi:loading' : 'mdi:content-copy'\"\r\n                      :loading=\"copying\"\r\n                    />\r\n                  </template>\r\n                </NButton>\r\n              </template>\r\n              复制代码\r\n            </NTooltip>\r\n          </div>\r\n        </Transition>\r\n      </div>\r\n\r\n      <!-- 语言加载状态 -->\r\n      <div v-if=\"languageLoading\" class=\"c-code-loading\">\r\n        <NSpin size=\"small\" />\r\n        <span class=\"ml-2\">正在加载 {{ language }} 语言包...</span>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- 全屏模态框 -->\r\n    <NModal\r\n      v-model:show=\"isFullscreen\"\r\n      :mask-closable=\"false\"\r\n      :show-icon=\"false\"\r\n      :bordered=\"false\"\r\n      style=\"width: 100vw; height: 100vh; margin: 0; padding: 0\"\r\n    >\r\n      <div class=\"fullscreen-content\">\r\n        <div class=\"fullscreen-header\">\r\n          <div class=\"fullscreen-title\">\r\n            <C_Icon\r\n              v-if=\"languageIcon\"\r\n              :name=\"languageIcon\"\r\n              :size=\"16\"\r\n              class=\"mr-2\"\r\n            />\r\n            <span>{{ title || getLanguageTitle(language) }}</span>\r\n          </div>\r\n          <NButton size=\"small\" quaternary @click=\"toggleFullscreen\">\r\n            <template #icon>\r\n              <C_Icon name=\"mdi:close\" />\r\n            </template>\r\n          </NButton>\r\n        </div>\r\n        <div class=\"fullscreen-body\">\r\n          <NCode\r\n            :key=\"`fullscreen-code-${language}-${code.length}`\"\r\n            :code=\"code\"\r\n            :language=\"language\"\r\n            :hljs=\"hljs\"\r\n            :show-line-numbers=\"showLineNumbers\"\r\n            :word-wrap=\"wordWrap\"\r\n            :trim=\"trim\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </NModal>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport {\r\n  ref,\r\n  computed,\r\n  watch,\r\n  onMounted,\r\n  onUnmounted,\r\n  nextTick,\r\n  inject,\r\n} from \"vue\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\n\r\n// 直接在组件内定义 HighlightManager 接口，避免导入错误\r\ninterface HighlightManager {\r\n  getHljs?: () => any;\r\n  loadLanguage?: (language: string) => Promise<void>;\r\n  getLoadedLanguages?: () => string[];\r\n}\r\n\r\n// 组件名称定义\r\ndefineOptions({\r\n  name: \"CCode\",\r\n});\r\n\r\ninterface Props {\r\n  code: string;\r\n  language?: string;\r\n  title?: string;\r\n  showHeader?: boolean;\r\n  showLineNumbers?: boolean;\r\n  wordWrap?: boolean;\r\n  trim?: boolean;\r\n  showFullscreen?: boolean;\r\n  maxHeight?: string | number;\r\n  autoLoadLanguage?: boolean;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  code: \"\",\r\n  language: \"text\",\r\n  showHeader: true,\r\n  showLineNumbers: true,\r\n  wordWrap: false,\r\n  trim: true,\r\n  showFullscreen: false,\r\n  autoLoadLanguage: true,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  copy: [code: string];\r\n  click: [event: MouseEvent];\r\n  fullscreen: [isFullscreen: boolean];\r\n}>();\r\n\r\n// 尝试获取 highlight 实例（如果用户安装了插件）\r\nconst highlightManager = inject<HighlightManager | null>(\r\n  \"highlightManager\",\r\n  null,\r\n);\r\n\r\nconst copying = ref(false);\r\nconst isFullscreen = ref(false);\r\nconst languageLoading = ref(false);\r\nconst showFloatingCopy = ref(false);\r\n\r\n// 安全地获取 hljs 实例\r\nconst hljs = computed(() => {\r\n  try {\r\n    return highlightManager?.getHljs?.() || null;\r\n  } catch (error) {\r\n    console.warn(\"Highlight.js not available:\", error);\r\n    return null;\r\n  }\r\n});\r\n\r\n// 语言图标映射（使用标准的 MDI 图标名称）\r\nconst languageIcon = computed(() => {\r\n  const iconMap: Record<string, string> = {\r\n    javascript: \"mdi:language-javascript\",\r\n    typescript: \"mdi:language-typescript\",\r\n    python: \"mdi:language-python\",\r\n    html: \"mdi:language-html5\",\r\n    css: \"mdi:language-css3\",\r\n    vue: \"mdi:vuejs\",\r\n    react: \"mdi:react\",\r\n    json: \"mdi:code-json\",\r\n    java: \"mdi:language-java\",\r\n    cpp: \"mdi:language-cpp\",\r\n    go: \"mdi:language-go\",\r\n    rust: \"mdi:language-rust\",\r\n    php: \"mdi:language-php\",\r\n    csharp: \"mdi:language-csharp\",\r\n    sql: \"mdi:database\",\r\n    yaml: \"mdi:file-code\",\r\n    xml: \"mdi:xml\",\r\n    markdown: \"mdi:language-markdown\",\r\n    bash: \"mdi:bash\",\r\n    shell: \"mdi:console\",\r\n    powershell: \"mdi:powershell\",\r\n    swift: \"mdi:language-swift\",\r\n    kotlin: \"mdi:language-kotlin\",\r\n    ruby: \"mdi:language-ruby\",\r\n  };\r\n  return iconMap[props.language.toLowerCase()] || \"mdi:code-braces\";\r\n});\r\n\r\n// 代码样式\r\nconst codeStyle = computed(() => {\r\n  if (!props.maxHeight) return {};\r\n  return {\r\n    maxHeight:\r\n      typeof props.maxHeight === \"number\"\r\n        ? `${props.maxHeight}px`\r\n        : props.maxHeight,\r\n  };\r\n});\r\n\r\n// 自动加载语言包\r\nwatch(\r\n  () => props.language,\r\n  async (newLanguage) => {\r\n    if (!props.autoLoadLanguage || newLanguage === \"text\" || !highlightManager)\r\n      return;\r\n\r\n    const loadedLanguages = highlightManager.getLoadedLanguages?.() || [];\r\n    if (loadedLanguages.includes(newLanguage)) return;\r\n\r\n    languageLoading.value = true;\r\n    try {\r\n      await highlightManager.loadLanguage?.(newLanguage);\r\n      await nextTick();\r\n    } catch (error) {\r\n      console.warn(`Failed to load language: ${newLanguage}`, error);\r\n    } finally {\r\n      languageLoading.value = false;\r\n    }\r\n  },\r\n  { immediate: true },\r\n);\r\n\r\n/**\r\n * 复制代码到剪贴板\r\n */\r\nasync function copyCode() {\r\n  if (copying.value) return;\r\n  copying.value = true;\r\n\r\n  try {\r\n    await navigator.clipboard.writeText(props.code);\r\n    emit(\"copy\", props.code);\r\n  } catch (error) {\r\n    console.error(\"Copy failed:\", error);\r\n  } finally {\r\n    copying.value = false;\r\n  }\r\n}\r\n\r\n/**\r\n * 切换全屏显示状态\r\n */\r\nfunction toggleFullscreen() {\r\n  isFullscreen.value = !isFullscreen.value;\r\n  emit(\"fullscreen\", isFullscreen.value);\r\n}\r\n\r\n/**\r\n * 获取编程语言的显示标题\r\n */\r\nfunction getLanguageTitle(lang: string): string {\r\n  const titleMap: Record<string, string> = {\r\n    javascript: \"JavaScript\",\r\n    typescript: \"TypeScript\",\r\n    python: \"Python\",\r\n    java: \"Java\",\r\n    cpp: \"C++\",\r\n    csharp: \"C#\",\r\n    php: \"PHP\",\r\n    go: \"Go\",\r\n    rust: \"Rust\",\r\n    html: \"HTML\",\r\n    css: \"CSS\",\r\n    json: \"JSON\",\r\n    bash: \"Bash\",\r\n    shell: \"Shell\",\r\n    yaml: \"YAML\",\r\n    xml: \"XML\",\r\n    markdown: \"Markdown\",\r\n    sql: \"SQL\",\r\n    powershell: \"PowerShell\",\r\n    swift: \"Swift\",\r\n    kotlin: \"Kotlin\",\r\n    ruby: \"Ruby\",\r\n    vue: \"Vue\",\r\n    react: \"React\",\r\n  };\r\n  return titleMap[lang.toLowerCase()] || lang.toUpperCase();\r\n}\r\n\r\n/**\r\n * 处理ESC键退出全屏\r\n */\r\nfunction handleEscapeKey(event: KeyboardEvent) {\r\n  if (event.key === \"Escape\" && isFullscreen.value) {\r\n    toggleFullscreen();\r\n  }\r\n}\r\n\r\nonMounted(() => {\r\n  document.addEventListener(\"keydown\", handleEscapeKey);\r\n});\r\n\r\nonUnmounted(() => {\r\n  document.removeEventListener(\"keydown\", handleEscapeKey);\r\n});\r\n\r\ndefineExpose({\r\n  copyCode,\r\n  toggleFullscreen,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.mr-2 {\r\n  margin-right: 0.5rem;\r\n}\r\n\r\n.ml-2 {\r\n  margin-left: 0.5rem;\r\n}\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-19\r\n * @Description: 全局代码高亮组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div class=\"c-code-wrapper\">\r\n    <!-- 代码标题栏 -->\r\n    <div v-if=\"showHeader\" class=\"c-code-header\">\r\n      <div class=\"c-code-title\">\r\n        <C_Icon\r\n          v-if=\"languageIcon\"\r\n          :name=\"languageIcon\"\r\n          :size=\"16\"\r\n          class=\"mr-2\"\r\n        />\r\n        <span>{{ title || getLanguageTitle(language) }}</span>\r\n      </div>\r\n      <div class=\"c-code-actions\">\r\n        <NTooltip trigger=\"hover\">\r\n          <template #trigger>\r\n            <NButton\r\n              size=\"tiny\"\r\n              quaternary\r\n              @click=\"copyCode\"\r\n              :loading=\"copying\"\r\n            >\r\n              <template #icon>\r\n                <C_Icon\r\n                  :name=\"copying ? 'mdi:loading' : 'mdi:content-copy'\"\r\n                  :loading=\"copying\"\r\n                />\r\n              </template>\r\n            </NButton>\r\n          </template>\r\n          复制代码\r\n        </NTooltip>\r\n\r\n        <NTooltip v-if=\"showFullscreen\" trigger=\"hover\">\r\n          <template #trigger>\r\n            <NButton size=\"tiny\" quaternary @click=\"toggleFullscreen\">\r\n              <template #icon>\r\n                <C_Icon\r\n                  :name=\"\r\n                    isFullscreen ? 'mdi:fullscreen-exit' : 'mdi:fullscreen'\r\n                  \"\r\n                />\r\n              </template>\r\n            </NButton>\r\n          </template>\r\n          {{ isFullscreen ? \"退出全屏\" : \"全屏查看\" }}\r\n        </NTooltip>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- 代码内容区域 -->\r\n    <div class=\"c-code-content\">\r\n      <div\r\n        class=\"code-wrapper\"\r\n        @mouseenter=\"showFloatingCopy = true\"\r\n        @mouseleave=\"showFloatingCopy = false\"\r\n      >\r\n        <NCode\r\n          :key=\"`code-${language}-${code.length}`\"\r\n          :code=\"code\"\r\n          :language=\"language\"\r\n          :hljs=\"hljs\"\r\n          :show-line-numbers=\"showLineNumbers\"\r\n          :word-wrap=\"wordWrap\"\r\n          :trim=\"trim\"\r\n          :style=\"codeStyle\"\r\n          @click=\"emit('click', $event)\"\r\n        />\r\n\r\n        <!-- 悬浮复制按钮 -->\r\n        <Transition name=\"fade\">\r\n          <div v-if=\"showFloatingCopy && !showHeader\" class=\"floating-copy-btn\">\r\n            <NTooltip trigger=\"hover\">\r\n              <template #trigger>\r\n                <NButton\r\n                  size=\"small\"\r\n                  quaternary\r\n                  @click=\"copyCode\"\r\n                  :loading=\"copying\"\r\n                  class=\"copy-floating\"\r\n                >\r\n                  <template #icon>\r\n                    <C_Icon\r\n                      :name=\"copying ? 'mdi:loading' : 'mdi:content-copy'\"\r\n                      :loading=\"copying\"\r\n                    />\r\n                  </template>\r\n                </NButton>\r\n              </template>\r\n              复制代码\r\n            </NTooltip>\r\n          </div>\r\n        </Transition>\r\n      </div>\r\n\r\n      <!-- 语言加载状态 -->\r\n      <div v-if=\"languageLoading\" class=\"c-code-loading\">\r\n        <NSpin size=\"small\" />\r\n        <span class=\"ml-2\">正在加载 {{ language }} 语言包...</span>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- 全屏模态框 -->\r\n    <NModal\r\n      v-model:show=\"isFullscreen\"\r\n      :mask-closable=\"false\"\r\n      :show-icon=\"false\"\r\n      :bordered=\"false\"\r\n      style=\"width: 100vw; height: 100vh; margin: 0; padding: 0\"\r\n    >\r\n      <div class=\"fullscreen-content\">\r\n        <div class=\"fullscreen-header\">\r\n          <div class=\"fullscreen-title\">\r\n            <C_Icon\r\n              v-if=\"languageIcon\"\r\n              :name=\"languageIcon\"\r\n              :size=\"16\"\r\n              class=\"mr-2\"\r\n            />\r\n            <span>{{ title || getLanguageTitle(language) }}</span>\r\n          </div>\r\n          <NButton size=\"small\" quaternary @click=\"toggleFullscreen\">\r\n            <template #icon>\r\n              <C_Icon name=\"mdi:close\" />\r\n            </template>\r\n          </NButton>\r\n        </div>\r\n        <div class=\"fullscreen-body\">\r\n          <NCode\r\n            :key=\"`fullscreen-code-${language}-${code.length}`\"\r\n            :code=\"code\"\r\n            :language=\"language\"\r\n            :hljs=\"hljs\"\r\n            :show-line-numbers=\"showLineNumbers\"\r\n            :word-wrap=\"wordWrap\"\r\n            :trim=\"trim\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </NModal>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport {\r\n  ref,\r\n  computed,\r\n  watch,\r\n  onMounted,\r\n  onUnmounted,\r\n  nextTick,\r\n  inject,\r\n} from \"vue\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\n\r\n// 直接在组件内定义 HighlightManager 接口，避免导入错误\r\ninterface HighlightManager {\r\n  getHljs?: () => any;\r\n  loadLanguage?: (language: string) => Promise<void>;\r\n  getLoadedLanguages?: () => string[];\r\n}\r\n\r\n// 组件名称定义\r\ndefineOptions({\r\n  name: \"CCode\",\r\n});\r\n\r\ninterface Props {\r\n  code: string;\r\n  language?: string;\r\n  title?: string;\r\n  showHeader?: boolean;\r\n  showLineNumbers?: boolean;\r\n  wordWrap?: boolean;\r\n  trim?: boolean;\r\n  showFullscreen?: boolean;\r\n  maxHeight?: string | number;\r\n  autoLoadLanguage?: boolean;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  code: \"\",\r\n  language: \"text\",\r\n  showHeader: true,\r\n  showLineNumbers: true,\r\n  wordWrap: false,\r\n  trim: true,\r\n  showFullscreen: false,\r\n  autoLoadLanguage: true,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  copy: [code: string];\r\n  click: [event: MouseEvent];\r\n  fullscreen: [isFullscreen: boolean];\r\n}>();\r\n\r\n// 尝试获取 highlight 实例（如果用户安装了插件）\r\nconst highlightManager = inject<HighlightManager | null>(\r\n  \"highlightManager\",\r\n  null,\r\n);\r\n\r\nconst copying = ref(false);\r\nconst isFullscreen = ref(false);\r\nconst languageLoading = ref(false);\r\nconst showFloatingCopy = ref(false);\r\n\r\n// 安全地获取 hljs 实例\r\nconst hljs = computed(() => {\r\n  try {\r\n    return highlightManager?.getHljs?.() || null;\r\n  } catch (error) {\r\n    console.warn(\"Highlight.js not available:\", error);\r\n    return null;\r\n  }\r\n});\r\n\r\n// 语言图标映射（使用标准的 MDI 图标名称）\r\nconst languageIcon = computed(() => {\r\n  const iconMap: Record<string, string> = {\r\n    javascript: \"mdi:language-javascript\",\r\n    typescript: \"mdi:language-typescript\",\r\n    python: \"mdi:language-python\",\r\n    html: \"mdi:language-html5\",\r\n    css: \"mdi:language-css3\",\r\n    vue: \"mdi:vuejs\",\r\n    react: \"mdi:react\",\r\n    json: \"mdi:code-json\",\r\n    java: \"mdi:language-java\",\r\n    cpp: \"mdi:language-cpp\",\r\n    go: \"mdi:language-go\",\r\n    rust: \"mdi:language-rust\",\r\n    php: \"mdi:language-php\",\r\n    csharp: \"mdi:language-csharp\",\r\n    sql: \"mdi:database\",\r\n    yaml: \"mdi:file-code\",\r\n    xml: \"mdi:xml\",\r\n    markdown: \"mdi:language-markdown\",\r\n    bash: \"mdi:bash\",\r\n    shell: \"mdi:console\",\r\n    powershell: \"mdi:powershell\",\r\n    swift: \"mdi:language-swift\",\r\n    kotlin: \"mdi:language-kotlin\",\r\n    ruby: \"mdi:language-ruby\",\r\n  };\r\n  return iconMap[props.language.toLowerCase()] || \"mdi:code-braces\";\r\n});\r\n\r\n// 代码样式\r\nconst codeStyle = computed(() => {\r\n  if (!props.maxHeight) return {};\r\n  return {\r\n    maxHeight:\r\n      typeof props.maxHeight === \"number\"\r\n        ? `${props.maxHeight}px`\r\n        : props.maxHeight,\r\n  };\r\n});\r\n\r\n// 自动加载语言包\r\nwatch(\r\n  () => props.language,\r\n  async (newLanguage) => {\r\n    if (!props.autoLoadLanguage || newLanguage === \"text\" || !highlightManager)\r\n      return;\r\n\r\n    const loadedLanguages = highlightManager.getLoadedLanguages?.() || [];\r\n    if (loadedLanguages.includes(newLanguage)) return;\r\n\r\n    languageLoading.value = true;\r\n    try {\r\n      await highlightManager.loadLanguage?.(newLanguage);\r\n      await nextTick();\r\n    } catch (error) {\r\n      console.warn(`Failed to load language: ${newLanguage}`, error);\r\n    } finally {\r\n      languageLoading.value = false;\r\n    }\r\n  },\r\n  { immediate: true },\r\n);\r\n\r\n/**\r\n * 复制代码到剪贴板\r\n */\r\nasync function copyCode() {\r\n  if (copying.value) return;\r\n  copying.value = true;\r\n\r\n  try {\r\n    await navigator.clipboard.writeText(props.code);\r\n    emit(\"copy\", props.code);\r\n  } catch (error) {\r\n    console.error(\"Copy failed:\", error);\r\n  } finally {\r\n    copying.value = false;\r\n  }\r\n}\r\n\r\n/**\r\n * 切换全屏显示状态\r\n */\r\nfunction toggleFullscreen() {\r\n  isFullscreen.value = !isFullscreen.value;\r\n  emit(\"fullscreen\", isFullscreen.value);\r\n}\r\n\r\n/**\r\n * 获取编程语言的显示标题\r\n */\r\nfunction getLanguageTitle(lang: string): string {\r\n  const titleMap: Record<string, string> = {\r\n    javascript: \"JavaScript\",\r\n    typescript: \"TypeScript\",\r\n    python: \"Python\",\r\n    java: \"Java\",\r\n    cpp: \"C++\",\r\n    csharp: \"C#\",\r\n    php: \"PHP\",\r\n    go: \"Go\",\r\n    rust: \"Rust\",\r\n    html: \"HTML\",\r\n    css: \"CSS\",\r\n    json: \"JSON\",\r\n    bash: \"Bash\",\r\n    shell: \"Shell\",\r\n    yaml: \"YAML\",\r\n    xml: \"XML\",\r\n    markdown: \"Markdown\",\r\n    sql: \"SQL\",\r\n    powershell: \"PowerShell\",\r\n    swift: \"Swift\",\r\n    kotlin: \"Kotlin\",\r\n    ruby: \"Ruby\",\r\n    vue: \"Vue\",\r\n    react: \"React\",\r\n  };\r\n  return titleMap[lang.toLowerCase()] || lang.toUpperCase();\r\n}\r\n\r\n/**\r\n * 处理ESC键退出全屏\r\n */\r\nfunction handleEscapeKey(event: KeyboardEvent) {\r\n  if (event.key === \"Escape\" && isFullscreen.value) {\r\n    toggleFullscreen();\r\n  }\r\n}\r\n\r\nonMounted(() => {\r\n  document.addEventListener(\"keydown\", handleEscapeKey);\r\n});\r\n\r\nonUnmounted(() => {\r\n  document.removeEventListener(\"keydown\", handleEscapeKey);\r\n});\r\n\r\ndefineExpose({\r\n  copyCode,\r\n  toggleFullscreen,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.mr-2 {\r\n  margin-right: 0.5rem;\r\n}\r\n\r\n.ml-2 {\r\n  margin-left: 0.5rem;\r\n}\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-19\r\n * @Description: 全局代码高亮组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div class=\"c-code-wrapper\">\r\n    <!-- 代码标题栏 -->\r\n    <div v-if=\"showHeader\" class=\"c-code-header\">\r\n      <div class=\"c-code-title\">\r\n        <C_Icon\r\n          v-if=\"languageIcon\"\r\n          :name=\"languageIcon\"\r\n          :size=\"16\"\r\n          class=\"mr-2\"\r\n        />\r\n        <span>{{ title || getLanguageTitle(language) }}</span>\r\n      </div>\r\n      <div class=\"c-code-actions\">\r\n        <NTooltip trigger=\"hover\">\r\n          <template #trigger>\r\n            <NButton\r\n              size=\"tiny\"\r\n              quaternary\r\n              @click=\"copyCode\"\r\n              :loading=\"copying\"\r\n            >\r\n              <template #icon>\r\n                <C_Icon\r\n                  :name=\"copying ? 'mdi:loading' : 'mdi:content-copy'\"\r\n                  :loading=\"copying\"\r\n                />\r\n              </template>\r\n            </NButton>\r\n          </template>\r\n          复制代码\r\n        </NTooltip>\r\n\r\n        <NTooltip v-if=\"showFullscreen\" trigger=\"hover\">\r\n          <template #trigger>\r\n            <NButton size=\"tiny\" quaternary @click=\"toggleFullscreen\">\r\n              <template #icon>\r\n                <C_Icon\r\n                  :name=\"\r\n                    isFullscreen ? 'mdi:fullscreen-exit' : 'mdi:fullscreen'\r\n                  \"\r\n                />\r\n              </template>\r\n            </NButton>\r\n          </template>\r\n          {{ isFullscreen ? \"退出全屏\" : \"全屏查看\" }}\r\n        </NTooltip>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- 代码内容区域 -->\r\n    <div class=\"c-code-content\">\r\n      <div\r\n        class=\"code-wrapper\"\r\n        @mouseenter=\"showFloatingCopy = true\"\r\n        @mouseleave=\"showFloatingCopy = false\"\r\n      >\r\n        <NCode\r\n          :key=\"`code-${language}-${code.length}`\"\r\n          :code=\"code\"\r\n          :language=\"language\"\r\n          :hljs=\"hljs\"\r\n          :show-line-numbers=\"showLineNumbers\"\r\n          :word-wrap=\"wordWrap\"\r\n          :trim=\"trim\"\r\n          :style=\"codeStyle\"\r\n          @click=\"emit('click', $event)\"\r\n        />\r\n\r\n        <!-- 悬浮复制按钮 -->\r\n        <Transition name=\"fade\">\r\n          <div v-if=\"showFloatingCopy && !showHeader\" class=\"floating-copy-btn\">\r\n            <NTooltip trigger=\"hover\">\r\n              <template #trigger>\r\n                <NButton\r\n                  size=\"small\"\r\n                  quaternary\r\n                  @click=\"copyCode\"\r\n                  :loading=\"copying\"\r\n                  class=\"copy-floating\"\r\n                >\r\n                  <template #icon>\r\n                    <C_Icon\r\n                      :name=\"copying ? 'mdi:loading' : 'mdi:content-copy'\"\r\n                      :loading=\"copying\"\r\n                    />\r\n                  </template>\r\n                </NButton>\r\n              </template>\r\n              复制代码\r\n            </NTooltip>\r\n          </div>\r\n        </Transition>\r\n      </div>\r\n\r\n      <!-- 语言加载状态 -->\r\n      <div v-if=\"languageLoading\" class=\"c-code-loading\">\r\n        <NSpin size=\"small\" />\r\n        <span class=\"ml-2\">正在加载 {{ language }} 语言包...</span>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- 全屏模态框 -->\r\n    <NModal\r\n      v-model:show=\"isFullscreen\"\r\n      :mask-closable=\"false\"\r\n      :show-icon=\"false\"\r\n      :bordered=\"false\"\r\n      style=\"width: 100vw; height: 100vh; margin: 0; padding: 0\"\r\n    >\r\n      <div class=\"fullscreen-content\">\r\n        <div class=\"fullscreen-header\">\r\n          <div class=\"fullscreen-title\">\r\n            <C_Icon\r\n              v-if=\"languageIcon\"\r\n              :name=\"languageIcon\"\r\n              :size=\"16\"\r\n              class=\"mr-2\"\r\n            />\r\n            <span>{{ title || getLanguageTitle(language) }}</span>\r\n          </div>\r\n          <NButton size=\"small\" quaternary @click=\"toggleFullscreen\">\r\n            <template #icon>\r\n              <C_Icon name=\"mdi:close\" />\r\n            </template>\r\n          </NButton>\r\n        </div>\r\n        <div class=\"fullscreen-body\">\r\n          <NCode\r\n            :key=\"`fullscreen-code-${language}-${code.length}`\"\r\n            :code=\"code\"\r\n            :language=\"language\"\r\n            :hljs=\"hljs\"\r\n            :show-line-numbers=\"showLineNumbers\"\r\n            :word-wrap=\"wordWrap\"\r\n            :trim=\"trim\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </NModal>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport {\r\n  ref,\r\n  computed,\r\n  watch,\r\n  onMounted,\r\n  onUnmounted,\r\n  nextTick,\r\n  inject,\r\n} from \"vue\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\n\r\n// 直接在组件内定义 HighlightManager 接口，避免导入错误\r\ninterface HighlightManager {\r\n  getHljs?: () => any;\r\n  loadLanguage?: (language: string) => Promise<void>;\r\n  getLoadedLanguages?: () => string[];\r\n}\r\n\r\n// 组件名称定义\r\ndefineOptions({\r\n  name: \"CCode\",\r\n});\r\n\r\ninterface Props {\r\n  code: string;\r\n  language?: string;\r\n  title?: string;\r\n  showHeader?: boolean;\r\n  showLineNumbers?: boolean;\r\n  wordWrap?: boolean;\r\n  trim?: boolean;\r\n  showFullscreen?: boolean;\r\n  maxHeight?: string | number;\r\n  autoLoadLanguage?: boolean;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  code: \"\",\r\n  language: \"text\",\r\n  showHeader: true,\r\n  showLineNumbers: true,\r\n  wordWrap: false,\r\n  trim: true,\r\n  showFullscreen: false,\r\n  autoLoadLanguage: true,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  copy: [code: string];\r\n  click: [event: MouseEvent];\r\n  fullscreen: [isFullscreen: boolean];\r\n}>();\r\n\r\n// 尝试获取 highlight 实例（如果用户安装了插件）\r\nconst highlightManager = inject<HighlightManager | null>(\r\n  \"highlightManager\",\r\n  null,\r\n);\r\n\r\nconst copying = ref(false);\r\nconst isFullscreen = ref(false);\r\nconst languageLoading = ref(false);\r\nconst showFloatingCopy = ref(false);\r\n\r\n// 安全地获取 hljs 实例\r\nconst hljs = computed(() => {\r\n  try {\r\n    return highlightManager?.getHljs?.() || null;\r\n  } catch (error) {\r\n    console.warn(\"Highlight.js not available:\", error);\r\n    return null;\r\n  }\r\n});\r\n\r\n// 语言图标映射（使用标准的 MDI 图标名称）\r\nconst languageIcon = computed(() => {\r\n  const iconMap: Record<string, string> = {\r\n    javascript: \"mdi:language-javascript\",\r\n    typescript: \"mdi:language-typescript\",\r\n    python: \"mdi:language-python\",\r\n    html: \"mdi:language-html5\",\r\n    css: \"mdi:language-css3\",\r\n    vue: \"mdi:vuejs\",\r\n    react: \"mdi:react\",\r\n    json: \"mdi:code-json\",\r\n    java: \"mdi:language-java\",\r\n    cpp: \"mdi:language-cpp\",\r\n    go: \"mdi:language-go\",\r\n    rust: \"mdi:language-rust\",\r\n    php: \"mdi:language-php\",\r\n    csharp: \"mdi:language-csharp\",\r\n    sql: \"mdi:database\",\r\n    yaml: \"mdi:file-code\",\r\n    xml: \"mdi:xml\",\r\n    markdown: \"mdi:language-markdown\",\r\n    bash: \"mdi:bash\",\r\n    shell: \"mdi:console\",\r\n    powershell: \"mdi:powershell\",\r\n    swift: \"mdi:language-swift\",\r\n    kotlin: \"mdi:language-kotlin\",\r\n    ruby: \"mdi:language-ruby\",\r\n  };\r\n  return iconMap[props.language.toLowerCase()] || \"mdi:code-braces\";\r\n});\r\n\r\n// 代码样式\r\nconst codeStyle = computed(() => {\r\n  if (!props.maxHeight) return {};\r\n  return {\r\n    maxHeight:\r\n      typeof props.maxHeight === \"number\"\r\n        ? `${props.maxHeight}px`\r\n        : props.maxHeight,\r\n  };\r\n});\r\n\r\n// 自动加载语言包\r\nwatch(\r\n  () => props.language,\r\n  async (newLanguage) => {\r\n    if (!props.autoLoadLanguage || newLanguage === \"text\" || !highlightManager)\r\n      return;\r\n\r\n    const loadedLanguages = highlightManager.getLoadedLanguages?.() || [];\r\n    if (loadedLanguages.includes(newLanguage)) return;\r\n\r\n    languageLoading.value = true;\r\n    try {\r\n      await highlightManager.loadLanguage?.(newLanguage);\r\n      await nextTick();\r\n    } catch (error) {\r\n      console.warn(`Failed to load language: ${newLanguage}`, error);\r\n    } finally {\r\n      languageLoading.value = false;\r\n    }\r\n  },\r\n  { immediate: true },\r\n);\r\n\r\n/**\r\n * 复制代码到剪贴板\r\n */\r\nasync function copyCode() {\r\n  if (copying.value) return;\r\n  copying.value = true;\r\n\r\n  try {\r\n    await navigator.clipboard.writeText(props.code);\r\n    emit(\"copy\", props.code);\r\n  } catch (error) {\r\n    console.error(\"Copy failed:\", error);\r\n  } finally {\r\n    copying.value = false;\r\n  }\r\n}\r\n\r\n/**\r\n * 切换全屏显示状态\r\n */\r\nfunction toggleFullscreen() {\r\n  isFullscreen.value = !isFullscreen.value;\r\n  emit(\"fullscreen\", isFullscreen.value);\r\n}\r\n\r\n/**\r\n * 获取编程语言的显示标题\r\n */\r\nfunction getLanguageTitle(lang: string): string {\r\n  const titleMap: Record<string, string> = {\r\n    javascript: \"JavaScript\",\r\n    typescript: \"TypeScript\",\r\n    python: \"Python\",\r\n    java: \"Java\",\r\n    cpp: \"C++\",\r\n    csharp: \"C#\",\r\n    php: \"PHP\",\r\n    go: \"Go\",\r\n    rust: \"Rust\",\r\n    html: \"HTML\",\r\n    css: \"CSS\",\r\n    json: \"JSON\",\r\n    bash: \"Bash\",\r\n    shell: \"Shell\",\r\n    yaml: \"YAML\",\r\n    xml: \"XML\",\r\n    markdown: \"Markdown\",\r\n    sql: \"SQL\",\r\n    powershell: \"PowerShell\",\r\n    swift: \"Swift\",\r\n    kotlin: \"Kotlin\",\r\n    ruby: \"Ruby\",\r\n    vue: \"Vue\",\r\n    react: \"React\",\r\n  };\r\n  return titleMap[lang.toLowerCase()] || lang.toUpperCase();\r\n}\r\n\r\n/**\r\n * 处理ESC键退出全屏\r\n */\r\nfunction handleEscapeKey(event: KeyboardEvent) {\r\n  if (event.key === \"Escape\" && isFullscreen.value) {\r\n    toggleFullscreen();\r\n  }\r\n}\r\n\r\nonMounted(() => {\r\n  document.addEventListener(\"keydown\", handleEscapeKey);\r\n});\r\n\r\nonUnmounted(() => {\r\n  document.removeEventListener(\"keydown\", handleEscapeKey);\r\n});\r\n\r\ndefineExpose({\r\n  copyCode,\r\n  toggleFullscreen,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.mr-2 {\r\n  margin-right: 0.5rem;\r\n}\r\n\r\n.ml-2 {\r\n  margin-left: 0.5rem;\r\n}\r\n</style>\r\n"],"mappings":"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"}

package/dist/C_Code2.js

@@ -1,347 +1,2 @@
-import { t as C_Icon_default } from "./C_Icon2.js";
-import { t as export_helper_default } from "./export-helper.js";
-import { NButton, NCode, NModal, NSpin, NTooltip } from "naive-ui";
-import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, nextTick, normalizeStyle, onMounted, onUnmounted, openBlock, ref, toDisplayString, watch, withCtx } from "vue";
-
-//#region src/components/C_Code/index.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1 = { class: "c-code-wrapper" };
-const _hoisted_2 = {
-	key: 0,
-	class: "c-code-header"
-};
-const _hoisted_3 = { class: "c-code-title" };
-const _hoisted_4 = { class: "c-code-actions" };
-const _hoisted_5 = { class: "c-code-content" };
-const _hoisted_6 = {
-	key: 0,
-	class: "floating-copy-btn"
-};
-const _hoisted_7 = {
-	key: 0,
-	class: "c-code-loading"
-};
-const _hoisted_8 = { class: "ml-2" };
-const _hoisted_9 = { class: "fullscreen-content" };
-const _hoisted_10 = { class: "fullscreen-header" };
-const _hoisted_11 = { class: "fullscreen-title" };
-const _hoisted_12 = { class: "fullscreen-body" };
-var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	name: "CCode",
-	__name: "index",
-	props: {
-		code: { default: "" },
-		language: { default: "text" },
-		title: {},
-		showHeader: {
-			type: Boolean,
-			default: true
-		},
-		showLineNumbers: {
-			type: Boolean,
-			default: true
-		},
-		wordWrap: {
-			type: Boolean,
-			default: false
-		},
-		trim: {
-			type: Boolean,
-			default: true
-		},
-		showFullscreen: {
-			type: Boolean,
-			default: false
-		},
-		maxHeight: {},
-		autoLoadLanguage: {
-			type: Boolean,
-			default: true
-		}
-	},
-	emits: [
-		"copy",
-		"click",
-		"fullscreen"
-	],
-	setup(__props, { expose: __expose, emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const highlightManager = inject("highlightManager", null);
-		const copying = ref(false);
-		const isFullscreen = ref(false);
-		const languageLoading = ref(false);
-		const showFloatingCopy = ref(false);
-		const hljs = computed(() => {
-			try {
-				return highlightManager?.getHljs?.() || null;
-			} catch (error) {
-				console.warn("Highlight.js not available:", error);
-				return null;
-			}
-		});
-		const languageIcon = computed(() => {
-			return {
-				javascript: "mdi:language-javascript",
-				typescript: "mdi:language-typescript",
-				python: "mdi:language-python",
-				html: "mdi:language-html5",
-				css: "mdi:language-css3",
-				vue: "mdi:vuejs",
-				react: "mdi:react",
-				json: "mdi:code-json",
-				java: "mdi:language-java",
-				cpp: "mdi:language-cpp",
-				go: "mdi:language-go",
-				rust: "mdi:language-rust",
-				php: "mdi:language-php",
-				csharp: "mdi:language-csharp",
-				sql: "mdi:database",
-				yaml: "mdi:file-code",
-				xml: "mdi:xml",
-				markdown: "mdi:language-markdown",
-				bash: "mdi:bash",
-				shell: "mdi:console",
-				powershell: "mdi:powershell",
-				swift: "mdi:language-swift",
-				kotlin: "mdi:language-kotlin",
-				ruby: "mdi:language-ruby"
-			}[props.language.toLowerCase()] || "mdi:code-braces";
-		});
-		const codeStyle = computed(() => {
-			if (!props.maxHeight) return {};
-			return { maxHeight: typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight };
-		});
-		watch(() => props.language, async (newLanguage) => {
-			if (!props.autoLoadLanguage || newLanguage === "text" || !highlightManager) return;
-			if ((highlightManager.getLoadedLanguages?.() || []).includes(newLanguage)) return;
-			languageLoading.value = true;
-			try {
-				await highlightManager.loadLanguage?.(newLanguage);
-				await nextTick();
-			} catch (error) {
-				console.warn(`Failed to load language: ${newLanguage}`, error);
-			} finally {
-				languageLoading.value = false;
-			}
-		}, { immediate: true });
-		/**
-		* 复制代码到剪贴板
-		*/
-		async function copyCode() {
-			if (copying.value) return;
-			copying.value = true;
-			try {
-				await navigator.clipboard.writeText(props.code);
-				emit("copy", props.code);
-			} catch (error) {
-				console.error("Copy failed:", error);
-			} finally {
-				copying.value = false;
-			}
-		}
-		/**
-		* 切换全屏显示状态
-		*/
-		function toggleFullscreen() {
-			isFullscreen.value = !isFullscreen.value;
-			emit("fullscreen", isFullscreen.value);
-		}
-		/**
-		* 获取编程语言的显示标题
-		*/
-		function getLanguageTitle(lang) {
-			return {
-				javascript: "JavaScript",
-				typescript: "TypeScript",
-				python: "Python",
-				java: "Java",
-				cpp: "C++",
-				csharp: "C#",
-				php: "PHP",
-				go: "Go",
-				rust: "Rust",
-				html: "HTML",
-				css: "CSS",
-				json: "JSON",
-				bash: "Bash",
-				shell: "Shell",
-				yaml: "YAML",
-				xml: "XML",
-				markdown: "Markdown",
-				sql: "SQL",
-				powershell: "PowerShell",
-				swift: "Swift",
-				kotlin: "Kotlin",
-				ruby: "Ruby",
-				vue: "Vue",
-				react: "React"
-			}[lang.toLowerCase()] || lang.toUpperCase();
-		}
-		/**
-		* 处理ESC键退出全屏
-		*/
-		function handleEscapeKey(event) {
-			if (event.key === "Escape" && isFullscreen.value) toggleFullscreen();
-		}
-		onMounted(() => {
-			document.addEventListener("keydown", handleEscapeKey);
-		});
-		onUnmounted(() => {
-			document.removeEventListener("keydown", handleEscapeKey);
-		});
-		__expose({
-			copyCode,
-			toggleFullscreen
-		});
-		return (_ctx, _cache) => {
-			const _component_NButton = NButton;
-			const _component_NTooltip = NTooltip;
-			const _component_NCode = NCode;
-			const _component_NSpin = NSpin;
-			const _component_NModal = NModal;
-			return openBlock(), createElementBlock("div", _hoisted_1, [
-				createCommentVNode(" 代码标题栏 "),
-				_ctx.showHeader ? (openBlock(), createElementBlock("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [languageIcon.value ? (openBlock(), createBlock(C_Icon_default, {
-					key: 0,
-					name: languageIcon.value,
-					size: 16,
-					class: "mr-2"
-				}, null, 8, ["name"])) : createCommentVNode("v-if", true), createElementVNode("span", null, toDisplayString(_ctx.title || getLanguageTitle(_ctx.language)), 1)]), createElementVNode("div", _hoisted_4, [createVNode(_component_NTooltip, { trigger: "hover" }, {
-					trigger: withCtx(() => [createVNode(_component_NButton, {
-						size: "tiny",
-						quaternary: "",
-						onClick: copyCode,
-						loading: copying.value
-					}, {
-						icon: withCtx(() => [createVNode(C_Icon_default, {
-							name: copying.value ? "mdi:loading" : "mdi:content-copy",
-							loading: copying.value
-						}, null, 8, ["name", "loading"])]),
-						_: 1
-					}, 8, ["loading"])]),
-					default: withCtx(() => [_cache[4] || (_cache[4] = createTextVNode(" 复制代码 ", -1))]),
-					_: 1,
-					__: [4]
-				}), _ctx.showFullscreen ? (openBlock(), createBlock(_component_NTooltip, {
-					key: 0,
-					trigger: "hover"
-				}, {
-					trigger: withCtx(() => [createVNode(_component_NButton, {
-						size: "tiny",
-						quaternary: "",
-						onClick: toggleFullscreen
-					}, {
-						icon: withCtx(() => [createVNode(C_Icon_default, { name: isFullscreen.value ? "mdi:fullscreen-exit" : "mdi:fullscreen" }, null, 8, ["name"])]),
-						_: 1
-					})]),
-					default: withCtx(() => [createTextVNode(" " + toDisplayString(isFullscreen.value ? "退出全屏" : "全屏查看"), 1)]),
-					_: 1
-				})) : createCommentVNode("v-if", true)])])) : createCommentVNode("v-if", true),
-				createCommentVNode(" 代码内容区域 "),
-				createElementVNode("div", _hoisted_5, [
-					createElementVNode("div", {
-						class: "code-wrapper",
-						onMouseenter: _cache[1] || (_cache[1] = ($event) => showFloatingCopy.value = true),
-						onMouseleave: _cache[2] || (_cache[2] = ($event) => showFloatingCopy.value = false)
-					}, [
-						(openBlock(), createBlock(_component_NCode, {
-							key: `code-${_ctx.language}-${_ctx.code.length}`,
-							code: _ctx.code,
-							language: _ctx.language,
-							hljs: hljs.value,
-							"show-line-numbers": _ctx.showLineNumbers,
-							"word-wrap": _ctx.wordWrap,
-							trim: _ctx.trim,
-							style: normalizeStyle(codeStyle.value),
-							onClick: _cache[0] || (_cache[0] = ($event) => emit("click", $event))
-						}, null, 8, [
-							"code",
-							"language",
-							"hljs",
-							"show-line-numbers",
-							"word-wrap",
-							"trim",
-							"style"
-						])),
-						createCommentVNode(" 悬浮复制按钮 "),
-						createVNode(Transition, { name: "fade" }, {
-							default: withCtx(() => [showFloatingCopy.value && !_ctx.showHeader ? (openBlock(), createElementBlock("div", _hoisted_6, [createVNode(_component_NTooltip, { trigger: "hover" }, {
-								trigger: withCtx(() => [createVNode(_component_NButton, {
-									size: "small",
-									quaternary: "",
-									onClick: copyCode,
-									loading: copying.value,
-									class: "copy-floating"
-								}, {
-									icon: withCtx(() => [createVNode(C_Icon_default, {
-										name: copying.value ? "mdi:loading" : "mdi:content-copy",
-										loading: copying.value
-									}, null, 8, ["name", "loading"])]),
-									_: 1
-								}, 8, ["loading"])]),
-								default: withCtx(() => [_cache[5] || (_cache[5] = createTextVNode(" 复制代码 ", -1))]),
-								_: 1,
-								__: [5]
-							})])) : createCommentVNode("v-if", true)]),
-							_: 1
-						})
-					], 32),
-					createCommentVNode(" 语言加载状态 "),
-					languageLoading.value ? (openBlock(), createElementBlock("div", _hoisted_7, [createVNode(_component_NSpin, { size: "small" }), createElementVNode("span", _hoisted_8, "正在加载 " + toDisplayString(_ctx.language) + " 语言包...", 1)])) : createCommentVNode("v-if", true)
-				]),
-				createCommentVNode(" 全屏模态框 "),
-				createVNode(_component_NModal, {
-					show: isFullscreen.value,
-					"onUpdate:show": _cache[3] || (_cache[3] = ($event) => isFullscreen.value = $event),
-					"mask-closable": false,
-					"show-icon": false,
-					bordered: false,
-					style: {
-						"width": "100vw",
-						"height": "100vh",
-						"margin": "0",
-						"padding": "0"
-					}
-				}, {
-					default: withCtx(() => [createElementVNode("div", _hoisted_9, [createElementVNode("div", _hoisted_10, [createElementVNode("div", _hoisted_11, [languageIcon.value ? (openBlock(), createBlock(C_Icon_default, {
-						key: 0,
-						name: languageIcon.value,
-						size: 16,
-						class: "mr-2"
-					}, null, 8, ["name"])) : createCommentVNode("v-if", true), createElementVNode("span", null, toDisplayString(_ctx.title || getLanguageTitle(_ctx.language)), 1)]), createVNode(_component_NButton, {
-						size: "small",
-						quaternary: "",
-						onClick: toggleFullscreen
-					}, {
-						icon: withCtx(() => [createVNode(C_Icon_default, { name: "mdi:close" })]),
-						_: 1
-					})]), createElementVNode("div", _hoisted_12, [(openBlock(), createBlock(_component_NCode, {
-						key: `fullscreen-code-${_ctx.language}-${_ctx.code.length}`,
-						code: _ctx.code,
-						language: _ctx.language,
-						hljs: hljs.value,
-						"show-line-numbers": _ctx.showLineNumbers,
-						"word-wrap": _ctx.wordWrap,
-						trim: _ctx.trim
-					}, null, 8, [
-						"code",
-						"language",
-						"hljs",
-						"show-line-numbers",
-						"word-wrap",
-						"trim"
-					]))])])]),
-					_: 1
-				}, 8, ["show"])
-			]);
-		};
-	}
-});
-
-//#endregion
-//#region src/components/C_Code/index.vue
-var C_Code_default = /* @__PURE__ */ export_helper_default(index_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-2f676c83"]]);
-
-//#endregion
-export { C_Code_default as t };
+import{t as e}from"./C_Icon2.js";import{t}from"./export-helper.js";import{NButton as n,NCode as r,NModal as i,NSpin as a,NTooltip as o}from"naive-ui";import{Transition as s,computed as c,createBlock as l,createCommentVNode as u,createElementBlock as d,createElementVNode as f,createTextVNode as p,createVNode as m,defineComponent as h,inject as g,nextTick as _,normalizeStyle as v,onMounted as y,onUnmounted as b,openBlock as x,ref as S,toDisplayString as C,watch as w,withCtx as T}from"vue";const E={class:`c-code-wrapper`},D={key:0,class:`c-code-header`},O={class:`c-code-title`},k={class:`c-code-actions`},A={class:`c-code-content`},j={key:0,class:`floating-copy-btn`},M={key:0,class:`c-code-loading`},N={class:`ml-2`},P={class:`fullscreen-content`},F={class:`fullscreen-header`},I={class:`fullscreen-title`},L={class:`fullscreen-body`};var R=t(h({name:`CCode`,__name:`index`,props:{code:{default:``},language:{default:`text`},title:{},showHeader:{type:Boolean,default:!0},showLineNumbers:{type:Boolean,default:!0},wordWrap:{type:Boolean,default:!1},trim:{type:Boolean,default:!0},showFullscreen:{type:Boolean,default:!1},maxHeight:{},autoLoadLanguage:{type:Boolean,default:!0}},emits:[`copy`,`click`,`fullscreen`],setup(t,{expose:h,emit:R}){let z=t,B=R,V=g(`highlightManager`,null),H=S(!1),U=S(!1),W=S(!1),G=S(!1),K=c(()=>{try{return V?.getHljs?.()||null}catch(e){return console.warn(`Highlight.js not available:`,e),null}}),q=c(()=>({javascript:`mdi:language-javascript`,typescript:`mdi:language-typescript`,python:`mdi:language-python`,html:`mdi:language-html5`,css:`mdi:language-css3`,vue:`mdi:vuejs`,react:`mdi:react`,json:`mdi:code-json`,java:`mdi:language-java`,cpp:`mdi:language-cpp`,go:`mdi:language-go`,rust:`mdi:language-rust`,php:`mdi:language-php`,csharp:`mdi:language-csharp`,sql:`mdi:database`,yaml:`mdi:file-code`,xml:`mdi:xml`,markdown:`mdi:language-markdown`,bash:`mdi:bash`,shell:`mdi:console`,powershell:`mdi:powershell`,swift:`mdi:language-swift`,kotlin:`mdi:language-kotlin`,ruby:`mdi:language-ruby`})[z.language.toLowerCase()]||`mdi:code-braces`),J=c(()=>z.maxHeight?{maxHeight:typeof z.maxHeight==`number`?`${z.maxHeight}px`:z.maxHeight}:{});w(()=>z.language,async e=>{if(!(!z.autoLoadLanguage||e===`text`||!V)&&!(V.getLoadedLanguages?.()||[]).includes(e)){W.value=!0;try{await V.loadLanguage?.(e),await _()}catch(t){console.warn(`Failed to load language: ${e}`,t)}finally{W.value=!1}}},{immediate:!0});async function Y(){if(!H.value){H.value=!0;try{await navigator.clipboard.writeText(z.code),B(`copy`,z.code)}catch(e){console.error(`Copy failed:`,e)}finally{H.value=!1}}}function X(){U.value=!U.value,B(`fullscreen`,U.value)}function Z(e){return{javascript:`JavaScript`,typescript:`TypeScript`,python:`Python`,java:`Java`,cpp:`C++`,csharp:`C#`,php:`PHP`,go:`Go`,rust:`Rust`,html:`HTML`,css:`CSS`,json:`JSON`,bash:`Bash`,shell:`Shell`,yaml:`YAML`,xml:`XML`,markdown:`Markdown`,sql:`SQL`,powershell:`PowerShell`,swift:`Swift`,kotlin:`Kotlin`,ruby:`Ruby`,vue:`Vue`,react:`React`}[e.toLowerCase()]||e.toUpperCase()}function Q(e){e.key===`Escape`&&U.value&&X()}return y(()=>{document.addEventListener(`keydown`,Q)}),b(()=>{document.removeEventListener(`keydown`,Q)}),h({copyCode:Y,toggleFullscreen:X}),(t,c)=>{let h=n,g=o,_=r,y=a,b=i;return x(),d(`div`,E,[u(` 代码标题栏 `),t.showHeader?(x(),d(`div`,D,[f(`div`,O,[q.value?(x(),l(e,{key:0,name:q.value,size:16,class:`mr-2`},null,8,[`name`])):u(`v-if`,!0),f(`span`,null,C(t.title||Z(t.language)),1)]),f(`div`,k,[m(g,{trigger:`hover`},{trigger:T(()=>[m(h,{size:`tiny`,quaternary:``,onClick:Y,loading:H.value},{icon:T(()=>[m(e,{name:H.value?`mdi:loading`:`mdi:content-copy`,loading:H.value},null,8,[`name`,`loading`])]),_:1},8,[`loading`])]),default:T(()=>[c[4]||=p(` 复制代码 `,-1)]),_:1,__:[4]}),t.showFullscreen?(x(),l(g,{key:0,trigger:`hover`},{trigger:T(()=>[m(h,{size:`tiny`,quaternary:``,onClick:X},{icon:T(()=>[m(e,{name:U.value?`mdi:fullscreen-exit`:`mdi:fullscreen`},null,8,[`name`])]),_:1})]),default:T(()=>[p(` `+C(U.value?`退出全屏`:`全屏查看`),1)]),_:1})):u(`v-if`,!0)])])):u(`v-if`,!0),u(` 代码内容区域 `),f(`div`,A,[f(`div`,{class:`code-wrapper`,onMouseenter:c[1]||=e=>G.value=!0,onMouseleave:c[2]||=e=>G.value=!1},[(x(),l(_,{key:`code-${t.language}-${t.code.length}`,code:t.code,language:t.language,hljs:K.value,"show-line-numbers":t.showLineNumbers,"word-wrap":t.wordWrap,trim:t.trim,style:v(J.value),onClick:c[0]||=e=>B(`click`,e)},null,8,[`code`,`language`,`hljs`,`show-line-numbers`,`word-wrap`,`trim`,`style`])),u(` 悬浮复制按钮 `),m(s,{name:`fade`},{default:T(()=>[G.value&&!t.showHeader?(x(),d(`div`,j,[m(g,{trigger:`hover`},{trigger:T(()=>[m(h,{size:`small`,quaternary:``,onClick:Y,loading:H.value,class:`copy-floating`},{icon:T(()=>[m(e,{name:H.value?`mdi:loading`:`mdi:content-copy`,loading:H.value},null,8,[`name`,`loading`])]),_:1},8,[`loading`])]),default:T(()=>[c[5]||=p(` 复制代码 `,-1)]),_:1,__:[5]})])):u(`v-if`,!0)]),_:1})],32),u(` 语言加载状态 `),W.value?(x(),d(`div`,M,[m(y,{size:`small`}),f(`span`,N,`正在加载 `+C(t.language)+` 语言包...`,1)])):u(`v-if`,!0)]),u(` 全屏模态框 `),m(b,{show:U.value,"onUpdate:show":c[3]||=e=>U.value=e,"mask-closable":!1,"show-icon":!1,bordered:!1,style:{width:`100vw`,height:`100vh`,margin:`0`,padding:`0`}},{default:T(()=>[f(`div`,P,[f(`div`,F,[f(`div`,I,[q.value?(x(),l(e,{key:0,name:q.value,size:16,class:`mr-2`},null,8,[`name`])):u(`v-if`,!0),f(`span`,null,C(t.title||Z(t.language)),1)]),m(h,{size:`small`,quaternary:``,onClick:X},{icon:T(()=>[m(e,{name:`mdi:close`})]),_:1})]),f(`div`,L,[(x(),l(_,{key:`fullscreen-code-${t.language}-${t.code.length}`,code:t.code,language:t.language,hljs:K.value,"show-line-numbers":t.showLineNumbers,"word-wrap":t.wordWrap,trim:t.trim},null,8,[`code`,`language`,`hljs`,`show-line-numbers`,`word-wrap`,`trim`]))])])]),_:1},8,[`show`])])}}}),[[`__scopeId`,`data-v-2f676c83`]]);export{R as t};
 //# sourceMappingURL=C_Code2.js.map