@veltra/desktop 1.1.3 → 1.1.5

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

@@ -2,8 +2,246 @@
 @use 'pkg:@veltra/styles/functions' as fn;
 @use 'pkg:@veltra/styles/vars';
 
-// 方便拼接
 $root-name: condition-editor;
 
 @include m.b($root-name) {
+  // ─── 条件分组 ────────────────────────────────────
+  @include m.e(group) {
+    // 外层不需额外边框
+  }
+
+  @include m.e(group-header) {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-bottom: 4px;
+  }
+
+  @include m.e(group-body) {
+    border-left: 2px solid fn.use-var(border, muted-color);
+    margin-left: 8px;
+    padding-left: 10px;
+  }
+
+  @include m.e(group-actions) {
+    display: flex;
+    gap: 10px;
+    padding: 2px 0;
+  }
+
+  @include m.e(group-result) {
+    font-size: 11px;
+    font-weight: 600;
+
+    &--pass {
+      color: fn.use-var(color, success);
+    }
+
+    &--fail {
+      color: fn.use-var(color, danger);
+    }
+  }
+
+  // ─── AND/OR 标签 ──────────────────────────────────
+  @include m.e(logic-tag) {
+    display: inline-block;
+    padding: 1px 8px;
+    border-radius: fn.use-var(radius, small);
+    font-size: 11px;
+    font-weight: 600;
+    cursor: pointer;
+    user-select: none;
+    transition: background-color 0.12s ease;
+
+    &--and {
+      background-color: fn.use-var(color, primary, light-9);
+      color: fn.use-var(color, primary);
+
+      &:hover {
+        background-color: fn.use-var(color, primary, light-8);
+      }
+    }
+
+    &--or {
+      background-color: fn.use-var(color, warning, light-9);
+      color: fn.use-var(color, warning);
+
+      &:hover {
+        background-color: fn.use-var(color, warning, light-8);
+      }
+    }
+  }
+
+  // ─── 条件行 ──────────────────────────────────────
+  @include m.e(row) {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    margin-bottom: 3px;
+  }
+
+  @include m.e(field) {
+    width: 90px;
+    flex-shrink: 0;
+  }
+
+  @include m.e(operator) {
+    width: 80px;
+    flex-shrink: 0;
+  }
+
+  @include m.e(value) {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+  }
+
+  @include m.e(value-input) {
+    width: 100%;
+    height: 28px;
+    padding: 0 8px;
+    border: 1px solid fn.use-var(border, muted-color);
+    border-radius: fn.use-var(radius, small);
+    font-size: 12px;
+    color: fn.use-var(text-color, main);
+    background-color: fn.use-var(bg-color, top);
+    outline: none;
+    transition: border-color 0.12s ease;
+
+    &::placeholder {
+      color: fn.use-var(text-color, placeholder);
+    }
+
+    &:focus {
+      border-color: fn.use-var(color, primary);
+    }
+
+    &:disabled {
+      background-color: fn.use-var(color, disabled);
+      cursor: not-allowed;
+    }
+  }
+
+  @include m.e(value-empty) {
+    font-size: 12px;
+    color: fn.use-var(text-color, assist);
+  }
+
+  // ─── 变量 chip ──────────────────────────────────
+  @include m.e(value-chip) {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 0 8px;
+    height: 22px;
+    font-size: 12px;
+    color: fn.use-var(color, primary);
+    background-color: fn.use-var(color, primary, light-9);
+    border-radius: 999px;
+    cursor: pointer;
+    user-select: none;
+    transition:
+      background-color 0.12s ease,
+      box-shadow 0.12s ease;
+
+    &:hover {
+      background-color: fn.use-var(color, primary, light-8);
+
+      .#{vars.$namespace}#{$root-name}__value-chip-close {
+        opacity: 1;
+        max-width: 14px;
+        margin-left: 2px;
+      }
+    }
+  }
+
+  @include m.e(value-chip-label) {
+    pointer-events: none;
+  }
+
+  @include m.e(value-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;
+
+    &:hover {
+      transform: scale(1.1);
+    }
+  }
+
+  // ─── 删除按钮 ────────────────────────────────────
+  @include m.e(row-delete) {
+    flex-shrink: 0;
+    width: 16px;
+    text-align: center;
+    font-size: 15px;
+    color: fn.use-var(text-color, assist);
+    cursor: pointer;
+    transition: color 0.12s ease;
+
+    &:hover {
+      color: fn.use-var(color, danger);
+    }
+  }
+
+  // ─── 结果指示 ────────────────────────────────────
+  @include m.e(result) {
+    flex-shrink: 0;
+    width: 16px;
+    text-align: center;
+    font-size: 11px;
+    font-weight: 600;
+
+    &--pass {
+      color: fn.use-var(color, success);
+    }
+
+    &--fail {
+      color: fn.use-var(color, danger);
+    }
+
+    &--none {
+      color: fn.use-var(text-color, assist);
+    }
+  }
+
+  // ─── 添加按钮 ────────────────────────────────────
+  @include m.e(add-btn) {
+    font-size: 11px;
+    color: fn.use-var(color, primary);
+    cursor: pointer;
+    transition: color 0.12s ease;
+
+    &:hover {
+      color: fn.use-var(color, primary, dark-2);
+    }
+  }
+
+  // ─── 状态 ──────────────────────────────────────
+  @include m.is(disabled) {
+    cursor: not-allowed;
+
+    @include m.bem($root-name, logic-tag) {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    @include m.bem($root-name, add-btn) {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+  }
 }

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

@@ -1 +1,8 @@
+import '../select/style'
+import '../input/style'
+import '../icon/style'
+import '../scroll/style'
+import '../empty/style'
+import '../tip/style'
+import '../expression-editor/style'
 import './style.scss'

package/src/components/dialog/style.scss

@@ -18,6 +18,19 @@ $root-name: dialog;
     background-color: rgba($color: #000000, $alpha: 0.32);
     pointer-events: auto;
   }
+
+  // 确保遮罩淡入淡出不受外部 fade 样式（如 transform）影响
+  &.fade-enter-active,
+  &.fade-leave-active {
+    transition: opacity 0.25s linear;
+  }
+
+  &.fade-enter-from,
+  &.fade-leave-to {
+    opacity: 0;
+    transform: none;
+    filter: none;
+  }
 }
 
 @include m.b($root-name) {

package/src/components/drawer/style.scss

@@ -107,6 +107,19 @@ $direction-map: (
   height: 100vh;
   background-color: rgba($color: #000000, $alpha: 0.32);
   overflow: hidden;
+
+  // 确保遮罩淡入淡出不受外部 fade 样式（如 transform）影响
+  &.fade-enter-active,
+  &.fade-leave-active {
+    transition: opacity 0.25s linear;
+  }
+
+  &.fade-enter-from,
+  &.fade-leave-to {
+    opacity: 0;
+    transform: none;
+    filter: none;
+  }
 }
 
 // 动画

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

@@ -11,6 +11,7 @@ $root-name: expression-editor;
   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 {

package/src/components/form-item/form-item.vue

@@ -81,7 +81,7 @@ const labelStyles = computed<CSSProperties>(() => {
 /** 错误提示 */
 const errorTips = computed<string | undefined>(() => {
   if (props.field) {
-    return formProps?.model.errors.get(props.field)?.[0]
+    return formProps?.model?.errors.get(props.field)?.[0]
   }
 })
 

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

@@ -15,7 +15,14 @@
           :size="size"
           @click="handleRemove(index)"
         />
-        <u-button :icon="Plus" circle :disabled="disabled" :size="size" @click="handleAdd(index)" />
+        <u-button
+          :icon="Plus"
+          circle
+          :disabled="disabled"
+          :size="size"
+          type="primary"
+          @click="handleAdd(index)"
+        />
       </span>
     </li>
   </ul>

package/src/components/group-input/style.ts

@@ -1 +1,2 @@
+import '../button/style'
 import './style.scss'

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

@@ -21,7 +21,7 @@
 
 <script lang="ts" setup>
 import { Ripple } from '@veltra/directives'
-import { inject, onBeforeUnmount } from 'vue'
+import { inject, onBeforeUnmount, shallowRef } from 'vue'
 
 import { UCheckbox } from '../checkbox'
 import { MultiSelectDIKey } from './di'
@@ -43,8 +43,6 @@ const props = defineProps<{
   measureElement?: (index: number, el: Element | null) => void
 }>()
 
-const { disabled = false, checked } = props
-
 function measureRef(el: unknown) {
   if (typeof props.index !== 'number' || !props.measureElement) return
   props.measureElement(props.index, el as Element | null)
@@ -56,33 +54,41 @@ const emit = defineEmits<{
 
 const { optionClass, rippleClass, checkboxClass } = inject(MultiSelectDIKey)!
 
-let ripple: Ripple | null = null
+const rippleRef = shallowRef<Ripple | null>(null)
 
 function handleClick(e) {
-  if (disabled) return
-  emit('check', !checked)
+  if (props.disabled) return
+  emit('check', !props.checked)
 }
 
 function handleMousedown(e: MouseEvent) {
-  if (disabled) return
+  if (props.disabled) return
+
+  // 清理旧实例，避免同一元素上多个 Ripple 实例同时修改样式
+  if (rippleRef.value) {
+    rippleRef.value.remove()
+    rippleRef.value = null
+  }
 
-  ripple = new Ripple(e.currentTarget as HTMLElement, {
+  rippleRef.value = new Ripple(e.currentTarget as HTMLElement, {
     rippleClass
   })
 
-  ripple.showByEvent(e)
+  rippleRef.value.showByEvent(e)
 }
 
 function handleMouseleave() {
-  ripple?.remove()
+  rippleRef.value?.remove()
+  rippleRef.value = null
 }
 
 function handleMouseup() {
-  ripple?.remove()
+  rippleRef.value?.remove()
+  rippleRef.value = null
 }
 
 onBeforeUnmount(() => {
-  ripple?.remove()
-  ripple = null
+  rippleRef.value?.remove()
+  rippleRef.value = null
 })
 </script>

package/src/components/number-range-input/style.scss

@@ -4,6 +4,7 @@
 @include m.b(number-range-input) {
   display: inline-flex;
   align-items: center;
+  width: 100%;
   gap: fn.use-var(gap, small);
 
   @include m.e(separator) {

package/src/components/table/style.scss

@@ -17,8 +17,8 @@ $root-name: table;
   width: 100%;
   position: relative;
   border: 1px solid var(--u-table-border-color);
-  border-bottom: none;
   overflow: hidden;
+  background-color: fn.use-var(bg-color, top);
 
   @include m.size using ($size) {
     border-radius: fn.use-var(radius, $size);
@@ -171,6 +171,14 @@ $root-name: table;
 
   @include m.e(body) {
     will-change: transform;
+
+    @include m.bem($root-name, row) {
+      &:last-child {
+        @include m.bem($root-name, cell) {
+          border-bottom: none;
+        }
+      }
+    }
   }
 
   @include m.e(empty) {

package/src/components/table/table.vue

@@ -151,9 +151,7 @@ const columnConfig = useColumns({
 
 const { leafColumns } = columnConfig
 
-const { handleScroll, leftFixed, rightFixed } = useFixedColumns({
-  isScrolling: isScrollingRelay
-})
+const { handleScroll, leftFixed, rightFixed } = useFixedColumns()
 
 const {
   getColumnSlotsNode,

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

@@ -1,5 +1,5 @@
 import { debounce } from '@cat-kit/core'
-import { type ShallowRef, type Ref, ref, watch } from 'vue'
+import { type ShallowRef, ref } from 'vue'
 
 import type { ScrollPosition } from '../../types'
 
@@ -9,62 +9,18 @@ interface UseColumnFixedReturned {
   handleScroll: (e: Required<ScrollPosition>) => void
 }
 
-interface Options {
-  /**
-   * D1：滚动中 (`true`) 暂缓 `leftFixed` / `rightFixed` 的切换，滚动结束后
-   * 一次性补算。
-   *
-   * 背景：固定列的阴影是通过在 cell 上切换 `is-last-fixed` / `is-first-fixed`
-   * 等 class 实现的，这些 class 会穿透到 `useTable.getCellClass` 的缓存键，
-   * 任何一次切换都会让全表的单元格类名失效重算。滚动本身并不需要实时更新阴影，
-   * 因此把切换推迟到 `isScrolling` 归零时做一次即可。
-   *
-   * 未传入时退化到旧行为（实时切换）。
-   */
-  isScrolling?: Ref<boolean>
-}
-
-/**
- * 固定列
- * @returns
- */
-export function useFixedColumns(options: Options = {}): UseColumnFixedReturned {
-  const { isScrolling } = options
-
+export function useFixedColumns(): UseColumnFixedReturned {
   const leftFixed = ref(false)
   const rightFixed = ref(false)
 
-  let pendingLeft: boolean | null = null
-  let pendingRight: boolean | null = null
-
-  const applyImmediate = (nextLeft: boolean, nextRight: boolean): void => {
-    if (nextLeft !== leftFixed.value) leftFixed.value = nextLeft
-    if (nextRight !== rightFixed.value) rightFixed.value = nextRight
-    pendingLeft = null
-    pendingRight = null
-  }
-
   const handleScroll = debounce((e: Required<ScrollPosition>) => {
     const nextLeft = e.x > 0
     // 精度修正：浏览器滚动条最后 1px 的误差
     const nextRight = !(e.cw + e.x + 1 >= e.sw)
 
-    if (isScrolling?.value) {
-      pendingLeft = nextLeft
-      pendingRight = nextRight
-      return
-    }
-
-    applyImmediate(nextLeft, nextRight)
-  }, 50)
-
-  if (isScrolling) {
-    watch(isScrolling, (v) => {
-      if (v) return
-      if (pendingLeft === null && pendingRight === null) return
-      applyImmediate(pendingLeft ?? leftFixed.value, pendingRight ?? rightFixed.value)
-    })
-  }
+    if (nextLeft !== leftFixed.value) leftFixed.value = nextLeft
+    if (nextRight !== rightFixed.value) rightFixed.value = nextRight
+  }, 100)
 
   return { leftFixed, rightFixed, handleScroll }
 }

package/src/types/action.ts

@@ -30,17 +30,6 @@ export interface ActionGroupProps {
    */
   max?: number
 
-  /**
-   * 紧凑悬浮模式
-   *
-   * @description
-   * - 默认半透明，悬浮在父容器上方时完全显现
-   * - 提供圆角胶囊容器与磨砂背景，更适合表格行内操作栏
-   * - "更多"按钮也会切换为图标态以与其他操作按钮保持一致
-   * @default false
-   */
-  hover?: boolean
-
   /**
    * 子项默认尺寸
    * @default 'small'
@@ -68,5 +57,11 @@ export interface ActionEmits {
 /** 操作组件暴露的属性和方法(组件内部使用) */
 export interface _ActionExposed {}
 
+export interface _ActionGroupExposed {
+  closeTip: () => void
+}
+
 /** 操作组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
 export type ActionExposed = DeconstructValue<_ActionExposed>
+
+export type ActionGroupExposed = DeconstructValue<_ActionGroupExposed>

package/src/types/condition-editor.ts

@@ -1,17 +1,49 @@
-import type { DeconstructValue } from '@veltra/utils'
+import type { ComponentSize, DeconstructValue } from '@veltra/utils'
+
+import type { VariableItem } from './expression-editor'
+
+export interface ConditionField {
+  label: string
+  value: string
+  type: 'string' | 'number' | 'boolean' | 'date' | 'enum'
+  enumOptions?: { label: string; value: string }[]
+}
+
+export type ConditionValue =
+  | { kind: 'constant'; value: string }
+  | { kind: 'variable'; name: string }
+
+export interface ConditionItem {
+  field: string
+  operator: string
+  value: ConditionValue
+  _result?: boolean
+}
+
+export interface ConditionGroup {
+  logic: 'and' | 'or'
+  conditions: ConditionItem[]
+  groups: ConditionGroup[]
+  _result?: boolean
+}
+
+export type ConditionExpression = ConditionGroup
 
-/** 条件编辑器组件属性 */
 export interface ConditionEditorProps {
-  modelValue?: string
+  modelValue?: ConditionExpression
+  fields?: ConditionField[]
+  variables?: VariableItem[]
+  data?: Record<string, unknown>
+  size?: ComponentSize
+  disabled?: boolean
+  readonly?: boolean
 }
 
-/** 条件编辑器组件定义的事件 */
 export interface ConditionEditorEmits {
-  (e: 'update:modelValue', value: string): void
+  (e: 'update:modelValue', value: ConditionExpression): void
+  (e: 'evaluate', results: ConditionExpression): void
 }
 
-/** 条件编辑器组件暴露的属性和方法(组件内部使用) */
 export interface _ConditionEditorExposed {}
 
-/** 条件编辑器组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
 export type ConditionEditorExposed = DeconstructValue<_ConditionEditorExposed>