@veltra/desktop 1.7.18 → 1.8.0

package/src/components/card/style.scss

@@ -7,14 +7,12 @@ $root-name: card;
 @include m.b($root-name) {
   border-radius: fn.component-var(card, radius, fn.use-var(radius, large));
   background-color: fn.use-var(bg-color, top);
-  border: fn.use-var(border-muted);
   box-shadow: fn.use-var(shadow, sm);
   backdrop-filter: fn.use-var(bg-filter);
   -webkit-backdrop-filter: fn.use-var(bg-filter);
   overflow: hidden;
 
   @include m.is(integrate) {
-    border: none;
     box-shadow: none;
     --u-card-header-bg: transparent;
     --u-card-action-bg: transparent;

package/src/components/dialog/style.scss

@@ -81,7 +81,8 @@ $root-name: dialog;
     flex-grow: 1;
 
     // padding 加在滚动内容而非 body 本身：u-scroll 的 overflow 会裁切子元素 box-shadow
-    @include m.bem(scroll, content) {
+    // 用子代链限定 body 自己的滚动内容，避免命中弹框内嵌套的 u-scroll
+    > #{fn.bem(scroll, container)} > #{fn.bem(scroll, content)} {
       padding: 8px;
     }
   }

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__/chip.test.ts

@@ -14,7 +14,6 @@ const cls = {
 } as any
 
 function makeChip(overrides: Partial<{ value: string; label: string; type?: string }> = {}) {
-  const onRemove = vi.fn<(el: HTMLElement) => void>()
   const onReselect = vi.fn<(el: HTMLElement) => void>()
   const segment = {
     kind: 'var' as const,
@@ -22,8 +21,8 @@ function makeChip(overrides: Partial<{ value: string; label: string; type?: stri
     label: overrides.label ?? '用户姓名',
     ...(overrides.type ? { type: overrides.type } : {})
   }
-  const el = createChip(segment, { cls, onRemove, onReselect })
-  return { el, onRemove, onReselect, segment }
+  const el = createChip(segment, { cls, onReselect })
+  return { el, onReselect, segment }
 }
 
 describe('createChip', () => {
@@ -54,21 +53,11 @@ describe('createChip', () => {
   })
 
   it('mousedown on chip body triggers onReselect', () => {
-    const { el, onReselect, onRemove } = makeChip()
+    const { el, onReselect } = makeChip()
     const label = el.querySelector(`.${cls.e('chip-label')}`) as HTMLElement
     label.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
     expect(onReselect).toHaveBeenCalledTimes(1)
     expect(onReselect).toHaveBeenCalledWith(el)
-    expect(onRemove).not.toHaveBeenCalled()
-  })
-
-  it('mousedown on close (×) triggers onRemove and not onReselect', () => {
-    const { el, onReselect, onRemove } = makeChip()
-    const close = el.querySelector(`[${ChipAttrs.close}]`) as HTMLElement
-    close.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
-    expect(onRemove).toHaveBeenCalledTimes(1)
-    expect(onRemove).toHaveBeenCalledWith(el)
-    expect(onReselect).not.toHaveBeenCalled()
   })
 
   it('readChipValue returns the bound value', () => {

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/chip.ts

@@ -8,18 +8,15 @@ export interface ChipDeps {
 
 export interface ChipFactoryOptions extends ChipDeps {
   /**
-   * 当用户点击 chip 主体（不是 ×）时回调，由调用方决定如何打开重选面板。
+   * 当用户点击 chip 主体时回调，由调用方决定如何打开重选面板。
    * 收到的 chipEl 当前在 DOM 中的位置即为重选锚点。
    */
   onReselect: (chipEl: HTMLElement) => void
-  /** 当用户点击 × 时回调，调用方应将该 chip 从模型 / DOM 中移除。 */
-  onRemove: (chipEl: HTMLElement) => void
 }
 
 const CHIP_DATA_SEG = 'var'
 const CHIP_VALUE_ATTR = 'data-value'
 const CHIP_TYPE_ATTR = 'data-var-type'
-const CHIP_CLOSE_ATTR = 'data-chip-close'
 
 /** 判断一个 DOM 节点是否为 chip 元素（var 段渲染体） */
 export function isChipElement(node: Node | null): node is HTMLElement {
@@ -30,12 +27,6 @@ export function isChipElement(node: Node | null): node is HTMLElement {
   )
 }
 
-/** 判断点击目标是否落在 × 删除区。 */
-function isCloseTarget(target: EventTarget | null): boolean {
-  if (!(target instanceof Element)) return false
-  return !!target.closest(`[${CHIP_CLOSE_ATTR}]`)
-}
-
 /** 从给定 segment 创建一个 chip 元素（var 段渲染体）。 */
 export function createChip(
   segment: Extract<Segment, { kind: 'var' }>,
@@ -55,25 +46,13 @@ export function createChip(
   label.className = cls.e('chip-label')
   label.textContent = segment.type ? `${segment.label} (${segment.type})` : segment.label
 
-  const close = document.createElement('span')
-  close.className = cls.e('chip-close')
-  close.setAttribute(CHIP_CLOSE_ATTR, 'true')
-  close.setAttribute('aria-label', '删除')
-  close.setAttribute('role', 'button')
-  close.textContent = '×'
-
   chip.appendChild(label)
-  chip.appendChild(close)
 
   chip.addEventListener('mousedown', (e) => {
     e.preventDefault()
     // 阻止冒泡：避免宿主弹框（如 dialog）的 mousedown 层级提升逻辑把 chip 打开的重选面板盖住
     e.stopPropagation()
-    if (isCloseTarget(e.target)) {
-      opts.onRemove(chip)
-    } else {
-      opts.onReselect(chip)
-    }
+    opts.onReselect(chip)
   })
 
   return chip
@@ -95,9 +74,4 @@ export function setChipFocused(el: HTMLElement, focused: boolean): void {
 }
 
 /** 测试支持：暴露用于 DOM 选择器的属性常量。 */
-export const ChipAttrs = {
-  seg: 'data-seg',
-  value: CHIP_VALUE_ATTR,
-  type: CHIP_TYPE_ATTR,
-  close: CHIP_CLOSE_ATTR
-} as const
+export const ChipAttrs = { seg: 'data-seg', value: CHIP_VALUE_ATTR, type: CHIP_TYPE_ATTR } as const

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

@@ -28,8 +28,6 @@ export interface EditorOptions {
   onSelectionChange?: (info: { offset: number | null }) => void
   /** 用户点击某个 chip 的主体（重选） */
   onChipReselect?: (info: { chipEl: HTMLElement; segIndex: number; chipOffset: number }) => void
-  /** 用户点击某个 chip 的 ×（删除） */
-  onChipRemove?: (info: { chipEl: HTMLElement; segIndex: number }) => void
 }
 
 export interface EditorAPI {
@@ -45,13 +43,16 @@ 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 = 当前光标。
    */
   replaceRangeWithVar(start: number, end: number, variable: EditorVariableInfo): void
-  /** 移除指定段下标对应的 var chip（必须是 var 段）。 */
-  removeVarAt(segIndex: number): void
   /** 替换指定段下标对应的 var chip 为新变量（必须是 var 段）。 */
   replaceVarAt(segIndex: number, variable: EditorVariableInfo): void
   /** 卸载所有事件监听（不会销毁 container DOM） */
@@ -85,11 +86,6 @@ export function createEditor(opts: EditorOptions): EditorAPI {
         const { segIndex, chipOffset } = locateChip(chipEl)
         if (segIndex < 0) return
         opts.onChipReselect?.({ chipEl, segIndex, chipOffset })
-      },
-      onRemove: (chipEl) => {
-        const { segIndex } = locateChip(chipEl)
-        if (segIndex < 0) return
-        opts.onChipRemove?.({ chipEl, segIndex })
       }
     })
   }
@@ -330,6 +326,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
@@ -412,17 +430,6 @@ export function createEditor(opts: EditorOptions): EditorAPI {
     render(a + variable.value.length + 2) // 光标定到 chip 之后
   }
 
-  function removeVarAt(segIndex: number) {
-    const target = doc[segIndex]
-    if (!target || target.kind !== 'var') return
-    const before = doc.slice(0, segIndex)
-    const after = doc.slice(segIndex + 1)
-    const caretOffset = sliceLength(before)
-    const next = normalize([...before, ...after])
-    emitChange(next)
-    render(caretOffset)
-  }
-
   function replaceVarAt(segIndex: number, variable: EditorVariableInfo) {
     const target = doc[segIndex]
     if (!target || target.kind !== 'var') return
@@ -498,8 +505,8 @@ export function createEditor(opts: EditorOptions): EditorAPI {
     },
     getCaretOffset,
     setCaretOffset: setCaret,
+    getRectAtOffset,
     replaceRangeWithVar,
-    removeVarAt,
     replaceVarAt,
     rerender: () => render(),
     dispose: () => {

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

@@ -1,17 +1,27 @@
 <template>
-  <div :class="className">
-    <div
-      ref="container"
-      :class="cls.e('container')"
-      :contenteditable="!readonly && !disabled"
-      :data-empty="isEmpty || undefined"
-      :data-placeholder="props.placeholder"
-      @keydown="onKeydown"
-      @blur="onBlur"
-    ></div>
-
-    <div v-if="showPlaceholder" :class="cls.e('placeholder')">
-      {{ props.placeholder }}
+  <div ref="rootEl" :class="cls.b">
+    <!-- 提示行独立在边框盒（shell）之外 -->
+    <div v-if="showHint" :class="cls.e('hint')">输入 <kbd>@</kbd> 唤起变量面板</div>
+
+    <div :class="shellClass">
+      <div :class="cls.e('body')">
+        <div
+          ref="container"
+          :class="cls.e('container')"
+          :contenteditable="!readonly && !disabled"
+          :data-empty="isEmpty || undefined"
+          :data-placeholder="props.placeholder"
+          @keydown="onKeydown"
+          @blur="onBlur"
+        ></div>
+
+        <div v-if="showPlaceholder" :class="cls.e('placeholder')">
+          {{ props.placeholder }}
+        </div>
+      </div>
+
+      <!-- mention 面板的定位锚点：跟随 `@` 字符位置（见 positionMentionAnchor） -->
+      <span ref="mentionAnchor" :class="cls.e('mention-anchor')" aria-hidden="true"></span>
     </div>
 
     <VariablePicker
@@ -63,11 +73,14 @@ const { formProps } = injectFormContext()
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])
 
 const containerRef = useTemplateRef<HTMLDivElement>('container')
+const rootElRef = useTemplateRef<HTMLDivElement>('rootEl')
+const mentionAnchorRef = useTemplateRef<HTMLSpanElement>('mentionAnchor')
 const pickerRef = useTemplateRef<{ handleKeydown: (e: KeyboardEvent) => boolean }>('pickerRef')
 
-const className = computed(() => [
-  cls.b,
-  cls.m(size.value),
+/** 视觉盒（边框 / 背景 / 聚焦光晕 / 尺寸态）挂在 shell 上，根节点只做布局 */
+const shellClass = computed(() => [
+  cls.e('shell'),
+  cls.em('shell', size.value),
   bem.is('disabled', disabled.value),
   bem.is('readonly', readonly.value)
 ])
@@ -80,6 +93,7 @@ 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)
 
 const pickerMode = shallowRef<'mention' | 'reselect' | null>(null)
 const pickerTriggerDom = shallowRef<HTMLElement | undefined>(undefined)
@@ -88,6 +102,18 @@ const pickerFilter = shallowRef('')
 
 const pickerVisible = computed(() => pickerMode.value !== null)
 
+/** 把 mention 锚点移到 `@` 字符下方，面板据此定位 */
+function positionMentionAnchor(anchorOffset: number) {
+  const rootEl = rootElRef.value
+  const anchor = mentionAnchorRef.value
+  const rect = editorRef.value?.getRectAtOffset(anchorOffset)
+  if (!rootEl || !anchor || !rect) return
+  // absolute 定位以 padding box 为基准，需扣除根节点边框宽度
+  const rootRect = rootEl.getBoundingClientRect()
+  anchor.style.left = `${rect.left - rootRect.left - rootEl.clientLeft}px`
+  anchor.style.top = `${rect.bottom - rootRect.top - rootEl.clientTop}px`
+}
+
 function syncMention() {
   const editor = editorRef.value
   if (!editor) return
@@ -97,7 +123,8 @@ function syncMention() {
   if (state) {
     pickerMode.value = 'mention'
     pickerFilter.value = state.filter
-    pickerTriggerDom.value = containerRef.value ?? undefined
+    positionMentionAnchor(state.anchorOffset)
+    pickerTriggerDom.value = mentionAnchorRef.value ?? containerRef.value ?? undefined
   } else if (pickerMode.value === 'mention') {
     closePicker()
   }
@@ -135,10 +162,9 @@ onMounted(() => {
       pickerFilter.value = ''
       pickerTriggerDom.value = chipEl
       reselectingSegIdx.value = segIndex
-    },
-    onChipRemove: ({ segIndex }) => {
-      if (disabled.value || readonly.value) return
-      editor.removeVarAt(segIndex)
+      // chip 的 mousedown 被 preventDefault，编辑器没有焦点时点击 chip 焦点不会转移，
+      // 键盘导航依赖 container 的 keydown，这里主动把焦点拉回编辑器
+      containerRef.value?.focus()
     }
   })
   editorRef.value = editor