@veltra/desktop 1.7.19 → 1.8.1

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="visualEmpty || 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
@@ -53,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 }>()
@@ -63,11 +76,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)
 ])
@@ -78,8 +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)
+/** 框内视觉空态：与 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)
@@ -88,6 +107,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 +128,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()
   }
@@ -125,6 +157,9 @@ onMounted(() => {
       if (value !== (props.modelValue ?? '')) emit('update:modelValue', value)
       syncMention()
     },
+    onVisualEmptyChange: (empty) => {
+      visualEmpty.value = empty
+    },
     onSelectionChange: () => {
       syncMention()
     },
@@ -135,6 +170,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,70 @@
 $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) {
+  @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);
+
+    // 状态描边压在 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;
     }
-  }
 
-  @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 +76,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 +176,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 +270,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 +328,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 +338,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 +359,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 +368,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/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'