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

package/dist/C_ImageCropper.js.map

@@ -1 +1 @@
-{"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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"}
+{"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/CropperPreview.vue","../src/components/C_ImageCropper/components/CropperPreview.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","<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","<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","<!--\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","<!--\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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"}

package/dist/C_ImageCropper2.js

@@ -1,2 +1,2 @@
-import{t as e}from"./C_Icon2.js";import{t}from"./export-helper.js";import{Fragment as n,computed as r,createBlock as i,createCommentVNode as a,createElementBlock as o,createElementVNode as s,createTextVNode as c,createVNode as l,defineComponent as u,normalizeClass as d,normalizeStyle as f,onBeforeUnmount as p,onMounted as m,openBlock as h,ref as g,renderList as _,toDisplayString as v,unref as y,watch as b,withCtx as x}from"vue";import{NButton as S,NButtonGroup as C,NDivider as w,NModal as T,NSpace as ee,NTooltip as E}from"naive-ui";import{VueCropper as D}from"vue-cropper";function O(e={}){let t=g(null);function n(){t.value?.rotateLeft()}function r(){t.value?.rotateRight()}function i(e){let t=Math.round(e/90),i=t>0?r:n;for(let e=0;e<Math.abs(t);e++)i()}function a(e){t.value?.changeScale(e>0?1:-1)}function o(){let e=t.value?.$refs?.img;if(!e)return;let n=e.style.transform||``;n.includes(`scaleX(-1)`)?e.style.transform=n.replace(`scaleX(-1)`,`scaleX(1)`):e.style.transform=n.replace(/scaleX\([^)]*\)/,``)+` scaleX(-1)`}function s(){let e=t.value?.$refs?.img;if(!e)return;let n=e.style.transform||``;n.includes(`scaleY(-1)`)?e.style.transform=n.replace(`scaleY(-1)`,`scaleY(1)`):e.style.transform=n.replace(/scaleY\([^)]*\)/,``)+` scaleY(-1)`}function c(){t.value?.refresh()}function l(t,n){let r=t,i=n,a=e.maxWidth?.value??0,o=e.maxHeight?.value??0;if(a>0&&r>a){let e=a/r;r=a,i=Math.round(i*e)}if(o>0&&i>o){let e=o/i;i=o,r=Math.round(r*e)}return{width:r,height:i}}function u(){return new Promise((n,r)=>{let i=t.value;if(!i)return r(Error(`Cropper not initialized`));let a=e.format?.value??`png`,o=e.quality?.value??.92,s=a===`jpeg`?`image/jpeg`:a===`webp`?`image/webp`:`image/png`;i.getCropData(e=>{i.getCropBlob(t=>{let i=new Image;i.onload=()=>{let{width:r,height:c}=l(i.width,i.height);if(r!==i.width||c!==i.height){let e=document.createElement(`canvas`);e.width=r,e.height=c,e.getContext(`2d`).drawImage(i,0,0,r,c);let t=e.toDataURL(s,o);e.toBlob(e=>{n({base64:t,blob:e,width:r,height:c,format:a})},s,a===`png`?void 0:o)}else n({base64:e,blob:t,width:i.width,height:i.height,format:a})},i.onerror=()=>r(Error(`Failed to load crop result`)),i.src=e})})})}return{cropperRef:t,rotate:i,rotateLeft:n,rotateRight:r,zoom:a,flipX:o,flipY:s,reset:c,getCropResult:u}}const k={class:`cropper-toolbar`};var A=t(u({__name:`CropperToolbar`,props:{currentRatio:{},ratioPresets:{}},emits:[`ratio`,`rotate`,`flipX`,`flipY`,`zoom`,`reset`],setup(t){return(t,r)=>(h(),o(`div`,k,[l(y(C),{size:`small`},{default:x(()=>[(h(!0),o(n,null,_(t.ratioPresets,e=>(h(),i(y(S),{key:e.value,type:t.currentRatio===e.value?`primary`:`default`,onClick:n=>t.$emit(`ratio`,e.value)},{default:x(()=>[c(v(e.label),1)]),_:2},1032,[`type`,`onClick`]))),128))]),_:1}),l(y(w),{vertical:``}),l(y(E),null,{trigger:x(()=>[l(y(S),{size:`small`,quaternary:``,onClick:r[0]||=e=>t.$emit(`rotate`,-90)},{icon:x(()=>[l(e,{name:`mdi:rotate-left`})]),_:1})]),default:x(()=>[r[7]||=c(` 逆时针旋转 90° `,-1)]),_:1,__:[7]}),l(y(E),null,{trigger:x(()=>[l(y(S),{size:`small`,quaternary:``,onClick:r[1]||=e=>t.$emit(`rotate`,90)},{icon:x(()=>[l(e,{name:`mdi:rotate-right`})]),_:1})]),default:x(()=>[r[8]||=c(` 顺时针旋转 90° `,-1)]),_:1,__:[8]}),l(y(w),{vertical:``}),l(y(E),null,{trigger:x(()=>[l(y(S),{size:`small`,quaternary:``,onClick:r[2]||=e=>t.$emit(`flipX`)},{icon:x(()=>[l(e,{name:`mdi:flip-horizontal`})]),_:1})]),default:x(()=>[r[9]||=c(` 水平翻转 `,-1)]),_:1,__:[9]}),l(y(E),null,{trigger:x(()=>[l(y(S),{size:`small`,quaternary:``,onClick:r[3]||=e=>t.$emit(`flipY`)},{icon:x(()=>[l(e,{name:`mdi:flip-vertical`})]),_:1})]),default:x(()=>[r[10]||=c(` 垂直翻转 `,-1)]),_:1,__:[10]}),l(y(w),{vertical:``}),l(y(E),null,{trigger:x(()=>[l(y(S),{size:`small`,quaternary:``,onClick:r[4]||=e=>t.$emit(`zoom`,.1)},{icon:x(()=>[l(e,{name:`mdi:magnify-plus-outline`})]),_:1})]),default:x(()=>[r[11]||=c(` 放大 `,-1)]),_:1,__:[11]}),l(y(E),null,{trigger:x(()=>[l(y(S),{size:`small`,quaternary:``,onClick:r[5]||=e=>t.$emit(`zoom`,-.1)},{icon:x(()=>[l(e,{name:`mdi:magnify-minus-outline`})]),_:1})]),default:x(()=>[r[12]||=c(` 缩小 `,-1)]),_:1,__:[12]}),l(y(w),{vertical:``}),l(y(E),null,{trigger:x(()=>[l(y(S),{size:`small`,quaternary:``,onClick:r[6]||=e=>t.$emit(`reset`)},{icon:x(()=>[l(e,{name:`mdi:refresh`})]),_:1})]),default:x(()=>[r[13]||=c(` 重置 `,-1)]),_:1,__:[13]})]))}}),[[`__scopeId`,`data-v-ac310c55`]]);const j={class:`cropper-preview`},M={class:`preview-label`},N=[`src`],P={key:1,class:`preview-empty`},F={class:`preview-thumbs`},I=[`src`],L={class:`preview-thumb__label`};var R=t(u({__name:`CropperPreview`,props:{previewData:{},circular:{type:Boolean}},setup(t){let i=t,c=g(null),u=g(200),y=[{label:`80px`,size:80},{label:`48px`,size:48},{label:`32px`,size:32}],b=r(()=>{let e=i.previewData;return e&&e.url&&e.w>0&&e.h>0}),x=r(()=>{if(!b.value)return{};let{w:e}=i.previewData;return{zoom:u.value/e,overflow:`hidden`}});function S(e){if(!b.value)return{};let{w:t}=i.previewData;return{zoom:e/t,overflow:`hidden`}}let C=null;return m(()=>{c.value&&(u.value=c.value.clientWidth,C=new ResizeObserver(e=>{requestAnimationFrame(()=>{for(let t of e)u.value=t.contentRect.width})}),C.observe(c.value))}),p(()=>{C?.disconnect()}),(t,r)=>(h(),o(`div`,j,[s(`div`,M,[l(e,{name:`mdi:eye-outline`}),r[0]||=s(`span`,null,`裁剪预览`,-1)]),s(`div`,{ref_key:`mainBoxRef`,ref:c,class:d([`preview-main`,{"preview-main--circular":t.circular}])},[b.value?(h(),o(`div`,{key:0,class:`preview-main__viewport`,style:f(x.value)},[s(`div`,{style:f(t.previewData.div)},[s(`img`,{src:t.previewData.url,style:f(t.previewData.img),alt:`preview`},null,12,N)],4)],4)):(h(),o(`div`,P,[l(e,{name:`mdi:image-outline`,style:{"font-size":`32px`,opacity:`0.2`}})]))],2),s(`div`,F,[(h(),o(n,null,_(y,e=>s(`div`,{key:e.label,class:`preview-thumb`},[s(`div`,{class:d([`preview-thumb__box`,{"preview-thumb__box--circular":t.circular}]),style:f({width:`${e.size}px`,height:`${e.size}px`})},[b.value?(h(),o(`div`,{key:0,class:`preview-thumb__viewport`,style:f(S(e.size))},[s(`div`,{style:f(t.previewData.div)},[s(`img`,{src:t.previewData.url,style:f(t.previewData.img),alt:`thumb`},null,12,I)],4)],4)):a(`v-if`,!0)],6),s(`span`,L,v(e.label),1)])),64))])]))}}),[[`__scopeId`,`data-v-11f355b4`]]);const z={class:`c-image-cropper__body`},B={class:`c-image-cropper__workspace`},V={key:1,class:`c-image-cropper__placeholder`},H={key:0,class:`c-image-cropper__preview-panel`},U={key:1,class:`c-image-cropper`},W={class:`c-image-cropper__body`},G={class:`c-image-cropper__workspace`},K={key:1,class:`c-image-cropper__placeholder`},q={key:0,class:`c-image-cropper__preview-panel`};var J=t(u({name:`C_ImageCropper`,__name:`index`,props:{src:{default:``},aspectRatio:{default:0},outputFormat:{default:`png`},outputQuality:{default:.92},maxOutputWidth:{default:0},maxOutputHeight:{default:0},showPreview:{type:Boolean,default:!0},showToolbar:{type:Boolean,default:!0},circular:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},height:{default:`400px`},modal:{type:Boolean,default:!1},modalTitle:{default:`图片裁剪`}},emits:[`crop`,`ready`,`error`,`confirm`,`cancel`],setup(t,{expose:n,emit:u}){let d=t,p=u,m=g(d.src),_=g(d.aspectRatio),v=g(!1),C=g(!1),w=g(null),E=g(null),k=g(null),j=r(()=>d.modal?k.value:E.value),M=r(()=>typeof d.height==`number`?`${d.height}px`:d.height),N=r(()=>({png:`png`,jpeg:`jpeg`,webp:`webp`})[d.outputFormat]||`png`),P=r(()=>_.value>0),F=r(()=>_.value<=0||_.value===1?[1,1]:Math.abs(_.value-16/9)<.01?[16,9]:Math.abs(_.value-4/3)<.01?[4,3]:Math.abs(_.value-3/2)<.01?[3,2]:[Math.round(_.value*100),100]),I=r(()=>({width:300,height:_.value>0?300/_.value:200})),L=[{label:`自由`,value:0},{label:`1:1`,value:1},{label:`16:9`,value:16/9},{label:`4:3`,value:4/3},{label:`3:2`,value:3/2}],J=O({format:r(()=>d.outputFormat),quality:r(()=>d.outputQuality),maxWidth:r(()=>d.maxOutputWidth),maxHeight:r(()=>d.maxOutputHeight)});b(j,e=>{J.cropperRef.value=e});function Y(e){w.value=e}function X(e){e===`success`&&p(`ready`)}function Z(e){J.rotate(e)}function Q(e){_.value=e}function $(){J.reset()}async function te(){C.value=!0;try{let e=await J.getCropResult();p(`confirm`,e),p(`crop`,e),v.value=!1}finally{C.value=!1}}function ne(){v.value=!1,p(`cancel`)}function re(e){let t=new FileReader;t.onload=e=>{m.value=e.target?.result},t.readAsDataURL(e)}return b(()=>d.src,e=>{m.value=e}),b(()=>d.aspectRatio,e=>{_.value=e}),n({getCropResult:J.getCropResult,rotate:J.rotate,zoom:J.zoom,flipX:J.flipX,flipY:J.flipY,reset:J.reset,setAspectRatio:e=>{_.value=e},loadFile:re,open:e=>{e&&(m.value=e),v.value=!0},close:()=>{v.value=!1}}),(t,n)=>d.modal?(h(),i(y(T),{key:0,show:v.value,"onUpdate:show":n[0]||=e=>v.value=e,preset:`card`,title:d.modalTitle||`图片裁剪`,style:{width:`860px`},"mask-closable":!1,closable:!0},{footer:x(()=>[l(y(ee),{justify:`end`},{default:x(()=>[l(y(S),{onClick:ne},{default:x(()=>n[2]||=[c(`取消`,-1)]),_:1,__:[2]}),l(y(S),{type:`primary`,loading:C.value,onClick:te},{default:x(()=>n[3]||=[c(`确认裁剪`,-1)]),_:1,__:[3]},8,[`loading`])]),_:1})]),default:x(()=>[s(`div`,z,[d.showToolbar?(h(),i(A,{key:0,"current-ratio":_.value,"ratio-presets":L,onRatio:Q,onRotate:Z,onFlipX:y(J).flipX,onFlipY:y(J).flipY,onZoom:y(J).zoom,onReset:$},null,8,[`current-ratio`,`onFlipX`,`onFlipY`,`onZoom`])):a(`v-if`,!0),s(`div`,B,[s(`div`,{class:`c-image-cropper__canvas`,style:f({height:M.value})},[m.value?(h(),i(y(D),{key:0,ref_key:`modalCropperRef`,ref:k,img:m.value,"output-size":d.outputQuality,"output-type":N.value,"can-scale":!1,"auto-crop":!0,"auto-crop-width":I.value.width,"auto-crop-height":I.value.height,fixed:P.value,"fixed-number":F.value,"center-box":!0,info:!0,"info-true":!0,"can-move":!0,"can-move-box":!0,original:!1,high:!0,full:!1,mode:`contain`,onRealTime:Y,onImgLoad:X},null,8,[`img`,`output-size`,`output-type`,`auto-crop-width`,`auto-crop-height`,`fixed`,`fixed-number`])):(h(),o(`div`,V,[l(e,{name:`mdi:image-plus-outline`,style:{"font-size":`48px`,opacity:`0.3`}}),n[1]||=s(`span`,null,`请选择图片`,-1)]))],4),d.showPreview&&m.value?(h(),o(`div`,H,[l(R,{"preview-data":w.value,circular:d.circular},null,8,[`preview-data`,`circular`])])):a(`v-if`,!0)])])]),_:1},8,[`show`,`title`])):(h(),o(`div`,U,[s(`div`,W,[d.showToolbar?(h(),i(A,{key:0,"current-ratio":_.value,"ratio-presets":L,onRatio:Q,onRotate:Z,onFlipX:y(J).flipX,onFlipY:y(J).flipY,onZoom:y(J).zoom,onReset:$},null,8,[`current-ratio`,`onFlipX`,`onFlipY`,`onZoom`])):a(`v-if`,!0),s(`div`,G,[s(`div`,{class:`c-image-cropper__canvas`,style:f({height:M.value})},[m.value?(h(),i(y(D),{key:0,ref_key:`inlineCropperRef`,ref:E,img:m.value,"output-size":d.outputQuality,"output-type":N.value,"can-scale":!1,"auto-crop":!0,"auto-crop-width":I.value.width,"auto-crop-height":I.value.height,fixed:P.value,"fixed-number":F.value,"center-box":!0,info:!0,"info-true":!0,"can-move":!0,"can-move-box":!0,original:!1,high:!0,full:!1,mode:`contain`,onRealTime:Y,onImgLoad:X},null,8,[`img`,`output-size`,`output-type`,`auto-crop-width`,`auto-crop-height`,`fixed`,`fixed-number`])):(h(),o(`div`,K,[l(e,{name:`mdi:image-plus-outline`,style:{"font-size":`48px`,opacity:`0.3`}}),n[4]||=s(`span`,null,`请选择图片`,-1)]))],4),d.showPreview&&m.value?(h(),o(`div`,q,[l(R,{"preview-data":w.value,circular:d.circular},null,8,[`preview-data`,`circular`])])):a(`v-if`,!0)])])]))}}),[[`__scopeId`,`data-v-d4798825`]]);export{O as n,J as t};
+import{t as e}from"./C_Icon2.js";import{t}from"./export-helper.js";import{NButton as n,NButtonGroup as r,NDivider as i,NModal as a,NSpace as o,NTooltip as s}from"naive-ui";import{Fragment as c,computed as l,createBlock as u,createCommentVNode as d,createElementBlock as f,createElementVNode as p,createTextVNode as m,createVNode as h,defineComponent as g,normalizeClass as _,normalizeStyle as v,onBeforeUnmount as y,onMounted as b,openBlock as x,ref as S,renderList as C,toDisplayString as w,unref as T,watch as E,withCtx as D}from"vue";import{VueCropper as O}from"vue-cropper";function k(e={}){let t=S(null);function n(){t.value?.rotateLeft()}function r(){t.value?.rotateRight()}function i(e){let t=Math.round(e/90),i=t>0?r:n;for(let e=0;e<Math.abs(t);e++)i()}function a(e){t.value?.changeScale(e>0?1:-1)}function o(){let e=t.value?.$refs?.img;if(!e)return;let n=e.style.transform||``;n.includes(`scaleX(-1)`)?e.style.transform=n.replace(`scaleX(-1)`,`scaleX(1)`):e.style.transform=n.replace(/scaleX\([^)]*\)/,``)+` scaleX(-1)`}function s(){let e=t.value?.$refs?.img;if(!e)return;let n=e.style.transform||``;n.includes(`scaleY(-1)`)?e.style.transform=n.replace(`scaleY(-1)`,`scaleY(1)`):e.style.transform=n.replace(/scaleY\([^)]*\)/,``)+` scaleY(-1)`}function c(){t.value?.refresh()}function l(t,n){let r=t,i=n,a=e.maxWidth?.value??0,o=e.maxHeight?.value??0;if(a>0&&r>a){let e=a/r;r=a,i=Math.round(i*e)}if(o>0&&i>o){let e=o/i;i=o,r=Math.round(r*e)}return{width:r,height:i}}function u(){return new Promise((n,r)=>{let i=t.value;if(!i)return r(Error(`Cropper not initialized`));let a=e.format?.value??`png`,o=e.quality?.value??.92,s=a===`jpeg`?`image/jpeg`:a===`webp`?`image/webp`:`image/png`;i.getCropData(e=>{i.getCropBlob(t=>{let i=new Image;i.onload=()=>{let{width:r,height:c}=l(i.width,i.height);if(r!==i.width||c!==i.height){let e=document.createElement(`canvas`);e.width=r,e.height=c,e.getContext(`2d`).drawImage(i,0,0,r,c);let t=e.toDataURL(s,o);e.toBlob(e=>{n({base64:t,blob:e,width:r,height:c,format:a})},s,a===`png`?void 0:o)}else n({base64:e,blob:t,width:i.width,height:i.height,format:a})},i.onerror=()=>r(Error(`Failed to load crop result`)),i.src=e})})})}return{cropperRef:t,rotate:i,rotateLeft:n,rotateRight:r,zoom:a,flipX:o,flipY:s,reset:c,getCropResult:u}}const A={class:`cropper-toolbar`};var j=t(g({__name:`CropperToolbar`,props:{currentRatio:{},ratioPresets:{}},emits:[`ratio`,`rotate`,`flipX`,`flipY`,`zoom`,`reset`],setup(t){return(t,a)=>(x(),f(`div`,A,[h(T(r),{size:`small`},{default:D(()=>[(x(!0),f(c,null,C(t.ratioPresets,e=>(x(),u(T(n),{key:e.value,type:t.currentRatio===e.value?`primary`:`default`,onClick:n=>t.$emit(`ratio`,e.value)},{default:D(()=>[m(w(e.label),1)]),_:2},1032,[`type`,`onClick`]))),128))]),_:1}),h(T(i),{vertical:``}),h(T(s),null,{trigger:D(()=>[h(T(n),{size:`small`,quaternary:``,onClick:a[0]||=e=>t.$emit(`rotate`,-90)},{icon:D(()=>[h(e,{name:`mdi:rotate-left`})]),_:1})]),default:D(()=>[a[7]||=m(` 逆时针旋转 90° `,-1)]),_:1,__:[7]}),h(T(s),null,{trigger:D(()=>[h(T(n),{size:`small`,quaternary:``,onClick:a[1]||=e=>t.$emit(`rotate`,90)},{icon:D(()=>[h(e,{name:`mdi:rotate-right`})]),_:1})]),default:D(()=>[a[8]||=m(` 顺时针旋转 90° `,-1)]),_:1,__:[8]}),h(T(i),{vertical:``}),h(T(s),null,{trigger:D(()=>[h(T(n),{size:`small`,quaternary:``,onClick:a[2]||=e=>t.$emit(`flipX`)},{icon:D(()=>[h(e,{name:`mdi:flip-horizontal`})]),_:1})]),default:D(()=>[a[9]||=m(` 水平翻转 `,-1)]),_:1,__:[9]}),h(T(s),null,{trigger:D(()=>[h(T(n),{size:`small`,quaternary:``,onClick:a[3]||=e=>t.$emit(`flipY`)},{icon:D(()=>[h(e,{name:`mdi:flip-vertical`})]),_:1})]),default:D(()=>[a[10]||=m(` 垂直翻转 `,-1)]),_:1,__:[10]}),h(T(i),{vertical:``}),h(T(s),null,{trigger:D(()=>[h(T(n),{size:`small`,quaternary:``,onClick:a[4]||=e=>t.$emit(`zoom`,.1)},{icon:D(()=>[h(e,{name:`mdi:magnify-plus-outline`})]),_:1})]),default:D(()=>[a[11]||=m(` 放大 `,-1)]),_:1,__:[11]}),h(T(s),null,{trigger:D(()=>[h(T(n),{size:`small`,quaternary:``,onClick:a[5]||=e=>t.$emit(`zoom`,-.1)},{icon:D(()=>[h(e,{name:`mdi:magnify-minus-outline`})]),_:1})]),default:D(()=>[a[12]||=m(` 缩小 `,-1)]),_:1,__:[12]}),h(T(i),{vertical:``}),h(T(s),null,{trigger:D(()=>[h(T(n),{size:`small`,quaternary:``,onClick:a[6]||=e=>t.$emit(`reset`)},{icon:D(()=>[h(e,{name:`mdi:refresh`})]),_:1})]),default:D(()=>[a[13]||=m(` 重置 `,-1)]),_:1,__:[13]})]))}}),[[`__scopeId`,`data-v-499ffd01`]]);const M={class:`cropper-preview`},N={class:`preview-label`},P=[`src`],F={key:1,class:`preview-empty`},I={class:`preview-thumbs`},L=[`src`],R={class:`preview-thumb__label`};var z=t(g({__name:`CropperPreview`,props:{previewData:{},circular:{type:Boolean}},setup(t){let n=t,r=S(null),i=S(200),a=[{label:`80px`,size:80},{label:`48px`,size:48},{label:`32px`,size:32}],o=l(()=>{let e=n.previewData;return e&&e.url&&e.w>0&&e.h>0}),s=l(()=>{if(!o.value)return{};let{w:e}=n.previewData;return{zoom:i.value/e,overflow:`hidden`}});function u(e){if(!o.value)return{};let{w:t}=n.previewData;return{zoom:e/t,overflow:`hidden`}}let m=null;return b(()=>{r.value&&(i.value=r.value.clientWidth,m=new ResizeObserver(e=>{requestAnimationFrame(()=>{for(let t of e)i.value=t.contentRect.width})}),m.observe(r.value))}),y(()=>{m?.disconnect()}),(t,n)=>(x(),f(`div`,M,[p(`div`,N,[h(e,{name:`mdi:eye-outline`}),n[0]||=p(`span`,null,`裁剪预览`,-1)]),p(`div`,{ref_key:`mainBoxRef`,ref:r,class:_([`preview-main`,{"preview-main--circular":t.circular}])},[o.value?(x(),f(`div`,{key:0,class:`preview-main__viewport`,style:v(s.value)},[p(`div`,{style:v(t.previewData.div)},[p(`img`,{src:t.previewData.url,style:v(t.previewData.img),alt:`preview`},null,12,P)],4)],4)):(x(),f(`div`,F,[h(e,{name:`mdi:image-outline`,style:{"font-size":`32px`,opacity:`0.2`}})]))],2),p(`div`,I,[(x(),f(c,null,C(a,e=>p(`div`,{key:e.label,class:`preview-thumb`},[p(`div`,{class:_([`preview-thumb__box`,{"preview-thumb__box--circular":t.circular}]),style:v({width:`${e.size}px`,height:`${e.size}px`})},[o.value?(x(),f(`div`,{key:0,class:`preview-thumb__viewport`,style:v(u(e.size))},[p(`div`,{style:v(t.previewData.div)},[p(`img`,{src:t.previewData.url,style:v(t.previewData.img),alt:`thumb`},null,12,L)],4)],4)):d(`v-if`,!0)],6),p(`span`,R,w(e.label),1)])),64))])]))}}),[[`__scopeId`,`data-v-cefefdc0`]]);const B={class:`c-image-cropper__body`},V={class:`c-image-cropper__workspace`},H={key:1,class:`c-image-cropper__placeholder`},U={key:0,class:`c-image-cropper__preview-panel`},W={key:1,class:`c-image-cropper`},G={class:`c-image-cropper__body`},K={class:`c-image-cropper__workspace`},q={key:1,class:`c-image-cropper__placeholder`},ee={key:0,class:`c-image-cropper__preview-panel`};var J=t(g({name:`C_ImageCropper`,__name:`index`,props:{src:{default:``},aspectRatio:{default:0},outputFormat:{default:`png`},outputQuality:{default:.92},maxOutputWidth:{default:0},maxOutputHeight:{default:0},showPreview:{type:Boolean,default:!0},showToolbar:{type:Boolean,default:!0},circular:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},height:{default:`400px`},modal:{type:Boolean,default:!1},modalTitle:{default:`图片裁剪`}},emits:[`crop`,`ready`,`error`,`confirm`,`cancel`],setup(t,{expose:r,emit:i}){let s=t,c=i,g=S(s.src),_=S(s.aspectRatio),y=S(!1),b=S(!1),C=S(null),w=S(null),A=S(null),M=l(()=>s.modal?A.value:w.value),N=l(()=>typeof s.height==`number`?`${s.height}px`:s.height),P=l(()=>({png:`png`,jpeg:`jpeg`,webp:`webp`})[s.outputFormat]||`png`),F=l(()=>_.value>0),I=l(()=>_.value<=0||_.value===1?[1,1]:Math.abs(_.value-16/9)<.01?[16,9]:Math.abs(_.value-4/3)<.01?[4,3]:Math.abs(_.value-3/2)<.01?[3,2]:[Math.round(_.value*100),100]),L=l(()=>({width:300,height:_.value>0?300/_.value:200})),R=[{label:`自由`,value:0},{label:`1:1`,value:1},{label:`16:9`,value:16/9},{label:`4:3`,value:4/3},{label:`3:2`,value:3/2}],J=k({format:l(()=>s.outputFormat),quality:l(()=>s.outputQuality),maxWidth:l(()=>s.maxOutputWidth),maxHeight:l(()=>s.maxOutputHeight)});E(M,e=>{J.cropperRef.value=e});function Y(e){C.value=e}function X(e){e===`success`&&c(`ready`)}function Z(e){J.rotate(e)}function Q(e){_.value=e}function $(){J.reset()}async function te(){b.value=!0;try{let e=await J.getCropResult();c(`confirm`,e),c(`crop`,e),y.value=!1}finally{b.value=!1}}function ne(){y.value=!1,c(`cancel`)}function re(e){let t=new FileReader;t.onload=e=>{g.value=e.target?.result},t.readAsDataURL(e)}return E(()=>s.src,e=>{g.value=e}),E(()=>s.aspectRatio,e=>{_.value=e}),r({getCropResult:J.getCropResult,rotate:J.rotate,zoom:J.zoom,flipX:J.flipX,flipY:J.flipY,reset:J.reset,setAspectRatio:e=>{_.value=e},loadFile:re,open:e=>{e&&(g.value=e),y.value=!0},close:()=>{y.value=!1}}),(t,r)=>s.modal?(x(),u(T(a),{key:0,show:y.value,"onUpdate:show":r[0]||=e=>y.value=e,preset:`card`,title:s.modalTitle||`图片裁剪`,style:{width:`860px`},"mask-closable":!1,closable:!0},{footer:D(()=>[h(T(o),{justify:`end`},{default:D(()=>[h(T(n),{onClick:ne},{default:D(()=>r[2]||=[m(`取消`,-1)]),_:1,__:[2]}),h(T(n),{type:`primary`,loading:b.value,onClick:te},{default:D(()=>r[3]||=[m(`确认裁剪`,-1)]),_:1,__:[3]},8,[`loading`])]),_:1})]),default:D(()=>[p(`div`,B,[s.showToolbar?(x(),u(j,{key:0,"current-ratio":_.value,"ratio-presets":R,onRatio:Q,onRotate:Z,onFlipX:T(J).flipX,onFlipY:T(J).flipY,onZoom:T(J).zoom,onReset:$},null,8,[`current-ratio`,`onFlipX`,`onFlipY`,`onZoom`])):d(`v-if`,!0),p(`div`,V,[p(`div`,{class:`c-image-cropper__canvas`,style:v({height:N.value})},[g.value?(x(),u(T(O),{key:0,ref_key:`modalCropperRef`,ref:A,img:g.value,"output-size":s.outputQuality,"output-type":P.value,"can-scale":!1,"auto-crop":!0,"auto-crop-width":L.value.width,"auto-crop-height":L.value.height,fixed:F.value,"fixed-number":I.value,"center-box":!0,info:!0,"info-true":!0,"can-move":!0,"can-move-box":!0,original:!1,high:!0,full:!1,mode:`contain`,onRealTime:Y,onImgLoad:X},null,8,[`img`,`output-size`,`output-type`,`auto-crop-width`,`auto-crop-height`,`fixed`,`fixed-number`])):(x(),f(`div`,H,[h(e,{name:`mdi:image-plus-outline`,style:{"font-size":`48px`,opacity:`0.3`}}),r[1]||=p(`span`,null,`请选择图片`,-1)]))],4),s.showPreview&&g.value?(x(),f(`div`,U,[h(z,{"preview-data":C.value,circular:s.circular},null,8,[`preview-data`,`circular`])])):d(`v-if`,!0)])])]),_:1},8,[`show`,`title`])):(x(),f(`div`,W,[p(`div`,G,[s.showToolbar?(x(),u(j,{key:0,"current-ratio":_.value,"ratio-presets":R,onRatio:Q,onRotate:Z,onFlipX:T(J).flipX,onFlipY:T(J).flipY,onZoom:T(J).zoom,onReset:$},null,8,[`current-ratio`,`onFlipX`,`onFlipY`,`onZoom`])):d(`v-if`,!0),p(`div`,K,[p(`div`,{class:`c-image-cropper__canvas`,style:v({height:N.value})},[g.value?(x(),u(T(O),{key:0,ref_key:`inlineCropperRef`,ref:w,img:g.value,"output-size":s.outputQuality,"output-type":P.value,"can-scale":!1,"auto-crop":!0,"auto-crop-width":L.value.width,"auto-crop-height":L.value.height,fixed:F.value,"fixed-number":I.value,"center-box":!0,info:!0,"info-true":!0,"can-move":!0,"can-move-box":!0,original:!1,high:!0,full:!1,mode:`contain`,onRealTime:Y,onImgLoad:X},null,8,[`img`,`output-size`,`output-type`,`auto-crop-width`,`auto-crop-height`,`fixed`,`fixed-number`])):(x(),f(`div`,q,[h(e,{name:`mdi:image-plus-outline`,style:{"font-size":`48px`,opacity:`0.3`}}),r[4]||=p(`span`,null,`请选择图片`,-1)]))],4),s.showPreview&&g.value?(x(),f(`div`,ee,[h(z,{"preview-data":C.value,circular:s.circular},null,8,[`preview-data`,`circular`])])):d(`v-if`,!0)])])]))}}),[[`__scopeId`,`data-v-296916a4`]]);export{k as n,J as t};
 //# sourceMappingURL=C_ImageCropper2.js.map

package/dist/C_ImageCropper2.js.map

@@ -1 +1 @@
-{"version":3,"file":"C_ImageCropper2.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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"}
+{"version":3,"file":"C_ImageCropper2.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/CropperPreview.vue","../src/components/C_ImageCropper/components/CropperPreview.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","<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","<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","<!--\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","<!--\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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"}

package/dist/C_Language.js.map

@@ -1 +1 @@
-{"version":3,"file":"C_Language.js","names":[],"sources":["../src/components/C_Language/index.vue"],"sourcesContent":["<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-11-19\n * @Description: 语言切换组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n  <NDropdown\n    size=\"small\"\n    trigger=\"hover\"\n    :options=\"finalOptions\"\n    :value=\"modelValue\"\n    @select=\"handleLanguageChange\"\n  >\n    <NButton text>\n      <div class=\"flex items-center\">\n        <C_Icon\n          name=\"mdi:language\"\n          :size=\"18\"\n          :title=\"tooltipText\"\n        />\n      </div>\n    </NButton>\n  </NDropdown>\n</template>\n\n<script setup lang=\"ts\">\n  import { computed, h } from 'vue'\n  import { NDropdown, NButton } from 'naive-ui'\n  import C_Icon from '../C_Icon/index.vue'\n\n  defineOptions({ name: 'C_Language' })\n\n  export interface LanguageOption {\n    key: string\n    label: string\n    iconClass?: string\n  }\n\n  const props = withDefaults(\n    defineProps<{\n      modelValue?: string\n      options?: LanguageOption[]\n      /** Tooltip 文案，默认 \"语言切换\" */\n      tooltip?: string\n    }>(),\n    {\n      modelValue: 'zh-cn',\n      tooltip: '语言切换',\n      options: () => [\n        { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\n        { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\n        { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\n        { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\n      ],\n    }\n  )\n\n  const emit = defineEmits<{\n    'update:modelValue': [key: string]\n    change: [key: string]\n  }>()\n\n  /** 当前语言显示名 */\n  const currentLabel = computed(() => {\n    const opt = props.options.find(o => o.key === props.modelValue)\n    return opt?.label ?? props.modelValue\n  })\n\n  const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\n\n  const finalOptions = computed(() =>\n    props.options.map(opt => ({\n      key: opt.key,\n      label: opt.label,\n      icon: opt.iconClass\n        ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\n        : undefined,\n    }))\n  )\n\n  const handleLanguageChange = (key: string) => {\n    if (key === props.modelValue) return\n    emit('update:modelValue', key)\n    emit('change', key)\n  }\n</script>\n"],"mappings":"+gBAwCE,IAAM,EAAQ,EAmBR,EAAO,EAMP,GAAA,EAAA,EAAA,cACQ,EAAM,QAAQ,KAAK,GAAK,EAAE,MAAQ,EAAM,WAAU,EAClD,OAAS,EAAM,WAC5B,CAEK,GAAA,EAAA,EAAA,cAA6B,GAAG,EAAM,QAAQ,IAAI,EAAa,MAAM,GAAE,CAEvE,GAAA,EAAA,EAAA,cACJ,EAAM,QAAQ,IAAI,IAAQ,CACxB,IAAK,EAAI,IACT,MAAO,EAAI,MACX,KAAM,EAAI,eAAA,EAAA,EAAA,GACE,EAAA,EAAQ,CAAE,KAAM,EAAI,UAAW,KAAM,GAAI,CAAA,CACjD,IAAA,GACL,EAAC,CACJ,CAEM,EAAwB,GAAgB,CACxC,IAAQ,EAAM,aAClB,EAAK,oBAAqB,EAAG,CAC7B,EAAK,SAAU,EAAG,iEA7DT,EAAA,UAAA,CAAA,CAfT,KAAK,QACL,QAAQ,QACP,QAAS,EAAA,MACT,MAAO,EAAA,WACP,SAAQ,8BAUA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,QAAA,CAAA,CARA,KAAA,GAAI,CAAA,2BAON,EAAA,EAAA,EAAA,oBAAA,MANL,EAMK,EAAA,EAAA,EAAA,aADF,EAAA,EAAA,CAHC,KAAK,eACJ,KAAM,GACN,MAAO,EAAA"}
+{"version":3,"file":"C_Language.js","names":["modelValue"],"sources":["../src/components/C_Language/index.vue","../src/components/C_Language/index.vue"],"sourcesContent":["<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-11-19\n * @Description: 语言切换组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n  <NDropdown\n    size=\"small\"\n    trigger=\"hover\"\n    :options=\"finalOptions\"\n    :value=\"modelValue\"\n    @select=\"handleLanguageChange\"\n  >\n    <NButton text>\n      <div class=\"flex items-center\">\n        <C_Icon\n          name=\"mdi:language\"\n          :size=\"18\"\n          :title=\"tooltipText\"\n        />\n      </div>\n    </NButton>\n  </NDropdown>\n</template>\n\n<script setup lang=\"ts\">\n  import { computed, h } from 'vue'\n  import { NDropdown, NButton } from 'naive-ui'\n  import C_Icon from '../C_Icon/index.vue'\n\n  defineOptions({ name: 'C_Language' })\n\n  export interface LanguageOption {\n    key: string\n    label: string\n    iconClass?: string\n  }\n\n  const props = withDefaults(\n    defineProps<{\n      modelValue?: string\n      options?: LanguageOption[]\n      /** Tooltip 文案，默认 \"语言切换\" */\n      tooltip?: string\n    }>(),\n    {\n      modelValue: 'zh-cn',\n      tooltip: '语言切换',\n      options: () => [\n        { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\n        { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\n        { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\n        { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\n      ],\n    }\n  )\n\n  const emit = defineEmits<{\n    'update:modelValue': [key: string]\n    change: [key: string]\n  }>()\n\n  /** 当前语言显示名 */\n  const currentLabel = computed(() => {\n    const opt = props.options.find(o => o.key === props.modelValue)\n    return opt?.label ?? props.modelValue\n  })\n\n  const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\n\n  const finalOptions = computed(() =>\n    props.options.map(opt => ({\n      key: opt.key,\n      label: opt.label,\n      icon: opt.iconClass\n        ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\n        : undefined,\n    }))\n  )\n\n  const handleLanguageChange = (key: string) => {\n    if (key === props.modelValue) return\n    emit('update:modelValue', key)\n    emit('change', key)\n  }\n</script>\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-11-19\n * @Description: 语言切换组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n  <NDropdown\n    size=\"small\"\n    trigger=\"hover\"\n    :options=\"finalOptions\"\n    :value=\"modelValue\"\n    @select=\"handleLanguageChange\"\n  >\n    <NButton text>\n      <div class=\"flex items-center\">\n        <C_Icon\n          name=\"mdi:language\"\n          :size=\"18\"\n          :title=\"tooltipText\"\n        />\n      </div>\n    </NButton>\n  </NDropdown>\n</template>\n\n<script setup lang=\"ts\">\n  import { computed, h } from 'vue'\n  import { NDropdown, NButton } from 'naive-ui'\n  import C_Icon from '../C_Icon/index.vue'\n\n  defineOptions({ name: 'C_Language' })\n\n  export interface LanguageOption {\n    key: string\n    label: string\n    iconClass?: string\n  }\n\n  const props = withDefaults(\n    defineProps<{\n      modelValue?: string\n      options?: LanguageOption[]\n      /** Tooltip 文案，默认 \"语言切换\" */\n      tooltip?: string\n    }>(),\n    {\n      modelValue: 'zh-cn',\n      tooltip: '语言切换',\n      options: () => [\n        { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\n        { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\n        { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\n        { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\n      ],\n    }\n  )\n\n  const emit = defineEmits<{\n    'update:modelValue': [key: string]\n    change: [key: string]\n  }>()\n\n  /** 当前语言显示名 */\n  const currentLabel = computed(() => {\n    const opt = props.options.find(o => o.key === props.modelValue)\n    return opt?.label ?? props.modelValue\n  })\n\n  const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\n\n  const finalOptions = computed(() =>\n    props.options.map(opt => ({\n      key: opt.key,\n      label: opt.label,\n      icon: opt.iconClass\n        ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\n        : undefined,\n    }))\n  )\n\n  const handleLanguageChange = (key: string) => {\n    if (key === props.modelValue) return\n    emit('update:modelValue', key)\n    emit('change', key)\n  }\n</script>\n"],"mappings":"+gBAwCE,IAAM,EAAQ,EAmBR,EAAO,EAMP,GAAA,EAAA,EAAA,cACQ,EAAM,QAAQ,KAAK,GAAK,EAAE,MAAQ,EAAM,WAAU,EAClD,OAAS,EAAM,WAC5B,CAEK,GAAA,EAAA,EAAA,cAA6B,GAAG,EAAM,QAAQ,IAAI,EAAa,MAAM,GAAE,CAEvE,GAAA,EAAA,EAAA,cACJ,EAAM,QAAQ,IAAI,IAAQ,CACxB,IAAK,EAAI,IACT,MAAO,EAAI,MACX,KAAM,EAAI,eAAA,EAAA,EAAA,GACE,EAAA,EAAQ,CAAE,KAAM,EAAI,UAAW,KAAM,GAAI,CAAA,CACjD,IAAA,GACL,EAAC,CACJ,CAEM,EAAwB,GAAgB,CACxC,IAAQ,EAAM,aAClB,EAAK,oBAAqB,EAAG,CAC7B,EAAK,SAAU,EAAG,iEC7DR,EAAA,UAAA,CAAA,CAfV,KAAK,QACL,QAAQ,QACP,QAAS,EAAA,MACT,MAAOA,EAAAA,WACP,SAAQ,8BAUC,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,QAAA,CAAA,CARD,KAAA,GAAI,CAAA,2BAOL,EAAA,EAAA,EAAA,oBAAA,MANN,EAMM,EAAA,EAAA,EAAA,aADF,EAAA,EAAA,CAHA,KAAK,eACJ,KAAM,GACN,MAAO,EAAA"}

package/dist/C_Language2.js

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

package/dist/C_Language2.js.map

@@ -1 +1 @@
-{"version":3,"file":"C_Language2.js","names":[],"sources":["../src/components/C_Language/index.vue"],"sourcesContent":["<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-11-19\n * @Description: 语言切换组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n  <NDropdown\n    size=\"small\"\n    trigger=\"hover\"\n    :options=\"finalOptions\"\n    :value=\"modelValue\"\n    @select=\"handleLanguageChange\"\n  >\n    <NButton text>\n      <div class=\"flex items-center\">\n        <C_Icon\n          name=\"mdi:language\"\n          :size=\"18\"\n          :title=\"tooltipText\"\n        />\n      </div>\n    </NButton>\n  </NDropdown>\n</template>\n\n<script setup lang=\"ts\">\n  import { computed, h } from 'vue'\n  import { NDropdown, NButton } from 'naive-ui'\n  import C_Icon from '../C_Icon/index.vue'\n\n  defineOptions({ name: 'C_Language' })\n\n  export interface LanguageOption {\n    key: string\n    label: string\n    iconClass?: string\n  }\n\n  const props = withDefaults(\n    defineProps<{\n      modelValue?: string\n      options?: LanguageOption[]\n      /** Tooltip 文案，默认 \"语言切换\" */\n      tooltip?: string\n    }>(),\n    {\n      modelValue: 'zh-cn',\n      tooltip: '语言切换',\n      options: () => [\n        { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\n        { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\n        { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\n        { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\n      ],\n    }\n  )\n\n  const emit = defineEmits<{\n    'update:modelValue': [key: string]\n    change: [key: string]\n  }>()\n\n  /** 当前语言显示名 */\n  const currentLabel = computed(() => {\n    const opt = props.options.find(o => o.key === props.modelValue)\n    return opt?.label ?? props.modelValue\n  })\n\n  const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\n\n  const finalOptions = computed(() =>\n    props.options.map(opt => ({\n      key: opt.key,\n      label: opt.label,\n      icon: opt.iconClass\n        ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\n        : undefined,\n    }))\n  )\n\n  const handleLanguageChange = (key: string) => {\n    if (key === props.modelValue) return\n    emit('update:modelValue', key)\n    emit('change', key)\n  }\n</script>\n"],"mappings":"0oBAwCE,IAAM,EAAQ,EAmBR,EAAO,EAMP,EAAe,MACP,EAAM,QAAQ,KAAK,GAAK,EAAE,MAAQ,EAAM,WAAU,EAClD,OAAS,EAAM,WAC5B,CAEK,EAAc,MAAe,GAAG,EAAM,QAAQ,IAAI,EAAa,MAAM,GAAE,CAEvE,EAAe,MACnB,EAAM,QAAQ,IAAI,IAAQ,CACxB,IAAK,EAAI,IACT,MAAO,EAAI,MACX,KAAM,EAAI,cACA,EAAE,EAAQ,CAAE,KAAM,EAAI,UAAW,KAAM,GAAI,CAAA,CACjD,IAAA,GACL,EAAC,CACJ,CAEM,EAAwB,GAAgB,CACxC,IAAQ,EAAM,aAClB,EAAK,oBAAqB,EAAG,CAC7B,EAAK,SAAU,EAAG,qBA7EpB,EAgBW,EAAA,EAAA,CAAA,CAfT,KAAK,QACL,QAAQ,QACP,QAAS,EAAA,MACT,MAAO,EAAA,WACP,SAAQ,kBAUA,CART,EAQS,EAAA,EAAA,CAAA,CARA,KAAA,GAAI,CAAA,eAON,CANL,EAMK,MANL,EAMK,CALH,EAIC,EAAA,CAHC,KAAK,eACJ,KAAM,GACN,MAAO,EAAA"}
+{"version":3,"file":"C_Language2.js","names":["modelValue"],"sources":["../src/components/C_Language/index.vue","../src/components/C_Language/index.vue"],"sourcesContent":["<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-11-19\n * @Description: 语言切换组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n  <NDropdown\n    size=\"small\"\n    trigger=\"hover\"\n    :options=\"finalOptions\"\n    :value=\"modelValue\"\n    @select=\"handleLanguageChange\"\n  >\n    <NButton text>\n      <div class=\"flex items-center\">\n        <C_Icon\n          name=\"mdi:language\"\n          :size=\"18\"\n          :title=\"tooltipText\"\n        />\n      </div>\n    </NButton>\n  </NDropdown>\n</template>\n\n<script setup lang=\"ts\">\n  import { computed, h } from 'vue'\n  import { NDropdown, NButton } from 'naive-ui'\n  import C_Icon from '../C_Icon/index.vue'\n\n  defineOptions({ name: 'C_Language' })\n\n  export interface LanguageOption {\n    key: string\n    label: string\n    iconClass?: string\n  }\n\n  const props = withDefaults(\n    defineProps<{\n      modelValue?: string\n      options?: LanguageOption[]\n      /** Tooltip 文案，默认 \"语言切换\" */\n      tooltip?: string\n    }>(),\n    {\n      modelValue: 'zh-cn',\n      tooltip: '语言切换',\n      options: () => [\n        { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\n        { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\n        { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\n        { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\n      ],\n    }\n  )\n\n  const emit = defineEmits<{\n    'update:modelValue': [key: string]\n    change: [key: string]\n  }>()\n\n  /** 当前语言显示名 */\n  const currentLabel = computed(() => {\n    const opt = props.options.find(o => o.key === props.modelValue)\n    return opt?.label ?? props.modelValue\n  })\n\n  const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\n\n  const finalOptions = computed(() =>\n    props.options.map(opt => ({\n      key: opt.key,\n      label: opt.label,\n      icon: opt.iconClass\n        ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\n        : undefined,\n    }))\n  )\n\n  const handleLanguageChange = (key: string) => {\n    if (key === props.modelValue) return\n    emit('update:modelValue', key)\n    emit('change', key)\n  }\n</script>\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-11-19\n * @Description: 语言切换组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n  <NDropdown\n    size=\"small\"\n    trigger=\"hover\"\n    :options=\"finalOptions\"\n    :value=\"modelValue\"\n    @select=\"handleLanguageChange\"\n  >\n    <NButton text>\n      <div class=\"flex items-center\">\n        <C_Icon\n          name=\"mdi:language\"\n          :size=\"18\"\n          :title=\"tooltipText\"\n        />\n      </div>\n    </NButton>\n  </NDropdown>\n</template>\n\n<script setup lang=\"ts\">\n  import { computed, h } from 'vue'\n  import { NDropdown, NButton } from 'naive-ui'\n  import C_Icon from '../C_Icon/index.vue'\n\n  defineOptions({ name: 'C_Language' })\n\n  export interface LanguageOption {\n    key: string\n    label: string\n    iconClass?: string\n  }\n\n  const props = withDefaults(\n    defineProps<{\n      modelValue?: string\n      options?: LanguageOption[]\n      /** Tooltip 文案，默认 \"语言切换\" */\n      tooltip?: string\n    }>(),\n    {\n      modelValue: 'zh-cn',\n      tooltip: '语言切换',\n      options: () => [\n        { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\n        { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\n        { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\n        { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\n      ],\n    }\n  )\n\n  const emit = defineEmits<{\n    'update:modelValue': [key: string]\n    change: [key: string]\n  }>()\n\n  /** 当前语言显示名 */\n  const currentLabel = computed(() => {\n    const opt = props.options.find(o => o.key === props.modelValue)\n    return opt?.label ?? props.modelValue\n  })\n\n  const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\n\n  const finalOptions = computed(() =>\n    props.options.map(opt => ({\n      key: opt.key,\n      label: opt.label,\n      icon: opt.iconClass\n        ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\n        : undefined,\n    }))\n  )\n\n  const handleLanguageChange = (key: string) => {\n    if (key === props.modelValue) return\n    emit('update:modelValue', key)\n    emit('change', key)\n  }\n</script>\n"],"mappings":"0oBAwCE,IAAM,EAAQ,EAmBR,EAAO,EAMP,EAAe,MACP,EAAM,QAAQ,KAAK,GAAK,EAAE,MAAQ,EAAM,WAAU,EAClD,OAAS,EAAM,WAC5B,CAEK,EAAc,MAAe,GAAG,EAAM,QAAQ,IAAI,EAAa,MAAM,GAAE,CAEvE,EAAe,MACnB,EAAM,QAAQ,IAAI,IAAQ,CACxB,IAAK,EAAI,IACT,MAAO,EAAI,MACX,KAAM,EAAI,cACA,EAAE,EAAQ,CAAE,KAAM,EAAI,UAAW,KAAM,GAAI,CAAA,CACjD,IAAA,GACL,EAAC,CACJ,CAEM,EAAwB,GAAgB,CACxC,IAAQ,EAAM,aAClB,EAAK,oBAAqB,EAAG,CAC7B,EAAK,SAAU,EAAG,qBC7EpB,EAgBY,EAAA,EAAA,CAAA,CAfV,KAAK,QACL,QAAQ,QACP,QAAS,EAAA,MACT,MAAOA,EAAAA,WACP,SAAQ,kBAUC,CARV,EAQU,EAAA,EAAA,CAAA,CARD,KAAA,GAAI,CAAA,eAOL,CANN,EAMM,MANN,EAMM,CALJ,EAIE,EAAA,CAHA,KAAK,eACJ,KAAM,GACN,MAAO,EAAA"}