@svadmin/ui 0.72.0 → 0.73.0

package/dist/components/FilterBuilder.svelte

@@ -1,321 +1,278 @@
 <script lang="ts">
+  import { untrack } from 'svelte';
   import { Plus, Trash2, RotateCcw, Filter as FilterIcon, Check } from '@lucide/svelte';
   import { cn } from '../utils.js';
-  import { numericInputValue } from '../numeric-input.js';
   import { Button } from './ui/button/index.js';
   import { Input } from './ui/input/index.js';
   import { Select } from './ui/select/index.js';
   import { useTranslation } from '@svadmin/core/i18n';
-  import type { CrudOperator, FieldDefinition, FieldFilter, Filter, LogicalFilter } from '@svadmin/core';
-
-  export interface FilterRuleItem {
-    id: string;
-    field: string;
-    operator: CrudOperator;
-    value: unknown;
-  }
-
-  const i18n = useTranslation();
+  import type { CrudOperator, FieldDefinition, Filter } from '@svadmin/core';
+  import { readFilterTree, compileFilterTree, filterOperators, parseFilterInput, isCollectionOperator, isNullOperator,
+    FILTER_EDITOR_LIMITS, type FilterGroupNode, type FilterNode, type FilterRuleNode, type FilterEditorIssue, type FilterIssueCode } from './enterprise/filter-tree.js';
 
+  export interface FilterRuleItem { id: string; field: string; operator: CrudOperator; value: unknown }
   interface Props {
     fields?: FieldDefinition[];
     filters?: Filter[];
     logicalOperator?: 'and' | 'or';
+    disabled?: boolean;
     class?: string;
     onApply?: (filters: Filter[]) => void;
     onReset?: () => void;
+    onInvalid?: (issues: FilterEditorIssue[]) => void;
   }
+  let { fields = [], filters = $bindable([]), logicalOperator = $bindable('and'), disabled = false,
+    class: className, onApply, onReset, onInvalid }: Props = $props();
+  const uid = $props.id();
+  const i18n = useTranslation();
+  const chinese = $derived(i18n.locale.startsWith('zh'));
+  const availableFields = $derived(fields.filter((field) => field.filterable !== false));
+  let root = $state<FilterGroupNode>({ kind: 'group', id: 'root', operator: 'and', children: [], wrapped: false });
+  let loadIssues = $state<FilterEditorIssue[]>([]);
+  let attempted = $state(false);
+  let nextId = 0;
+  let lastInputFilters: Filter[] | undefined;
+  let preserved = $state.raw<ReadonlyMap<string, Filter>>(new Map());
+  const compilation = $derived(compileFilterTree({ ...root, operator: logicalOperator }, fields, preserved));
+  const issues = $derived(loadIssues.length ? loadIssues : attempted && !compilation.ok ? compilation.issues : []);
+  function countNodes(node: FilterNode): number { return 1 + (node.kind === 'group' ? node.children.reduce((sum, child) => sum + countNodes(child), 0) : 0); }
+  const nodeCount = $derived(countNodes(root));
+  const full = $derived(nodeCount >= FILTER_EDITOR_LIMITS.nodes);
 
-  let {
-    fields = [],
-    filters = $bindable([]),
-    logicalOperator = $bindable('and'),
-    class: className,
-    onApply,
-    onReset,
-  }: Props = $props();
-
-  const operatorOptions: { value: CrudOperator; label: string }[] = [
-    { value: 'eq', label: '等于 (eq)' },
-    { value: 'ne', label: '不等于 (ne)' },
-    { value: 'contains', label: '包含 (contains)' },
-    { value: 'ncontains', label: '不包含 (ncontains)' },
-    { value: 'gt', label: '大于 (>)' },
-    { value: 'gte', label: '大于等于 (>=)' },
-    { value: 'lt', label: '小于 (<)' },
-    { value: 'lte', label: '小于等于 (<=)' },
-    { value: 'null', label: '为空 (null)' },
-    { value: 'nnull', label: '非空 (not null)' },
-  ];
-
-  let rules = $state<FilterRuleItem[]>([]);
-
-  // Initialize rules from filters prop
+  function snapshotNode(node: FilterNode): Filter {
+    return node.kind === 'group' ? { operator: node.operator, value: node.children.map(snapshotNode) }
+      : { field: node.field, operator: node.operator, value: Array.isArray(node.value) ? [...node.value] : node.value };
+  }
+  function cannotEdit(node: FilterRuleNode): boolean {
+    return isCollectionOperator(node.operator) || node.value === ''
+      || !compileFilterTree({ kind: 'group', id: 'probe', operator: 'and', children: [{ ...node, readonly: false }] }, fields).ok;
+  }
+  function remember(node: FilterNode, saved: Map<string, Filter>): void {
+    saved.set(node.id, snapshotNode(node));
+    if (node.kind === 'group') node.children.forEach(child => remember(child, saved));
+    else node.readonly = cannotEdit(node);
+  }
+  function refreshReadonly(node: FilterNode): void {
+    if (node.kind === 'group') { node.children.forEach(refreshReadonly); return; }
+    const original = preserved.get(node.id);
+    node.readonly = original !== undefined && JSON.stringify(original) === JSON.stringify(snapshotNode(node)) && cannotEdit(node);
+  }
   $effect(() => {
-    if (filters && filters.length > 0) {
-      const parsedRules: FilterRuleItem[] = [];
-      let nextLogical: 'and' | 'or' = 'and';
-
-      for (const [i, item] of filters.entries()) {
-        if ('field' in item) {
-          parsedRules.push({
-            id: `rule-${i}-${Date.now()}`,
-            field: item.field,
-            operator: item.operator,
-            value: item.value,
-          });
-        } else if (item.operator === 'and' || item.operator === 'or') {
-          nextLogical = item.operator;
-          for (const [j, sub] of item.value.entries()) {
-            if ('field' in sub) {
-              parsedRules.push({
-                id: `rule-${i}-${j}-${Date.now()}`,
-                field: sub.field,
-                operator: sub.operator,
-                value: sub.value,
-              });
-            }
-          }
-        }
+    const metadata = availableFields;
+    if (filters !== lastInputFilters) {
+      lastInputFilters = filters;
+      const parsed = readFilterTree(filters);
+      if (parsed.ok) {
+        const saved = new Map<string, Filter>();
+        untrack(() => remember(parsed.root, saved));
+        root = parsed.root;
+        preserved = saved;
+        loadIssues = [];
+        if (filters.length) logicalOperator = parsed.root.operator;
+      } else {
+        preserved = new Map();
+        loadIssues = parsed.issues;
+        root = { kind: 'group', id: 'root', operator: 'and', children: [], wrapped: false };
       }
-      rules = parsedRules;
-      logicalOperator = nextLogical;
+      attempted = false;
     } else {
-      rules = [];
+      untrack(() => { void metadata; refreshReadonly(root); });
     }
   });
-
-  const availableFields = $derived(
-    fields.filter((f) => f.filterable !== false)
-  );
-
-  export function addRule() {
-    const firstField = availableFields[0]?.key ?? 'id';
-    const firstFieldDef = availableFields.find((f) => f.key === firstField);
-    const defaultOp: CrudOperator = firstFieldDef?.type === 'number' ? 'eq' : 'contains';
-
-    rules = [
-      ...rules,
-      {
-        id: `rule-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
-        field: firstField,
-        operator: defaultOp,
-        value: '',
-      },
-    ];
+  function depthOf(target: FilterGroupNode, node: FilterGroupNode = root, depth = root.wrapped || logicalOperator === 'or' ? 1 : 0): number {
+    if (node === target) return depth;
+    for (const child of node.children) if (child.kind === 'group') {
+      const found = depthOf(target, child, depth + 1);
+      if (found >= 0) return found;
+    }
+    return -1;
   }
 
-  export function removeRule(index: number) {
-    rules = rules.filter((_, i) => i !== index);
+  function message(code: FilterIssueCode): string {
+    const labels: Record<FilterIssueCode, [string, string]> = {
+      'invalid-filter': ['条件结构不受支持，原条件未被修改', 'Unsupported filter structure; the original query is unchanged'],
+      limit: ['条件数量或深度超过限制', 'Filter count or depth exceeds the limit'],
+      'unknown-field': ['字段不可用于筛选', 'Field is unavailable for filtering'], operator: ['操作符不适用于此字段', 'Operator is not supported for this field'],
+      value: ['请输入有效的类型化值；集合与范围使用 JSON 数组', 'Enter a valid typed value; sets and ranges use JSON arrays'],
+      'empty-group': ['条件组不能为空', 'A filter group cannot be empty'],
+    };
+    return labels[code][chinese ? 0 : 1];
   }
-
-  export function reset() {
-    rules = [];
+  function appendRule(group: FilterGroupNode): void {
+    if (disabled || loadIssues.length || full || depthOf(group) < 0 || depthOf(group) >= FILTER_EDITOR_LIMITS.depth) return;
+    const first = availableFields[0];
+    if (!first) return;
+    group.children = [...group.children, { kind: 'rule', id: `draft-${++nextId}`, field: first.key,
+      operator: filterOperators(first).includes('contains') ? 'contains' : 'eq', value: undefined }];
+  }
+  function appendGroup(group: FilterGroupNode): void {
+    if (disabled || loadIssues.length || full || depthOf(group) < 0 || depthOf(group) >= FILTER_EDITOR_LIMITS.depth) return;
+    group.children = [...group.children, { kind: 'group', id: `draft-${++nextId}`, operator: 'and', children: [] }];
+  }
+  function removeNode(group: FilterGroupNode, id: string): void {
+    if (disabled || loadIssues.length) return;
+    group.children = group.children.filter((node) => node.id !== id);
+  }
+  function changeField(rule: FilterRuleNode, key: string): void {
+    if (disabled || rule.readonly) return;
+    rule.field = key;
+    rule.operator = filterOperators(fields.find((field) => field.key === key)).includes('contains') ? 'contains' : 'eq';
+    rule.value = undefined;
+  }
+  function changeOperator(rule: FilterRuleNode, next: CrudOperator): void {
+    if (disabled || rule.readonly) return;
+    if (isNullOperator(next)) rule.value = null;
+    else if (isNullOperator(rule.operator) || isCollectionOperator(rule.operator) !== isCollectionOperator(next)) rule.value = undefined;
+    rule.operator = next;
+  }
+  function changeValue(rule: FilterRuleNode, raw: string): void {
+    if (disabled || rule.readonly) return;
+    try { rule.value = parseFilterInput(raw, fields.find((field) => field.key === rule.field), rule.operator); }
+    catch { rule.value = raw; }
+  }
+  function valueText(value: unknown): string { return Array.isArray(value) ? JSON.stringify(value) : value === undefined || value === null ? '' : String(value); }
+  export function addRule(): void { appendRule(root); }
+  export function removeRule(index: number): void { const node = root.children[index]; if (node) removeNode(root, node.id); }
+  export function reset(): void {
+    if (disabled) return;
+    root = { kind: 'group', id: 'root', operator: 'and', children: [], wrapped: false };
+    loadIssues = [];
+    preserved = new Map();
+    logicalOperator = 'and';
     filters = [];
+    attempted = false;
     onReset?.();
   }
-
-  export function apply() {
-    const validFieldFilters: FieldFilter[] = rules
-      .filter((r) => r.field && (r.operator === 'null' || r.operator === 'nnull' || (r.value !== '' && r.value !== undefined)))
-      .map((r) => ({
-        field: r.field,
-        operator: r.operator,
-        value: r.operator === 'null' || r.operator === 'nnull' ? null : r.value,
-      }));
-
-    let compiledFilters: Filter[] = [];
-    if (validFieldFilters.length === 1 || logicalOperator === 'and') {
-      compiledFilters = validFieldFilters;
-    } else if (validFieldFilters.length > 1 && logicalOperator === 'or') {
-      const logical: LogicalFilter = {
-        operator: 'or',
-        value: validFieldFilters,
-      };
-      compiledFilters = [logical];
-    }
-
-    filters = compiledFilters;
-    onApply?.(compiledFilters);
+  export function apply(): void {
+    if (disabled) return;
+    attempted = true;
+    if (loadIssues.length) { onInvalid?.(loadIssues); return; }
+    if (!compilation.ok) { onInvalid?.(compilation.issues); return; }
+    // 失败时绝不输出“剩余的有效条件”，避免改变查询的逻辑含义。
+    filters = compilation.filters;
+    lastInputFilters = filters;
+    onApply?.(compilation.filters);
   }
 </script>
 
-<div class={cn('svadmin-u-6da6a3c3f741 svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 svadmin-u-8e63407b5ceb svadmin-u-cef5b893cf23 svadmin-u-6ed543e2fbbb', className)} data-testid="filter-builder">
-  <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-77a2a20e90d4 svadmin-u-65fdbade2025 svadmin-u-05faf5c801ff svadmin-u-7fcf9124b5df">
-    <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">
-      <FilterIcon class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 svadmin-u-bfa603190748" />
-      <span class="svadmin-u-fc7473ca09eb svadmin-u-2689f3958069 svadmin-u-d4108abe6359">
-        {i18n.t('common.filterBuilder', undefined) ?? '高级筛选'}
-      </span>
-      {#if rules.length > 1}
-        <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-b00f43c30c2b svadmin-u-de8350a3bbad svadmin-u-359090c2d529">
-          <button
-            type="button"
-            class={cn(
-              'svadmin-u-07389a777c1f svadmin-u-d5eab218aa34 svadmin-u-465609a240a8 svadmin-u-359090c2d529 svadmin-u-ceb69a6b0e5f',
-              logicalOperator === 'and' ? 'svadmin-u-e6f9e383a762 svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359 svadmin-u-cef5b893cf23' : 'svadmin-u-bfa603190748 svadmin-u-ea7b2e9e070e'
-            )}
-            onclick={() => (logicalOperator = 'and')}
-          >
-            AND (且)
-          </button>
-          <button
-            type="button"
-            class={cn(
-              'svadmin-u-07389a777c1f svadmin-u-d5eab218aa34 svadmin-u-465609a240a8 svadmin-u-359090c2d529 svadmin-u-ceb69a6b0e5f',
-              logicalOperator === 'or' ? 'svadmin-u-e6f9e383a762 svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359 svadmin-u-cef5b893cf23' : 'svadmin-u-bfa603190748 svadmin-u-ea7b2e9e070e'
-            )}
-            onclick={() => (logicalOperator = 'or')}
-          >
-            OR (或)
-          </button>
-        </div>
-      {/if}
-    </div>
-
-    <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-58284b4ea568">
-      <Button
-        variant="ghost"
-        size="sm"
-        class="svadmin-u-ed8a5df7b2fb svadmin-u-44ee8ba0a421 svadmin-u-359090c2d529"
-        data-testid="filter-builder-reset"
-        onclick={reset}
-      >
-        <RotateCcw class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" />
-        {i18n.t('common.reset', undefined) ?? '重置'}
-      </Button>
-      <Button
-        variant="default"
-        size="sm"
-        class="svadmin-u-ed8a5df7b2fb svadmin-u-44ee8ba0a421 svadmin-u-359090c2d529"
-        data-testid="filter-builder-apply"
-        onclick={apply}
-      >
-        <Check class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" />
-        {i18n.t('common.confirm', undefined) ?? '应用'}
+{#snippet groupEditor(group: FilterGroupNode, depth: number, top: boolean)}
+  <fieldset class="filter-group" data-testid={top ? 'filter-builder-root' : 'filter-builder-group'} data-filter-group={group.id} disabled={disabled}>
+    <legend>{top ? (chinese ? '筛选条件' : 'Filters') : (chinese ? '条件组' : 'Filter group')}</legend>
+    <div class="group-actions">
+      <label for={`${uid}-${group.id}-logic`}>{chinese ? '逻辑' : 'Logic'}</label>
+      <Select id={`${uid}-${group.id}-logic`} aria-label={chinese ? '组合逻辑' : 'Group logic'}
+        value={top ? logicalOperator : group.operator}
+        onchange={(event: Event) => {
+          const target = event.currentTarget;
+          if (disabled || !(target instanceof HTMLSelectElement)) return;
+          const next = target.value === 'or' ? 'or' : 'and';
+          if (top) logicalOperator = next; else group.operator = next;
+        }}>
+        <option value="and">AND</option><option value="or">OR</option>
+      </Select>
+      <Button type="button" size="sm" variant="outline" disabled={full || depth >= FILTER_EDITOR_LIMITS.depth || !availableFields.length}
+        data-testid={top ? 'filter-builder-add-rule' : 'filter-group-add-rule'} onclick={() => appendRule(group)}>
+        <Plus size={14} aria-hidden="true" />{i18n.t('common.addRule')}
       </Button>
+      <Button type="button" size="sm" variant="ghost" disabled={full || depth >= FILTER_EDITOR_LIMITS.depth - 1}
+        data-testid="filter-builder-add-group" onclick={() => appendGroup(group)}>{chinese ? '添加条件组' : 'Add group'}</Button>
     </div>
-  </div>
-
-  <div class="svadmin-u-6f7e013d6499">
-    {#each rules as rule, index (rule.id)}
-      {@const fieldDef = availableFields.find((f) => f.key === rule.field)}
-      <div class="svadmin-u-60fbb7713999 svadmin-u-1eb5c6df38c1 svadmin-u-3fd0f778c8d9 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4 svadmin-u-421ac2be5045 svadmin-u-967d113a1451 svadmin-u-7660b450905a svadmin-u-ca6bcd4b6f3f svadmin-u-6ee2d41e2d2d">
-        <!-- Field select -->
-        <div class="svadmin-u-df403bbae8fc svadmin-u-012fbd121f37">
-          <Select
-            class="svadmin-u-ed8a5df7b2fb svadmin-u-359090c2d529"
-            value={rule.field}
-            onchange={(e: Event) => {
-              rule.field = (e.currentTarget as HTMLSelectElement).value;
-            }}
-          >
-            {#each availableFields as f (f.key)}
-              <option value={f.key}>{f.label || f.key}</option>
-            {/each}
-          </Select>
+    {#each group.children as node (node.id)}
+      {#if node.kind === 'group'}
+        <div class="nested-group">
+          {@render groupEditor(node, depth + 1, false)}
+          <Button type="button" size="sm" variant="ghost" aria-label={chinese ? '删除条件组' : 'Remove group'} onclick={() => removeNode(group, node.id)}><Trash2 size={14} aria-hidden="true" /></Button>
         </div>
-
-        <!-- Operator select -->
-        <div class="svadmin-u-df403bbae8fc svadmin-u-012fbd121f37">
-          <Select
-            class="svadmin-u-ed8a5df7b2fb svadmin-u-359090c2d529"
-            value={rule.operator}
-            onchange={(e: Event) => {
-              rule.operator = (e.currentTarget as HTMLSelectElement).value as CrudOperator;
-            }}
-          >
-            {#each operatorOptions as op (op.value)}
-              <option value={op.value}>{op.label}</option>
-            {/each}
-          </Select>
-        </div>
-
-        <!-- Value input -->
-        <div class="svadmin-u-36e579c0b41c svadmin-u-a9ef791a0777">
-          {#if rule.operator === 'null' || rule.operator === 'nnull'}
-            <div class="svadmin-u-ed8a5df7b2fb svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-0e17f2bd9074 svadmin-u-359090c2d529 svadmin-u-bfa603190748 italic svadmin-u-2859c861d7de svadmin-u-421ac2be5045">
-              无需填值
-            </div>
-          {:else if fieldDef?.type === 'select' && fieldDef.options}
-            <Select
-              class="svadmin-u-ed8a5df7b2fb svadmin-u-359090c2d529"
-              value={String(rule.value ?? '')}
-              onchange={(e: Event) => {
-                rule.value = (e.currentTarget as HTMLSelectElement).value;
-              }}
-            >
-              <option value="">{i18n.t('field.selectPlaceholder', undefined) ?? '请选择'}</option>
-              {#each fieldDef.options as opt (opt.value)}
-                <option value={String(opt.value)}>{opt.label}</option>
-              {/each}
+      {:else}
+        {@const field = availableFields.find((item) => item.key === node.field)}
+        {@const allowed = filterOperators(field)}
+        {@const collection = isCollectionOperator(node.operator)}
+        {@const invalid = issues.some((issue) => issue.path === node.id)}
+        <div class="filter-rule" data-testid="filter-builder-rule" data-filter-rule={node.id}>
+          {#if node.readonly}
+            <output aria-label={i18n.t('filter.readonly')}>{node.field} {node.operator} {JSON.stringify(node.value)}</output>
+          {:else}
+          <div>
+            <label for={`${uid}-${node.id}-field`}>{chinese ? '字段' : 'Field'}</label>
+            <Select id={`${uid}-${node.id}-field`} value={node.field} onchange={(event: Event) => { if (event.currentTarget instanceof HTMLSelectElement) changeField(node, event.currentTarget.value); }}>
+              {#if !field}<option value={node.field} disabled>{node.field}</option>{/if}
+              {#each availableFields as option (option.key)}<option value={option.key}>{option.label || option.key}</option>{/each}
             </Select>
-          {:else if fieldDef?.type === 'boolean'}
-            <Select
-              class="svadmin-u-ed8a5df7b2fb svadmin-u-359090c2d529"
-              value={String(rule.value ?? '')}
-              onchange={(e: Event) => {
-                const val = (e.currentTarget as HTMLSelectElement).value;
-                rule.value = val === 'true' ? true : val === 'false' ? false : '';
-              }}
-            >
-              <option value="">{i18n.t('field.selectPlaceholder', undefined) ?? '请选择'}</option>
-              <option value="true">{i18n.t('common.yes', undefined) ?? '是 (true)'}</option>
-              <option value="false">{i18n.t('common.no', undefined) ?? '否 (false)'}</option>
+          </div>
+          <div>
+            <label for={`${uid}-${node.id}-operator`}>{chinese ? '操作符' : 'Operator'}</label>
+            <Select id={`${uid}-${node.id}-operator`} value={node.operator} onchange={(event: Event) => { if (event.currentTarget instanceof HTMLSelectElement) changeOperator(node, event.currentTarget.value as CrudOperator); }}>
+              {#if !allowed.includes(node.operator)}<option value={node.operator} disabled>{node.operator}</option>{/if}
+              {#each allowed as operator (operator)}<option value={operator}>{operator}</option>{/each}
             </Select>
-          {:else if fieldDef?.type === 'number'}
-            <Input
-              type="number"
-              class="svadmin-u-ed8a5df7b2fb svadmin-u-359090c2d529"
-              placeholder="输入筛选值..."
-              value={numericInputValue(rule.value)}
-              oninput={(e) => {
-                const input = e.currentTarget;
-                if (!(input instanceof HTMLInputElement)) return;
-                rule.value = input.value === '' ? null : numericInputValue(input.valueAsNumber);
-              }}
-            />
-          {:else}
-            <Input
-              type="text"
-              class="svadmin-u-ed8a5df7b2fb svadmin-u-359090c2d529"
-              placeholder="输入筛选值..."
-              value={String(rule.value ?? '')}
-              oninput={(e) => {
-                const input = e.currentTarget;
-                if (input instanceof HTMLInputElement) rule.value = input.value;
-              }}
-            />
+          </div>
+          <div>
+            <label for={`${uid}-${node.id}-value`}>{collection ? (chinese ? '值（JSON 数组）' : 'Value (JSON array)') : (chinese ? '值' : 'Value')}</label>
+            {#if isNullOperator(node.operator)}
+              <Input id={`${uid}-${node.id}-value`} value={chinese ? '无需填值' : 'No value required'} disabled />
+            {:else if !collection && field?.options?.length}
+              <Select id={`${uid}-${node.id}-value`} aria-invalid={invalid}
+                value={field.options.findIndex((option) => option.value === node.value) < 0 ? '' : String(field.options.findIndex((option) => option.value === node.value))}
+                onchange={(event: Event) => {
+                  if (disabled || node.readonly || !(event.currentTarget instanceof HTMLSelectElement)) return;
+                  const raw = event.currentTarget.value;
+                  if (raw === '') { node.value = undefined; return; }
+                  if (!/^(0|[1-9][0-9]*)$/u.test(raw)) return;
+                  const option = field.options?.[Number(raw)];
+                  if (option && !option.disabled) node.value = option.value;
+                }}>
+                <option value="">{chinese ? '请选择' : 'Choose'}</option>
+                {#each field.options as option, index (index)}<option value={String(index)} disabled={option.disabled}>{option.label}</option>{/each}
+              </Select>
+            {:else if !collection && field?.type === 'boolean'}
+              <Select id={`${uid}-${node.id}-value`} aria-invalid={invalid} value={valueText(node.value)}
+                onchange={(event: Event) => { if (event.currentTarget instanceof HTMLSelectElement) changeValue(node, event.currentTarget.value); }}>
+                <option value="">{chinese ? '请选择' : 'Choose'}</option><option value="true">true</option><option value="false">false</option>
+              </Select>
+            {:else if !collection && field?.type === 'number'}
+              <Input id={`${uid}-${node.id}-value`} type="number" step="any" aria-invalid={invalid} value={typeof node.value === 'number' ? node.value : undefined}
+                oninput={(event) => { if (event.currentTarget instanceof HTMLInputElement) changeValue(node, event.currentTarget.value); }} />
+            {:else}
+              <Input id={`${uid}-${node.id}-value`} type="text" aria-invalid={invalid} value={valueText(node.value)} placeholder={collection ? '[1, 2]' : ''}
+                oninput={(event) => { if (event.currentTarget instanceof HTMLInputElement) changeValue(node, event.currentTarget.value); }} />
+            {/if}
+          </div>
           {/if}
+          <Button type="button" size="sm" variant="ghost" aria-label={chinese ? '删除条件' : 'Remove rule'} onclick={() => removeNode(group, node.id)}><Trash2 size={14} aria-hidden="true" /></Button>
         </div>
-
-        <!-- Remove button -->
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon-sm"
-          class="svadmin-u-012fbd121f37 svadmin-u-bfa603190748 svadmin-u-51e95020d6f2"
-          onclick={() => removeRule(index)}
-        >
-          <Trash2 class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" />
-        </Button>
-      </div>
+      {/if}
     {:else}
-      <div class="svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-a29b7a649c77 svadmin-u-c9ed8c5f79ae svadmin-u-cb11fec3bb46 svadmin-u-ca6bf63030aa svadmin-u-359090c2d529 svadmin-u-bfa603190748">
-        暂无筛选条件，点击下方按钮添加规则
-      </div>
+      <p class="empty">{chinese ? '暂无筛选条件，请添加规则。' : 'No filters yet. Add a rule.'}</p>
     {/each}
-  </div>
+  </fieldset>
+{/snippet}
 
-  <Button
-    type="button"
-    variant="outline"
-    size="sm"
-    data-testid="filter-builder-add-rule"
-    class="svadmin-u-6da6a3c3f741 svadmin-u-58284b4ea568 svadmin-u-a29b7a649c77 svadmin-u-359090c2d529 svadmin-u-ed8a5df7b2fb"
-    onclick={addRule}
-  >
-    <Plus class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" />
-    {i18n.t('common.addRule', undefined) ?? '添加筛选条件'}
-  </Button>
+<div class={cn('svadmin-filter-builder', className)} data-testid="filter-builder">
+  <div class="builder-header">
+    <span><FilterIcon size={16} aria-hidden="true" /> {i18n.t('common.filterBuilder')}</span>
+    <div class="group-actions">
+      <Button type="button" variant="ghost" size="sm" disabled={disabled} data-testid="filter-builder-reset" onclick={reset}><RotateCcw size={14} aria-hidden="true" />{i18n.t('common.reset')}</Button>
+      <Button type="button" size="sm" disabled={disabled} data-testid="filter-builder-apply" onclick={apply}><Check size={14} aria-hidden="true" />{i18n.t('common.confirm')}</Button>
+    </div>
+  </div>
+  {#if issues.length}<div role="alert" class="errors" data-testid="filter-builder-errors">{#each issues as issue, index (`${issue.path}-${issue.code}-${index}`)}<p>{issue.path}: {message(issue.code)}</p>{/each}</div>{/if}
+  {#if !loadIssues.length}{@render groupEditor(root, root.wrapped || logicalOperator === 'or' ? 1 : 0, true)}{/if}
 </div>
+
+<style>
+  .svadmin-filter-builder { color: var(--foreground); background: var(--card, var(--background)); border: 1px solid var(--border); border-radius: var(--radius, .5rem); padding: .75rem; font-size: .875rem; }
+  .builder-header, .group-actions, .nested-group { display: flex; align-items: center; gap: .5rem; }
+  .builder-header { justify-content: space-between; flex-wrap: wrap; padding-block-end: .75rem; }
+  .builder-header > span { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
+  .group-actions { flex-wrap: wrap; }
+  .filter-group { min-width: 0; width: 100%; border: 1px solid var(--border); border-radius: var(--radius, .5rem); padding: .75rem; margin: .5rem 0 0; }
+  legend { padding-inline: .25rem; color: var(--muted-foreground); }
+  .filter-rule { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr) auto; align-items: end; gap: .5rem; margin-block-start: .75rem; }
+  .filter-rule > div { min-width: 0; }
+  .filter-rule > output { grid-column: 1 / -2; overflow-wrap: anywhere; }
+  .filter-rule label { display: block; margin-block-end: .25rem; color: var(--muted-foreground); }
+  .empty { padding-block: .75rem; color: var(--muted-foreground); }
+  .errors { color: var(--destructive); overflow-wrap: anywhere; }
+  .nested-group { align-items: flex-start; }
+  @media (max-width: 640px) { .filter-rule { grid-template-columns: minmax(0, 1fr); } .nested-group { gap: .25rem; } }
+</style>

package/dist/components/FilterBuilder.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { CrudOperator, FieldDefinition, Filter } from '@svadmin/core';
+import { type FilterEditorIssue } from './enterprise/filter-tree.js';
 export interface FilterRuleItem {
     id: string;
     field: string;
@@ -9,9 +10,11 @@ interface Props {
     fields?: FieldDefinition[];
     filters?: Filter[];
     logicalOperator?: 'and' | 'or';
+    disabled?: boolean;
     class?: string;
     onApply?: (filters: Filter[]) => void;
     onReset?: () => void;
+    onInvalid?: (issues: FilterEditorIssue[]) => void;
 }
 declare const FilterBuilder: import("svelte").Component<Props, {
     addRule: () => void;