@veltra/desktop 1.1.4 → 1.1.6

package/src/components/condition-editor/condition-editor.vue

@@ -1,17 +1,156 @@
 <template>
-  <div :class="cls.b"></div>
+  <div :class="className" @keydown="onKeydown">
+    <ConditionGroup
+      :group="rootGroup"
+      :fields="props.fields"
+      :size="size"
+      :disabled="disabled"
+      :readonly="readonly"
+      @update:group="onGroupUpdate"
+      @mention="onMention"
+    />
+
+    <VariablePicker
+      ref="pickerRef"
+      :visible="pickerVisible"
+      :trigger-dom="pickerTriggerDom"
+      :variables="props.variables"
+      :filter="pickerFilter"
+      :selectable-levels="'leaf'"
+      @select="onPickerSelect"
+      @dismiss="onPickerDismiss"
+      @update:visible="onPickerVisibleChange"
+    />
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { bem } from '@veltra/utils'
+import { useFormFallbackProps } from '@veltra/compositions'
+import { bem, injectFormContext } from '@veltra/utils'
+import { computed, nextTick, shallowRef, useTemplateRef, watch } from 'vue'
+
+import type { ConditionEditorProps, ConditionExpression } from '../../types'
+import VariablePicker from '../expression-editor/components/variable-picker.vue'
+import ConditionGroup from './components/condition-group.vue'
+import type { MentionPayload } from './components/condition-row.vue'
+import { createEmptyGroup, evaluate } from './core/evaluator'
 
-import type { ConditionEditorProps } from '../../types'
+defineOptions({ name: 'ConditionEditor' })
 
-defineOptions({
-  name: 'ConditionEditor'
+const props = withDefaults(defineProps<ConditionEditorProps>(), {
+  fields: () => []
 })
 
-defineProps<ConditionEditorProps>()
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: ConditionExpression): void
+  (e: 'evaluate', results: ConditionExpression): void
+}>()
 
 const cls = bem('condition-editor')
+const { formProps } = injectFormContext()
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])
+
+const className = computed(() => [
+  cls.b,
+  cls.m(size.value),
+  bem.is('disabled', disabled.value),
+  bem.is('readonly', readonly.value)
+])
+
+const rootGroup = shallowRef<ConditionExpression>(
+  props.modelValue ? JSON.parse(JSON.stringify(props.modelValue)) : createEmptyGroup()
+)
+
+function serialize(): ConditionExpression {
+  function clean(group: ConditionExpression): ConditionExpression {
+    return {
+      logic: group.logic,
+      conditions: group.conditions.map((c) => {
+        const { _result, ...rest } = c
+        return rest
+      }),
+      groups: group.groups.map(clean).filter((g) => g.conditions.length > 0 || g.groups.length > 0)
+    }
+  }
+  return clean(JSON.parse(JSON.stringify(rootGroup.value)))
+}
+
+function emitUpdate() {
+  emit('update:modelValue', serialize())
+}
+
+function runEvaluate() {
+  if (!props.data) return
+  const cloned = JSON.parse(JSON.stringify(rootGroup.value)) as ConditionExpression
+  const result = evaluate(cloned, props.data)
+  rootGroup.value = result
+  emit('evaluate', serialize())
+}
+
+// ── VariablePicker ──
+
+const pickerRef = useTemplateRef<{ handleKeydown: (e: KeyboardEvent) => boolean }>('pickerRef')
+const pickerVisible = shallowRef(false)
+const pickerTriggerDom = shallowRef<HTMLElement | undefined>(undefined)
+const pickerFilter = shallowRef('')
+const mentionTarget = shallowRef<MentionPayload | null>(null)
+
+function onMention(payload: MentionPayload) {
+  if (disabled.value || readonly.value) return
+  mentionTarget.value = payload
+  pickerTriggerDom.value = payload.triggerDom
+  pickerFilter.value = ''
+  pickerVisible.value = true
+}
+
+function onPickerSelect(item: { label: string; value: string }) {
+  mentionTarget.value?.setValue({ kind: 'variable', name: item.value })
+  pickerVisible.value = false
+  mentionTarget.value = null
+}
+
+function onPickerDismiss() {
+  pickerVisible.value = false
+  mentionTarget.value = null
+}
+
+function onPickerVisibleChange(v: boolean) {
+  if (!v) {
+    pickerVisible.value = false
+    mentionTarget.value = null
+  }
+}
+
+function onGroupUpdate(group: ConditionExpression) {
+  rootGroup.value = group
+  emitUpdate()
+  void nextTick(() => runEvaluate())
+}
+
+watch(
+  () => props.modelValue,
+  (v) => {
+    if (!v) return
+    const current = serialize()
+    if (JSON.stringify(v) === JSON.stringify(current)) return
+    rootGroup.value = JSON.parse(JSON.stringify(v))
+  }
+)
+
+watch(
+  () => props.data,
+  () => runEvaluate(),
+  { deep: true }
+)
+
+function onKeydown(e: KeyboardEvent) {
+  if (disabled.value || readonly.value) return
+  if (pickerVisible.value) {
+    const handled = pickerRef.value?.handleKeydown(e)
+    if (handled) {
+      e.preventDefault()
+      return
+    }
+  }
+}
 </script>

package/src/components/condition-editor/core/evaluator.ts

@@ -0,0 +1,93 @@
+import type { ConditionExpression, ConditionGroup, ConditionItem } from '../../../types'
+
+function resolveValue(item: ConditionItem, data: Record<string, unknown>): string {
+  if (item.value.kind === 'constant') return item.value.value
+  return String(getByPath(data, item.value.name) ?? '')
+}
+
+function resolveCompareValue(item: ConditionItem, data: Record<string, unknown>): string {
+  if (item.value.kind === 'constant') return item.value.value
+  return String(getByPath(data, item.value.name) ?? '')
+}
+
+function getByPath(obj: Record<string, unknown>, path: string): unknown {
+  return path.split('.').reduce((acc: any, key) => (acc != null ? acc[key] : undefined), obj)
+}
+
+function evaluateItem(item: ConditionItem, data: Record<string, unknown>): boolean {
+  const resolved = resolveValue(item, data)
+  const compareValue = resolveCompareValue(item, data)
+
+  switch (item.operator) {
+    case 'empty':
+      return resolved === '' || resolved === 'undefined' || resolved === 'null'
+    case 'not_empty':
+      return resolved !== '' && resolved !== 'undefined' && resolved !== 'null'
+    case 'is_true':
+      return resolved === 'true' || resolved === '1'
+    case 'is_false':
+      return resolved === 'false' || resolved === '0' || resolved === ''
+    case 'eq':
+      return resolved === compareValue
+    case 'ne':
+      return resolved !== compareValue
+    case 'contains':
+      return resolved.includes(compareValue)
+    case 'not_contains':
+      return !resolved.includes(compareValue)
+    case 'gt':
+      return Number(resolved) > Number(compareValue)
+    case 'lt':
+      return Number(resolved) < Number(compareValue)
+    case 'gte':
+      return Number(resolved) >= Number(compareValue)
+    case 'lte':
+      return Number(resolved) <= Number(compareValue)
+    case 'before':
+      return new Date(resolved).getTime() < new Date(compareValue).getTime()
+    case 'after':
+      return new Date(resolved).getTime() > new Date(compareValue).getTime()
+    case 'in': {
+      const vals = compareValue.split(',').map((s) => s.trim())
+      return vals.includes(resolved)
+    }
+    default:
+      return false
+  }
+}
+
+function evaluateGroup(group: ConditionGroup, data: Record<string, unknown>): boolean {
+  const conditionsResult = group.conditions.map((item) => {
+    const result = evaluateItem(item, data)
+    item._result = result
+    return result
+  })
+
+  const groupsResult = group.groups.map((sub) => {
+    const result = evaluateGroup(sub, data)
+    sub._result = result
+    return result
+  })
+
+  const allResults = [...conditionsResult, ...groupsResult]
+  if (allResults.length === 0) return false
+
+  return group.logic === 'and' ? allResults.every(Boolean) : allResults.some(Boolean)
+}
+
+export function evaluate(
+  expression: ConditionExpression,
+  data: Record<string, unknown>
+): ConditionExpression {
+  const cloned = JSON.parse(JSON.stringify(expression)) as ConditionExpression
+  evaluateGroup(cloned, data)
+  return cloned
+}
+
+export function createEmptyGroup(): ConditionGroup {
+  return { logic: 'and', conditions: [], groups: [] }
+}
+
+export function createEmptyItem(): ConditionItem {
+  return { field: '', operator: 'eq', value: { kind: 'constant', value: '' } }
+}

package/src/components/condition-editor/core/operators.ts

@@ -0,0 +1,57 @@
+export interface OperatorDef {
+  label: string
+  value: string
+  needValue: boolean
+}
+
+const STRING_OPERATORS: OperatorDef[] = [
+  { label: '等于', value: 'eq', needValue: true },
+  { label: '不等于', value: 'ne', needValue: true },
+  { label: '包含', value: 'contains', needValue: true },
+  { label: '不包含', value: 'not_contains', needValue: true },
+  { label: '为空', value: 'empty', needValue: false },
+  { label: '不为空', value: 'not_empty', needValue: false }
+]
+
+const NUMBER_OPERATORS: OperatorDef[] = [
+  { label: '等于', value: 'eq', needValue: true },
+  { label: '不等于', value: 'ne', needValue: true },
+  { label: '大于', value: 'gt', needValue: true },
+  { label: '小于', value: 'lt', needValue: true },
+  { label: '大于等于', value: 'gte', needValue: true },
+  { label: '小于等于', value: 'lte', needValue: true }
+]
+
+const BOOLEAN_OPERATORS: OperatorDef[] = [
+  { label: '是', value: 'is_true', needValue: false },
+  { label: '否', value: 'is_false', needValue: false }
+]
+
+const DATE_OPERATORS: OperatorDef[] = [
+  { label: '等于', value: 'eq', needValue: true },
+  { label: '不等于', value: 'ne', needValue: true },
+  { label: '早于', value: 'before', needValue: true },
+  { label: '晚于', value: 'after', needValue: true }
+]
+
+const ENUM_OPERATORS: OperatorDef[] = [
+  { label: '等于', value: 'eq', needValue: true },
+  { label: '不等于', value: 'ne', needValue: true },
+  { label: '包含于', value: 'in', needValue: true }
+]
+
+const OPERATOR_MAP: Record<string, OperatorDef[]> = {
+  string: STRING_OPERATORS,
+  number: NUMBER_OPERATORS,
+  boolean: BOOLEAN_OPERATORS,
+  date: DATE_OPERATORS,
+  enum: ENUM_OPERATORS
+}
+
+export function getOperatorsByFieldType(type: string): OperatorDef[] {
+  return OPERATOR_MAP[type] ?? STRING_OPERATORS
+}
+
+export function getOperatorDef(type: string, operator: string): OperatorDef | undefined {
+  return getOperatorsByFieldType(type).find((op) => op.value === operator)
+}

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/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/index.ts

@@ -130,6 +130,8 @@ export * from './breadcrumb'
 
 export * from './icon'
 
+export * from './kbd'
+
 export * from './pop-confirm'
 
 export * from './paginator'

package/src/components/kbd/index.ts

@@ -0,0 +1 @@
+export { default as UKbd } from './kbd.vue'

package/src/components/kbd/kbd.vue

@@ -0,0 +1,13 @@
+<template>
+  <kbd :class="cls.b">
+    <slot />
+  </kbd>
+</template>
+
+<script lang="ts" setup>
+import { bem } from '@veltra/utils'
+
+defineOptions({ name: 'Kbd' })
+
+const cls = bem('kbd')
+</script>

package/src/components/kbd/style.scss

@@ -0,0 +1,37 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+
+@include m.b(kbd) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-family: fn.use-var(font-family);
+  font-weight: normal;
+  vertical-align: text-top;
+  white-space: nowrap;
+  user-select: none;
+
+  position: relative;
+  top: -0.03em;
+
+  font-size: 0.75em;
+  min-width: 1.75em;
+  line-height: 1.7em;
+  padding: 0 0.5em 0.05em;
+  border-radius: calc(fn.use-var(radius, default) * 0.35);
+  height: fit-content;
+
+  color: fn.use-var(text-color, main);
+  background: fn.use-var(bg-color, top);
+
+  /*
+   * Adapted from Radix UI Themes Kbd.
+   * Multi-layer box-shadow simulates a 3D keycap appearance.
+   */
+  box-shadow:
+    inset 0 0.05em
+      color-mix(in srgb, #{fn.use-var(bg-color, top)} 75%, #{fn.use-var(bg-color, black)}),
+    0 0 0 0.05em color-mix(in srgb, #{fn.use-var(border, color)} 50%, transparent),
+    0 0.08em 0.17em color-mix(in srgb, #{fn.use-var(shadow, color)} 60%, transparent);
+}

package/src/components/kbd/style.ts

@@ -0,0 +1 @@
+import './style.scss'