@veltra/desktop 1.7.18 → 1.8.0

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;
@@ -105,12 +165,6 @@ $root-name: expression-editor;
         fn.use-var(color, primary, light-7)
       );
       box-shadow: 0 1px 4px fn.use-var(shadow, color);
-
-      #{fn.bem($root-name, chip-close)} {
-        opacity: 1;
-        max-width: 14px;
-        margin-left: 2px;
-      }
     }
 
     &.is-focused {
@@ -122,94 +176,93 @@ $root-name: expression-editor;
     pointer-events: none;
   }
 
-  @include m.e(chip-close) {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 14px;
-    max-width: 0;
-    margin-left: 0;
-    overflow: hidden;
-    font-size: 14px;
-    line-height: 1;
-    color: fn.use-var(color, primary);
-    opacity: 0;
-    transition:
-      opacity 0.12s ease,
-      max-width 0.12s ease,
-      margin-left 0.12s ease;
-    cursor: pointer;
-
-    &:hover {
-      transform: scale(1.1);
-    }
-  }
-
   // ─── 变量选择面板 ──────────────────────────────────────────
+  // 面板以 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) {
@@ -218,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);
@@ -255,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);
   }
 
@@ -265,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) {
@@ -286,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);
@@ -293,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)]"
   >

package/src/components/form/style.scss

@@ -3,15 +3,22 @@
 @use 'pkg:@veltra/styles/vars';
 
 @include m.b(form) {
+  // gap 走 CSS 而非 u-grid 内联样式，只读态才能覆盖行距
+  gap: 0 12px;
+
+  // 只读态：label 退为次级文本，值收进浅色圆角条；行距拉开让各项独立成块，避免粘连
   @include m.is(readonly) {
-    gap: 6px;
+    gap: 10px 12px;
 
     @include m.bem(form-item, label) {
-      background-color: fn.use-var(bg-color, top); // #fbfcfe;
+      color: fn.use-var(text-color, second);
     }
+
     @include m.bem(form-item, content) {
-      background-color: fn.use-var(bg-color, middle); // #f5f8fb;
-      padding: 0 8px;
+      padding: 4px 12px;
+      color: fn.use-var(text-color, main);
+      background-color: fn.use-var(bg-color, middle);
+      border-radius: fn.use-var(radius, default);
     }
   }
 

package/src/components/multi-select/multi-select.vue

@@ -80,11 +80,14 @@
         虚拟化启用时内容容器 height 由 useVirtualizer 命令式写入；
         模板不再绑定 totalSize，避免尺寸变化引起重渲染。
       -->
+      <div v-if="loading" :class="cls.e('loading')">
+        <ULoading type="dual-ring" />
+      </div>
       <u-scroll
         tag="ul"
         :class="[cls.e('options')]"
         ref="scrollRef"
-        v-if="options.length"
+        v-else-if="options.length"
         :content-class="[cls.e('options-wrap'), bem.is('virtual', virtualEnabled)]"
       >
         <template v-if="virtualEnabled">
@@ -166,6 +169,7 @@ import { UCheckbox } from '../checkbox'
 import { UDropdown } from '../dropdown'
 import { UEmpty } from '../empty'
 import { UIcon } from '../icon'
+import { ULoading } from '../loading'
 import { UScroll } from '../scroll'
 import { useOptions } from '../select/use-options'
 import { UTag } from '../tag'
@@ -204,7 +208,12 @@ const scrollRef = shallowRef<ScrollExposed>()
 
 const hovered = shallowRef(false)
 
-const { options: rawOptions, queryString, allOptions: rawAllOptions } = useOptions({ props })
+const {
+  options: rawOptions,
+  queryString,
+  loading,
+  allOptions: rawAllOptions
+} = useOptions({ props })
 
 const createdOptions = shallowRef<Record<string, any>[]>([])
 

package/src/components/multi-select/style.scss

@@ -170,4 +170,10 @@ $root-name: multi-select;
     text-align: center;
     padding: fn.use-var(gap, default) 0;
   }
+
+  @include m.e(loading) {
+    // 与选项内容区同高，加载期间保持面板形态，避免塌缩成贴着输入框的小条
+    @include m.flex($justify: center, $align: center);
+    min-height: 240px;
+  }
 }

package/src/components/multi-tree-select/multi-tree-select.vue

@@ -71,15 +71,19 @@
           {{ allExpanded ? '收起全部' : '展开全部' }}
         </u-button>
       </div>
+      <div v-if="remoteLoading" :class="cls.e('loading')">
+        <ULoading type="dual-ring" />
+      </div>
       <!-- 菜单列表 -->
       <u-tree
+        v-else
         v-bind="treeProps"
         v-model:checked="model"
         @update:checked="handleCheck"
         ref="treeRef"
         :class="cls.e('content-tree')"
         checkable
-        :data="data"
+        :data="treeData"
         :slots="slots"
         scroll-to-view
       ></u-tree>
@@ -100,7 +104,7 @@
 </template>
 
 <script lang="ts" setup>
-import { dfs, o } from '@cat-kit/core'
+import { debounce, dfs, o } from '@cat-kit/core'
 import { useFormFallbackProps } from '@veltra/compositions'
 import { ArrowDown, Close } from '@veltra/icons/normal'
 import { bem, fieldKey, FORM_EMPTY_CONTENT } from '@veltra/utils'
@@ -113,6 +117,7 @@ import { UButton } from '../button'
 import { UCheckbox } from '../checkbox'
 import { UDropdown } from '../dropdown'
 import { UIcon } from '../icon'
+import { ULoading } from '../loading'
 import { UTag } from '../tag'
 import { UTree } from '../tree'
 import type { TreeSlotsScope } from '../tree/di'
@@ -148,6 +153,7 @@ const treeProps = computed(() => {
     'label',
     'readonly',
     'modelValue',
+    'data',
     'contentClass',
     'contentStyle',
     'minWidth',
@@ -159,11 +165,56 @@ const emit = defineEmits<MultiTreeSelectEmits>()
 
 const slots = defineSlots<{ default?: (props: TreeSlotsScope) => any }>()
 
-/**过滤 */
+/** 是否可搜索：显式声明或数据源为远程函数 */
+const filterable = computed(() => props.filterable || typeof props.data === 'function')
+
+/** 过滤 */
 const qs = shallowRef('')
-watch(qs, (qs) => {
-  treeRef.value?.filter(qs)
-})
+
+const treeRef = shallowRef<TreeExposed>()
+
+/** 远程搜索返回的树数据 */
+const remoteData = shallowRef<Record<string, any>[]>()
+
+/** 面板渲染的树数据：data 为函数时来自远程搜索，否则为静态数据 */
+const treeData = computed(() => (typeof props.data === 'function' ? remoteData.value : props.data))
+
+const remoteLoading = shallowRef(false)
+/** 远程请求序号；响应返回时序号不一致说明已有更新的请求，结果作废 */
+let remoteSeq = 0
+
+const debouncedRemoteSearch = debounce(
+  async (
+    query: string,
+    dataFn: (qs: string) => Promise<Record<string, any>[]> | Record<string, any>[]
+  ) => {
+    const seq = ++remoteSeq
+    remoteLoading.value = true
+    try {
+      const data = await dataFn(query)
+      // 响应到达时查询词可能已变化或已有更新的请求，过期结果直接丢弃
+      if (seq !== remoteSeq || query !== qs.value) return
+      remoteData.value = data ?? []
+      // 搜索结果展示完整命中路径，与本地过滤自动展开祖先的行为对齐
+      if (query) nextTick(() => treeRef.value?.expandAll())
+    } finally {
+      if (seq === remoteSeq) remoteLoading.value = false
+    }
+  },
+  200
+)
+
+watch(
+  [qs, () => props.data],
+  ([query, data]) => {
+    if (typeof data === 'function') {
+      debouncedRemoteSearch(query, data)
+      return
+    }
+    treeRef.value?.filter(query)
+  },
+  { immediate: true }
+)
 
 const model = defineModel<(string | number)[]>({ default: () => [] })
 
@@ -179,8 +230,6 @@ const showClear = computed(() => {
   return props.clearable && model.value?.length && hovered.value && !disabled.value
 })
 
-const treeRef = shallowRef<TreeExposed>()
-
 const dropdownRef = shallowRef<DropdownExposed>()
 
 let changedByEvent = false
@@ -237,7 +286,7 @@ const handleClear = () => {
 const keyDicts = shallowRef(new Map<string | number, Record<string, any>>())
 
 watch(
-  () => props.data,
+  treeData,
   (data) => {
     if (!data?.length) {
       keyDicts.value = new Map()

package/src/components/multi-tree-select/style.scss

@@ -126,4 +126,10 @@ $root-name: multi-tree-select;
   @include m.e(content-tree) {
     max-height: 240px;
   }
+
+  @include m.e(loading) {
+    // 与树内容区同高，加载期间保持面板形态，避免塌缩成贴着输入框的小条
+    @include m.flex($justify: center, $align: center);
+    min-height: 240px;
+  }
 }