@robot-admin/naive-ui-components 0.8.0 → 0.8.2

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

package/dist/{C_ImageCropper-D3L2-J_J.css.map → C_ImageCropper-BqZpkZfU.css.map}

@@ -1 +1 @@
-{"version":3,"file":"C_ImageCropper-D3L2-J_J.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=b25a5839&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-b25a5839] {\n  width: 100%;\n}\n.c-image-cropper__body[data-v-b25a5839] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.c-image-cropper__workspace[data-v-b25a5839] {\n  display: flex;\n  gap: 16px;\n  align-items: stretch;\n}\n.c-image-cropper__canvas[data-v-b25a5839] {\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-b25a5839] .vue-cropper {\n  width: 100% !important;\n  height: 100% !important;\n}\n.c-image-cropper__preview-panel[data-v-b25a5839] {\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-b25a5839] {\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-b25a5839] {\n    flex-direction: column;\n}\n.c-image-cropper__preview-panel[data-v-b25a5839] {\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-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"}

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

@@ -1 +1 @@
-{"version":3,"file":"C_ImageCropper-DrmUlaLi.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=b25a5839&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-b25a5839] {\n  width: 100%;\n}\n.c-image-cropper__body[data-v-b25a5839] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.c-image-cropper__workspace[data-v-b25a5839] {\n  display: flex;\n  gap: 16px;\n  align-items: stretch;\n}\n.c-image-cropper__canvas[data-v-b25a5839] {\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-b25a5839] .vue-cropper {\n  width: 100% !important;\n  height: 100% !important;\n}\n.c-image-cropper__preview-panel[data-v-b25a5839] {\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-b25a5839] {\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-b25a5839] {\n    flex-direction: column;\n}\n.c-image-cropper__preview-panel[data-v-b25a5839] {\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-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"}

package/dist/C_ImageCropper.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./C_Icon.js`);const e=require(`./C_ImageCropper.js`);exports.C_ImageCropper=e.t,exports.useCropperCore=e.n;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./C_ImageCropper.js`);exports.C_ImageCropper=e.t,exports.useCropperCore=e.n;

package/dist/C_ImageCropper.css

@@ -72,20 +72,20 @@
   color: var(--text-color-3);
 }
 /* unplugin-vue-components disabled *//* C_ImageCropper styles */
-.c-image-cropper[data-v-b25a5839] {
+.c-image-cropper[data-v-d4798825] {
   width: 100%;
 }
-.c-image-cropper__body[data-v-b25a5839] {
+.c-image-cropper__body[data-v-d4798825] {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-.c-image-cropper__workspace[data-v-b25a5839] {
+.c-image-cropper__workspace[data-v-d4798825] {
   display: flex;
   gap: 16px;
   align-items: stretch;
 }
-.c-image-cropper__canvas[data-v-b25a5839] {
+.c-image-cropper__canvas[data-v-d4798825] {
   position: relative;
   flex: 1;
   min-width: 0;
@@ -94,11 +94,11 @@
   border-radius: 6px;
   background: var(--body-color);
 }
-.c-image-cropper__canvas[data-v-b25a5839] .vue-cropper {
+.c-image-cropper__canvas[data-v-d4798825] .vue-cropper {
   width: 100% !important;
   height: 100% !important;
 }
-.c-image-cropper__preview-panel[data-v-b25a5839] {
+.c-image-cropper__preview-panel[data-v-d4798825] {
   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-b25a5839] {
+.c-image-cropper__placeholder[data-v-d4798825] {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -118,12 +118,12 @@
   font-size: 14px;
 }
 @media (width <= 768px) {
-.c-image-cropper__workspace[data-v-b25a5839] {
+.c-image-cropper__workspace[data-v-d4798825] {
     flex-direction: column;
 }
-.c-image-cropper__preview-panel[data-v-b25a5839] {
+.c-image-cropper__preview-panel[data-v-d4798825] {
     max-width: none;
 }
 }
 
-/*# sourceMappingURL=C_ImageCropper-D3L2-J_J.css.map*/
+/*# sourceMappingURL=C_ImageCropper-BqZpkZfU.css.map*/

package/dist/C_ImageCropper.js

@@ -1 +1 @@
-import"./C_Icon2.js";import{n as e,t}from"./C_ImageCropper2.js";export{t as C_ImageCropper,e as useCropperCore};
+import{n as e,t}from"./C_ImageCropper2.js";export{t as C_ImageCropper,e as useCropperCore};

package/dist/C_ImageCropper.js.map

@@ -1 +1 @@
-{"version":3,"file":"C_ImageCropper.js","names":["ratioPresets","currentRatio","$emit","circular","previewData"],"sources":["../src/components/C_ImageCropper/composables/useCropperCore.ts","../src/components/C_ImageCropper/components/CropperToolbar.vue","../src/components/C_ImageCropper/components/CropperToolbar.vue","../src/components/C_ImageCropper/components/CropperToolbar.vue","../src/components/C_ImageCropper/components/CropperPreview.vue","../src/components/C_ImageCropper/components/CropperPreview.vue","../src/components/C_ImageCropper/components/CropperPreview.vue","../src/components/C_ImageCropper/index.vue","../src/components/C_ImageCropper/index.vue","../src/components/C_ImageCropper/index.vue"],"sourcesContent":["import { ref } from \"vue\";\r\nimport type { Ref } from \"vue\";\r\nimport type { CropOutputFormat, CropResult } from \"../types\";\r\n\r\ninterface UseCropperCoreOptions {\r\n  format?: Ref<CropOutputFormat>;\r\n  quality?: Ref<number>;\r\n  maxWidth?: Ref<number>;\r\n  maxHeight?: Ref<number>;\r\n}\r\n\r\nexport function useCropperCore(options: UseCropperCoreOptions = {}) {\r\n  const cropperRef = ref<any>(null);\r\n\r\n  function rotateLeft() {\r\n    cropperRef.value?.rotateLeft();\r\n  }\r\n\r\n  function rotateRight() {\r\n    cropperRef.value?.rotateRight();\r\n  }\r\n\r\n  function rotate(angle: number) {\r\n    const steps = Math.round(angle / 90);\r\n    const fn = steps > 0 ? rotateRight : rotateLeft;\r\n    for (let i = 0; i < Math.abs(steps); i++) fn();\r\n  }\r\n\r\n  function zoom(scale: number) {\r\n    cropperRef.value?.changeScale(scale > 0 ? 1 : -1);\r\n  }\r\n\r\n  function flipX() {\r\n    const el = cropperRef.value?.$refs?.img;\r\n    if (!el) return;\r\n    const current = el.style.transform || \"\";\r\n    if (current.includes(\"scaleX(-1)\")) {\r\n      el.style.transform = current.replace(\"scaleX(-1)\", \"scaleX(1)\");\r\n    } else {\r\n      el.style.transform =\r\n        current.replace(/scaleX\\([^)]*\\)/, \"\") + \" scaleX(-1)\";\r\n    }\r\n  }\r\n\r\n  function flipY() {\r\n    const el = cropperRef.value?.$refs?.img;\r\n    if (!el) return;\r\n    const current = el.style.transform || \"\";\r\n    if (current.includes(\"scaleY(-1)\")) {\r\n      el.style.transform = current.replace(\"scaleY(-1)\", \"scaleY(1)\");\r\n    } else {\r\n      el.style.transform =\r\n        current.replace(/scaleY\\([^)]*\\)/, \"\") + \" scaleY(-1)\";\r\n    }\r\n  }\r\n\r\n  function reset() {\r\n    cropperRef.value?.refresh();\r\n  }\r\n\r\n  function constrainSize(w: number, h: number) {\r\n    let ow = w;\r\n    let oh = h;\r\n    const maxW = options.maxWidth?.value ?? 0;\r\n    const maxH = options.maxHeight?.value ?? 0;\r\n\r\n    if (maxW > 0 && ow > maxW) {\r\n      const ratio = maxW / ow;\r\n      ow = maxW;\r\n      oh = Math.round(oh * ratio);\r\n    }\r\n    if (maxH > 0 && oh > maxH) {\r\n      const ratio = maxH / oh;\r\n      oh = maxH;\r\n      ow = Math.round(ow * ratio);\r\n    }\r\n    return { width: ow, height: oh };\r\n  }\r\n\r\n  function getCropResult(): Promise<CropResult> {\r\n    return new Promise((resolve, reject) => {\r\n      const cropper = cropperRef.value;\r\n      if (!cropper) return reject(new Error(\"Cropper not initialized\"));\r\n\r\n      const format = options.format?.value ?? \"png\";\r\n      const quality = options.quality?.value ?? 0.92;\r\n      const mime =\r\n        format === \"jpeg\"\r\n          ? \"image/jpeg\"\r\n          : format === \"webp\"\r\n            ? \"image/webp\"\r\n            : \"image/png\";\r\n\r\n      cropper.getCropData((base64: string) => {\r\n        cropper.getCropBlob((blob: Blob) => {\r\n          const img = new Image();\r\n          img.onload = () => {\r\n            const { width, height } = constrainSize(img.width, img.height);\r\n\r\n            if (width !== img.width || height !== img.height) {\r\n              const canvas = document.createElement(\"canvas\");\r\n              canvas.width = width;\r\n              canvas.height = height;\r\n              const ctx = canvas.getContext(\"2d\")!;\r\n              ctx.drawImage(img, 0, 0, width, height);\r\n              const constrainedBase64 = canvas.toDataURL(mime, quality);\r\n              canvas.toBlob(\r\n                (constrainedBlob) => {\r\n                  resolve({\r\n                    base64: constrainedBase64,\r\n                    blob: constrainedBlob!,\r\n                    width,\r\n                    height,\r\n                    format,\r\n                  });\r\n                },\r\n                mime,\r\n                format === \"png\" ? undefined : quality,\r\n              );\r\n            } else {\r\n              resolve({\r\n                base64,\r\n                blob,\r\n                width: img.width,\r\n                height: img.height,\r\n                format,\r\n              });\r\n            }\r\n          };\r\n          img.onerror = () => reject(new Error(\"Failed to load crop result\"));\r\n          img.src = base64;\r\n        });\r\n      });\r\n    });\r\n  }\r\n\r\n  return {\r\n    cropperRef,\r\n    rotate,\r\n    rotateLeft,\r\n    rotateRight,\r\n    zoom,\r\n    flipX,\r\n    flipY,\r\n    reset,\r\n    getCropResult,\r\n  };\r\n}\r\n","/* unplugin-vue-components disabled */<template>\r\n  <div class=\"cropper-toolbar\">\r\n    <NButtonGroup size=\"small\">\r\n      <NButton\r\n        v-for=\"item in ratioPresets\"\r\n        :key=\"item.value\"\r\n        :type=\"currentRatio === item.value ? 'primary' : 'default'\"\r\n        @click=\"$emit('ratio', item.value)\"\r\n      >\r\n        {{ item.label }}\r\n      </NButton>\r\n    </NButtonGroup>\r\n\r\n    <NDivider vertical />\r\n\r\n    <NTooltip>\r\n      <template #trigger>\r\n        <NButton size=\"small\" quaternary @click=\"$emit('rotate', -90)\">\r\n          <template #icon><C_Icon name=\"mdi:rotate-left\" /></template>\r\n        </NButton>\r\n      </template>\r\n      逆时针旋转 90°\r\n    </NTooltip>\r\n    <NTooltip>\r\n      <template #trigger>\r\n        <NButton size=\"small\" quaternary @click=\"$emit('rotate', 90)\">\r\n          <template #icon><C_Icon name=\"mdi:rotate-right\" /></template>\r\n        </NButton>\r\n      </template>\r\n      顺时针旋转 90°\r\n    </NTooltip>\r\n\r\n    <NDivider vertical />\r\n\r\n    <NTooltip>\r\n      <template #trigger>\r\n        <NButton size=\"small\" quaternary @click=\"$emit('flipX')\">\r\n          <template #icon><C_Icon name=\"mdi:flip-horizontal\" /></template>\r\n        </NButton>\r\n      </template>\r\n      水平翻转\r\n    </NTooltip>\r\n    <NTooltip>\r\n      <template #trigger>\r\n        <NButton size=\"small\" quaternary @click=\"$emit('flipY')\">\r\n          <template #icon><C_Icon name=\"mdi:flip-vertical\" /></template>\r\n        </NButton>\r\n      </template>\r\n      垂直翻转\r\n    </NTooltip>\r\n\r\n    <NDivider vertical />\r\n\r\n    <NTooltip>\r\n      <template #trigger>\r\n        <NButton size=\"small\" quaternary @click=\"$emit('zoom', 0.1)\">\r\n          <template #icon><C_Icon name=\"mdi:magnify-plus-outline\" /></template>\r\n        </NButton>\r\n      </template>\r\n      放大\r\n    </NTooltip>\r\n    <NTooltip>\r\n      <template #trigger>\r\n        <NButton size=\"small\" quaternary @click=\"$emit('zoom', -0.1)\">\r\n          <template #icon><C_Icon name=\"mdi:magnify-minus-outline\" /></template>\r\n        </NButton>\r\n      </template>\r\n      缩小\r\n    </NTooltip>\r\n\r\n    <NDivider vertical />\r\n\r\n    <NTooltip>\r\n      <template #trigger>\r\n        <NButton size=\"small\" quaternary @click=\"$emit('reset')\">\r\n          <template #icon><C_Icon name=\"mdi:refresh\" /></template>\r\n        </NButton>\r\n      </template>\r\n      重置\r\n    </NTooltip>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { NButton, NButtonGroup, NDivider, NTooltip } from \"naive-ui\";\r\nimport C_Icon from \"../../C_Icon/index.vue\";\r\nimport type { AspectRatioPreset } from \"../types\";\r\n\r\ndefineProps<{\r\n  currentRatio: number;\r\n  ratioPresets: AspectRatioPreset[];\r\n}>();\r\n\r\ndefineEmits<{\r\n  ratio: [value: number];\r\n  rotate: [angle: number];\r\n  flipX: [];\r\n  flipY: [];\r\n  zoom: [scale: number];\r\n  reset: [];\r\n}>();\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.cropper-toolbar {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 4px;\r\n  align-items: center;\r\n  padding: 8px 0;\r\n}\r\n</style>\r\n","/* unplugin-vue-components disabled */<template>\r\n  <div class=\"cropper-toolbar\">\r\n    <NButtonGroup size=\"small\">\r\n      <NButton\r\n        v-for=\"item in ratioPresets\"\r\n        :key=\"item.value\"\r\n        :type=\"currentRatio === item.value ? 'primary' : 'default'\"\r\n        @click=\"$emit('ratio', item.value)\"\r\n      >\r\n        {{ item.label }}\r\n      </NButton>\r\n    </NButtonGroup>\r\n\r\n    <NDivider vertical />\r\n\r\n    <NTooltip>\r\n      <template #trigger>\r\n        <NButton size=\"small\" quaternary @click=\"$emit('rotate', -90)\">\r\n          <template #icon><C_Icon name=\"mdi:rotate-left\" /></template>\r\n        </NButton>\r\n      </template>\r\n      逆时针旋转 90°\r\n    </NTooltip>\r\n    <NTooltip>\r\n      <template #trigger>\r\n        <NButton size=\"small\" quaternary @click=\"$emit('rotate', 90)\">\r\n          <template #icon><C_Icon name=\"mdi:rotate-right\" /></template>\r\n        </NButton>\r\n      </template>\r\n      顺时针旋转 90°\r\n    </NTooltip>\r\n\r\n    <NDivider vertical />\r\n\r\n    <NTooltip>\r\n      <template #trigger>\r\n        <NButton size=\"small\" quaternary @click=\"$emit('flipX')\">\r\n          <template #icon><C_Icon name=\"mdi:flip-horizontal\" /></template>\r\n        </NButton>\r\n      </template>\r\n      水平翻转\r\n    </NTooltip>\r\n    <NTooltip>\r\n      <template #trigger>\r\n        <NButton size=\"small\" quaternary @click=\"$emit('flipY')\">\r\n          <template #icon><C_Icon name=\"mdi:flip-vertical\" /></template>\r\n        </NButton>\r\n      </template>\r\n      垂直翻转\r\n    </NTooltip>\r\n\r\n    <NDivider vertical />\r\n\r\n    <NTooltip>\r\n      <template #trigger>\r\n        <NButton size=\"small\" quaternary @click=\"$emit('zoom', 0.1)\">\r\n          <template #icon><C_Icon name=\"mdi:magnify-plus-outline\" /></template>\r\n        </NButton>\r\n      </template>\r\n      放大\r\n    </NTooltip>\r\n    <NTooltip>\r\n      <template #trigger>\r\n        <NButton size=\"small\" quaternary @click=\"$emit('zoom', -0.1)\">\r\n          <template #icon><C_Icon name=\"mdi:magnify-minus-outline\" /></template>\r\n        </NButton>\r\n      </template>\r\n      缩小\r\n    </NTooltip>\r\n\r\n    <NDivider vertical />\r\n\r\n    <NTooltip>\r\n      <template #trigger>\r\n        <NButton size=\"small\" quaternary @click=\"$emit('reset')\">\r\n          <template #icon><C_Icon name=\"mdi:refresh\" /></template>\r\n        </NButton>\r\n      </template>\r\n      重置\r\n    </NTooltip>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { NButton, NButtonGroup, NDivider, NTooltip } from \"naive-ui\";\r\nimport C_Icon from \"../../C_Icon/index.vue\";\r\nimport type { AspectRatioPreset } from \"../types\";\r\n\r\ndefineProps<{\r\n  currentRatio: number;\r\n  ratioPresets: AspectRatioPreset[];\r\n}>();\r\n\r\ndefineEmits<{\r\n  ratio: [value: number];\r\n  rotate: [angle: number];\r\n  flipX: [];\r\n  flipY: [];\r\n  zoom: [scale: number];\r\n  reset: [];\r\n}>();\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.cropper-toolbar {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 4px;\r\n  align-items: center;\r\n  padding: 8px 0;\r\n}\r\n</style>\r\n","<template>\r\n  <div class=\"cropper-toolbar\">\r\n    <NButtonGroup size=\"small\">\r\n      <NButton\r\n        v-for=\"item in ratioPresets\"\r\n        :key=\"item.value\"\r\n        :type=\"currentRatio === item.value ? 'primary' : 'default'\"\r\n        @click=\"$emit('ratio', item.value)\"\r\n      >\r\n        {{ item.label }}\r\n      </NButton>\r\n    </NButtonGroup>\r\n\r\n    <NDivider vertical />\r\n\r\n    <NTooltip>\r\n      <template #trigger>\r\n        <NButton size=\"small\" quaternary @click=\"$emit('rotate', -90)\">\r\n          <template #icon><C_Icon name=\"mdi:rotate-left\" /></template>\r\n        </NButton>\r\n      </template>\r\n      逆时针旋转 90°\r\n    </NTooltip>\r\n    <NTooltip>\r\n      <template #trigger>\r\n        <NButton size=\"small\" quaternary @click=\"$emit('rotate', 90)\">\r\n          <template #icon><C_Icon name=\"mdi:rotate-right\" /></template>\r\n        </NButton>\r\n      </template>\r\n      顺时针旋转 90°\r\n    </NTooltip>\r\n\r\n    <NDivider vertical />\r\n\r\n    <NTooltip>\r\n      <template #trigger>\r\n        <NButton size=\"small\" quaternary @click=\"$emit('flipX')\">\r\n          <template #icon><C_Icon name=\"mdi:flip-horizontal\" /></template>\r\n        </NButton>\r\n      </template>\r\n      水平翻转\r\n    </NTooltip>\r\n    <NTooltip>\r\n      <template #trigger>\r\n        <NButton size=\"small\" quaternary @click=\"$emit('flipY')\">\r\n          <template #icon><C_Icon name=\"mdi:flip-vertical\" /></template>\r\n        </NButton>\r\n      </template>\r\n      垂直翻转\r\n    </NTooltip>\r\n\r\n    <NDivider vertical />\r\n\r\n    <NTooltip>\r\n      <template #trigger>\r\n        <NButton size=\"small\" quaternary @click=\"$emit('zoom', 0.1)\">\r\n          <template #icon><C_Icon name=\"mdi:magnify-plus-outline\" /></template>\r\n        </NButton>\r\n      </template>\r\n      放大\r\n    </NTooltip>\r\n    <NTooltip>\r\n      <template #trigger>\r\n        <NButton size=\"small\" quaternary @click=\"$emit('zoom', -0.1)\">\r\n          <template #icon><C_Icon name=\"mdi:magnify-minus-outline\" /></template>\r\n        </NButton>\r\n      </template>\r\n      缩小\r\n    </NTooltip>\r\n\r\n    <NDivider vertical />\r\n\r\n    <NTooltip>\r\n      <template #trigger>\r\n        <NButton size=\"small\" quaternary @click=\"$emit('reset')\">\r\n          <template #icon><C_Icon name=\"mdi:refresh\" /></template>\r\n        </NButton>\r\n      </template>\r\n      重置\r\n    </NTooltip>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { NButton, NButtonGroup, NDivider, NTooltip } from \"naive-ui\";\r\nimport C_Icon from \"../../C_Icon/index.vue\";\r\nimport type { AspectRatioPreset } from \"../types\";\r\n\r\ndefineProps<{\r\n  currentRatio: number;\r\n  ratioPresets: AspectRatioPreset[];\r\n}>();\r\n\r\ndefineEmits<{\r\n  ratio: [value: number];\r\n  rotate: [angle: number];\r\n  flipX: [];\r\n  flipY: [];\r\n  zoom: [scale: number];\r\n  reset: [];\r\n}>();\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.cropper-toolbar {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 4px;\r\n  align-items: center;\r\n  padding: 8px 0;\r\n}\r\n</style>\r\n","/* unplugin-vue-components disabled */<template>\r\n  <div class=\"cropper-preview\">\r\n    <div class=\"preview-label\">\r\n      <C_Icon name=\"mdi:eye-outline\" />\r\n      <span>裁剪预览</span>\r\n    </div>\r\n\r\n    <div\r\n      ref=\"mainBoxRef\"\r\n      class=\"preview-main\"\r\n      :class=\"{ 'preview-main--circular': circular }\"\r\n    >\r\n      <template v-if=\"hasValidPreview\">\r\n        <div class=\"preview-main__viewport\" :style=\"mainViewportStyle\">\r\n          <div :style=\"previewData.div\">\r\n            <img\r\n              :src=\"previewData.url\"\r\n              :style=\"previewData.img\"\r\n              alt=\"preview\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </template>\r\n      <div v-else class=\"preview-empty\">\r\n        <C_Icon\r\n          name=\"mdi:image-outline\"\r\n          style=\"font-size: 32px; opacity: 0.2\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"preview-thumbs\">\r\n      <div v-for=\"item in thumbSizes\" :key=\"item.label\" class=\"preview-thumb\">\r\n        <div\r\n          class=\"preview-thumb__box\"\r\n          :class=\"{ 'preview-thumb__box--circular': circular }\"\r\n          :style=\"{ width: `${item.size}px`, height: `${item.size}px` }\"\r\n        >\r\n          <template v-if=\"hasValidPreview\">\r\n            <div\r\n              class=\"preview-thumb__viewport\"\r\n              :style=\"getThumbViewportStyle(item.size)\"\r\n            >\r\n              <div :style=\"previewData.div\">\r\n                <img\r\n                  :src=\"previewData.url\"\r\n                  :style=\"previewData.img\"\r\n                  alt=\"thumb\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </template>\r\n        </div>\r\n        <span class=\"preview-thumb__label\">{{ item.label }}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, onMounted, onBeforeUnmount } from \"vue\";\r\nimport C_Icon from \"../../C_Icon/index.vue\";\r\n\r\nconst props = defineProps<{\r\n  previewData: any;\r\n  circular?: boolean;\r\n}>();\r\n\r\nconst mainBoxRef = ref<HTMLElement | null>(null);\r\nconst mainBoxWidth = ref(200);\r\n\r\nconst thumbSizes = [\r\n  { label: \"80px\", size: 80 },\r\n  { label: \"48px\", size: 48 },\r\n  { label: \"32px\", size: 32 },\r\n];\r\n\r\nconst hasValidPreview = computed(() => {\r\n  const d = props.previewData;\r\n  return d && d.url && d.w > 0 && d.h > 0;\r\n});\r\n\r\nconst mainViewportStyle = computed(() => {\r\n  if (!hasValidPreview.value) return {};\r\n  const { w } = props.previewData;\r\n  const zoom = mainBoxWidth.value / w;\r\n  return { zoom, overflow: \"hidden\" };\r\n});\r\n\r\nfunction getThumbViewportStyle(size: number) {\r\n  if (!hasValidPreview.value) return {};\r\n  const { w } = props.previewData;\r\n  return { zoom: size / w, overflow: \"hidden\" };\r\n}\r\n\r\nlet resizeObserver: ResizeObserver | null = null;\r\n\r\nonMounted(() => {\r\n  if (mainBoxRef.value) {\r\n    mainBoxWidth.value = mainBoxRef.value.clientWidth;\r\n    resizeObserver = new ResizeObserver((entries) => {\r\n      requestAnimationFrame(() => {\r\n        for (const entry of entries) {\r\n          mainBoxWidth.value = entry.contentRect.width;\r\n        }\r\n      });\r\n    });\r\n    resizeObserver.observe(mainBoxRef.value);\r\n  }\r\n});\r\n\r\nonBeforeUnmount(() => {\r\n  resizeObserver?.disconnect();\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.cropper-preview {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 16px;\r\n\r\n  .preview-label {\r\n    display: flex;\r\n    gap: 6px;\r\n    align-items: center;\r\n    font-size: 13px;\r\n    font-weight: 500;\r\n    color: var(--text-color-2);\r\n  }\r\n\r\n  .preview-main {\r\n    width: 100%;\r\n    overflow: hidden;\r\n    border: 1px solid var(--border-color);\r\n    border-radius: 6px;\r\n    background:\r\n      linear-gradient(45deg, #f0f0f0 25%, transparent 25%),\r\n      linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),\r\n      linear-gradient(45deg, transparent 75%, #f0f0f0 75%),\r\n      linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);\r\n    background-position:\r\n      0 0,\r\n      0 8px,\r\n      8px -8px,\r\n      -8px 0;\r\n    background-size: 16px 16px;\r\n\r\n    &--circular {\r\n      border-radius: 50%;\r\n    }\r\n\r\n    &__viewport img {\r\n      display: block;\r\n      max-width: none !important;\r\n    }\r\n  }\r\n\r\n  .preview-empty {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 100%;\r\n    height: 100%;\r\n    min-height: 120px;\r\n  }\r\n\r\n  .preview-thumbs {\r\n    display: flex;\r\n    gap: 12px;\r\n    align-items: flex-end;\r\n    justify-content: center;\r\n  }\r\n\r\n  .preview-thumb {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 4px;\r\n    align-items: center;\r\n\r\n    &__box {\r\n      overflow: hidden;\r\n      border: 1px solid var(--border-color);\r\n      border-radius: 4px;\r\n      background: var(--body-color);\r\n\r\n      &--circular {\r\n        border-radius: 50%;\r\n      }\r\n    }\r\n\r\n    &__viewport img {\r\n      display: block;\r\n      max-width: none !important;\r\n    }\r\n\r\n    &__label {\r\n      font-size: 11px;\r\n      color: var(--text-color-3);\r\n    }\r\n  }\r\n}\r\n</style>\r\n","/* unplugin-vue-components disabled */<template>\r\n  <div class=\"cropper-preview\">\r\n    <div class=\"preview-label\">\r\n      <C_Icon name=\"mdi:eye-outline\" />\r\n      <span>裁剪预览</span>\r\n    </div>\r\n\r\n    <div\r\n      ref=\"mainBoxRef\"\r\n      class=\"preview-main\"\r\n      :class=\"{ 'preview-main--circular': circular }\"\r\n    >\r\n      <template v-if=\"hasValidPreview\">\r\n        <div class=\"preview-main__viewport\" :style=\"mainViewportStyle\">\r\n          <div :style=\"previewData.div\">\r\n            <img\r\n              :src=\"previewData.url\"\r\n              :style=\"previewData.img\"\r\n              alt=\"preview\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </template>\r\n      <div v-else class=\"preview-empty\">\r\n        <C_Icon\r\n          name=\"mdi:image-outline\"\r\n          style=\"font-size: 32px; opacity: 0.2\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"preview-thumbs\">\r\n      <div v-for=\"item in thumbSizes\" :key=\"item.label\" class=\"preview-thumb\">\r\n        <div\r\n          class=\"preview-thumb__box\"\r\n          :class=\"{ 'preview-thumb__box--circular': circular }\"\r\n          :style=\"{ width: `${item.size}px`, height: `${item.size}px` }\"\r\n        >\r\n          <template v-if=\"hasValidPreview\">\r\n            <div\r\n              class=\"preview-thumb__viewport\"\r\n              :style=\"getThumbViewportStyle(item.size)\"\r\n            >\r\n              <div :style=\"previewData.div\">\r\n                <img\r\n                  :src=\"previewData.url\"\r\n                  :style=\"previewData.img\"\r\n                  alt=\"thumb\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </template>\r\n        </div>\r\n        <span class=\"preview-thumb__label\">{{ item.label }}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, onMounted, onBeforeUnmount } from \"vue\";\r\nimport C_Icon from \"../../C_Icon/index.vue\";\r\n\r\nconst props = defineProps<{\r\n  previewData: any;\r\n  circular?: boolean;\r\n}>();\r\n\r\nconst mainBoxRef = ref<HTMLElement | null>(null);\r\nconst mainBoxWidth = ref(200);\r\n\r\nconst thumbSizes = [\r\n  { label: \"80px\", size: 80 },\r\n  { label: \"48px\", size: 48 },\r\n  { label: \"32px\", size: 32 },\r\n];\r\n\r\nconst hasValidPreview = computed(() => {\r\n  const d = props.previewData;\r\n  return d && d.url && d.w > 0 && d.h > 0;\r\n});\r\n\r\nconst mainViewportStyle = computed(() => {\r\n  if (!hasValidPreview.value) return {};\r\n  const { w } = props.previewData;\r\n  const zoom = mainBoxWidth.value / w;\r\n  return { zoom, overflow: \"hidden\" };\r\n});\r\n\r\nfunction getThumbViewportStyle(size: number) {\r\n  if (!hasValidPreview.value) return {};\r\n  const { w } = props.previewData;\r\n  return { zoom: size / w, overflow: \"hidden\" };\r\n}\r\n\r\nlet resizeObserver: ResizeObserver | null = null;\r\n\r\nonMounted(() => {\r\n  if (mainBoxRef.value) {\r\n    mainBoxWidth.value = mainBoxRef.value.clientWidth;\r\n    resizeObserver = new ResizeObserver((entries) => {\r\n      requestAnimationFrame(() => {\r\n        for (const entry of entries) {\r\n          mainBoxWidth.value = entry.contentRect.width;\r\n        }\r\n      });\r\n    });\r\n    resizeObserver.observe(mainBoxRef.value);\r\n  }\r\n});\r\n\r\nonBeforeUnmount(() => {\r\n  resizeObserver?.disconnect();\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.cropper-preview {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 16px;\r\n\r\n  .preview-label {\r\n    display: flex;\r\n    gap: 6px;\r\n    align-items: center;\r\n    font-size: 13px;\r\n    font-weight: 500;\r\n    color: var(--text-color-2);\r\n  }\r\n\r\n  .preview-main {\r\n    width: 100%;\r\n    overflow: hidden;\r\n    border: 1px solid var(--border-color);\r\n    border-radius: 6px;\r\n    background:\r\n      linear-gradient(45deg, #f0f0f0 25%, transparent 25%),\r\n      linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),\r\n      linear-gradient(45deg, transparent 75%, #f0f0f0 75%),\r\n      linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);\r\n    background-position:\r\n      0 0,\r\n      0 8px,\r\n      8px -8px,\r\n      -8px 0;\r\n    background-size: 16px 16px;\r\n\r\n    &--circular {\r\n      border-radius: 50%;\r\n    }\r\n\r\n    &__viewport img {\r\n      display: block;\r\n      max-width: none !important;\r\n    }\r\n  }\r\n\r\n  .preview-empty {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 100%;\r\n    height: 100%;\r\n    min-height: 120px;\r\n  }\r\n\r\n  .preview-thumbs {\r\n    display: flex;\r\n    gap: 12px;\r\n    align-items: flex-end;\r\n    justify-content: center;\r\n  }\r\n\r\n  .preview-thumb {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 4px;\r\n    align-items: center;\r\n\r\n    &__box {\r\n      overflow: hidden;\r\n      border: 1px solid var(--border-color);\r\n      border-radius: 4px;\r\n      background: var(--body-color);\r\n\r\n      &--circular {\r\n        border-radius: 50%;\r\n      }\r\n    }\r\n\r\n    &__viewport img {\r\n      display: block;\r\n      max-width: none !important;\r\n    }\r\n\r\n    &__label {\r\n      font-size: 11px;\r\n      color: var(--text-color-3);\r\n    }\r\n  }\r\n}\r\n</style>\r\n","<template>\r\n  <div class=\"cropper-preview\">\r\n    <div class=\"preview-label\">\r\n      <C_Icon name=\"mdi:eye-outline\" />\r\n      <span>裁剪预览</span>\r\n    </div>\r\n\r\n    <div\r\n      ref=\"mainBoxRef\"\r\n      class=\"preview-main\"\r\n      :class=\"{ 'preview-main--circular': circular }\"\r\n    >\r\n      <template v-if=\"hasValidPreview\">\r\n        <div class=\"preview-main__viewport\" :style=\"mainViewportStyle\">\r\n          <div :style=\"previewData.div\">\r\n            <img\r\n              :src=\"previewData.url\"\r\n              :style=\"previewData.img\"\r\n              alt=\"preview\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </template>\r\n      <div v-else class=\"preview-empty\">\r\n        <C_Icon\r\n          name=\"mdi:image-outline\"\r\n          style=\"font-size: 32px; opacity: 0.2\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"preview-thumbs\">\r\n      <div v-for=\"item in thumbSizes\" :key=\"item.label\" class=\"preview-thumb\">\r\n        <div\r\n          class=\"preview-thumb__box\"\r\n          :class=\"{ 'preview-thumb__box--circular': circular }\"\r\n          :style=\"{ width: `${item.size}px`, height: `${item.size}px` }\"\r\n        >\r\n          <template v-if=\"hasValidPreview\">\r\n            <div\r\n              class=\"preview-thumb__viewport\"\r\n              :style=\"getThumbViewportStyle(item.size)\"\r\n            >\r\n              <div :style=\"previewData.div\">\r\n                <img\r\n                  :src=\"previewData.url\"\r\n                  :style=\"previewData.img\"\r\n                  alt=\"thumb\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </template>\r\n        </div>\r\n        <span class=\"preview-thumb__label\">{{ item.label }}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, onMounted, onBeforeUnmount } from \"vue\";\r\nimport C_Icon from \"../../C_Icon/index.vue\";\r\n\r\nconst props = defineProps<{\r\n  previewData: any;\r\n  circular?: boolean;\r\n}>();\r\n\r\nconst mainBoxRef = ref<HTMLElement | null>(null);\r\nconst mainBoxWidth = ref(200);\r\n\r\nconst thumbSizes = [\r\n  { label: \"80px\", size: 80 },\r\n  { label: \"48px\", size: 48 },\r\n  { label: \"32px\", size: 32 },\r\n];\r\n\r\nconst hasValidPreview = computed(() => {\r\n  const d = props.previewData;\r\n  return d && d.url && d.w > 0 && d.h > 0;\r\n});\r\n\r\nconst mainViewportStyle = computed(() => {\r\n  if (!hasValidPreview.value) return {};\r\n  const { w } = props.previewData;\r\n  const zoom = mainBoxWidth.value / w;\r\n  return { zoom, overflow: \"hidden\" };\r\n});\r\n\r\nfunction getThumbViewportStyle(size: number) {\r\n  if (!hasValidPreview.value) return {};\r\n  const { w } = props.previewData;\r\n  return { zoom: size / w, overflow: \"hidden\" };\r\n}\r\n\r\nlet resizeObserver: ResizeObserver | null = null;\r\n\r\nonMounted(() => {\r\n  if (mainBoxRef.value) {\r\n    mainBoxWidth.value = mainBoxRef.value.clientWidth;\r\n    resizeObserver = new ResizeObserver((entries) => {\r\n      requestAnimationFrame(() => {\r\n        for (const entry of entries) {\r\n          mainBoxWidth.value = entry.contentRect.width;\r\n        }\r\n      });\r\n    });\r\n    resizeObserver.observe(mainBoxRef.value);\r\n  }\r\n});\r\n\r\nonBeforeUnmount(() => {\r\n  resizeObserver?.disconnect();\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.cropper-preview {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 16px;\r\n\r\n  .preview-label {\r\n    display: flex;\r\n    gap: 6px;\r\n    align-items: center;\r\n    font-size: 13px;\r\n    font-weight: 500;\r\n    color: var(--text-color-2);\r\n  }\r\n\r\n  .preview-main {\r\n    width: 100%;\r\n    overflow: hidden;\r\n    border: 1px solid var(--border-color);\r\n    border-radius: 6px;\r\n    background:\r\n      linear-gradient(45deg, #f0f0f0 25%, transparent 25%),\r\n      linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),\r\n      linear-gradient(45deg, transparent 75%, #f0f0f0 75%),\r\n      linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);\r\n    background-position:\r\n      0 0,\r\n      0 8px,\r\n      8px -8px,\r\n      -8px 0;\r\n    background-size: 16px 16px;\r\n\r\n    &--circular {\r\n      border-radius: 50%;\r\n    }\r\n\r\n    &__viewport img {\r\n      display: block;\r\n      max-width: none !important;\r\n    }\r\n  }\r\n\r\n  .preview-empty {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 100%;\r\n    height: 100%;\r\n    min-height: 120px;\r\n  }\r\n\r\n  .preview-thumbs {\r\n    display: flex;\r\n    gap: 12px;\r\n    align-items: flex-end;\r\n    justify-content: center;\r\n  }\r\n\r\n  .preview-thumb {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 4px;\r\n    align-items: center;\r\n\r\n    &__box {\r\n      overflow: hidden;\r\n      border: 1px solid var(--border-color);\r\n      border-radius: 4px;\r\n      background: var(--body-color);\r\n\r\n      &--circular {\r\n        border-radius: 50%;\r\n      }\r\n    }\r\n\r\n    &__viewport img {\r\n      display: block;\r\n      max-width: none !important;\r\n    }\r\n\r\n    &__label {\r\n      font-size: 11px;\r\n      color: var(--text-color-3);\r\n    }\r\n  }\r\n}\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-02-25\r\n * @Description: 图片裁剪组件（基于 vue-cropper）\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <NModal\r\n    v-if=\"props.modal\"\r\n    v-model:show=\"modalVisible\"\r\n    preset=\"card\"\r\n    :title=\"props.modalTitle || '图片裁剪'\"\r\n    :style=\"{ width: '860px' }\"\r\n    :mask-closable=\"false\"\r\n    :closable=\"true\"\r\n  >\r\n    <div class=\"c-image-cropper__body\">\r\n      <CropperToolbar\r\n        v-if=\"props.showToolbar\"\r\n        :current-ratio=\"currentRatio\"\r\n        :ratio-presets=\"ratioPresets\"\r\n        @ratio=\"handleRatio\"\r\n        @rotate=\"rotate\"\r\n        @flip-x=\"core.flipX\"\r\n        @flip-y=\"core.flipY\"\r\n        @zoom=\"core.zoom\"\r\n        @reset=\"handleReset\"\r\n      />\r\n      <div class=\"c-image-cropper__workspace\">\r\n        <div\r\n          class=\"c-image-cropper__canvas\"\r\n          :style=\"{ height: containerHeight }\"\r\n        >\r\n          <VueCropper\r\n            v-if=\"imgSrc\"\r\n            ref=\"modalCropperRef\"\r\n            :img=\"imgSrc\"\r\n            :output-size=\"props.outputQuality\"\r\n            :output-type=\"vueCropperOutputType\"\r\n            :can-scale=\"false\"\r\n            :auto-crop=\"true\"\r\n            :auto-crop-width=\"autoCropSize.width\"\r\n            :auto-crop-height=\"autoCropSize.height\"\r\n            :fixed=\"isFixed\"\r\n            :fixed-number=\"fixedNumber\"\r\n            :center-box=\"true\"\r\n            :info=\"true\"\r\n            :info-true=\"true\"\r\n            :can-move=\"true\"\r\n            :can-move-box=\"true\"\r\n            :original=\"false\"\r\n            :high=\"true\"\r\n            :full=\"false\"\r\n            :mode=\"'contain'\"\r\n            @real-time=\"handleRealTimePreview\"\r\n            @img-load=\"onImgLoad\"\r\n          />\r\n          <div v-else class=\"c-image-cropper__placeholder\">\r\n            <C_Icon\r\n              name=\"mdi:image-plus-outline\"\r\n              style=\"font-size: 48px; opacity: 0.3\"\r\n            />\r\n            <span>请选择图片</span>\r\n          </div>\r\n        </div>\r\n        <div\r\n          v-if=\"props.showPreview && imgSrc\"\r\n          class=\"c-image-cropper__preview-panel\"\r\n        >\r\n          <CropperPreview\r\n            :preview-data=\"previewData\"\r\n            :circular=\"props.circular\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <template #footer>\r\n      <NSpace justify=\"end\">\r\n        <NButton @click=\"handleCancel\">取消</NButton>\r\n        <NButton type=\"primary\" :loading=\"exporting\" @click=\"handleConfirm\"\r\n          >确认裁剪</NButton\r\n        >\r\n      </NSpace>\r\n    </template>\r\n  </NModal>\r\n\r\n  <div v-else class=\"c-image-cropper\">\r\n    <div class=\"c-image-cropper__body\">\r\n      <CropperToolbar\r\n        v-if=\"props.showToolbar\"\r\n        :current-ratio=\"currentRatio\"\r\n        :ratio-presets=\"ratioPresets\"\r\n        @ratio=\"handleRatio\"\r\n        @rotate=\"rotate\"\r\n        @flip-x=\"core.flipX\"\r\n        @flip-y=\"core.flipY\"\r\n        @zoom=\"core.zoom\"\r\n        @reset=\"handleReset\"\r\n      />\r\n      <div class=\"c-image-cropper__workspace\">\r\n        <div\r\n          class=\"c-image-cropper__canvas\"\r\n          :style=\"{ height: containerHeight }\"\r\n        >\r\n          <VueCropper\r\n            v-if=\"imgSrc\"\r\n            ref=\"inlineCropperRef\"\r\n            :img=\"imgSrc\"\r\n            :output-size=\"props.outputQuality\"\r\n            :output-type=\"vueCropperOutputType\"\r\n            :can-scale=\"false\"\r\n            :auto-crop=\"true\"\r\n            :auto-crop-width=\"autoCropSize.width\"\r\n            :auto-crop-height=\"autoCropSize.height\"\r\n            :fixed=\"isFixed\"\r\n            :fixed-number=\"fixedNumber\"\r\n            :center-box=\"true\"\r\n            :info=\"true\"\r\n            :info-true=\"true\"\r\n            :can-move=\"true\"\r\n            :can-move-box=\"true\"\r\n            :original=\"false\"\r\n            :high=\"true\"\r\n            :full=\"false\"\r\n            :mode=\"'contain'\"\r\n            @real-time=\"handleRealTimePreview\"\r\n            @img-load=\"onImgLoad\"\r\n          />\r\n          <div v-else class=\"c-image-cropper__placeholder\">\r\n            <C_Icon\r\n              name=\"mdi:image-plus-outline\"\r\n              style=\"font-size: 48px; opacity: 0.3\"\r\n            />\r\n            <span>请选择图片</span>\r\n          </div>\r\n        </div>\r\n        <div\r\n          v-if=\"props.showPreview && imgSrc\"\r\n          class=\"c-image-cropper__preview-panel\"\r\n        >\r\n          <CropperPreview\r\n            :preview-data=\"previewData\"\r\n            :circular=\"props.circular\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, watch } from \"vue\";\r\nimport { NModal, NButton, NSpace } from \"naive-ui\";\r\nimport { VueCropper } from \"vue-cropper\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport type {\r\n  AspectRatioPreset,\r\n  CropOutputFormat,\r\n  ImageCropperExpose,\r\n  ImageCropperProps,\r\n} from \"./types\";\r\nimport { useCropperCore } from \"./composables/useCropperCore\";\r\nimport CropperToolbar from \"./components/CropperToolbar.vue\";\r\nimport CropperPreview from \"./components/CropperPreview.vue\";\r\n\r\ndefineOptions({ name: \"C_ImageCropper\" });\r\n\r\nconst props = withDefaults(defineProps<ImageCropperProps>(), {\r\n  src: \"\",\r\n  aspectRatio: 0,\r\n  outputFormat: \"png\",\r\n  outputQuality: 0.92,\r\n  maxOutputWidth: 0,\r\n  maxOutputHeight: 0,\r\n  showPreview: true,\r\n  showToolbar: true,\r\n  circular: false,\r\n  disabled: false,\r\n  height: \"400px\",\r\n  modal: false,\r\n  modalTitle: \"图片裁剪\",\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  crop: [result: any];\r\n  ready: [];\r\n  error: [error: Event];\r\n  confirm: [result: any];\r\n  cancel: [];\r\n}>();\r\n\r\nconst imgSrc = ref(props.src);\r\nconst currentRatio = ref(props.aspectRatio);\r\nconst modalVisible = ref(false);\r\nconst exporting = ref(false);\r\nconst previewData = ref<any>(null);\r\n\r\nconst inlineCropperRef = ref<any>(null);\r\nconst modalCropperRef = ref<any>(null);\r\n\r\nconst activeCropperRef = computed(() =>\r\n  props.modal ? modalCropperRef.value : inlineCropperRef.value,\r\n);\r\n\r\nconst containerHeight = computed(() =>\r\n  typeof props.height === \"number\" ? `${props.height}px` : props.height,\r\n);\r\n\r\nconst vueCropperOutputType = computed(() => {\r\n  const map: Record<CropOutputFormat, string> = {\r\n    png: \"png\",\r\n    jpeg: \"jpeg\",\r\n    webp: \"webp\",\r\n  };\r\n  return map[props.outputFormat as CropOutputFormat] || \"png\";\r\n});\r\n\r\nconst isFixed = computed(() => currentRatio.value > 0);\r\n\r\nconst fixedNumber = computed(() => {\r\n  if (currentRatio.value <= 0) return [1, 1];\r\n  if (currentRatio.value === 1) return [1, 1];\r\n  if (Math.abs(currentRatio.value - 16 / 9) < 0.01) return [16, 9];\r\n  if (Math.abs(currentRatio.value - 4 / 3) < 0.01) return [4, 3];\r\n  if (Math.abs(currentRatio.value - 3 / 2) < 0.01) return [3, 2];\r\n  return [Math.round(currentRatio.value * 100), 100];\r\n});\r\n\r\nconst autoCropSize = computed(() => ({\r\n  width: 300,\r\n  height: currentRatio.value > 0 ? 300 / currentRatio.value : 200,\r\n}));\r\n\r\nconst ratioPresets: AspectRatioPreset[] = [\r\n  { label: \"自由\", value: 0 },\r\n  { label: \"1:1\", value: 1 },\r\n  { label: \"16:9\", value: 16 / 9 },\r\n  { label: \"4:3\", value: 4 / 3 },\r\n  { label: \"3:2\", value: 3 / 2 },\r\n];\r\n\r\nconst formatRef = computed(() => props.outputFormat as CropOutputFormat);\r\nconst qualityRef = computed(() => props.outputQuality);\r\nconst maxWRef = computed(() => props.maxOutputWidth);\r\nconst maxHRef = computed(() => props.maxOutputHeight);\r\n\r\nconst core = useCropperCore({\r\n  format: formatRef,\r\n  quality: qualityRef,\r\n  maxWidth: maxWRef,\r\n  maxHeight: maxHRef,\r\n});\r\n\r\nwatch(activeCropperRef, (v) => {\r\n  core.cropperRef.value = v;\r\n});\r\n\r\nfunction handleRealTimePreview(data: any) {\r\n  previewData.value = data;\r\n}\r\nfunction onImgLoad(status: string) {\r\n  if (status === \"success\") emit(\"ready\");\r\n}\r\nfunction rotate(angle: number) {\r\n  core.rotate(angle);\r\n}\r\nfunction handleRatio(v: number) {\r\n  currentRatio.value = v;\r\n}\r\nfunction handleReset() {\r\n  core.reset();\r\n}\r\n\r\nasync function handleConfirm() {\r\n  exporting.value = true;\r\n  try {\r\n    const result = await core.getCropResult();\r\n    emit(\"confirm\", result);\r\n    emit(\"crop\", result);\r\n    modalVisible.value = false;\r\n  } finally {\r\n    exporting.value = false;\r\n  }\r\n}\r\n\r\nfunction handleCancel() {\r\n  modalVisible.value = false;\r\n  emit(\"cancel\");\r\n}\r\n\r\nfunction loadFile(file: File) {\r\n  const reader = new FileReader();\r\n  reader.onload = (e) => {\r\n    imgSrc.value = e.target?.result as string;\r\n  };\r\n  reader.readAsDataURL(file);\r\n}\r\n\r\nwatch(\r\n  () => props.src,\r\n  (v) => {\r\n    imgSrc.value = v;\r\n  },\r\n);\r\nwatch(\r\n  () => props.aspectRatio,\r\n  (v) => {\r\n    currentRatio.value = v;\r\n  },\r\n);\r\n\r\ndefineExpose<ImageCropperExpose>({\r\n  getCropResult: core.getCropResult,\r\n  rotate: core.rotate,\r\n  zoom: core.zoom,\r\n  flipX: core.flipX,\r\n  flipY: core.flipY,\r\n  reset: core.reset,\r\n  setAspectRatio: (r: number) => {\r\n    currentRatio.value = r;\r\n  },\r\n  loadFile,\r\n  open: (src?: string) => {\r\n    if (src) imgSrc.value = src;\r\n    modalVisible.value = true;\r\n  },\r\n  close: () => {\r\n    modalVisible.value = false;\r\n  },\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-02-25\r\n * @Description: 图片裁剪组件（基于 vue-cropper）\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <NModal\r\n    v-if=\"props.modal\"\r\n    v-model:show=\"modalVisible\"\r\n    preset=\"card\"\r\n    :title=\"props.modalTitle || '图片裁剪'\"\r\n    :style=\"{ width: '860px' }\"\r\n    :mask-closable=\"false\"\r\n    :closable=\"true\"\r\n  >\r\n    <div class=\"c-image-cropper__body\">\r\n      <CropperToolbar\r\n        v-if=\"props.showToolbar\"\r\n        :current-ratio=\"currentRatio\"\r\n        :ratio-presets=\"ratioPresets\"\r\n        @ratio=\"handleRatio\"\r\n        @rotate=\"rotate\"\r\n        @flip-x=\"core.flipX\"\r\n        @flip-y=\"core.flipY\"\r\n        @zoom=\"core.zoom\"\r\n        @reset=\"handleReset\"\r\n      />\r\n      <div class=\"c-image-cropper__workspace\">\r\n        <div\r\n          class=\"c-image-cropper__canvas\"\r\n          :style=\"{ height: containerHeight }\"\r\n        >\r\n          <VueCropper\r\n            v-if=\"imgSrc\"\r\n            ref=\"modalCropperRef\"\r\n            :img=\"imgSrc\"\r\n            :output-size=\"props.outputQuality\"\r\n            :output-type=\"vueCropperOutputType\"\r\n            :can-scale=\"false\"\r\n            :auto-crop=\"true\"\r\n            :auto-crop-width=\"autoCropSize.width\"\r\n            :auto-crop-height=\"autoCropSize.height\"\r\n            :fixed=\"isFixed\"\r\n            :fixed-number=\"fixedNumber\"\r\n            :center-box=\"true\"\r\n            :info=\"true\"\r\n            :info-true=\"true\"\r\n            :can-move=\"true\"\r\n            :can-move-box=\"true\"\r\n            :original=\"false\"\r\n            :high=\"true\"\r\n            :full=\"false\"\r\n            :mode=\"'contain'\"\r\n            @real-time=\"handleRealTimePreview\"\r\n            @img-load=\"onImgLoad\"\r\n          />\r\n          <div v-else class=\"c-image-cropper__placeholder\">\r\n            <C_Icon\r\n              name=\"mdi:image-plus-outline\"\r\n              style=\"font-size: 48px; opacity: 0.3\"\r\n            />\r\n            <span>请选择图片</span>\r\n          </div>\r\n        </div>\r\n        <div\r\n          v-if=\"props.showPreview && imgSrc\"\r\n          class=\"c-image-cropper__preview-panel\"\r\n        >\r\n          <CropperPreview\r\n            :preview-data=\"previewData\"\r\n            :circular=\"props.circular\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <template #footer>\r\n      <NSpace justify=\"end\">\r\n        <NButton @click=\"handleCancel\">取消</NButton>\r\n        <NButton type=\"primary\" :loading=\"exporting\" @click=\"handleConfirm\"\r\n          >确认裁剪</NButton\r\n        >\r\n      </NSpace>\r\n    </template>\r\n  </NModal>\r\n\r\n  <div v-else class=\"c-image-cropper\">\r\n    <div class=\"c-image-cropper__body\">\r\n      <CropperToolbar\r\n        v-if=\"props.showToolbar\"\r\n        :current-ratio=\"currentRatio\"\r\n        :ratio-presets=\"ratioPresets\"\r\n        @ratio=\"handleRatio\"\r\n        @rotate=\"rotate\"\r\n        @flip-x=\"core.flipX\"\r\n        @flip-y=\"core.flipY\"\r\n        @zoom=\"core.zoom\"\r\n        @reset=\"handleReset\"\r\n      />\r\n      <div class=\"c-image-cropper__workspace\">\r\n        <div\r\n          class=\"c-image-cropper__canvas\"\r\n          :style=\"{ height: containerHeight }\"\r\n        >\r\n          <VueCropper\r\n            v-if=\"imgSrc\"\r\n            ref=\"inlineCropperRef\"\r\n            :img=\"imgSrc\"\r\n            :output-size=\"props.outputQuality\"\r\n            :output-type=\"vueCropperOutputType\"\r\n            :can-scale=\"false\"\r\n            :auto-crop=\"true\"\r\n            :auto-crop-width=\"autoCropSize.width\"\r\n            :auto-crop-height=\"autoCropSize.height\"\r\n            :fixed=\"isFixed\"\r\n            :fixed-number=\"fixedNumber\"\r\n            :center-box=\"true\"\r\n            :info=\"true\"\r\n            :info-true=\"true\"\r\n            :can-move=\"true\"\r\n            :can-move-box=\"true\"\r\n            :original=\"false\"\r\n            :high=\"true\"\r\n            :full=\"false\"\r\n            :mode=\"'contain'\"\r\n            @real-time=\"handleRealTimePreview\"\r\n            @img-load=\"onImgLoad\"\r\n          />\r\n          <div v-else class=\"c-image-cropper__placeholder\">\r\n            <C_Icon\r\n              name=\"mdi:image-plus-outline\"\r\n              style=\"font-size: 48px; opacity: 0.3\"\r\n            />\r\n            <span>请选择图片</span>\r\n          </div>\r\n        </div>\r\n        <div\r\n          v-if=\"props.showPreview && imgSrc\"\r\n          class=\"c-image-cropper__preview-panel\"\r\n        >\r\n          <CropperPreview\r\n            :preview-data=\"previewData\"\r\n            :circular=\"props.circular\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, watch } from \"vue\";\r\nimport { NModal, NButton, NSpace } from \"naive-ui\";\r\nimport { VueCropper } from \"vue-cropper\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport type {\r\n  AspectRatioPreset,\r\n  CropOutputFormat,\r\n  ImageCropperExpose,\r\n  ImageCropperProps,\r\n} from \"./types\";\r\nimport { useCropperCore } from \"./composables/useCropperCore\";\r\nimport CropperToolbar from \"./components/CropperToolbar.vue\";\r\nimport CropperPreview from \"./components/CropperPreview.vue\";\r\n\r\ndefineOptions({ name: \"C_ImageCropper\" });\r\n\r\nconst props = withDefaults(defineProps<ImageCropperProps>(), {\r\n  src: \"\",\r\n  aspectRatio: 0,\r\n  outputFormat: \"png\",\r\n  outputQuality: 0.92,\r\n  maxOutputWidth: 0,\r\n  maxOutputHeight: 0,\r\n  showPreview: true,\r\n  showToolbar: true,\r\n  circular: false,\r\n  disabled: false,\r\n  height: \"400px\",\r\n  modal: false,\r\n  modalTitle: \"图片裁剪\",\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  crop: [result: any];\r\n  ready: [];\r\n  error: [error: Event];\r\n  confirm: [result: any];\r\n  cancel: [];\r\n}>();\r\n\r\nconst imgSrc = ref(props.src);\r\nconst currentRatio = ref(props.aspectRatio);\r\nconst modalVisible = ref(false);\r\nconst exporting = ref(false);\r\nconst previewData = ref<any>(null);\r\n\r\nconst inlineCropperRef = ref<any>(null);\r\nconst modalCropperRef = ref<any>(null);\r\n\r\nconst activeCropperRef = computed(() =>\r\n  props.modal ? modalCropperRef.value : inlineCropperRef.value,\r\n);\r\n\r\nconst containerHeight = computed(() =>\r\n  typeof props.height === \"number\" ? `${props.height}px` : props.height,\r\n);\r\n\r\nconst vueCropperOutputType = computed(() => {\r\n  const map: Record<CropOutputFormat, string> = {\r\n    png: \"png\",\r\n    jpeg: \"jpeg\",\r\n    webp: \"webp\",\r\n  };\r\n  return map[props.outputFormat as CropOutputFormat] || \"png\";\r\n});\r\n\r\nconst isFixed = computed(() => currentRatio.value > 0);\r\n\r\nconst fixedNumber = computed(() => {\r\n  if (currentRatio.value <= 0) return [1, 1];\r\n  if (currentRatio.value === 1) return [1, 1];\r\n  if (Math.abs(currentRatio.value - 16 / 9) < 0.01) return [16, 9];\r\n  if (Math.abs(currentRatio.value - 4 / 3) < 0.01) return [4, 3];\r\n  if (Math.abs(currentRatio.value - 3 / 2) < 0.01) return [3, 2];\r\n  return [Math.round(currentRatio.value * 100), 100];\r\n});\r\n\r\nconst autoCropSize = computed(() => ({\r\n  width: 300,\r\n  height: currentRatio.value > 0 ? 300 / currentRatio.value : 200,\r\n}));\r\n\r\nconst ratioPresets: AspectRatioPreset[] = [\r\n  { label: \"自由\", value: 0 },\r\n  { label: \"1:1\", value: 1 },\r\n  { label: \"16:9\", value: 16 / 9 },\r\n  { label: \"4:3\", value: 4 / 3 },\r\n  { label: \"3:2\", value: 3 / 2 },\r\n];\r\n\r\nconst formatRef = computed(() => props.outputFormat as CropOutputFormat);\r\nconst qualityRef = computed(() => props.outputQuality);\r\nconst maxWRef = computed(() => props.maxOutputWidth);\r\nconst maxHRef = computed(() => props.maxOutputHeight);\r\n\r\nconst core = useCropperCore({\r\n  format: formatRef,\r\n  quality: qualityRef,\r\n  maxWidth: maxWRef,\r\n  maxHeight: maxHRef,\r\n});\r\n\r\nwatch(activeCropperRef, (v) => {\r\n  core.cropperRef.value = v;\r\n});\r\n\r\nfunction handleRealTimePreview(data: any) {\r\n  previewData.value = data;\r\n}\r\nfunction onImgLoad(status: string) {\r\n  if (status === \"success\") emit(\"ready\");\r\n}\r\nfunction rotate(angle: number) {\r\n  core.rotate(angle);\r\n}\r\nfunction handleRatio(v: number) {\r\n  currentRatio.value = v;\r\n}\r\nfunction handleReset() {\r\n  core.reset();\r\n}\r\n\r\nasync function handleConfirm() {\r\n  exporting.value = true;\r\n  try {\r\n    const result = await core.getCropResult();\r\n    emit(\"confirm\", result);\r\n    emit(\"crop\", result);\r\n    modalVisible.value = false;\r\n  } finally {\r\n    exporting.value = false;\r\n  }\r\n}\r\n\r\nfunction handleCancel() {\r\n  modalVisible.value = false;\r\n  emit(\"cancel\");\r\n}\r\n\r\nfunction loadFile(file: File) {\r\n  const reader = new FileReader();\r\n  reader.onload = (e) => {\r\n    imgSrc.value = e.target?.result as string;\r\n  };\r\n  reader.readAsDataURL(file);\r\n}\r\n\r\nwatch(\r\n  () => props.src,\r\n  (v) => {\r\n    imgSrc.value = v;\r\n  },\r\n);\r\nwatch(\r\n  () => props.aspectRatio,\r\n  (v) => {\r\n    currentRatio.value = v;\r\n  },\r\n);\r\n\r\ndefineExpose<ImageCropperExpose>({\r\n  getCropResult: core.getCropResult,\r\n  rotate: core.rotate,\r\n  zoom: core.zoom,\r\n  flipX: core.flipX,\r\n  flipY: core.flipY,\r\n  reset: core.reset,\r\n  setAspectRatio: (r: number) => {\r\n    currentRatio.value = r;\r\n  },\r\n  loadFile,\r\n  open: (src?: string) => {\r\n    if (src) imgSrc.value = src;\r\n    modalVisible.value = true;\r\n  },\r\n  close: () => {\r\n    modalVisible.value = false;\r\n  },\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-02-25\r\n * @Description: 图片裁剪组件（基于 vue-cropper）\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <NModal\r\n    v-if=\"props.modal\"\r\n    v-model:show=\"modalVisible\"\r\n    preset=\"card\"\r\n    :title=\"props.modalTitle || '图片裁剪'\"\r\n    :style=\"{ width: '860px' }\"\r\n    :mask-closable=\"false\"\r\n    :closable=\"true\"\r\n  >\r\n    <div class=\"c-image-cropper__body\">\r\n      <CropperToolbar\r\n        v-if=\"props.showToolbar\"\r\n        :current-ratio=\"currentRatio\"\r\n        :ratio-presets=\"ratioPresets\"\r\n        @ratio=\"handleRatio\"\r\n        @rotate=\"rotate\"\r\n        @flip-x=\"core.flipX\"\r\n        @flip-y=\"core.flipY\"\r\n        @zoom=\"core.zoom\"\r\n        @reset=\"handleReset\"\r\n      />\r\n      <div class=\"c-image-cropper__workspace\">\r\n        <div\r\n          class=\"c-image-cropper__canvas\"\r\n          :style=\"{ height: containerHeight }\"\r\n        >\r\n          <VueCropper\r\n            v-if=\"imgSrc\"\r\n            ref=\"modalCropperRef\"\r\n            :img=\"imgSrc\"\r\n            :output-size=\"props.outputQuality\"\r\n            :output-type=\"vueCropperOutputType\"\r\n            :can-scale=\"false\"\r\n            :auto-crop=\"true\"\r\n            :auto-crop-width=\"autoCropSize.width\"\r\n            :auto-crop-height=\"autoCropSize.height\"\r\n            :fixed=\"isFixed\"\r\n            :fixed-number=\"fixedNumber\"\r\n            :center-box=\"true\"\r\n            :info=\"true\"\r\n            :info-true=\"true\"\r\n            :can-move=\"true\"\r\n            :can-move-box=\"true\"\r\n            :original=\"false\"\r\n            :high=\"true\"\r\n            :full=\"false\"\r\n            :mode=\"'contain'\"\r\n            @real-time=\"handleRealTimePreview\"\r\n            @img-load=\"onImgLoad\"\r\n          />\r\n          <div v-else class=\"c-image-cropper__placeholder\">\r\n            <C_Icon\r\n              name=\"mdi:image-plus-outline\"\r\n              style=\"font-size: 48px; opacity: 0.3\"\r\n            />\r\n            <span>请选择图片</span>\r\n          </div>\r\n        </div>\r\n        <div\r\n          v-if=\"props.showPreview && imgSrc\"\r\n          class=\"c-image-cropper__preview-panel\"\r\n        >\r\n          <CropperPreview\r\n            :preview-data=\"previewData\"\r\n            :circular=\"props.circular\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <template #footer>\r\n      <NSpace justify=\"end\">\r\n        <NButton @click=\"handleCancel\">取消</NButton>\r\n        <NButton type=\"primary\" :loading=\"exporting\" @click=\"handleConfirm\"\r\n          >确认裁剪</NButton\r\n        >\r\n      </NSpace>\r\n    </template>\r\n  </NModal>\r\n\r\n  <div v-else class=\"c-image-cropper\">\r\n    <div class=\"c-image-cropper__body\">\r\n      <CropperToolbar\r\n        v-if=\"props.showToolbar\"\r\n        :current-ratio=\"currentRatio\"\r\n        :ratio-presets=\"ratioPresets\"\r\n        @ratio=\"handleRatio\"\r\n        @rotate=\"rotate\"\r\n        @flip-x=\"core.flipX\"\r\n        @flip-y=\"core.flipY\"\r\n        @zoom=\"core.zoom\"\r\n        @reset=\"handleReset\"\r\n      />\r\n      <div class=\"c-image-cropper__workspace\">\r\n        <div\r\n          class=\"c-image-cropper__canvas\"\r\n          :style=\"{ height: containerHeight }\"\r\n        >\r\n          <VueCropper\r\n            v-if=\"imgSrc\"\r\n            ref=\"inlineCropperRef\"\r\n            :img=\"imgSrc\"\r\n            :output-size=\"props.outputQuality\"\r\n            :output-type=\"vueCropperOutputType\"\r\n            :can-scale=\"false\"\r\n            :auto-crop=\"true\"\r\n            :auto-crop-width=\"autoCropSize.width\"\r\n            :auto-crop-height=\"autoCropSize.height\"\r\n            :fixed=\"isFixed\"\r\n            :fixed-number=\"fixedNumber\"\r\n            :center-box=\"true\"\r\n            :info=\"true\"\r\n            :info-true=\"true\"\r\n            :can-move=\"true\"\r\n            :can-move-box=\"true\"\r\n            :original=\"false\"\r\n            :high=\"true\"\r\n            :full=\"false\"\r\n            :mode=\"'contain'\"\r\n            @real-time=\"handleRealTimePreview\"\r\n            @img-load=\"onImgLoad\"\r\n          />\r\n          <div v-else class=\"c-image-cropper__placeholder\">\r\n            <C_Icon\r\n              name=\"mdi:image-plus-outline\"\r\n              style=\"font-size: 48px; opacity: 0.3\"\r\n            />\r\n            <span>请选择图片</span>\r\n          </div>\r\n        </div>\r\n        <div\r\n          v-if=\"props.showPreview && imgSrc\"\r\n          class=\"c-image-cropper__preview-panel\"\r\n        >\r\n          <CropperPreview\r\n            :preview-data=\"previewData\"\r\n            :circular=\"props.circular\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, watch } from \"vue\";\r\nimport { NModal, NButton, NSpace } from \"naive-ui\";\r\nimport { VueCropper } from \"vue-cropper\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport type {\r\n  AspectRatioPreset,\r\n  CropOutputFormat,\r\n  ImageCropperExpose,\r\n  ImageCropperProps,\r\n} from \"./types\";\r\nimport { useCropperCore } from \"./composables/useCropperCore\";\r\nimport CropperToolbar from \"./components/CropperToolbar.vue\";\r\nimport CropperPreview from \"./components/CropperPreview.vue\";\r\n\r\ndefineOptions({ name: \"C_ImageCropper\" });\r\n\r\nconst props = withDefaults(defineProps<ImageCropperProps>(), {\r\n  src: \"\",\r\n  aspectRatio: 0,\r\n  outputFormat: \"png\",\r\n  outputQuality: 0.92,\r\n  maxOutputWidth: 0,\r\n  maxOutputHeight: 0,\r\n  showPreview: true,\r\n  showToolbar: true,\r\n  circular: false,\r\n  disabled: false,\r\n  height: \"400px\",\r\n  modal: false,\r\n  modalTitle: \"图片裁剪\",\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  crop: [result: any];\r\n  ready: [];\r\n  error: [error: Event];\r\n  confirm: [result: any];\r\n  cancel: [];\r\n}>();\r\n\r\nconst imgSrc = ref(props.src);\r\nconst currentRatio = ref(props.aspectRatio);\r\nconst modalVisible = ref(false);\r\nconst exporting = ref(false);\r\nconst previewData = ref<any>(null);\r\n\r\nconst inlineCropperRef = ref<any>(null);\r\nconst modalCropperRef = ref<any>(null);\r\n\r\nconst activeCropperRef = computed(() =>\r\n  props.modal ? modalCropperRef.value : inlineCropperRef.value,\r\n);\r\n\r\nconst containerHeight = computed(() =>\r\n  typeof props.height === \"number\" ? `${props.height}px` : props.height,\r\n);\r\n\r\nconst vueCropperOutputType = computed(() => {\r\n  const map: Record<CropOutputFormat, string> = {\r\n    png: \"png\",\r\n    jpeg: \"jpeg\",\r\n    webp: \"webp\",\r\n  };\r\n  return map[props.outputFormat as CropOutputFormat] || \"png\";\r\n});\r\n\r\nconst isFixed = computed(() => currentRatio.value > 0);\r\n\r\nconst fixedNumber = computed(() => {\r\n  if (currentRatio.value <= 0) return [1, 1];\r\n  if (currentRatio.value === 1) return [1, 1];\r\n  if (Math.abs(currentRatio.value - 16 / 9) < 0.01) return [16, 9];\r\n  if (Math.abs(currentRatio.value - 4 / 3) < 0.01) return [4, 3];\r\n  if (Math.abs(currentRatio.value - 3 / 2) < 0.01) return [3, 2];\r\n  return [Math.round(currentRatio.value * 100), 100];\r\n});\r\n\r\nconst autoCropSize = computed(() => ({\r\n  width: 300,\r\n  height: currentRatio.value > 0 ? 300 / currentRatio.value : 200,\r\n}));\r\n\r\nconst ratioPresets: AspectRatioPreset[] = [\r\n  { label: \"自由\", value: 0 },\r\n  { label: \"1:1\", value: 1 },\r\n  { label: \"16:9\", value: 16 / 9 },\r\n  { label: \"4:3\", value: 4 / 3 },\r\n  { label: \"3:2\", value: 3 / 2 },\r\n];\r\n\r\nconst formatRef = computed(() => props.outputFormat as CropOutputFormat);\r\nconst qualityRef = computed(() => props.outputQuality);\r\nconst maxWRef = computed(() => props.maxOutputWidth);\r\nconst maxHRef = computed(() => props.maxOutputHeight);\r\n\r\nconst core = useCropperCore({\r\n  format: formatRef,\r\n  quality: qualityRef,\r\n  maxWidth: maxWRef,\r\n  maxHeight: maxHRef,\r\n});\r\n\r\nwatch(activeCropperRef, (v) => {\r\n  core.cropperRef.value = v;\r\n});\r\n\r\nfunction handleRealTimePreview(data: any) {\r\n  previewData.value = data;\r\n}\r\nfunction onImgLoad(status: string) {\r\n  if (status === \"success\") emit(\"ready\");\r\n}\r\nfunction rotate(angle: number) {\r\n  core.rotate(angle);\r\n}\r\nfunction handleRatio(v: number) {\r\n  currentRatio.value = v;\r\n}\r\nfunction handleReset() {\r\n  core.reset();\r\n}\r\n\r\nasync function handleConfirm() {\r\n  exporting.value = true;\r\n  try {\r\n    const result = await core.getCropResult();\r\n    emit(\"confirm\", result);\r\n    emit(\"crop\", result);\r\n    modalVisible.value = false;\r\n  } finally {\r\n    exporting.value = false;\r\n  }\r\n}\r\n\r\nfunction handleCancel() {\r\n  modalVisible.value = false;\r\n  emit(\"cancel\");\r\n}\r\n\r\nfunction loadFile(file: File) {\r\n  const reader = new FileReader();\r\n  reader.onload = (e) => {\r\n    imgSrc.value = e.target?.result as string;\r\n  };\r\n  reader.readAsDataURL(file);\r\n}\r\n\r\nwatch(\r\n  () => props.src,\r\n  (v) => {\r\n    imgSrc.value = v;\r\n  },\r\n);\r\nwatch(\r\n  () => props.aspectRatio,\r\n  (v) => {\r\n    currentRatio.value = v;\r\n  },\r\n);\r\n\r\ndefineExpose<ImageCropperExpose>({\r\n  getCropResult: core.getCropResult,\r\n  rotate: core.rotate,\r\n  zoom: core.zoom,\r\n  flipX: core.flipX,\r\n  flipY: core.flipY,\r\n  reset: core.reset,\r\n  setAspectRatio: (r: number) => {\r\n    currentRatio.value = r;\r\n  },\r\n  loadFile,\r\n  open: (src?: string) => {\r\n    if (src) imgSrc.value = src;\r\n    modalVisible.value = true;\r\n  },\r\n  close: () => {\r\n    modalVisible.value = false;\r\n  },\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n"],"mappings":"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"}
+{"version":3,"file":"C_ImageCropper.js","names":[],"sources":["../src/components/C_ImageCropper/composables/useCropperCore.ts","../src/components/C_ImageCropper/components/CropperToolbar.vue","../src/components/C_ImageCropper/components/CropperPreview.vue","../src/components/C_ImageCropper/index.vue"],"sourcesContent":["import { ref } from \"vue\";\r\nimport type { Ref } from \"vue\";\r\nimport type { CropOutputFormat, CropResult } from \"../types\";\r\n\r\ninterface UseCropperCoreOptions {\r\n  format?: Ref<CropOutputFormat>;\r\n  quality?: Ref<number>;\r\n  maxWidth?: Ref<number>;\r\n  maxHeight?: Ref<number>;\r\n}\r\n\r\nexport function useCropperCore(options: UseCropperCoreOptions = {}) {\r\n  const cropperRef = ref<any>(null);\r\n\r\n  function rotateLeft() {\r\n    cropperRef.value?.rotateLeft();\r\n  }\r\n\r\n  function rotateRight() {\r\n    cropperRef.value?.rotateRight();\r\n  }\r\n\r\n  function rotate(angle: number) {\r\n    const steps = Math.round(angle / 90);\r\n    const fn = steps > 0 ? rotateRight : rotateLeft;\r\n    for (let i = 0; i < Math.abs(steps); i++) fn();\r\n  }\r\n\r\n  function zoom(scale: number) {\r\n    cropperRef.value?.changeScale(scale > 0 ? 1 : -1);\r\n  }\r\n\r\n  function flipX() {\r\n    const el = cropperRef.value?.$refs?.img;\r\n    if (!el) return;\r\n    const current = el.style.transform || \"\";\r\n    if (current.includes(\"scaleX(-1)\")) {\r\n      el.style.transform = current.replace(\"scaleX(-1)\", \"scaleX(1)\");\r\n    } else {\r\n      el.style.transform =\r\n        current.replace(/scaleX\\([^)]*\\)/, \"\") + \" scaleX(-1)\";\r\n    }\r\n  }\r\n\r\n  function flipY() {\r\n    const el = cropperRef.value?.$refs?.img;\r\n    if (!el) return;\r\n    const current = el.style.transform || \"\";\r\n    if (current.includes(\"scaleY(-1)\")) {\r\n      el.style.transform = current.replace(\"scaleY(-1)\", \"scaleY(1)\");\r\n    } else {\r\n      el.style.transform =\r\n        current.replace(/scaleY\\([^)]*\\)/, \"\") + \" scaleY(-1)\";\r\n    }\r\n  }\r\n\r\n  function reset() {\r\n    cropperRef.value?.refresh();\r\n  }\r\n\r\n  function constrainSize(w: number, h: number) {\r\n    let ow = w;\r\n    let oh = h;\r\n    const maxW = options.maxWidth?.value ?? 0;\r\n    const maxH = options.maxHeight?.value ?? 0;\r\n\r\n    if (maxW > 0 && ow > maxW) {\r\n      const ratio = maxW / ow;\r\n      ow = maxW;\r\n      oh = Math.round(oh * ratio);\r\n    }\r\n    if (maxH > 0 && oh > maxH) {\r\n      const ratio = maxH / oh;\r\n      oh = maxH;\r\n      ow = Math.round(ow * ratio);\r\n    }\r\n    return { width: ow, height: oh };\r\n  }\r\n\r\n  function getCropResult(): Promise<CropResult> {\r\n    return new Promise((resolve, reject) => {\r\n      const cropper = cropperRef.value;\r\n      if (!cropper) return reject(new Error(\"Cropper not initialized\"));\r\n\r\n      const format = options.format?.value ?? \"png\";\r\n      const quality = options.quality?.value ?? 0.92;\r\n      const mime =\r\n        format === \"jpeg\"\r\n          ? \"image/jpeg\"\r\n          : format === \"webp\"\r\n            ? \"image/webp\"\r\n            : \"image/png\";\r\n\r\n      cropper.getCropData((base64: string) => {\r\n        cropper.getCropBlob((blob: Blob) => {\r\n          const img = new Image();\r\n          img.onload = () => {\r\n            const { width, height } = constrainSize(img.width, img.height);\r\n\r\n            if (width !== img.width || height !== img.height) {\r\n              const canvas = document.createElement(\"canvas\");\r\n              canvas.width = width;\r\n              canvas.height = height;\r\n              const ctx = canvas.getContext(\"2d\")!;\r\n              ctx.drawImage(img, 0, 0, width, height);\r\n              const constrainedBase64 = canvas.toDataURL(mime, quality);\r\n              canvas.toBlob(\r\n                (constrainedBlob) => {\r\n                  resolve({\r\n                    base64: constrainedBase64,\r\n                    blob: constrainedBlob!,\r\n                    width,\r\n                    height,\r\n                    format,\r\n                  });\r\n                },\r\n                mime,\r\n                format === \"png\" ? undefined : quality,\r\n              );\r\n            } else {\r\n              resolve({\r\n                base64,\r\n                blob,\r\n                width: img.width,\r\n                height: img.height,\r\n                format,\r\n              });\r\n            }\r\n          };\r\n          img.onerror = () => reject(new Error(\"Failed to load crop result\"));\r\n          img.src = base64;\r\n        });\r\n      });\r\n    });\r\n  }\r\n\r\n  return {\r\n    cropperRef,\r\n    rotate,\r\n    rotateLeft,\r\n    rotateRight,\r\n    zoom,\r\n    flipX,\r\n    flipY,\r\n    reset,\r\n    getCropResult,\r\n  };\r\n}\r\n","<template>\r\n  <div class=\"cropper-toolbar\">\r\n    <NButtonGroup size=\"small\">\r\n      <NButton\r\n        v-for=\"item in ratioPresets\"\r\n        :key=\"item.value\"\r\n        :type=\"currentRatio === item.value ? 'primary' : 'default'\"\r\n        @click=\"$emit('ratio', item.value)\"\r\n      >\r\n        {{ item.label }}\r\n      </NButton>\r\n    </NButtonGroup>\r\n\r\n    <NDivider vertical />\r\n\r\n    <NTooltip>\r\n      <template #trigger>\r\n        <NButton size=\"small\" quaternary @click=\"$emit('rotate', -90)\">\r\n          <template #icon><C_Icon name=\"mdi:rotate-left\" /></template>\r\n        </NButton>\r\n      </template>\r\n      逆时针旋转 90°\r\n    </NTooltip>\r\n    <NTooltip>\r\n      <template #trigger>\r\n        <NButton size=\"small\" quaternary @click=\"$emit('rotate', 90)\">\r\n          <template #icon><C_Icon name=\"mdi:rotate-right\" /></template>\r\n        </NButton>\r\n      </template>\r\n      顺时针旋转 90°\r\n    </NTooltip>\r\n\r\n    <NDivider vertical />\r\n\r\n    <NTooltip>\r\n      <template #trigger>\r\n        <NButton size=\"small\" quaternary @click=\"$emit('flipX')\">\r\n          <template #icon><C_Icon name=\"mdi:flip-horizontal\" /></template>\r\n        </NButton>\r\n      </template>\r\n      水平翻转\r\n    </NTooltip>\r\n    <NTooltip>\r\n      <template #trigger>\r\n        <NButton size=\"small\" quaternary @click=\"$emit('flipY')\">\r\n          <template #icon><C_Icon name=\"mdi:flip-vertical\" /></template>\r\n        </NButton>\r\n      </template>\r\n      垂直翻转\r\n    </NTooltip>\r\n\r\n    <NDivider vertical />\r\n\r\n    <NTooltip>\r\n      <template #trigger>\r\n        <NButton size=\"small\" quaternary @click=\"$emit('zoom', 0.1)\">\r\n          <template #icon><C_Icon name=\"mdi:magnify-plus-outline\" /></template>\r\n        </NButton>\r\n      </template>\r\n      放大\r\n    </NTooltip>\r\n    <NTooltip>\r\n      <template #trigger>\r\n        <NButton size=\"small\" quaternary @click=\"$emit('zoom', -0.1)\">\r\n          <template #icon><C_Icon name=\"mdi:magnify-minus-outline\" /></template>\r\n        </NButton>\r\n      </template>\r\n      缩小\r\n    </NTooltip>\r\n\r\n    <NDivider vertical />\r\n\r\n    <NTooltip>\r\n      <template #trigger>\r\n        <NButton size=\"small\" quaternary @click=\"$emit('reset')\">\r\n          <template #icon><C_Icon name=\"mdi:refresh\" /></template>\r\n        </NButton>\r\n      </template>\r\n      重置\r\n    </NTooltip>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { NButton, NButtonGroup, NDivider, NTooltip } from \"naive-ui\";\r\nimport C_Icon from \"../../C_Icon/index.vue\";\r\nimport type { AspectRatioPreset } from \"../types\";\r\n\r\ndefineProps<{\r\n  currentRatio: number;\r\n  ratioPresets: AspectRatioPreset[];\r\n}>();\r\n\r\ndefineEmits<{\r\n  ratio: [value: number];\r\n  rotate: [angle: number];\r\n  flipX: [];\r\n  flipY: [];\r\n  zoom: [scale: number];\r\n  reset: [];\r\n}>();\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.cropper-toolbar {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 4px;\r\n  align-items: center;\r\n  padding: 8px 0;\r\n}\r\n</style>\r\n","<template>\r\n  <div class=\"cropper-preview\">\r\n    <div class=\"preview-label\">\r\n      <C_Icon name=\"mdi:eye-outline\" />\r\n      <span>裁剪预览</span>\r\n    </div>\r\n\r\n    <div\r\n      ref=\"mainBoxRef\"\r\n      class=\"preview-main\"\r\n      :class=\"{ 'preview-main--circular': circular }\"\r\n    >\r\n      <template v-if=\"hasValidPreview\">\r\n        <div class=\"preview-main__viewport\" :style=\"mainViewportStyle\">\r\n          <div :style=\"previewData.div\">\r\n            <img\r\n              :src=\"previewData.url\"\r\n              :style=\"previewData.img\"\r\n              alt=\"preview\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </template>\r\n      <div v-else class=\"preview-empty\">\r\n        <C_Icon\r\n          name=\"mdi:image-outline\"\r\n          style=\"font-size: 32px; opacity: 0.2\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"preview-thumbs\">\r\n      <div v-for=\"item in thumbSizes\" :key=\"item.label\" class=\"preview-thumb\">\r\n        <div\r\n          class=\"preview-thumb__box\"\r\n          :class=\"{ 'preview-thumb__box--circular': circular }\"\r\n          :style=\"{ width: `${item.size}px`, height: `${item.size}px` }\"\r\n        >\r\n          <template v-if=\"hasValidPreview\">\r\n            <div\r\n              class=\"preview-thumb__viewport\"\r\n              :style=\"getThumbViewportStyle(item.size)\"\r\n            >\r\n              <div :style=\"previewData.div\">\r\n                <img\r\n                  :src=\"previewData.url\"\r\n                  :style=\"previewData.img\"\r\n                  alt=\"thumb\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </template>\r\n        </div>\r\n        <span class=\"preview-thumb__label\">{{ item.label }}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, onMounted, onBeforeUnmount } from \"vue\";\r\nimport C_Icon from \"../../C_Icon/index.vue\";\r\n\r\nconst props = defineProps<{\r\n  previewData: any;\r\n  circular?: boolean;\r\n}>();\r\n\r\nconst mainBoxRef = ref<HTMLElement | null>(null);\r\nconst mainBoxWidth = ref(200);\r\n\r\nconst thumbSizes = [\r\n  { label: \"80px\", size: 80 },\r\n  { label: \"48px\", size: 48 },\r\n  { label: \"32px\", size: 32 },\r\n];\r\n\r\nconst hasValidPreview = computed(() => {\r\n  const d = props.previewData;\r\n  return d && d.url && d.w > 0 && d.h > 0;\r\n});\r\n\r\nconst mainViewportStyle = computed(() => {\r\n  if (!hasValidPreview.value) return {};\r\n  const { w } = props.previewData;\r\n  const zoom = mainBoxWidth.value / w;\r\n  return { zoom, overflow: \"hidden\" };\r\n});\r\n\r\nfunction getThumbViewportStyle(size: number) {\r\n  if (!hasValidPreview.value) return {};\r\n  const { w } = props.previewData;\r\n  return { zoom: size / w, overflow: \"hidden\" };\r\n}\r\n\r\nlet resizeObserver: ResizeObserver | null = null;\r\n\r\nonMounted(() => {\r\n  if (mainBoxRef.value) {\r\n    mainBoxWidth.value = mainBoxRef.value.clientWidth;\r\n    resizeObserver = new ResizeObserver((entries) => {\r\n      requestAnimationFrame(() => {\r\n        for (const entry of entries) {\r\n          mainBoxWidth.value = entry.contentRect.width;\r\n        }\r\n      });\r\n    });\r\n    resizeObserver.observe(mainBoxRef.value);\r\n  }\r\n});\r\n\r\nonBeforeUnmount(() => {\r\n  resizeObserver?.disconnect();\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.cropper-preview {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 16px;\r\n\r\n  .preview-label {\r\n    display: flex;\r\n    gap: 6px;\r\n    align-items: center;\r\n    font-size: 13px;\r\n    font-weight: 500;\r\n    color: var(--text-color-2);\r\n  }\r\n\r\n  .preview-main {\r\n    width: 100%;\r\n    overflow: hidden;\r\n    border: 1px solid var(--border-color);\r\n    border-radius: 6px;\r\n    background:\r\n      linear-gradient(45deg, #f0f0f0 25%, transparent 25%),\r\n      linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),\r\n      linear-gradient(45deg, transparent 75%, #f0f0f0 75%),\r\n      linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);\r\n    background-position:\r\n      0 0,\r\n      0 8px,\r\n      8px -8px,\r\n      -8px 0;\r\n    background-size: 16px 16px;\r\n\r\n    &--circular {\r\n      border-radius: 50%;\r\n    }\r\n\r\n    &__viewport img {\r\n      display: block;\r\n      max-width: none !important;\r\n    }\r\n  }\r\n\r\n  .preview-empty {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 100%;\r\n    height: 100%;\r\n    min-height: 120px;\r\n  }\r\n\r\n  .preview-thumbs {\r\n    display: flex;\r\n    gap: 12px;\r\n    align-items: flex-end;\r\n    justify-content: center;\r\n  }\r\n\r\n  .preview-thumb {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 4px;\r\n    align-items: center;\r\n\r\n    &__box {\r\n      overflow: hidden;\r\n      border: 1px solid var(--border-color);\r\n      border-radius: 4px;\r\n      background: var(--body-color);\r\n\r\n      &--circular {\r\n        border-radius: 50%;\r\n      }\r\n    }\r\n\r\n    &__viewport img {\r\n      display: block;\r\n      max-width: none !important;\r\n    }\r\n\r\n    &__label {\r\n      font-size: 11px;\r\n      color: var(--text-color-3);\r\n    }\r\n  }\r\n}\r\n</style>\r\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2026-02-25\n * @Description: 图片裁剪组件（基于 vue-cropper）\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\n-->\n<template>\n  <NModal\n    v-if=\"props.modal\"\n    v-model:show=\"modalVisible\"\n    preset=\"card\"\n    :title=\"props.modalTitle || '图片裁剪'\"\n    :style=\"{ width: '860px' }\"\n    :mask-closable=\"false\"\n    :closable=\"true\"\n  >\n    <div class=\"c-image-cropper__body\">\n      <CropperToolbar\n        v-if=\"props.showToolbar\"\n        :current-ratio=\"currentRatio\"\n        :ratio-presets=\"ratioPresets\"\n        @ratio=\"handleRatio\"\n        @rotate=\"rotate\"\n        @flip-x=\"core.flipX\"\n        @flip-y=\"core.flipY\"\n        @zoom=\"core.zoom\"\n        @reset=\"handleReset\"\n      />\n      <div class=\"c-image-cropper__workspace\">\n        <div\n          class=\"c-image-cropper__canvas\"\n          :style=\"{ height: containerHeight }\"\n        >\n          <VueCropper\n            v-if=\"imgSrc\"\n            ref=\"modalCropperRef\"\n            :img=\"imgSrc\"\n            :output-size=\"props.outputQuality\"\n            :output-type=\"vueCropperOutputType\"\n            :can-scale=\"false\"\n            :auto-crop=\"true\"\n            :auto-crop-width=\"autoCropSize.width\"\n            :auto-crop-height=\"autoCropSize.height\"\n            :fixed=\"isFixed\"\n            :fixed-number=\"fixedNumber\"\n            :center-box=\"true\"\n            :info=\"true\"\n            :info-true=\"true\"\n            :can-move=\"true\"\n            :can-move-box=\"true\"\n            :original=\"false\"\n            :high=\"true\"\n            :full=\"false\"\n            :mode=\"'contain'\"\n            @real-time=\"handleRealTimePreview\"\n            @img-load=\"onImgLoad\"\n          />\n          <div v-else class=\"c-image-cropper__placeholder\">\n            <C_Icon\n              name=\"mdi:image-plus-outline\"\n              style=\"font-size: 48px; opacity: 0.3\"\n            />\n            <span>请选择图片</span>\n          </div>\n        </div>\n        <div\n          v-if=\"props.showPreview && imgSrc\"\n          class=\"c-image-cropper__preview-panel\"\n        >\n          <CropperPreview\n            :preview-data=\"previewData\"\n            :circular=\"props.circular\"\n          />\n        </div>\n      </div>\n    </div>\n    <template #footer>\n      <NSpace justify=\"end\">\n        <NButton @click=\"handleCancel\">取消</NButton>\n        <NButton type=\"primary\" :loading=\"exporting\" @click=\"handleConfirm\"\n          >确认裁剪</NButton\n        >\n      </NSpace>\n    </template>\n  </NModal>\n\n  <div v-else class=\"c-image-cropper\">\n    <div class=\"c-image-cropper__body\">\n      <CropperToolbar\n        v-if=\"props.showToolbar\"\n        :current-ratio=\"currentRatio\"\n        :ratio-presets=\"ratioPresets\"\n        @ratio=\"handleRatio\"\n        @rotate=\"rotate\"\n        @flip-x=\"core.flipX\"\n        @flip-y=\"core.flipY\"\n        @zoom=\"core.zoom\"\n        @reset=\"handleReset\"\n      />\n      <div class=\"c-image-cropper__workspace\">\n        <div\n          class=\"c-image-cropper__canvas\"\n          :style=\"{ height: containerHeight }\"\n        >\n          <VueCropper\n            v-if=\"imgSrc\"\n            ref=\"inlineCropperRef\"\n            :img=\"imgSrc\"\n            :output-size=\"props.outputQuality\"\n            :output-type=\"vueCropperOutputType\"\n            :can-scale=\"false\"\n            :auto-crop=\"true\"\n            :auto-crop-width=\"autoCropSize.width\"\n            :auto-crop-height=\"autoCropSize.height\"\n            :fixed=\"isFixed\"\n            :fixed-number=\"fixedNumber\"\n            :center-box=\"true\"\n            :info=\"true\"\n            :info-true=\"true\"\n            :can-move=\"true\"\n            :can-move-box=\"true\"\n            :original=\"false\"\n            :high=\"true\"\n            :full=\"false\"\n            :mode=\"'contain'\"\n            @real-time=\"handleRealTimePreview\"\n            @img-load=\"onImgLoad\"\n          />\n          <div v-else class=\"c-image-cropper__placeholder\">\n            <C_Icon\n              name=\"mdi:image-plus-outline\"\n              style=\"font-size: 48px; opacity: 0.3\"\n            />\n            <span>请选择图片</span>\n          </div>\n        </div>\n        <div\n          v-if=\"props.showPreview && imgSrc\"\n          class=\"c-image-cropper__preview-panel\"\n        >\n          <CropperPreview\n            :preview-data=\"previewData\"\n            :circular=\"props.circular\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch } from \"vue\";\nimport { NModal, NButton, NSpace } from \"naive-ui\";\nimport { VueCropper } from \"vue-cropper\";\nimport C_Icon from \"../C_Icon/index.vue\";\nimport type {\n  AspectRatioPreset,\n  CropOutputFormat,\n  ImageCropperExpose,\n  ImageCropperProps,\n} from \"./types\";\nimport { useCropperCore } from \"./composables/useCropperCore\";\nimport CropperToolbar from \"./components/CropperToolbar.vue\";\nimport CropperPreview from \"./components/CropperPreview.vue\";\n\ndefineOptions({ name: \"C_ImageCropper\" });\n\nconst props = withDefaults(defineProps<ImageCropperProps>(), {\n  src: \"\",\n  aspectRatio: 0,\n  outputFormat: \"png\",\n  outputQuality: 0.92,\n  maxOutputWidth: 0,\n  maxOutputHeight: 0,\n  showPreview: true,\n  showToolbar: true,\n  circular: false,\n  disabled: false,\n  height: \"400px\",\n  modal: false,\n  modalTitle: \"图片裁剪\",\n});\n\nconst emit = defineEmits<{\n  crop: [result: any];\n  ready: [];\n  error: [error: Event];\n  confirm: [result: any];\n  cancel: [];\n}>();\n\nconst imgSrc = ref(props.src);\nconst currentRatio = ref(props.aspectRatio);\nconst modalVisible = ref(false);\nconst exporting = ref(false);\nconst previewData = ref<any>(null);\n\nconst inlineCropperRef = ref<any>(null);\nconst modalCropperRef = ref<any>(null);\n\nconst activeCropperRef = computed(() =>\n  props.modal ? modalCropperRef.value : inlineCropperRef.value,\n);\n\nconst containerHeight = computed(() =>\n  typeof props.height === \"number\" ? `${props.height}px` : props.height,\n);\n\nconst vueCropperOutputType = computed(() => {\n  const map: Record<CropOutputFormat, string> = {\n    png: \"png\",\n    jpeg: \"jpeg\",\n    webp: \"webp\",\n  };\n  return map[props.outputFormat as CropOutputFormat] || \"png\";\n});\n\nconst isFixed = computed(() => currentRatio.value > 0);\n\nconst fixedNumber = computed(() => {\n  if (currentRatio.value <= 0) return [1, 1];\n  if (currentRatio.value === 1) return [1, 1];\n  if (Math.abs(currentRatio.value - 16 / 9) < 0.01) return [16, 9];\n  if (Math.abs(currentRatio.value - 4 / 3) < 0.01) return [4, 3];\n  if (Math.abs(currentRatio.value - 3 / 2) < 0.01) return [3, 2];\n  return [Math.round(currentRatio.value * 100), 100];\n});\n\nconst autoCropSize = computed(() => ({\n  width: 300,\n  height: currentRatio.value > 0 ? 300 / currentRatio.value : 200,\n}));\n\nconst ratioPresets: AspectRatioPreset[] = [\n  { label: \"自由\", value: 0 },\n  { label: \"1:1\", value: 1 },\n  { label: \"16:9\", value: 16 / 9 },\n  { label: \"4:3\", value: 4 / 3 },\n  { label: \"3:2\", value: 3 / 2 },\n];\n\nconst formatRef = computed(() => props.outputFormat as CropOutputFormat);\nconst qualityRef = computed(() => props.outputQuality);\nconst maxWRef = computed(() => props.maxOutputWidth);\nconst maxHRef = computed(() => props.maxOutputHeight);\n\nconst core = useCropperCore({\n  format: formatRef,\n  quality: qualityRef,\n  maxWidth: maxWRef,\n  maxHeight: maxHRef,\n});\n\nwatch(activeCropperRef, (v) => {\n  core.cropperRef.value = v;\n});\n\nfunction handleRealTimePreview(data: any) {\n  previewData.value = data;\n}\nfunction onImgLoad(status: string) {\n  if (status === \"success\") emit(\"ready\");\n}\nfunction rotate(angle: number) {\n  core.rotate(angle);\n}\nfunction handleRatio(v: number) {\n  currentRatio.value = v;\n}\nfunction handleReset() {\n  core.reset();\n}\n\nasync function handleConfirm() {\n  exporting.value = true;\n  try {\n    const result = await core.getCropResult();\n    emit(\"confirm\", result);\n    emit(\"crop\", result);\n    modalVisible.value = false;\n  } finally {\n    exporting.value = false;\n  }\n}\n\nfunction handleCancel() {\n  modalVisible.value = false;\n  emit(\"cancel\");\n}\n\nfunction loadFile(file: File) {\n  const reader = new FileReader();\n  reader.onload = (e) => {\n    imgSrc.value = e.target?.result as string;\n  };\n  reader.readAsDataURL(file);\n}\n\nwatch(\n  () => props.src,\n  (v) => {\n    imgSrc.value = v;\n  },\n);\nwatch(\n  () => props.aspectRatio,\n  (v) => {\n    currentRatio.value = v;\n  },\n);\n\ndefineExpose<ImageCropperExpose>({\n  getCropResult: core.getCropResult,\n  rotate: core.rotate,\n  zoom: core.zoom,\n  flipX: core.flipX,\n  flipY: core.flipY,\n  reset: core.reset,\n  setAspectRatio: (r: number) => {\n    currentRatio.value = r;\n  },\n  loadFile,\n  open: (src?: string) => {\n    if (src) imgSrc.value = src;\n    modalVisible.value = true;\n  },\n  close: () => {\n    modalVisible.value = false;\n  },\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use \"./index.scss\";\n</style>\n"],"mappings":"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"}