foucui 1.0.1

package/components/QiuUploadCrop/index.vue

@@ -0,0 +1,1267 @@
+<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>