@veltra/desktop 1.1.4 → 1.1.5

package/src/components/batch-edit/batch-edit-list.vue

@@ -5,20 +5,37 @@
     :class="[cls.e('table'), bem.is('editing', state.visible)]"
     :columns="columns"
     highlight-current
-    :current-row="state.row"
+    :current="state.row"
     @update:current="handleUpdateCurrentRow"
     @update:checked="emit('update:checked', $event)"
     @update:selected="emit('update:selected', $event)"
     ref="tableRef"
   >
     <template #column:__action__="{ row }">
-      <u-action-group :class="cls.e('row-actions')" hover circle :max="3" @click.stop>
+      <u-action-group :class="cls.e('row-actions')" :max="5" @click.stop circle>
         <u-action
-          v-if="canEdit(row)"
-          :icon="props.readonly ? View : EditPen"
-          :title="props.readonly ? '查看' : '编辑'"
-          @run="handleEdit(row)"
-          v-bind="props.actionsProps?.update"
+          v-if="allowed('create', row)"
+          :icon="InsertToPrev"
+          title="在上方插入"
+          @run="handleInsertToPrev(row)"
+        />
+        <u-action
+          v-if="allowed('create', row)"
+          :icon="InsertToNext"
+          title="在下方插入"
+          @run="handleInsertToNext(row)"
+        />
+        <u-action
+          v-if="!!props.tree && allowed('createChild', row)"
+          :icon="AddChild"
+          title="添加子级"
+          @run="handleInsertChild(row)"
+        />
+        <u-action
+          v-if="allowed('copy', row)"
+          :icon="Copy"
+          title="复制此行"
+          @run="handleCopy(row)"
         />
 
         <u-action
@@ -29,23 +46,6 @@
           @run="handleDelete(row)"
           v-bind="props.actionsProps?.delete"
         />
-
-        <u-action v-if="allowed('create', row)" in-dropdown @run="handleInsertToPrev(row)">
-          在上方插入
-        </u-action>
-        <u-action v-if="allowed('create', row)" in-dropdown @run="handleInsertToNext(row)">
-          在下方插入
-        </u-action>
-        <u-action
-          v-if="!!props.tree && allowed('createChild', row)"
-          in-dropdown
-          @run="handleInsertChild(row)"
-        >
-          添加子级
-        </u-action>
-        <u-action v-if="allowed('copy', row)" in-dropdown @run="handleCopy(row)">
-          复制此行
-        </u-action>
       </u-action-group>
     </template>
 
@@ -60,17 +60,16 @@
       "
     >
       <div :class="cls.e('add')">
-        <button
-          type="button"
-          :class="[cls.e('add-btn'), bem.is('loading', state.loading)]"
-          :disabled="state.loading"
+        <u-button
+          :class="cls.e('add-btn')"
+          :icon="Plus"
+          :loading="state.loading"
+          type="primary"
+          plain
           @click.stop="handleCreate"
         >
-          <u-icon :class="cls.e('add-icon')">
-            <Plus />
-          </u-icon>
-          <span :class="cls.e('add-label')">新增一行</span>
-        </button>
+          新增一行
+        </u-button>
       </div>
     </template>
   </u-table>
@@ -78,13 +77,13 @@
 
 <script setup lang="ts">
 import { o } from '@cat-kit/core'
-import { Delete, EditPen, Plus, View } from '@veltra/icons/normal'
+import { AddChild, Copy, Delete, InsertToNext, InsertToPrev, Plus } from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
 import { computed, inject, type Slots } from 'vue'
 
 import type { BatchEditFeature, TableRow } from '../../types'
 import { UAction, UActionGroup } from '../action'
-import { UIcon } from '../icon'
+import { UButton } from '../button'
 import { UTable } from '../table'
 import { BatchEditDIKey } from './di'
 
@@ -105,7 +104,6 @@ const {
   staticFeatures,
   dynamicFeatures,
   handleCreate,
-  handleEdit,
   handleCopy,
   handleDelete,
   handleInsertToNext,
@@ -139,7 +137,7 @@ const columns = computed(() => {
     name: '操作',
     key: '__action__',
     align: 'center',
-    width: 132,
+    width: 180,
     fixed: 'right',
     resizable: false
   })
@@ -152,10 +150,6 @@ function handleUpdateCurrentRow(row?: TableRow) {
   }
 }
 
-function canEdit(row: TableRow) {
-  return !props.readonly ? allowed('update', row) : true
-}
-
 function canDelete(row: TableRow) {
   return !props.readonly && allowed('delete', row)
 }

package/src/components/batch-edit/style.scss

@@ -9,26 +9,17 @@ $root-name: batch-edit;
   overflow: hidden;
   border-radius: fn.use-var(radius, default);
 
+  &:focus,
+  &:focus-visible {
+    outline: none;
+  }
+
   // ---------- 表格容器 ----------
   @include m.e(table) {
     flex-grow: 1;
   }
 
-  // ---------- 行内悬浮动作条（操作列） ----------
-  // 操作组使用 `u-action-group` 的 hover 模式
-  // 这里在父级表格行 hover / 当前激活时强制显现整组
-  .u-table__row:hover .#{vars.$namespace}action-group.is-hover,
-  .u-table__row.is-current .#{vars.$namespace}action-group.is-hover {
-    opacity: 1;
-    background-color: color-mix(in srgb, #{fn.use-var(bg-color, top)} 70%, transparent);
-    backdrop-filter: fn.use-var(bg-filter);
-    -webkit-backdrop-filter: fn.use-var(bg-filter);
-    box-shadow: 0 1px 4px color-mix(in srgb, #{fn.use-var(shadow, color)} 35%, transparent);
-  }
-
   // ---------- 底部"新增一行"按钮 ----------
-  // 按钮通过水平方向 sticky 始终贴住滚动视口左侧，
-  // 避免列很长横向滚动时按钮内容被滚出视口外
   @include m.e(add) {
     position: sticky;
     left: 0;
@@ -39,72 +30,14 @@ $root-name: batch-edit;
   }
 
   @include m.e(add-btn) {
-    --add-color: #{fn.use-var(color, primary)};
-    --add-border: #{color-mix(in srgb, fn.use-var(color, primary) 60%, transparent)};
-    --add-bg: #{color-mix(in srgb, fn.use-var(color, primary) 5%, transparent)};
-
     position: sticky;
     left: 12px;
-    height: 36px;
-    min-width: 220px;
-    max-width: 320px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    padding: 0 20px;
-    background: var(--add-bg);
-    border: 1px dashed var(--add-border);
-    border-radius: fn.use-var(radius, default);
-    color: var(--add-color);
-    font-size: fn.use-var(font-size-main, default);
-    font-weight: 500;
-    cursor: pointer;
-    transition:
-      border-color 0.18s ease,
-      color 0.18s ease,
-      background-color 0.18s ease,
-      transform 0.18s ease;
-    font-family: inherit;
-
-    &:hover:not(:disabled) {
-      --add-border: #{fn.use-var(color, primary)};
-      --add-bg: #{fn.use-var(color, primary, light-9)};
-      border-style: solid;
-    }
-
-    &:active:not(:disabled) {
-      transform: translateY(1px);
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-      opacity: 0.55;
-    }
-
-    @include m.is(loading) {
-      pointer-events: none;
-    }
-  }
-
-  @include m.e(add-icon) {
-    font-size: 16px;
-    display: inline-flex;
-    transition: transform 0.18s ease;
-  }
-
-  .#{vars.$namespace}#{$root-name}__add-btn:hover .#{vars.$namespace}#{$root-name}__add-icon {
-    transform: rotate(90deg);
-  }
-
-  @include m.e(add-label) {
-    line-height: 1;
   }
 
   // ---------- 右侧表单侧栏 ----------
   @include m.e(form) {
     --u-batch-edit-form-radius: #{fn.use-var(radius, large)};
-    --u-batch-edit-form-padding: 16px;
+    --u-batch-edit-form-padding: 18px;
 
     display: flex;
     flex-direction: column;
@@ -116,31 +49,19 @@ $root-name: batch-edit;
     overflow: hidden;
     isolation: isolate;
     min-height: 0;
-
-    // 顶部装饰渐变条
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 3px;
-      background: linear-gradient(
-        90deg,
-        fn.use-var(color, primary) 0%,
-        color-mix(in srgb, #{fn.use-var(color, primary)} 50%, transparent) 100%
-      );
-      opacity: 0.7;
-      z-index: 1;
-    }
   }
 
   @include m.e(form-header) {
     display: flex;
     align-items: center;
-    gap: 10px;
-    padding: 8px 14px;
+    gap: 12px;
+    padding: 10px 14px;
     border-bottom: 1px solid fn.use-var(border-color);
+    background-color: color-mix(
+      in srgb,
+      #{fn.use-var(bg-color, top)} 96%,
+      #{fn.use-var(bg-color, hover)}
+    );
     flex-shrink: 0;
   }
 
@@ -180,8 +101,8 @@ $root-name: batch-edit;
     flex: 1 1 auto;
     min-width: 0;
     display: flex;
-    flex-direction: column;
-    gap: 2px;
+    align-items: center;
+    gap: 8px;
 
     &-text {
       margin: 0;
@@ -194,32 +115,26 @@ $root-name: batch-edit;
 
   @include m.e(form-chip) {
     display: inline-block;
-    align-self: flex-start;
     padding: 1px 8px;
     font-size: 12px;
     line-height: 18px;
-    border-radius: 999px;
-    background-color: fn.use-var(bg-color, hover);
+    border-radius: fn.use-var(radius, default);
+    background-color: fn.use-var(bg-color, default);
     color: fn.use-var(text-color, second);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    max-width: 100%;
+    max-width: 60%;
   }
 
   @include m.e(form-close) {
     flex-shrink: 0;
-    align-self: flex-start;
   }
 
   @include m.e(form-body) {
     flex: 1 1 auto;
     min-height: 0;
-
-    // 仅限定 batch-edit 内的 u-form 表单滚动区内边距
-    .#{vars.$namespace}form__body {
-      padding: 10px var(--u-batch-edit-form-padding) 4px;
-    }
+    padding: 6px 8px 0;
   }
 
   @include m.e(form-footer) {
@@ -266,17 +181,3 @@ $root-name: batch-edit;
     flex-shrink: 0;
   }
 }
-
-// 表单面板进出过渡：从右侧滑入并轻微缩放
-.batch-edit-panel-enter-active,
-.batch-edit-panel-leave-active {
-  transition:
-    transform 0.32s cubic-bezier(0.32, 0.72, 0, 1),
-    opacity 0.24s ease;
-}
-
-.batch-edit-panel-enter-from,
-.batch-edit-panel-leave-to {
-  transform: translateX(16px) scale(0.985);
-  opacity: 0;
-}

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>