@veltra/desktop 1.8.0 → 1.8.1

package/dist/types/kanban.d.ts

@@ -0,0 +1,69 @@
+import { DeconstructValue } from "@veltra/utils";
+//#region src/types/kanban.d.ts
+/** 看板列数据 */
+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>;
+//#endregion
+//# sourceMappingURL=kanban.d.ts.map

package/dist/types/rich-text-editor.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "homepage": "https://github.com/cabinet-fe/ultra-ui#readme",
   "bugs": {
     "url": "https://github.com/cabinet-fe/ultra-ui/issues"

package/src/components/condition-editor/__test__/condition-editor.test.ts

@@ -0,0 +1,61 @@
+import { describe, expect, it } from 'vitest'
+import { createApp, defineComponent, h, nextTick, ref } from 'vue'
+
+import { UForm } from '../../form'
+import UConditionEditor from '../condition-editor.vue'
+
+describe('UConditionEditor 在 UForm 中的状态下发', () => {
+  async function mountInForm() {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+
+    const formReadonly = ref(false)
+    const formDisabled = ref(false)
+    const model = ref({ condition: undefined as unknown })
+
+    const App = defineComponent({
+      setup() {
+        return () =>
+          h(
+            UForm,
+            { model: model.value, readonly: formReadonly.value, disabled: formDisabled.value },
+            { default: () => h(UConditionEditor, { label: '条件', field: 'condition' }) }
+          )
+      }
+    })
+
+    const app = createApp(App)
+    app.mount(host)
+    await nextTick()
+
+    return {
+      host,
+      formReadonly,
+      formDisabled,
+      root: () => host.querySelector('.u-condition-editor'),
+      async settle() {
+        await nextTick()
+        await nextTick()
+      },
+      unmount() {
+        app.unmount()
+        host.remove()
+      }
+    }
+  }
+
+  it('UForm 的 readonly / disabled 下发到根节点', async () => {
+    const ctx = await mountInForm()
+    expect(ctx.root()?.className).not.toContain('is-readonly')
+
+    ctx.formReadonly.value = true
+    await ctx.settle()
+    expect(ctx.root()?.className).toContain('is-readonly')
+
+    ctx.formDisabled.value = true
+    await ctx.settle()
+    expect(ctx.root()?.className).toContain('is-disabled')
+
+    ctx.unmount()
+  })
+})

package/src/components/condition-editor/condition-editor.vue

@@ -37,7 +37,12 @@ import { createEmptyGroup } from './core/evaluator'
 
 defineOptions({ name: 'UConditionEditor' })
 
-const props = withDefaults(defineProps<ConditionEditorProps>(), { fields: () => [] })
+const props = withDefaults(defineProps<ConditionEditorProps>(), {
+  fields: () => [],
+  // Boolean prop 缺省会被 Vue 归一成 false，挡住 UForm 下发的 disabled / readonly，须显式留 undefined
+  disabled: undefined,
+  readonly: undefined
+})
 
 const emit = defineEmits<{ (e: 'update:modelValue', value: ConditionExpression): void }>()
 

package/src/components/expression-editor/__test__/editor.test.ts

@@ -45,3 +45,69 @@ describe('createEditor composition', () => {
     editor.dispose()
   })
 })
+
+describe('createEditor visual empty', () => {
+  function setup(initialValue: string) {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+
+    const onVisualEmptyChange = vi.fn()
+    const editor = createEditor({
+      container,
+      cls,
+      initialDoc: parse(initialValue),
+      onVisualEmptyChange
+    })
+    return { container, editor, onVisualEmptyChange }
+  }
+
+  function textSpan(container: HTMLElement): HTMLElement {
+    return container.querySelector('[data-seg="text"]')!
+  }
+
+  it('reports empty on first render, non-empty once a chip is present', () => {
+    const empty = setup('')
+    expect(empty.onVisualEmptyChange).toHaveBeenLastCalledWith(true)
+    empty.editor.dispose()
+
+    const withChip = setup('{user}')
+    expect(withChip.onVisualEmptyChange).toHaveBeenLastCalledWith(false)
+    withChip.editor.dispose()
+  })
+
+  it('drops the empty state as soon as IME composition text is in the DOM', () => {
+    const { container, editor, onVisualEmptyChange } = setup('')
+
+    container.dispatchEvent(new Event('compositionstart'))
+    textSpan(container).textContent = '阿'
+    container.dispatchEvent(new Event('input'))
+
+    expect(onVisualEmptyChange).toHaveBeenLastCalledWith(false)
+
+    editor.dispose()
+  })
+
+  it('restores the empty state when composition text is deleted mid-composition', () => {
+    const { container, editor, onVisualEmptyChange } = setup('')
+
+    container.dispatchEvent(new Event('compositionstart'))
+    textSpan(container).textContent = '阿'
+    container.dispatchEvent(new Event('input'))
+    textSpan(container).textContent = ''
+    container.dispatchEvent(new Event('input'))
+
+    expect(onVisualEmptyChange).toHaveBeenLastCalledWith(true)
+
+    editor.dispose()
+  })
+
+  it('keeps the empty state while composition has no visible text yet', () => {
+    const { container, editor, onVisualEmptyChange } = setup('')
+
+    container.dispatchEvent(new Event('compositionstart'))
+
+    expect(onVisualEmptyChange).toHaveBeenCalledTimes(1)
+
+    editor.dispose()
+  })
+})

package/src/components/expression-editor/__test__/expression-editor.test.ts

@@ -0,0 +1,124 @@
+import { describe, expect, it } from 'vitest'
+import { createApp, defineComponent, h, nextTick, ref } from 'vue'
+
+import { UForm } from '../../form'
+import UExpressionEditor from '../expression-editor.vue'
+
+async function mountEditor(props: Record<string, unknown> = {}) {
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+
+  const app = createApp({ render: () => h(UExpressionEditor, props) })
+  app.mount(host)
+  // 首次渲染后 editor 才上报框内空态，等一轮刷新再断言
+  await nextTick()
+
+  return {
+    host,
+    hint: () => host.querySelector('.u-expression-editor__hint'),
+    placeholder: () => host.querySelector('.u-expression-editor__placeholder'),
+    unmount() {
+      app.unmount()
+      host.remove()
+    }
+  }
+}
+
+describe('UExpressionEditor 提示行与占位文字', () => {
+  it('提示行常驻：有内容时依然显示', async () => {
+    const empty = await mountEditor()
+    expect(empty.hint()).not.toBeNull()
+    empty.unmount()
+
+    const filled = await mountEditor({ modelValue: '你好{user}' })
+    expect(filled.hint()).not.toBeNull()
+    filled.unmount()
+  })
+
+  it('禁用 / 只读时不显示提示行', async () => {
+    const disabled = await mountEditor({ disabled: true })
+    expect(disabled.hint()).toBeNull()
+    disabled.unmount()
+
+    const readonly = await mountEditor({ readonly: true })
+    expect(readonly.hint()).toBeNull()
+    readonly.unmount()
+  })
+
+  it('占位文字仍随内容显隐', async () => {
+    const empty = await mountEditor()
+    expect(empty.placeholder()?.textContent?.trim()).toBe('请输入表达式，输入 @ 可插入变量')
+    empty.unmount()
+
+    const filled = await mountEditor({ modelValue: '你好' })
+    expect(filled.placeholder()).toBeNull()
+    filled.unmount()
+  })
+})
+
+describe('UExpressionEditor 在 UForm 中的状态下发', () => {
+  /** 挂一个 UForm + 内嵌表达式编辑器，返回可切换表单级 readonly / disabled 的句柄 */
+  async function mountInForm() {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+
+    const formReadonly = ref(false)
+    const formDisabled = ref(false)
+    const model = ref({ expression: '' })
+
+    const App = defineComponent({
+      setup() {
+        return () =>
+          h(
+            UForm,
+            { model: model.value, readonly: formReadonly.value, disabled: formDisabled.value },
+            { default: () => h(UExpressionEditor, { label: '表达式', field: 'expression' }) }
+          )
+      }
+    })
+
+    const app = createApp(App)
+    app.mount(host)
+    await nextTick()
+
+    return {
+      host,
+      formReadonly,
+      formDisabled,
+      shell: () => host.querySelector('.u-expression-editor__shell'),
+      container: () => host.querySelector('.u-expression-editor__container'),
+      async settle() {
+        await nextTick()
+        await nextTick()
+      },
+      unmount() {
+        app.unmount()
+        host.remove()
+      }
+    }
+  }
+
+  it('UForm readonly 下发到视觉盒，并禁止编辑', async () => {
+    const ctx = await mountInForm()
+    expect(ctx.shell()?.className).not.toContain('is-readonly')
+
+    ctx.formReadonly.value = true
+    await ctx.settle()
+
+    expect(ctx.shell()?.className).toContain('is-readonly')
+    expect(ctx.container()?.getAttribute('contenteditable')).toBe('false')
+
+    ctx.unmount()
+  })
+
+  it('UForm disabled 下发到视觉盒', async () => {
+    const ctx = await mountInForm()
+
+    ctx.formDisabled.value = true
+    await ctx.settle()
+
+    expect(ctx.shell()?.className).toContain('is-disabled')
+
+    ctx.unmount()
+  })
+})

package/src/components/expression-editor/core/editor.ts

@@ -24,6 +24,11 @@ export interface EditorOptions {
   getVariableMap?: () => Map<string, VariableItem>
   /** 模型每次更新（包括用户键入文本）后回调 */
   onChange?: (doc: Doc) => void
+  /**
+   * 框内「视觉空态」变化回调：只描述眼下框里有没有可见内容，与模型是否已同步无关。
+   * IME 合成期间模型刻意不同步，占位文字 / 提示行这类纯视觉层须跟这个信号走。
+   */
+  onVisualEmptyChange?: (empty: boolean) => void
   /** 选中区域 / 光标偏移变化时回调，offset 为序列化字符串中的位置；无选中或不在编辑器内时为 null */
   onSelectionChange?: (info: { offset: number | null }) => void
   /** 用户点击某个 chip 的主体（重选） */
@@ -66,12 +71,29 @@ export interface EditorAPI {
 export function createEditor(opts: EditorOptions): EditorAPI {
   let doc: Doc = normalize(opts.initialDoc)
   let composing = false
+  /** null 表示还没算过，首次计算后必定回调一次 */
+  let visualEmpty: boolean | null = null
 
   function emitChange(next: Doc) {
     doc = next
     opts.onChange?.(doc)
   }
 
+  /** 框内是否只剩空 text span：任何文本（含 IME 合成中尚未进模型的）或 chip 都算非空 */
+  function isVisuallyEmpty(): boolean {
+    for (const child of Array.from(opts.container.childNodes)) {
+      if (isChipElement(child) || (child.textContent ?? '').length > 0) return false
+    }
+    return true
+  }
+
+  function syncVisualEmpty(): void {
+    const empty = isVisuallyEmpty()
+    if (empty === visualEmpty) return
+    visualEmpty = empty
+    opts.onVisualEmptyChange?.(empty)
+  }
+
   function makeTextSpan(value: string): HTMLSpanElement {
     const span = document.createElement('span')
     span.setAttribute(TEXT_SEG_ATTR, TEXT_SEG_VALUE)
@@ -136,6 +158,7 @@ export function createEditor(opts: EditorOptions): EditorAPI {
       else container.appendChild(makeChipSpan(seg))
     }
 
+    syncVisualEmpty()
     if (typeof targetCaret === 'number') setCaret(targetCaret)
   }
 
@@ -370,13 +393,20 @@ export function createEditor(opts: EditorOptions): EditorAPI {
   }
 
   function onInput() {
+    // 合成中模型不动，但框里已经有字：占位层必须立刻让位
+    syncVisualEmpty()
     syncFromDOM()
   }
   function onCompositionStart() {
     composing = true
   }
+  function onCompositionUpdate() {
+    // 少数浏览器把合成文字落进 DOM 的时机晚于 input，这里再兜一次
+    syncVisualEmpty()
+  }
   function onCompositionEnd() {
     composing = false
+    syncVisualEmpty()
     syncFromDOM()
   }
   function onPaste(e: ClipboardEvent) {
@@ -413,6 +443,7 @@ export function createEditor(opts: EditorOptions): EditorAPI {
     range.collapse(true)
     sel.removeAllRanges()
     sel.addRange(range)
+    syncVisualEmpty()
     syncFromDOM()
   }
 
@@ -483,6 +514,7 @@ export function createEditor(opts: EditorOptions): EditorAPI {
   const container = opts.container
   container.addEventListener('input', onInput)
   container.addEventListener('compositionstart', onCompositionStart)
+  container.addEventListener('compositionupdate', onCompositionUpdate)
   container.addEventListener('compositionend', onCompositionEnd)
   container.addEventListener('paste', onPaste)
   document.addEventListener('selectionchange', onSelectionChange)
@@ -512,6 +544,7 @@ export function createEditor(opts: EditorOptions): EditorAPI {
     dispose: () => {
       container.removeEventListener('input', onInput)
       container.removeEventListener('compositionstart', onCompositionStart)
+      container.removeEventListener('compositionupdate', onCompositionUpdate)
       container.removeEventListener('compositionend', onCompositionEnd)
       container.removeEventListener('paste', onPaste)
       document.removeEventListener('selectionchange', onSelectionChange)

package/src/components/expression-editor/expression-editor.vue

@@ -9,7 +9,7 @@
           ref="container"
           :class="cls.e('container')"
           :contenteditable="!readonly && !disabled"
-          :data-empty="isEmpty || undefined"
+          :data-empty="visualEmpty || undefined"
           :data-placeholder="props.placeholder"
           @keydown="onKeydown"
           @blur="onBlur"
@@ -63,7 +63,10 @@ defineOptions({ name: 'UExpressionEditor' })
 
 const props = withDefaults(defineProps<ExpressionEditorProps>(), {
   placeholder: '请输入表达式，输入 @ 可插入变量',
-  selectableLevels: 'leaf'
+  selectableLevels: 'leaf',
+  // Boolean prop 缺省会被 Vue 归一成 false，挡住 UForm 下发的 disabled / readonly，须显式留 undefined
+  disabled: undefined,
+  readonly: undefined
 })
 
 const emit = defineEmits<{ (e: 'update:modelValue', value: string): void }>()
@@ -91,9 +94,11 @@ const editorRef = shallowRef<EditorAPI | null>(null)
 const mention: MentionAPI = createMention()
 
 const currentDoc = shallowRef<Doc>([])
-const isEmpty = computed(() => currentDoc.value.length === 0)
-const showPlaceholder = computed(() => isEmpty.value && !disabled.value)
-const showHint = computed(() => isEmpty.value && !disabled.value && !readonly.value)
+/** 框内视觉空态：与 IME 合成状态无关，由 editor 在 DOM 变化时上报 */
+const visualEmpty = shallowRef(true)
+const showPlaceholder = computed(() => visualEmpty.value && !disabled.value)
+/** 上方 `@` 使用提示常驻：只跟可编辑状态走，不随内容增减隐藏 */
+const showHint = computed(() => !disabled.value && !readonly.value)
 
 const pickerMode = shallowRef<'mention' | 'reselect' | null>(null)
 const pickerTriggerDom = shallowRef<HTMLElement | undefined>(undefined)
@@ -152,6 +157,9 @@ onMounted(() => {
       if (value !== (props.modelValue ?? '')) emit('update:modelValue', value)
       syncMention()
     },
+    onVisualEmptyChange: (empty) => {
+      visualEmpty.value = empty
+    },
     onSelectionChange: () => {
       syncMention()
     },

package/src/components/expression-editor/style.scss

@@ -19,16 +19,15 @@ $root-name: expression-editor;
       border-color fn.use-var(transition, fast) fn.use-var(transition, ease),
       box-shadow fn.use-var(transition, fast) fn.use-var(transition, ease);
 
-    @include m.is-not(disabled, readonly) {
-      &:hover {
-        border-color: fn.use-var(color, primary);
-      }
+    // 状态描边压在 0,3,0 以内（与 u-input 同档），表单项错误态才能用普通后代选择器直接压住
+    &:hover {
+      border-color: fn.use-var(color, primary);
+    }
 
-      &:focus-within {
-        border-color: fn.use-var(color, primary);
-        box-shadow: fn.use-var(focus-ring);
-        outline: none;
-      }
+    &:focus-within {
+      border-color: fn.use-var(color, primary);
+      box-shadow: fn.use-var(focus-ring);
+      outline: none;
     }
 
     @include m.is('disabled') {

package/src/components/form-item/style.scss

@@ -47,12 +47,12 @@ $root-name: form-item;
   }
 
   @include m.is(error) {
+    // is-focus 类驱动聚焦态的控件：hover / is-focus 与错误态同权重，按源序分胜负，故显式列出
     #{fn.bem(input)},
     #{fn.bem(multi-select)},
     #{fn.bem(multi-tree-select)},
     #{fn.bem(auto-complete)},
     #{fn.bem(textarea--more)} {
-      // hover 的 primary 描边与错误态同权重，按源序分胜负：错误态显式压住，避免悬浮时描边回蓝
       &,
       &:hover,
       &.is-focus {
@@ -64,6 +64,21 @@ $root-name: form-item;
         box-shadow: fn.use-var(focus-ring, danger);
       }
     }
+
+    // :focus-within 驱动聚焦态的编辑器类控件；描红目标是各自的视觉盒（表达式编辑器在 __shell 上）
+    #{fn.bem(expression-editor, shell)},
+    #{fn.bem(code-editor)},
+    #{fn.bem(rich-text-editor)} {
+      &,
+      &:hover,
+      &:focus-within {
+        border-color: fn.use-var(color, danger);
+      }
+
+      &:focus-within {
+        box-shadow: fn.use-var(focus-ring, danger);
+      }
+    }
   }
 
   @include m.e(content) {

package/src/components/index.ts

@@ -153,3 +153,5 @@ export * from './badge'
 export * from './segment'
 
 export * from './image-cropper'
+
+export * from './kanban'