refactor(frontend): 优化条件编辑器 UI,限制嵌套深度为两层

- 顶层组合条件增加 ListFilter 图标按钮,可转回单条件
- 子组隐藏"+ 子组"按钮,防止无意义的深层嵌套
- 嵌套叶子节点隐藏转组合按钮,保持最多两层结构
This commit is contained in:
fawney19
2026-03-15 21:02:05 +08:00
parent 3c7ad81d62
commit 65550159bb

View File

@@ -10,6 +10,16 @@
>
<!-- Group header: mode selector + actions -->
<div class="flex items-center gap-1.5 mb-2">
<Button
v-if="!nested"
variant="ghost"
size="icon"
class="h-6 w-6 shrink-0 text-muted-foreground"
title="转回单条件"
@click="convertToLeaf"
>
<ListFilter class="w-3.5 h-3.5" />
</Button>
<Select
:model-value="modelValue.mode"
@update:model-value="(value: string) => updateGroupMode(value as ConditionGroupMode)"
@@ -38,10 +48,10 @@
条件
</Button>
<Button
v-if="!nested"
variant="ghost"
size="sm"
class="h-6 px-1.5 text-xs text-muted-foreground"
title="添加嵌套条件组"
@click="addGroupChild(modelValue.mode === 'all' ? 'any' : 'all')"
>
<Plus class="w-3 h-3 mr-0.5" />
@@ -98,7 +108,7 @@
class="flex flex-wrap items-center gap-1.5 rounded-md px-2 py-1.5"
:class="nested ? 'bg-background/60' : 'bg-muted/10 border border-border'"
>
<!-- Toggle to group mode (icon button at the start) -->
<!-- Toggle to group mode (icon button at the start, top-level only) -->
<Button
v-if="!nested"
variant="ghost"
@@ -232,6 +242,10 @@ function updateGroupMode(mode: ConditionGroupMode): void {
emit('update:modelValue', next)
}
function convertToLeaf(): void {
emit('update:modelValue', createEmptyConditionLeaf())
}
function convertToGroup(mode: ConditionGroupMode): void {
const seed = props.modelValue.kind === 'leaf'
? cloneEditableCondition(props.modelValue)