@veltra/desktop 1.7.8 → 1.7.10

package/src/components/image-cropper/use-transform.ts

@@ -0,0 +1,256 @@
+import { onBeforeUnmount, reactive, watch, type Ref, type ShallowRef } from 'vue'
+
+/** 图片变换状态：缩放 / 平移 / 90° 步进旋转 / 翻转 */
+export interface TransformState {
+  scale: number
+  translateX: number
+  translateY: number
+  /** 90° 步进角度：0 / 90 / 180 / 270 */
+  rotation: number
+  flipX: boolean
+  flipY: boolean
+}
+
+interface Size {
+  width: number
+  height: number
+}
+
+/** 画布内的屏幕坐标点（相对画布左上角） */
+interface Point {
+  x: number
+  y: number
+}
+
+/** 滚轮 / 按钮单次缩放步进系数 */
+const ZOOM_STEP = 1.2
+/** 最大缩放倍数（相对适应容器的缩放） */
+const MAX_ZOOM_RATIO = 10
+
+interface UseTransformOptions {
+  /** 画布元素（wheel 缩放与选区外平移的交互目标） */
+  target: ShallowRef<HTMLElement | undefined | null> | Ref<HTMLElement | undefined | null>
+  /** 画布可视尺寸（屏幕像素） */
+  canvasSize: () => Size
+  /** 图片原始宽（图片像素） */
+  imageWidth: () => number
+  /** 图片原始高（图片像素） */
+  imageHeight: () => number
+  /** 重置变换时复位选区 */
+  onReset: () => void
+}
+
+interface UseTransformReturn {
+  /** 当前变换状态 */
+  transform: TransformState
+  /** 图片按比例适应容器并居中（按当前旋转交换宽高计算） */
+  fit: () => void
+  /** 复位变换状态（不重新布局、不复位选区） */
+  reset: () => void
+  /** 重置：恢复初始变换，重新适应容器并复位选区 */
+  resetTransform: () => void
+  /** 放大一级，anchor 为缩放锚点（默认画布中心） */
+  zoomIn: (anchor?: Point) => void
+  /** 缩小一级，anchor 为缩放锚点（默认画布中心） */
+  zoomOut: (anchor?: Point) => void
+  /** 缩放到指定值（按适应缩放钳制范围），anchor 为缩放锚点（默认画布中心） */
+  zoomTo: (scale: number, anchor?: Point) => void
+  /** 90° 步进旋转，direction 为 1 顺时针、-1 逆时针 */
+  rotate: (direction: 1 | -1) => void
+  /** 水平 / 垂直翻转 */
+  flip: (axis: 'horizontal' | 'vertical') => void
+  /** 屏幕位移换算为图片像素位移（考虑旋转 / 翻转 / 缩放） */
+  toImageDelta: (dx: number, dy: number) => Point
+}
+
+/**
+ * 图片变换：滚轮以指针为锚缩放、选区外拖动平移、90° 步进旋转、翻转与重置。
+ * 舞台 transform-origin 为中心，旋转 / 翻转不改变图片中心位置，无需补偿平移
+ */
+export function useTransform(options: UseTransformOptions): UseTransformReturn {
+  const { target, canvasSize, imageWidth, imageHeight, onReset } = options
+
+  const transform = reactive<TransformState>({
+    scale: 1,
+    translateX: 0,
+    translateY: 0,
+    rotation: 0,
+    flipX: false,
+    flipY: false
+  })
+
+  /** 当前旋转下的显示尺寸（90° / 270° 交换宽高，图片像素） */
+  function displaySize(): Size {
+    const width = imageWidth()
+    const height = imageHeight()
+    return transform.rotation % 180 === 0 ? { width, height } : { width: height, height: width }
+  }
+
+  /** 适应容器的缩放（同时是缩放范围下限） */
+  function fitScale() {
+    const { width: cw, height: ch } = canvasSize()
+    const { width: dw, height: dh } = displaySize()
+    if (!cw || !ch || !dw || !dh) return 0
+    return Math.min(cw / dw, ch / dh)
+  }
+
+  function fit() {
+    const scale = fitScale()
+    if (!scale) return
+    const { width: cw, height: ch } = canvasSize()
+    transform.scale = scale
+    // transform-origin 为舞台中心，居中平移只取决于舞台原始尺寸，与缩放 / 旋转无关
+    transform.translateX = (cw - imageWidth()) / 2
+    transform.translateY = (ch - imageHeight()) / 2
+  }
+
+  function reset() {
+    transform.scale = 1
+    transform.translateX = 0
+    transform.translateY = 0
+    transform.rotation = 0
+    transform.flipX = false
+    transform.flipY = false
+  }
+
+  function resetTransform() {
+    reset()
+    fit()
+    onReset()
+  }
+
+  function zoomTo(scale: number, anchor?: Point) {
+    const base = fitScale()
+    if (!base) return
+    const next = Math.min(Math.max(scale, base), base * MAX_ZOOM_RATIO)
+    const { width: cw, height: ch } = canvasSize()
+    const { x: ax, y: ay } = anchor ?? { x: cw / 2, y: ch / 2 }
+    // 舞台中心（transform-origin）局部坐标
+    const cx = imageWidth() / 2
+    const cy = imageHeight() / 2
+    const k = next / transform.scale
+    // 缩放前后锚点下的图片点保持不动：t' = A - C - k·(A - t - C)
+    transform.translateX = ax - cx - k * (ax - transform.translateX - cx)
+    transform.translateY = ay - cy - k * (ay - transform.translateY - cy)
+    transform.scale = next
+  }
+
+  function zoomIn(anchor?: Point) {
+    zoomTo(transform.scale * ZOOM_STEP, anchor)
+  }
+
+  function zoomOut(anchor?: Point) {
+    zoomTo(transform.scale / ZOOM_STEP, anchor)
+  }
+
+  function rotate(direction: 1 | -1) {
+    transform.rotation = (transform.rotation + direction * 90 + 360) % 360
+    // 90° / 270° 后按交换宽高重新适应布局
+    fit()
+  }
+
+  function flip(axis: 'horizontal' | 'vertical') {
+    if (axis === 'horizontal') transform.flipX = !transform.flipX
+    else transform.flipY = !transform.flipY
+  }
+
+  function toImageDelta(dx: number, dy: number): Point {
+    // 先按旋转逆变换，再除掉带翻转符号的缩放
+    let x = dx
+    let y = dy
+    if (transform.rotation === 90) {
+      x = dy
+      y = -dx
+    } else if (transform.rotation === 180) {
+      x = -dx
+      y = -dy
+    } else if (transform.rotation === 270) {
+      x = -dy
+      y = dx
+    }
+    return {
+      x: x / ((transform.flipX ? -1 : 1) * transform.scale),
+      y: y / ((transform.flipY ? -1 : 1) * transform.scale)
+    }
+  }
+
+  // ---------- wheel 缩放（以指针位置为锚点） ----------
+
+  function handleWheel(e: WheelEvent) {
+    e.preventDefault()
+    const el = target.value
+    if (!el) return
+    const rect = el.getBoundingClientRect()
+    const anchor = { x: e.clientX - rect.left, y: e.clientY - rect.top }
+    if (e.deltaY < 0) zoomIn(anchor)
+    else zoomOut(anchor)
+  }
+
+  // ---------- 选区外拖动平移（选区内拖动由 use-selection 拦截，不冒泡到这里） ----------
+
+  /** 图片显示尺寸超出容器才允许平移 */
+  function isOverflowing() {
+    const { width: cw, height: ch } = canvasSize()
+    const { width: dw, height: dh } = displaySize()
+    return dw * transform.scale > cw || dh * transform.scale > ch
+  }
+
+  let panStart: Point | null = null
+
+  function handleMousedown(e: MouseEvent) {
+    if (e.button !== 0 || !isOverflowing()) return
+    e.preventDefault()
+
+    panStart = { x: e.clientX, y: e.clientY }
+    document.addEventListener('mousemove', handleMousemove, { passive: true })
+    document.addEventListener('mouseup', handleMouseup)
+  }
+
+  function handleMousemove(e: MouseEvent) {
+    if (!panStart) return
+    transform.translateX += e.clientX - panStart.x
+    transform.translateY += e.clientY - panStart.y
+    panStart = { x: e.clientX, y: e.clientY }
+  }
+
+  function handleMouseup() {
+    panStart = null
+    cleanup()
+  }
+
+  function cleanup() {
+    document.removeEventListener('mousemove', handleMousemove)
+    document.removeEventListener('mouseup', handleMouseup)
+  }
+
+  watch(
+    target,
+    (el, oldEl) => {
+      oldEl?.removeEventListener('mousedown', handleMousedown)
+      oldEl?.removeEventListener('wheel', handleWheel)
+      el?.addEventListener('mousedown', handleMousedown)
+      // wheel 需要 preventDefault 阻止页面滚动，必须非 passive
+      el?.addEventListener('wheel', handleWheel, { passive: false })
+    },
+    { immediate: true }
+  )
+
+  onBeforeUnmount(() => {
+    target.value?.removeEventListener('mousedown', handleMousedown)
+    target.value?.removeEventListener('wheel', handleWheel)
+    cleanup()
+  })
+
+  return {
+    transform,
+    fit,
+    reset,
+    resetTransform,
+    zoomIn,
+    zoomOut,
+    zoomTo,
+    rotate,
+    flip,
+    toImageDelta
+  }
+}

package/src/components/index.ts

@@ -151,3 +151,5 @@ export * from './grid'
 export * from './badge'
 
 export * from './segment'
+
+export * from './image-cropper'

package/src/components/select/style.scss

@@ -63,16 +63,8 @@ $root-name: select;
     @include m.ellipsis;
 
     &:hover {
-      background-color: fn.component-var(
-        select,
-        option-hover-bg,
-        fn.use-var(bg-color, hover)
-      );
-      color: fn.component-var(
-        select,
-        option-hover-color,
-        fn.use-var(text-color, title)
-      );
+      background-color: fn.component-var(select, option-hover-bg, fn.use-var(bg-color, hover));
+      color: fn.component-var(select, option-hover-color, fn.use-var(text-color, title));
     }
 
     @include m.is(selected) {
@@ -82,11 +74,7 @@ $root-name: select;
         option-selected-bg,
         fn.use-var(color, primary, light-9)
       );
-      color: fn.component-var(
-        select,
-        option-selected-color,
-        fn.use-var(color, primary)
-      );
+      color: fn.component-var(select, option-selected-color, fn.use-var(color, primary));
       font-weight: 600;
 
       &::before {

package/src/types/batch-edit.ts

@@ -115,6 +115,8 @@ export interface BatchEditProps extends TableProps {
 
 /** 批量编辑组件定义的事件 */
 export interface BatchEditEmits extends TableEmits {
+  /** 表单控件 change，透传自 UForm */
+  (e: 'field:change', field: string, ...args: any[]): void
   /** 更新数据 */
   (e: 'update:data', value: Record<string, any>[]): void
   /** 点击底部「新增一行」 */

package/src/types/form-item.ts

@@ -9,7 +9,10 @@ export interface FormItemProps extends FormComponentProps {
 }
 
 /** 组件项组件定义的事件 */
-export interface FormItemEmits {}
+export interface FormItemEmits {
+  /** 内部控件 change，参数与控件一致 */
+  (e: 'change', ...args: any[]): void
+}
 
 /** 组件项组件暴露的属性和方法 */
 export interface FormItemExposed {}

package/src/types/form.ts

@@ -10,7 +10,12 @@ export interface FormProps extends ComponentProps {
   cols?: number
   /** 表单数据 */
   model?: Record<string, any>
-  // showModified?: boolean
+  /** 开启后，字段当前值与基准值不同时，在控件下方展示「变更前」 */
+  showModified?: boolean
+  /** 「变更前」标签文案，默认「变更前：」 */
+  modifiedLabel?: string
+  /** 变更前基准数据；未传时回退到 model 引用首次传入时的快照（与 reset 一致） */
+  initialModel?: Record<string, any>
   /** 表单项label宽度 */
   labelWidth?: string | number
   /** 表单项 label 位置 */
@@ -24,7 +29,10 @@ export interface FormProps extends ComponentProps {
 }
 
 export interface FormEmits {
-  (e: 'field:change', field: string, value: any): void
+  /** 控件 change 事件，仅用户操作触发 */
+  (e: 'field:change', field: string, ...args: any[]): void
+  /** model 字段值更新，含编程写入 */
+  (e: 'field:update', field: string, value: any): void
 }
 
 export interface _FormExposed {

package/src/types/image-cropper.ts

@@ -0,0 +1,73 @@
+import type { DeconstructValue } from '@veltra/utils'
+
+/** 图片裁剪组件属性 */
+export interface ImageCropperProps {
+  /** 图片源：File / Blob / URL */
+  src?: File | Blob | string
+  /** 选区宽高比，不传为自由比例 */
+  aspectRatio?: number
+  /** 是否显示工具栏 */
+  showToolbar?: boolean
+  /** 是否显示预览区 */
+  showPreview?: boolean
+}
+
+/** getResult 输出尺寸：缺省维度按选区比例推算，都不传则为原图选区像素尺寸 */
+export interface ImageCropperResultOptions {
+  /** 目标输出宽度（像素） */
+  width?: number
+  /** 目标输出高度（像素） */
+  height?: number
+}
+
+/** getResult 裁剪结果 */
+export interface ImageCropperResult {
+  /** 裁剪图像 Blob（image/png） */
+  blob: Blob
+  /** 裁剪图像的 dataURL（data:image/png;base64,...），可直接用于 img.src */
+  base64: string
+}
+
+/** 裁剪选区（图片像素坐标） */
+export interface ImageCropperSelection {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+/** 影响裁剪输出的图片变换（缩放 / 平移只影响画布展示，不在其列） */
+export interface ImageCropperCropTransform {
+  /** 90° 步进角度：0 / 90 / 180 / 270 */
+  rotation: number
+  /** 水平翻转 */
+  flipX: boolean
+  /** 垂直翻转 */
+  flipY: boolean
+}
+
+/** 裁剪变化事件载荷 */
+export interface ImageCropperChangePayload {
+  /** 当前选区（图片像素坐标） */
+  selection: ImageCropperSelection
+  /** 影响输出的图片变换摘要，与 getResult 应用的一致 */
+  transform: ImageCropperCropTransform
+}
+
+/** 图片裁剪组件定义的事件 */
+export interface ImageCropperEmits {
+  /** 选区或图片变换变化时触发 */
+  (e: 'crop-change', payload: ImageCropperChangePayload): void
+}
+
+/** 图片裁剪组件暴露的属性和方法(组件内部使用) */
+export interface _ImageCropperExposed {
+  /**
+   * 输出当前选区裁剪结果：默认按原图选区像素，可传目标宽 / 高缩放输出。
+   * 图片未加载 / 无选区、或跨域图片污染画布时 Promise 拒绝，不静默失败
+   */
+  getResult: (options?: ImageCropperResultOptions) => Promise<ImageCropperResult>
+}
+
+/** 图片裁剪组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type ImageCropperExposed = DeconstructValue<_ImageCropperExposed>

package/src/types/index.ts

@@ -82,3 +82,4 @@ export * from './rich-text-editor'
 export * from './file-viewer'
 export * from './collapse'
 export * from './segment'
+export * from './image-cropper'