foucui 1.0.1 → 1.0.2

package/components/QiuUploadCrop/index.vue

@@ -1,1267 +0,0 @@
-<template>
-  <div class="qiu-upload-crop" :class="{ 'is-disabled': disabled }">
-    <!-- 触发区 -->
-    <div
-      v-if="!hasImage && !cropping"
-      class="qiu-upload-crop__trigger"
-      :style="boxStyle"
-      @click="openPicker"
-      @dragover.prevent="onDragOver"
-      @dragleave.prevent="onDragLeave"
-      @drop.prevent="onDrop"
-    >
-      <input
-        ref="inputRef"
-        class="qiu-upload-crop__input"
-        type="file"
-        :accept="accept"
-        :disabled="disabled"
-        @change="onInputChange"
-      />
-      <qiu-icon icon="image-add-line" class="qiu-upload-crop__trigger-icon" />
-      <p class="qiu-upload-crop__trigger-text">{{ buttonText }}</p>
-      <p v-if="tip" class="qiu-upload-crop__tip">{{ tip }}</p>
-    </div>
-
-    <!-- 结果预览区 -->
-    <div
-      v-else-if="!cropping && result"
-      class="qiu-upload-crop__result"
-      :style="boxStyle"
-      @mouseenter="hover = true"
-      @mouseleave="hover = false"
-    >
-      <img :src="result" class="qiu-upload-crop__result-img" alt="" :style="resultImgStyle" />
-      <div v-show="hover" class="qiu-upload-crop__mask">
-        <button type="button" :disabled="disabled" title="重新裁切" @click="cropping = true">
-          <qiu-icon icon="crop-line" />
-        </button>
-        <button type="button" :disabled="disabled" title="查看原图" @click="previewVisible = true">
-          <qiu-icon icon="zoom-in-line" />
-        </button>
-        <button type="button" :disabled="disabled" title="删除" @click="remove">
-          <qiu-icon icon="delete-bin-line" />
-        </button>
-      </div>
-    </div>
-
-    <!-- 裁剪弹窗 -->
-    <teleport to="body">
-      <div v-if="cropping" class="qiu-upload-crop__dialog" @click.self="onShadeClick">
-        <div class="qiu-upload-crop__dialog-box">
-          <div class="qiu-upload-crop__dialog-head">
-            <span>图片裁剪</span>
-            <button type="button" class="qiu-upload-crop__close" @click="cancel">×</button>
-          </div>
-
-          <div
-            ref="stageRef"
-            class="qiu-upload-crop__stage"
-            @wheel.prevent="onWheel"
-            @mousedown="onStageDown"
-          >
-            <img
-              ref="imgRef"
-              :src="source"
-              class="qiu-upload-crop__source"
-              :style="sourceStyle"
-              alt=""
-              draggable="false"
-            />
-            <div
-              class="qiu-upload-crop__crop"
-              :class="{ 'is-round': shape === 'round' }"
-              :style="cropBoxStyle"
-              @mousedown.stop="onCropDown"
-            >
-              <span
-                v-for="h in handles"
-                :key="h"
-                class="qiu-upload-crop__handle"
-                :class="`qiu-upload-crop__handle--${h}`"
-                @mousedown.stop="onHandleDown($event, h)"
-              />
-            </div>
-          </div>
-
-          <div class="qiu-upload-crop__toolbar">
-            <button
-              v-if="showRotate"
-              type="button"
-              title="左转"
-              @click="rotateBy(-90)"
-            >
-              <qiu-icon icon="anticlockwise-line" />
-            </button>
-            <button
-              v-if="showRotate"
-              type="button"
-              title="右转"
-              @click="rotateBy(90)"
-            >
-              <qiu-icon icon="clockwise-line" />
-            </button>
-
-            <button v-if="showFlip" type="button" title="水平翻转" @click="flipX = -flipX">
-              <qiu-icon icon="flip-h-line" />
-            </button>
-            <button v-if="showFlip" type="button" title="垂直翻转" @click="flipY = -flipY">
-              <qiu-icon icon="flip-v-line" />
-            </button>
-            <button
-              v-if="showZoom"
-              type="button"
-              title="放大"
-              @click="scale = Math.min(5, +(scale + 0.1).toFixed(2))"
-            >
-              <qiu-icon icon="zoom-in-line" />
-            </button>
-            <button
-              v-if="showZoom"
-              type="button"
-              title="缩小"
-              @click="scale = Math.max(0.1, +(scale - 0.1).toFixed(2))"
-            >
-              <qiu-icon icon="zoom-out-line" />
-            </button>
-            <button type="button" title="重置" @click="reset">
-              <qiu-icon icon="refresh-line" />
-            </button>
-
-            <template v-if="showSizeInputs">
-              <span class="qiu-upload-crop__divider" />
-
-              <label class="qiu-upload-crop__field">
-                <span>宽</span>
-                <input
-                  v-model.number="cropWInput"
-                  type="number"
-                  min="20"
-                  @change="applyCropSize('w')"
-                />
-              </label>
-              <label class="qiu-upload-crop__field">
-                <span>高</span>
-                <input
-                  v-model.number="cropHInput"
-                  type="number"
-                  min="20"
-                  @change="applyCropSize('h')"
-                />
-              </label>
-              <button type="button" title="应用尺寸" @click="applyCropSize()">应用</button>
-            </template>
-
-            <span class="qiu-upload-crop__divider" />
-
-            <label class="qiu-upload-crop__quality">
-              <span>质量 {{ quality }}</span>
-              <input v-model.number="quality" type="range" min="0.1" max="1" step="0.1" />
-            </label>
-
-            <slot name="toolbar" />
-
-            <span class="qiu-upload-crop__divider" />
-
-            <button type="button" class="qiu-upload-crop__confirm" @click="confirm">确定</button>
-          </div>
-        </div>
-      </div>
-
-      <div v-if="previewVisible" class="qiu-upload-crop__preview" @click="previewVisible = false">
-        <img :src="result || source" alt="" />
-      </div>
-    </teleport>
-  </div>
-</template>
-
-<script lang="ts" setup>
-/**
- * QiuUploadCrop — 图片上传 + Canvas 裁剪（自研，无第三方裁剪依赖）
- * 输出 base64（v-model）与 cropper-file 事件（可拿 File 直接上传）
- * 支持 fixedAspect 比例锁定、90° 旋转预览并在确认时烘焙进画布
- *
- * @author qiuye
- * @email yjk150@qq.com
- * @date 2026-08-16
- */
-defineOptions({ name: 'QiuUploadCrop' })
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: string
-    /** 组件展示宽高（px） */
-    width?: number
-    height?: number
-    /** 允许上传的图片类型后缀 */
-    type?: string[]
-    /** 文件大小上限（MB） */
-    size?: number
-    disabled?: boolean
-    buttonText?: string
-    tip?: string
-    /** 裁剪框形状 */
-    shape?: 'rect' | 'round'
-    /** 是否允许 round 时输出圆形（裁切透明背景） */
-    circleOutput?: boolean
-    /** 点击遮罩是否关闭（不保存） */
-    shadeClose?: boolean
-    /** 输出图片格式 */
-    outputType?: 'image/png' | 'image/jpeg' | 'image/webp'
-    accept?: string
-    /** 输出图片质量 0.1~1（控制体积，便于存储） */
-    outputQuality?: number
-    /** 输出原图裁切结果的目标宽高（px）；0 表示按裁剪框自然尺寸 */
-    outputWidth?: number
-    outputHeight?: number
-    /** 是否同时输出缩略图 */
-    withThumbnail?: boolean
-    /** 缩略图边长（px） */
-    thumbnailSize?: number
-    /** 是否同时输出圆形头像 */
-    withAvatar?: boolean
-    /** 头像边长（px） */
-    avatarSize?: number
-    /** 初始裁剪框宽（px），0 表示自适应 */
-    cropInitWidth?: number
-    /** 初始裁剪框高（px），0 表示自适应 */
-    cropInitHeight?: number
-    /** 裁剪框缩放时是否锁定宽高比 */
-    fixedAspect?: boolean
-    /**
-     * 宽/高比。支持 number（如 3.2）或字符串 `"16:5"` / `"16/5"`。
-     * 为 0 且 fixedAspect 时从 cropInit / output 尺寸推导，否则为 1。
-     */
-    aspectRatio?: number | string
-    /** 工具栏：旋转按钮 */
-    showRotate?: boolean
-    /** 工具栏：翻转按钮 */
-    showFlip?: boolean
-    /** 工具栏：缩放按钮 */
-    showZoom?: boolean
-    /** 工具栏：宽高输入 */
-    showSizeInputs?: boolean
-  }>(),
-  {
-    modelValue: '',
-    width: 178,
-    height: 178,
-    type: () => ['png', 'jpg', 'jpeg'],
-    size: 5,
-    disabled: false,
-    buttonText: '上传图片',
-    tip: '',
-    shape: 'rect',
-    circleOutput: false,
-    shadeClose: true,
-    outputType: 'image/jpeg',
-    accept: 'image/*',
-    outputQuality: 0.92,
-    outputWidth: 0,
-    outputHeight: 0,
-    withThumbnail: false,
-    thumbnailSize: 120,
-    withAvatar: false,
-    avatarSize: 160,
-    cropInitWidth: 0,
-    cropInitHeight: 0,
-    fixedAspect: false,
-    aspectRatio: 0,
-    showRotate: true,
-    showFlip: true,
-    showZoom: true,
-    showSizeInputs: true,
-  }
-)
-
-const emit = defineEmits<{
-  'update:modelValue': [string]
-  change: [string]
-  /** 裁剪原图结果 base64 */
-  'cropper-image': [string]
-  /** 缩略图 base64 */
-  'cropper-thumbnail': [string]
-  /** 圆形头像 base64 */
-  'cropper-avatar': [string]
-  /** 一次性返回全部结果 */
-  'cropper-result': [{
-    image: string
-    thumbnail: string
-    avatar: string
-  }]
-  'cropper-file': [File]
-  remove: []
-  error: [string]
-}>()
-
-const inputRef = ref<HTMLInputElement | null>(null)
-const stageRef = ref<HTMLElement | null>(null)
-const imgRef = ref<HTMLImageElement | null>(null)
-
-const hover = ref(false)
-const cropping = ref(false)
-const previewVisible = ref(false)
-
-const source = ref('') // 原图 base64
-const result = ref(props.modelValue)
-const hasImage = computed(() => !!result.value)
-
-// 画布内图片变换
-const scale = ref(1)
-const flipX = ref(1)
-const flipY = ref(1)
-/** 预览旋转角（0 / 90 / 180 / 270），确认时烘焙进 canvas */
-const rotateDeg = ref(0)
-const offsetX = ref(0)
-const offsetY = ref(0)
-
-// 裁剪框（相对 stage 坐标）
-const cropX = ref(0)
-const cropY = ref(0)
-const cropW = ref(0)
-const cropH = ref(0)
-const cropWInput = ref(0)
-const cropHInput = ref(0)
-
-const quality = ref(props.outputQuality)
-
-/** 解析 aspectRatio：number 或 `"16:5"` / `"16/5"` */
-const parseAspectRatio = (v: number | string | undefined): number => {
-  if (v === undefined || v === null || v === '') return 0
-  if (typeof v === 'number') return Number.isFinite(v) && v > 0 ? v : 0
-  const s = String(v).trim()
-  if (!s) return 0
-  const sep = s.includes(':') ? ':' : s.includes('/') ? '/' : ''
-  if (sep) {
-    const [a, b] = s.split(sep).map((x) => Number(x.trim()))
-    if (Number.isFinite(a) && Number.isFinite(b) && b !== 0) return a / b
-    return 0
-  }
-  const n = Number(s)
-  return Number.isFinite(n) && n > 0 ? n : 0
-}
-
-/** 解析后的 W/H；fixedAspect 且未显式给出时按 cropInit → output → 1 回退 */
-const resolvedAspect = computed(() => {
-  const parsed = parseAspectRatio(props.aspectRatio)
-  if (parsed > 0) return parsed
-  if (props.cropInitWidth > 0 && props.cropInitHeight > 0) {
-    return props.cropInitWidth / props.cropInitHeight
-  }
-  if (props.outputWidth > 0 && props.outputHeight > 0) {
-    return props.outputWidth / props.outputHeight
-  }
-  return 1
-})
-
-const boxStyle = computed(() => ({
-  width: `${props.width}px`,
-  height: `${props.height}px`,
-}))
-
-const resultImgStyle = computed(() => {
-  if (props.shape === 'round' || props.circleOutput) return { borderRadius: '50%' }
-  return {}
-})
-
-const sourceStyle = computed(() => ({
-  transform: `translate(${offsetX.value}px, ${offsetY.value}px) scale(${scale.value}) rotate(${rotateDeg.value}deg) scaleX(${flipX.value}) scaleY(${flipY.value})`,
-}))
-
-const cropBoxStyle = computed(() => ({
-  left: `${cropX.value}px`,
-  top: `${cropY.value}px`,
-  width: `${cropW.value}px`,
-  height: `${cropH.value}px`,
-}))
-
-const handles = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w']
-
-const fileExt = (name: string) => (name.split('.').pop() || '').toLowerCase()
-const isAllowed = (name: string) => {
-  const ext = fileExt(name)
-  return props.type.includes(ext)
-}
-
-const openPicker = () => {
-  if (props.disabled) return
-  inputRef.value?.click()
-}
-const onDragOver = () => {
-  if (!props.disabled) stageRef.value?.classList.add('is-dragover')
-}
-const onDragLeave = () => stageRef.value?.classList.remove('is-dragover')
-const onDrop = (e: DragEvent) => {
-  stageRef.value?.classList.remove('is-dragover')
-  if (props.disabled) return
-  const file = e.dataTransfer?.files?.[0]
-  if (file) handleFile(file)
-}
-
-const onInputChange = (e: Event) => {
-  const input = e.target as HTMLInputElement
-  const file = input.files?.[0]
-  input.value = ''
-  if (file) handleFile(file)
-}
-
-const handleFile = (file: File) => {
-  if (!file.type.startsWith('image/')) {
-    emit('error', '仅支持图片文件')
-    return
-  }
-  if (!isAllowed(file.name)) {
-    emit('error', `不支持的格式，仅允许：${props.type.join('/')}`)
-    return
-  }
-  if (file.size > props.size * 1024 * 1024) {
-    emit('error', `文件超过 ${props.size}MB 限制`)
-    return
-  }
-  const reader = new FileReader()
-  reader.onload = () => {
-    source.value = reader.result as string
-    cropping.value = true
-    nextTick(initCrop)
-  }
-  reader.readAsDataURL(file)
-}
-
-/** 在 stage 内按宽高比生成居中裁剪框尺寸 */
-const fitAspectBox = (stageW: number, stageH: number, ratio: number, preferW: number, preferH: number) => {
-  let w = preferW
-  let h = preferH
-  if (w <= 0 && h <= 0) {
-    const maxW = stageW * 0.7
-    const maxH = stageH * 0.7
-    if (maxW / maxH > ratio) {
-      h = maxH
-      w = h * ratio
-    } else {
-      w = maxW
-      h = w / ratio
-    }
-  } else if (w > 0 && h <= 0) {
-    w = Math.min(w, stageW)
-    h = w / ratio
-    if (h > stageH) {
-      h = stageH
-      w = h * ratio
-    }
-  } else if (h > 0 && w <= 0) {
-    h = Math.min(h, stageH)
-    w = h * ratio
-    if (w > stageW) {
-      w = stageW
-      h = w / ratio
-    }
-  } else {
-    // 两者都给了：以宽为基准再夹紧
-    w = Math.min(w, stageW)
-    h = w / ratio
-    if (h > stageH) {
-      h = Math.min(preferH, stageH)
-      w = h * ratio
-      if (w > stageW) {
-        w = stageW
-        h = w / ratio
-      }
-    }
-  }
-  w = Math.max(20, Math.min(w, stageW))
-  h = Math.max(20, Math.min(w / ratio, stageH))
-  w = Math.max(20, Math.min(h * ratio, stageW))
-  h = w / ratio
-  return { w, h }
-}
-
-const initCrop = () => {
-  const stage = stageRef.value
-  if (!stage) return
-  const rect = stage.getBoundingClientRect()
-  // 让原图适配 stage
-  const img = new Image()
-  img.onload = () => {
-    const fit = Math.min(rect.width / img.width, rect.height / img.height, 1)
-    const w = img.width * fit
-    const h = img.height * fit
-    scale.value = fit
-    flipX.value = 1
-    flipY.value = 1
-    rotateDeg.value = 0
-    offsetX.value = (rect.width - w) / 2
-    offsetY.value = (rect.height - h) / 2
-
-    if (props.fixedAspect) {
-      const ratio = resolvedAspect.value
-      const preferW = props.cropInitWidth > 0 ? props.cropInitWidth : 0
-      const preferH = props.cropInitHeight > 0 ? props.cropInitHeight : 0
-      const box = fitAspectBox(rect.width, rect.height, ratio, preferW, preferH)
-      cropW.value = box.w
-      cropH.value = box.h
-    } else {
-      // 裁剪框默认取中心正方形 / 自由矩形
-      const side = Math.min(rect.width, rect.height) * 0.7
-      const initW = props.cropInitWidth > 0 ? Math.min(props.cropInitWidth, rect.width) : side
-      const initH = props.cropInitHeight > 0 ? Math.min(props.cropInitHeight, rect.height) : side
-      cropW.value = props.shape === 'round' ? Math.min(initW, initH) : Math.min(initW, w)
-      cropH.value = props.shape === 'round' ? Math.min(initW, initH) : Math.min(initH, h)
-    }
-    cropX.value = (rect.width - cropW.value) / 2
-    cropY.value = (rect.height - cropH.value) / 2
-    syncCropInput()
-  }
-  img.src = source.value
-}
-
-const syncCropInput = () => {
-  cropWInput.value = Math.round(cropW.value)
-  cropHInput.value = Math.round(cropH.value)
-}
-
-const clampCropBox = (nx: number, ny: number, nw: number, nh: number, stageW: number, stageH: number) => {
-  let w = Math.max(20, Math.min(nw, stageW))
-  let h = Math.max(20, Math.min(nh, stageH))
-  let x = Math.max(0, Math.min(nx, stageW - w))
-  let y = Math.max(0, Math.min(ny, stageH - h))
-  if (x + w > stageW) {
-    w = stageW - x
-  }
-  if (y + h > stageH) {
-    h = stageH - y
-  }
-  return { x, y, w: Math.max(20, w), h: Math.max(20, h) }
-}
-
-/** dim: 用户改了宽或高时，fixedAspect 下联动另一边 */
-const applyCropSize = (dim?: 'w' | 'h') => {
-  const stage = stageRef.value
-  if (!stage) return
-  const rect = stage.getBoundingClientRect()
-  let w = Math.max(20, cropWInput.value || cropW.value)
-  let h = Math.max(20, cropHInput.value || cropH.value)
-
-  if (props.fixedAspect) {
-    const ratio = resolvedAspect.value
-    if (dim === 'h') {
-      w = h * ratio
-    } else {
-      // 改宽或点「应用」：以宽为准
-      h = w / ratio
-    }
-    // 夹紧进 stage，保持比例
-    if (w > rect.width) {
-      w = rect.width
-      h = w / ratio
-    }
-    if (h > rect.height) {
-      h = rect.height
-      w = h * ratio
-    }
-    w = Math.max(20, w)
-    h = Math.max(20, h)
-  } else {
-    w = Math.max(20, Math.min(w, rect.width))
-    h = Math.max(20, Math.min(h, rect.height))
-  }
-
-  const clamped = clampCropBox(cropX.value, cropY.value, w, h, rect.width, rect.height)
-  if (props.fixedAspect) {
-    const ratio = resolvedAspect.value
-    let cw = clamped.w
-    let ch = cw / ratio
-    if (ch > rect.height) {
-      ch = Math.min(clamped.h, rect.height)
-      cw = ch * ratio
-    }
-    const final = clampCropBox(clamped.x, clamped.y, cw, ch, rect.width, rect.height)
-    // 再一次比例校正
-    let fw = final.w
-    let fh = fw / ratio
-    if (final.y + fh > rect.height) {
-      fh = rect.height - final.y
-      fw = fh * ratio
-    }
-    if (final.x + fw > rect.width) {
-      fw = rect.width - final.x
-      fh = fw / ratio
-    }
-    cropX.value = Math.max(0, Math.min(final.x, rect.width - fw))
-    cropY.value = Math.max(0, Math.min(final.y, rect.height - fh))
-    cropW.value = Math.max(20, fw)
-    cropH.value = Math.max(20, fh)
-  } else {
-    cropX.value = clamped.x
-    cropY.value = clamped.y
-    cropW.value = clamped.w
-    cropH.value = clamped.h
-  }
-  syncCropInput()
-}
-
-const reset = () => initCrop()
-
-const rotateBy = (delta: number) => {
-  rotateDeg.value = (((rotateDeg.value + delta) % 360) + 360) % 360
-}
-
-const onWheel = (e: WheelEvent) => {
-  scale.value = Math.max(0.1, Math.min(5, +(scale.value - e.deltaY * 0.001).toFixed(3)))
-}
-
-// 拖拽图片
-const onStageDown = (e: MouseEvent) => {
-  const startX = e.clientX
-  const startY = e.clientY
-  const ox = offsetX.value
-  const oy = offsetY.value
-  const move = (ev: MouseEvent) => {
-    offsetX.value = ox + (ev.clientX - startX)
-    offsetY.value = oy + (ev.clientY - startY)
-  }
-  const up = () => {
-    window.removeEventListener('mousemove', move)
-    window.removeEventListener('mouseup', up)
-  }
-  window.addEventListener('mousemove', move)
-  window.addEventListener('mouseup', up)
-}
-
-// 拖拽裁剪框
-const onCropDown = (e: MouseEvent) => {
-  const startX = e.clientX
-  const startY = e.clientY
-  const ox = cropX.value
-  const oy = cropY.value
-  const stage = stageRef.value!.getBoundingClientRect()
-  const move = (ev: MouseEvent) => {
-    let nx = ox + (ev.clientX - startX)
-    let ny = oy + (ev.clientY - startY)
-    nx = Math.max(0, Math.min(nx, stage.width - cropW.value))
-    ny = Math.max(0, Math.min(ny, stage.height - cropH.value))
-    cropX.value = nx
-    cropY.value = ny
-  }
-  const up = () => {
-    window.removeEventListener('mousemove', move)
-    window.removeEventListener('mouseup', up)
-  }
-  window.addEventListener('mousemove', move)
-  window.addEventListener('mouseup', up)
-}
-
-/** 固定比例时，将 (nx,ny,nw,nh) 按 ratio 夹紧进 stage */
-const lockAspectResize = (
-  dir: string,
-  bx: number,
-  by: number,
-  bw: number,
-  bh: number,
-  dx: number,
-  dy: number,
-  stageW: number,
-  stageH: number,
-  ratio: number
-) => {
-  let nx = bx
-  let ny = by
-  let nw = bw
-  let nh = bh
-
-  const applySizeFromWidth = (w: number, anchorRight: boolean, anchorBottom: boolean, centerY: boolean) => {
-    nw = Math.max(20, w)
-    nh = nw / ratio
-    if (anchorRight) nx = bx + bw - nw
-    if (centerY) ny = by + (bh - nh) / 2
-    else if (anchorBottom) ny = by + bh - nh
-  }
-
-  const applySizeFromHeight = (h: number, anchorBottom: boolean, anchorRight: boolean, centerX: boolean) => {
-    nh = Math.max(20, h)
-    nw = nh * ratio
-    if (anchorBottom) ny = by + bh - nh
-    if (centerX) nx = bx + (bw - nw) / 2
-    else if (anchorRight) nx = bx + bw - nw
-  }
-
-  if (dir === 'e' || dir === 'w') {
-    const rawW = dir === 'e' ? bw + dx : bw - dx
-    applySizeFromWidth(rawW, dir === 'w', false, true)
-  } else if (dir === 'n' || dir === 's') {
-    const rawH = dir === 's' ? bh + dy : bh - dy
-    applySizeFromHeight(rawH, dir === 'n', false, true)
-  } else {
-    // 角点：取拖动更大的边主导
-    const rawW = dir.includes('e') ? bw + dx : bw - dx
-    const rawH = dir.includes('s') ? bh + dy : bh - dy
-    if (Math.abs(dx) * ratio >= Math.abs(dy)) {
-      applySizeFromWidth(rawW, dir.includes('w'), dir.includes('n'), false)
-      if (dir.includes('n')) ny = by + bh - nh
-    } else {
-      applySizeFromHeight(rawH, dir.includes('n'), dir.includes('w'), false)
-      if (dir.includes('w')) nx = bx + bw - nw
-    }
-  }
-
-  // 夹紧：先限制尺寸，再修正锚点位置
-  if (nw > stageW) {
-    nw = stageW
-    nh = nw / ratio
-  }
-  if (nh > stageH) {
-    nh = stageH
-    nw = nh * ratio
-  }
-  nw = Math.max(20, nw)
-  nh = Math.max(20, nh)
-
-  if (dir.includes('w')) nx = bx + bw - nw
-  if (dir.includes('n') && dir !== 'n' && dir !== 's') {
-    // 角点已设 ny；边缘 n/s 在上面处理
-  }
-  if (dir === 'n') ny = by + bh - nh
-  if (dir.includes('n') && dir.length === 2) ny = by + bh - nh
-
-  nx = Math.max(0, Math.min(nx, stageW - nw))
-  ny = Math.max(0, Math.min(ny, stageH - nh))
-
-  // 贴边后再缩一次，保证比例仍成立
-  if (nx + nw > stageW) {
-    nw = stageW - nx
-    nh = nw / ratio
-    if (dir.includes('n')) ny = by + bh - nh
-    ny = Math.max(0, Math.min(ny, stageH - nh))
-  }
-  if (ny + nh > stageH) {
-    nh = stageH - ny
-    nw = nh * ratio
-    if (dir.includes('w')) nx = bx + bw - nw
-    nx = Math.max(0, Math.min(nx, stageW - nw))
-  }
-
-  return { nx, ny, nw: Math.max(20, nw), nh: Math.max(20, nh) }
-}
-
-// 调整裁剪框大小
-const onHandleDown = (e: MouseEvent, dir: string) => {
-  const startX = e.clientX
-  const startY = e.clientY
-  const bx = cropX.value
-  const by = cropY.value
-  const bw = cropW.value
-  const bh = cropH.value
-  const stage = stageRef.value!.getBoundingClientRect()
-  const move = (ev: MouseEvent) => {
-    const dx = ev.clientX - startX
-    const dy = ev.clientY - startY
-    let nx = bx
-    let ny = by
-    let nw = bw
-    let nh = bh
-
-    if (props.fixedAspect) {
-      const locked = lockAspectResize(dir, bx, by, bw, bh, dx, dy, stage.width, stage.height, resolvedAspect.value)
-      nx = locked.nx
-      ny = locked.ny
-      nw = locked.nw
-      nh = locked.nh
-    } else {
-      if (dir.includes('e')) nw = Math.max(20, Math.min(bw + dx, stage.width - bx))
-      if (dir.includes('s')) nh = Math.max(20, Math.min(bh + dy, stage.height - by))
-      if (dir.includes('w')) {
-        nx = Math.max(0, bx + dx)
-        nw = bx + bw - nx
-      }
-      if (dir.includes('n')) {
-        ny = Math.max(0, by + dy)
-        nh = by + bh - ny
-      }
-      if (nw < 20) {
-        nw = 20
-        if (dir.includes('w')) nx = bx + bw - 20
-      }
-      if (nh < 20) {
-        nh = 20
-        if (dir.includes('n')) ny = by + bh - 20
-      }
-    }
-
-    cropX.value = nx
-    cropY.value = ny
-    cropW.value = nw
-    cropH.value = nh
-    syncCropInput()
-  }
-  const up = () => {
-    window.removeEventListener('mousemove', move)
-    window.removeEventListener('mouseup', up)
-  }
-  window.addEventListener('mousemove', move)
-  window.addEventListener('mouseup', up)
-}
-
-const onShadeClick = () => {
-  if (props.shadeClose) cancel()
-}
-
-const cancel = () => {
-  cropping.value = false
-}
-
-/**
- * 将原图按当前 rotate + flip 烘焙到中间画布，再按裁剪框取样。
- * 预览用 CSS transform；确认时必须 bake，否则输出不含旋转/翻转。
- *
- * Caveat：裁剪框坐标按「旋转后外接矩形」映射（90° 时 W/H 互换），
- * 与 CSS transform-origin:center 的视觉大致对齐；极端 offset/scale 下可能有像素级偏差。
- */
-const buildTransformedSource = (img: HTMLImageElement) => {
-  const naturalW = img.naturalWidth
-  const naturalH = img.naturalHeight
-  const deg = ((rotateDeg.value % 360) + 360) % 360
-  const rad = (deg * Math.PI) / 180
-  const swapped = deg === 90 || deg === 270
-  const outW = swapped ? naturalH : naturalW
-  const outH = swapped ? naturalW : naturalH
-  const canvas = document.createElement('canvas')
-  canvas.width = Math.max(1, outW)
-  canvas.height = Math.max(1, outH)
-  const ctx = canvas.getContext('2d')!
-  ctx.translate(outW / 2, outH / 2)
-  ctx.rotate(rad)
-  ctx.scale(flipX.value, flipY.value)
-  ctx.drawImage(img, -naturalW / 2, -naturalH / 2)
-  return { canvas, outW, outH, swapped }
-}
-
-const confirm = () => {
-  const img = imgRef.value
-  const stage = stageRef.value
-  if (!img || !stage) return
-
-  const { canvas: srcCanvas, outW: baseW, outH: baseH } = buildTransformedSource(img)
-
-  // stage 内显示尺寸：以旋转后外接尺寸 * scale 估算
-  const dispW = baseW * scale.value
-  const dispH = baseH * scale.value
-  const ratio = baseW / dispW
-
-  const imgLeft = offsetX.value + (stage.clientWidth - dispW) / 2
-  const imgTop = offsetY.value + (stage.clientHeight - dispH) / 2
-
-  const sx = (cropX.value - imgLeft) * ratio
-  const sy = (cropY.value - imgTop) * ratio
-  const sw = cropW.value * ratio
-  const sh = cropH.value * ratio
-
-  const outW = props.outputWidth > 0 ? props.outputWidth : Math.max(1, Math.round(sw))
-  const outH = props.outputHeight > 0 ? props.outputHeight : Math.max(1, Math.round(sh))
-
-  const imageURL = drawCrop(srcCanvas, sx, sy, sw, sh, outW, outH, props.outputType, quality.value, false)
-
-  const thumbURL = props.withThumbnail
-    ? drawCrop(srcCanvas, sx, sy, sw, sh, props.thumbnailSize, props.thumbnailSize, props.outputType, quality.value, false)
-    : ''
-
-  const avatarType = props.outputType === 'image/jpeg' ? 'image/png' : props.outputType
-  const avatarURL = props.withAvatar
-    ? drawCrop(srcCanvas, sx, sy, sw, sh, props.avatarSize, props.avatarSize, avatarType, 1, true)
-    : ''
-
-  result.value = imageURL
-  emit('update:modelValue', imageURL)
-  emit('change', imageURL)
-  emit('cropper-image', imageURL)
-  if (thumbURL) emit('cropper-thumbnail', thumbURL)
-  if (avatarURL) emit('cropper-avatar', avatarURL)
-  emit('cropper-result', { image: imageURL, thumbnail: thumbURL, avatar: avatarURL })
-  emit('cropper-file', dataURLtoFile(imageURL, `crop.${extFromType(props.outputType)}`))
-  cropping.value = false
-}
-
-/**
- * 将 source 中 (sx,sy,sw,sh) 区域绘制到目标尺寸画布并返回 dataURL
- * @param circle 是否裁为圆形（透明背景）
- */
-const drawCrop = (
-  img: CanvasImageSource,
-  sx: number,
-  sy: number,
-  sw: number,
-  sh: number,
-  targetW: number,
-  targetH: number,
-  type: string,
-  q: number,
-  circle: boolean
-) => {
-  const canvas = document.createElement('canvas')
-  canvas.width = Math.max(1, Math.round(targetW))
-  canvas.height = Math.max(1, Math.round(targetH))
-  const ctx = canvas.getContext('2d')!
-  if (type === 'image/jpeg' || type === 'image/webp') {
-    ctx.fillStyle = '#fff'
-    ctx.fillRect(0, 0, canvas.width, canvas.height)
-  }
-  if (circle) {
-    ctx.beginPath()
-    ctx.arc(canvas.width / 2, canvas.height / 2, Math.min(canvas.width, canvas.height) / 2, 0, Math.PI * 2)
-    ctx.closePath()
-    ctx.clip()
-  }
-  // 裁剪区域可能因旋转映射略越界，做最小夹紧
-  const srcW = 'width' in img && typeof (img as HTMLCanvasElement).width === 'number'
-    ? (img as HTMLCanvasElement).width
-    : (img as HTMLImageElement).naturalWidth || 0
-  const srcH = 'height' in img && typeof (img as HTMLCanvasElement).height === 'number'
-    ? (img as HTMLCanvasElement).height
-    : (img as HTMLImageElement).naturalHeight || 0
-  let csx = sx
-  let csy = sy
-  let csw = sw
-  let csh = sh
-  if (srcW > 0 && srcH > 0) {
-    csx = Math.max(0, Math.min(sx, srcW - 1))
-    csy = Math.max(0, Math.min(sy, srcH - 1))
-    csw = Math.max(1, Math.min(sw, srcW - csx))
-    csh = Math.max(1, Math.min(sh, srcH - csy))
-  }
-  ctx.drawImage(img, csx, csy, csw, csh, 0, 0, canvas.width, canvas.height)
-  return canvas.toDataURL(type, q)
-}
-
-const extFromType = (t: string) => (t.includes('png') ? 'png' : t.includes('webp') ? 'webp' : 'jpg')
-
-const dataURLtoFile = (dataUrl: string, filename: string) => {
-  const arr = dataUrl.split(',')
-  const mime = arr[0].match(/:(.*?);/)?.[1] || 'image/jpeg'
-  const bstr = atob(arr[1])
-  const n = bstr.length
-  const u8 = new Uint8Array(n)
-  for (let i = 0; i < n; i++) u8[i] = bstr.charCodeAt(i)
-  return new File([u8], filename, { type: mime })
-}
-
-const remove = () => {
-  result.value = ''
-  source.value = ''
-  emit('update:modelValue', '')
-  emit('remove')
-}
-
-watch(
-  () => props.modelValue,
-  (v) => {
-    if (v !== result.value) result.value = v
-  }
-)
-</script>
-
-<style lang="scss" scoped>
-.qiu-upload-crop {
-  display: inline-block;
-  font-size: 13px;
-  color: var(--qiu-text-color-regular, #606266);
-
-  &.is-disabled {
-    opacity: 0.6;
-    pointer-events: none;
-  }
-}
-
-.qiu-upload-crop__input {
-  display: none;
-}
-
-.qiu-upload-crop__trigger {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  cursor: pointer;
-  background: var(--qiu-fill-color-blank, #fff);
-  border: 1px dashed var(--qiu-border-color, #dcdfe6);
-  border-radius: 8px;
-  transition: border-color 0.2s ease, background 0.2s ease;
-
-  &:hover {
-    color: var(--qiu-color-primary, #0f766e);
-    background: color-mix(in srgb, var(--qiu-color-primary, #0f766e) 6%, #fff);
-    border-color: var(--qiu-color-primary, #0f766e);
-  }
-
-  &.is-dragover {
-    color: var(--qiu-color-primary, #0f766e);
-    background: color-mix(in srgb, var(--qiu-color-primary, #0f766e) 10%, #fff);
-    border-color: var(--qiu-color-primary, #0f766e);
-  }
-
-  &-icon {
-    font-size: 28px;
-  }
-
-  &-text {
-    margin: 0;
-    font-size: 13px;
-  }
-}
-
-.qiu-upload-crop__tip {
-  margin: 2px 0 0;
-  font-size: 12px;
-  color: var(--qiu-text-color-secondary, #909399);
-}
-
-.qiu-upload-crop__result {
-  position: relative;
-  box-sizing: border-box;
-  overflow: hidden;
-  background: var(--qiu-fill-color-lighter, #fafafa);
-  border: 1px solid var(--qiu-border-color-lighter, #ebeef5);
-  border-radius: 8px;
-}
-
-.qiu-upload-crop__result-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.qiu-upload-crop__mask {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  gap: 6px;
-  align-items: center;
-  justify-content: center;
-  background: rgba(0, 0, 0, 0.45);
-
-  button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    color: #fff;
-    cursor: pointer;
-    background: rgba(255, 255, 255, 0.15);
-    border: 0;
-    border-radius: 6px;
-
-    &:hover {
-      background: rgba(255, 255, 255, 0.3);
-    }
-
-    i {
-      font-size: 16px;
-    }
-  }
-}
-
-.qiu-upload-crop__dialog {
-  position: fixed;
-  inset: 0;
-  z-index: 2000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(0, 0, 0, 0.5);
-}
-
-.qiu-upload-crop__dialog-box {
-  display: flex;
-  flex-direction: column;
-  width: min(720px, 92vw);
-  max-height: 90vh;
-  overflow: hidden;
-  background: #fff;
-  border-radius: 10px;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
-}
-
-.qiu-upload-crop__dialog-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  font-size: 15px;
-  font-weight: 600;
-  border-bottom: 1px solid var(--qiu-border-color-lighter, #ebeef5);
-}
-
-.qiu-upload-crop__close {
-  padding: 0 6px;
-  font-size: 20px;
-  color: var(--qiu-text-color-secondary, #909399);
-  cursor: pointer;
-  background: transparent;
-  border: 0;
-}
-
-.qiu-upload-crop__stage {
-  position: relative;
-  height: min(460px, 56vh);
-  overflow: hidden;
-  background:
-    linear-gradient(45deg, #f0f0f0 25%, transparent 25%) -10px 0 / 20px 20px,
-    linear-gradient(-45deg, #f0f0f0 25%, transparent 25%) -10px 0 / 20px 20px,
-    linear-gradient(45deg, transparent 75%, #f0f0f0 75%) -10px 0 / 20px 20px,
-    linear-gradient(-45deg, transparent 75%, #f0f0f0 75%) -10px 0 / 20px 20px,
-    #fff;
-  user-select: none;
-}
-
-.qiu-upload-crop__source {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  max-width: none;
-  transform-origin: center center;
-  transform: translate(-50%, -50%);
-  will-change: transform;
-}
-
-.qiu-upload-crop__crop {
-  position: absolute;
-  box-sizing: border-box;
-  border: 1px solid var(--qiu-color-primary, #0f766e);
-  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
-  cursor: move;
-
-  &.is-round {
-    border-radius: 50%;
-  }
-
-  &::before,
-  &::after {
-    position: absolute;
-    content: '';
-    background: rgba(255, 255, 255, 0.6);
-  }
-
-  &::before {
-    top: 50%;
-    left: 0;
-    width: 100%;
-    height: 1px;
-    transform: translateY(-50%);
-  }
-
-  &::after {
-    top: 0;
-    left: 50%;
-    width: 1px;
-    height: 100%;
-    transform: translateX(-50%);
-  }
-}
-
-.qiu-upload-crop__handle {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  background: #fff;
-  border: 1px solid var(--qiu-color-primary, #0f766e);
-  border-radius: 2px;
-
-  &--nw { top: -6px; left: -6px; cursor: nwse-resize; }
-  &--n { top: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
-  &--ne { top: -6px; right: -6px; cursor: nesw-resize; }
-  &--e { top: 50%; right: -6px; transform: translateY(-50%); cursor: ew-resize; }
-  &--se { right: -6px; bottom: -6px; cursor: nwse-resize; }
-  &--s { bottom: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
-  &--sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
-  &--w { top: 50%; left: -6px; transform: translateY(-50%); cursor: ew-resize; }
-}
-
-.qiu-upload-crop__toolbar {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-  padding: 12px 16px;
-  border-top: 1px solid var(--qiu-border-color-lighter, #ebeef5);
-
-  button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 30px;
-    height: 30px;
-    padding: 0 8px;
-    color: var(--qiu-text-color-regular, #606266);
-    cursor: pointer;
-    background: var(--qiu-fill-color-lighter, #fafafa);
-    border: 1px solid var(--qiu-border-color-lighter, #ebeef5);
-    border-radius: 6px;
-
-    &:hover {
-      color: var(--qiu-color-primary, #0f766e);
-      border-color: var(--qiu-color-primary, #0f766e);
-    }
-
-    i {
-      font-size: 16px;
-    }
-  }
-}
-
-.qiu-upload-crop__divider {
-  width: 1px;
-  height: 20px;
-  background: var(--qiu-border-color-lighter, #ebeef5);
-}
-
-.qiu-upload-crop__field {
-  display: inline-flex;
-  gap: 4px;
-  align-items: center;
-  font-size: 12px;
-  color: var(--qiu-text-color-secondary, #909399);
-
-  input {
-    width: 56px;
-    height: 28px;
-    padding: 0 6px;
-    border: 1px solid var(--qiu-border-color, #dcdfe6);
-    border-radius: 4px;
-  }
-}
-
-.qiu-upload-crop__quality {
-  display: inline-flex;
-  gap: 6px;
-  align-items: center;
-  font-size: 12px;
-  color: var(--qiu-text-color-secondary, #909399);
-
-  input {
-    width: 90px;
-  }
-}
-
-.qiu-upload-crop__confirm {
-  margin-left: auto;
-  color: #fff !important;
-  background: var(--qiu-color-primary, #0f766e) !important;
-  border-color: var(--qiu-color-primary, #0f766e) !important;
-}
-
-.qiu-upload-crop__preview {
-  position: fixed;
-  inset: 0;
-  z-index: 2100;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 24px;
-  background: rgba(0, 0, 0, 0.7);
-
-  img {
-    max-width: 90vw;
-    max-height: 90vh;
-  }
-}
-</style>