@veltra/desktop 1.1.3 → 1.1.5

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

@@ -0,0 +1,131 @@
+<template>
+  <div :class="cls.e('group')">
+    <!-- AND/OR 标签 + 汇总结果 -->
+    <div :class="cls.e('group-header')">
+      <span :class="[cls.e('logic-tag'), cls.em('logic-tag', group.logic)]" @click="toggleLogic">
+        {{ group.logic.toUpperCase() }} ▾
+      </span>
+      <span
+        v-if="hasResult"
+        :class="[cls.e('group-result'), cls.em('group-result', group._result ? 'pass' : 'fail')]"
+      >
+        {{ group._result ? '✓ 通过' : '✗ 不通过' }}
+      </span>
+    </div>
+
+    <!-- 嵌套组容器 -->
+    <div :class="cls.e('group-body')">
+      <!-- 子条件 -->
+      <ConditionRow
+        v-for="(cond, idx) in group.conditions"
+        :key="idx"
+        :item="cond"
+        :fields="fields"
+        :size="size"
+        :disabled="disabled"
+        :readonly="readonly"
+        @update:item="(item) => updateCondition(idx, item)"
+        @delete="removeCondition(idx)"
+        @mention="(p) => emit('mention', p)"
+      />
+
+      <!-- 子分组（递归） -->
+      <ConditionGroup
+        v-for="(sub, idx) in group.groups"
+        :key="idx"
+        :group="sub"
+        :fields="fields"
+        :size="size"
+        :disabled="disabled"
+        :readonly="readonly"
+        @update:group="(g) => updateSubGroup(idx, g)"
+        @remove="() => removeSubGroup(idx)"
+        @mention="(p) => emit('mention', p)"
+      />
+
+      <!-- 空状态 + 添加按钮 -->
+      <div :class="cls.e('group-actions')">
+        <span v-if="!readonly" :class="cls.e('add-btn')" @click="addCondition">＋ 添加条件</span>
+        <span v-if="!readonly" :class="cls.e('add-btn')" @click="addGroup">＋ 添加条件组</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { bem } from '@veltra/utils'
+import { computed } from 'vue'
+
+import type { ConditionField, ConditionGroup, ConditionItem } from '../../../types'
+import { createEmptyGroup, createEmptyItem } from '../core/evaluator'
+import ConditionRow, { type MentionPayload } from './condition-row.vue'
+
+defineOptions({ name: 'ConditionGroup' })
+
+const props = withDefaults(
+  defineProps<{
+    group: ConditionGroup
+    fields?: ConditionField[]
+    size?: 'small' | 'default' | 'large'
+    disabled?: boolean
+    readonly?: boolean
+  }>(),
+  { size: 'default' }
+)
+
+const emit = defineEmits<{
+  (e: 'update:group', group: ConditionGroup): void
+  (e: 'remove'): void
+  (e: 'mention', payload: MentionPayload): void
+}>()
+
+const cls = bem('condition-editor')
+
+const hasResult = computed(() => props.group._result !== undefined)
+
+function toggleLogic() {
+  if (props.disabled || props.readonly) return
+  emit('update:group', {
+    ...props.group,
+    logic: props.group.logic === 'and' ? 'or' : 'and'
+  })
+}
+
+function addCondition() {
+  emit('update:group', {
+    ...props.group,
+    conditions: [...props.group.conditions, createEmptyItem()]
+  })
+}
+
+function removeCondition(idx: number) {
+  const conditions = [...props.group.conditions]
+  conditions.splice(idx, 1)
+  emit('update:group', { ...props.group, conditions })
+}
+
+function updateCondition(idx: number, item: ConditionItem) {
+  const conditions = [...props.group.conditions]
+  conditions[idx] = item
+  emit('update:group', { ...props.group, conditions })
+}
+
+function addGroup() {
+  emit('update:group', {
+    ...props.group,
+    groups: [...props.group.groups, createEmptyGroup()]
+  })
+}
+
+function removeSubGroup(idx: number) {
+  const groups = [...props.group.groups]
+  groups.splice(idx, 1)
+  emit('update:group', { ...props.group, groups })
+}
+
+function updateSubGroup(idx: number, g: ConditionGroup) {
+  const groups = [...props.group.groups]
+  groups[idx] = g
+  emit('update:group', { ...props.group, groups })
+}
+</script>

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

@@ -0,0 +1,208 @@
+<template>
+  <div :class="[cls.e('row'), bem.is('focused', focused)]">
+    <!-- 字段选择 -->
+    <u-select
+      :class="cls.e('field')"
+      :model-value="item.field"
+      :options="fieldOptions"
+      value-key="value"
+      label-key="label"
+      placeholder="字段"
+      :size="size"
+      :disabled="disabled || readonly"
+      :clearable="false"
+      @update:model-value="onFieldChange"
+    />
+
+    <!-- 运算符选择 -->
+    <u-select
+      :class="cls.e('operator')"
+      :model-value="item.operator"
+      :options="operatorOptions"
+      value-key="value"
+      label-key="label"
+      placeholder="运算符"
+      :size="size"
+      :disabled="disabled || readonly"
+      :clearable="false"
+      @update:model-value="onOperatorChange"
+    />
+
+    <!-- 值输入 -->
+    <div :class="cls.e('value')">
+      <template v-if="needValue">
+        <input
+          v-if="item.value.kind === 'constant'"
+          ref="valueInputRef"
+          :class="cls.e('value-input')"
+          :value="item.value.value"
+          :placeholder="placeholder"
+          :disabled="disabled"
+          :readonly="readonly"
+          @input="onValueInput"
+          @keydown="onValueKeydown"
+          @focus="focused = true"
+          @blur="focused = false"
+        />
+        <span
+          v-else
+          :class="cls.e('value-chip')"
+          tabindex="0"
+          @click="onChipClick"
+          @keydown.delete="onChipDelete"
+        >
+          <span :class="cls.e('value-chip-label')">{{ variableLabel }}</span>
+          <span :class="cls.e('value-chip-close')" @click.stop="onChipDelete">×</span>
+        </span>
+      </template>
+      <span v-else :class="cls.e('value-empty')">—</span>
+    </div>
+
+    <!-- 删除 -->
+    <span v-if="!readonly" :class="cls.e('row-delete')" @click="emit('delete')">×</span>
+
+    <!-- 结果指示 -->
+    <span
+      v-if="hasResult"
+      :class="[cls.e('result'), cls.em('result', item._result ? 'pass' : 'fail')]"
+    >
+      {{ item._result ? '✓' : '✗' }}
+    </span>
+    <span v-else :class="[cls.e('result'), cls.em('result', 'none')]">—</span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useFormFallbackProps } from '@veltra/compositions'
+import { bem, injectFormContext } from '@veltra/utils'
+import { computed, ref, useTemplateRef } from 'vue'
+
+import type { ConditionField, ConditionItem, ConditionValue } from '../../../types'
+import { USelect } from '../../select'
+import { getOperatorsByFieldType, type OperatorDef } from '../core/operators'
+
+defineOptions({ name: 'ConditionRow' })
+
+export interface MentionPayload {
+  triggerDom: HTMLElement
+  setValue: (val: ConditionValue) => void
+}
+
+const props = withDefaults(
+  defineProps<{
+    item: ConditionItem
+    fields?: ConditionField[]
+    size?: string
+    disabled?: boolean
+    readonly?: boolean
+  }>(),
+  {}
+)
+
+const { formProps } = injectFormContext()
+
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
+  size: 'default',
+  disabled: false,
+  readonly: false
+})
+
+const emit = defineEmits<{
+  (e: 'update:item', item: ConditionItem): void
+  (e: 'delete'): void
+  (e: 'mention', payload: MentionPayload): void
+}>()
+
+const cls = bem('condition-editor')
+
+const valueInputRef = useTemplateRef<HTMLInputElement>('valueInputRef')
+const focused = ref(false)
+
+const fieldOptions = computed(() =>
+  (props.fields ?? []).map((f) => ({ label: f.label, value: f.value }))
+)
+
+const currentField = computed(() => props.fields?.find((f) => f.value === props.item.field))
+
+const operatorOptions = computed(() => {
+  if (!currentField.value) {
+    return props.item.operator ? [{ label: props.item.operator, value: props.item.operator }] : []
+  }
+  return getOperatorsByFieldType(currentField.value.type)
+})
+
+const needValue = computed(() => {
+  const ops = operatorOptions.value as OperatorDef[]
+  const op = ops.find((o) => o.value === props.item.operator)
+  return op?.needValue ?? true
+})
+
+const hasResult = computed(() => props.item._result !== undefined)
+
+const placeholder = computed(() => (props.fields?.length ? '输入值或 @ 引用变量' : ''))
+
+const variableLabel = computed(() => {
+  if (props.item.value.kind !== 'variable') return ''
+  return props.item.value.name
+})
+
+function onFieldChange(val: string) {
+  const field = props.fields?.find((f) => f.value === val)
+  const newItem: ConditionItem = {
+    ...props.item,
+    field: val,
+    operator: field ? getOperatorsByFieldType(field.type)[0]!.value : 'eq',
+    value: { kind: 'constant', value: '' }
+  }
+  emit('update:item', newItem)
+}
+
+function onOperatorChange(val: string) {
+  const newItem: ConditionItem = {
+    ...props.item,
+    operator: val,
+    value: { kind: 'constant', value: '' }
+  }
+  emit('update:item', newItem)
+}
+
+function onValueInput(e: Event) {
+  const val = (e.target as HTMLInputElement).value
+  emit('update:item', {
+    ...props.item,
+    value: { kind: 'constant', value: val }
+  })
+}
+
+function onValueKeydown(e: KeyboardEvent) {
+  if (disabled.value || readonly.value) return
+  if (e.key === '@' && valueInputRef.value) {
+    e.preventDefault()
+    emit('mention', {
+      triggerDom: valueInputRef.value,
+      setValue: (val: ConditionValue) => {
+        emit('update:item', { ...props.item, value: val })
+      }
+    })
+  }
+}
+
+function onChipClick() {
+  if (disabled.value || readonly.value) return
+  if (valueInputRef.value) {
+    emit('mention', {
+      triggerDom: valueInputRef.value,
+      setValue: (val: ConditionValue) => {
+        emit('update:item', { ...props.item, value: val })
+      }
+    })
+  }
+}
+
+function onChipDelete() {
+  emit('update:item', {
+    ...props.item,
+    value: { kind: 'constant', value: '' }
+  })
+}
+</script>

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)
+}