@veltra/desktop 1.8.0 → 1.8.2

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/types/index.ts

@@ -83,3 +83,4 @@ export * from './file-viewer'
 export * from './collapse'
 export * from './segment'
 export * from './image-cropper'
+export * from './kanban'

package/src/types/kanban.ts

@@ -0,0 +1,63 @@
+import type { DeconstructValue } from '@veltra/utils'
+
+/** 看板列数据 */
+export interface KanbanColumnItem extends Record<string, any> {
+  /** 列标识（必填） */
+  key: string
+  /** 列标题 */
+  title?: string
+  /** 卡片数据（顺序即展示顺序，拖拽后更新） */
+  items: Record<string, any>[]
+}
+
+/** 看板组件属性 */
+export interface KanbanProps {
+  /** 列数据（含每列卡片），拖拽结果经 update:columns 写回 */
+  columns?: KanbanColumnItem[]
+  /**
+   * 卡片唯一标识字段名
+   * @default 'id'
+   */
+  cardKey?: string
+  /**
+   * 列标题与默认卡片内容的字段名
+   * @default 'title'
+   */
+  titleKey?: string
+  /** 是否禁用拖拽 */
+  disabled?: boolean
+  /**
+   * 列头是否显示卡片计数徽标
+   * @default true
+   */
+  countable?: boolean
+  /**
+   * 空列占位文案（空列仍可作为拖放目标）
+   * @default '暂无内容'
+   */
+  placeholder?: string
+}
+
+/** 看板组件事件 */
+export interface KanbanEmits {
+  /** 列数据更新（v-model:columns） */
+  (e: 'update:columns', columns: KanbanColumnItem[]): void
+  /** 拖拽结束后触发（含列内排序与跨列转移），返回最新列数据 */
+  (e: 'change', columns: KanbanColumnItem[]): void
+}
+
+/** 看板插槽 */
+export type KanbanSlots = {
+  /** 自定义卡片内容 */
+  card?: (props: { card: Record<string, any>; column: KanbanColumnItem; index: number }) => any
+  /** 自定义列头 */
+  header?: (props: { column: KanbanColumnItem; count: number }) => any
+  /** 空列占位 */
+  empty?: (props: { column: KanbanColumnItem }) => any
+}
+
+/** 看板组件暴露的属性和方法(组件内部使用) */
+export interface _KanbanExposed {}
+
+/** 看板组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+export type KanbanExposed = DeconstructValue<_KanbanExposed>

package/src/types/rich-text-editor.ts

@@ -3,6 +3,9 @@ import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
 /** 富文本数据格式 */
 export type RichTextFormat = 'html' | 'json'
 
+/** 图片上传函数：接收文件，返回上传后的服务器地址 */
+export type RichTextImageUploader = (file: File) => Promise<string>
+
 /** 工具栏项 */
 export type ToolbarItem =
   | 'bold'
@@ -16,6 +19,7 @@ export type ToolbarItem =
   | 'blockquote'
   | 'code-block'
   | 'link'
+  | 'image'
   | 'undo'
   | 'redo'
   | '|'
@@ -29,6 +33,8 @@ export interface RichTextEditorProps extends FormComponentProps {
   toolbar?: ToolbarItem[]
   /** 占位文本 */
   placeholder?: string
+  /** 是否允许图片输入（粘贴 / 拖拽 / 工具栏），默认 true */
+  image?: boolean
 }
 
 /** 富文本编辑器组件定义的事件 */
@@ -37,7 +43,14 @@ export interface RichTextEditorEmits {
 }
 
 /** 富文本编辑器组件暴露的属性和方法(组件内部使用) */
-export interface _RichTextEditorExposed {}
+export interface _RichTextEditorExposed {
+  /**
+   * 上传编辑器内所有待上传图片：对每张图片调用 upload 获取服务器地址并替换节点，
+   * 返回替换后的最终内容（格式遵循 format 属性）。
+   * 任一上传失败则整体拒绝，图片保持待上传状态可整体重试；已上传的不会重复上传
+   */
+  uploadImages: (upload: RichTextImageUploader) => Promise<string>
+}
 
 /** 富文本编辑器组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
 export type RichTextEditorExposed = DeconstructValue<_RichTextEditorExposed>