@veltra/desktop 1.8.2 → 1.8.4

package/src/components/file-viewer/__test__/helper.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import { FILE_VIEWER_KIND_LABEL, inferKind } from '../helper'
 

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

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 import { createApp, defineComponent, h, nextTick, reactive, ref } from 'vue'
 
 import { UInput } from '../../input'

package/src/components/form/__test__/is-field-modified.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import { isFieldModified } from '../is-field-modified'
 

package/src/components/form-item/__test__/form-item.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 import { createApp, h, nextTick, reactive, ref } from 'vue'
 
 import { UForm } from '../../form'

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

@@ -1,4 +1,4 @@
-import { afterEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vite-plus/test'
 
 import { cropToResult, drawCropToCanvas } from '../draw-crop'
 

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

@@ -1,4 +1,4 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vite-plus/test'
 import { createApp, h, nextTick, ref, shallowRef } from 'vue'
 
 import type { ImageCropperChangePayload, ImageCropperExposed } from '../../../types'

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

@@ -1,4 +1,4 @@
-import { afterEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vite-plus/test'
 import { createApp, shallowRef } from 'vue'
 
 import { useTransform } from '../use-transform'

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

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 import { createApp, h, nextTick, ref } from 'vue'
 
 import type { KanbanColumnItem } from '../../types'

package/src/components/message-confirm/__test__/message-confirm.test.ts

@@ -1,5 +1,5 @@
 import { zIndex } from '@veltra/utils'
-import { afterEach, describe, expect, it } from 'vitest'
+import { afterEach, describe, expect, it } from 'vite-plus/test'
 import { nextTick } from 'vue'
 
 import { messageConfirm } from '../message-confirm'

package/src/components/multi-tree-select/__test__/multi-tree-select.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 import { createApp, h, nextTick, ref, type Ref } from 'vue'
 
 import UMultiTreeSelect from '../multi-tree-select.vue'

package/src/components/number-input/__test__/number-input.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 import { createApp, h, nextTick, ref } from 'vue'
 
 import UNumberInput from '../number-input.vue'

package/src/components/number-range-input/__test__/number-range-input.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 import { createApp, h, nextTick, ref } from 'vue'
 
 import type { NumberRangeTuple } from '../../../types'

package/src/components/palette/__test__/color-transform.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import { HEX2RGBA } from '../color-transform'
 

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

@@ -1,4 +1,4 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vite-plus/test'
 import { createApp, h, nextTick, ref } from 'vue'
 
 import UPalette from '../palette.vue'

package/src/components/password-input/__test__/password-input.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 import { createApp, h, nextTick, ref } from 'vue'
 
 import UPasswordInput from '../password-input.vue'

package/src/components/radio-group/__test__/radio-group.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 import { createApp, h, nextTick, ref } from 'vue'
 
 import URadioGroup from '../radio-group.vue'

package/src/components/rich-text-editor/__test__/image-node.test.ts

@@ -0,0 +1,140 @@
+import { createEditor, type LexicalEditor } from 'lexical'
+import { afterAll, beforeAll, describe, expect, it } from 'vite-plus/test'
+
+import { $createImageNode, $isImageNode, ImageNode } from '../image-node'
+
+let editor: LexicalEditor
+let container: HTMLDivElement
+
+beforeAll(() => {
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  editor = createEditor({
+    namespace: 'test',
+    nodes: [ImageNode],
+    onError: (error) => {
+      throw error
+    }
+  })
+  editor.setRootElement(container)
+})
+
+afterAll(() => {
+  editor.setRootElement(null)
+  container.remove()
+})
+
+function createImage(options: { src?: string; width?: number; height?: number } = {}) {
+  return $createImageNode({
+    src: options.src ?? 'https://cdn.example.com/a.png',
+    alt: '示例图',
+    width: options.width,
+    height: options.height
+  })
+}
+
+/** 节点构造与写方法要求可写上下文（Lexical 0.50 在 read 回调内禁止 new 节点） */
+function inUpdate<T>(fn: () => T): T {
+  let result!: T
+  editor.update(() => {
+    result = fn()
+  })
+  return result
+}
+
+describe('ImageNode', () => {
+  it('createDOM 返回 wrapper + img + 缩放手柄，未设置尺寸时无内联宽高', () => {
+    const { wrapper, key } = inUpdate(() => {
+      const node = createImage()
+      return { wrapper: node.createDOM(), key: node.getKey() }
+    })
+
+    expect(wrapper.className).toBe('u-rte-image-wrap')
+    expect(wrapper.getAttribute('data-rte-image-key')).toBe(key)
+
+    const img = wrapper.querySelector('img')
+    expect(img?.className).toBe('u-rte-image')
+    expect(img?.getAttribute('src')).toBe('https://cdn.example.com/a.png')
+    expect(img?.getAttribute('alt')).toBe('示例图')
+    expect(img?.style.width).toBe('')
+    expect(img?.style.height).toBe('')
+
+    expect(wrapper.querySelector('.u-rte-image-resizer')).not.toBeNull()
+  })
+
+  it('createDOM 应用节点上的显示尺寸', () => {
+    const img = inUpdate(() =>
+      createImage({ width: 320, height: 180 }).createDOM().querySelector('img')!
+    )
+
+    expect(img.style.width).toBe('320px')
+    expect(img.style.height).toBe('180px')
+  })
+
+  it('updateDOM 在尺寸变化时同步 img 内联样式', () => {
+    const { img } = inUpdate(() => {
+      const node = createImage({ width: 320, height: 180 })
+      const wrapper = node.createDOM()
+      const resized = createImage({ width: 480, height: 270 })
+      resized.updateDOM(node, wrapper)
+      return { img: wrapper.querySelector('img')! }
+    })
+
+    expect(img.style.width).toBe('480px')
+    expect(img.style.height).toBe('270px')
+  })
+
+  it('exportDOM 仅在设置尺寸时输出 width / height 属性', () => {
+    const { sizedEl, unsizedEl } = inUpdate(() => ({
+      sizedEl: createImage({ width: 480, height: 270 }).exportDOM().element as HTMLImageElement,
+      unsizedEl: createImage().exportDOM().element as HTMLImageElement
+    }))
+
+    expect(sizedEl.getAttribute('width')).toBe('480')
+    expect(sizedEl.getAttribute('height')).toBe('270')
+    expect(sizedEl.className).toBe('u-rte-image')
+
+    expect(unsizedEl.hasAttribute('width')).toBe(false)
+    expect(unsizedEl.hasAttribute('height')).toBe(false)
+  })
+
+  it('importDOM 读取 img 的 width / height 属性，缺失时为 0', () => {
+    const { sized, unsized } = inUpdate(() => {
+      const conversion = ImageNode.importDOM()!.img().conversion
+      const dom = document.createElement('img')
+      dom.setAttribute('src', 'https://cdn.example.com/a.png')
+      dom.setAttribute('width', '640')
+      dom.setAttribute('height', '360')
+
+      const noSizeDom = document.createElement('img')
+      noSizeDom.setAttribute('src', 'https://cdn.example.com/b.png')
+
+      return { sized: conversion(dom).node, unsized: conversion(noSizeDom).node }
+    })
+
+    expect($isImageNode(sized)).toBe(true)
+    expect(sized!.exportJSON()).toMatchObject({
+      src: 'https://cdn.example.com/a.png',
+      width: 640,
+      height: 360
+    })
+    expect(unsized!.exportJSON()).toMatchObject({ width: 0, height: 0 })
+  })
+
+  it('exportJSON / importJSON roundtrip 保留尺寸', () => {
+    const json = inUpdate(() => createImage({ width: 480, height: 270 }).exportJSON())
+
+    const restored = inUpdate(() => ImageNode.importJSON(json).exportJSON())
+    expect(restored).toEqual(json)
+  })
+
+  it('editor update 中 setWidthAndHeight 写入尺寸', () => {
+    const json = inUpdate(() => {
+      const node = createImage()
+      node.setWidthAndHeight(200, 100)
+      return node.exportJSON()
+    })
+
+    expect(json).toMatchObject({ width: 200, height: 100 })
+  })
+})

package/src/components/rich-text-editor/image-node.ts

@@ -18,44 +18,68 @@ function nextImageId(): string {
 }
 
 export interface SerializedImageNode extends Spread<
-  { src: string; alt: string; id: string },
+  { src: string; alt: string; id: string; width: number; height: number },
   SerializedLexicalNode
 > {}
 
 /**
  * 图片节点：插入时 src 为本地 objectURL、__file 持有原始文件，提交前由宿主调用
  * uploadImages 换成服务器地址。__file 不参与序列化，仅会话内有效。
+ * width / height 为显示尺寸（px），0 表示未设置、按图片自然尺寸（受 max-width 约束）。
  * 本仓库为手写 Vue 绑定（无 React 适配层），不走 decorate 渲染管道，
- * createDOM 直接返回 <img> 元素。
+ * createDOM 返回 wrapper：`<span><img><span 手柄/></span>`，选中与拖拽缩放
+ * 由组件层（use-image-resize）基于 data-rte-image-key 驱动。
  */
 export class ImageNode extends DecoratorNode<void> {
   __src: string
   __alt: string
   __id: string
   __file: File | null
+  __width: number
+  __height: number
 
   static override getType(): string {
     return 'u-image'
   }
 
   static override clone(node: ImageNode): ImageNode {
-    return new ImageNode(node.__src, node.__alt, node.__id, node.__file, node.__key)
+    return new ImageNode(
+      node.__src,
+      node.__alt,
+      node.__id,
+      node.__file,
+      node.__width,
+      node.__height,
+      node.__key
+    )
   }
 
   static override importJSON(serializedNode: SerializedImageNode): ImageNode {
     return $createImageNode({
       src: serializedNode.src,
       alt: serializedNode.alt,
-      id: serializedNode.id
+      id: serializedNode.id,
+      width: serializedNode.width,
+      height: serializedNode.height
     })
   }
 
-  constructor(src: string, alt = '', id = nextImageId(), file: File | null = null, key?: NodeKey) {
+  constructor(
+    src: string,
+    alt = '',
+    id = nextImageId(),
+    file: File | null = null,
+    width = 0,
+    height = 0,
+    key?: NodeKey
+  ) {
     super(key)
     this.__src = src
     this.__alt = alt
     this.__id = id
     this.__file = file
+    this.__width = width
+    this.__height = height
   }
 
   static override importDOM(): DOMConversionMap | null {
@@ -68,26 +92,58 @@ export class ImageNode extends DecoratorNode<void> {
     element.setAttribute('class', 'u-rte-image')
     element.setAttribute('alt', this.__alt)
     element.setAttribute('data-rte-image-id', this.__id)
+    if (this.__width) element.setAttribute('width', String(this.__width))
+    if (this.__height) element.setAttribute('height', String(this.__height))
     return { element }
   }
 
   override exportJSON(): SerializedImageNode {
-    return { type: 'u-image', version: 1, src: this.__src, alt: this.__alt, id: this.__id }
+    return {
+      type: 'u-image',
+      version: 1,
+      src: this.__src,
+      alt: this.__alt,
+      id: this.__id,
+      width: this.__width,
+      height: this.__height
+    }
   }
 
   override createDOM(): HTMLElement {
-    const element = document.createElement('img')
-    element.className = 'u-rte-image'
-    element.src = this.__src
-    element.alt = this.__alt
-    element.draggable = false
-    return element
+    const wrapper = document.createElement('span')
+    wrapper.className = 'u-rte-image-wrap'
+    wrapper.contentEditable = 'false'
+    wrapper.setAttribute('data-rte-image-key', this.__key)
+
+    const img = document.createElement('img')
+    img.className = 'u-rte-image'
+    img.src = this.__src
+    img.alt = this.__alt
+    img.draggable = false
+    if (this.__width) img.style.width = `${this.__width}px`
+    if (this.__height) img.style.height = `${this.__height}px`
+
+    const handle = document.createElement('span')
+    handle.className = 'u-rte-image-resizer'
+    handle.setAttribute('aria-hidden', 'true')
+
+    wrapper.append(img, handle)
+    return wrapper
   }
 
   override updateDOM(prevNode: ImageNode, element: HTMLElement): boolean {
-    const img = element as HTMLImageElement
+    const img = element.querySelector('img')
+    if (!img) return false
     if (prevNode.__src !== this.__src) img.src = this.__src
     if (prevNode.__alt !== this.__alt) img.alt = this.__alt
+    if (prevNode.__width !== this.__width) {
+      if (this.__width) img.style.width = `${this.__width}px`
+      else img.style.removeProperty('width')
+    }
+    if (prevNode.__height !== this.__height) {
+      if (this.__height) img.style.height = `${this.__height}px`
+      else img.style.removeProperty('height')
+    }
     return false
   }
 
@@ -110,6 +166,13 @@ export class ImageNode extends DecoratorNode<void> {
     self.__src = src
     self.__file = null
   }
+
+  /** 写入显示尺寸（拖拽缩放结束时调用），px，0 表示恢复自然尺寸 */
+  setWidthAndHeight(width: number, height: number): void {
+    const self = this.getWritable()
+    self.__width = width
+    self.__height = height
+  }
 }
 
 function convertImageElement(domNode: HTMLElement): DOMConversionOutput {
@@ -119,7 +182,9 @@ function convertImageElement(domNode: HTMLElement): DOMConversionOutput {
     node: $createImageNode({
       src,
       alt: domNode.getAttribute('alt') ?? '',
-      id: domNode.getAttribute('data-rte-image-id') ?? undefined
+      id: domNode.getAttribute('data-rte-image-id') ?? undefined,
+      width: parseInt(domNode.getAttribute('width') ?? '') || 0,
+      height: parseInt(domNode.getAttribute('height') ?? '') || 0
     })
   }
 }
@@ -129,12 +194,16 @@ export function $createImageNode(options: {
   alt?: string
   id?: string
   file?: File | null
+  width?: number
+  height?: number
 }): ImageNode {
   return new ImageNode(
     options.src,
     options.alt ?? '',
     options.id ?? nextImageId(),
-    options.file ?? null
+    options.file ?? null,
+    options.width ?? 0,
+    options.height ?? 0
   )
 }
 

package/src/components/rich-text-editor/rich-text-editor.vue

@@ -88,6 +88,8 @@ import {
   $getRoot,
   $createParagraphNode,
   $nodesOfType,
+  $getSelection,
+  $isNodeSelection,
   $setSelection,
   COMMAND_PRIORITY_HIGH,
   DROP_COMMAND,
@@ -110,6 +112,7 @@ import {
   revokeImageObjectUrls
 } from './image-node'
 import Toolbar from './toolbar.vue'
+import { useImageResize } from './use-image-resize'
 
 const props = withDefaults(defineProps<RichTextEditorProps>(), {
   disabled: undefined,
@@ -151,6 +154,11 @@ const showPlaceholder = ref(true)
 let isComposing = false
 let cleanupFns: (() => void)[] = []
 
+const acceptsImage = () => props.image && !isDisabled.value && !isReadonly.value
+
+// 图片选中 / 拖拽缩放交互
+useImageResize(editor, acceptsImage)
+
 function initEditor() {
   if (!editorContainer.value) return
 
@@ -172,8 +180,6 @@ function initEditor() {
   cleanupFns.push(registerHistory(editorInstance, createEmptyHistoryState(), 300))
 
   // Image input: paste & drop
-  const acceptsImage = () => props.image && !isDisabled.value && !isReadonly.value
-
   cleanupFns.push(
     editorInstance.registerCommand(
       PASTE_COMMAND,
@@ -353,8 +359,13 @@ watch(model, (newVal) => {
 
 // Watch disabled/readonly changes
 watch([isDisabled, isReadonly], () => {
-  if (editor.value) {
-    editor.value.setEditable(!isDisabled.value && !isReadonly.value)
+  if (!editor.value) return
+  editor.value.setEditable(!isDisabled.value && !isReadonly.value)
+  if (isDisabled.value || isReadonly.value) {
+    // 切出可编辑态时取消可能残留的图片选中
+    editor.value.update(() => {
+      if ($isNodeSelection($getSelection())) $setSelection(null)
+    })
   }
 })
 

package/src/components/rich-text-editor/style.scss

@@ -388,3 +388,38 @@ $root-name: rich-text-editor;
   height: auto;
   vertical-align: bottom;
 }
+
+// 编辑器内图片 wrapper：承载选中态描边与缩放手柄（宿主直接渲染导出 HTML 时无此结构）
+.u-rte-image-wrap {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  vertical-align: bottom;
+  line-height: 0;
+
+  .u-rte-image {
+    display: block;
+  }
+
+  &.is-selected .u-rte-image {
+    outline: 2px solid fn.use-var(color, primary);
+    border-radius: 2px;
+  }
+}
+
+.u-rte-image-resizer {
+  position: absolute;
+  right: -5px;
+  bottom: -5px;
+  display: none;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: fn.use-var(bg-color, top);
+  border: 2px solid fn.use-var(color, primary);
+  cursor: nwse-resize;
+
+  .u-rte-image-wrap.is-selected & {
+    display: block;
+  }
+}