@veltra/desktop 1.1.15 → 1.1.18

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

@@ -1,98 +1,188 @@
 @use 'pkg:@veltra/styles/mixins' as m;
 @use 'pkg:@veltra/styles/functions' as fn;
-@use 'pkg:@veltra/styles/vars';
 
 $root-name: condition-editor;
+$connector-width: 56px;
 
 @include m.b($root-name) {
-  // ─── 条件分组 ────────────────────────────────────
+  font-size: 13px;
+  color: fn.use-var(text-color, main);
+
+  // ─── 分组（根 / 嵌套） ─────────────────────────────
   @include m.e(group) {
-    // 外层不需额外边框
+    position: relative;
+    background-color: fn.use-var(bg-color, top);
+    border: 1px solid fn.use-var(border, muted-color);
+    border-radius: fn.use-var(radius, default);
+    padding: 12px;
+
+    @include m.m(nested) {
+      background-color: fn.use-var(bg-color, middle);
+      border-left: 3px solid fn.use-var(color, primary, light-7);
+    }
+
+    & + & {
+      margin-top: 8px;
+    }
   }
 
-  @include m.e(group-header) {
+  @include m.e(group-list) {
+    list-style: none;
+    margin: 0;
+    padding: 0;
     display: flex;
-    align-items: center;
+    flex-direction: column;
     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) {
+  @include m.e(group-item) {
     display: flex;
-    gap: 10px;
-    padding: 2px 0;
+    align-items: flex-start;
+    gap: 8px;
   }
 
-  @include m.e(group-result) {
-    font-size: 11px;
-    font-weight: 600;
+  @include m.e(group-item-body) {
+    flex: 1;
+    min-width: 0;
+  }
 
-    &--pass {
-      color: fn.use-var(color, success);
-    }
+  @include m.e(group-empty) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px;
+    color: fn.use-var(text-color, assist);
+    font-size: 12px;
+  }
 
-    &--fail {
-      color: fn.use-var(color, danger);
-    }
+  @include m.e(group-empty-tip) {
+    opacity: 0.7;
   }
 
-  // ─── AND/OR 标签 ──────────────────────────────────
-  @include m.e(logic-tag) {
-    display: inline-block;
-    padding: 1px 8px;
+  // ─── 连接符 chip ──────────────────────────────────
+  @include m.e(connector) {
+    flex-shrink: 0;
+    width: $connector-width;
+    height: 28px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 2px;
     border-radius: fn.use-var(radius, small);
     font-size: 11px;
     font-weight: 600;
+    letter-spacing: 0.5px;
     cursor: pointer;
     user-select: none;
-    transition: background-color 0.12s ease;
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease,
+      transform 0.15s ease;
 
-    &--and {
-      background-color: fn.use-var(color, primary, light-9);
+    @include m.m(and) {
       color: fn.use-var(color, primary);
+      background-color: fn.use-var(color, primary, light-9);
 
       &:hover {
         background-color: fn.use-var(color, primary, light-8);
       }
     }
 
-    &--or {
+    @include m.m(or) {
+      color: fn.use-var(color, warning, dark-2);
       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);
       }
     }
+
+    &:focus-visible {
+      outline: 2px solid fn.use-var(color, primary);
+      outline-offset: 1px;
+    }
   }
 
-  // ─── 条件行 ──────────────────────────────────────
-  @include m.e(row) {
+  @include m.e(connector-placeholder) {
+    flex-shrink: 0;
+    width: $connector-width;
+    height: 28px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 2px;
+    border-radius: fn.use-var(radius, small);
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    color: fn.use-var(text-color, assist);
+    background-color: transparent;
+    user-select: none;
+  }
+
+  // ─── 操作区 ───────────────────────────────────────
+  @include m.e(group-actions) {
     display: flex;
+    flex-wrap: wrap;
     gap: 4px;
+    margin-top: 8px;
+    padding-left: calc(#{$connector-width} + 8px);
+  }
+
+  @include m.e(action-btn) {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    height: 26px;
+    padding: 0 8px;
+    border: none;
+    border-radius: fn.use-var(radius, small);
+    background-color: transparent;
+    color: fn.use-var(color, primary);
+    font-size: 12px;
+    cursor: pointer;
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
+
+    &:hover {
+      background-color: fn.use-var(color, primary, light-9);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    @include m.m(danger) {
+      color: fn.use-var(color, danger);
+
+      &:hover {
+        background-color: fn.use-var(color, danger, light-9);
+      }
+    }
+  }
+
+  // ─── 条件行 ───────────────────────────────────────
+  @include m.e(row) {
+    display: flex;
+    gap: 6px;
     align-items: center;
-    margin-bottom: 3px;
   }
 
   @include m.e(field) {
-    width: 90px;
+    width: 140px;
     flex-shrink: 0;
   }
 
   @include m.e(operator) {
-    width: 80px;
+    width: 110px;
     flex-shrink: 0;
   }
 
   @include m.e(value) {
     flex: 1;
-    min-width: 0;
+    min-width: 120px;
     display: flex;
     align-items: center;
   }
@@ -100,24 +190,29 @@ $root-name: condition-editor;
   @include m.e(value-input) {
     width: 100%;
     height: 28px;
-    padding: 0 8px;
+    padding: 0 10px;
     border: 1px solid fn.use-var(border, muted-color);
     border-radius: fn.use-var(radius, small);
-    font-size: 12px;
+    font-size: 13px;
     color: fn.use-var(text-color, main);
     background-color: fn.use-var(bg-color, top);
     outline: none;
-    transition: border-color 0.12s ease;
+    transition: border-color 0.15s ease;
 
     &::placeholder {
       color: fn.use-var(text-color, placeholder);
     }
 
+    &:hover {
+      border-color: fn.use-var(color, primary, light-5);
+    }
+
     &:focus {
       border-color: fn.use-var(color, primary);
     }
 
-    &:disabled {
+    &:disabled,
+    &:read-only {
       background-color: fn.use-var(color, disabled);
       cursor: not-allowed;
     }
@@ -126,37 +221,43 @@ $root-name: condition-editor;
   @include m.e(value-empty) {
     font-size: 12px;
     color: fn.use-var(text-color, assist);
+    padding: 0 8px;
   }
 
-  // ─── 变量 chip ──────────────────────────────────
+  // ─── 变量 chip ───────────────────────────────────
   @include m.e(value-chip) {
     display: inline-flex;
     align-items: center;
     gap: 4px;
-    padding: 0 8px;
-    height: 22px;
+    max-width: 100%;
+    padding: 0 8px 0 10px;
+    height: 24px;
     font-size: 12px;
     color: fn.use-var(color, primary);
     background-color: fn.use-var(color, primary, light-9);
+    border: 1px solid fn.use-var(color, primary, light-7);
     border-radius: 999px;
     cursor: pointer;
     user-select: none;
     transition:
-      background-color 0.12s ease,
-      box-shadow 0.12s ease;
+      background-color 0.15s ease,
+      border-color 0.15s ease;
 
     &:hover {
       background-color: fn.use-var(color, primary, light-8);
+      border-color: fn.use-var(color, primary, light-5);
+    }
 
-      .#{vars.$namespace}#{$root-name}__value-chip-close {
-        opacity: 1;
-        max-width: 14px;
-        margin-left: 2px;
-      }
+    &:focus-visible {
+      outline: 2px solid fn.use-var(color, primary);
+      outline-offset: 1px;
     }
   }
 
   @include m.e(value-chip-label) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     pointer-events: none;
   }
 
@@ -165,83 +266,69 @@ $root-name: condition-editor;
     align-items: center;
     justify-content: center;
     width: 14px;
-    max-width: 0;
-    margin-left: 0;
-    overflow: hidden;
-    font-size: 14px;
+    height: 14px;
+    font-size: 10px;
     line-height: 1;
-    color: fn.use-var(color, primary);
-    opacity: 0;
+    color: inherit;
+    opacity: 0.7;
+    border-radius: 50%;
     transition:
-      opacity 0.12s ease,
-      max-width 0.12s ease,
-      margin-left 0.12s ease;
+      opacity 0.15s ease,
+      background-color 0.15s ease;
 
     &:hover {
-      transform: scale(1.1);
+      opacity: 1;
+      background-color: fn.use-var(color, primary, light-7);
     }
   }
 
-  // ─── 删除按钮 ────────────────────────────────────
+  // ─── 删除按钮 ──────────────────────────────────────
   @include m.e(row-delete) {
     flex-shrink: 0;
-    width: 16px;
-    text-align: center;
-    font-size: 15px;
+    width: 26px;
+    height: 26px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background-color: transparent;
     color: fn.use-var(text-color, assist);
+    border-radius: fn.use-var(radius, small);
     cursor: pointer;
-    transition: color 0.12s ease;
+    font-size: 14px;
+    transition:
+      color 0.15s ease,
+      background-color 0.15s ease;
 
     &:hover {
       color: fn.use-var(color, danger);
+      background-color: fn.use-var(color, danger, light-9);
     }
-  }
-
-  // ─── 结果指示 ────────────────────────────────────
-  @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);
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.4;
     }
   }
 
-  // ─── 状态 ──────────────────────────────────────
+  // ─── 状态 ──────────────────────────────────────────
   @include m.is(disabled) {
     cursor: not-allowed;
 
-    @include m.bem($root-name, logic-tag) {
+    @include m.bem($root-name, connector) {
       cursor: not-allowed;
       opacity: 0.6;
     }
 
-    @include m.bem($root-name, add-btn) {
+    @include m.bem($root-name, action-btn) {
       cursor: not-allowed;
       opacity: 0.6;
     }
   }
+
+  @include m.is(readonly) {
+    @include m.bem($root-name, connector) {
+      cursor: default;
+    }
+  }
 }

package/src/components/context-menu/style.ts

@@ -1,4 +1,4 @@
 import '@veltra/directives/ripple/style.js'
 import '../icon/style'
-import '@veltra/styles/anime/zoom-in.scss'
+import '@veltra/styles/transitions/zoom-in.scss'
 import './style.scss'

package/src/components/dialog/style.ts

@@ -1,5 +1,5 @@
 import '../icon/style'
 import '../scroll/style'
-import '@veltra/styles/anime/fade.scss'
-import '@veltra/styles/anime/spring.scss'
+import '@veltra/styles/transitions/fade.scss'
+import '@veltra/styles/transitions/spring.scss'
 import './style.scss'

package/src/components/drawer/style.ts

@@ -1,3 +1,3 @@
 import '../icon/style'
-import '@veltra/styles/anime/fade.scss'
+import '@veltra/styles/transitions/fade.scss'
 import './style.scss'

package/src/components/dropdown/style.ts

@@ -1,2 +1,2 @@
-import '@veltra/styles/anime/slide.scss'
+import '@veltra/styles/transitions/slide.scss'
 import './style.scss'

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

@@ -106,7 +106,7 @@ $root-name: expression-editor;
       );
       box-shadow: 0 1px 4px fn.use-var(shadow, color);
 
-      .#{vars.$namespace}#{$root-name}__chip-close {
+      .#{vars.$namespace}-#{$root-name}__chip-close {
         opacity: 1;
         max-width: 14px;
         margin-left: 2px;

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

@@ -43,13 +43,9 @@ import { UGridItem } from '../grid'
 import { UTip } from '../tip'
 import { formItemCls as cls } from './helper'
 
-defineOptions({
-  name: 'FormItem'
-})
+defineOptions({ name: 'FormItem' })
 
-const props = withDefaults(defineProps<FormItemProps>(), {
-  readonly: undefined
-})
+const props = withDefaults(defineProps<FormItemProps>(), { readonly: undefined })
 
 defineSlots<{
   /** 标签插槽 */
@@ -80,9 +76,8 @@ const labelStyles = computed<CSSProperties>(() => {
 
 /** 错误提示 */
 const errorTips = computed<string | undefined>(() => {
-  if (props.field) {
-    return formProps?.model?.errors.get(props.field)?.[0]
-  }
+  if (!props.field) return undefined
+  return formProps?.model?.errors.get(props.field)?.[0]
 })
 
 /** 字段是否必须 */

package/src/components/input/style.ts

@@ -1,3 +1,3 @@
 import '../icon/style'
-import '@veltra/styles/anime/zoom-in.scss'
+import '@veltra/styles/transitions/zoom-in.scss'
 import './style.scss'

package/src/components/loading/style.ts

@@ -1,2 +1,2 @@
-import '@veltra/styles/anime/fade.scss'
+import '@veltra/styles/transitions/fade.scss'
 import './style.scss'

package/src/components/menu/style.scss

@@ -149,7 +149,7 @@ $collapsed-menu: collapsed-menu;
     border-left: 1px solid color-mix(in srgb, #{fn.use-var(border, color)} 52%, transparent);
 
     @supports selector(:has(*)) {
-      &:has(.#{vars.$namespace}menu__item.is-active) {
+      &:has(.#{vars.$namespace}-menu__item.is-active) {
         border-left-color: fn.use-var(color, primary);
       }
     }

package/src/components/message/style.scss

@@ -1,6 +1,6 @@
 @use 'pkg:@veltra/styles/mixins' as m;
 @use 'pkg:@veltra/styles/functions' as fn;
-@use 'pkg:@veltra/styles/vars';
+@use 'pkg:@veltra/styles/vars' as vars;
 
 // 方便拼接
 $root-name: message;

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

@@ -6,5 +6,5 @@ import '../dropdown/style'
 import '../tag/style'
 import '../empty/style'
 import '@veltra/directives/ripple/style.js'
-import '@veltra/styles/anime/zoom-in.scss'
+import '@veltra/styles/transitions/zoom-in.scss'
 import './style.scss'

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

@@ -5,5 +5,5 @@ import '../tag/style'
 import '../checkbox/style'
 import '../input/style'
 import '../button/style'
-import '@veltra/styles/anime/zoom-in.scss'
+import '@veltra/styles/transitions/zoom-in.scss'
 import './style.scss'

package/src/components/number-input/__test__/number-input.test.ts

@@ -1,4 +1,4 @@
-// @vitest-environment happy-dom
+import { describe, expect, it } from 'vitest'
 import { createApp, h, nextTick, ref } from 'vue'
 
 import UNumberInput from '../number-input.vue'

package/src/components/radio/style.ts

@@ -1,2 +1,2 @@
-import '@veltra/styles/anime/zoom-in.scss'
+import '@veltra/styles/transitions/zoom-in.scss'
 import './style.scss'

package/src/components/slider/slider.vue

@@ -119,7 +119,7 @@ watch(
   [offset1, offset2],
   userAction((v) => {
     if (props.range) {
-      emit('update:modelValue', v.map(sliderOffset2Value).sort() as T)
+      emit('update:modelValue', v.map(sliderOffset2Value).toSorted() as T)
     } else {
       emit('update:modelValue', sliderOffset2Value(v[0]) as T)
     }

package/src/components/table/di.ts

@@ -1,4 +1,4 @@
-import type { VirtualItem } from '@veltra/compositions'
+import type { VirtualItem } from '@cat-kit/fe'
 import type { BEM } from '@veltra/utils'
 import type { ComputedRef, InjectionKey, ShallowRef, Slots } from 'vue'
 

package/src/components/tabs/style.ts

@@ -1,5 +1,5 @@
 import '../scroll/style'
 import '../icon/style'
 import '@veltra/directives/ripple/style.js'
-import '@veltra/styles/anime/fade.scss'
+import '@veltra/styles/transitions/fade.scss'
 import './style.scss'

package/src/components/textarea/style.ts

@@ -1,3 +1,3 @@
 import '../icon/style'
-import '@veltra/styles/anime/zoom-in.scss'
+import '@veltra/styles/transitions/zoom-in.scss'
 import './style.scss'

package/src/types/batch-edit.ts

@@ -37,7 +37,7 @@ export interface BatchEditProps<Model extends IFormModel = IFormModel> extends T
   /** label的宽度 */
   labelWidth?: string | number
   /** 删除方法 */
-  deleteMethod?: (data: Record<string, any>[]) => Promise<any> | any
+  deleteMethod?: (data: Record<string, any>[]) => any
   /**
    * 保存方法
    * @description 这个方法旨在快编时生效
@@ -50,7 +50,7 @@ export interface BatchEditProps<Model extends IFormModel = IFormModel> extends T
     actionType: 'create' | 'update',
     /** 父级数据 */
     parentData?: Record<string, any>
-  ) => Promise<any> | any
+  ) => any
 
   /**
    * 可用功能，不穿则对功能没有任何限制

package/src/types/condition-editor.ts

@@ -2,6 +2,7 @@ import type { ComponentSize, DeconstructValue } from '@veltra/utils'
 
 import type { VariableItem } from './expression-editor'
 
+/** 字段定义 */
 export interface ConditionField {
   label: string
   value: string
@@ -9,31 +10,45 @@ export interface ConditionField {
   enumOptions?: { label: string; value: string }[]
 }
 
+/** 条件右侧值：常量或变量引用 */
 export type ConditionValue =
   | { kind: 'constant'; value: string }
   | { kind: 'variable'; name: string }
 
-export interface ConditionItem {
+/** 单行条件叶子节点 */
+export interface ConditionLeaf {
+  type: 'condition'
   field: string
   operator: string
   value: ConditionValue
-  _result?: boolean
 }
 
+/** 行间逻辑连接符 */
+export type ConditionConnector = 'and' | 'or'
+
+/** 条件组节点 —— 与叶子节点通过 children 统一编排 */
 export interface ConditionGroup {
-  logic: 'and' | 'or'
-  conditions: ConditionItem[]
-  groups: ConditionGroup[]
-  _result?: boolean
+  type: 'group'
+  children: ConditionNode[]
+  /**
+   * 子项之间的连接符
+   *
+   * - `connectors[i]` 用于 `children[i]` 与 `children[i + 1]` 之间
+   * - 长度应等于 `children.length - 1`；缺失项默认为 `and`
+   */
+  connectors: ConditionConnector[]
 }
 
+/** 树节点：叶子或分组 */
+export type ConditionNode = ConditionLeaf | ConditionGroup
+
+/** 顶层表达式 = 根分组 */
 export type ConditionExpression = ConditionGroup
 
 export interface ConditionEditorProps {
   modelValue?: ConditionExpression
   fields?: ConditionField[]
   variables?: VariableItem[]
-  data?: Record<string, unknown>
   size?: ComponentSize
   disabled?: boolean
   readonly?: boolean
@@ -41,7 +56,6 @@ export interface ConditionEditorProps {
 
 export interface ConditionEditorEmits {
   (e: 'update:modelValue', value: ConditionExpression): void
-  (e: 'evaluate', results: ConditionExpression): void
 }
 
 export interface _ConditionEditorExposed {}