@veltra/desktop 1.7.7 → 1.7.9

package/src/components/cascade/__test__/cascade.test.ts

@@ -0,0 +1,103 @@
+import { describe, expect, it } from 'vitest'
+import { createApp, h, nextTick, ref } from 'vue'
+
+import UCascade from '../cascade.vue'
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+
+const cascadeData = [
+  {
+    label: '浙江省',
+    value: 'zhejiang',
+    children: [
+      {
+        label: '杭州市',
+        value: 'hangzhou',
+        children: [
+          { label: '西湖区', value: 'xihu' },
+          { label: '余杭区', value: 'yuhang' }
+        ]
+      }
+    ]
+  },
+  {
+    label: '江苏省',
+    value: 'jiangsu',
+    children: [
+      { label: '南京市', value: 'nanjing', children: [{ label: '玄武区', value: 'xuanwu' }] }
+    ]
+  }
+]
+
+function queryCascadeItems() {
+  return [...document.body.querySelectorAll<HTMLElement>('.u-cascade-panel-item__option')]
+}
+
+async function openDropdown(host: HTMLElement) {
+  const trigger = (host.querySelector('.u-cascade') ||
+    host.querySelector('.u-dropdown') ||
+    host.firstElementChild) as HTMLElement
+  trigger.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+  for (let attempt = 0; attempt < 20; attempt++) {
+    await nextTick()
+    await sleep(25)
+    if (queryCascadeItems().length > 0) return
+  }
+}
+
+async function clickItemByLabel(label: string) {
+  const item = queryCascadeItems().find((el) => el.textContent?.includes(label))
+  expect(item, `cascade item "${label}" not found`).toBeTruthy()
+  item!.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+  await nextTick()
+  await sleep(30)
+}
+
+describe('UCascade change event fullLabel', () => {
+  it('should emit fullLabel in change event for single select', async () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+
+    const model = ref<string | undefined>()
+    let changeResult: { item: any; fullLabel?: string } | undefined
+
+    const app = createApp({
+      render() {
+        return h(UCascade, {
+          data: cascadeData,
+          modelValue: model.value,
+          'onUpdate:modelValue': (val: string) => {
+            model.value = val
+          },
+          onChange: (item: any, fullLabel?: string) => {
+            changeResult = { item, fullLabel }
+          }
+        })
+      }
+    })
+
+    app.mount(host)
+    await nextTick()
+
+    await openDropdown(host)
+
+    // 点击第一列 "浙江省"
+    await clickItemByLabel('浙江省')
+
+    // 点击第二列 "杭州市"
+    await clickItemByLabel('杭州市')
+
+    // 点击第三列 "西湖区"
+    await clickItemByLabel('西湖区')
+
+    expect(changeResult).toBeDefined()
+    expect(changeResult?.fullLabel).toBe('浙江省/杭州市/西湖区')
+    expect(changeResult?.item).toBeDefined()
+    expect(changeResult?.item.value).toBe('xihu')
+    expect(changeResult?.item.label).toBe('西湖区')
+    expect(changeResult?.item.fullLabel).toBe('浙江省/杭州市/西湖区')
+
+    app.unmount()
+    host.remove()
+  })
+})

package/src/components/cascade/use-check.ts

@@ -68,10 +68,13 @@ export function useCheck(options: CheckOptions): UseCheckReturned {
     const checkedArr = Array.from(checkedSet.value)
     const targetValues = checkedArr.map((item) => item.value)
     const targetLabels = checkedArr.map((item) => item.label)
-    const targetItems = checkedArr.map((item) => item.data as Record<string, any>)
+    const targetItems = checkedArr.map((item) => {
+      const data = item.data as Record<string, any>
+      return data ? Object.assign({}, data, { fullLabel: item.label }) : data
+    })
     emit('update:modelValue', targetValues)
     emit('update:label', targetLabels.length ? targetLabels : undefined)
-    emit('change', targetItems)
+    emit('change', targetItems, targetLabels.length ? targetLabels : undefined)
   }
 
   const restTag = computed(() => {

package/src/components/cascade/use-select.ts

@@ -115,10 +115,11 @@ export function useSelect(options: SelectOptions): UseSelectReturned {
       : leafLabel
 
     const leafNode = leafKey ? dataMap.value.get(leafKey) : undefined
+    const changeItem = leafNode?.data ? { ...leafNode.data, fullLabel: targetLabel } : undefined
 
     emit('update:modelValue', targetValue)
     emit('update:label', targetLabel)
-    emit('change', leafNode?.data as Record<string, any> | undefined)
+    emit('change', changeItem, targetLabel)
   }
 
   /**

package/src/components/contextmenu/style.scss

@@ -92,31 +92,15 @@ $arrow-size: 12px;
 
     #{$b}__item:not(.is-disabled):not(.is-loading) > & {
       &:hover {
-        background-color: fn.component-var(
-          contextmenu,
-          item-hover-bg,
-          fn.use-var(bg-color, hover)
-        );
-        color: fn.component-var(
-          contextmenu,
-          item-hover-color,
-          fn.use-var(text-color, title)
-        );
+        background-color: fn.component-var(contextmenu, item-hover-bg, fn.use-var(bg-color, hover));
+        color: fn.component-var(contextmenu, item-hover-color, fn.use-var(text-color, title));
       }
     }
   }
 
   #{$b}__item.is-open:not(.is-disabled) > #{$b}__item-content {
-    background-color: fn.component-var(
-      contextmenu,
-      item-hover-bg,
-      fn.use-var(bg-color, hover)
-    );
-    color: fn.component-var(
-      contextmenu,
-      item-hover-color,
-      fn.use-var(text-color, title)
-    );
+    background-color: fn.component-var(contextmenu, item-hover-bg, fn.use-var(bg-color, hover));
+    color: fn.component-var(contextmenu, item-hover-color, fn.use-var(text-color, title));
   }
 
   @include m.e(icon-place) {

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/)
+  })
+})