@robot-admin/naive-ui-components 0.9.1 → 0.9.3

package/dist/C_Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"C_Icon.js","names":[],"sources":["../src/hooks/useImage/index.ts","../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","<!--\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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"}
+{"version":3,"file":"C_Icon.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"],"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","<!--\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_Icon2.js.map

@@ -1 +1 @@
-{"version":3,"file":"C_Icon2.js","names":[],"sources":["../src/hooks/useImage/index.ts","../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","<!--\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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"}
+{"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"],"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","<!--\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_ImageCropper-BqZpkZfU.css.map → C_ImageCropper-CdTX2nxU.css.map}

@@ -1 +1 @@
-{"version":3,"file":"C_ImageCropper-BqZpkZfU.css","names":[],"sources":["../src/components/C_ImageCropper/components/CropperToolbar.vue?vue&type=style&index=0&scoped=ac310c55&lang.scss","../src/components/C_ImageCropper/components/CropperPreview.vue?vue&type=style&index=0&scoped=11f355b4&lang.scss","../src/components/C_ImageCropper/index.vue?vue&type=style&index=0&scoped=d4798825&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.cropper-toolbar[data-v-ac310c55] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  align-items: center;\n  padding: 8px 0;\n}","/* unplugin-vue-components disabled */.cropper-preview[data-v-11f355b4] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n.cropper-preview .preview-label[data-v-11f355b4] {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--text-color-2);\n}\n.cropper-preview .preview-main[data-v-11f355b4] {\n  width: 100%;\n  overflow: hidden;\n  border: 1px solid var(--border-color);\n  border-radius: 6px;\n  background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);\n  background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n  background-size: 16px 16px;\n}\n.cropper-preview .preview-main--circular[data-v-11f355b4] {\n  border-radius: 50%;\n}\n.cropper-preview .preview-main__viewport img[data-v-11f355b4] {\n  display: block;\n  max-width: none !important;\n}\n.cropper-preview .preview-empty[data-v-11f355b4] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  min-height: 120px;\n}\n.cropper-preview .preview-thumbs[data-v-11f355b4] {\n  display: flex;\n  gap: 12px;\n  align-items: flex-end;\n  justify-content: center;\n}\n.cropper-preview .preview-thumb[data-v-11f355b4] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  align-items: center;\n}\n.cropper-preview .preview-thumb__box[data-v-11f355b4] {\n  overflow: hidden;\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  background: var(--body-color);\n}\n.cropper-preview .preview-thumb__box--circular[data-v-11f355b4] {\n  border-radius: 50%;\n}\n.cropper-preview .preview-thumb__viewport img[data-v-11f355b4] {\n  display: block;\n  max-width: none !important;\n}\n.cropper-preview .preview-thumb__label[data-v-11f355b4] {\n  font-size: 11px;\n  color: var(--text-color-3);\n}","/* unplugin-vue-components disabled *//* C_ImageCropper styles */\n.c-image-cropper[data-v-d4798825] {\n  width: 100%;\n}\n.c-image-cropper__body[data-v-d4798825] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.c-image-cropper__workspace[data-v-d4798825] {\n  display: flex;\n  gap: 16px;\n  align-items: stretch;\n}\n.c-image-cropper__canvas[data-v-d4798825] {\n  position: relative;\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  border: 1px solid var(--border-color);\n  border-radius: 6px;\n  background: var(--body-color);\n}\n.c-image-cropper__canvas[data-v-d4798825] .vue-cropper {\n  width: 100% !important;\n  height: 100% !important;\n}\n.c-image-cropper__preview-panel[data-v-d4798825] {\n  flex: 0 1 280px;\n  min-width: 200px;\n  padding: 16px;\n  overflow: hidden;\n  border: 1px solid var(--border-color);\n  border-radius: 6px;\n  background: var(--card-color);\n}\n.c-image-cropper__placeholder[data-v-d4798825] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: var(--text-color-3);\n  font-size: 14px;\n}\n@media (width <= 768px) {\n.c-image-cropper__workspace[data-v-d4798825] {\n    flex-direction: column;\n}\n.c-image-cropper__preview-panel[data-v-d4798825] {\n    max-width: none;\n}\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;ACNA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;ACjEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
+{"version":3,"file":"C_ImageCropper-CdTX2nxU.css","names":[],"sources":["../src/components/C_ImageCropper/components/CropperToolbar.vue?vue&type=style&index=0&scoped=499ffd01&lang.scss","../src/components/C_ImageCropper/components/CropperPreview.vue?vue&type=style&index=0&scoped=cefefdc0&lang.scss","../src/components/C_ImageCropper/index.vue?vue&type=style&index=0&scoped=296916a4&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.cropper-toolbar[data-v-499ffd01] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  align-items: center;\n  padding: 8px 0;\n}","/* unplugin-vue-components disabled */.cropper-preview[data-v-cefefdc0] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n.cropper-preview .preview-label[data-v-cefefdc0] {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--text-color-2);\n}\n.cropper-preview .preview-main[data-v-cefefdc0] {\n  width: 100%;\n  overflow: hidden;\n  border: 1px solid var(--border-color);\n  border-radius: 6px;\n  background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);\n  background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n  background-size: 16px 16px;\n}\n.cropper-preview .preview-main--circular[data-v-cefefdc0] {\n  border-radius: 50%;\n}\n.cropper-preview .preview-main__viewport img[data-v-cefefdc0] {\n  display: block;\n  max-width: none !important;\n}\n.cropper-preview .preview-empty[data-v-cefefdc0] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  min-height: 120px;\n}\n.cropper-preview .preview-thumbs[data-v-cefefdc0] {\n  display: flex;\n  gap: 12px;\n  align-items: flex-end;\n  justify-content: center;\n}\n.cropper-preview .preview-thumb[data-v-cefefdc0] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  align-items: center;\n}\n.cropper-preview .preview-thumb__box[data-v-cefefdc0] {\n  overflow: hidden;\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  background: var(--body-color);\n}\n.cropper-preview .preview-thumb__box--circular[data-v-cefefdc0] {\n  border-radius: 50%;\n}\n.cropper-preview .preview-thumb__viewport img[data-v-cefefdc0] {\n  display: block;\n  max-width: none !important;\n}\n.cropper-preview .preview-thumb__label[data-v-cefefdc0] {\n  font-size: 11px;\n  color: var(--text-color-3);\n}","/* unplugin-vue-components disabled *//* C_ImageCropper styles */\n.c-image-cropper[data-v-296916a4] {\n  width: 100%;\n}\n.c-image-cropper__body[data-v-296916a4] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.c-image-cropper__workspace[data-v-296916a4] {\n  display: flex;\n  gap: 16px;\n  align-items: stretch;\n}\n.c-image-cropper__canvas[data-v-296916a4] {\n  position: relative;\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  border: 1px solid var(--border-color);\n  border-radius: 6px;\n  background: var(--body-color);\n}\n.c-image-cropper__canvas[data-v-296916a4] .vue-cropper {\n  width: 100% !important;\n  height: 100% !important;\n}\n.c-image-cropper__preview-panel[data-v-296916a4] {\n  flex: 0 1 280px;\n  min-width: 200px;\n  padding: 16px;\n  overflow: hidden;\n  border: 1px solid var(--border-color);\n  border-radius: 6px;\n  background: var(--card-color);\n}\n.c-image-cropper__placeholder[data-v-296916a4] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: var(--text-color-3);\n  font-size: 14px;\n}\n@media (width <= 768px) {\n.c-image-cropper__workspace[data-v-296916a4] {\n    flex-direction: column;\n}\n.c-image-cropper__preview-panel[data-v-296916a4] {\n    max-width: none;\n}\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;ACNA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;ACjEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}

package/dist/{C_ImageCropper-CylwGuzS.css.map → C_ImageCropper-ilOqPklJ.css.map}

@@ -1 +1 @@
-{"version":3,"file":"C_ImageCropper-CylwGuzS.css","names":[],"sources":["../src/components/C_ImageCropper/components/CropperToolbar.vue?vue&type=style&index=0&scoped=ac310c55&lang.scss","../src/components/C_ImageCropper/components/CropperPreview.vue?vue&type=style&index=0&scoped=11f355b4&lang.scss","../src/components/C_ImageCropper/index.vue?vue&type=style&index=0&scoped=d4798825&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.cropper-toolbar[data-v-ac310c55] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  align-items: center;\n  padding: 8px 0;\n}","/* unplugin-vue-components disabled */.cropper-preview[data-v-11f355b4] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n.cropper-preview .preview-label[data-v-11f355b4] {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--text-color-2);\n}\n.cropper-preview .preview-main[data-v-11f355b4] {\n  width: 100%;\n  overflow: hidden;\n  border: 1px solid var(--border-color);\n  border-radius: 6px;\n  background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);\n  background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n  background-size: 16px 16px;\n}\n.cropper-preview .preview-main--circular[data-v-11f355b4] {\n  border-radius: 50%;\n}\n.cropper-preview .preview-main__viewport img[data-v-11f355b4] {\n  display: block;\n  max-width: none !important;\n}\n.cropper-preview .preview-empty[data-v-11f355b4] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  min-height: 120px;\n}\n.cropper-preview .preview-thumbs[data-v-11f355b4] {\n  display: flex;\n  gap: 12px;\n  align-items: flex-end;\n  justify-content: center;\n}\n.cropper-preview .preview-thumb[data-v-11f355b4] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  align-items: center;\n}\n.cropper-preview .preview-thumb__box[data-v-11f355b4] {\n  overflow: hidden;\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  background: var(--body-color);\n}\n.cropper-preview .preview-thumb__box--circular[data-v-11f355b4] {\n  border-radius: 50%;\n}\n.cropper-preview .preview-thumb__viewport img[data-v-11f355b4] {\n  display: block;\n  max-width: none !important;\n}\n.cropper-preview .preview-thumb__label[data-v-11f355b4] {\n  font-size: 11px;\n  color: var(--text-color-3);\n}","/* unplugin-vue-components disabled *//* C_ImageCropper styles */\n.c-image-cropper[data-v-d4798825] {\n  width: 100%;\n}\n.c-image-cropper__body[data-v-d4798825] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.c-image-cropper__workspace[data-v-d4798825] {\n  display: flex;\n  gap: 16px;\n  align-items: stretch;\n}\n.c-image-cropper__canvas[data-v-d4798825] {\n  position: relative;\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  border: 1px solid var(--border-color);\n  border-radius: 6px;\n  background: var(--body-color);\n}\n.c-image-cropper__canvas[data-v-d4798825] .vue-cropper {\n  width: 100% !important;\n  height: 100% !important;\n}\n.c-image-cropper__preview-panel[data-v-d4798825] {\n  flex: 0 1 280px;\n  min-width: 200px;\n  padding: 16px;\n  overflow: hidden;\n  border: 1px solid var(--border-color);\n  border-radius: 6px;\n  background: var(--card-color);\n}\n.c-image-cropper__placeholder[data-v-d4798825] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: var(--text-color-3);\n  font-size: 14px;\n}\n@media (width <= 768px) {\n.c-image-cropper__workspace[data-v-d4798825] {\n    flex-direction: column;\n}\n.c-image-cropper__preview-panel[data-v-d4798825] {\n    max-width: none;\n}\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;ACNA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;ACjEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
+{"version":3,"file":"C_ImageCropper-ilOqPklJ.css","names":[],"sources":["../src/components/C_ImageCropper/components/CropperToolbar.vue?vue&type=style&index=0&scoped=499ffd01&lang.scss","../src/components/C_ImageCropper/components/CropperPreview.vue?vue&type=style&index=0&scoped=cefefdc0&lang.scss","../src/components/C_ImageCropper/index.vue?vue&type=style&index=0&scoped=296916a4&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.cropper-toolbar[data-v-499ffd01] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  align-items: center;\n  padding: 8px 0;\n}","/* unplugin-vue-components disabled */.cropper-preview[data-v-cefefdc0] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n.cropper-preview .preview-label[data-v-cefefdc0] {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--text-color-2);\n}\n.cropper-preview .preview-main[data-v-cefefdc0] {\n  width: 100%;\n  overflow: hidden;\n  border: 1px solid var(--border-color);\n  border-radius: 6px;\n  background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);\n  background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n  background-size: 16px 16px;\n}\n.cropper-preview .preview-main--circular[data-v-cefefdc0] {\n  border-radius: 50%;\n}\n.cropper-preview .preview-main__viewport img[data-v-cefefdc0] {\n  display: block;\n  max-width: none !important;\n}\n.cropper-preview .preview-empty[data-v-cefefdc0] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  min-height: 120px;\n}\n.cropper-preview .preview-thumbs[data-v-cefefdc0] {\n  display: flex;\n  gap: 12px;\n  align-items: flex-end;\n  justify-content: center;\n}\n.cropper-preview .preview-thumb[data-v-cefefdc0] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  align-items: center;\n}\n.cropper-preview .preview-thumb__box[data-v-cefefdc0] {\n  overflow: hidden;\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  background: var(--body-color);\n}\n.cropper-preview .preview-thumb__box--circular[data-v-cefefdc0] {\n  border-radius: 50%;\n}\n.cropper-preview .preview-thumb__viewport img[data-v-cefefdc0] {\n  display: block;\n  max-width: none !important;\n}\n.cropper-preview .preview-thumb__label[data-v-cefefdc0] {\n  font-size: 11px;\n  color: var(--text-color-3);\n}","/* unplugin-vue-components disabled *//* C_ImageCropper styles */\n.c-image-cropper[data-v-296916a4] {\n  width: 100%;\n}\n.c-image-cropper__body[data-v-296916a4] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.c-image-cropper__workspace[data-v-296916a4] {\n  display: flex;\n  gap: 16px;\n  align-items: stretch;\n}\n.c-image-cropper__canvas[data-v-296916a4] {\n  position: relative;\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  border: 1px solid var(--border-color);\n  border-radius: 6px;\n  background: var(--body-color);\n}\n.c-image-cropper__canvas[data-v-296916a4] .vue-cropper {\n  width: 100% !important;\n  height: 100% !important;\n}\n.c-image-cropper__preview-panel[data-v-296916a4] {\n  flex: 0 1 280px;\n  min-width: 200px;\n  padding: 16px;\n  overflow: hidden;\n  border: 1px solid var(--border-color);\n  border-radius: 6px;\n  background: var(--card-color);\n}\n.c-image-cropper__placeholder[data-v-296916a4] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: var(--text-color-3);\n  font-size: 14px;\n}\n@media (width <= 768px) {\n.c-image-cropper__workspace[data-v-296916a4] {\n    flex-direction: column;\n}\n.c-image-cropper__preview-panel[data-v-296916a4] {\n    max-width: none;\n}\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;ACNA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;ACjEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}

package/dist/C_ImageCropper.css

@@ -1,16 +1,16 @@
-/* unplugin-vue-components disabled */.cropper-toolbar[data-v-ac310c55] {
+/* unplugin-vue-components disabled */.cropper-toolbar[data-v-499ffd01] {
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
   align-items: center;
   padding: 8px 0;
 }
-/* unplugin-vue-components disabled */.cropper-preview[data-v-11f355b4] {
+/* unplugin-vue-components disabled */.cropper-preview[data-v-cefefdc0] {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }
-.cropper-preview .preview-label[data-v-11f355b4] {
+.cropper-preview .preview-label[data-v-cefefdc0] {
   display: flex;
   gap: 6px;
   align-items: center;
@@ -18,7 +18,7 @@
   font-weight: 500;
   color: var(--text-color-2);
 }
-.cropper-preview .preview-main[data-v-11f355b4] {
+.cropper-preview .preview-main[data-v-cefefdc0] {
   width: 100%;
   overflow: hidden;
   border: 1px solid var(--border-color);
@@ -27,14 +27,14 @@
   background-position: 0 0, 0 8px, 8px -8px, -8px 0;
   background-size: 16px 16px;
 }
-.cropper-preview .preview-main--circular[data-v-11f355b4] {
+.cropper-preview .preview-main--circular[data-v-cefefdc0] {
   border-radius: 50%;
 }
-.cropper-preview .preview-main__viewport img[data-v-11f355b4] {
+.cropper-preview .preview-main__viewport img[data-v-cefefdc0] {
   display: block;
   max-width: none !important;
 }
-.cropper-preview .preview-empty[data-v-11f355b4] {
+.cropper-preview .preview-empty[data-v-cefefdc0] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -42,50 +42,50 @@
   height: 100%;
   min-height: 120px;
 }
-.cropper-preview .preview-thumbs[data-v-11f355b4] {
+.cropper-preview .preview-thumbs[data-v-cefefdc0] {
   display: flex;
   gap: 12px;
   align-items: flex-end;
   justify-content: center;
 }
-.cropper-preview .preview-thumb[data-v-11f355b4] {
+.cropper-preview .preview-thumb[data-v-cefefdc0] {
   display: flex;
   flex-direction: column;
   gap: 4px;
   align-items: center;
 }
-.cropper-preview .preview-thumb__box[data-v-11f355b4] {
+.cropper-preview .preview-thumb__box[data-v-cefefdc0] {
   overflow: hidden;
   border: 1px solid var(--border-color);
   border-radius: 4px;
   background: var(--body-color);
 }
-.cropper-preview .preview-thumb__box--circular[data-v-11f355b4] {
+.cropper-preview .preview-thumb__box--circular[data-v-cefefdc0] {
   border-radius: 50%;
 }
-.cropper-preview .preview-thumb__viewport img[data-v-11f355b4] {
+.cropper-preview .preview-thumb__viewport img[data-v-cefefdc0] {
   display: block;
   max-width: none !important;
 }
-.cropper-preview .preview-thumb__label[data-v-11f355b4] {
+.cropper-preview .preview-thumb__label[data-v-cefefdc0] {
   font-size: 11px;
   color: var(--text-color-3);
 }
 /* unplugin-vue-components disabled *//* C_ImageCropper styles */
-.c-image-cropper[data-v-d4798825] {
+.c-image-cropper[data-v-296916a4] {
   width: 100%;
 }
-.c-image-cropper__body[data-v-d4798825] {
+.c-image-cropper__body[data-v-296916a4] {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-.c-image-cropper__workspace[data-v-d4798825] {
+.c-image-cropper__workspace[data-v-296916a4] {
   display: flex;
   gap: 16px;
   align-items: stretch;
 }
-.c-image-cropper__canvas[data-v-d4798825] {
+.c-image-cropper__canvas[data-v-296916a4] {
   position: relative;
   flex: 1;
   min-width: 0;
@@ -94,11 +94,11 @@
   border-radius: 6px;
   background: var(--body-color);
 }
-.c-image-cropper__canvas[data-v-d4798825] .vue-cropper {
+.c-image-cropper__canvas[data-v-296916a4] .vue-cropper {
   width: 100% !important;
   height: 100% !important;
 }
-.c-image-cropper__preview-panel[data-v-d4798825] {
+.c-image-cropper__preview-panel[data-v-296916a4] {
   flex: 0 1 280px;
   min-width: 200px;
   padding: 16px;
@@ -107,7 +107,7 @@
   border-radius: 6px;
   background: var(--card-color);
 }
-.c-image-cropper__placeholder[data-v-d4798825] {
+.c-image-cropper__placeholder[data-v-296916a4] {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -118,12 +118,12 @@
   font-size: 14px;
 }
 @media (width <= 768px) {
-.c-image-cropper__workspace[data-v-d4798825] {
+.c-image-cropper__workspace[data-v-296916a4] {
     flex-direction: column;
 }
-.c-image-cropper__preview-panel[data-v-d4798825] {
+.c-image-cropper__preview-panel[data-v-296916a4] {
     max-width: none;
 }
 }
 
-/*# sourceMappingURL=C_ImageCropper-BqZpkZfU.css.map*/
+/*# sourceMappingURL=C_ImageCropper-CdTX2nxU.css.map*/