@veltra/desktop 1.7.19 → 1.8.0

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

@@ -43,6 +43,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 = 当前光标。
@@ -321,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
@@ -478,6 +505,7 @@ export function createEditor(opts: EditorOptions): EditorAPI {
     },
     getCaretOffset,
     setCaretOffset: setCaret,
+    getRectAtOffset,
     replaceRangeWithVar,
     replaceVarAt,
     rerender: () => render(),

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,6 +162,9 @@ onMounted(() => {
       pickerFilter.value = ''
       pickerTriggerDom.value = chipEl
       reselectingSegIdx.value = segIndex
+      // chip 的 mousedown 被 preventDefault，编辑器没有焦点时点击 chip 焦点不会转移，
+      // 键盘导航依赖 container 的 keydown，这里主动把焦点拉回编辑器
+      containerRef.value?.focus()
     }
   })
   editorRef.value = editor

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

@@ -5,48 +5,71 @@
 $root-name: expression-editor;
 
 @include m.b($root-name) {
+  // 根节点只做布局（提示行在视觉盒之外），视觉盒由 __shell 承担
   position: relative;
-  background-color: fn.use-var(bg-color, top);
-  border-width: fn.use-var(border, width);
-  border-style: fn.use-var(border, style);
-  border-color: fn.use-var(border, muted-color);
-  border-radius: fn.use-var(radius, default);
   width: 100%;
 
-  @include m.is-not(disabled, readonly) {
-    &:hover {
-      border-color: fn.use-var(color, primary);
-    }
+  @include m.e(shell) {
+    background-color: fn.use-var(bg-color, top);
+    border-width: fn.use-var(border, width);
+    border-style: fn.use-var(border, style);
+    border-color: fn.use-var(border, muted-color);
+    border-radius: fn.use-var(radius, default);
+    transition:
+      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);
+      }
 
-    &:focus-within {
-      border-color: fn.use-var(color, primary);
-      outline: none;
+      &:focus-within {
+        border-color: fn.use-var(color, primary);
+        box-shadow: fn.use-var(focus-ring);
+        outline: none;
+      }
     }
-  }
 
-  @include m.is('disabled') {
-    background-color: fn.use-var(color, disabled);
-    cursor: not-allowed;
-    border-color: fn.use-var(border, muted-color);
+    @include m.is('disabled') {
+      background-color: fn.use-var(color, disabled);
+      cursor: not-allowed;
+      border-color: fn.use-var(border, muted-color);
 
-    &:hover {
+      &:hover {
+        border-color: fn.use-var(border, muted-color);
+      }
+    }
+
+    @include m.is('readonly') {
+      background-color: fn.use-var(bg-color, middle);
+      cursor: default;
       border-color: fn.use-var(border, muted-color);
+      user-select: text;
+
+      &:hover {
+        border-color: fn.use-var(border, muted-color);
+      }
     }
-  }
 
-  @include m.is('readonly') {
-    background-color: fn.use-var(bg-color, middle);
-    cursor: default;
-    border-color: fn.use-var(border, muted-color);
-    user-select: text;
+    @include m.size using ($size) {
+      min-height: fn.use-var(form-component-height, $size);
+      padding: fn.use-var(gap, $size);
 
-    &:hover {
-      border-color: fn.use-var(border, muted-color);
+      @include m.bem($root-name, placeholder) {
+        font-size: fn.use-var(font-size-main, $size);
+      }
+
+      @include m.bem($root-name, container) {
+        font-size: fn.use-var(font-size-main, $size);
+      }
     }
   }
 
   @include m.e(placeholder) {
     position: absolute;
+    top: 0;
+    left: 0;
     color: fn.use-var(text-color, placeholder);
     pointer-events: none;
     user-select: none;
@@ -54,6 +77,43 @@ $root-name: expression-editor;
     font-weight: 400;
   }
 
+  // 提示 + 输入区的定位层：placeholder 相对它对齐，hint 出现时不至于错位
+  @include m.e(body) {
+    position: relative;
+  }
+
+  // 编辑器上方的 `@` 使用提示（空内容时显示），位于边框盒之外
+  @include m.e(hint) {
+    font-size: fn.use-var(font-size-main, small);
+    color: fn.use-var(text-color, placeholder);
+    user-select: none;
+    margin-bottom: 4px;
+  }
+
+  // mention 面板定位锚点：跟随 `@` 字符，零尺寸不参与绘制
+  @include m.e(mention-anchor) {
+    position: absolute;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+  }
+
+  // 键位提示（编辑器 hint 与面板 footer 共用）
+  @include m.e(hint, picker-hint) {
+    kbd {
+      display: inline-block;
+      min-width: 18px;
+      padding: 1px 4px;
+      border: fn.use-var(border);
+      border-radius: fn.use-var(radius, small);
+      font-size: 11px;
+      line-height: 1.4;
+      text-align: center;
+      color: fn.use-var(text-color, second);
+      background-color: fn.use-var(bg-color, top);
+    }
+  }
+
   @include m.e(container) {
     position: relative;
     outline: none;
@@ -117,70 +177,92 @@ $root-name: expression-editor;
   }
 
   // ─── 变量选择面板 ──────────────────────────────────────────
+  // 面板以 tip 为浮层载体，但按库内标准下拉面板形态渲染：
+  // 负 margin 抵消 tip 内容自带的 gap 内边距，由 picker 自绘边框卡片
   @include m.e(picker) {
-    min-width: 220px;
+    margin: calc(#{fn.use-var(gap, default)} * -1);
+    min-width: 240px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
     background-color: fn.use-var(bg-color, top);
+    border: fn.use-var(border);
+    border-radius: fn.use-var(radius, default);
+    backdrop-filter: fn.use-var(bg-filter);
+    -webkit-backdrop-filter: fn.use-var(bg-filter);
   }
 
   @include m.e(picker-body) {
+    flex: 1 1 auto;
+    min-height: 0;
     display: flex;
     align-items: stretch;
-    min-height: 200px;
   }
 
   @include m.e(panel) {
     flex: 1 1 auto;
     min-width: 0;
     max-height: 320px;
+    display: flex;
+    flex-direction: column;
   }
 
   @include m.e(panel-list) {
-    height: 100%;
-    min-height: 200px;
+    flex: 1 1 auto;
+    min-height: 0;
   }
 
   @include m.e(panel-content) {
-    padding: 4px 0;
+    padding: 4px;
   }
 
   @include m.e(item) {
-    padding: 6px 12px;
-    cursor: pointer;
-    user-select: none;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 8px;
-    transition:
-      background-color 0.12s ease,
-      color 0.12s ease;
-    color: fn.use-var(text-color, main);
-    font-size: 13px;
-    line-height: 1.4;
+    gap: fn.use-var(gap, default);
+    height: fn.use-var(form-component-height, default);
+    padding: 0 fn.use-var(gap, default);
     border-radius: fn.use-var(radius, small);
-    margin: 1px 4px;
+    font-size: fn.use-var(font-size-main, default);
+    color: fn.use-var(text-color, main);
+    cursor: pointer;
+    user-select: none;
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
 
     @include m.is(active) {
-      background-color: fn.use-var(color, primary);
-      color: fn.use-var(text-color, white);
-
-      @include m.bem($root-name, item-expand) {
-        color: fn.use-var(text-color, white);
-      }
+      background-color: fn.use-var(bg-color, hover);
+      color: fn.use-var(text-color, title);
     }
   }
 
   @include m.e(item-label) {
     flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    min-width: 0;
+    @include m.ellipsis;
   }
 
   @include m.e(item-expand) {
     flex-shrink: 0;
     color: fn.use-var(text-color, placeholder);
     font-size: 12px;
+    // 扩大点击热区：u-icon 是固定 1em 盒（全局 border-box），padding 会把 svg 挤成 0 宽，
+    // 这里改回 content-box 让字形保持原尺寸，再用负 margin 抵消布局占位
+    box-sizing: content-box;
+    padding: 6px;
+    margin: -6px;
+    border-radius: fn.use-var(radius, small);
+    cursor: pointer;
+    transition:
+      color 0.15s ease,
+      background-color 0.15s ease;
+
+    &:hover {
+      color: fn.use-var(color, primary);
+      background-color: fn.use-var(bg-color, hover);
+    }
   }
 
   @include m.e(empty) {
@@ -189,30 +271,51 @@ $root-name: expression-editor;
     text-align: center;
   }
 
+  // 面板底部键盘操作提示
+  @include m.e(picker-hint) {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 4px 12px;
+    padding: 6px 10px;
+    border-top: fn.use-var(border);
+    font-size: fn.use-var(font-size-main, small);
+    color: fn.use-var(text-color, placeholder);
+    user-select: none;
+
+    span {
+      display: inline-flex;
+      align-items: center;
+      gap: 3px;
+    }
+  }
+
   // ─── 面包屑 ───────────────────────────────────────────────
   @include m.e(breadcrumbs) {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    padding: 6px 10px;
+    gap: 2px;
+    padding: 6px 8px;
+    background-color: fn.use-var(bg-color, middle);
     border-bottom: fn.use-var(border);
-    font-size: 12px;
+    font-size: fn.use-var(font-size-main, small);
     color: fn.use-var(text-color, second);
   }
 
   @include m.e(breadcrumb-item) {
     display: inline-flex;
     align-items: center;
-    gap: 4px;
+    gap: 2px;
   }
 
   @include m.e(breadcrumb-link) {
+    padding: 3px 6px;
+    border-radius: fn.use-var(radius, small);
     cursor: pointer;
     transition:
-      color 0.12s ease,
-      background-color 0.12s ease;
-    padding: 2px 6px;
-    border-radius: fn.use-var(radius, small);
+      color 0.15s ease,
+      background-color 0.15s ease;
 
     &:hover {
       color: fn.use-var(color, primary);
@@ -226,7 +329,7 @@ $root-name: expression-editor;
   }
 
   @include m.e(breadcrumb-separator) {
-    font-size: 10px;
+    font-size: 12px;
     color: fn.use-var(text-color, placeholder);
   }
 
@@ -236,7 +339,7 @@ $root-name: expression-editor;
     border-left: fn.use-var(border);
     padding: 8px 12px;
     background-color: fn.use-var(bg-color, middle);
-    font-size: 12px;
+    font-size: fn.use-var(font-size-main, small);
   }
 
   @include m.e(path-preview-title) {
@@ -257,6 +360,8 @@ $root-name: expression-editor;
     gap: 4px;
     line-height: 1.6;
     color: fn.use-var(text-color, main);
+    // 层级缩进由模板传入的 --depth 驱动
+    padding-left: calc(var(--depth, 0) * 12px);
 
     @include m.is(active) {
       color: fn.use-var(color, primary);
@@ -264,28 +369,8 @@ $root-name: expression-editor;
     }
   }
 
-  @include m.e(path-tree-branch) {
-    color: fn.use-var(text-color, placeholder);
-  }
-
   @include m.e(path-tree-label) {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  @include m.size using ($size) {
-    min-height: fn.use-var(form-component-height, $size);
-    padding: fn.use-var(gap, $size);
-
-    @include m.bem($root-name, placeholder) {
-      top: fn.use-var(gap, $size);
-      left: fn.use-var(gap, $size);
-      font-size: fn.use-var(font-size-main, $size);
-    }
-
-    @include m.bem($root-name, container) {
-      font-size: fn.use-var(font-size-main, $size);
-    }
+    min-width: 0;
+    @include m.ellipsis;
   }
 }

package/src/components/form/form.vue

@@ -3,7 +3,6 @@
     tag="form"
     ref="grid"
     @submit.prevent
-    gap="0 12px"
     :cols="cols || breakpointCols"
     :class="[cls.b, bem.is('readonly', readonly)]"
   >