mirror of
https://github.com/fawney19/Aether.git
synced 2026-09-03 09:50:21 +08:00
refactor(frontend): 优化条件编辑器 UI,限制嵌套深度为两层
- 顶层组合条件增加 ListFilter 图标按钮,可转回单条件 - 子组隐藏"+ 子组"按钮,防止无意义的深层嵌套 - 嵌套叶子节点隐藏转组合按钮,保持最多两层结构
This commit is contained in:
@@ -10,6 +10,16 @@
|
|||||||
>
|
>
|
||||||
<!-- Group header: mode selector + actions -->
|
<!-- Group header: mode selector + actions -->
|
||||||
<div class="flex items-center gap-1.5 mb-2">
|
<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
|
<Select
|
||||||
:model-value="modelValue.mode"
|
:model-value="modelValue.mode"
|
||||||
@update:model-value="(value: string) => updateGroupMode(value as ConditionGroupMode)"
|
@update:model-value="(value: string) => updateGroupMode(value as ConditionGroupMode)"
|
||||||
@@ -38,10 +48,10 @@
|
|||||||
条件
|
条件
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
|
v-if="!nested"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size="sm"
|
||||||
class="h-6 px-1.5 text-xs text-muted-foreground"
|
class="h-6 px-1.5 text-xs text-muted-foreground"
|
||||||
title="添加嵌套条件组"
|
|
||||||
@click="addGroupChild(modelValue.mode === 'all' ? 'any' : 'all')"
|
@click="addGroupChild(modelValue.mode === 'all' ? 'any' : 'all')"
|
||||||
>
|
>
|
||||||
<Plus class="w-3 h-3 mr-0.5" />
|
<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="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'"
|
: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
|
<Button
|
||||||
v-if="!nested"
|
v-if="!nested"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
@@ -232,6 +242,10 @@ function updateGroupMode(mode: ConditionGroupMode): void {
|
|||||||
emit('update:modelValue', next)
|
emit('update:modelValue', next)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function convertToLeaf(): void {
|
||||||
|
emit('update:modelValue', createEmptyConditionLeaf())
|
||||||
|
}
|
||||||
|
|
||||||
function convertToGroup(mode: ConditionGroupMode): void {
|
function convertToGroup(mode: ConditionGroupMode): void {
|
||||||
const seed = props.modelValue.kind === 'leaf'
|
const seed = props.modelValue.kind === 'leaf'
|
||||||
? cloneEditableCondition(props.modelValue)
|
? cloneEditableCondition(props.modelValue)
|
||||||
|
|||||||
Reference in New Issue
Block a user