@veltra/desktop 1.7.8 → 1.7.10

package/src/components/form-item/form-item.vue

@@ -17,7 +17,7 @@
 
     <section :class="cls.e('wrapper')">
       <div :class="cls.e('content')">
-        <slot></slot>
+        <ContentSlot />
       </div>
 
       <!-- 只有表单控件处于非只读状态时，才显示错误提示 -->
@@ -37,9 +37,18 @@ import { o } from '@cat-kit/core'
 import { useConfig, useFallbackProps } from '@veltra/compositions'
 import { bem, withUnit } from '@veltra/utils'
 import { injectFormContext } from '@veltra/utils'
-import { type CSSProperties, computed, onBeforeUnmount, shallowRef, watch } from 'vue'
-
-import type { FormItemProps, ComponentSize } from '../../types'
+import {
+  type CSSProperties,
+  type VNode,
+  cloneVNode,
+  computed,
+  onBeforeUnmount,
+  shallowRef,
+  useSlots,
+  watch
+} from 'vue'
+
+import type { FormItemEmits, FormItemProps, ComponentSize } from '../../types'
 import { UGridItem } from '../grid'
 import { UTip } from '../tip'
 import { formItemCls as cls, defineField } from './helper'
@@ -49,6 +58,10 @@ defineOptions({ name: 'UFormItem' })
 
 const props = withDefaults(defineProps<FormItemProps>(), { readonly: undefined })
 
+const emit = defineEmits<FormItemEmits>()
+
+const slots = useSlots()
+
 defineSlots<{
   /** 标签插槽 */
   label?: () => any
@@ -56,8 +69,30 @@ defineSlots<{
 }>()
 
 /** 表单组件上下文 */
-const { formProps, registerField, unregisterField, shouldValidate, handleFieldChange } =
-  injectFormContext()
+const {
+  formProps,
+  registerField,
+  unregisterField,
+  shouldValidate,
+  handleFieldUpdate,
+  handleFieldChange
+} = injectFormContext()
+
+function wrapControlChange(node: VNode) {
+  if (!node || typeof node.type === 'symbol') return node
+
+  return cloneVNode(node, {
+    onChange: (...args: any[]) => {
+      emit('change', ...args)
+      if (props.field) handleFieldChange?.(props.field, ...args)
+    }
+  })
+}
+
+function ContentSlot() {
+  const nodes = slots.default?.() ?? []
+  return nodes.map(wrapControlChange)
+}
 
 const { config } = useConfig()
 
@@ -137,7 +172,7 @@ watch(
     stopWatchFieldValue = watch(
       () => o(model).get(field),
       (value) => {
-        handleFieldChange?.(field, value)
+        handleFieldUpdate?.(field, value)
         fieldItem.validate()
       }
     )

package/src/components/image-cropper/__test__/draw-crop.test.ts

@@ -0,0 +1,131 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { cropToResult, drawCropToCanvas } from '../draw-crop'
+
+/** 记录调用参数的 2d 上下文桩 */
+function createCtxStub() {
+  return { translate: vi.fn(), rotate: vi.fn(), scale: vi.fn(), drawImage: vi.fn() }
+}
+
+function createCanvasStub(ctx: ReturnType<typeof createCtxStub>) {
+  return { width: 0, height: 0, getContext: () => ctx } as unknown as HTMLCanvasElement
+}
+
+const img = {} as HTMLImageElement
+const selection = { x: 10, y: 20, width: 200, height: 100 }
+const identity = { rotation: 0, flipX: false, flipY: false }
+
+describe('drawCropToCanvas', () => {
+  it('无变换时按选区原图像素尺寸输出', () => {
+    const ctx = createCtxStub()
+    const canvas = createCanvasStub(ctx)
+
+    drawCropToCanvas(img, selection, identity, canvas)
+
+    expect(canvas.width).toBe(200)
+    expect(canvas.height).toBe(100)
+    expect(ctx.rotate).toHaveBeenCalledWith(0)
+    expect(ctx.scale).toHaveBeenCalledWith(1, 1)
+    expect(ctx.drawImage).toHaveBeenCalledWith(img, 10, 20, 200, 100, -100, -50, 200, 100)
+  })
+
+  it('旋转 90° / 270° 时输出尺寸交换宽高', () => {
+    const ctx = createCtxStub()
+    const canvas = createCanvasStub(ctx)
+
+    drawCropToCanvas(img, selection, { ...identity, rotation: 90 }, canvas)
+
+    expect(canvas.width).toBe(100)
+    expect(canvas.height).toBe(200)
+    expect(ctx.rotate).toHaveBeenCalledWith(Math.PI / 2)
+    // 变换顺序与舞台一致：先旋转后缩放（翻转）
+    expect(ctx.translate).toHaveBeenCalledWith(50, 100)
+  })
+
+  it('翻转以负缩放体现', () => {
+    const ctx = createCtxStub()
+    const canvas = createCanvasStub(ctx)
+
+    drawCropToCanvas(img, selection, { ...identity, flipX: true, flipY: true }, canvas)
+
+    expect(ctx.scale).toHaveBeenCalledWith(-1, -1)
+  })
+
+  it('传入输出尺寸时按该尺寸缩放输出', () => {
+    const ctx = createCtxStub()
+    const canvas = createCanvasStub(ctx)
+
+    drawCropToCanvas(img, selection, identity, canvas, { width: 400, height: 200 })
+
+    expect(canvas.width).toBe(400)
+    expect(canvas.height).toBe(200)
+    expect(ctx.scale).toHaveBeenCalledWith(2, 2)
+  })
+
+  it('输出尺寸只传一个维度时另一维按选区比例推算', () => {
+    const ctx = createCtxStub()
+    const canvas = createCanvasStub(ctx)
+
+    drawCropToCanvas(img, selection, identity, canvas, { width: 100 })
+    expect(canvas.width).toBe(100)
+    expect(canvas.height).toBe(50)
+
+    drawCropToCanvas(img, selection, identity, canvas, { height: 400 })
+    expect(canvas.width).toBe(800)
+    expect(canvas.height).toBe(400)
+  })
+
+  it('选区像素为小数时输出尺寸取整', () => {
+    const ctx = createCtxStub()
+    const canvas = createCanvasStub(ctx)
+
+    drawCropToCanvas(img, { x: 0, y: 0, width: 100.4, height: 50.6 }, identity, canvas)
+
+    expect(canvas.width).toBe(100)
+    expect(canvas.height).toBe(51)
+  })
+})
+
+describe('cropToResult', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('默认按原图选区像素导出 Blob + base64 dataURL', async () => {
+    const toBlobSpy = vi.spyOn(HTMLCanvasElement.prototype, 'toBlob')
+
+    const { blob, base64 } = await cropToResult(img, selection, identity)
+
+    // 离屏画布按选区 200×100 输出
+    const canvas = toBlobSpy.mock.instances[0] as unknown as HTMLCanvasElement
+    expect(canvas.width).toBe(200)
+    expect(canvas.height).toBe(100)
+    expect(blob).toBeInstanceOf(Blob)
+    expect(blob.type).toBe('image/png')
+    expect(base64.startsWith('data:image/png;base64,')).toBe(true)
+  })
+
+  it('传入输出尺寸时按该尺寸缩放导出', async () => {
+    const toBlobSpy = vi.spyOn(HTMLCanvasElement.prototype, 'toBlob')
+
+    await cropToResult(img, selection, identity, { width: 100 })
+
+    const canvas = toBlobSpy.mock.instances[0] as unknown as HTMLCanvasElement
+    expect(canvas.width).toBe(100)
+    expect(canvas.height).toBe(50)
+  })
+
+  it('canvas 被跨域图片污染（toBlob 抛错）时拒绝为可捕获错误', async () => {
+    vi.spyOn(HTMLCanvasElement.prototype, 'toBlob').mockImplementation(() => {
+      throw new DOMException('The canvas has been tainted by cross-origin data.', 'SecurityError')
+    })
+
+    await expect(cropToResult(img, selection, identity)).rejects.toThrow(/tainted/)
+  })
+
+  it('toBlob 未产出数据时拒绝而不是静默返回', async () => {
+    vi.spyOn(HTMLCanvasElement.prototype, 'toBlob').mockImplementation((cb) => cb(null))
+
+    await expect(cropToResult(img, selection, identity)).rejects.toThrow(/got null/)
+  })
+})