@svadmin/ui 0.73.0 → 0.74.0

package/dist/components/FileUpload.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-  import { onDestroy } from 'svelte';
+  import { onDestroy, untrack } from 'svelte';
   import { X, Upload, RotateCw, Ban } from '@lucide/svelte';
   import { Button } from './ui/button/index.js';
+  import { useTranslation } from '@svadmin/core/i18n';
 
   export type UploadItemStatus = 'queued' | 'uploading' | 'success' | 'error' | 'cancelled';
 
@@ -9,15 +10,25 @@
     id: string;
     file: File;
     status: UploadItemStatus;
-    progress: number;
-    url?: string;
-    error?: string;
-  }
+  progress: number;
+  url?: string;
+  error?: string;
+  uploadId?: string;
+  cleanupStatus?: 'pending' | 'success' | 'error';
+}
 
-  export interface UploadSession {
-    signal: AbortSignal;
-    onProgress: (progress: number) => void;
-  }
+export interface UploadSession {
+  signal: AbortSignal;
+  idempotencyKey: string;
+  setUploadId: (uploadId: string) => void;
+  onProgress: (progress: number) => void;
+}
+
+export interface UploadCancellation {
+  uploadId: string;
+  idempotencyKey: string;
+  reason: 'cancel' | 'remove' | 'replace' | 'scope-change' | 'unmount';
+}
 
   interface Props {
     id?: string;
@@ -28,7 +39,8 @@
     maxSize?: number;
     disabled?: boolean;
     required?: boolean;
-    upload?: (file: File, session: UploadSession) => Promise<{ url?: string } | undefined> | Promise<void>;
+    upload?: (file: File, session: UploadSession) => Promise<{ url?: string; uploadId?: string } | undefined> | Promise<void>;
+    cancelUpload?: (file: File, cancellation: UploadCancellation) => Promise<void>;
     onChange?: (items: UploadItem[]) => void;
     onReject?: (file: File, reason: string) => void;
     class?: string;
@@ -44,20 +56,89 @@
     disabled = false,
     required = false,
     upload,
+    cancelUpload,
     onChange,
     onReject,
     class: className = '',
   }: Props = $props();
 
+  const i18n = useTranslation();
   let input: HTMLInputElement | undefined = $state();
   let items = $state<UploadItem[]>([]);
+  let rejected = $state<{ name: string; reason: string }[]>([]);
   let sequence = 0;
   const controllers = new Map<string, AbortController>();
-  let disposed = false;
+  interface UploadAttempt {
+    controller: AbortController;
+    upload: NonNullable<Props['upload']>;
+    cancelUpload?: Props['cancelUpload'];
+    epoch: number;
+    file: File;
+    idempotencyKey: string;
+    uploadId?: string;
+    reason?: UploadCancellation['reason'];
+    cleanupStarted?: boolean;
+    settled?: boolean;
+  }
+  const attempts = new Map<string, UploadAttempt>();
+  const latestAttempts = new Map<string, UploadAttempt>();
+  let scopeEpoch = 0;
+  let observedUpload = untrack(() => upload);
+  let destroyed = false;
+
+  $effect.pre(() => {
+    if (upload === observedUpload) return;
+    observedUpload = upload;
+    scopeEpoch += 1;
+    untrack(() => {
+      const activeIds = [...controllers.keys()];
+      for (const id of activeIds) retire(id, 'scope-change');
+      const cancelledIds = new Set(activeIds);
+      if (cancelledIds.size > 0) {
+        items = items.map(item => cancelledIds.has(item.id) && item.status === 'uploading'
+          ? { ...item, status: 'cancelled', error: 'Upload cancelled.' }
+          : item);
+        emitChange();
+      }
+    });
+  });
+
+  function retire(id: string, reason: UploadCancellation['reason'] = 'cancel'): void {
+    const attempt = attempts.get(id);
+    const controller = controllers.get(id);
+    controllers.delete(id);
+    attempts.delete(id);
+    if (attempt) attempt.reason = reason;
+    controller?.abort();
+    if (attempt) cleanupAttempt(id, attempt);
+  }
+
+  function cleanupAttempt(id: string, attempt: UploadAttempt): void {
+    if (!attempt.reason || attempt.cleanupStarted) return;
+    if (attempt?.uploadId && attempt.cancelUpload) {
+      attempt.cleanupStarted = true;
+      const publish = (cleanupStatus: NonNullable<UploadItem['cleanupStatus']>) => {
+        if (!destroyed && scopeEpoch === attempt.epoch && upload === attempt.upload
+          && latestAttempts.get(id) === attempt && items.some(item => item.id === id)) {
+          updateItem(id, { cleanupStatus });
+        }
+      };
+      publish('pending');
+      const cancellation: UploadCancellation = {
+        uploadId: attempt.uploadId,
+        idempotencyKey: attempt.idempotencyKey,
+        reason: attempt.reason,
+      };
+      const cancel = attempt.cancelUpload;
+      void Promise.resolve().then(() => cancel(attempt.file, cancellation))
+        .then(() => publish('success'), () => publish('error'));
+    }
+  }
+
   onDestroy(() => {
-    disposed = true;
-    for (const controller of controllers.values()) controller.abort();
-    controllers.clear();
+    destroyed = true;
+    for (const id of controllers.keys()) retire(id, 'unmount');
+    latestAttempts.clear();
   });
 
   function emitChange(): void {
@@ -86,61 +167,127 @@
     return undefined;
   }
 
-  function updateItem(id: string, update: Partial<UploadItem>, clear: readonly ('url' | 'error')[] = []): void {
-    if (disposed || !items.some(item => item.id === id)) return;
+  const normalizedMaxFiles = $derived(
+    multiple ? (Number.isSafeInteger(maxFiles) && maxFiles > 0 ? maxFiles : 10) : 1,
+  );
+
+  type UploadItemUpdate = Partial<Omit<UploadItem, 'error' | 'url' | 'uploadId' | 'cleanupStatus'>> & {
+    [K in 'error' | 'url' | 'uploadId' | 'cleanupStatus']?: UploadItem[K] | undefined;
+  };
+
+  function updateItem(id: string, update: UploadItemUpdate): void {
     items = items.map(item => {
       if (item.id !== id) return item;
-      const next = { ...item, ...update };
-      if (clear.includes('error')) delete next.error;
-      if (clear.includes('url')) delete next.url;
+      const { error, url, uploadId, cleanupStatus, ...required } = update;
+      const next: UploadItem = { ...item, ...required };
+      if ('error' in update && error === undefined) delete next.error;
+      if ('url' in update && url === undefined) delete next.url;
+      if ('uploadId' in update && uploadId === undefined) delete next.uploadId;
+      if ('cleanupStatus' in update && cleanupStatus === undefined) delete next.cleanupStatus;
+      if (error !== undefined) next.error = error;
+      if (url !== undefined) next.url = url;
+      if (uploadId !== undefined) next.uploadId = uploadId;
+      if (cleanupStatus !== undefined) next.cleanupStatus = cleanupStatus;
       return next;
     });
     emitChange();
   }
 
   async function process(item: UploadItem): Promise<void> {
-    if (!upload || disabled || disposed || controllers.has(item.id) || !items.some(candidate => candidate.id === item.id)) return;
+    if (destroyed || !upload || disabled) return;
+    if (controllers.has(item.id) || !items.some(candidate => candidate.id === item.id)) return;
     const controller = new AbortController();
     controllers.set(item.id, controller);
-    // 取消、替换、重试或卸载后，旧请求不再拥有更新状态的权限。
-    const current = () => !disposed && !controller.signal.aborted && controllers.get(item.id) === controller;
-    updateItem(item.id, { status: 'uploading', progress: 0 }, ['error', 'url']);
+    const attempt: UploadAttempt = {
+      controller, upload, epoch: scopeEpoch, file: item.file,
+      cancelUpload,
+      idempotencyKey: crypto.randomUUID(),
+    };
+    attempts.set(item.id, attempt);
+    latestAttempts.set(item.id, attempt);
+    // 每次尝试由独立控制器持有；旧回执和 finally 不得影响新尝试。
+    const current = () => attempts.get(item.id) === attempt
+      && controllers.get(item.id) === controller
+      && scopeEpoch === attempt.epoch && upload === attempt.upload;
+    const updateCurrent = (update: UploadItemUpdate) => {
+      if (current() && !controller.signal.aborted) updateItem(item.id, update);
+    };
+    const register = (uploadId: string) => {
+      if (attempt.settled) return;
+      if (typeof uploadId !== 'string' || !uploadId.trim() || uploadId.length > 200
+        || (attempt.uploadId !== undefined && attempt.uploadId !== uploadId)) throw new Error('Invalid upload session.');
+      attempt.uploadId = uploadId;
+      updateCurrent({ uploadId });
+      cleanupAttempt(item.id, attempt);
+    };
+    updateItem(item.id, {
+      status: 'uploading',
+      progress: 0,
+      error: undefined,
+      uploadId: undefined,
+      cleanupStatus: undefined,
+    });
     try {
-      // onChange may synchronously unmount the component or retire this attempt.
-      if (!current()) return;
-      const result = await upload(item.file, {
+      // 宿主回调可以同步卸载或替换组件；通知返回后必须重新确认本次请求仍有效。
+      if (destroyed || !current() || controller.signal.aborted) return;
+      const result = await attempt.upload(item.file, {
         signal: controller.signal,
-        onProgress: progress => {
-          if (current()) updateItem(item.id, {
-            progress: Number.isFinite(progress) ? Math.max(0, Math.min(100, Math.round(progress))) : 0,
-          });
-        },
+        idempotencyKey: attempt.idempotencyKey,
+        setUploadId: register,
+        onProgress: progress => updateCurrent({
+          progress: Number.isFinite(progress) ? Math.max(0, Math.min(100, Math.round(progress))) : 0,
+        }),
+      });
+      if (result?.uploadId !== undefined) register(result.uploadId);
+      const uploadId = result?.uploadId ?? attempt.uploadId;
+      updateCurrent({
+        status: 'success',
+        progress: 100,
+        ...(result?.url === undefined ? {} : { url: result.url }),
+        ...(uploadId === undefined ? {} : { uploadId }),
       });
-      if (current()) updateItem(item.id, { status: 'success', progress: 100,
-        ...(result?.url === undefined ? {} : { url: result.url }) });
     } catch (error) {
-      if (current()) updateItem(item.id, { status: 'error',
-        error: error instanceof Error ? error.message : 'Upload failed.' });
+      if (!current()) return;
+      updateItem(item.id, {
+        status: controller.signal.aborted ? 'cancelled' : 'error',
+        error: controller.signal.aborted ? 'Upload cancelled.' : error instanceof Error ? error.message : 'Upload failed.',
+      });
     } finally {
-      if (controllers.get(item.id) === controller) controllers.delete(item.id);
+      attempt.settled = true;
+      if (current()) {
+        controllers.delete(item.id);
+        attempts.delete(item.id);
+      }
     }
   }
 
   function addFiles(selected: File[]): void {
-    if (disabled || disposed) return;
-    const available = Math.max(0, maxFiles - items.length);
-    for (const file of selected.slice(0, multiple ? available : 1)) {
-      // Host notifications may synchronously disable or unmount this batch.
-      if (disabled || disposed) return;
+    if (destroyed || disabled) return;
+    const available = multiple
+      ? Math.max(0, normalizedMaxFiles - items.length)
+      : 1;
+    rejected = [];
+    if (selected.length > available) {
+      for (const file of selected.slice(available)) {
+        if (destroyed) return;
+        rejected = [...rejected, { name: file.name, reason: 'Maximum file count exceeded.' }];
+        onReject?.(file, 'Maximum file count exceeded.');
+      }
+    }
+    for (const file of selected.slice(0, multiple ? available : Math.min(available, 1))) {
+      if (destroyed) return;
       const reason = validate(file);
       if (reason) {
+        rejected = [...rejected, { name: file.name, reason }];
         onReject?.(file, reason);
         continue;
       }
       const item: UploadItem = { id: nextId(), file, status: 'queued', progress: 0 };
       if (!multiple) {
-        for (const controller of controllers.values()) controller.abort();
-        controllers.clear();
+        for (const previous of items) {
+          retire(previous.id, 'replace');
+          latestAttempts.delete(previous.id);
+        }
       }
       items = multiple ? [...items, item] : [item];
       emitChange();
@@ -152,21 +299,23 @@
     const target = event.currentTarget;
     if (!(target instanceof HTMLInputElement)) return;
     addFiles(Array.from(target.files ?? []));
+    // 异步模式的文件由队列持有，清空输入以允许再次选择同名文件。
+    if (upload) target.value = '';
   }
 
   function remove(id: string): void {
-    if (disabled || disposed) return;
-    controllers.get(id)?.abort();
-    controllers.delete(id);
+    if (disabled) return;
+    retire(id, 'remove');
+    latestAttempts.delete(id);
     items = items.filter(item => item.id !== id);
+    if (input) input.value = '';
     emitChange();
   }
 
   function cancel(id: string): void {
     const controller = controllers.get(id);
     if (!controller) return;
-    controller.abort();
-    controllers.delete(id);
+    retire(id, 'cancel');
     updateItem(id, { status: 'cancelled', error: 'Upload cancelled.' });
   }
 
@@ -183,15 +332,15 @@
 </script>
 
 <div class={`svadmin-file-upload ${className}`}>
-  <input
+    <input
     bind:this={input}
     type="file"
     {id}
-    {name}
+    name={upload ? undefined : name}
     {accept}
     {multiple}
     disabled={disabled}
-    {required}
+    required={upload ? false : required}
     class="svadmin-file-upload-input"
     onchange={handleInput}
   />
@@ -209,8 +358,19 @@
     }}
   >
     <Upload aria-hidden="true" />
-    <span>Select or drop files</span>
+    <span>{i18n.t('upload.selectOrDrop')}</span>
+  </div>
+
+  <div role="status" aria-live="polite">
+    {i18n.t('upload.selectedCount', { count: String(items.length), max: String(normalizedMaxFiles) })}
   </div>
+  {#if rejected.length}
+    <ul aria-label={i18n.t('upload.rejectedFiles')}>
+      {#each rejected as rejection (rejection)}
+        <li>{rejection.name}: {rejection.reason}</li>
+      {/each}
+    </ul>
+  {/if}
 
   {#if items.length}
     <ul class="svadmin-file-upload-list" aria-label="Selected files">
@@ -233,6 +393,8 @@
             <X aria-hidden="true" />
           </Button>
           {#if item.error}<span role="alert">{item.error}</span>{/if}
+          {#if item.cleanupStatus === 'pending'}<span role="status">{i18n.t('upload.cleanupPending')}</span>{/if}
+          {#if item.cleanupStatus === 'error'}<span role="alert">{i18n.t('upload.cleanupFailed')}</span>{/if}
         </li>
       {/each}
     </ul>

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

@@ -6,11 +6,20 @@ export interface UploadItem {
     progress: number;
     url?: string;
     error?: string;
+    uploadId?: string;
+    cleanupStatus?: 'pending' | 'success' | 'error';
 }
 export interface UploadSession {
     signal: AbortSignal;
+    idempotencyKey: string;
+    setUploadId: (uploadId: string) => void;
     onProgress: (progress: number) => void;
 }
+export interface UploadCancellation {
+    uploadId: string;
+    idempotencyKey: string;
+    reason: 'cancel' | 'remove' | 'replace' | 'scope-change' | 'unmount';
+}
 interface Props {
     id?: string;
     name?: string;
@@ -22,7 +31,9 @@ interface Props {
     required?: boolean;
     upload?: (file: File, session: UploadSession) => Promise<{
         url?: string;
+        uploadId?: string;
     } | undefined> | Promise<void>;
+    cancelUpload?: (file: File, cancellation: UploadCancellation) => Promise<void>;
     onChange?: (items: UploadItem[]) => void;
     onReject?: (file: File, reason: string) => void;
     class?: string;

package/dist/components/FilterBuilder.svelte

@@ -7,10 +7,18 @@
   import { Select } from './ui/select/index.js';
   import { useTranslation } from '@svadmin/core/i18n';
   import type { CrudOperator, FieldDefinition, Filter } from '@svadmin/core';
+  import { isNumericFilterField as isNumericField } from '@svadmin/core';
+  import FilterCollectionInput from './FilterCollectionInput.svelte';
   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 }
+  export interface FilterRuleItem {
+    id: string;
+    field: string;
+    operator: CrudOperator;
+    value: unknown;
+  }
+
   interface Props {
     fields?: FieldDefinition[];
     filters?: Filter[];
@@ -27,13 +35,15 @@
   const i18n = useTranslation();
   const chinese = $derived(i18n.locale.startsWith('zh'));
   const availableFields = $derived(fields.filter((field) => field.filterable !== false));
+  // 金额、评分等数字字段沿用 core 的输入语义；树编译器统一按 number 验证。
+  const editorFields = $derived(fields.map(field => isNumericField(field) ? { ...field, type: 'number' as const } : field));
   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 compilation = $derived(compileFilterTree({ ...root, operator: logicalOperator }, editorFields, 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));
@@ -43,94 +53,75 @@
     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;
+    return !compileFilterTree({ kind: 'group', id: 'probe', operator: 'and', children: [node] }, editorFields).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(() => {
-    const metadata = availableFields;
-    if (filters !== lastInputFilters) {
-      lastInputFilters = filters;
-      const parsed = readFilterTree(filters);
-      if (parsed.ok) {
+    const input = filters;
+    const metadata = editorFields;
+    untrack(() => {
+      if (input !== lastInputFilters) {
+        lastInputFilters = input;
+        const parsed = readFilterTree(input);
         const saved = new Map<string, Filter>();
-        untrack(() => remember(parsed.root, saved));
-        root = parsed.root;
+        if (parsed.ok) {
+          root = parsed.root;
+          remember(root, saved);
+          loadIssues = [];
+          if (input.length) logicalOperator = root.operator;
+        } else {
+          root = { kind: 'group', id: 'root', operator: 'and', children: [], wrapped: false };
+          loadIssues = parsed.issues;
+        }
         preserved = saved;
-        loadIssues = [];
-        if (filters.length) logicalOperator = parsed.root.operator;
+        attempted = false;
       } else {
-        preserved = new Map();
-        loadIssues = parsed.issues;
-        root = { kind: 'group', id: 'root', operator: 'and', children: [], wrapped: false };
+        // 元数据加载后只解锁已支持的历史条件；不能把失效草稿改成只读而绕过校验。
+        function unlock(node: FilterNode): void {
+          if (node.kind === 'group') node.children.forEach(unlock);
+          else if (node.readonly && compileFilterTree({ kind: 'group', id: 'probe', operator: 'and', children: [node] }, metadata).ok) node.readonly = false;
+        }
+        unlock(root);
       }
-      attempted = false;
-    } else {
-      untrack(() => { void metadata; refreshReadonly(root); });
-    }
+    });
   });
-  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;
-  }
 
   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'],
+      'unknown-field': ['字段不可用于筛选', 'Field is unavailable for filtering'],
+      operator: ['操作符不适用于此字段', 'Operator is not supported for this field'],
+      value: ['请输入有效的类型化值', 'Enter a valid typed value'],
       'empty-group': ['条件组不能为空', 'A filter group cannot be empty'],
     };
     return labels[code][chinese ? 0 : 1];
   }
   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 }];
+    if (disabled || loadIssues.length || full) return;
+    const field = availableFields[0];
+    if (!field) return;
+    group.children = [...group.children, { kind: 'rule', id: `draft-${++nextId}`, field: field.key,
+      operator: filterOperators(editorFields.find(item => item.key === field.key)).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;
+    if (disabled || loadIssues.length || full) 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; }
+    group.children = group.children.filter(child => child.id !== id);
   }
-  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 {
@@ -138,21 +129,48 @@
     root = { kind: 'group', id: 'root', operator: 'and', children: [], wrapped: false };
     loadIssues = [];
     preserved = new Map();
-    logicalOperator = 'and';
     filters = [];
+    lastInputFilters = filters;
     attempted = false;
     onReset?.();
   }
+
   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);
   }
+
+  function changeField(rule: FilterRuleNode, key: string): void {
+    if (disabled || rule.readonly) return;
+    rule.field = key;
+    rule.operator = filterOperators(editorFields.find(field => field.key === key)).includes('contains') ? 'contains' : 'eq';
+    rule.value = undefined;
+  }
+
+  function changeValue(rule: FilterRuleNode, raw: string): void {
+    if (disabled || rule.readonly) return;
+    try { rule.value = parseFilterInput(raw, editorFields.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); }
+
+  function changeOperator(rule: FilterRuleNode, operator: CrudOperator): void {
+    if (disabled || rule.readonly) return;
+    const previous = rule.operator;
+    rule.operator = operator;
+    if (isNullOperator(operator)) rule.value = null;
+    else if (operator === 'between' || operator === 'nbetween') {
+      if (previous !== 'between' && previous !== 'nbetween') rule.value = [null, null];
+    } else if (isCollectionOperator(operator)) {
+      if (previous !== 'in' && previous !== 'nin') rule.value = [null];
+    } else if (isCollectionOperator(previous) || isNullOperator(previous)) rule.value = undefined;
+  }
 </script>
 
 {#snippet groupEditor(group: FilterGroupNode, depth: number, top: boolean)}
@@ -185,7 +203,7 @@
         </div>
       {:else}
         {@const field = availableFields.find((item) => item.key === node.field)}
-        {@const allowed = filterOperators(field)}
+        {@const allowed = filterOperators(editorFields.find(item => item.key === node.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}>
@@ -210,6 +228,10 @@
             <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}
+              <FilterCollectionInput {field} value={node.value}
+                range={node.operator === 'between' || node.operator === 'nbetween'}
+                onchange={(value) => { if (!disabled && !node.readonly) node.value = value; }} />
             {: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))}
@@ -229,12 +251,12 @@
                 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'}
+            {:else if !collection && isNumericField(field)}
               <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); }} />
+                oninput={(event: 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); }} />
+                oninput={(event: Event) => { if (event.currentTarget instanceof HTMLInputElement) changeValue(node, event.currentTarget.value); }} />
             {/if}
           </div>
           {/if}