@veltra/desktop 1.7.19 → 1.8.1

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/dropdown/dropdown.vue

@@ -22,7 +22,7 @@
 import { useModel, usePop, useTransition } from '@veltra/compositions'
 import { vClickOutside } from '@veltra/directives'
 import { bem, extractNormalVNodes, setStyles, zIndex } from '@veltra/utils'
-import { shallowRef, computed, createVNode, cloneVNode, useTemplateRef, useAttrs } from 'vue'
+import { shallowRef, computed, createVNode, cloneVNode, useTemplateRef, useAttrs, toRef } from 'vue'
 
 import type { DropdownProps, DropdownExposed, DropdownEmits } from '../../types'
 import { UNodeRender } from '../node-render'
@@ -30,7 +30,12 @@ import { useNest } from '../tip/use-nest'
 
 defineOptions({ name: 'UDropdown', inheritAttrs: false })
 
-const props = withDefaults(defineProps<DropdownProps>(), { trigger: 'hover', contentTag: 'div' })
+const props = withDefaults(defineProps<DropdownProps>(), {
+  trigger: 'hover',
+  direction: 'bottom',
+  alignment: 'start',
+  contentTag: 'div'
+})
 
 const emit = defineEmits<DropdownEmits>()
 
@@ -121,8 +126,8 @@ const transitionName = shallowRef('slide-down')
 const { update, popperContainerId } = usePop({
   triggerRef: triggerDom,
   contentRef,
-  direction: 'bottom',
-  alignment: 'start',
+  direction: toRef(() => props.direction),
+  alignment: toRef(() => props.alignment),
   onPop(position) {
     transitionName.value = position.placement.includes('top') ? 'slide-up' : 'slide-down'
 

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/components/path-preview.vue

@@ -6,9 +6,8 @@
         v-for="(node, i) in path"
         :key="`${i}-${node.value || node.label}`"
         :class="[cls.e('path-tree-item'), bem.is('active', i === path.length - 1)]"
-        :style="{ paddingLeft: `${i * 14}px` }"
+        :style="{ '--depth': i }"
       >
-        <span v-if="i > 0" :class="cls.e('path-tree-branch')">└</span>
         <span :class="cls.e('path-tree-label')">{{ node.label }}</span>
       </li>
     </ul>

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

@@ -9,7 +9,7 @@
     @update:visible="handleVisibleChange($event)"
   >
     <template #content>
-      <div :class="cls.e('picker')" @mousedown.prevent>
+      <div ref="root" :class="cls.e('picker')" @mousedown.prevent>
         <!-- 面包屑：仅逐级模式且非根级显示 -->
         <div v-if="!isFlat && navPath.length > 0" :class="cls.e('breadcrumbs')">
           <span :class="cls.e('breadcrumb-item')">
@@ -39,7 +39,12 @@
 
         <div :class="cls.e('picker-body')">
           <div :class="cls.e('panel')" v-if="currentList.length > 0">
-            <u-scroll tag="ul" :class="cls.e('panel-list')" :content-class="cls.e('panel-content')">
+            <u-scroll
+              ref="listScroll"
+              tag="ul"
+              :class="cls.e('panel-list')"
+              :content-class="cls.e('panel-content')"
+            >
               <li
                 v-for="(item, idx) in currentList"
                 :key="`${idx}-${item.value}`"
@@ -49,7 +54,12 @@
                 @mouseenter="activeIndex = idx"
               >
                 <span :class="cls.e('item-label')">{{ item.label }}</span>
-                <u-icon v-if="!isFlat && hasChildren(item)" :class="cls.e('item-expand')">
+                <u-icon
+                  v-if="!isFlat && hasChildren(item)"
+                  :class="cls.e('item-expand')"
+                  title="展开下一级"
+                  @click.stop="expandInto(item)"
+                >
                   <ArrowRight />
                 </u-icon>
               </li>
@@ -61,6 +71,21 @@
 
           <PathPreview v-if="isFlat && activePath.length > 0" :path="activePath" />
         </div>
+
+        <div v-if="currentList.length > 0" :class="cls.e('picker-hint')">
+          <template v-if="isFlat">
+            <span><kbd>↑</kbd><kbd>↓</kbd> 选择</span>
+            <span><kbd>Enter</kbd> 确认</span>
+            <span><kbd>Esc</kbd> 关闭</span>
+          </template>
+          <template v-else>
+            <span><kbd>↑</kbd><kbd>↓</kbd> 选择</span>
+            <span><kbd>→</kbd> 展开</span>
+            <span><kbd>←</kbd> 返回</span>
+            <span><kbd>Enter</kbd> 确认</span>
+            <span><kbd>Esc</kbd> 关闭</span>
+          </template>
+        </div>
       </div>
     </template>
   </u-tip>
@@ -69,7 +94,7 @@
 <script lang="ts" setup>
 import { ArrowRight } from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
-import { computed, nextTick, ref, watch } from 'vue'
+import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
 
 import type { VariableItem } from '../../../types'
 import { UEmpty } from '../../empty'
@@ -107,6 +132,8 @@ const cls = bem('expression-editor')
 
 const navPath = ref<VariableItem[]>([])
 const activeIndex = ref(0)
+const root = useTemplateRef('root')
+const listScroll = useTemplateRef<InstanceType<typeof UScroll>>('listScroll')
 
 const isFlat = computed(() => props.filter !== '')
 
@@ -192,13 +219,19 @@ function selectActive() {
       return
     }
     // 默认 'leaf'：进入下一级
-    navPath.value = [...navPath.value, item]
-    activeIndex.value = 0
+    expandInto(item)
     return
   }
   emit('select', item)
 }
 
+/** 进入 item 的下一级（点击展开图标 / leaf 模式点击分支项共用） */
+function expandInto(item: VariableItem) {
+  if (!hasChildren(item)) return
+  navPath.value = [...navPath.value, item]
+  activeIndex.value = 0
+}
+
 function flattenSourceFor(it: VariableItem): VariableItem {
   const flat = it as FlatItem
   // 还原为「不带 __path 的纯 VariableItem」，避免泄漏内部字段
@@ -220,11 +253,20 @@ function moveActive(delta: -1 | 1) {
 
 function scrollActiveIntoView() {
   void nextTick(() => {
-    const list = document.querySelector(`.${cls.e('panel-list')}`)
-    if (!list) return
-    const item = list.querySelector(`[data-idx="${activeIndex.value}"]`)
-    if (item && 'scrollIntoView' in item) {
-      ;(item as HTMLElement).scrollIntoView({ block: 'nearest' })
+    // 在面板根节点内查找，避免同页多个编辑器时滚错列表
+    const item = root.value?.querySelector(`[data-idx="${activeIndex.value}"]`)
+    // expose 代理运行时会解包 ref，类型上按 unknown 收窄
+    const scroller = listScroll.value?.containerRef as unknown
+    if (!(item instanceof HTMLElement) || !(scroller instanceof HTMLElement)) return
+    // 只滚面板列表自身：原生 scrollIntoView 会沿所有滚动祖先链滚动，
+    // 面板贴近视口边缘时会连带滚动页面，导致面板与触发器错位抖动
+    const top =
+      item.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop
+    const bottom = top + item.offsetHeight
+    if (top < scroller.scrollTop) {
+      scroller.scrollTop = top
+    } else if (bottom > scroller.scrollTop + scroller.clientHeight) {
+      scroller.scrollTop = bottom - scroller.clientHeight
     }
   })
 }
@@ -287,8 +329,7 @@ function handleKeydown(e: KeyboardEvent): boolean {
       if (isFlat.value) return false
       const item = currentList.value[activeIndex.value]
       if (item && hasChildren(item)) {
-        navPath.value = [...navPath.value, item]
-        activeIndex.value = 0
+        expandInto(item)
         return true
       }
       return false

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 的主体（重选） */
@@ -43,6 +48,11 @@ export interface EditorAPI {
   getCaretOffset(): number | null
   /** 把光标设置到指定偏移（不会修改模型） */
   setCaretOffset(offset: number): void
+  /**
+   * 取序列化偏移处字符的视口矩形（mention 锚点定位用）。
+   * 偏移落在 text 段上返回该字符矩形；落在 chip 上返回 chip 元素矩形；越界返回 null。
+   */
+  getRectAtOffset(offset: number): DOMRect | null
   /**
    * 用一个 var chip 替换 [start, end) 区间。
    * 调用方通常在 mention 选中时用：start = `@` 起点、end = 当前光标。
@@ -61,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)
@@ -131,6 +158,7 @@ export function createEditor(opts: EditorOptions): EditorAPI {
       else container.appendChild(makeChipSpan(seg))
     }
 
+    syncVisualEmpty()
     if (typeof targetCaret === 'number') setCaret(targetCaret)
   }
 
@@ -321,6 +349,28 @@ export function createEditor(opts: EditorOptions): EditorAPI {
     return null
   }
 
+  function getRectAtOffset(offset: number): DOMRect | null {
+    let pos = 0
+    for (const child of Array.from(opts.container.childNodes)) {
+      const len = childSerialLength(child)
+      if (offset >= pos && offset < pos + len) {
+        if (isChipElement(child)) return (child as HTMLElement).getBoundingClientRect()
+        const textNode = firstTextDescendant(child)
+        if (!textNode) return (child as HTMLElement).getBoundingClientRect()
+        const local = Math.min(offset - pos, textNode.data.length)
+        const range = document.createRange()
+        range.setStart(textNode, local)
+        range.setEnd(textNode, Math.min(local + 1, textNode.data.length))
+        const rects = range.getClientRects()
+        return rects.length > 0
+          ? (rects[0] as DOMRect)
+          : (child as HTMLElement).getBoundingClientRect()
+      }
+      pos += len
+    }
+    return null
+  }
+
   /** input 后：从 DOM 反推 doc，并触发 onChange（如有变化）。 */
   function syncFromDOM(): void {
     if (composing) return
@@ -343,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) {
@@ -386,6 +443,7 @@ export function createEditor(opts: EditorOptions): EditorAPI {
     range.collapse(true)
     sel.removeAllRanges()
     sel.addRange(range)
+    syncVisualEmpty()
     syncFromDOM()
   }
 
@@ -456,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)
@@ -478,12 +537,14 @@ export function createEditor(opts: EditorOptions): EditorAPI {
     },
     getCaretOffset,
     setCaretOffset: setCaret,
+    getRectAtOffset,
     replaceRangeWithVar,
     replaceVarAt,
     rerender: () => render(),
     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)