@veltra/desktop 1.7.19 → 1.8.1

package/src/components/multi-tree-select/style.scss

@@ -126,4 +126,10 @@ $root-name: multi-tree-select;
   @include m.e(content-tree) {
     max-height: 240px;
   }
+
+  @include m.e(loading) {
+    // 与树内容区同高，加载期间保持面板形态，避免塌缩成贴着输入框的小条
+    @include m.flex($justify: center, $align: center);
+    min-height: 240px;
+  }
 }

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

@@ -0,0 +1,193 @@
+import {
+  $insertNodes,
+  DecoratorNode,
+  type DOMConversionMap,
+  type DOMConversionOutput,
+  type DOMExportOutput,
+  type LexicalEditor,
+  type LexicalNode,
+  type NodeKey,
+  type SerializedLexicalNode,
+  type Spread
+} from 'lexical'
+
+let imageUid = 0
+
+function nextImageId(): string {
+  return `rte-img-${++imageUid}`
+}
+
+export interface SerializedImageNode extends Spread<
+  { src: string; alt: string; id: string },
+  SerializedLexicalNode
+> {}
+
+/**
+ * 图片节点：插入时 src 为本地 objectURL、__file 持有原始文件，提交前由宿主调用
+ * uploadImages 换成服务器地址。__file 不参与序列化，仅会话内有效。
+ * 本仓库为手写 Vue 绑定（无 React 适配层），不走 decorate 渲染管道，
+ * createDOM 直接返回 <img> 元素。
+ */
+export class ImageNode extends DecoratorNode<void> {
+  __src: string
+  __alt: string
+  __id: string
+  __file: File | null
+
+  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)
+  }
+
+  static override importJSON(serializedNode: SerializedImageNode): ImageNode {
+    return $createImageNode({
+      src: serializedNode.src,
+      alt: serializedNode.alt,
+      id: serializedNode.id
+    })
+  }
+
+  constructor(src: string, alt = '', id = nextImageId(), file: File | null = null, key?: NodeKey) {
+    super(key)
+    this.__src = src
+    this.__alt = alt
+    this.__id = id
+    this.__file = file
+  }
+
+  static override importDOM(): DOMConversionMap | null {
+    return { img: () => ({ conversion: convertImageElement, priority: 0 }) }
+  }
+
+  override exportDOM(): DOMExportOutput {
+    const element = document.createElement('img')
+    element.setAttribute('src', this.__src)
+    element.setAttribute('class', 'u-rte-image')
+    element.setAttribute('alt', this.__alt)
+    element.setAttribute('data-rte-image-id', this.__id)
+    return { element }
+  }
+
+  override exportJSON(): SerializedImageNode {
+    return { type: 'u-image', version: 1, src: this.__src, alt: this.__alt, id: this.__id }
+  }
+
+  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
+  }
+
+  override updateDOM(prevNode: ImageNode, element: HTMLElement): boolean {
+    const img = element as HTMLImageElement
+    if (prevNode.__src !== this.__src) img.src = this.__src
+    if (prevNode.__alt !== this.__alt) img.alt = this.__alt
+    return false
+  }
+
+  /** Vue 环境无 React 渲染管道，装饰内容即 createDOM 返回的元素本身 */
+  override decorate(): null {
+    return null
+  }
+
+  getSrc(): string {
+    return this.__src
+  }
+
+  getFile(): File | null {
+    return this.__file
+  }
+
+  /** 替换为服务器地址，同时清除待上传标记（已上传的节点不再重复上传） */
+  setSrc(src: string): void {
+    const self = this.getWritable()
+    self.__src = src
+    self.__file = null
+  }
+}
+
+function convertImageElement(domNode: HTMLElement): DOMConversionOutput {
+  const src = domNode.getAttribute('src')
+  if (!src) return { node: null }
+  return {
+    node: $createImageNode({
+      src,
+      alt: domNode.getAttribute('alt') ?? '',
+      id: domNode.getAttribute('data-rte-image-id') ?? undefined
+    })
+  }
+}
+
+export function $createImageNode(options: {
+  src: string
+  alt?: string
+  id?: string
+  file?: File | null
+}): ImageNode {
+  return new ImageNode(
+    options.src,
+    options.alt ?? '',
+    options.id ?? nextImageId(),
+    options.file ?? null
+  )
+}
+
+export function $isImageNode(node: LexicalNode | null | undefined): node is ImageNode {
+  return node instanceof ImageNode
+}
+
+// 各编辑器实例创建的图片 objectURL，用于节点删除 / 组件卸载时回收
+const objectUrls = new WeakMap<LexicalEditor, Set<string>>()
+
+function getImageObjectUrls(editor: LexicalEditor): Set<string> {
+  let urls = objectUrls.get(editor)
+  if (!urls) {
+    urls = new Set()
+    objectUrls.set(editor, urls)
+  }
+  return urls
+}
+
+/** 插入图片文件：objectURL 即时预览，File 挂在节点上等待提交时上传。返回插入的图片数量 */
+export function insertImageFiles(editor: LexicalEditor, files: File[] | FileList): number {
+  const images = Array.from(files).filter((file) => file.type.startsWith('image/'))
+  if (!images.length) return 0
+
+  const urls = getImageObjectUrls(editor)
+
+  editor.update(() => {
+    const nodes = images.map((file) => {
+      const url = URL.createObjectURL(file)
+      urls.add(url)
+      return $createImageNode({ src: url, alt: file.name, file })
+    })
+    $insertNodes(nodes)
+  })
+
+  return images.length
+}
+
+/** 回收已从内容中移除的图片 objectURL，aliveUrls 为当前内容中仍存活的图片地址 */
+export function gcImageObjectUrls(editor: LexicalEditor, aliveUrls: Set<string>): void {
+  const urls = objectUrls.get(editor)
+  if (!urls?.size) return
+  urls.forEach((url) => {
+    if (!aliveUrls.has(url)) {
+      URL.revokeObjectURL(url)
+      urls.delete(url)
+    }
+  })
+}
+
+/** 回收该编辑器创建的全部图片 objectURL（组件卸载时调用） */
+export function revokeImageObjectUrls(editor: LexicalEditor): void {
+  const urls = objectUrls.get(editor)
+  urls?.forEach((url) => URL.revokeObjectURL(url))
+  objectUrls.delete(editor)
+}

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

@@ -66,7 +66,9 @@ const DEFAULT_TOOLBAR: ToolbarItem[] = [
   '|',
   'blockquote',
   '|',
-  'link'
+  'link',
+  '|',
+  'image'
 ]
 </script>
 
@@ -80,10 +82,33 @@ import { HeadingNode, QuoteNode } from '@lexical/rich-text'
 import { useFormFallbackProps } from '@veltra/compositions'
 import { bem } from '@veltra/utils'
 import { injectFormContext } from '@veltra/utils'
-import { createEditor, $getRoot, $createParagraphNode, type LexicalEditor } from 'lexical'
+import {
+  $createRangeSelection,
+  $getNodeByKey,
+  $getRoot,
+  $createParagraphNode,
+  $nodesOfType,
+  $setSelection,
+  COMMAND_PRIORITY_HIGH,
+  DROP_COMMAND,
+  PASTE_COMMAND,
+  createEditor,
+  type LexicalEditor
+} from 'lexical'
 import { computed, onBeforeUnmount, onMounted, ref, shallowRef, useTemplateRef, watch } from 'vue'
 
-import type { RichTextEditorProps } from '../../types'
+import type {
+  RichTextEditorProps,
+  RichTextImageUploader,
+  _RichTextEditorExposed
+} from '../../types'
+import {
+  ImageNode,
+  $isImageNode,
+  gcImageObjectUrls,
+  insertImageFiles,
+  revokeImageObjectUrls
+} from './image-node'
 import Toolbar from './toolbar.vue'
 
 const props = withDefaults(defineProps<RichTextEditorProps>(), {
@@ -91,7 +116,8 @@ const props = withDefaults(defineProps<RichTextEditorProps>(), {
   readonly: undefined,
   format: 'html',
   toolbar: () => DEFAULT_TOOLBAR,
-  placeholder: ''
+  placeholder: '',
+  image: true
 })
 
 const model = defineModel<string>()
@@ -115,7 +141,8 @@ const className = computed<string[]>(() => {
 })
 
 const toolbarItems = computed<ToolbarItem[]>(() => {
-  return props.toolbar ?? DEFAULT_TOOLBAR
+  const items = props.toolbar ?? DEFAULT_TOOLBAR
+  return props.image ? items : items.filter((item) => item !== 'image')
 })
 
 const editorContainer = useTemplateRef('editorContainer')
@@ -130,7 +157,7 @@ function initEditor() {
   const editorInstance = createEditor({
     namespace: 'URichTextEditor',
     theme: LEXICAL_THEME,
-    nodes: [HeadingNode, QuoteNode, ListNode, ListItemNode, LinkNode, AutoLinkNode],
+    nodes: [HeadingNode, QuoteNode, ListNode, ListItemNode, LinkNode, AutoLinkNode, ImageNode],
     editable: !isDisabled.value && !isReadonly.value,
     onError: (error: Error) => {
       console.error('Lexical error:', error)
@@ -144,6 +171,47 @@ function initEditor() {
   cleanupFns.push(registerList(editorInstance))
   cleanupFns.push(registerHistory(editorInstance, createEmptyHistoryState(), 300))
 
+  // Image input: paste & drop
+  const acceptsImage = () => props.image && !isDisabled.value && !isReadonly.value
+
+  cleanupFns.push(
+    editorInstance.registerCommand(
+      PASTE_COMMAND,
+      (event) => {
+        if (!acceptsImage()) return false
+        if (insertImageFiles(editorInstance, event.clipboardData?.files ?? []) > 0) {
+          event.preventDefault()
+          return true
+        }
+        return false
+      },
+      COMMAND_PRIORITY_HIGH
+    ),
+    editorInstance.registerCommand(
+      DROP_COMMAND,
+      (event) => {
+        if (!acceptsImage()) return false
+        const files = event.dataTransfer?.files
+        if (!files?.length) return false
+        // 先把光标落到落点，再插入
+        const range = document.caretRangeFromPoint(event.clientX, event.clientY)
+        if (range) {
+          editorInstance.update(() => {
+            const selection = $createRangeSelection()
+            selection.applyDOMRange(range)
+            $setSelection(selection)
+          })
+        }
+        if (insertImageFiles(editorInstance, files) > 0) {
+          event.preventDefault()
+          return true
+        }
+        return false
+      },
+      COMMAND_PRIORITY_HIGH
+    )
+  )
+
   // Set initial value
   if (model.value) {
     setEditorContent(editorInstance, model.value)
@@ -155,17 +223,16 @@ function initEditor() {
       editorState.read(
         () => {
           const root = $getRoot()
-          const textContent = root.getTextContent()
-          showPlaceholder.value = textContent.trim().length === 0
+          const imageNodes = $nodesOfType(ImageNode)
+          showPlaceholder.value =
+            root.getTextContent().trim().length === 0 && imageNodes.length === 0
+
+          // 回收已从内容中移除的图片 objectURL
+          gcImageObjectUrls(editorInstance, new Set(imageNodes.map((node) => node.getSrc())))
 
           if (isComposing) return
 
-          let value: string
-          if (props.format === 'json') {
-            value = JSON.stringify(editorState.toJSON())
-          } else {
-            value = $generateHtmlFromNodes(editorInstance)
-          }
+          const value = serializeContent(editorInstance)
 
           // Avoid circular updates: only emit if content really changed
           if (value !== model.value) {
@@ -225,6 +292,47 @@ function setEditorContent(editorInstance: LexicalEditor, value: string) {
   })
 }
 
+function serializeContent(editorInstance: LexicalEditor): string {
+  return editorInstance.read(() =>
+    props.format === 'json'
+      ? JSON.stringify(editorInstance.getEditorState().toJSON())
+      : $generateHtmlFromNodes(editorInstance)
+  )
+}
+
+let isUploadingImages = false
+
+async function uploadImages(upload: RichTextImageUploader): Promise<string> {
+  const editorInstance = editor.value
+  if (!editorInstance) return model.value ?? ''
+  if (isUploadingImages) throw new Error('图片正在上传中')
+
+  const pending = editorInstance.getEditorState().read(() =>
+    $nodesOfType(ImageNode)
+      .filter((node) => node.getFile())
+      .map((node) => ({ key: node.getKey(), file: node.getFile() as File }))
+  )
+
+  if (pending.length) {
+    isUploadingImages = true
+    try {
+      const urls = await Promise.all(pending.map(({ file }) => upload(file)))
+      editorInstance.update(() => {
+        pending.forEach(({ key }, index) => {
+          const node = $getNodeByKey(key)
+          if ($isImageNode(node)) node.setSrc(urls[index])
+        })
+      })
+    } finally {
+      isUploadingImages = false
+    }
+  }
+
+  return serializeContent(editorInstance)
+}
+
+defineExpose<_RichTextEditorExposed>({ uploadImages })
+
 // Watch external model changes
 watch(model, (newVal) => {
   if (!editor.value || isComposing) return
@@ -232,22 +340,15 @@ watch(model, (newVal) => {
   const editorInstance = editor.value
 
   // Compare current content to avoid circular updates
-  editorInstance.read(() => {
-    let currentValue: string
-    if (props.format === 'json') {
-      currentValue = JSON.stringify(editorInstance.getEditorState().toJSON())
-    } else {
-      currentValue = $generateHtmlFromNodes(editorInstance)
-    }
+  const currentValue = serializeContent(editorInstance)
 
-    if (currentValue !== newVal) {
-      isComposing = true
-      setEditorContent(editorInstance, newVal ?? '')
-      queueMicrotask(() => {
-        isComposing = false
-      })
-    }
-  })
+  if (currentValue !== newVal) {
+    isComposing = true
+    setEditorContent(editorInstance, newVal ?? '')
+    queueMicrotask(() => {
+      isComposing = false
+    })
+  }
 })
 
 // Watch disabled/readonly changes
@@ -264,6 +365,7 @@ onMounted(() => {
 onBeforeUnmount(() => {
   cleanupFns.forEach((fn) => fn())
   cleanupFns = []
+  if (editor.value) revokeImageObjectUrls(editor.value)
   editor.value = null
 })
 </script>

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

@@ -381,3 +381,10 @@ $root-name: rich-text-editor;
     text-decoration: none;
   }
 }
+
+// Image
+.u-rte-image {
+  max-width: 100%;
+  height: auto;
+  vertical-align: bottom;
+}

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

@@ -35,6 +35,8 @@
         <span :class="cls.e('toolbar-icon')" v-html="getIcon(item)"></span>
       </button>
     </template>
+
+    <input ref="imageInput" type="file" accept="image/*" multiple hidden @change="onImageChange" />
   </div>
 </template>
 
@@ -56,9 +58,10 @@ import {
   $createParagraphNode,
   type RangeSelection
 } from 'lexical'
-import { ref, onBeforeUnmount, watch } from 'vue'
+import { ref, onBeforeUnmount, useTemplateRef, watch } from 'vue'
 
 import type { ToolbarItem } from '../../types'
+import { insertImageFiles } from './image-node'
 
 const props = defineProps<{
   editor: LexicalEditor | null
@@ -68,6 +71,8 @@ const props = defineProps<{
 
 const cls = bem('rich-text-editor')
 
+const imageInput = useTemplateRef('imageInput')
+
 // Active states
 const isBold = ref(false)
 const isItalic = ref(false)
@@ -205,6 +210,9 @@ function onToolbarAction(item: ToolbarItem) {
     case 'link':
       toggleLink(editorInstance)
       break
+    case 'image':
+      imageInput.value?.click()
+      break
     case 'undo':
       editorInstance.dispatchCommand(UNDO_COMMAND, undefined)
       break
@@ -217,6 +225,15 @@ function onToolbarAction(item: ToolbarItem) {
   editorInstance.focus()
 }
 
+function onImageChange(event: Event) {
+  const input = event.target as HTMLInputElement
+  if (input.files?.length && props.editor && !props.disabled) {
+    insertImageFiles(props.editor, input.files)
+  }
+  // 允许重复选择同一文件
+  input.value = ''
+}
+
 function onHeadingChange(event: Event) {
   const editorInstance = props.editor
   if (!editorInstance || props.disabled) return
@@ -271,6 +288,7 @@ function getTitle(item: ToolbarItem): string {
     blockquote: '引用',
     'code-block': '代码块',
     link: '链接',
+    image: '图片',
     undo: '撤销',
     redo: '重做'
   }
@@ -296,6 +314,8 @@ function getIcon(item: ToolbarItem): string {
     'code-block':
       '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="18" rx="2"/><path d="m8 10-3 2 3 2"/><path d="m16 10 3 2-3 2"/><path d="m13 7-2 10"/></svg>',
     link: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>',
+    image:
+      '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>',
     undo: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/></svg>',
     redo: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13"/></svg>'
   }

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

@@ -218,4 +218,82 @@ describe('USelect', () => {
       unmount()
     }
   })
+
+  it('loads options from a remote function with loading state', async () => {
+    let resolveRemote!: (options: Record<string, any>[]) => void
+    const calls: string[] = []
+    const { host, unmount } = mountSelect({
+      options: (qs: string) => {
+        calls.push(qs)
+        return new Promise((resolve) => {
+          resolveRemote = resolve
+        })
+      }
+    })
+
+    try {
+      // 挂载即以空串调用一次
+      expect(calls).toEqual([''])
+
+      await openDropdown(host)
+      expect(document.body.querySelector('.u-select__loading')).toBeTruthy()
+      expect(queryOptions()).toHaveLength(0)
+
+      resolveRemote([{ label: '远程A', value: 'a' }])
+      await sleep(50)
+      expect(document.body.querySelector('.u-select__loading')).toBeFalsy()
+      expect(queryOptions().map((el) => el.textContent)).toEqual(['远程A'])
+    } finally {
+      unmount()
+    }
+  })
+
+  it('queries the remote function on input', async () => {
+    const calls: string[] = []
+    const { host, unmount } = mountSelect({
+      options: (qs: string) => {
+        calls.push(qs)
+        return Promise.resolve(
+          qs ? [{ label: '上海', value: 'shanghai' }] : [{ label: '北京', value: 'beijing' }]
+        )
+      }
+    })
+
+    try {
+      await openDropdown(host)
+      await typeQuery(host, '上海')
+      expect(calls).toEqual(['', '上海'])
+      expect(queryOptions().map((el) => el.textContent)).toEqual(['上海'])
+    } finally {
+      unmount()
+    }
+  })
+
+  it('discards stale remote responses when a newer query resolves first', async () => {
+    const pending: ((options: Record<string, any>[]) => void)[] = []
+    const { host, unmount } = mountSelect({
+      options: (qs: string) =>
+        new Promise((resolve) => {
+          pending.push(resolve)
+        })
+    })
+
+    try {
+      await openDropdown(host)
+      await typeQuery(host, '北')
+      expect(pending).toHaveLength(2)
+
+      // 新查询先返回
+      pending[1]!([{ label: '北京', value: 'beijing' }])
+      await sleep(20)
+      expect(queryOptions().map((el) => el.textContent)).toEqual(['北京'])
+
+      // 慢的旧响应（初始空串查询）后返回，不能覆盖新结果
+      pending[0]!([{ label: '旧数据', value: 'old' }])
+      await sleep(20)
+      expect(queryOptions().map((el) => el.textContent)).toEqual(['北京'])
+    } finally {
+      unmount()
+    }
+  })
 })

package/src/components/select/select.vue

@@ -58,8 +58,11 @@
         单选列表。虚拟化启用时，内容容器 height 由 useVirtualizer 命令式写入；
         此处 content-style 仅承担 grid 相关样式，避免 height 变化触发模板重渲染。
       -->
+      <div v-if="loading" :class="cls.e('loading')">
+        <ULoading type="dual-ring" />
+      </div>
       <u-scroll
-        v-if="options.length"
+        v-else-if="options.length"
         tag="ul"
         :class="cls.e('options')"
         ref="scrollRef"
@@ -137,6 +140,7 @@ import { UDropdown } from '../dropdown'
 import { UEmpty } from '../empty'
 import { UIcon } from '../icon'
 import { UInput } from '../input'
+import { ULoading } from '../loading'
 import { UScroll } from '../scroll'
 import { useKeyboard } from './use-keyboard'
 import { useOptions } from './use-options'
@@ -194,8 +198,14 @@ const filterable = computed(() => {
   return props.filterable || typeof props.options === 'function'
 })
 
-const { queryString, options, allOptions, temOptionsToCreatedOptions, clearCreatedOptions } =
-  useOptions({ props })
+const {
+  queryString,
+  loading,
+  options,
+  allOptions,
+  temOptionsToCreatedOptions,
+  clearCreatedOptions
+} = useOptions({ props })
 
 const dropdownVisible = shallowRef(false)
 

package/src/components/select/style.scss

@@ -116,4 +116,10 @@ $root-name: select;
     text-align: center;
     padding: fn.use-var(gap, small) 0;
   }
+
+  @include m.e(loading) {
+    // 与选项内容区同高，加载期间保持面板形态，避免塌缩成贴着输入框的小条
+    @include m.flex($justify: center, $align: center);
+    min-height: 240px;
+  }
 }