@robot-admin/naive-ui-components 0.6.8 → 0.6.10

package/dist/C_Icon2.js.map

@@ -1 +1 @@
-{"version":3,"file":"C_Icon2.js","names":["type","clickable","loading","title","ariaLabel","name","size","color","componentProps","svgPath","viewBox","alt","fallbackIcon"],"sources":["../src/hooks/useImage/index.ts","../src/components/C_Icon/index.vue","../src/components/C_Icon/index.vue","../src/components/C_Icon/index.vue"],"sourcesContent":["/**\n * @description: 图片路径解析函数（组件库版本）\n * 在组件库中，图片路径由宿主应用管理。\n * 如果传入的是完整 URL（http/https/data:）则直接返回；\n * 否则可通过 imageResolver 配置自定义解析逻辑。\n * @param {string} imagePath 图片路径或完整 URL\n * @param {Function} resolver 可选的自定义解析器\n * @return {Promise<string>} 处理后图片路径\n */\nexport const useImage = async (\n  imagePath: string,\n  resolver?: (path: string) => string | Promise<string>,\n): Promise<string> => {\n  if (!imagePath) return \"\";\n\n  // 完整 URL 直接返回\n  if (\n    imagePath.startsWith(\"http://\") ||\n    imagePath.startsWith(\"https://\") ||\n    imagePath.startsWith(\"data:\") ||\n    imagePath.startsWith(\"blob:\") ||\n    imagePath.startsWith(\"/\")\n  ) {\n    return imagePath;\n  }\n\n  // 如果提供了自定义解析器，使用自定义解析器\n  if (resolver) {\n    try {\n      return await resolver(imagePath);\n    } catch (e) {\n      console.error(`[useImage] 自定义解析器处理失败: ${imagePath}`, e);\n      return \"\";\n    }\n  }\n\n  // 默认：直接返回路径（宿主应用应保证路径可访问）\n  return imagePath;\n};\n\n/**\n * @description: 同步版本的图片路径处理函数\n * @param {string} imagePath 图片路径或完整 URL\n * @return {string} 图片URL\n */\nexport const useImageSync = (imagePath: string): string => {\n  if (!imagePath) return \"\";\n\n  // 完整 URL 直接返回\n  if (\n    imagePath.startsWith(\"http://\") ||\n    imagePath.startsWith(\"https://\") ||\n    imagePath.startsWith(\"data:\") ||\n    imagePath.startsWith(\"blob:\") ||\n    imagePath.startsWith(\"/\")\n  ) {\n    return imagePath;\n  }\n\n  return imagePath;\n};\n","/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-05-14\n * @Description: 支持多种图标使用方式，默认使用Iconify图标，统一错误处理\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n  <div\n    ref=\"iconRef\"\n    class=\"c-icon\"\n    :class=\"[\n      `c-icon--${type}`,\n      {\n        'c-icon--clickable': clickable,\n        'c-icon--loading': loading,\n        'c-icon--error': hasError,\n      },\n    ]\"\n    :style=\"rootStyle\"\n    :title=\"title || iconDisplayName\"\n    :aria-label=\"ariaLabel || iconDisplayName\"\n    :role=\"clickable ? 'button' : 'img'\"\n    :tabindex=\"clickable ? 0 : -1\"\n    @click=\"handleClick\"\n    @keydown=\"handleKeydown\"\n  >\n    <!-- 方式1：Iconify图标（默认方式） -->\n    <Icon\n      v-if=\"\n        (type === 'iconify' || !type) && !hasError && typeof name === 'string'\n      \"\n      :icon=\"name\"\n      :width=\"size\"\n      :height=\"size\"\n      :color=\"color\"\n      :style=\"iconStyle\"\n      @error=\"() => handleError('iconify', 'Iconify图标加载失败')\"\n    />\n\n    <!-- 方式2：UnoCSS图标 -->\n    <div\n      v-else-if=\"type === 'unocss' && !hasError && typeof name === 'string'\"\n      :class=\"[name, iconClasses]\"\n      :style=\"iconStyle\"\n      @error=\"() => handleError('unocss', 'UnoCSS图标渲染失败')\"\n    />\n\n    <!-- 方式3：组件挂载方式 -->\n    <component\n      v-else-if=\"type === 'component' && resolvedComponent && !hasError\"\n      :is=\"resolvedComponent\"\n      :style=\"iconStyle\"\n      v-bind=\"componentProps\"\n      @error=\"() => handleError('component', '组件图标渲染失败')\"\n    />\n\n    <!-- 方式4：SVG路径方式 -->\n    <svg\n      v-else-if=\"type === 'svg' && svgPath && !hasError\"\n      :width=\"size\"\n      :height=\"size\"\n      :viewBox=\"viewBox\"\n      :style=\"iconStyle\"\n      :fill=\"color\"\n      @error=\"() => handleError('svg', 'SVG图标渲染失败')\"\n    >\n      <path\n        :d=\"svgPath\"\n        :fill=\"color\"\n      />\n    </svg>\n\n    <!-- 方式5：图片方式 - 修复异步加载 -->\n    <img\n      v-else-if=\"type === 'image' && imageSrc && !hasError && !imageLoading\"\n      :src=\"imageSrc\"\n      :alt=\"alt || iconDisplayName\"\n      :width=\"size\"\n      :height=\"size\"\n      style=\"display: inline-block; vertical-align: middle\"\n      @error=\"() => handleError('image', '图片图标加载失败')\"\n      @load=\"handleImageLoad\"\n    />\n\n    <!-- 图片加载状态 -->\n    <div\n      v-if=\"(loading || imageLoading) && !hasError\"\n      class=\"c-icon__loading\"\n      :style=\"iconStyle\"\n    >\n      <div class=\"c-icon__spinner\" />\n    </div>\n\n    <!-- 统一错误状态显示 -->\n    <Icon\n      v-else-if=\"hasError && fallbackIcon\"\n      :icon=\"fallbackIcon\"\n      :width=\"size\"\n      :height=\"size\"\n      :color=\"color\"\n      :style=\"iconStyle\"\n    />\n    <div\n      v-else-if=\"hasError\"\n      class=\"c-icon__error\"\n      :style=\"iconStyle\"\n      :title=\"`图标解析失败: ${iconDisplayName} (${errorMessage})`\"\n    >\n      ⚠️\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { Icon } from '@iconify/vue'\n  import { useImage } from '../../hooks/useImage'\n  import { computed, nextTick, onMounted, readonly, ref, watch } from 'vue'\n\n  export interface IconProps {\n    /** 图标名称/路径/组件实例 */\n    name: string | any\n    /** 图标类型 */\n    type?: 'iconify' | 'unocss' | 'component' | 'svg' | 'image'\n    /** 图标颜色 */\n    color?: string\n    /** 图标大小(px) */\n    size?: number | string\n    /** SVG路径数据(仅type=svg时使用) */\n    svgPath?: string\n    /** SVG viewBox(仅type=svg时使用) */\n    viewBox?: string\n    /** 图片alt属性(仅type=image时使用) */\n    alt?: string\n    /** 是否可点击 */\n    clickable?: boolean\n    /** 加载状态 */\n    loading?: boolean\n    /** 错误时的回退图标 */\n    fallbackIcon?: string\n    /** 工具提示 */\n    title?: string\n    /** 无障碍标签 */\n    ariaLabel?: string\n    /** 自定义样式类 */\n    customClass?: string\n    /** 旋转角度 */\n    rotate?: number\n    /** 是否翻转 */\n    flip?: 'horizontal' | 'vertical' | 'both'\n    /** 传递给组件的额外属性(仅type=component时使用) */\n    componentProps?: Record<string, any>\n  }\n\n  const props = withDefaults(defineProps<IconProps>(), {\n    name: undefined,\n    type: 'iconify',\n    color: 'currentColor',\n    size: 18,\n    svgPath: '',\n    viewBox: '0 0 24 24',\n    alt: '',\n    clickable: false,\n    loading: false,\n    fallbackIcon: '',\n    title: '',\n    ariaLabel: '',\n    customClass: '',\n    rotate: 0,\n    flip: undefined,\n    componentProps: () => ({}),\n  })\n\n  const emit = defineEmits<{\n    click: [event: MouseEvent]\n    error: [type: string, error?: any]\n    load: []\n  }>()\n\n  const iconRef = ref<HTMLElement>()\n  const hasError = ref(false)\n  const errorMessage = ref('')\n  const imageSrc = ref<string>('') // 存储异步加载的图片URL\n  const imageLoading = ref(false) // 图片加载状态\n\n  // 计算根元素样式\n  const rootStyle = computed(() => ({\n    fontSize: typeof props.size === 'number' ? `${props.size}px` : props.size,\n    color: props.color,\n    cursor: props.clickable ? 'pointer' : 'default',\n  }))\n\n  // 计算图标样式\n  const iconStyle = computed(() => {\n    const style: Record<string, any> = {\n      display: 'inline-flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      width: typeof props.size === 'number' ? `${props.size}px` : props.size,\n      height: typeof props.size === 'number' ? `${props.size}px` : props.size,\n    }\n\n    // 旋转\n    if (props.rotate) {\n      style.transform = `rotate(${props.rotate}deg)`\n    }\n\n    // 翻转\n    if (props.flip) {\n      const scaleX =\n        props.flip === 'horizontal' || props.flip === 'both' ? -1 : 1\n      const scaleY = props.flip === 'vertical' || props.flip === 'both' ? -1 : 1\n      style.transform = `${\n        style.transform || ''\n      } scaleX(${scaleX}) scaleY(${scaleY})`.trim()\n    }\n\n    return style\n  })\n\n  // 获取图标名称用于显示\n  const iconDisplayName = computed(() => {\n    if (typeof props.name === 'string') {\n      return props.name\n    }\n    if (props.name && props.name.__name) {\n      return props.name.__name\n    }\n    if (props.name && props.name.name) {\n      return props.name.name\n    }\n    return 'Component Icon'\n  })\n\n  // 图标类名\n  const iconClasses = computed(() => [\n    props.customClass,\n    {\n      'c-icon__rotatable': props.rotate !== 0,\n      'c-icon__flippable': !!props.flip,\n    },\n  ])\n\n  // 解析组件名称（纯计算属性，无副作用）\n  const resolvedComponent = computed(() => {\n    if (props.type !== 'component' || !props.name) return null\n    return props.name\n  })\n\n  // 统一错误处理函数\n  const handleError = (type: string, message: string, originalError?: any) => {\n    console.warn(`[C_Icon] ${message}:`, iconDisplayName.value, originalError)\n    errorMessage.value = message\n    imageLoading.value = false // 错误时停止加载状态\n    emit('error', type, originalError)\n\n    // 如果有回退图标，尝试切换为 fallback Iconify 图标\n    if (props.fallbackIcon && !hasError.value) {\n      hasError.value = false\n      // 将 name 重写为 fallbackIcon 并重置状态\n      // 因为 props 不可变，通过模板中的 fallback 分支渲染\n      return\n    }\n\n    hasError.value = true\n  }\n\n  // 处理点击事件\n  const handleClick = (event: MouseEvent) => {\n    if (!props.clickable || props.loading) return\n    emit('click', event)\n  }\n\n  // 处理键盘事件\n  const handleKeydown = (event: KeyboardEvent) => {\n    if (!props.clickable || props.loading) return\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      emit('click', event as any)\n    }\n  }\n\n  // 处理图片加载成功\n  const handleImageLoad = () => {\n    imageLoading.value = false\n    emit('load')\n  }\n\n  // 异步加载图片 - 修复关键函数\n  const loadImageSrc = async () => {\n    if (props.type !== 'image' || typeof props.name !== 'string') {\n      imageSrc.value = ''\n      return\n    }\n\n    // 如果是完整URL，直接设置\n    if (\n      props.name.startsWith('http://') ||\n      props.name.startsWith('https://') ||\n      props.name.startsWith('//') ||\n      props.name.startsWith('/')\n    ) {\n      imageSrc.value = props.name\n      return\n    }\n\n    // 其他情况都当作本地图片处理\n    try {\n      imageLoading.value = true\n      const imageUrl = await useImage(props.name)\n      if (imageUrl) {\n        imageSrc.value = imageUrl\n      } else {\n        handleError('image', '图片路径解析失败')\n      }\n    } catch (error) {\n      handleError('image', '图片加载失败', error)\n    } finally {\n      imageLoading.value = false\n    }\n  }\n\n  // 验证规则映射\n  const validationRules = {\n    iconify: (): string | null => {\n      if (!props.name.includes(':')) {\n        console.warn(\n          '[C_Icon] Iconify图标名称格式应为 \"prefix:name\"，如 \"mdi:home\"'\n        )\n      }\n      return null\n    },\n    unocss: (): string | null => {\n      if (typeof props.name !== 'string' || !props.name.startsWith('i-')) {\n        console.warn('[C_Icon] UnoCSS图标名称应以 \"i-\" 开头')\n      }\n      return null\n    },\n    component: (): string | null =>\n      !resolvedComponent.value ? '无法解析组件' : null,\n    svg: (): string | null => (!props.svgPath ? 'SVG路径不能为空' : null),\n    image: (): string | null => {\n      // 对于image类型，异步验证在loadImageSrc中处理\n      return null\n    },\n  }\n\n  // 验证配置\n  const validateProps = () => {\n    hasError.value = false\n    errorMessage.value = ''\n\n    // 基础验证\n    if (!props.name) {\n      return handleError('validation', '图标名称不能为空')\n    }\n\n    // 类型验证\n    const validator = validationRules[props.type]\n    if (!validator) {\n      return handleError('type', '不支持的图标类型')\n    }\n\n    const errorMsg = validator()\n    if (errorMsg) {\n      handleError(props.type, errorMsg)\n    }\n\n    // 如果是图片类型，异步加载图片\n    if (props.type === 'image') {\n      loadImageSrc()\n    }\n  }\n\n  // 监听关键属性变化\n  watch(\n    () => [props.name, props.type, props.svgPath],\n    () => {\n      nextTick(validateProps)\n    },\n    { immediate: true }\n  )\n\n  // 组件挂载后：仅对非 image 类型触发 load 事件（watch immediate 已完成验证）\n  onMounted(() => {\n    if (!hasError.value && props.type !== 'image') {\n      emit('load')\n    }\n  })\n\n  // 暴露方法给父组件\n  defineExpose({\n    /** 重新验证配置 */\n    validate: validateProps,\n    /** 是否有错误 */\n    hasError: readonly(hasError),\n    /** 错误信息 */\n    errorMessage: readonly(errorMessage),\n    /** DOM引用 */\n    el: iconRef,\n  })\n</script>\n","/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-05-14\n * @Description: 支持多种图标使用方式，默认使用Iconify图标，统一错误处理\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n  <div\n    ref=\"iconRef\"\n    class=\"c-icon\"\n    :class=\"[\n      `c-icon--${type}`,\n      {\n        'c-icon--clickable': clickable,\n        'c-icon--loading': loading,\n        'c-icon--error': hasError,\n      },\n    ]\"\n    :style=\"rootStyle\"\n    :title=\"title || iconDisplayName\"\n    :aria-label=\"ariaLabel || iconDisplayName\"\n    :role=\"clickable ? 'button' : 'img'\"\n    :tabindex=\"clickable ? 0 : -1\"\n    @click=\"handleClick\"\n    @keydown=\"handleKeydown\"\n  >\n    <!-- 方式1：Iconify图标（默认方式） -->\n    <Icon\n      v-if=\"\n        (type === 'iconify' || !type) && !hasError && typeof name === 'string'\n      \"\n      :icon=\"name\"\n      :width=\"size\"\n      :height=\"size\"\n      :color=\"color\"\n      :style=\"iconStyle\"\n      @error=\"() => handleError('iconify', 'Iconify图标加载失败')\"\n    />\n\n    <!-- 方式2：UnoCSS图标 -->\n    <div\n      v-else-if=\"type === 'unocss' && !hasError && typeof name === 'string'\"\n      :class=\"[name, iconClasses]\"\n      :style=\"iconStyle\"\n      @error=\"() => handleError('unocss', 'UnoCSS图标渲染失败')\"\n    />\n\n    <!-- 方式3：组件挂载方式 -->\n    <component\n      v-else-if=\"type === 'component' && resolvedComponent && !hasError\"\n      :is=\"resolvedComponent\"\n      :style=\"iconStyle\"\n      v-bind=\"componentProps\"\n      @error=\"() => handleError('component', '组件图标渲染失败')\"\n    />\n\n    <!-- 方式4：SVG路径方式 -->\n    <svg\n      v-else-if=\"type === 'svg' && svgPath && !hasError\"\n      :width=\"size\"\n      :height=\"size\"\n      :viewBox=\"viewBox\"\n      :style=\"iconStyle\"\n      :fill=\"color\"\n      @error=\"() => handleError('svg', 'SVG图标渲染失败')\"\n    >\n      <path\n        :d=\"svgPath\"\n        :fill=\"color\"\n      />\n    </svg>\n\n    <!-- 方式5：图片方式 - 修复异步加载 -->\n    <img\n      v-else-if=\"type === 'image' && imageSrc && !hasError && !imageLoading\"\n      :src=\"imageSrc\"\n      :alt=\"alt || iconDisplayName\"\n      :width=\"size\"\n      :height=\"size\"\n      style=\"display: inline-block; vertical-align: middle\"\n      @error=\"() => handleError('image', '图片图标加载失败')\"\n      @load=\"handleImageLoad\"\n    />\n\n    <!-- 图片加载状态 -->\n    <div\n      v-if=\"(loading || imageLoading) && !hasError\"\n      class=\"c-icon__loading\"\n      :style=\"iconStyle\"\n    >\n      <div class=\"c-icon__spinner\" />\n    </div>\n\n    <!-- 统一错误状态显示 -->\n    <Icon\n      v-else-if=\"hasError && fallbackIcon\"\n      :icon=\"fallbackIcon\"\n      :width=\"size\"\n      :height=\"size\"\n      :color=\"color\"\n      :style=\"iconStyle\"\n    />\n    <div\n      v-else-if=\"hasError\"\n      class=\"c-icon__error\"\n      :style=\"iconStyle\"\n      :title=\"`图标解析失败: ${iconDisplayName} (${errorMessage})`\"\n    >\n      ⚠️\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { Icon } from '@iconify/vue'\n  import { useImage } from '../../hooks/useImage'\n  import { computed, nextTick, onMounted, readonly, ref, watch } from 'vue'\n\n  export interface IconProps {\n    /** 图标名称/路径/组件实例 */\n    name: string | any\n    /** 图标类型 */\n    type?: 'iconify' | 'unocss' | 'component' | 'svg' | 'image'\n    /** 图标颜色 */\n    color?: string\n    /** 图标大小(px) */\n    size?: number | string\n    /** SVG路径数据(仅type=svg时使用) */\n    svgPath?: string\n    /** SVG viewBox(仅type=svg时使用) */\n    viewBox?: string\n    /** 图片alt属性(仅type=image时使用) */\n    alt?: string\n    /** 是否可点击 */\n    clickable?: boolean\n    /** 加载状态 */\n    loading?: boolean\n    /** 错误时的回退图标 */\n    fallbackIcon?: string\n    /** 工具提示 */\n    title?: string\n    /** 无障碍标签 */\n    ariaLabel?: string\n    /** 自定义样式类 */\n    customClass?: string\n    /** 旋转角度 */\n    rotate?: number\n    /** 是否翻转 */\n    flip?: 'horizontal' | 'vertical' | 'both'\n    /** 传递给组件的额外属性(仅type=component时使用) */\n    componentProps?: Record<string, any>\n  }\n\n  const props = withDefaults(defineProps<IconProps>(), {\n    name: undefined,\n    type: 'iconify',\n    color: 'currentColor',\n    size: 18,\n    svgPath: '',\n    viewBox: '0 0 24 24',\n    alt: '',\n    clickable: false,\n    loading: false,\n    fallbackIcon: '',\n    title: '',\n    ariaLabel: '',\n    customClass: '',\n    rotate: 0,\n    flip: undefined,\n    componentProps: () => ({}),\n  })\n\n  const emit = defineEmits<{\n    click: [event: MouseEvent]\n    error: [type: string, error?: any]\n    load: []\n  }>()\n\n  const iconRef = ref<HTMLElement>()\n  const hasError = ref(false)\n  const errorMessage = ref('')\n  const imageSrc = ref<string>('') // 存储异步加载的图片URL\n  const imageLoading = ref(false) // 图片加载状态\n\n  // 计算根元素样式\n  const rootStyle = computed(() => ({\n    fontSize: typeof props.size === 'number' ? `${props.size}px` : props.size,\n    color: props.color,\n    cursor: props.clickable ? 'pointer' : 'default',\n  }))\n\n  // 计算图标样式\n  const iconStyle = computed(() => {\n    const style: Record<string, any> = {\n      display: 'inline-flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      width: typeof props.size === 'number' ? `${props.size}px` : props.size,\n      height: typeof props.size === 'number' ? `${props.size}px` : props.size,\n    }\n\n    // 旋转\n    if (props.rotate) {\n      style.transform = `rotate(${props.rotate}deg)`\n    }\n\n    // 翻转\n    if (props.flip) {\n      const scaleX =\n        props.flip === 'horizontal' || props.flip === 'both' ? -1 : 1\n      const scaleY = props.flip === 'vertical' || props.flip === 'both' ? -1 : 1\n      style.transform = `${\n        style.transform || ''\n      } scaleX(${scaleX}) scaleY(${scaleY})`.trim()\n    }\n\n    return style\n  })\n\n  // 获取图标名称用于显示\n  const iconDisplayName = computed(() => {\n    if (typeof props.name === 'string') {\n      return props.name\n    }\n    if (props.name && props.name.__name) {\n      return props.name.__name\n    }\n    if (props.name && props.name.name) {\n      return props.name.name\n    }\n    return 'Component Icon'\n  })\n\n  // 图标类名\n  const iconClasses = computed(() => [\n    props.customClass,\n    {\n      'c-icon__rotatable': props.rotate !== 0,\n      'c-icon__flippable': !!props.flip,\n    },\n  ])\n\n  // 解析组件名称（纯计算属性，无副作用）\n  const resolvedComponent = computed(() => {\n    if (props.type !== 'component' || !props.name) return null\n    return props.name\n  })\n\n  // 统一错误处理函数\n  const handleError = (type: string, message: string, originalError?: any) => {\n    console.warn(`[C_Icon] ${message}:`, iconDisplayName.value, originalError)\n    errorMessage.value = message\n    imageLoading.value = false // 错误时停止加载状态\n    emit('error', type, originalError)\n\n    // 如果有回退图标，尝试切换为 fallback Iconify 图标\n    if (props.fallbackIcon && !hasError.value) {\n      hasError.value = false\n      // 将 name 重写为 fallbackIcon 并重置状态\n      // 因为 props 不可变，通过模板中的 fallback 分支渲染\n      return\n    }\n\n    hasError.value = true\n  }\n\n  // 处理点击事件\n  const handleClick = (event: MouseEvent) => {\n    if (!props.clickable || props.loading) return\n    emit('click', event)\n  }\n\n  // 处理键盘事件\n  const handleKeydown = (event: KeyboardEvent) => {\n    if (!props.clickable || props.loading) return\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      emit('click', event as any)\n    }\n  }\n\n  // 处理图片加载成功\n  const handleImageLoad = () => {\n    imageLoading.value = false\n    emit('load')\n  }\n\n  // 异步加载图片 - 修复关键函数\n  const loadImageSrc = async () => {\n    if (props.type !== 'image' || typeof props.name !== 'string') {\n      imageSrc.value = ''\n      return\n    }\n\n    // 如果是完整URL，直接设置\n    if (\n      props.name.startsWith('http://') ||\n      props.name.startsWith('https://') ||\n      props.name.startsWith('//') ||\n      props.name.startsWith('/')\n    ) {\n      imageSrc.value = props.name\n      return\n    }\n\n    // 其他情况都当作本地图片处理\n    try {\n      imageLoading.value = true\n      const imageUrl = await useImage(props.name)\n      if (imageUrl) {\n        imageSrc.value = imageUrl\n      } else {\n        handleError('image', '图片路径解析失败')\n      }\n    } catch (error) {\n      handleError('image', '图片加载失败', error)\n    } finally {\n      imageLoading.value = false\n    }\n  }\n\n  // 验证规则映射\n  const validationRules = {\n    iconify: (): string | null => {\n      if (!props.name.includes(':')) {\n        console.warn(\n          '[C_Icon] Iconify图标名称格式应为 \"prefix:name\"，如 \"mdi:home\"'\n        )\n      }\n      return null\n    },\n    unocss: (): string | null => {\n      if (typeof props.name !== 'string' || !props.name.startsWith('i-')) {\n        console.warn('[C_Icon] UnoCSS图标名称应以 \"i-\" 开头')\n      }\n      return null\n    },\n    component: (): string | null =>\n      !resolvedComponent.value ? '无法解析组件' : null,\n    svg: (): string | null => (!props.svgPath ? 'SVG路径不能为空' : null),\n    image: (): string | null => {\n      // 对于image类型，异步验证在loadImageSrc中处理\n      return null\n    },\n  }\n\n  // 验证配置\n  const validateProps = () => {\n    hasError.value = false\n    errorMessage.value = ''\n\n    // 基础验证\n    if (!props.name) {\n      return handleError('validation', '图标名称不能为空')\n    }\n\n    // 类型验证\n    const validator = validationRules[props.type]\n    if (!validator) {\n      return handleError('type', '不支持的图标类型')\n    }\n\n    const errorMsg = validator()\n    if (errorMsg) {\n      handleError(props.type, errorMsg)\n    }\n\n    // 如果是图片类型，异步加载图片\n    if (props.type === 'image') {\n      loadImageSrc()\n    }\n  }\n\n  // 监听关键属性变化\n  watch(\n    () => [props.name, props.type, props.svgPath],\n    () => {\n      nextTick(validateProps)\n    },\n    { immediate: true }\n  )\n\n  // 组件挂载后：仅对非 image 类型触发 load 事件（watch immediate 已完成验证）\n  onMounted(() => {\n    if (!hasError.value && props.type !== 'image') {\n      emit('load')\n    }\n  })\n\n  // 暴露方法给父组件\n  defineExpose({\n    /** 重新验证配置 */\n    validate: validateProps,\n    /** 是否有错误 */\n    hasError: readonly(hasError),\n    /** 错误信息 */\n    errorMessage: readonly(errorMessage),\n    /** DOM引用 */\n    el: iconRef,\n  })\n</script>\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-05-14\n * @Description: 支持多种图标使用方式，默认使用Iconify图标，统一错误处理\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n  <div\n    ref=\"iconRef\"\n    class=\"c-icon\"\n    :class=\"[\n      `c-icon--${type}`,\n      {\n        'c-icon--clickable': clickable,\n        'c-icon--loading': loading,\n        'c-icon--error': hasError,\n      },\n    ]\"\n    :style=\"rootStyle\"\n    :title=\"title || iconDisplayName\"\n    :aria-label=\"ariaLabel || iconDisplayName\"\n    :role=\"clickable ? 'button' : 'img'\"\n    :tabindex=\"clickable ? 0 : -1\"\n    @click=\"handleClick\"\n    @keydown=\"handleKeydown\"\n  >\n    <!-- 方式1：Iconify图标（默认方式） -->\n    <Icon\n      v-if=\"\n        (type === 'iconify' || !type) && !hasError && typeof name === 'string'\n      \"\n      :icon=\"name\"\n      :width=\"size\"\n      :height=\"size\"\n      :color=\"color\"\n      :style=\"iconStyle\"\n      @error=\"() => handleError('iconify', 'Iconify图标加载失败')\"\n    />\n\n    <!-- 方式2：UnoCSS图标 -->\n    <div\n      v-else-if=\"type === 'unocss' && !hasError && typeof name === 'string'\"\n      :class=\"[name, iconClasses]\"\n      :style=\"iconStyle\"\n      @error=\"() => handleError('unocss', 'UnoCSS图标渲染失败')\"\n    />\n\n    <!-- 方式3：组件挂载方式 -->\n    <component\n      v-else-if=\"type === 'component' && resolvedComponent && !hasError\"\n      :is=\"resolvedComponent\"\n      :style=\"iconStyle\"\n      v-bind=\"componentProps\"\n      @error=\"() => handleError('component', '组件图标渲染失败')\"\n    />\n\n    <!-- 方式4：SVG路径方式 -->\n    <svg\n      v-else-if=\"type === 'svg' && svgPath && !hasError\"\n      :width=\"size\"\n      :height=\"size\"\n      :viewBox=\"viewBox\"\n      :style=\"iconStyle\"\n      :fill=\"color\"\n      @error=\"() => handleError('svg', 'SVG图标渲染失败')\"\n    >\n      <path\n        :d=\"svgPath\"\n        :fill=\"color\"\n      />\n    </svg>\n\n    <!-- 方式5：图片方式 - 修复异步加载 -->\n    <img\n      v-else-if=\"type === 'image' && imageSrc && !hasError && !imageLoading\"\n      :src=\"imageSrc\"\n      :alt=\"alt || iconDisplayName\"\n      :width=\"size\"\n      :height=\"size\"\n      style=\"display: inline-block; vertical-align: middle\"\n      @error=\"() => handleError('image', '图片图标加载失败')\"\n      @load=\"handleImageLoad\"\n    />\n\n    <!-- 图片加载状态 -->\n    <div\n      v-if=\"(loading || imageLoading) && !hasError\"\n      class=\"c-icon__loading\"\n      :style=\"iconStyle\"\n    >\n      <div class=\"c-icon__spinner\" />\n    </div>\n\n    <!-- 统一错误状态显示 -->\n    <Icon\n      v-else-if=\"hasError && fallbackIcon\"\n      :icon=\"fallbackIcon\"\n      :width=\"size\"\n      :height=\"size\"\n      :color=\"color\"\n      :style=\"iconStyle\"\n    />\n    <div\n      v-else-if=\"hasError\"\n      class=\"c-icon__error\"\n      :style=\"iconStyle\"\n      :title=\"`图标解析失败: ${iconDisplayName} (${errorMessage})`\"\n    >\n      ⚠️\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { Icon } from '@iconify/vue'\n  import { useImage } from '../../hooks/useImage'\n  import { computed, nextTick, onMounted, readonly, ref, watch } from 'vue'\n\n  export interface IconProps {\n    /** 图标名称/路径/组件实例 */\n    name: string | any\n    /** 图标类型 */\n    type?: 'iconify' | 'unocss' | 'component' | 'svg' | 'image'\n    /** 图标颜色 */\n    color?: string\n    /** 图标大小(px) */\n    size?: number | string\n    /** SVG路径数据(仅type=svg时使用) */\n    svgPath?: string\n    /** SVG viewBox(仅type=svg时使用) */\n    viewBox?: string\n    /** 图片alt属性(仅type=image时使用) */\n    alt?: string\n    /** 是否可点击 */\n    clickable?: boolean\n    /** 加载状态 */\n    loading?: boolean\n    /** 错误时的回退图标 */\n    fallbackIcon?: string\n    /** 工具提示 */\n    title?: string\n    /** 无障碍标签 */\n    ariaLabel?: string\n    /** 自定义样式类 */\n    customClass?: string\n    /** 旋转角度 */\n    rotate?: number\n    /** 是否翻转 */\n    flip?: 'horizontal' | 'vertical' | 'both'\n    /** 传递给组件的额外属性(仅type=component时使用) */\n    componentProps?: Record<string, any>\n  }\n\n  const props = withDefaults(defineProps<IconProps>(), {\n    name: undefined,\n    type: 'iconify',\n    color: 'currentColor',\n    size: 18,\n    svgPath: '',\n    viewBox: '0 0 24 24',\n    alt: '',\n    clickable: false,\n    loading: false,\n    fallbackIcon: '',\n    title: '',\n    ariaLabel: '',\n    customClass: '',\n    rotate: 0,\n    flip: undefined,\n    componentProps: () => ({}),\n  })\n\n  const emit = defineEmits<{\n    click: [event: MouseEvent]\n    error: [type: string, error?: any]\n    load: []\n  }>()\n\n  const iconRef = ref<HTMLElement>()\n  const hasError = ref(false)\n  const errorMessage = ref('')\n  const imageSrc = ref<string>('') // 存储异步加载的图片URL\n  const imageLoading = ref(false) // 图片加载状态\n\n  // 计算根元素样式\n  const rootStyle = computed(() => ({\n    fontSize: typeof props.size === 'number' ? `${props.size}px` : props.size,\n    color: props.color,\n    cursor: props.clickable ? 'pointer' : 'default',\n  }))\n\n  // 计算图标样式\n  const iconStyle = computed(() => {\n    const style: Record<string, any> = {\n      display: 'inline-flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      width: typeof props.size === 'number' ? `${props.size}px` : props.size,\n      height: typeof props.size === 'number' ? `${props.size}px` : props.size,\n    }\n\n    // 旋转\n    if (props.rotate) {\n      style.transform = `rotate(${props.rotate}deg)`\n    }\n\n    // 翻转\n    if (props.flip) {\n      const scaleX =\n        props.flip === 'horizontal' || props.flip === 'both' ? -1 : 1\n      const scaleY = props.flip === 'vertical' || props.flip === 'both' ? -1 : 1\n      style.transform = `${\n        style.transform || ''\n      } scaleX(${scaleX}) scaleY(${scaleY})`.trim()\n    }\n\n    return style\n  })\n\n  // 获取图标名称用于显示\n  const iconDisplayName = computed(() => {\n    if (typeof props.name === 'string') {\n      return props.name\n    }\n    if (props.name && props.name.__name) {\n      return props.name.__name\n    }\n    if (props.name && props.name.name) {\n      return props.name.name\n    }\n    return 'Component Icon'\n  })\n\n  // 图标类名\n  const iconClasses = computed(() => [\n    props.customClass,\n    {\n      'c-icon__rotatable': props.rotate !== 0,\n      'c-icon__flippable': !!props.flip,\n    },\n  ])\n\n  // 解析组件名称（纯计算属性，无副作用）\n  const resolvedComponent = computed(() => {\n    if (props.type !== 'component' || !props.name) return null\n    return props.name\n  })\n\n  // 统一错误处理函数\n  const handleError = (type: string, message: string, originalError?: any) => {\n    console.warn(`[C_Icon] ${message}:`, iconDisplayName.value, originalError)\n    errorMessage.value = message\n    imageLoading.value = false // 错误时停止加载状态\n    emit('error', type, originalError)\n\n    // 如果有回退图标，尝试切换为 fallback Iconify 图标\n    if (props.fallbackIcon && !hasError.value) {\n      hasError.value = false\n      // 将 name 重写为 fallbackIcon 并重置状态\n      // 因为 props 不可变，通过模板中的 fallback 分支渲染\n      return\n    }\n\n    hasError.value = true\n  }\n\n  // 处理点击事件\n  const handleClick = (event: MouseEvent) => {\n    if (!props.clickable || props.loading) return\n    emit('click', event)\n  }\n\n  // 处理键盘事件\n  const handleKeydown = (event: KeyboardEvent) => {\n    if (!props.clickable || props.loading) return\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      emit('click', event as any)\n    }\n  }\n\n  // 处理图片加载成功\n  const handleImageLoad = () => {\n    imageLoading.value = false\n    emit('load')\n  }\n\n  // 异步加载图片 - 修复关键函数\n  const loadImageSrc = async () => {\n    if (props.type !== 'image' || typeof props.name !== 'string') {\n      imageSrc.value = ''\n      return\n    }\n\n    // 如果是完整URL，直接设置\n    if (\n      props.name.startsWith('http://') ||\n      props.name.startsWith('https://') ||\n      props.name.startsWith('//') ||\n      props.name.startsWith('/')\n    ) {\n      imageSrc.value = props.name\n      return\n    }\n\n    // 其他情况都当作本地图片处理\n    try {\n      imageLoading.value = true\n      const imageUrl = await useImage(props.name)\n      if (imageUrl) {\n        imageSrc.value = imageUrl\n      } else {\n        handleError('image', '图片路径解析失败')\n      }\n    } catch (error) {\n      handleError('image', '图片加载失败', error)\n    } finally {\n      imageLoading.value = false\n    }\n  }\n\n  // 验证规则映射\n  const validationRules = {\n    iconify: (): string | null => {\n      if (!props.name.includes(':')) {\n        console.warn(\n          '[C_Icon] Iconify图标名称格式应为 \"prefix:name\"，如 \"mdi:home\"'\n        )\n      }\n      return null\n    },\n    unocss: (): string | null => {\n      if (typeof props.name !== 'string' || !props.name.startsWith('i-')) {\n        console.warn('[C_Icon] UnoCSS图标名称应以 \"i-\" 开头')\n      }\n      return null\n    },\n    component: (): string | null =>\n      !resolvedComponent.value ? '无法解析组件' : null,\n    svg: (): string | null => (!props.svgPath ? 'SVG路径不能为空' : null),\n    image: (): string | null => {\n      // 对于image类型，异步验证在loadImageSrc中处理\n      return null\n    },\n  }\n\n  // 验证配置\n  const validateProps = () => {\n    hasError.value = false\n    errorMessage.value = ''\n\n    // 基础验证\n    if (!props.name) {\n      return handleError('validation', '图标名称不能为空')\n    }\n\n    // 类型验证\n    const validator = validationRules[props.type]\n    if (!validator) {\n      return handleError('type', '不支持的图标类型')\n    }\n\n    const errorMsg = validator()\n    if (errorMsg) {\n      handleError(props.type, errorMsg)\n    }\n\n    // 如果是图片类型，异步加载图片\n    if (props.type === 'image') {\n      loadImageSrc()\n    }\n  }\n\n  // 监听关键属性变化\n  watch(\n    () => [props.name, props.type, props.svgPath],\n    () => {\n      nextTick(validateProps)\n    },\n    { immediate: true }\n  )\n\n  // 组件挂载后：仅对非 image 类型触发 load 事件（watch immediate 已完成验证）\n  onMounted(() => {\n    if (!hasError.value && props.type !== 'image') {\n      emit('load')\n    }\n  })\n\n  // 暴露方法给父组件\n  defineExpose({\n    /** 重新验证配置 */\n    validate: validateProps,\n    /** 是否有错误 */\n    hasError: readonly(hasError),\n    /** 错误信息 */\n    errorMessage: readonly(errorMessage),\n    /** DOM引用 */\n    el: iconRef,\n  })\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"C_Icon2.js","names":["type","clickable","loading","title","ariaLabel","name","size","color","componentProps","svgPath","viewBox","alt","fallbackIcon"],"sources":["../src/hooks/useImage/index.ts","../src/components/C_Icon/index.vue","../src/components/C_Icon/index.vue","../src/components/C_Icon/index.vue"],"sourcesContent":["/**\n * @description: 图片路径解析函数（组件库版本）\n * 在组件库中，图片路径由宿主应用管理。\n * 如果传入的是完整 URL（http/https/data:）则直接返回；\n * 否则可通过 imageResolver 配置自定义解析逻辑。\n * @param {string} imagePath 图片路径或完整 URL\n * @param {Function} resolver 可选的自定义解析器\n * @return {Promise<string>} 处理后图片路径\n */\nexport const useImage = async (\n  imagePath: string,\n  resolver?: (path: string) => string | Promise<string>,\n): Promise<string> => {\n  if (!imagePath) return \"\";\n\n  // 完整 URL 直接返回\n  if (\n    imagePath.startsWith(\"http://\") ||\n    imagePath.startsWith(\"https://\") ||\n    imagePath.startsWith(\"data:\") ||\n    imagePath.startsWith(\"blob:\") ||\n    imagePath.startsWith(\"/\")\n  ) {\n    return imagePath;\n  }\n\n  // 如果提供了自定义解析器，使用自定义解析器\n  if (resolver) {\n    try {\n      return await resolver(imagePath);\n    } catch (e) {\n      console.error(`[useImage] 自定义解析器处理失败: ${imagePath}`, e);\n      return \"\";\n    }\n  }\n\n  // 默认：直接返回路径（宿主应用应保证路径可访问）\n  return imagePath;\n};\n\n/**\n * @description: 同步版本的图片路径处理函数\n * @param {string} imagePath 图片路径或完整 URL\n * @return {string} 图片URL\n */\nexport const useImageSync = (imagePath: string): string => {\n  if (!imagePath) return \"\";\n\n  // 完整 URL 直接返回\n  if (\n    imagePath.startsWith(\"http://\") ||\n    imagePath.startsWith(\"https://\") ||\n    imagePath.startsWith(\"data:\") ||\n    imagePath.startsWith(\"blob:\") ||\n    imagePath.startsWith(\"/\")\n  ) {\n    return imagePath;\n  }\n\n  return imagePath;\n};\n","/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-05-14\n * @Description: 支持多种图标使用方式，默认使用Iconify图标，统一错误处理\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n  <div\n    ref=\"iconRef\"\n    class=\"c-icon\"\n    :class=\"[\n      `c-icon--${type}`,\n      {\n        'c-icon--clickable': clickable,\n        'c-icon--loading': loading,\n        'c-icon--error': hasError,\n      },\n    ]\"\n    :style=\"rootStyle\"\n    :title=\"title || undefined\"\n    :aria-label=\"ariaLabel || iconDisplayName\"\n    :role=\"clickable ? 'button' : 'img'\"\n    :tabindex=\"clickable ? 0 : -1\"\n    @click=\"handleClick\"\n    @keydown=\"handleKeydown\"\n  >\n    <!-- 方式1：Iconify图标（默认方式） -->\n    <Icon\n      v-if=\"\n        (type === 'iconify' || !type) && !hasError && typeof name === 'string'\n      \"\n      :icon=\"name\"\n      :width=\"size\"\n      :height=\"size\"\n      :color=\"color\"\n      :style=\"iconStyle\"\n      @error=\"() => handleError('iconify', 'Iconify图标加载失败')\"\n    />\n\n    <!-- 方式2：UnoCSS图标 -->\n    <div\n      v-else-if=\"type === 'unocss' && !hasError && typeof name === 'string'\"\n      :class=\"[name, iconClasses]\"\n      :style=\"iconStyle\"\n      @error=\"() => handleError('unocss', 'UnoCSS图标渲染失败')\"\n    />\n\n    <!-- 方式3：组件挂载方式 -->\n    <component\n      v-else-if=\"type === 'component' && resolvedComponent && !hasError\"\n      :is=\"resolvedComponent\"\n      :style=\"iconStyle\"\n      v-bind=\"componentProps\"\n      @error=\"() => handleError('component', '组件图标渲染失败')\"\n    />\n\n    <!-- 方式4：SVG路径方式 -->\n    <svg\n      v-else-if=\"type === 'svg' && svgPath && !hasError\"\n      :width=\"size\"\n      :height=\"size\"\n      :viewBox=\"viewBox\"\n      :style=\"iconStyle\"\n      :fill=\"color\"\n      @error=\"() => handleError('svg', 'SVG图标渲染失败')\"\n    >\n      <path\n        :d=\"svgPath\"\n        :fill=\"color\"\n      />\n    </svg>\n\n    <!-- 方式5：图片方式 - 修复异步加载 -->\n    <img\n      v-else-if=\"type === 'image' && imageSrc && !hasError && !imageLoading\"\n      :src=\"imageSrc\"\n      :alt=\"alt || iconDisplayName\"\n      :width=\"size\"\n      :height=\"size\"\n      style=\"display: inline-block; vertical-align: middle\"\n      @error=\"() => handleError('image', '图片图标加载失败')\"\n      @load=\"handleImageLoad\"\n    />\n\n    <!-- 图片加载状态 -->\n    <div\n      v-if=\"(loading || imageLoading) && !hasError\"\n      class=\"c-icon__loading\"\n      :style=\"iconStyle\"\n    >\n      <div class=\"c-icon__spinner\" />\n    </div>\n\n    <!-- 统一错误状态显示 -->\n    <Icon\n      v-else-if=\"hasError && fallbackIcon\"\n      :icon=\"fallbackIcon\"\n      :width=\"size\"\n      :height=\"size\"\n      :color=\"color\"\n      :style=\"iconStyle\"\n    />\n    <div\n      v-else-if=\"hasError\"\n      class=\"c-icon__error\"\n      :style=\"iconStyle\"\n      :title=\"`图标解析失败: ${iconDisplayName} (${errorMessage})`\"\n    >\n      ⚠️\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { Icon } from '@iconify/vue'\n  import { useImage } from '../../hooks/useImage'\n  import { computed, nextTick, onMounted, readonly, ref, watch } from 'vue'\n\n  export interface IconProps {\n    /** 图标名称/路径/组件实例 */\n    name: string | any\n    /** 图标类型 */\n    type?: 'iconify' | 'unocss' | 'component' | 'svg' | 'image'\n    /** 图标颜色 */\n    color?: string\n    /** 图标大小(px) */\n    size?: number | string\n    /** SVG路径数据(仅type=svg时使用) */\n    svgPath?: string\n    /** SVG viewBox(仅type=svg时使用) */\n    viewBox?: string\n    /** 图片alt属性(仅type=image时使用) */\n    alt?: string\n    /** 是否可点击 */\n    clickable?: boolean\n    /** 加载状态 */\n    loading?: boolean\n    /** 错误时的回退图标 */\n    fallbackIcon?: string\n    /** 工具提示 */\n    title?: string\n    /** 无障碍标签 */\n    ariaLabel?: string\n    /** 自定义样式类 */\n    customClass?: string\n    /** 旋转角度 */\n    rotate?: number\n    /** 是否翻转 */\n    flip?: 'horizontal' | 'vertical' | 'both'\n    /** 传递给组件的额外属性(仅type=component时使用) */\n    componentProps?: Record<string, any>\n  }\n\n  const props = withDefaults(defineProps<IconProps>(), {\n    name: undefined,\n    type: 'iconify',\n    color: 'currentColor',\n    size: 18,\n    svgPath: '',\n    viewBox: '0 0 24 24',\n    alt: '',\n    clickable: false,\n    loading: false,\n    fallbackIcon: '',\n    title: '',\n    ariaLabel: '',\n    customClass: '',\n    rotate: 0,\n    flip: undefined,\n    componentProps: () => ({}),\n  })\n\n  const emit = defineEmits<{\n    click: [event: MouseEvent]\n    error: [type: string, error?: any]\n    load: []\n  }>()\n\n  const iconRef = ref<HTMLElement>()\n  const hasError = ref(false)\n  const errorMessage = ref('')\n  const imageSrc = ref<string>('') // 存储异步加载的图片URL\n  const imageLoading = ref(false) // 图片加载状态\n\n  // 计算根元素样式\n  const rootStyle = computed(() => ({\n    fontSize: typeof props.size === 'number' ? `${props.size}px` : props.size,\n    color: props.color,\n    cursor: props.clickable ? 'pointer' : 'inherit',\n  }))\n\n  // 计算图标样式\n  const iconStyle = computed(() => {\n    const style: Record<string, any> = {\n      display: 'inline-flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      width: typeof props.size === 'number' ? `${props.size}px` : props.size,\n      height: typeof props.size === 'number' ? `${props.size}px` : props.size,\n    }\n\n    // 旋转\n    if (props.rotate) {\n      style.transform = `rotate(${props.rotate}deg)`\n    }\n\n    // 翻转\n    if (props.flip) {\n      const scaleX =\n        props.flip === 'horizontal' || props.flip === 'both' ? -1 : 1\n      const scaleY = props.flip === 'vertical' || props.flip === 'both' ? -1 : 1\n      style.transform = `${\n        style.transform || ''\n      } scaleX(${scaleX}) scaleY(${scaleY})`.trim()\n    }\n\n    return style\n  })\n\n  // 获取图标名称用于显示\n  const iconDisplayName = computed(() => {\n    if (typeof props.name === 'string') {\n      return props.name\n    }\n    if (props.name && props.name.__name) {\n      return props.name.__name\n    }\n    if (props.name && props.name.name) {\n      return props.name.name\n    }\n    return 'Component Icon'\n  })\n\n  // 图标类名\n  const iconClasses = computed(() => [\n    props.customClass,\n    {\n      'c-icon__rotatable': props.rotate !== 0,\n      'c-icon__flippable': !!props.flip,\n    },\n  ])\n\n  // 解析组件名称（纯计算属性，无副作用）\n  const resolvedComponent = computed(() => {\n    if (props.type !== 'component' || !props.name) return null\n    return props.name\n  })\n\n  // 统一错误处理函数\n  const handleError = (type: string, message: string, originalError?: any) => {\n    console.warn(`[C_Icon] ${message}:`, iconDisplayName.value, originalError)\n    errorMessage.value = message\n    imageLoading.value = false // 错误时停止加载状态\n    emit('error', type, originalError)\n\n    // 如果有回退图标，尝试切换为 fallback Iconify 图标\n    if (props.fallbackIcon && !hasError.value) {\n      hasError.value = false\n      // 将 name 重写为 fallbackIcon 并重置状态\n      // 因为 props 不可变，通过模板中的 fallback 分支渲染\n      return\n    }\n\n    hasError.value = true\n  }\n\n  // 处理点击事件\n  const handleClick = (event: MouseEvent) => {\n    if (!props.clickable || props.loading) return\n    emit('click', event)\n  }\n\n  // 处理键盘事件\n  const handleKeydown = (event: KeyboardEvent) => {\n    if (!props.clickable || props.loading) return\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      emit('click', event as any)\n    }\n  }\n\n  // 处理图片加载成功\n  const handleImageLoad = () => {\n    imageLoading.value = false\n    emit('load')\n  }\n\n  // 异步加载图片 - 修复关键函数\n  const loadImageSrc = async () => {\n    if (props.type !== 'image' || typeof props.name !== 'string') {\n      imageSrc.value = ''\n      return\n    }\n\n    // 如果是完整URL，直接设置\n    if (\n      props.name.startsWith('http://') ||\n      props.name.startsWith('https://') ||\n      props.name.startsWith('//') ||\n      props.name.startsWith('/')\n    ) {\n      imageSrc.value = props.name\n      return\n    }\n\n    // 其他情况都当作本地图片处理\n    try {\n      imageLoading.value = true\n      const imageUrl = await useImage(props.name)\n      if (imageUrl) {\n        imageSrc.value = imageUrl\n      } else {\n        handleError('image', '图片路径解析失败')\n      }\n    } catch (error) {\n      handleError('image', '图片加载失败', error)\n    } finally {\n      imageLoading.value = false\n    }\n  }\n\n  // 验证规则映射\n  const validationRules = {\n    iconify: (): string | null => {\n      if (!props.name.includes(':')) {\n        console.warn(\n          '[C_Icon] Iconify图标名称格式应为 \"prefix:name\"，如 \"mdi:home\"'\n        )\n      }\n      return null\n    },\n    unocss: (): string | null => {\n      if (typeof props.name !== 'string' || !props.name.startsWith('i-')) {\n        console.warn('[C_Icon] UnoCSS图标名称应以 \"i-\" 开头')\n      }\n      return null\n    },\n    component: (): string | null =>\n      !resolvedComponent.value ? '无法解析组件' : null,\n    svg: (): string | null => (!props.svgPath ? 'SVG路径不能为空' : null),\n    image: (): string | null => {\n      // 对于image类型，异步验证在loadImageSrc中处理\n      return null\n    },\n  }\n\n  // 验证配置\n  const validateProps = () => {\n    hasError.value = false\n    errorMessage.value = ''\n\n    // 基础验证\n    if (!props.name) {\n      return handleError('validation', '图标名称不能为空')\n    }\n\n    // 类型验证\n    const validator = validationRules[props.type]\n    if (!validator) {\n      return handleError('type', '不支持的图标类型')\n    }\n\n    const errorMsg = validator()\n    if (errorMsg) {\n      handleError(props.type, errorMsg)\n    }\n\n    // 如果是图片类型，异步加载图片\n    if (props.type === 'image') {\n      loadImageSrc()\n    }\n  }\n\n  // 监听关键属性变化\n  watch(\n    () => [props.name, props.type, props.svgPath],\n    () => {\n      nextTick(validateProps)\n    },\n    { immediate: true }\n  )\n\n  // 组件挂载后：仅对非 image 类型触发 load 事件（watch immediate 已完成验证）\n  onMounted(() => {\n    if (!hasError.value && props.type !== 'image') {\n      emit('load')\n    }\n  })\n\n  // 暴露方法给父组件\n  defineExpose({\n    /** 重新验证配置 */\n    validate: validateProps,\n    /** 是否有错误 */\n    hasError: readonly(hasError),\n    /** 错误信息 */\n    errorMessage: readonly(errorMessage),\n    /** DOM引用 */\n    el: iconRef,\n  })\n</script>\n","/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-05-14\n * @Description: 支持多种图标使用方式，默认使用Iconify图标，统一错误处理\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n  <div\n    ref=\"iconRef\"\n    class=\"c-icon\"\n    :class=\"[\n      `c-icon--${type}`,\n      {\n        'c-icon--clickable': clickable,\n        'c-icon--loading': loading,\n        'c-icon--error': hasError,\n      },\n    ]\"\n    :style=\"rootStyle\"\n    :title=\"title || undefined\"\n    :aria-label=\"ariaLabel || iconDisplayName\"\n    :role=\"clickable ? 'button' : 'img'\"\n    :tabindex=\"clickable ? 0 : -1\"\n    @click=\"handleClick\"\n    @keydown=\"handleKeydown\"\n  >\n    <!-- 方式1：Iconify图标（默认方式） -->\n    <Icon\n      v-if=\"\n        (type === 'iconify' || !type) && !hasError && typeof name === 'string'\n      \"\n      :icon=\"name\"\n      :width=\"size\"\n      :height=\"size\"\n      :color=\"color\"\n      :style=\"iconStyle\"\n      @error=\"() => handleError('iconify', 'Iconify图标加载失败')\"\n    />\n\n    <!-- 方式2：UnoCSS图标 -->\n    <div\n      v-else-if=\"type === 'unocss' && !hasError && typeof name === 'string'\"\n      :class=\"[name, iconClasses]\"\n      :style=\"iconStyle\"\n      @error=\"() => handleError('unocss', 'UnoCSS图标渲染失败')\"\n    />\n\n    <!-- 方式3：组件挂载方式 -->\n    <component\n      v-else-if=\"type === 'component' && resolvedComponent && !hasError\"\n      :is=\"resolvedComponent\"\n      :style=\"iconStyle\"\n      v-bind=\"componentProps\"\n      @error=\"() => handleError('component', '组件图标渲染失败')\"\n    />\n\n    <!-- 方式4：SVG路径方式 -->\n    <svg\n      v-else-if=\"type === 'svg' && svgPath && !hasError\"\n      :width=\"size\"\n      :height=\"size\"\n      :viewBox=\"viewBox\"\n      :style=\"iconStyle\"\n      :fill=\"color\"\n      @error=\"() => handleError('svg', 'SVG图标渲染失败')\"\n    >\n      <path\n        :d=\"svgPath\"\n        :fill=\"color\"\n      />\n    </svg>\n\n    <!-- 方式5：图片方式 - 修复异步加载 -->\n    <img\n      v-else-if=\"type === 'image' && imageSrc && !hasError && !imageLoading\"\n      :src=\"imageSrc\"\n      :alt=\"alt || iconDisplayName\"\n      :width=\"size\"\n      :height=\"size\"\n      style=\"display: inline-block; vertical-align: middle\"\n      @error=\"() => handleError('image', '图片图标加载失败')\"\n      @load=\"handleImageLoad\"\n    />\n\n    <!-- 图片加载状态 -->\n    <div\n      v-if=\"(loading || imageLoading) && !hasError\"\n      class=\"c-icon__loading\"\n      :style=\"iconStyle\"\n    >\n      <div class=\"c-icon__spinner\" />\n    </div>\n\n    <!-- 统一错误状态显示 -->\n    <Icon\n      v-else-if=\"hasError && fallbackIcon\"\n      :icon=\"fallbackIcon\"\n      :width=\"size\"\n      :height=\"size\"\n      :color=\"color\"\n      :style=\"iconStyle\"\n    />\n    <div\n      v-else-if=\"hasError\"\n      class=\"c-icon__error\"\n      :style=\"iconStyle\"\n      :title=\"`图标解析失败: ${iconDisplayName} (${errorMessage})`\"\n    >\n      ⚠️\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { Icon } from '@iconify/vue'\n  import { useImage } from '../../hooks/useImage'\n  import { computed, nextTick, onMounted, readonly, ref, watch } from 'vue'\n\n  export interface IconProps {\n    /** 图标名称/路径/组件实例 */\n    name: string | any\n    /** 图标类型 */\n    type?: 'iconify' | 'unocss' | 'component' | 'svg' | 'image'\n    /** 图标颜色 */\n    color?: string\n    /** 图标大小(px) */\n    size?: number | string\n    /** SVG路径数据(仅type=svg时使用) */\n    svgPath?: string\n    /** SVG viewBox(仅type=svg时使用) */\n    viewBox?: string\n    /** 图片alt属性(仅type=image时使用) */\n    alt?: string\n    /** 是否可点击 */\n    clickable?: boolean\n    /** 加载状态 */\n    loading?: boolean\n    /** 错误时的回退图标 */\n    fallbackIcon?: string\n    /** 工具提示 */\n    title?: string\n    /** 无障碍标签 */\n    ariaLabel?: string\n    /** 自定义样式类 */\n    customClass?: string\n    /** 旋转角度 */\n    rotate?: number\n    /** 是否翻转 */\n    flip?: 'horizontal' | 'vertical' | 'both'\n    /** 传递给组件的额外属性(仅type=component时使用) */\n    componentProps?: Record<string, any>\n  }\n\n  const props = withDefaults(defineProps<IconProps>(), {\n    name: undefined,\n    type: 'iconify',\n    color: 'currentColor',\n    size: 18,\n    svgPath: '',\n    viewBox: '0 0 24 24',\n    alt: '',\n    clickable: false,\n    loading: false,\n    fallbackIcon: '',\n    title: '',\n    ariaLabel: '',\n    customClass: '',\n    rotate: 0,\n    flip: undefined,\n    componentProps: () => ({}),\n  })\n\n  const emit = defineEmits<{\n    click: [event: MouseEvent]\n    error: [type: string, error?: any]\n    load: []\n  }>()\n\n  const iconRef = ref<HTMLElement>()\n  const hasError = ref(false)\n  const errorMessage = ref('')\n  const imageSrc = ref<string>('') // 存储异步加载的图片URL\n  const imageLoading = ref(false) // 图片加载状态\n\n  // 计算根元素样式\n  const rootStyle = computed(() => ({\n    fontSize: typeof props.size === 'number' ? `${props.size}px` : props.size,\n    color: props.color,\n    cursor: props.clickable ? 'pointer' : 'inherit',\n  }))\n\n  // 计算图标样式\n  const iconStyle = computed(() => {\n    const style: Record<string, any> = {\n      display: 'inline-flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      width: typeof props.size === 'number' ? `${props.size}px` : props.size,\n      height: typeof props.size === 'number' ? `${props.size}px` : props.size,\n    }\n\n    // 旋转\n    if (props.rotate) {\n      style.transform = `rotate(${props.rotate}deg)`\n    }\n\n    // 翻转\n    if (props.flip) {\n      const scaleX =\n        props.flip === 'horizontal' || props.flip === 'both' ? -1 : 1\n      const scaleY = props.flip === 'vertical' || props.flip === 'both' ? -1 : 1\n      style.transform = `${\n        style.transform || ''\n      } scaleX(${scaleX}) scaleY(${scaleY})`.trim()\n    }\n\n    return style\n  })\n\n  // 获取图标名称用于显示\n  const iconDisplayName = computed(() => {\n    if (typeof props.name === 'string') {\n      return props.name\n    }\n    if (props.name && props.name.__name) {\n      return props.name.__name\n    }\n    if (props.name && props.name.name) {\n      return props.name.name\n    }\n    return 'Component Icon'\n  })\n\n  // 图标类名\n  const iconClasses = computed(() => [\n    props.customClass,\n    {\n      'c-icon__rotatable': props.rotate !== 0,\n      'c-icon__flippable': !!props.flip,\n    },\n  ])\n\n  // 解析组件名称（纯计算属性，无副作用）\n  const resolvedComponent = computed(() => {\n    if (props.type !== 'component' || !props.name) return null\n    return props.name\n  })\n\n  // 统一错误处理函数\n  const handleError = (type: string, message: string, originalError?: any) => {\n    console.warn(`[C_Icon] ${message}:`, iconDisplayName.value, originalError)\n    errorMessage.value = message\n    imageLoading.value = false // 错误时停止加载状态\n    emit('error', type, originalError)\n\n    // 如果有回退图标，尝试切换为 fallback Iconify 图标\n    if (props.fallbackIcon && !hasError.value) {\n      hasError.value = false\n      // 将 name 重写为 fallbackIcon 并重置状态\n      // 因为 props 不可变，通过模板中的 fallback 分支渲染\n      return\n    }\n\n    hasError.value = true\n  }\n\n  // 处理点击事件\n  const handleClick = (event: MouseEvent) => {\n    if (!props.clickable || props.loading) return\n    emit('click', event)\n  }\n\n  // 处理键盘事件\n  const handleKeydown = (event: KeyboardEvent) => {\n    if (!props.clickable || props.loading) return\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      emit('click', event as any)\n    }\n  }\n\n  // 处理图片加载成功\n  const handleImageLoad = () => {\n    imageLoading.value = false\n    emit('load')\n  }\n\n  // 异步加载图片 - 修复关键函数\n  const loadImageSrc = async () => {\n    if (props.type !== 'image' || typeof props.name !== 'string') {\n      imageSrc.value = ''\n      return\n    }\n\n    // 如果是完整URL，直接设置\n    if (\n      props.name.startsWith('http://') ||\n      props.name.startsWith('https://') ||\n      props.name.startsWith('//') ||\n      props.name.startsWith('/')\n    ) {\n      imageSrc.value = props.name\n      return\n    }\n\n    // 其他情况都当作本地图片处理\n    try {\n      imageLoading.value = true\n      const imageUrl = await useImage(props.name)\n      if (imageUrl) {\n        imageSrc.value = imageUrl\n      } else {\n        handleError('image', '图片路径解析失败')\n      }\n    } catch (error) {\n      handleError('image', '图片加载失败', error)\n    } finally {\n      imageLoading.value = false\n    }\n  }\n\n  // 验证规则映射\n  const validationRules = {\n    iconify: (): string | null => {\n      if (!props.name.includes(':')) {\n        console.warn(\n          '[C_Icon] Iconify图标名称格式应为 \"prefix:name\"，如 \"mdi:home\"'\n        )\n      }\n      return null\n    },\n    unocss: (): string | null => {\n      if (typeof props.name !== 'string' || !props.name.startsWith('i-')) {\n        console.warn('[C_Icon] UnoCSS图标名称应以 \"i-\" 开头')\n      }\n      return null\n    },\n    component: (): string | null =>\n      !resolvedComponent.value ? '无法解析组件' : null,\n    svg: (): string | null => (!props.svgPath ? 'SVG路径不能为空' : null),\n    image: (): string | null => {\n      // 对于image类型，异步验证在loadImageSrc中处理\n      return null\n    },\n  }\n\n  // 验证配置\n  const validateProps = () => {\n    hasError.value = false\n    errorMessage.value = ''\n\n    // 基础验证\n    if (!props.name) {\n      return handleError('validation', '图标名称不能为空')\n    }\n\n    // 类型验证\n    const validator = validationRules[props.type]\n    if (!validator) {\n      return handleError('type', '不支持的图标类型')\n    }\n\n    const errorMsg = validator()\n    if (errorMsg) {\n      handleError(props.type, errorMsg)\n    }\n\n    // 如果是图片类型，异步加载图片\n    if (props.type === 'image') {\n      loadImageSrc()\n    }\n  }\n\n  // 监听关键属性变化\n  watch(\n    () => [props.name, props.type, props.svgPath],\n    () => {\n      nextTick(validateProps)\n    },\n    { immediate: true }\n  )\n\n  // 组件挂载后：仅对非 image 类型触发 load 事件（watch immediate 已完成验证）\n  onMounted(() => {\n    if (!hasError.value && props.type !== 'image') {\n      emit('load')\n    }\n  })\n\n  // 暴露方法给父组件\n  defineExpose({\n    /** 重新验证配置 */\n    validate: validateProps,\n    /** 是否有错误 */\n    hasError: readonly(hasError),\n    /** 错误信息 */\n    errorMessage: readonly(errorMessage),\n    /** DOM引用 */\n    el: iconRef,\n  })\n</script>\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-05-14\n * @Description: 支持多种图标使用方式，默认使用Iconify图标，统一错误处理\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n  <div\n    ref=\"iconRef\"\n    class=\"c-icon\"\n    :class=\"[\n      `c-icon--${type}`,\n      {\n        'c-icon--clickable': clickable,\n        'c-icon--loading': loading,\n        'c-icon--error': hasError,\n      },\n    ]\"\n    :style=\"rootStyle\"\n    :title=\"title || undefined\"\n    :aria-label=\"ariaLabel || iconDisplayName\"\n    :role=\"clickable ? 'button' : 'img'\"\n    :tabindex=\"clickable ? 0 : -1\"\n    @click=\"handleClick\"\n    @keydown=\"handleKeydown\"\n  >\n    <!-- 方式1：Iconify图标（默认方式） -->\n    <Icon\n      v-if=\"\n        (type === 'iconify' || !type) && !hasError && typeof name === 'string'\n      \"\n      :icon=\"name\"\n      :width=\"size\"\n      :height=\"size\"\n      :color=\"color\"\n      :style=\"iconStyle\"\n      @error=\"() => handleError('iconify', 'Iconify图标加载失败')\"\n    />\n\n    <!-- 方式2：UnoCSS图标 -->\n    <div\n      v-else-if=\"type === 'unocss' && !hasError && typeof name === 'string'\"\n      :class=\"[name, iconClasses]\"\n      :style=\"iconStyle\"\n      @error=\"() => handleError('unocss', 'UnoCSS图标渲染失败')\"\n    />\n\n    <!-- 方式3：组件挂载方式 -->\n    <component\n      v-else-if=\"type === 'component' && resolvedComponent && !hasError\"\n      :is=\"resolvedComponent\"\n      :style=\"iconStyle\"\n      v-bind=\"componentProps\"\n      @error=\"() => handleError('component', '组件图标渲染失败')\"\n    />\n\n    <!-- 方式4：SVG路径方式 -->\n    <svg\n      v-else-if=\"type === 'svg' && svgPath && !hasError\"\n      :width=\"size\"\n      :height=\"size\"\n      :viewBox=\"viewBox\"\n      :style=\"iconStyle\"\n      :fill=\"color\"\n      @error=\"() => handleError('svg', 'SVG图标渲染失败')\"\n    >\n      <path\n        :d=\"svgPath\"\n        :fill=\"color\"\n      />\n    </svg>\n\n    <!-- 方式5：图片方式 - 修复异步加载 -->\n    <img\n      v-else-if=\"type === 'image' && imageSrc && !hasError && !imageLoading\"\n      :src=\"imageSrc\"\n      :alt=\"alt || iconDisplayName\"\n      :width=\"size\"\n      :height=\"size\"\n      style=\"display: inline-block; vertical-align: middle\"\n      @error=\"() => handleError('image', '图片图标加载失败')\"\n      @load=\"handleImageLoad\"\n    />\n\n    <!-- 图片加载状态 -->\n    <div\n      v-if=\"(loading || imageLoading) && !hasError\"\n      class=\"c-icon__loading\"\n      :style=\"iconStyle\"\n    >\n      <div class=\"c-icon__spinner\" />\n    </div>\n\n    <!-- 统一错误状态显示 -->\n    <Icon\n      v-else-if=\"hasError && fallbackIcon\"\n      :icon=\"fallbackIcon\"\n      :width=\"size\"\n      :height=\"size\"\n      :color=\"color\"\n      :style=\"iconStyle\"\n    />\n    <div\n      v-else-if=\"hasError\"\n      class=\"c-icon__error\"\n      :style=\"iconStyle\"\n      :title=\"`图标解析失败: ${iconDisplayName} (${errorMessage})`\"\n    >\n      ⚠️\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { Icon } from '@iconify/vue'\n  import { useImage } from '../../hooks/useImage'\n  import { computed, nextTick, onMounted, readonly, ref, watch } from 'vue'\n\n  export interface IconProps {\n    /** 图标名称/路径/组件实例 */\n    name: string | any\n    /** 图标类型 */\n    type?: 'iconify' | 'unocss' | 'component' | 'svg' | 'image'\n    /** 图标颜色 */\n    color?: string\n    /** 图标大小(px) */\n    size?: number | string\n    /** SVG路径数据(仅type=svg时使用) */\n    svgPath?: string\n    /** SVG viewBox(仅type=svg时使用) */\n    viewBox?: string\n    /** 图片alt属性(仅type=image时使用) */\n    alt?: string\n    /** 是否可点击 */\n    clickable?: boolean\n    /** 加载状态 */\n    loading?: boolean\n    /** 错误时的回退图标 */\n    fallbackIcon?: string\n    /** 工具提示 */\n    title?: string\n    /** 无障碍标签 */\n    ariaLabel?: string\n    /** 自定义样式类 */\n    customClass?: string\n    /** 旋转角度 */\n    rotate?: number\n    /** 是否翻转 */\n    flip?: 'horizontal' | 'vertical' | 'both'\n    /** 传递给组件的额外属性(仅type=component时使用) */\n    componentProps?: Record<string, any>\n  }\n\n  const props = withDefaults(defineProps<IconProps>(), {\n    name: undefined,\n    type: 'iconify',\n    color: 'currentColor',\n    size: 18,\n    svgPath: '',\n    viewBox: '0 0 24 24',\n    alt: '',\n    clickable: false,\n    loading: false,\n    fallbackIcon: '',\n    title: '',\n    ariaLabel: '',\n    customClass: '',\n    rotate: 0,\n    flip: undefined,\n    componentProps: () => ({}),\n  })\n\n  const emit = defineEmits<{\n    click: [event: MouseEvent]\n    error: [type: string, error?: any]\n    load: []\n  }>()\n\n  const iconRef = ref<HTMLElement>()\n  const hasError = ref(false)\n  const errorMessage = ref('')\n  const imageSrc = ref<string>('') // 存储异步加载的图片URL\n  const imageLoading = ref(false) // 图片加载状态\n\n  // 计算根元素样式\n  const rootStyle = computed(() => ({\n    fontSize: typeof props.size === 'number' ? `${props.size}px` : props.size,\n    color: props.color,\n    cursor: props.clickable ? 'pointer' : 'inherit',\n  }))\n\n  // 计算图标样式\n  const iconStyle = computed(() => {\n    const style: Record<string, any> = {\n      display: 'inline-flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      width: typeof props.size === 'number' ? `${props.size}px` : props.size,\n      height: typeof props.size === 'number' ? `${props.size}px` : props.size,\n    }\n\n    // 旋转\n    if (props.rotate) {\n      style.transform = `rotate(${props.rotate}deg)`\n    }\n\n    // 翻转\n    if (props.flip) {\n      const scaleX =\n        props.flip === 'horizontal' || props.flip === 'both' ? -1 : 1\n      const scaleY = props.flip === 'vertical' || props.flip === 'both' ? -1 : 1\n      style.transform = `${\n        style.transform || ''\n      } scaleX(${scaleX}) scaleY(${scaleY})`.trim()\n    }\n\n    return style\n  })\n\n  // 获取图标名称用于显示\n  const iconDisplayName = computed(() => {\n    if (typeof props.name === 'string') {\n      return props.name\n    }\n    if (props.name && props.name.__name) {\n      return props.name.__name\n    }\n    if (props.name && props.name.name) {\n      return props.name.name\n    }\n    return 'Component Icon'\n  })\n\n  // 图标类名\n  const iconClasses = computed(() => [\n    props.customClass,\n    {\n      'c-icon__rotatable': props.rotate !== 0,\n      'c-icon__flippable': !!props.flip,\n    },\n  ])\n\n  // 解析组件名称（纯计算属性，无副作用）\n  const resolvedComponent = computed(() => {\n    if (props.type !== 'component' || !props.name) return null\n    return props.name\n  })\n\n  // 统一错误处理函数\n  const handleError = (type: string, message: string, originalError?: any) => {\n    console.warn(`[C_Icon] ${message}:`, iconDisplayName.value, originalError)\n    errorMessage.value = message\n    imageLoading.value = false // 错误时停止加载状态\n    emit('error', type, originalError)\n\n    // 如果有回退图标，尝试切换为 fallback Iconify 图标\n    if (props.fallbackIcon && !hasError.value) {\n      hasError.value = false\n      // 将 name 重写为 fallbackIcon 并重置状态\n      // 因为 props 不可变，通过模板中的 fallback 分支渲染\n      return\n    }\n\n    hasError.value = true\n  }\n\n  // 处理点击事件\n  const handleClick = (event: MouseEvent) => {\n    if (!props.clickable || props.loading) return\n    emit('click', event)\n  }\n\n  // 处理键盘事件\n  const handleKeydown = (event: KeyboardEvent) => {\n    if (!props.clickable || props.loading) return\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      emit('click', event as any)\n    }\n  }\n\n  // 处理图片加载成功\n  const handleImageLoad = () => {\n    imageLoading.value = false\n    emit('load')\n  }\n\n  // 异步加载图片 - 修复关键函数\n  const loadImageSrc = async () => {\n    if (props.type !== 'image' || typeof props.name !== 'string') {\n      imageSrc.value = ''\n      return\n    }\n\n    // 如果是完整URL，直接设置\n    if (\n      props.name.startsWith('http://') ||\n      props.name.startsWith('https://') ||\n      props.name.startsWith('//') ||\n      props.name.startsWith('/')\n    ) {\n      imageSrc.value = props.name\n      return\n    }\n\n    // 其他情况都当作本地图片处理\n    try {\n      imageLoading.value = true\n      const imageUrl = await useImage(props.name)\n      if (imageUrl) {\n        imageSrc.value = imageUrl\n      } else {\n        handleError('image', '图片路径解析失败')\n      }\n    } catch (error) {\n      handleError('image', '图片加载失败', error)\n    } finally {\n      imageLoading.value = false\n    }\n  }\n\n  // 验证规则映射\n  const validationRules = {\n    iconify: (): string | null => {\n      if (!props.name.includes(':')) {\n        console.warn(\n          '[C_Icon] Iconify图标名称格式应为 \"prefix:name\"，如 \"mdi:home\"'\n        )\n      }\n      return null\n    },\n    unocss: (): string | null => {\n      if (typeof props.name !== 'string' || !props.name.startsWith('i-')) {\n        console.warn('[C_Icon] UnoCSS图标名称应以 \"i-\" 开头')\n      }\n      return null\n    },\n    component: (): string | null =>\n      !resolvedComponent.value ? '无法解析组件' : null,\n    svg: (): string | null => (!props.svgPath ? 'SVG路径不能为空' : null),\n    image: (): string | null => {\n      // 对于image类型，异步验证在loadImageSrc中处理\n      return null\n    },\n  }\n\n  // 验证配置\n  const validateProps = () => {\n    hasError.value = false\n    errorMessage.value = ''\n\n    // 基础验证\n    if (!props.name) {\n      return handleError('validation', '图标名称不能为空')\n    }\n\n    // 类型验证\n    const validator = validationRules[props.type]\n    if (!validator) {\n      return handleError('type', '不支持的图标类型')\n    }\n\n    const errorMsg = validator()\n    if (errorMsg) {\n      handleError(props.type, errorMsg)\n    }\n\n    // 如果是图片类型，异步加载图片\n    if (props.type === 'image') {\n      loadImageSrc()\n    }\n  }\n\n  // 监听关键属性变化\n  watch(\n    () => [props.name, props.type, props.svgPath],\n    () => {\n      nextTick(validateProps)\n    },\n    { immediate: true }\n  )\n\n  // 组件挂载后：仅对非 image 类型触发 load 事件（watch immediate 已完成验证）\n  onMounted(() => {\n    if (!hasError.value && props.type !== 'image') {\n      emit('load')\n    }\n  })\n\n  // 暴露方法给父组件\n  defineExpose({\n    /** 重新验证配置 */\n    validate: validateProps,\n    /** 是否有错误 */\n    hasError: readonly(hasError),\n    /** 错误信息 */\n    errorMessage: readonly(errorMessage),\n    /** DOM引用 */\n    el: iconRef,\n  })\n</script>\n"],"mappings":"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"}

package/dist/C_Language.js.map

@@ -1 +1 @@
-{"version":3,"file":"C_Language.js","names":["modelValue"],"sources":["../src/components/C_Language/index.vue","../src/components/C_Language/index.vue","../src/components/C_Language/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-11-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  <NTooltip\r\n    placement=\"bottom\"\r\n    trigger=\"hover\"\r\n  >\r\n    <template #trigger>\r\n      <NDropdown\r\n        size=\"small\"\r\n        trigger=\"hover\"\r\n        :options=\"finalOptions\"\r\n        :value=\"modelValue\"\r\n        @select=\"handleLanguageChange\"\r\n      >\r\n        <NButton text>\r\n          <div class=\"flex items-center\">\r\n            <C_Icon\r\n              name=\"mdi:language\"\r\n              :size=\"18\"\r\n            />\r\n          </div>\r\n        </NButton>\r\n      </NDropdown>\r\n    </template>\r\n    <span>{{ tooltipText }}</span>\r\n  </NTooltip>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { computed, h } from 'vue'\r\n  import { NDropdown, NButton, NTooltip } from 'naive-ui'\r\n  import C_Icon from '../C_Icon/index.vue'\r\n\r\n  defineOptions({ name: 'C_Language' })\r\n\r\n  export interface LanguageOption {\r\n    key: string\r\n    label: string\r\n    iconClass?: string\r\n  }\r\n\r\n  const props = withDefaults(\r\n    defineProps<{\r\n      modelValue?: string\r\n      options?: LanguageOption[]\r\n      /** Tooltip 文案，默认 \"语言切换\" */\r\n      tooltip?: string\r\n    }>(),\r\n    {\r\n      modelValue: 'zh-cn',\r\n      tooltip: '语言切换',\r\n      options: () => [\r\n        { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\r\n        { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\r\n        { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\r\n        { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\r\n      ],\r\n    }\r\n  )\r\n\r\n  const emit = defineEmits<{\r\n    'update:modelValue': [key: string]\r\n    change: [key: string]\r\n  }>()\r\n\r\n  /** 当前语言显示名 */\r\n  const currentLabel = computed(() => {\r\n    const opt = props.options.find(o => o.key === props.modelValue)\r\n    return opt?.label ?? props.modelValue\r\n  })\r\n\r\n  const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\r\n\r\n  const finalOptions = computed(() =>\r\n    props.options.map(opt => ({\r\n      key: opt.key,\r\n      label: opt.label,\r\n      icon: opt.iconClass\r\n        ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\r\n        : undefined,\r\n    }))\r\n  )\r\n\r\n  const handleLanguageChange = (key: string) => {\r\n    if (key === props.modelValue) return\r\n    emit('update:modelValue', key)\r\n    emit('change', key)\r\n  }\r\n</script>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-11-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  <NTooltip\r\n    placement=\"bottom\"\r\n    trigger=\"hover\"\r\n  >\r\n    <template #trigger>\r\n      <NDropdown\r\n        size=\"small\"\r\n        trigger=\"hover\"\r\n        :options=\"finalOptions\"\r\n        :value=\"modelValue\"\r\n        @select=\"handleLanguageChange\"\r\n      >\r\n        <NButton text>\r\n          <div class=\"flex items-center\">\r\n            <C_Icon\r\n              name=\"mdi:language\"\r\n              :size=\"18\"\r\n            />\r\n          </div>\r\n        </NButton>\r\n      </NDropdown>\r\n    </template>\r\n    <span>{{ tooltipText }}</span>\r\n  </NTooltip>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { computed, h } from 'vue'\r\n  import { NDropdown, NButton, NTooltip } from 'naive-ui'\r\n  import C_Icon from '../C_Icon/index.vue'\r\n\r\n  defineOptions({ name: 'C_Language' })\r\n\r\n  export interface LanguageOption {\r\n    key: string\r\n    label: string\r\n    iconClass?: string\r\n  }\r\n\r\n  const props = withDefaults(\r\n    defineProps<{\r\n      modelValue?: string\r\n      options?: LanguageOption[]\r\n      /** Tooltip 文案，默认 \"语言切换\" */\r\n      tooltip?: string\r\n    }>(),\r\n    {\r\n      modelValue: 'zh-cn',\r\n      tooltip: '语言切换',\r\n      options: () => [\r\n        { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\r\n        { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\r\n        { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\r\n        { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\r\n      ],\r\n    }\r\n  )\r\n\r\n  const emit = defineEmits<{\r\n    'update:modelValue': [key: string]\r\n    change: [key: string]\r\n  }>()\r\n\r\n  /** 当前语言显示名 */\r\n  const currentLabel = computed(() => {\r\n    const opt = props.options.find(o => o.key === props.modelValue)\r\n    return opt?.label ?? props.modelValue\r\n  })\r\n\r\n  const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\r\n\r\n  const finalOptions = computed(() =>\r\n    props.options.map(opt => ({\r\n      key: opt.key,\r\n      label: opt.label,\r\n      icon: opt.iconClass\r\n        ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\r\n        : undefined,\r\n    }))\r\n  )\r\n\r\n  const handleLanguageChange = (key: string) => {\r\n    if (key === props.modelValue) return\r\n    emit('update:modelValue', key)\r\n    emit('change', key)\r\n  }\r\n</script>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-11-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  <NTooltip\r\n    placement=\"bottom\"\r\n    trigger=\"hover\"\r\n  >\r\n    <template #trigger>\r\n      <NDropdown\r\n        size=\"small\"\r\n        trigger=\"hover\"\r\n        :options=\"finalOptions\"\r\n        :value=\"modelValue\"\r\n        @select=\"handleLanguageChange\"\r\n      >\r\n        <NButton text>\r\n          <div class=\"flex items-center\">\r\n            <C_Icon\r\n              name=\"mdi:language\"\r\n              :size=\"18\"\r\n            />\r\n          </div>\r\n        </NButton>\r\n      </NDropdown>\r\n    </template>\r\n    <span>{{ tooltipText }}</span>\r\n  </NTooltip>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { computed, h } from 'vue'\r\n  import { NDropdown, NButton, NTooltip } from 'naive-ui'\r\n  import C_Icon from '../C_Icon/index.vue'\r\n\r\n  defineOptions({ name: 'C_Language' })\r\n\r\n  export interface LanguageOption {\r\n    key: string\r\n    label: string\r\n    iconClass?: string\r\n  }\r\n\r\n  const props = withDefaults(\r\n    defineProps<{\r\n      modelValue?: string\r\n      options?: LanguageOption[]\r\n      /** Tooltip 文案，默认 \"语言切换\" */\r\n      tooltip?: string\r\n    }>(),\r\n    {\r\n      modelValue: 'zh-cn',\r\n      tooltip: '语言切换',\r\n      options: () => [\r\n        { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\r\n        { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\r\n        { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\r\n        { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\r\n      ],\r\n    }\r\n  )\r\n\r\n  const emit = defineEmits<{\r\n    'update:modelValue': [key: string]\r\n    change: [key: string]\r\n  }>()\r\n\r\n  /** 当前语言显示名 */\r\n  const currentLabel = computed(() => {\r\n    const opt = props.options.find(o => o.key === props.modelValue)\r\n    return opt?.label ?? props.modelValue\r\n  })\r\n\r\n  const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\r\n\r\n  const finalOptions = computed(() =>\r\n    props.options.map(opt => ({\r\n      key: opt.key,\r\n      label: opt.label,\r\n      icon: opt.iconClass\r\n        ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\r\n        : undefined,\r\n    }))\r\n  )\r\n\r\n  const handleLanguageChange = (key: string) => {\r\n    if (key === props.modelValue) return\r\n    emit('update:modelValue', key)\r\n    emit('change', key)\r\n  }\r\n</script>\r\n"],"mappings":"mhBE+CE,IAAM,EAAQ,EAmBR,EAAO,EAMP,GAAA,EAAA,EAAA,cACQ,EAAM,QAAQ,KAAK,GAAK,EAAE,MAAQ,EAAM,WAAW,EACnD,OAAS,EAAM,WAC3B,CAEI,GAAA,EAAA,EAAA,cAA6B,GAAG,EAAM,QAAQ,IAAI,EAAa,MAAM,GAAG,CAExE,GAAA,EAAA,EAAA,cACJ,EAAM,QAAQ,IAAI,IAAQ,CACxB,IAAK,EAAI,IACT,MAAO,EAAI,MACX,KAAM,EAAI,eAAA,EAAA,EAAA,GACE,EAAA,EAAQ,CAAE,KAAM,EAAI,UAAW,KAAM,GAAI,CAAC,CAClD,IAAA,GACL,EAAE,CACJ,CAEK,EAAwB,GAAgB,CACxC,IAAQ,EAAM,aAClB,EAAK,oBAAqB,EAAI,CAC9B,EAAK,SAAU,EAAI,iEA7DV,EAAA,SAAA,CAAA,CAtBT,UAAU,SACV,QAAQ,UAEG,SAAA,EAAA,EAAA,aAgBG,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,UAAA,CAAA,CAdV,KAAK,QACL,QAAQ,QACP,QAAS,EAAA,MACT,MAAOA,EAAAA,WACP,SAAQ,8BASC,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,QAAA,CAAA,CAPD,KAAA,GAAI,CAAA,2BAML,EAAA,EAAA,EAAA,oBAAA,MALN,EAKM,EAAA,EAAA,EAAA,aADF,EAAA,EAAA,CAFA,KAAK,eACJ,KAAM,yEAMa,EAAA,EAAA,EAAA,oBAAA,OAAA,MAAA,EAAA,EAAA,iBAArB,EAAA,MAAW,CAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"C_Language.js","names":["modelValue"],"sources":["../src/components/C_Language/index.vue","../src/components/C_Language/index.vue","../src/components/C_Language/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-11-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  <NDropdown\r\n    size=\"small\"\r\n    trigger=\"hover\"\r\n    :options=\"finalOptions\"\r\n    :value=\"modelValue\"\r\n    @select=\"handleLanguageChange\"\r\n  >\r\n    <NButton text>\r\n      <div class=\"flex items-center\">\r\n        <C_Icon\r\n          name=\"mdi:language\"\r\n          :size=\"18\"\r\n          :title=\"tooltipText\"\r\n        />\r\n      </div>\r\n    </NButton>\r\n  </NDropdown>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { computed, h } from 'vue'\r\n  import { NDropdown, NButton } from 'naive-ui'\r\n  import C_Icon from '../C_Icon/index.vue'\r\n\r\n  defineOptions({ name: 'C_Language' })\r\n\r\n  export interface LanguageOption {\r\n    key: string\r\n    label: string\r\n    iconClass?: string\r\n  }\r\n\r\n  const props = withDefaults(\r\n    defineProps<{\r\n      modelValue?: string\r\n      options?: LanguageOption[]\r\n      /** Tooltip 文案，默认 \"语言切换\" */\r\n      tooltip?: string\r\n    }>(),\r\n    {\r\n      modelValue: 'zh-cn',\r\n      tooltip: '语言切换',\r\n      options: () => [\r\n        { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\r\n        { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\r\n        { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\r\n        { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\r\n      ],\r\n    }\r\n  )\r\n\r\n  const emit = defineEmits<{\r\n    'update:modelValue': [key: string]\r\n    change: [key: string]\r\n  }>()\r\n\r\n  /** 当前语言显示名 */\r\n  const currentLabel = computed(() => {\r\n    const opt = props.options.find(o => o.key === props.modelValue)\r\n    return opt?.label ?? props.modelValue\r\n  })\r\n\r\n  const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\r\n\r\n  const finalOptions = computed(() =>\r\n    props.options.map(opt => ({\r\n      key: opt.key,\r\n      label: opt.label,\r\n      icon: opt.iconClass\r\n        ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\r\n        : undefined,\r\n    }))\r\n  )\r\n\r\n  const handleLanguageChange = (key: string) => {\r\n    if (key === props.modelValue) return\r\n    emit('update:modelValue', key)\r\n    emit('change', key)\r\n  }\r\n</script>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-11-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  <NDropdown\r\n    size=\"small\"\r\n    trigger=\"hover\"\r\n    :options=\"finalOptions\"\r\n    :value=\"modelValue\"\r\n    @select=\"handleLanguageChange\"\r\n  >\r\n    <NButton text>\r\n      <div class=\"flex items-center\">\r\n        <C_Icon\r\n          name=\"mdi:language\"\r\n          :size=\"18\"\r\n          :title=\"tooltipText\"\r\n        />\r\n      </div>\r\n    </NButton>\r\n  </NDropdown>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { computed, h } from 'vue'\r\n  import { NDropdown, NButton } from 'naive-ui'\r\n  import C_Icon from '../C_Icon/index.vue'\r\n\r\n  defineOptions({ name: 'C_Language' })\r\n\r\n  export interface LanguageOption {\r\n    key: string\r\n    label: string\r\n    iconClass?: string\r\n  }\r\n\r\n  const props = withDefaults(\r\n    defineProps<{\r\n      modelValue?: string\r\n      options?: LanguageOption[]\r\n      /** Tooltip 文案，默认 \"语言切换\" */\r\n      tooltip?: string\r\n    }>(),\r\n    {\r\n      modelValue: 'zh-cn',\r\n      tooltip: '语言切换',\r\n      options: () => [\r\n        { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\r\n        { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\r\n        { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\r\n        { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\r\n      ],\r\n    }\r\n  )\r\n\r\n  const emit = defineEmits<{\r\n    'update:modelValue': [key: string]\r\n    change: [key: string]\r\n  }>()\r\n\r\n  /** 当前语言显示名 */\r\n  const currentLabel = computed(() => {\r\n    const opt = props.options.find(o => o.key === props.modelValue)\r\n    return opt?.label ?? props.modelValue\r\n  })\r\n\r\n  const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\r\n\r\n  const finalOptions = computed(() =>\r\n    props.options.map(opt => ({\r\n      key: opt.key,\r\n      label: opt.label,\r\n      icon: opt.iconClass\r\n        ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\r\n        : undefined,\r\n    }))\r\n  )\r\n\r\n  const handleLanguageChange = (key: string) => {\r\n    if (key === props.modelValue) return\r\n    emit('update:modelValue', key)\r\n    emit('change', key)\r\n  }\r\n</script>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-11-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  <NDropdown\r\n    size=\"small\"\r\n    trigger=\"hover\"\r\n    :options=\"finalOptions\"\r\n    :value=\"modelValue\"\r\n    @select=\"handleLanguageChange\"\r\n  >\r\n    <NButton text>\r\n      <div class=\"flex items-center\">\r\n        <C_Icon\r\n          name=\"mdi:language\"\r\n          :size=\"18\"\r\n          :title=\"tooltipText\"\r\n        />\r\n      </div>\r\n    </NButton>\r\n  </NDropdown>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { computed, h } from 'vue'\r\n  import { NDropdown, NButton } from 'naive-ui'\r\n  import C_Icon from '../C_Icon/index.vue'\r\n\r\n  defineOptions({ name: 'C_Language' })\r\n\r\n  export interface LanguageOption {\r\n    key: string\r\n    label: string\r\n    iconClass?: string\r\n  }\r\n\r\n  const props = withDefaults(\r\n    defineProps<{\r\n      modelValue?: string\r\n      options?: LanguageOption[]\r\n      /** Tooltip 文案，默认 \"语言切换\" */\r\n      tooltip?: string\r\n    }>(),\r\n    {\r\n      modelValue: 'zh-cn',\r\n      tooltip: '语言切换',\r\n      options: () => [\r\n        { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\r\n        { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\r\n        { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\r\n        { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\r\n      ],\r\n    }\r\n  )\r\n\r\n  const emit = defineEmits<{\r\n    'update:modelValue': [key: string]\r\n    change: [key: string]\r\n  }>()\r\n\r\n  /** 当前语言显示名 */\r\n  const currentLabel = computed(() => {\r\n    const opt = props.options.find(o => o.key === props.modelValue)\r\n    return opt?.label ?? props.modelValue\r\n  })\r\n\r\n  const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\r\n\r\n  const finalOptions = computed(() =>\r\n    props.options.map(opt => ({\r\n      key: opt.key,\r\n      label: opt.label,\r\n      icon: opt.iconClass\r\n        ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\r\n        : undefined,\r\n    }))\r\n  )\r\n\r\n  const handleLanguageChange = (key: string) => {\r\n    if (key === props.modelValue) return\r\n    emit('update:modelValue', key)\r\n    emit('change', key)\r\n  }\r\n</script>\r\n"],"mappings":"mhBEwCE,IAAM,EAAQ,EAmBR,EAAO,EAMP,GAAA,EAAA,EAAA,cACQ,EAAM,QAAQ,KAAK,GAAK,EAAE,MAAQ,EAAM,WAAW,EACnD,OAAS,EAAM,WAC3B,CAEI,GAAA,EAAA,EAAA,cAA6B,GAAG,EAAM,QAAQ,IAAI,EAAa,MAAM,GAAG,CAExE,GAAA,EAAA,EAAA,cACJ,EAAM,QAAQ,IAAI,IAAQ,CACxB,IAAK,EAAI,IACT,MAAO,EAAI,MACX,KAAM,EAAI,eAAA,EAAA,EAAA,GACE,EAAA,EAAQ,CAAE,KAAM,EAAI,UAAW,KAAM,GAAI,CAAC,CAClD,IAAA,GACL,EAAE,CACJ,CAEK,EAAwB,GAAgB,CACxC,IAAQ,EAAM,aAClB,EAAK,oBAAqB,EAAI,CAC9B,EAAK,SAAU,EAAI,iEA7DT,EAAA,UAAA,CAAA,CAfV,KAAK,QACL,QAAQ,QACP,QAAS,EAAA,MACT,MAAOA,EAAAA,WACP,SAAQ,8BAUC,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,QAAA,CAAA,CARD,KAAA,GAAI,CAAA,2BAOL,EAAA,EAAA,EAAA,oBAAA,MANN,EAMM,EAAA,EAAA,EAAA,aADF,EAAA,EAAA,CAHA,KAAK,eACJ,KAAM,GACN,MAAO,EAAA"}

package/dist/C_Language2.js

@@ -1,2 +1,2 @@
-import{t as e}from"./C_Icon2.js";import{NButton as t,NDropdown as n,NTooltip as r}from"naive-ui";import{computed as i,createBlock as a,createElementVNode as o,createVNode as s,defineComponent as c,h as l,openBlock as u,toDisplayString as d,unref as f,withCtx as p}from"vue";const m={class:`flex items-center`};var h=c({name:`C_Language`,__name:`index`,props:{modelValue:{default:`zh-cn`},options:{default:()=>[{key:`zh-cn`,label:`简体中文`,iconClass:`mdi:alpha-c`},{key:`en`,label:`English`,iconClass:`mdi:alpha-u`},{key:`ja`,label:`日本語`,iconClass:`mdi:alpha-j`},{key:`ko`,label:`한국어`,iconClass:`mdi:alpha-k`}]},tooltip:{default:`语言切换`}},emits:[`update:modelValue`,`change`],setup(c,{emit:h}){let g=c,_=h,v=i(()=>g.options.find(e=>e.key===g.modelValue)?.label??g.modelValue),y=i(()=>`${g.tooltip} (${v.value})`),b=i(()=>g.options.map(t=>({key:t.key,label:t.label,icon:t.iconClass?()=>l(e,{name:t.iconClass,size:16}):void 0}))),x=e=>{e!==g.modelValue&&(_(`update:modelValue`,e),_(`change`,e))};return(i,c)=>(u(),a(f(r),{placement:`bottom`,trigger:`hover`},{trigger:p(()=>[s(f(n),{size:`small`,trigger:`hover`,options:b.value,value:i.modelValue,onSelect:x},{default:p(()=>[s(f(t),{text:``},{default:p(()=>[o(`div`,m,[s(e,{name:`mdi:language`,size:18})])]),_:1})]),_:1},8,[`options`,`value`])]),default:p(()=>[o(`span`,null,d(y.value),1)]),_:1}))}});export{h as t};
+import{t as e}from"./C_Icon2.js";import{NButton as t,NDropdown as n}from"naive-ui";import{computed as r,createBlock as i,createElementVNode as a,createVNode as o,defineComponent as s,h as c,openBlock as l,unref as u,withCtx as d}from"vue";const f={class:`flex items-center`};var p=s({name:`C_Language`,__name:`index`,props:{modelValue:{default:`zh-cn`},options:{default:()=>[{key:`zh-cn`,label:`简体中文`,iconClass:`mdi:alpha-c`},{key:`en`,label:`English`,iconClass:`mdi:alpha-u`},{key:`ja`,label:`日本語`,iconClass:`mdi:alpha-j`},{key:`ko`,label:`한국어`,iconClass:`mdi:alpha-k`}]},tooltip:{default:`语言切换`}},emits:[`update:modelValue`,`change`],setup(s,{emit:p}){let m=s,h=p,g=r(()=>m.options.find(e=>e.key===m.modelValue)?.label??m.modelValue),_=r(()=>`${m.tooltip} (${g.value})`),v=r(()=>m.options.map(t=>({key:t.key,label:t.label,icon:t.iconClass?()=>c(e,{name:t.iconClass,size:16}):void 0}))),y=e=>{e!==m.modelValue&&(h(`update:modelValue`,e),h(`change`,e))};return(r,s)=>(l(),i(u(n),{size:`small`,trigger:`hover`,options:v.value,value:r.modelValue,onSelect:y},{default:d(()=>[o(u(t),{text:``},{default:d(()=>[a(`div`,f,[o(e,{name:`mdi:language`,size:18,title:_.value},null,8,[`title`])])]),_:1})]),_:1},8,[`options`,`value`]))}});export{p as t};
 //# sourceMappingURL=C_Language2.js.map

package/dist/C_Language2.js.map

@@ -1 +1 @@
-{"version":3,"file":"C_Language2.js","names":["modelValue"],"sources":["../src/components/C_Language/index.vue","../src/components/C_Language/index.vue","../src/components/C_Language/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-11-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  <NTooltip\r\n    placement=\"bottom\"\r\n    trigger=\"hover\"\r\n  >\r\n    <template #trigger>\r\n      <NDropdown\r\n        size=\"small\"\r\n        trigger=\"hover\"\r\n        :options=\"finalOptions\"\r\n        :value=\"modelValue\"\r\n        @select=\"handleLanguageChange\"\r\n      >\r\n        <NButton text>\r\n          <div class=\"flex items-center\">\r\n            <C_Icon\r\n              name=\"mdi:language\"\r\n              :size=\"18\"\r\n            />\r\n          </div>\r\n        </NButton>\r\n      </NDropdown>\r\n    </template>\r\n    <span>{{ tooltipText }}</span>\r\n  </NTooltip>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { computed, h } from 'vue'\r\n  import { NDropdown, NButton, NTooltip } from 'naive-ui'\r\n  import C_Icon from '../C_Icon/index.vue'\r\n\r\n  defineOptions({ name: 'C_Language' })\r\n\r\n  export interface LanguageOption {\r\n    key: string\r\n    label: string\r\n    iconClass?: string\r\n  }\r\n\r\n  const props = withDefaults(\r\n    defineProps<{\r\n      modelValue?: string\r\n      options?: LanguageOption[]\r\n      /** Tooltip 文案，默认 \"语言切换\" */\r\n      tooltip?: string\r\n    }>(),\r\n    {\r\n      modelValue: 'zh-cn',\r\n      tooltip: '语言切换',\r\n      options: () => [\r\n        { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\r\n        { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\r\n        { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\r\n        { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\r\n      ],\r\n    }\r\n  )\r\n\r\n  const emit = defineEmits<{\r\n    'update:modelValue': [key: string]\r\n    change: [key: string]\r\n  }>()\r\n\r\n  /** 当前语言显示名 */\r\n  const currentLabel = computed(() => {\r\n    const opt = props.options.find(o => o.key === props.modelValue)\r\n    return opt?.label ?? props.modelValue\r\n  })\r\n\r\n  const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\r\n\r\n  const finalOptions = computed(() =>\r\n    props.options.map(opt => ({\r\n      key: opt.key,\r\n      label: opt.label,\r\n      icon: opt.iconClass\r\n        ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\r\n        : undefined,\r\n    }))\r\n  )\r\n\r\n  const handleLanguageChange = (key: string) => {\r\n    if (key === props.modelValue) return\r\n    emit('update:modelValue', key)\r\n    emit('change', key)\r\n  }\r\n</script>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-11-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  <NTooltip\r\n    placement=\"bottom\"\r\n    trigger=\"hover\"\r\n  >\r\n    <template #trigger>\r\n      <NDropdown\r\n        size=\"small\"\r\n        trigger=\"hover\"\r\n        :options=\"finalOptions\"\r\n        :value=\"modelValue\"\r\n        @select=\"handleLanguageChange\"\r\n      >\r\n        <NButton text>\r\n          <div class=\"flex items-center\">\r\n            <C_Icon\r\n              name=\"mdi:language\"\r\n              :size=\"18\"\r\n            />\r\n          </div>\r\n        </NButton>\r\n      </NDropdown>\r\n    </template>\r\n    <span>{{ tooltipText }}</span>\r\n  </NTooltip>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { computed, h } from 'vue'\r\n  import { NDropdown, NButton, NTooltip } from 'naive-ui'\r\n  import C_Icon from '../C_Icon/index.vue'\r\n\r\n  defineOptions({ name: 'C_Language' })\r\n\r\n  export interface LanguageOption {\r\n    key: string\r\n    label: string\r\n    iconClass?: string\r\n  }\r\n\r\n  const props = withDefaults(\r\n    defineProps<{\r\n      modelValue?: string\r\n      options?: LanguageOption[]\r\n      /** Tooltip 文案，默认 \"语言切换\" */\r\n      tooltip?: string\r\n    }>(),\r\n    {\r\n      modelValue: 'zh-cn',\r\n      tooltip: '语言切换',\r\n      options: () => [\r\n        { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\r\n        { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\r\n        { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\r\n        { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\r\n      ],\r\n    }\r\n  )\r\n\r\n  const emit = defineEmits<{\r\n    'update:modelValue': [key: string]\r\n    change: [key: string]\r\n  }>()\r\n\r\n  /** 当前语言显示名 */\r\n  const currentLabel = computed(() => {\r\n    const opt = props.options.find(o => o.key === props.modelValue)\r\n    return opt?.label ?? props.modelValue\r\n  })\r\n\r\n  const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\r\n\r\n  const finalOptions = computed(() =>\r\n    props.options.map(opt => ({\r\n      key: opt.key,\r\n      label: opt.label,\r\n      icon: opt.iconClass\r\n        ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\r\n        : undefined,\r\n    }))\r\n  )\r\n\r\n  const handleLanguageChange = (key: string) => {\r\n    if (key === props.modelValue) return\r\n    emit('update:modelValue', key)\r\n    emit('change', key)\r\n  }\r\n</script>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-11-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  <NTooltip\r\n    placement=\"bottom\"\r\n    trigger=\"hover\"\r\n  >\r\n    <template #trigger>\r\n      <NDropdown\r\n        size=\"small\"\r\n        trigger=\"hover\"\r\n        :options=\"finalOptions\"\r\n        :value=\"modelValue\"\r\n        @select=\"handleLanguageChange\"\r\n      >\r\n        <NButton text>\r\n          <div class=\"flex items-center\">\r\n            <C_Icon\r\n              name=\"mdi:language\"\r\n              :size=\"18\"\r\n            />\r\n          </div>\r\n        </NButton>\r\n      </NDropdown>\r\n    </template>\r\n    <span>{{ tooltipText }}</span>\r\n  </NTooltip>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { computed, h } from 'vue'\r\n  import { NDropdown, NButton, NTooltip } from 'naive-ui'\r\n  import C_Icon from '../C_Icon/index.vue'\r\n\r\n  defineOptions({ name: 'C_Language' })\r\n\r\n  export interface LanguageOption {\r\n    key: string\r\n    label: string\r\n    iconClass?: string\r\n  }\r\n\r\n  const props = withDefaults(\r\n    defineProps<{\r\n      modelValue?: string\r\n      options?: LanguageOption[]\r\n      /** Tooltip 文案，默认 \"语言切换\" */\r\n      tooltip?: string\r\n    }>(),\r\n    {\r\n      modelValue: 'zh-cn',\r\n      tooltip: '语言切换',\r\n      options: () => [\r\n        { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\r\n        { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\r\n        { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\r\n        { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\r\n      ],\r\n    }\r\n  )\r\n\r\n  const emit = defineEmits<{\r\n    'update:modelValue': [key: string]\r\n    change: [key: string]\r\n  }>()\r\n\r\n  /** 当前语言显示名 */\r\n  const currentLabel = computed(() => {\r\n    const opt = props.options.find(o => o.key === props.modelValue)\r\n    return opt?.label ?? props.modelValue\r\n  })\r\n\r\n  const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\r\n\r\n  const finalOptions = computed(() =>\r\n    props.options.map(opt => ({\r\n      key: opt.key,\r\n      label: opt.label,\r\n      icon: opt.iconClass\r\n        ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\r\n        : undefined,\r\n    }))\r\n  )\r\n\r\n  const handleLanguageChange = (key: string) => {\r\n    if (key === props.modelValue) return\r\n    emit('update:modelValue', key)\r\n    emit('change', key)\r\n  }\r\n</script>\r\n"],"mappings":"irBE+CE,IAAM,EAAQ,EAmBR,EAAO,EAMP,EAAe,MACP,EAAM,QAAQ,KAAK,GAAK,EAAE,MAAQ,EAAM,WAAW,EACnD,OAAS,EAAM,WAC3B,CAEI,EAAc,MAAe,GAAG,EAAM,QAAQ,IAAI,EAAa,MAAM,GAAG,CAExE,EAAe,MACnB,EAAM,QAAQ,IAAI,IAAQ,CACxB,IAAK,EAAI,IACT,MAAO,EAAI,MACX,KAAM,EAAI,cACA,EAAE,EAAQ,CAAE,KAAM,EAAI,UAAW,KAAM,GAAI,CAAC,CAClD,IAAA,GACL,EAAE,CACJ,CAEK,EAAwB,GAAgB,CACxC,IAAQ,EAAM,aAClB,EAAK,oBAAqB,EAAI,CAC9B,EAAK,SAAU,EAAI,qBApFrB,EAuBW,EAAA,EAAA,CAAA,CAtBT,UAAU,SACV,QAAQ,UAEG,QAAO,MAgBJ,CAfZ,EAeY,EAAA,EAAA,CAAA,CAdV,KAAK,QACL,QAAQ,QACP,QAAS,EAAA,MACT,MAAOA,EAAAA,WACP,SAAQ,kBASC,CAPV,EAOU,EAAA,EAAA,CAAA,CAPD,KAAA,GAAI,CAAA,eAML,CALN,EAKM,MALN,EAKM,CAJJ,EAGE,EAAA,CAFA,KAAK,eACJ,KAAM,6DAMa,CAA9B,EAA8B,OAAA,KAAA,EAArB,EAAA,MAAW,CAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"C_Language2.js","names":["modelValue"],"sources":["../src/components/C_Language/index.vue","../src/components/C_Language/index.vue","../src/components/C_Language/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-11-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  <NDropdown\r\n    size=\"small\"\r\n    trigger=\"hover\"\r\n    :options=\"finalOptions\"\r\n    :value=\"modelValue\"\r\n    @select=\"handleLanguageChange\"\r\n  >\r\n    <NButton text>\r\n      <div class=\"flex items-center\">\r\n        <C_Icon\r\n          name=\"mdi:language\"\r\n          :size=\"18\"\r\n          :title=\"tooltipText\"\r\n        />\r\n      </div>\r\n    </NButton>\r\n  </NDropdown>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { computed, h } from 'vue'\r\n  import { NDropdown, NButton } from 'naive-ui'\r\n  import C_Icon from '../C_Icon/index.vue'\r\n\r\n  defineOptions({ name: 'C_Language' })\r\n\r\n  export interface LanguageOption {\r\n    key: string\r\n    label: string\r\n    iconClass?: string\r\n  }\r\n\r\n  const props = withDefaults(\r\n    defineProps<{\r\n      modelValue?: string\r\n      options?: LanguageOption[]\r\n      /** Tooltip 文案，默认 \"语言切换\" */\r\n      tooltip?: string\r\n    }>(),\r\n    {\r\n      modelValue: 'zh-cn',\r\n      tooltip: '语言切换',\r\n      options: () => [\r\n        { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\r\n        { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\r\n        { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\r\n        { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\r\n      ],\r\n    }\r\n  )\r\n\r\n  const emit = defineEmits<{\r\n    'update:modelValue': [key: string]\r\n    change: [key: string]\r\n  }>()\r\n\r\n  /** 当前语言显示名 */\r\n  const currentLabel = computed(() => {\r\n    const opt = props.options.find(o => o.key === props.modelValue)\r\n    return opt?.label ?? props.modelValue\r\n  })\r\n\r\n  const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\r\n\r\n  const finalOptions = computed(() =>\r\n    props.options.map(opt => ({\r\n      key: opt.key,\r\n      label: opt.label,\r\n      icon: opt.iconClass\r\n        ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\r\n        : undefined,\r\n    }))\r\n  )\r\n\r\n  const handleLanguageChange = (key: string) => {\r\n    if (key === props.modelValue) return\r\n    emit('update:modelValue', key)\r\n    emit('change', key)\r\n  }\r\n</script>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-11-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  <NDropdown\r\n    size=\"small\"\r\n    trigger=\"hover\"\r\n    :options=\"finalOptions\"\r\n    :value=\"modelValue\"\r\n    @select=\"handleLanguageChange\"\r\n  >\r\n    <NButton text>\r\n      <div class=\"flex items-center\">\r\n        <C_Icon\r\n          name=\"mdi:language\"\r\n          :size=\"18\"\r\n          :title=\"tooltipText\"\r\n        />\r\n      </div>\r\n    </NButton>\r\n  </NDropdown>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { computed, h } from 'vue'\r\n  import { NDropdown, NButton } from 'naive-ui'\r\n  import C_Icon from '../C_Icon/index.vue'\r\n\r\n  defineOptions({ name: 'C_Language' })\r\n\r\n  export interface LanguageOption {\r\n    key: string\r\n    label: string\r\n    iconClass?: string\r\n  }\r\n\r\n  const props = withDefaults(\r\n    defineProps<{\r\n      modelValue?: string\r\n      options?: LanguageOption[]\r\n      /** Tooltip 文案，默认 \"语言切换\" */\r\n      tooltip?: string\r\n    }>(),\r\n    {\r\n      modelValue: 'zh-cn',\r\n      tooltip: '语言切换',\r\n      options: () => [\r\n        { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\r\n        { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\r\n        { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\r\n        { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\r\n      ],\r\n    }\r\n  )\r\n\r\n  const emit = defineEmits<{\r\n    'update:modelValue': [key: string]\r\n    change: [key: string]\r\n  }>()\r\n\r\n  /** 当前语言显示名 */\r\n  const currentLabel = computed(() => {\r\n    const opt = props.options.find(o => o.key === props.modelValue)\r\n    return opt?.label ?? props.modelValue\r\n  })\r\n\r\n  const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\r\n\r\n  const finalOptions = computed(() =>\r\n    props.options.map(opt => ({\r\n      key: opt.key,\r\n      label: opt.label,\r\n      icon: opt.iconClass\r\n        ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\r\n        : undefined,\r\n    }))\r\n  )\r\n\r\n  const handleLanguageChange = (key: string) => {\r\n    if (key === props.modelValue) return\r\n    emit('update:modelValue', key)\r\n    emit('change', key)\r\n  }\r\n</script>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-11-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  <NDropdown\r\n    size=\"small\"\r\n    trigger=\"hover\"\r\n    :options=\"finalOptions\"\r\n    :value=\"modelValue\"\r\n    @select=\"handleLanguageChange\"\r\n  >\r\n    <NButton text>\r\n      <div class=\"flex items-center\">\r\n        <C_Icon\r\n          name=\"mdi:language\"\r\n          :size=\"18\"\r\n          :title=\"tooltipText\"\r\n        />\r\n      </div>\r\n    </NButton>\r\n  </NDropdown>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { computed, h } from 'vue'\r\n  import { NDropdown, NButton } from 'naive-ui'\r\n  import C_Icon from '../C_Icon/index.vue'\r\n\r\n  defineOptions({ name: 'C_Language' })\r\n\r\n  export interface LanguageOption {\r\n    key: string\r\n    label: string\r\n    iconClass?: string\r\n  }\r\n\r\n  const props = withDefaults(\r\n    defineProps<{\r\n      modelValue?: string\r\n      options?: LanguageOption[]\r\n      /** Tooltip 文案，默认 \"语言切换\" */\r\n      tooltip?: string\r\n    }>(),\r\n    {\r\n      modelValue: 'zh-cn',\r\n      tooltip: '语言切换',\r\n      options: () => [\r\n        { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\r\n        { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\r\n        { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\r\n        { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\r\n      ],\r\n    }\r\n  )\r\n\r\n  const emit = defineEmits<{\r\n    'update:modelValue': [key: string]\r\n    change: [key: string]\r\n  }>()\r\n\r\n  /** 当前语言显示名 */\r\n  const currentLabel = computed(() => {\r\n    const opt = props.options.find(o => o.key === props.modelValue)\r\n    return opt?.label ?? props.modelValue\r\n  })\r\n\r\n  const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\r\n\r\n  const finalOptions = computed(() =>\r\n    props.options.map(opt => ({\r\n      key: opt.key,\r\n      label: opt.label,\r\n      icon: opt.iconClass\r\n        ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\r\n        : undefined,\r\n    }))\r\n  )\r\n\r\n  const handleLanguageChange = (key: string) => {\r\n    if (key === props.modelValue) return\r\n    emit('update:modelValue', key)\r\n    emit('change', key)\r\n  }\r\n</script>\r\n"],"mappings":"8oBEwCE,IAAM,EAAQ,EAmBR,EAAO,EAMP,EAAe,MACP,EAAM,QAAQ,KAAK,GAAK,EAAE,MAAQ,EAAM,WAAW,EACnD,OAAS,EAAM,WAC3B,CAEI,EAAc,MAAe,GAAG,EAAM,QAAQ,IAAI,EAAa,MAAM,GAAG,CAExE,EAAe,MACnB,EAAM,QAAQ,IAAI,IAAQ,CACxB,IAAK,EAAI,IACT,MAAO,EAAI,MACX,KAAM,EAAI,cACA,EAAE,EAAQ,CAAE,KAAM,EAAI,UAAW,KAAM,GAAI,CAAC,CAClD,IAAA,GACL,EAAE,CACJ,CAEK,EAAwB,GAAgB,CACxC,IAAQ,EAAM,aAClB,EAAK,oBAAqB,EAAI,CAC9B,EAAK,SAAU,EAAI,qBA7ErB,EAgBY,EAAA,EAAA,CAAA,CAfV,KAAK,QACL,QAAQ,QACP,QAAS,EAAA,MACT,MAAOA,EAAAA,WACP,SAAQ,kBAUC,CARV,EAQU,EAAA,EAAA,CAAA,CARD,KAAA,GAAI,CAAA,eAOL,CANN,EAMM,MANN,EAMM,CALJ,EAIE,EAAA,CAHA,KAAK,eACJ,KAAM,GACN,MAAO,EAAA"}

package/dist/constants.d.ts

@@ -119,8 +119,8 @@ declare const __VLS_export: vue.DefineComponent<CronProps, {
   "onValidation-change"?: ((result: CronValidation) => any) | undefined;
 }>, {
   modelValue: string;
-  disabled: boolean;
   height: string | number;
+  disabled: boolean;
   showPreview: boolean;
   previewCount: number;
   showTemplates: boolean;

package/dist/constants2.d.ts

@@ -121,9 +121,9 @@ declare const __VLS_export: vue.DefineComponent<FormulaEditorProps, FormulaEdito
   "onValidation-change"?: ((result: FormulaValidation) => any) | undefined;
 }>, {
   modelValue: string;
+  height: string | number;
   placeholder: string;
   disabled: boolean;
-  height: string | number;
   showPreview: boolean;
   variables: FormulaVariable[];
   functions: FormulaFunction[];

package/dist/constants3.d.ts

@@ -168,11 +168,11 @@ declare const __VLS_export: vue.DefineComponent<NotificationCenterProps, Notific
   onNewMessage?: ((message: NotificationMessage) => any) | undefined;
   onNavigate?: ((url: string) => any) | undefined;
 }>, {
-  pageSize: number;
-  storageKey: string;
   desktopNotification: boolean;
   maxBadgeCount: number;
   pollingInterval: number;
+  pageSize: number;
+  storageKey: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion
@@ -217,7 +217,7 @@ declare function useNotificationCore(props: NotificationCenterProps): {
     actionText?: string | undefined;
     extra?: Record<string, unknown> | undefined;
   }[]>;
-  activeCategory: vue.Ref<"all" | NotificationCategory, "all" | NotificationCategory>;
+  activeCategory: vue.Ref<NotificationCategory | "all", NotificationCategory | "all">;
   loading: vue.Ref<boolean, boolean>;
   total: vue.Ref<number, number>;
   page: vue.Ref<number, number>;

package/dist/constants4.d.ts

@@ -197,30 +197,30 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: vue.DefineComponent<UploadProps, UploadExpose, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
   change: (fileList: UploadFileItem[]) => any;
-  success: (file: UploadFileItem, response: any) => any;
   error: (file: UploadFileItem, error: Error) => any;
+  success: (file: UploadFileItem, response: any) => any;
   progress: (file: UploadFileItem, percent: number) => any;
   remove: (file: UploadFileItem) => any;
   finish: (fileList: UploadFileItem[]) => any;
   exceed: (files: File[], fileList: UploadFileItem[]) => any;
 }, string, vue.PublicProps, Readonly<UploadProps> & Readonly<{
   onChange?: ((fileList: UploadFileItem[]) => any) | undefined;
-  onSuccess?: ((file: UploadFileItem, response: any) => any) | undefined;
   onError?: ((file: UploadFileItem, error: Error) => any) | undefined;
+  onSuccess?: ((file: UploadFileItem, response: any) => any) | undefined;
   onProgress?: ((file: UploadFileItem, percent: number) => any) | undefined;
   onRemove?: ((file: UploadFileItem) => any) | undefined;
   onFinish?: ((fileList: UploadFileItem[]) => any) | undefined;
   onExceed?: ((files: File[], fileList: UploadFileItem[]) => any) | undefined;
 }>, {
+  data: Record<string, any>;
   disabled: boolean;
   multiple: boolean;
   draggable: boolean;
-  data: Record<string, any>;
-  maxSize: number;
   action: string;
   headers: Record<string, string>;
   directory: boolean;
   accept: string;
+  maxSize: number;
   maxCount: number;
   pasteable: boolean;
   chunked: boolean;

package/dist/data.d.ts

@@ -24,10 +24,10 @@ declare const __VLS_export: vue.DefineComponent<__VLS_Props, {}, {}, {}, {}, vue
 }>, {
   height: string;
   center: [number, number];
-  zoom: number;
   markers: MapMarker$1[];
-  mapType: "osm" | "amap";
   amapKey: string;
+  zoom: number;
+  mapType: "osm" | "amap";
 }, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/index11.vue.d.ts

@@ -55,12 +55,12 @@ declare const __VLS_export: vue.DefineComponent<IconProps, {
   color: string;
   loading: boolean;
   flip: "horizontal" | "vertical" | "both";
+  clickable: boolean;
   title: string;
   rotate: number;
   svgPath: string;
   viewBox: string;
   alt: string;
-  clickable: boolean;
   fallbackIcon: string;
   ariaLabel: string;
   customClass: string;

package/dist/index13.vue.d.ts

@@ -59,11 +59,9 @@ declare const __VLS_export: vue.DefineComponent<Props, {
   "onMax-length-exceeded"?: ((currentLength: number, maxLength: number) => any) | undefined;
 }>, {
   modelValue: string;
+  height: string | number;
   placeholder: string;
   disabled: boolean;
-  height: string | number;
-  isDark: boolean;
-  autoSave: boolean;
   mode: "edit" | "editable" | "preview";
   tocNavPosition: "left" | "right";
   defaultFullscreen: boolean;
@@ -73,7 +71,9 @@ declare const __VLS_export: vue.DefineComponent<Props, {
   rightToolbar: string;
   maxLength: number;
   showWordCount: boolean;
+  autoSave: boolean;
   autoSaveInterval: number;
+  isDark: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/index15.vue.d.ts

@@ -35,8 +35,8 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: vue.DefineComponent<Props, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<Props> & Readonly<{}>, {
   status: "default" | "success" | "error" | "warning" | "info";
-  strokeWidth: number;
   time: number;
+  strokeWidth: number;
   percentage: number | number[];
   isAnimation: boolean;
   indicatorPlacement: "inside" | "outside";

package/dist/index16.vue.d.ts

@@ -23,9 +23,9 @@ declare const __VLS_export: vue.DefineComponent<__VLS_Props, {}, {}, {}, {}, vue
   onChange?: ((args_0: number) => any) | undefined;
   "onUpdate:current"?: ((args_0: number) => any) | undefined;
 }>, {
+  current: number;
   direction: "horizontal" | "vertical";
   clickable: boolean;
-  current: number;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/index17.vue.d.ts

@@ -76,10 +76,10 @@ declare const __VLS_export: vue.DefineComponent<__VLS_Props, {
   onClose?: ((fallbackPath: string) => any) | undefined;
   onCloseAll?: (() => any) | undefined;
 }>, {
+  persistKey: string;
   homePath: string;
   homeTitle: string;
   homeIcon: string;
-  persistKey: string;
   contextMenuLabels: ContextMenuLabels;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/index19.vue.d.ts

@@ -647,11 +647,11 @@ declare const __VLS_export: vue.DefineComponent<Props, {
   onTaskClick?: ((task: GanttTask, event: Event) => any) | undefined;
   onTaskChange?: ((task: GanttTask, changes: any) => any) | undefined;
 }>, {
+  data: GanttTask[];
+  height: string | number;
   theme: "light" | "dark";
   options: GanttOptions;
-  height: string | number;
   title: string;
-  data: GanttTask[];
   showToolbar: boolean;
   preset: GanttPreset;
   showFullscreenButton: boolean;

package/dist/index2.vue.d.ts

@@ -20,16 +20,16 @@ declare const __VLS_export: vue.DefineComponent<Props, {}, {}, {}, {}, vue.Compo
 }, string, vue.PublicProps, Readonly<Props> & Readonly<{
   onError?: ((error: Error) => any) | undefined;
 }>, {
-  label: string;
+  format: "CODE128" | "CODE39" | "EAN13" | "EAN8" | "UPC" | "ITF14" | "MSI" | "pharmacode";
   width: number;
   height: number;
-  fontSize: number;
-  format: "CODE128" | "CODE39" | "EAN13" | "EAN8" | "UPC" | "ITF14" | "MSI" | "pharmacode";
   showText: boolean;
+  fontSize: number;
   textPosition: "bottom" | "top";
   lineColor: string;
   background: string;
   showBorder: boolean;
+  label: string;
   showLabel: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/index7.vue.d.ts

@@ -34,11 +34,11 @@ declare const __VLS_export: vue.DefineComponent<Props, {
   onFullscreen?: ((isFullscreen: boolean) => any) | undefined;
 }>, {
   trim: boolean;
-  wordWrap: boolean;
   code: string;
   language: string;
   showHeader: boolean;
   showLineNumbers: boolean;
+  wordWrap: boolean;
   showFullscreen: boolean;
   autoLoadLanguage: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;

package/dist/index9.vue.d.ts

@@ -29,10 +29,10 @@ declare const __VLS_export: vue.DefineComponent<Props, {
   "onEditor-change"?: ((html: string) => any) | undefined;
 }>, {
   modelValue: string;
+  height: number;
   placeholder: string;
   disabled: boolean;
   theme: "light" | "dark";
-  height: number;
   readonly: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;