@veltra/desktop 1.0.13 → 1.0.14

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

@@ -2,7 +2,6 @@
 @use 'pkg:@veltra/styles/functions' as fn;
 @use 'pkg:@veltra/styles/vars';
 
-// 方便拼接
 $root-name: expression-editor;
 
 @include m.b($root-name) {
@@ -43,26 +42,6 @@ $root-name: expression-editor;
     }
   }
 
-  @include m.e(tools) {
-    text-align: right;
-    margin-bottom: fn.use-var(gap, small);
-
-    & > * {
-      cursor: pointer;
-      transition: color 0.2s ease;
-
-      &:hover {
-        color: fn.use-var(color, primary);
-      }
-    }
-  }
-
-  @include m.e(paragraph) {
-    margin: 0;
-    padding: 0;
-    line-height: 1.6;
-  }
-
   @include m.e(placeholder) {
     position: absolute;
     color: fn.use-var(text-color, placeholder);
@@ -83,213 +62,172 @@ $root-name: expression-editor;
     overflow-y: auto;
 
     &:empty::before {
-      content: '\200b'; // Zero-width space to maintain height
-    }
-
-    .ultra-expression-variable-source {
-      cursor: grab;
+      content: '\200b';
     }
 
-    .ultra-expression-variable-source.is-dragging {
-      opacity: 0.5;
-      cursor: grabbing;
+    > [data-seg='text'] {
+      // 让连续中文 / 字符自然包裹；变量 chip 之间的空 text span 也能承载光标
+      white-space: pre-wrap;
     }
-
-    .expression-editor__drop-indicator {
-      position: absolute;
-      width: 2px;
-      border-radius: 999px;
-      transform: translateX(-1px);
-      pointer-events: none;
-      background-color: fn.use-var(color, primary);
-      box-shadow: 0 0 0 1px fn.use-var(color, primary, light-8);
-      transition: opacity 0.12s ease;
-      z-index: 3;
-    }
-  }
-
-  @include m.e(fallback) {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    margin-top: 8px;
-    padding-top: 8px;
-    border-top: fn.use-var(border);
-  }
-
-  @include m.e(fallback-item) {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-  }
-
-  @include m.e(fallback-label) {
-    min-width: 0;
-    flex: 1;
-    font-size: 12px;
-    color: fn.use-var(text-color, main);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
   }
 
-  @include m.e(fallback-actions) {
+  // ─── 变量 chip ────────────────────────────────────────────────
+  @include m.e(chip) {
     display: inline-flex;
     align-items: center;
     gap: 4px;
-    flex-shrink: 0;
-  }
-
-  @include m.e(fallback-button) {
-    border: fn.use-var(border);
-    border-radius: fn.use-var(radius, small);
-    background-color: fn.use-var(bg-color, top);
-    color: fn.use-var(text-color, main);
-    font-size: 12px;
-    line-height: 1;
-    height: 22px;
+    margin: 0 2px;
     padding: 0 8px;
+    height: 22px;
+    line-height: 1;
+    font-size: 12px;
+    color: fn.use-var(text-color, white);
+    background-color: fn.use-var(color, primary);
+    border-radius: 999px;
     cursor: pointer;
-    transition: all 0.12s ease;
+    user-select: none;
+    transition:
+      background-color 0.12s ease,
+      box-shadow 0.12s ease;
 
-    &:hover:not(:disabled) {
-      color: fn.use-var(color, primary);
-      border-color: fn.use-var(color, primary);
-      background-color: fn.use-var(color, primary, light-9);
+    &:hover {
+      background-color: fn.use-var(color, primary, light-2);
+      box-shadow: 0 1px 4px fn.use-var(shadow, color);
+
+      .#{vars.$namespace}#{$root-name}__chip-close {
+        opacity: 1;
+        max-width: 14px;
+        margin-left: 2px;
+      }
     }
 
-    &:disabled {
-      cursor: not-allowed;
-      color: fn.use-var(text-color, placeholder);
-      border-color: fn.use-var(border, color);
-      background-color: fn.use-var(bg-color, middle);
+    &.is-focused {
+      box-shadow: 0 0 0 2px fn.use-var(color, primary, light-7);
     }
   }
 
-  @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.e(chip-label) {
+    pointer-events: none;
+  }
 
-    @include m.bem($root-name, container) {
-      font-size: fn.use-var(font-size-main, $size);
-    }
+  @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(text-color, white);
+    opacity: 0;
+    transition:
+      opacity 0.12s ease,
+      max-width 0.12s ease,
+      margin-left 0.12s ease;
+    cursor: pointer;
 
-    @include m.bem($root-name, clear) {
-      font-size: fn.use-var(font-size-main, $size);
+    &:hover {
+      transform: scale(1.1);
     }
   }
 
-  @include m.e(variable-empty) {
-    padding: 16px;
-    text-align: center;
-    color: fn.use-var(text-color, second);
-    font-size: 13px;
-    font-weight: 500;
-  }
-
-  @include m.e(variable-list) {
-    padding: 6px 0;
-    margin: 0;
-    list-style: none;
-    max-height: 240px;
-    overflow-y: auto;
+  // ─── 变量选择面板 ──────────────────────────────────────────
+  @include m.e(picker) {
+    min-width: 220px;
     background-color: fn.use-var(bg-color, top);
+  }
 
-    &::-webkit-scrollbar {
-      width: 8px;
-    }
+  @include m.e(picker-body) {
+    display: flex;
+    align-items: stretch;
+    min-height: 200px;
+  }
 
-    &::-webkit-scrollbar-track {
-      background-color: fn.use-var(bg-color, middle);
-      border-radius: fn.use-var(radius, small);
-    }
+  @include m.e(panel) {
+    flex: 1 1 auto;
+    min-width: 0;
+    max-height: 320px;
+  }
 
-    &::-webkit-scrollbar-thumb {
-      background-color: fn.use-var(text-color, placeholder);
-      border-radius: fn.use-var(radius, small);
-      border: 2px solid fn.use-var(bg-color, middle);
+  @include m.e(panel-list) {
+    height: 100%;
+    min-height: 200px;
+  }
 
-      &:hover {
-        background-color: fn.use-var(text-color, second);
-      }
-    }
+  @include m.e(panel-content) {
+    padding: 4px 0;
   }
 
-  @include m.e(variable-item) {
-    padding: 8px 14px;
-    margin: 2px 6px;
+  @include m.e(item) {
+    padding: 6px 12px;
     cursor: pointer;
-    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-    border-radius: fn.use-var(radius, default);
-    font-size: 13px;
+    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-weight: 500;
-
-    &:hover {
-      background-color: fn.use-var(color, primary, light-9);
-      color: fn.use-var(color, primary);
-      transform: translateX(2px);
-    }
+    font-size: 13px;
+    line-height: 1.4;
+    border-radius: fn.use-var(radius, small);
+    margin: 1px 4px;
 
-    @include m.is('active') {
+    @include m.is(active) {
       background-color: fn.use-var(color, primary);
       color: fn.use-var(text-color, white);
-      font-weight: 600;
-      box-shadow: 0 2px 4px fn.use-var(shadow, color);
+
+      @include m.bem($root-name, item-expand) {
+        color: fn.use-var(text-color, white);
+      }
     }
   }
 
-  @include m.e(filter) {
-    padding: 6px;
-    border-bottom: fn.use-var(border);
+  @include m.e(item-label) {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  @include m.e(item-expand) {
+    flex-shrink: 0;
+    color: fn.use-var(text-color, placeholder);
+    font-size: 12px;
   }
 
+  @include m.e(empty) {
+    flex: 1;
+    padding: 32px 16px;
+    text-align: center;
+  }
+
+  // ─── 面包屑 ───────────────────────────────────────────────
   @include m.e(breadcrumbs) {
     display: flex;
     align-items: center;
+    flex-wrap: wrap;
     padding: 6px 10px;
     border-bottom: fn.use-var(border);
-    background-color: fn.use-var(bg-color, middle);
     font-size: 12px;
     color: fn.use-var(text-color, second);
-    overflow-x: auto;
-    white-space: nowrap;
-
-    &::-webkit-scrollbar {
-      height: 4px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background-color: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background-color: fn.use-var(border, color);
-      border-radius: 2px;
-
-      &:hover {
-        background-color: fn.use-var(text-color, placeholder);
-      }
-    }
   }
 
   @include m.e(breadcrumb-item) {
-    display: flex;
+    display: inline-flex;
     align-items: center;
     gap: 4px;
   }
 
   @include m.e(breadcrumb-link) {
     cursor: pointer;
-    transition: all 0.15s ease;
-    font-weight: 500;
+    transition:
+      color 0.12s ease,
+      background-color 0.12s ease;
     padding: 2px 6px;
     border-radius: fn.use-var(radius, small);
 
@@ -307,74 +245,64 @@ $root-name: expression-editor;
   @include m.e(breadcrumb-separator) {
     font-size: 10px;
     color: fn.use-var(text-color, placeholder);
-    margin: 0 2px;
   }
 
-  @include m.e(panel) {
-    min-height: 200px;
-    max-height: 360px;
+  // ─── 路径预览（扁平模式专用） ────────────────────────────────
+  @include m.e(path-preview) {
+    flex: 0 0 200px;
+    border-left: fn.use-var(border);
+    padding: 8px 12px;
+    background-color: fn.use-var(bg-color, middle);
+    font-size: 12px;
   }
 
-  @include m.e(panel-list) {
-    height: 100%;
-    min-height: 200px;
+  @include m.e(path-preview-title) {
+    color: fn.use-var(text-color, second);
+    margin-bottom: 6px;
+    font-weight: 600;
   }
 
-  @include m.e(panel-content) {
-    padding: 2px 0;
+  @include m.e(path-tree) {
+    list-style: none;
+    margin: 0;
+    padding: 0;
   }
 
-  @include m.e(item) {
-    padding: 5px 10px;
-    cursor: pointer;
-    user-select: none;
+  @include m.e(path-tree-item) {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    transition: all 0.12s ease;
+    gap: 4px;
+    line-height: 1.6;
     color: fn.use-var(text-color, main);
-    font-size: 13px;
-    line-height: 1.4;
-    border-radius: fn.use-var(radius, small);
-    margin: 1px 4px;
-
-    &:hover {
-      background-color: fn.use-var(bg-color, hover);
-    }
 
     @include m.is(active) {
-      background-color: fn.use-var(color, primary);
-      color: fn.use-var(text-color, white);
-      font-weight: 500;
-      box-shadow: 0 1px 3px fn.use-var(shadow, color);
-
-      @include m.bem($root-name, item-expand) {
-        color: fn.use-var(text-color, white);
-      }
+      color: fn.use-var(color, primary);
+      font-weight: 600;
     }
+  }
 
-    @include m.is(leaf) {
-      // 叶子节点样式
-    }
+  @include m.e(path-tree-branch) {
+    color: fn.use-var(text-color, placeholder);
   }
 
-  @include m.e(item-label) {
-    flex: 1;
+  @include m.e(path-tree-label) {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
-  @include m.e(item-expand) {
-    flex-shrink: 0;
-    color: fn.use-var(text-color, placeholder);
-    font-size: 11px;
-    transition: color 0.15s ease;
-  }
+  @include m.size using ($size) {
+    min-height: fn.use-var(form-component-height, $size);
+    padding: fn.use-var(gap, $size);
 
-  @include m.e(empty) {
-    padding: 40px 20px;
-    text-align: center;
+    @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);
+    }
   }
 }

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

@@ -1,7 +1,5 @@
 import '../tip/style'
-import '../input/style'
 import '../icon/style'
 import '../scroll/style'
 import '../empty/style'
-import '../tag/style'
 import './style.scss'

package/src/components/layout/layout.vue

@@ -59,7 +59,7 @@ watchEffect(() => {
     templateCols.value = []
     return
   }
-  templateCols.value = typeof cols === 'string' ? cols.split(' ') : cols
+  templateCols.value = typeof cols === 'string' ? cols.split(' ') : [...cols]
 })
 
 const style = computed<CSSProperties>(() => {
@@ -109,27 +109,25 @@ useResizeObserver({
 
 // const resizing = shallowRef(false)
 
-let prevSize = '0'
-let nextSize = '0'
+let prevSize = 0
+let nextSize = 0
 const handleStartResize = (index: number) => {
-  prevSize = templateCols.value[index]!
-  nextSize = templateCols.value[index + 1]!
-
-  if (!prevSize.endsWith('px') && !nextSize.endsWith('px')) {
-    const rect = containerRef.value?.children[index + 1]?.getBoundingClientRect()
-    if (rect) {
-      nextSize = rect.width + 'px'
-    }
-  }
-  // resizing.value = true
+  const container = containerRef.value
+  if (!container) return
+
+  // 拖拽前把相邻两列按实际渲染宽度固定成 px，
+  // 这样拖拽时两列等量增减、容器整体宽度保持不变。
+  const prevDom = container.children[index] as HTMLElement | undefined
+  const nextDom = container.children[index + 1] as HTMLElement | undefined
+  prevSize = prevDom ? prevDom.getBoundingClientRect().width : 0
+  nextSize = nextDom ? nextDom.getBoundingClientRect().width : 0
 }
 const handleResize = (offset: number, index: number) => {
-  if (prevSize?.endsWith('px')) {
-    templateCols.value[index] = `${parseInt(prevSize) + offset}px`
-  }
-  if (nextSize?.endsWith('px')) {
-    templateCols.value[index + 1] = `${parseInt(nextSize) - offset}px`
-  }
+  // 钳位到 [-prevSize, nextSize]，避免轨道尺寸出现负值——
+  // 一旦 grid-template-columns 中带负值，整条声明会被浏览器丢弃。
+  const clamped = Math.max(-prevSize, Math.min(nextSize, offset))
+  templateCols.value[index] = `${prevSize + clamped}px`
+  templateCols.value[index + 1] = `${nextSize - clamped}px`
 }
 
 provide(LayoutDIKey, {

package/src/components/number-input/number-input.vue

@@ -181,9 +181,9 @@ function getDisplayed(num?: number): string {
 
 watch(
   [model, focused, () => props.currency],
-  ([model, focused]) => {
-    if (focused) return
-    displayed.value = getDisplayed(model)
+  ([modelValue, inputFocused]) => {
+    if (inputFocused) return
+    displayed.value = getDisplayed(modelValue)
   },
   { immediate: true }
 )
@@ -248,7 +248,7 @@ function getValidValue<T extends undefined | number>(val: T): T {
 
 function handleUpdateModelValue(input: string): void {
   const newVal = parseDisplayed(input)
-  model.value = getValidValue(newVal) ?? 0
+  model.value = getValidValue(newVal)
   displayed.value = input
 }
 

package/src/components/table/use-table.ts

@@ -103,7 +103,21 @@ export function useTable(options: Options): UseTableReturn {
     headerCellClassCache = new WeakMap()
   })
 
+  /**
+   * B2: 即便缓存命中也需读取 `leftFixed` / `rightFixed`，将其登记为调用方
+   * render effect 的响应式依赖。
+   *
+   * 否则横向滚动时虽然 `watch` 已经清空缓存，但已渲染的单元格没有任何依赖
+   * 把这两个 ref 串联到自己的 render，导致 `is-last-fixed` / `is-first-fixed`
+   * 阴影 class 不会被刷新——只有垂直滚动让虚拟列表新挂载行时（render 首次
+   * 命中空缓存读到最新值）才能看到阴影。
+   *
+   * 父级 `useTable` 的 watch effect id 早于子 `TableRow` 的 render effect，
+   * 同一 flush 周期中缓存会先被清空，再轮到 render 重跑读到最新值。
+   */
   const getCellClass = (column: ColumnNode): string => {
+    void leftFixed.value
+    void rightFixed.value
     const cached = cellClassCache.get(column)
     if (cached !== undefined) return cached
     const result = getCommonClassName(column) + ` ${bem.is(column.align)}`
@@ -112,6 +126,8 @@ export function useTable(options: Options): UseTableReturn {
   }
 
   const getHeaderCellClass = (column: ColumnNode): string => {
+    void leftFixed.value
+    void rightFixed.value
     const cached = headerCellClassCache.get(column)
     if (cached !== undefined) return cached
     const result = getCommonClassName(column) + ` ${bem.is(column.headerAlign)}`