mirror of
https://github.com/fawney19/Aether.git
synced 2026-10-08 18:37:46 +08:00
feat(rules): 条件系统增强，支持 all/any 组合条件和 original/current 数据源切换
- evaluate_condition 支持递归 all/any 组合节点和 source 字段 - header_rules 支持 condition 条件触发，HeaderBuilder.apply_rules 透传 body/original_body - 提取 EndpointConditionEditor 组件统一请求头/请求体规则的条件编辑 UI - header_rules 新增服务端结构校验（action/key/from/to/condition） - 新增组合条件、source 切换、fail-closed 等测试用例
This commit is contained in:
fawney19
@@ -0,0 +1,285 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Group node -->
|
||||
<div
|
||||
v-if="modelValue.kind === 'group'"
|
||||
class="rounded-md border p-2"
|
||||
:class="[
|
||||
nested ? 'bg-muted/30 border-dashed' : 'bg-muted/10 border-border',
|
||||
]"
|
||||
>
|
||||
<!-- Group header: mode selector + actions -->
|
||||
<div class="flex items-center gap-1.5 mb-2">
|
||||
<Select
|
||||
:model-value="modelValue.mode"
|
||||
@update:model-value="(value: string) => updateGroupMode(value as ConditionGroupMode)"
|
||||
>
|
||||
<SelectTrigger class="w-[86px] h-6 text-xs font-medium shrink-0">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">
|
||||
AND
|
||||
</SelectItem>
|
||||
<SelectItem value="any">
|
||||
OR
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<div class="flex-1" />
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="h-6 px-1.5 text-xs text-muted-foreground"
|
||||
title="添加条件"
|
||||
@click="addLeafChild"
|
||||
>
|
||||
<Plus class="w-3 h-3 mr-0.5" />
|
||||
条件
|
||||
</Button>
|
||||
<Button
|
||||
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" />
|
||||
子组
|
||||
</Button>
|
||||
<Button
|
||||
v-if="removable && nested"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-6 w-6 shrink-0 text-muted-foreground hover:text-destructive"
|
||||
@click="emit('remove')"
|
||||
>
|
||||
<X class="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- Children with logic connector labels between them -->
|
||||
<div class="space-y-0">
|
||||
<template
|
||||
v-for="(child, index) in modelValue.children"
|
||||
:key="index"
|
||||
>
|
||||
<!-- Logic connector label between children -->
|
||||
<div
|
||||
v-if="index > 0"
|
||||
class="flex items-center gap-2 py-0.5 pl-2"
|
||||
>
|
||||
<span
|
||||
class="text-[10px] font-semibold px-1.5 py-0.5 rounded"
|
||||
:class="modelValue.mode === 'all'
|
||||
? 'bg-blue-500/15 text-blue-600 dark:text-blue-400'
|
||||
: 'bg-amber-500/15 text-amber-600 dark:text-amber-400'"
|
||||
>
|
||||
{{ modelValue.mode === 'all' ? 'AND' : 'OR' }}
|
||||
</span>
|
||||
<div class="flex-1 border-t border-dashed border-muted-foreground/20" />
|
||||
</div>
|
||||
|
||||
<EndpointConditionEditor
|
||||
:model-value="child"
|
||||
:path-hint="pathHint"
|
||||
nested
|
||||
removable
|
||||
@update:model-value="(next) => updateChild(index, next)"
|
||||
@remove="removeChild(index)"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Leaf node -->
|
||||
<div
|
||||
v-else
|
||||
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) -->
|
||||
<Button
|
||||
v-if="!nested"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-7 w-7 shrink-0 text-muted-foreground"
|
||||
title="转为组合条件 (AND/OR)"
|
||||
@click="convertToGroup('all')"
|
||||
>
|
||||
<ListFilter class="w-3.5 h-3.5" />
|
||||
</Button>
|
||||
<Select
|
||||
:model-value="modelValue.source"
|
||||
@update:model-value="(value: string) => updateLeafField('source', value)"
|
||||
>
|
||||
<SelectTrigger class="w-[96px] h-7 text-xs shrink-0">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="current">
|
||||
Current
|
||||
</SelectItem>
|
||||
<SelectItem value="original">
|
||||
Original
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Input
|
||||
:model-value="modelValue.path"
|
||||
:placeholder="pathHint || '字段路径'"
|
||||
size="sm"
|
||||
class="flex-1 min-w-[120px] h-7 text-xs"
|
||||
@update:model-value="(value) => updateLeafField('path', value)"
|
||||
/>
|
||||
<Select
|
||||
:model-value="modelValue.op"
|
||||
@update:model-value="(value: string) => updateLeafField('op', value)"
|
||||
>
|
||||
<SelectTrigger class="w-[110px] h-7 text-xs shrink-0">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem
|
||||
v-for="option in CONDITION_OP_OPTIONS"
|
||||
:key="option.value"
|
||||
:value="option.value"
|
||||
>
|
||||
{{ option.label }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Input
|
||||
v-if="isConditionValueRequired(modelValue.op)"
|
||||
:model-value="modelValue.value"
|
||||
:placeholder="getConditionValuePlaceholder(modelValue.op)"
|
||||
size="sm"
|
||||
class="flex-1 min-w-[120px] h-7 text-xs"
|
||||
@update:model-value="(value) => updateLeafField('value', value)"
|
||||
/>
|
||||
<Button
|
||||
v-if="removable"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-7 w-7 shrink-0 text-muted-foreground hover:text-destructive"
|
||||
@click="emit('remove')"
|
||||
>
|
||||
<X class="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Button, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui'
|
||||
import { ListFilter, Plus, X } from 'lucide-vue-next'
|
||||
|
||||
import type { BodyRuleConditionOp } from '@/api/endpoints'
|
||||
import {
|
||||
CONDITION_OP_OPTIONS,
|
||||
cloneEditableCondition,
|
||||
createConditionGroup,
|
||||
createEmptyConditionLeaf,
|
||||
getConditionValuePlaceholder,
|
||||
isConditionValueRequired,
|
||||
type ConditionGroupMode,
|
||||
type ConditionSource,
|
||||
type EditableConditionGroup,
|
||||
type EditableConditionLeaf,
|
||||
type EditableConditionNode,
|
||||
} from './endpoint-rule-condition'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
modelValue: EditableConditionNode
|
||||
pathHint?: string
|
||||
nested?: boolean
|
||||
removable?: boolean
|
||||
}>(), {
|
||||
pathHint: '',
|
||||
nested: false,
|
||||
removable: false,
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: EditableConditionNode]
|
||||
remove: []
|
||||
}>()
|
||||
|
||||
defineOptions({ name: 'EndpointConditionEditor' })
|
||||
|
||||
function updateLeafField(field: keyof EditableConditionLeaf, rawValue: string): void {
|
||||
if (props.modelValue.kind !== 'leaf') return
|
||||
|
||||
const next = cloneEditableCondition(props.modelValue) as EditableConditionLeaf
|
||||
|
||||
if (field === 'op') {
|
||||
next.op = rawValue as BodyRuleConditionOp
|
||||
if (!isConditionValueRequired(next.op)) next.value = ''
|
||||
} else if (field === 'source') {
|
||||
next.source = rawValue as ConditionSource
|
||||
} else if (field === 'path' || field === 'value') {
|
||||
next[field] = rawValue
|
||||
}
|
||||
|
||||
emit('update:modelValue', next)
|
||||
}
|
||||
|
||||
function updateGroupMode(mode: ConditionGroupMode): void {
|
||||
if (props.modelValue.kind !== 'group') return
|
||||
|
||||
const next = cloneEditableCondition(props.modelValue) as EditableConditionGroup
|
||||
next.mode = mode
|
||||
emit('update:modelValue', next)
|
||||
}
|
||||
|
||||
function convertToGroup(mode: ConditionGroupMode): void {
|
||||
const seed = props.modelValue.kind === 'leaf'
|
||||
? cloneEditableCondition(props.modelValue)
|
||||
: createEmptyConditionLeaf()
|
||||
emit('update:modelValue', createConditionGroup(mode, [seed]))
|
||||
}
|
||||
|
||||
function addLeafChild(): void {
|
||||
if (props.modelValue.kind !== 'group') return
|
||||
|
||||
const next = cloneEditableCondition(props.modelValue) as EditableConditionGroup
|
||||
next.children.push(createEmptyConditionLeaf())
|
||||
emit('update:modelValue', next)
|
||||
}
|
||||
|
||||
function addGroupChild(mode: ConditionGroupMode): void {
|
||||
if (props.modelValue.kind !== 'group') return
|
||||
|
||||
const next = cloneEditableCondition(props.modelValue) as EditableConditionGroup
|
||||
next.children.push(createConditionGroup(mode))
|
||||
emit('update:modelValue', next)
|
||||
}
|
||||
|
||||
function updateChild(index: number, child: EditableConditionNode): void {
|
||||
if (props.modelValue.kind !== 'group') return
|
||||
|
||||
const next = cloneEditableCondition(props.modelValue) as EditableConditionGroup
|
||||
next.children[index] = child
|
||||
emit('update:modelValue', next)
|
||||
}
|
||||
|
||||
function removeChild(index: number): void {
|
||||
if (props.modelValue.kind !== 'group') return
|
||||
|
||||
const next = cloneEditableCondition(props.modelValue) as EditableConditionGroup
|
||||
next.children.splice(index, 1)
|
||||
|
||||
// When all children are removed, if top-level group, emit remove to let parent clear the condition
|
||||
if (next.children.length === 0) {
|
||||
if (!props.nested) {
|
||||
emit('remove')
|
||||
} else {
|
||||
next.children.push(createEmptyConditionLeaf())
|
||||
emit('update:modelValue', next)
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
emit('update:modelValue', next)
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user