cmat 0.0.86 → 0.0.88

package/fesm2022/cmat-components-custom-formly.mjs

@@ -1,6 +1,9 @@
-import { isNil, isString, isArray, isUndefined } from 'lodash-es';
+import { HttpClient, HttpEventType } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { ViewChild, Component, ChangeDetectionStrategy, inject, Renderer2, ElementRef, ViewEncapsulation, signal, DestroyRef, ViewChildren, ViewContainerRef } from '@angular/core';
+import { inject, Injectable, viewChild, Component, ChangeDetectionStrategy, Renderer2, ElementRef, ViewEncapsulation, signal, computed, DestroyRef, ViewContainerRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { catchError, of } from 'rxjs';
+import { isNil, isString, isEqual, isArray, isUndefined } from 'lodash-es';
 import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i1$3 from '@ngx-formly/core';
@@ -14,22 +17,21 @@ import { FocusMonitor } from '@angular/cdk/a11y';
 import * as i2$1 from '@angular/common';
 import { CommonModule, NgClass, AsyncPipe, NgStyle, NgTemplateOutlet } from '@angular/common';
 import * as i1$4 from '@angular/forms';
-import { ReactiveFormsModule, FormsModule, FormControl, FormGroup } from '@angular/forms';
+import { ReactiveFormsModule, FormsModule, FormControl, FormGroup, UntypedFormGroup } from '@angular/forms';
 import * as i1$2 from '@angular/material/form-field';
-import { MatFormFieldModule, MatFormField } from '@angular/material/form-field';
+import { MatFormField, MatFormFieldModule } from '@angular/material/form-field';
 import * as i3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import { FieldType } from '@ngx-formly/material/form-field';
-import { HttpClient, HttpEventType } from '@angular/common/http';
-import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { CmatCascadeListComponent } from 'cmat/components/cascade';
 import { CmatMediaWatcherService } from 'cmat/services/media-watcher';
 import * as i1$5 from '@angular/material/checkbox';
-import { MatCheckboxModule, MatCheckbox } from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i3$1 from '@angular/material/core';
 import { MatRippleModule } from '@angular/material/core';
 import { CmatChipInputComponent } from 'cmat/components/chip-input';
-import { CmatMaterialColorPickerComponent } from 'cmat/components/material-color-picker';
+import { CmatColorPickerButtonComponent } from 'cmat/components/color-picker';
+import { CmatDataPickerComponent } from 'cmat/components/data-picker';
 import { CmatDateRangeComponent } from 'cmat/components/date-range';
 import * as i1$6 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
@@ -39,11 +41,10 @@ import { FormlySelectModule } from '@ngx-formly/core/select';
 import { CmatDigitOnlyDirective } from 'cmat/directives/digit-only';
 import { CmatRatingComponent } from 'cmat/components/rating';
 import * as i1$7 from '@angular/material/radio';
-import { MatRadioModule, MatRadioGroup } from '@angular/material/radio';
+import { MatRadioGroup, MatRadioModule } from '@angular/material/radio';
 import * as i1$8 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import { CmatSelectSearchComponent } from 'cmat/components/select-search';
-import { ReplaySubject, of, take } from 'rxjs';
 import { CmatSelectTreeComponent } from 'cmat/components/select-tree';
 import { CmatSelectTableComponent } from 'cmat/components/select-table';
 import * as i2$3 from '@angular/material/stepper';
@@ -64,7 +65,7 @@ import BlotFormatter from '@enzedonline/quill-blot-formatter2';
 import { CmatUrlStateConfigService } from 'cmat/services/config';
 import { CmatUtilsService } from 'cmat/services/utils';
 import dayjs from 'dayjs';
-import { Document, Packer, Paragraph, AlignmentType, TextRun, BorderStyle, HeadingLevel, ImageRun, HighlightColor } from 'docx';
+import { Document, Packer, Paragraph, AlignmentType, TextRun, ImageRun, BorderStyle, HeadingLevel, HighlightColor } from 'docx';
 import * as FileSaver from 'file-saver-es';
 import * as i2$4 from 'ngx-quill';
 import { QuillModule } from 'ngx-quill';
@@ -74,6 +75,190 @@ import { CmatKnobInputComponent } from 'cmat/components/knob-input';
 import * as i1$a from '@angular/material/slider';
 import { MatSliderModule } from '@angular/material/slider';
 
+/**
+ * Domain 数据加载服务
+ *
+ * 提供统一的远程数据加载能力，支持 GET/POST 请求、数据提取、转换和错误处理。
+ * 所有使用 domain 配置的 Formly 组件都应使用此服务，避免重复实现。
+ */
+class DomainDataService {
+    constructor() {
+        this._http = inject(HttpClient);
+    }
+    /**
+     * 从 domain 配置加载数据
+     *
+     * @param domain - 数据域配置对象
+     * @param destroyRef - Angular 销毁引用，用于自动取消订阅
+     * @param options - 加载选项（转换函数、回调等）
+     *
+     * @example
+     * ```typescript
+     * // 简单用法
+     * this.domainDataService.load(this.props.domain, this._destroyRef, {
+     *   onSuccess: (data) => this.urlData.set(data)
+     * });
+     *
+     * // 自定义转换
+     * this.domainDataService.load(this.props.domain, this._destroyRef, {
+     *   transform: (raw) => raw.map(item => ({ label: item.name, value: item.id })),
+     *   onSuccess: (data) => this.optionsData.set(data),
+     *   componentName: 'MyComponent'
+     * });
+     * ```
+     */
+    load(domain, destroyRef, options = {}) {
+        const { transform, onSuccess, onError, componentName = 'Unknown' } = options;
+        // 验证 domain 配置
+        if (!domain?.url || !domain?.key || !domain?.code || !domain?.value) {
+            onSuccess?.([]);
+            return;
+        }
+        const method = domain.method ?? 'GET';
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        const headers = { 'Content-Type': 'application/json' };
+        let request$;
+        if (method === 'POST') {
+            // POST 请求处理
+            const requestBodyType = domain.requestBodyType ?? 'json';
+            let body;
+            if (requestBodyType === 'json') {
+                // JSON 格式
+                try {
+                    body = domain.requestBody ? JSON.parse(domain.requestBody) : {};
+                }
+                catch (e) {
+                    console.error(`[${componentName}] Invalid JSON request body:`, e);
+                    onSuccess?.([]);
+                    return;
+                }
+            }
+            else {
+                // FormData 格式（简单键值对）
+                const formData = new URLSearchParams();
+                if (domain.requestBody) {
+                    domain.requestBody.split('\n').forEach((line) => {
+                        const trimmed = line.trim();
+                        if (trimmed?.includes('=')) {
+                            const [key, ...valueParts] = trimmed.split('=');
+                            formData.append(key.trim(), valueParts.join('=').trim());
+                        }
+                    });
+                }
+                body = formData.toString();
+                headers['Content-Type'] = 'application/x-www-form-urlencoded';
+            }
+            request$ = this._http.post(domain.url, body, { headers }).pipe(takeUntilDestroyed(destroyRef), catchError((error) => {
+                console.error(`[${componentName}] Failed to load data (POST):`, error);
+                onError?.(error);
+                onSuccess?.([]);
+                return of([]);
+            }));
+        }
+        else {
+            // GET 请求处理
+            request$ = this._http.get(domain.url).pipe(takeUntilDestroyed(destroyRef), catchError((error) => {
+                console.error(`[${componentName}] Failed to load data (GET):`, error);
+                onError?.(error);
+                onSuccess?.([]);
+                return of([]);
+            }));
+        }
+        request$.subscribe((data) => {
+            if (!Array.isArray(data) || data.length === 0) {
+                onSuccess?.([]);
+                return;
+            }
+            try {
+                const { key, code, value } = domain;
+                // 查找匹配的主对象
+                const matchedItem = data.find((item) => typeof item === 'object' && item !== null && item[key] === code);
+                if (matchedItem?.[value]) {
+                    const extractedData = matchedItem[value];
+                    // 确保提取的是数组
+                    if (Array.isArray(extractedData)) {
+                        // 如果提供了自定义转换函数，使用它；否则使用默认转换
+                        const result = transform
+                            ? transform(extractedData)
+                            : this._defaultTransform(extractedData);
+                        onSuccess?.(result);
+                    }
+                    else {
+                        console.warn(`[${componentName}] Extracted data is not an array:`, extractedData);
+                        onSuccess?.([]);
+                    }
+                }
+                else {
+                    console.warn(`[${componentName}] No matching item found for code:`, code);
+                    onSuccess?.([]);
+                }
+            }
+            catch (e) {
+                console.error(`[${componentName}] Error processing data:`, e);
+                onError?.(e);
+                onSuccess?.([]);
+            }
+        });
+    }
+    /**
+     * 默认数据转换函数
+     *
+     * 将原始 API 数据转换为标准的 OptionData 格式。
+     * 智能映射常见字段名：
+     * - value: value / id / code
+     * - label: label / name / text
+     *
+     * @param rawData - 原始数据数组
+     * @returns 转换后的 OptionData 数组
+     */
+    _defaultTransform(rawData) {
+        return rawData.map((item) => {
+            // 处理非对象情况（如字符串数组、数字数组）
+            if (typeof item !== 'object' || item === null) {
+                return {
+                    value: item,
+                    label: String(item)
+                };
+            }
+            const obj = item;
+            // 智能映射 value 字段
+            const finalValue = obj.value ?? obj.id ?? obj.code;
+            // 智能映射 label 字段
+            let finalLabel;
+            if (obj.label) {
+                finalLabel = obj.label;
+            }
+            else if (obj.name) {
+                finalLabel = obj.name;
+            }
+            else if (obj.text) {
+                finalLabel = obj.text;
+            }
+            else if (finalValue != null) {
+                // eslint-disable-next-line @typescript-eslint/no-base-to-string
+                finalLabel = String(finalValue);
+            }
+            else {
+                finalLabel = '';
+            }
+            return {
+                value: finalValue,
+                label: finalLabel,
+                disabled: !!obj.disabled,
+                ...obj // 保留原始对象的其他属性
+            };
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DomainDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DomainDataService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DomainDataService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 function addonsExtension(field) {
     const props = field.props;
     if (!props || (field.wrappers?.includes('addons'))) {
@@ -88,16 +273,23 @@ function addonsExtension(field) {
 }
 
 class CmatAddonsWrapperComponent extends FieldWrapper {
+    constructor() {
+        super(...arguments);
+        this.matPrefix = viewChild('matPrefix', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "matPrefix" }] : /* istanbul ignore next */ []));
+        this.matSuffix = viewChild('matSuffix', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "matSuffix" }] : /* istanbul ignore next */ []));
+    }
     ngAfterViewInit() {
-        if (this.matPrefix) {
-            this.props.prefix = this.matPrefix;
+        if (this.matPrefix()) {
+            this.props.prefix = this.matPrefix();
         }
-        if (this.matSuffix) {
-            this.props.suffix = this.matSuffix;
+        if (this.matSuffix()) {
+            this.props.suffix = this.matSuffix();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatAddonsWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CmatAddonsWrapperComponent, isStandalone: true, selector: "cmat-addons-wrapper", viewQueries: [{ propertyName: "matPrefix", first: true, predicate: ["matPrefix"], descendants: true, static: true }, { propertyName: "matSuffix", first: true, predicate: ["matSuffix"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatAddonsWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatAddonsWrapperComponent, isStandalone: true, selector: "cmat-addons-wrapper", viewQueries: [{ propertyName: "matPrefix", first: true, predicate: ["matPrefix"], descendants: true, isSignal: true }, { propertyName: "matSuffix", first: true, predicate: ["matSuffix"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <ng-template #matPrefix>
       @if(props.addonLeft){
         <span>
@@ -128,7 +320,7 @@ class CmatAddonsWrapperComponent extends FieldWrapper {
     </ng-template>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormlyMaterialModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatAddonsWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatAddonsWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'cmat-addons-wrapper',
@@ -164,50 +356,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
   `,
                     imports: [MatIconModule, FormlyMaterialModule]
                 }]
-        }], propDecorators: { matPrefix: [{
-                type: ViewChild,
-                args: ['matPrefix', { static: true }]
-            }], matSuffix: [{
-                type: ViewChild,
-                args: ['matSuffix', { static: true }]
-            }] } });
+        }], propDecorators: { matPrefix: [{ type: i0.ViewChild, args: ['matPrefix', { isSignal: true }] }], matSuffix: [{ type: i0.ViewChild, args: ['matSuffix', { isSignal: true }] }] } });
 
 class CmatCardWrapperComponent extends FieldWrapper {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatCardWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CmatCardWrapperComponent, isStandalone: true, selector: "cmat-card-wrapper", usesInheritance: true, ngImport: i0, template: "<mat-card class=\"dark:bg-white/5\">\r\n    @if(props.label){\r\n        <mat-card-title class=\"p-4\">{{ props.label }}</mat-card-title>\r\n    }\r\n    \r\n    <mat-card-content>\r\n        <ng-container #fieldComponent></ng-container>\r\n    </mat-card-content>    \r\n</mat-card>", dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatCardWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatCardWrapperComponent, isStandalone: true, selector: "cmat-card-wrapper", usesInheritance: true, ngImport: i0, template: "<mat-card class=\"dark:bg-white/5\">\r\n    @if(props.label){\r\n        <mat-card-title class=\"p-4\">{{ props.label }}</mat-card-title>\r\n    }\r\n    \r\n    <mat-card-content>\r\n        <ng-container #fieldComponent></ng-container>\r\n    </mat-card-content>    \r\n</mat-card>", dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatCardWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatCardWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-card-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatCardModule], template: "<mat-card class=\"dark:bg-white/5\">\r\n    @if(props.label){\r\n        <mat-card-title class=\"p-4\">{{ props.label }}</mat-card-title>\r\n    }\r\n    \r\n    <mat-card-content>\r\n        <ng-container #fieldComponent></ng-container>\r\n    </mat-card-content>    \r\n</mat-card>" }]
         }] });
 
 class CmatExpansionWrapperComponent extends FieldWrapper {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatExpansionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CmatExpansionWrapperComponent, isStandalone: true, selector: "cmat-expansion-wrapper", usesInheritance: true, ngImport: i0, template: "<mat-expansion-panel [expanded]=\"true\">\r\n    <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n            {{ to.label }}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n            {{ to.description }}\r\n        </mat-panel-description>\r\n    </mat-expansion-panel-header>\r\n    <ng-template #fieldComponent matExpansionPanelContent></ng-template>\r\n</mat-expansion-panel>", dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i1$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i1$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i1$1.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "directive", type: i1$1.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatExpansionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: CmatExpansionWrapperComponent, isStandalone: true, selector: "cmat-expansion-wrapper", usesInheritance: true, ngImport: i0, template: "<mat-expansion-panel [expanded]=\"true\">\r\n    <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n            {{ to.label }}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n            {{ to.description }}\r\n        </mat-panel-description>\r\n    </mat-expansion-panel-header>\r\n    <ng-template #fieldComponent matExpansionPanelContent></ng-template>\r\n</mat-expansion-panel>", dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i1$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i1$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i1$1.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "directive", type: i1$1.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatExpansionWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatExpansionWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-expansion-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatExpansionModule], template: "<mat-expansion-panel [expanded]=\"true\">\r\n    <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n            {{ to.label }}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n            {{ to.description }}\r\n        </mat-panel-description>\r\n    </mat-expansion-panel-header>\r\n    <ng-template #fieldComponent matExpansionPanelContent></ng-template>\r\n</mat-expansion-panel>" }]
         }] });
 
 class CmatPanelWrapperComponent extends FieldWrapper {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatPanelWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CmatPanelWrapperComponent, isStandalone: true, selector: "cmat-panel-wrapper", usesInheritance: true, ngImport: i0, template: "<h3 class=\"px-2\">{{ to.label }}</h3>\r\n<div>\r\n    <ng-container #fieldComponent></ng-container>\r\n</div>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatPanelWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: CmatPanelWrapperComponent, isStandalone: true, selector: "cmat-panel-wrapper", usesInheritance: true, ngImport: i0, template: "<h3 class=\"px-2\">{{ props.label }}</h3>\r\n<div>\r\n    <ng-container #fieldComponent></ng-container>\r\n</div>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatPanelWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatPanelWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-panel-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<h3 class=\"px-2\">{{ to.label }}</h3>\r\n<div>\r\n    <ng-container #fieldComponent></ng-container>\r\n</div>" }]
+            args: [{ selector: 'cmat-panel-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<h3 class=\"px-2\">{{ props.label }}</h3>\r\n<div>\r\n    <ng-container #fieldComponent></ng-container>\r\n</div>" }]
         }] });
 
 class CmatFormFieldWrapperComponent extends FieldWrapper {
     constructor() {
         super();
+        this.formField = viewChild.required(MatFormField);
         this._renderer = inject(Renderer2);
         this._elementRef = inject(ElementRef);
         this._focusMonitor = inject(FocusMonitor);
     }
     ngOnInit() {
-        _defineHiddenProp(this.field, '_formField', this.formField);
+        _defineHiddenProp(this.field, '_formField', this.formField());
         this._focusMonitor.monitor(this._elementRef, true).subscribe((origin) => {
             if (!origin && this.field.focus) {
                 this.field.focus = false;
@@ -215,9 +402,8 @@ class CmatFormFieldWrapperComponent extends FieldWrapper {
         });
     }
     ngAfterViewInit() {
-        if (this.formField.appearance !== 'outline' && this.props.hideFieldUnderline === true) {
-            const formFieldElement = this._elementRef.nativeElement;
-            const underlineElement = formFieldElement.querySelector('.mat-form-field-underline');
+        if (this.formField().appearance !== 'outline' && this.props.hideFieldUnderline === true) {
+            const underlineElement = this.formField()._elementRef.nativeElement.querySelector('.mat-form-field-underline');
             if (underlineElement?.parentNode) {
                 this._renderer.removeChild(underlineElement.parentNode, underlineElement);
             }
@@ -227,16 +413,13 @@ class CmatFormFieldWrapperComponent extends FieldWrapper {
         delete this.field._formField;
         this._focusMonitor.stopMonitoring(this._elementRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatFormFieldWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CmatFormFieldWrapperComponent, isStandalone: true, selector: "cmat-form-field-wrapper", viewQueries: [{ propertyName: "formField", first: true, predicate: MatFormField, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field [hideRequiredMarker]=\"true\" [floatLabel]=\"$any(props.floatLabel)\" [appearance]=\"$any(props.appearance)\"\r\n    [subscriptSizing]=\"$any(props.subscriptSizing)\" [color]=\"props.color ?? 'primary'\">\r\n    <ng-container #fieldComponent></ng-container>\r\n    @if(props.label && props.hideLabel !== true){\r\n    <mat-label>\r\n        {{ props.label }}\r\n        @if(props.required && props.hideRequiredMarker !== true){\r\n        <span aria-hidden=\"true\" class=\"mat-form-field-required-marker mat-mdc-form-field-required-marker\">*</span>\r\n        }\r\n    </mat-label>\r\n    }\r\n\r\n    @if(props.textPrefix){\r\n    <ng-container matTextPrefix>\r\n        <ng-container [ngTemplateOutlet]=\"props.textPrefix\" [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n    </ng-container>\r\n    }\r\n\r\n    @if(props.prefix){\r\n    <ng-container matPrefix>\r\n        <ng-container [ngTemplateOutlet]=\"props.prefix\" [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n    </ng-container>\r\n    }\r\n\r\n    @if(props.textSuffix){\r\n    <ng-container matTextSuffix>\r\n        <ng-container [ngTemplateOutlet]=\"props.textSuffix\" [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n    </ng-container>\r\n    }\r\n\r\n    @if(props.suffix){\r\n    <ng-container matSuffix>\r\n        <ng-container [ngTemplateOutlet]=\"props.suffix\" [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n    </ng-container>\r\n    }\r\n\r\n    @if(props.showValidationMessage){\r\n    <mat-error>\r\n        <formly-validation-message [field]=\"field\"></formly-validation-message>\r\n    </mat-error>\r\n    }\r\n\r\n    @if(props.description || props.hintStart){\r\n    <mat-hint>\r\n        <ng-container [ngTemplateOutlet]=\"stringOrTemplate\" [ngTemplateOutletContext]=\"{ content: props.description || props.hintStart }\">\r\n        </ng-container>\r\n    </mat-hint>\r\n    }\r\n\r\n    @if(props.hintEnd){\r\n    <mat-hint align=\"end\">\r\n        <ng-container [ngTemplateOutlet]=\"stringOrTemplate\" [ngTemplateOutletContext]=\"{ content: props.hintEnd }\">\r\n        </ng-container>\r\n    </mat-hint>\r\n    }\r\n</mat-form-field>\r\n\r\n<ng-template #stringOrTemplate let-content=\"content\">\r\n    @if(!content.createEmbeddedView){\r\n    <ng-container>{{ content }}</ng-container>\r\n    }@else {\r\n    <ng-container [ngTemplateOutlet]=\"content\" [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n    }\r\n</ng-template>", styles: ["cmat-form-field-wrapper .mat-mdc-form-field,cmat-form-field-wrapper .mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$3.LegacyFormlyValidationMessage, selector: "formly-validation-message" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatFormFieldWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatFormFieldWrapperComponent, isStandalone: true, selector: "cmat-form-field-wrapper", viewQueries: [{ propertyName: "formField", first: true, predicate: MatFormField, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field [hideRequiredMarker]=\"true\" [floatLabel]=\"$any(props.floatLabel)\" [appearance]=\"$any(props.appearance)\"\r\n    [subscriptSizing]=\"$any(props.subscriptSizing)\" [color]=\"props.color ?? 'primary'\">\r\n    <ng-container #fieldComponent></ng-container>\r\n    @if(props.label && props.hideLabel !== true){\r\n    <mat-label>\r\n        {{ props.label }}\r\n        @if(props.required && props.hideRequiredMarker !== true){\r\n        <span aria-hidden=\"true\" class=\"mat-form-field-required-marker mat-mdc-form-field-required-marker\">*</span>\r\n        }\r\n    </mat-label>\r\n    }\r\n\r\n    @if(props.textPrefix){\r\n    <ng-container matTextPrefix>\r\n        <ng-container [ngTemplateOutlet]=\"props.textPrefix\" [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n    </ng-container>\r\n    }\r\n\r\n    @if(props.prefix){\r\n    <ng-container matPrefix>\r\n        <ng-container [ngTemplateOutlet]=\"props.prefix\" [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n    </ng-container>\r\n    }\r\n\r\n    @if(props.textSuffix){\r\n    <ng-container matTextSuffix>\r\n        <ng-container [ngTemplateOutlet]=\"props.textSuffix\" [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n    </ng-container>\r\n    }\r\n\r\n    @if(props.suffix){\r\n    <ng-container matSuffix>\r\n        <ng-container [ngTemplateOutlet]=\"props.suffix\" [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n    </ng-container>\r\n    }\r\n\r\n    @if(props.showValidationMessage){\r\n    <mat-error>\r\n        <formly-validation-message [field]=\"field\"></formly-validation-message>\r\n    </mat-error>\r\n    }\r\n\r\n    @if(props.description || props.hintStart){\r\n    <mat-hint>\r\n        <ng-container [ngTemplateOutlet]=\"stringOrTemplate\" [ngTemplateOutletContext]=\"{ content: props.description || props.hintStart }\">\r\n        </ng-container>\r\n    </mat-hint>\r\n    }\r\n\r\n    @if(props.hintEnd){\r\n    <mat-hint align=\"end\">\r\n        <ng-container [ngTemplateOutlet]=\"stringOrTemplate\" [ngTemplateOutletContext]=\"{ content: props.hintEnd }\">\r\n        </ng-container>\r\n    </mat-hint>\r\n    }\r\n</mat-form-field>\r\n\r\n<ng-template #stringOrTemplate let-content=\"content\">\r\n    @if(!content.createEmbeddedView){\r\n    <ng-container>{{ content }}</ng-container>\r\n    }@else {\r\n    <ng-container [ngTemplateOutlet]=\"content\" [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n    }\r\n</ng-template>", styles: ["cmat-form-field-wrapper .mat-mdc-form-field,cmat-form-field-wrapper .mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$3.LegacyFormlyValidationMessage, selector: "formly-validation-message" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatFormFieldWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatFormFieldWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-form-field-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [MatFormFieldModule, ReactiveFormsModule, CommonModule, FormlyModule], template: "<mat-form-field [hideRequiredMarker]=\"true\" [floatLabel]=\"$any(props.floatLabel)\" [appearance]=\"$any(props.appearance)\"\r\n    [subscriptSizing]=\"$any(props.subscriptSizing)\" [color]=\"props.color ?? 'primary'\">\r\n    <ng-container #fieldComponent></ng-container>\r\n    @if(props.label && props.hideLabel !== true){\r\n    <mat-label>\r\n        {{ props.label }}\r\n        @if(props.required && props.hideRequiredMarker !== true){\r\n        <span aria-hidden=\"true\" class=\"mat-form-field-required-marker mat-mdc-form-field-required-marker\">*</span>\r\n        }\r\n    </mat-label>\r\n    }\r\n\r\n    @if(props.textPrefix){\r\n    <ng-container matTextPrefix>\r\n        <ng-container [ngTemplateOutlet]=\"props.textPrefix\" [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n    </ng-container>\r\n    }\r\n\r\n    @if(props.prefix){\r\n    <ng-container matPrefix>\r\n        <ng-container [ngTemplateOutlet]=\"props.prefix\" [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n    </ng-container>\r\n    }\r\n\r\n    @if(props.textSuffix){\r\n    <ng-container matTextSuffix>\r\n        <ng-container [ngTemplateOutlet]=\"props.textSuffix\" [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n    </ng-container>\r\n    }\r\n\r\n    @if(props.suffix){\r\n    <ng-container matSuffix>\r\n        <ng-container [ngTemplateOutlet]=\"props.suffix\" [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n    </ng-container>\r\n    }\r\n\r\n    @if(props.showValidationMessage){\r\n    <mat-error>\r\n        <formly-validation-message [field]=\"field\"></formly-validation-message>\r\n    </mat-error>\r\n    }\r\n\r\n    @if(props.description || props.hintStart){\r\n    <mat-hint>\r\n        <ng-container [ngTemplateOutlet]=\"stringOrTemplate\" [ngTemplateOutletContext]=\"{ content: props.description || props.hintStart }\">\r\n        </ng-container>\r\n    </mat-hint>\r\n    }\r\n\r\n    @if(props.hintEnd){\r\n    <mat-hint align=\"end\">\r\n        <ng-container [ngTemplateOutlet]=\"stringOrTemplate\" [ngTemplateOutletContext]=\"{ content: props.hintEnd }\">\r\n        </ng-container>\r\n    </mat-hint>\r\n    }\r\n</mat-form-field>\r\n\r\n<ng-template #stringOrTemplate let-content=\"content\">\r\n    @if(!content.createEmbeddedView){\r\n    <ng-container>{{ content }}</ng-container>\r\n    }@else {\r\n    <ng-container [ngTemplateOutlet]=\"content\" [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n    }\r\n</ng-template>", styles: ["cmat-form-field-wrapper .mat-mdc-form-field,cmat-form-field-wrapper .mat-form-field{width:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { formField: [{
-                type: ViewChild,
-                args: [MatFormField, { static: true }]
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { formField: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatFormField), { isSignal: true }] }] } });
 
 const DANGEROUS_PATTERNS = [
     /\bdocument\s*\./i,
@@ -254,7 +437,8 @@ class CmatButtonTypeComponent extends FieldType {
         super(...arguments);
         this.defaultOptions = {
             props: {
-                color: 'primary'
+                color: 'primary',
+                type: 'button'
             }
         };
     }
@@ -286,10 +470,10 @@ class CmatButtonTypeComponent extends FieldType {
             console.error('Error executing function from string:', error);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatButtonTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CmatButtonTypeComponent, isStandalone: true, selector: "cmat-button-type", usesInheritance: true, ngImport: i0, template: "<button class=\"print:hidden\" matButton=\"filled\" [type]=\"props.type\" [color]=\"props.color\" [disabled]=\"disabled\" (click)=\"onClick($event)\">\r\n    {{ props.label }}\r\n</button>", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatButtonTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: CmatButtonTypeComponent, isStandalone: true, selector: "cmat-button-type", usesInheritance: true, ngImport: i0, template: "<button class=\"print:hidden\" matButton=\"filled\" [type]=\"props.type\" [color]=\"props.color\" [disabled]=\"disabled\" (click)=\"onClick($event)\">\r\n    {{ props.label }}\r\n</button>", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatButtonTypeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatButtonTypeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-button-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule], template: "<button class=\"print:hidden\" matButton=\"filled\" [type]=\"props.type\" [color]=\"props.color\" [disabled]=\"disabled\" (click)=\"onClick($event)\">\r\n    {{ props.label }}\r\n</button>" }]
         }] });
@@ -304,269 +488,427 @@ class CmatCascadeTypeComponent extends FieldType {
                 changeOnSelect: false
             },
         };
-        this.urlData = [];
-        this.isHandSet = signal(false, ...(ngDevMode ? [{ debugName: "isHandSet" }] : /* istanbul ignore next */ []));
-        this.refreshVersion = signal(0, ...(ngDevMode ? [{ debugName: "refreshVersion" }] : /* istanbul ignore next */ []));
-        this._http = inject(HttpClient);
+        this.urlData = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "urlData" }] : /* istanbul ignore next */ []));
         this._cmatMediaWatcherService = inject(CmatMediaWatcherService);
+        // eslint-disable-next-line @typescript-eslint/member-ordering
+        this.isHandSet = computed(() => {
+            return !this._cmatMediaWatcherService.mediaChange().matchingAliases.includes('lg');
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isHandSet" }] : /* istanbul ignore next */ []));
+        this._lastDomain = undefined;
         this._destroyRef = inject(DestroyRef);
+        this._domainDataService = inject(DomainDataService);
     }
     ngOnInit() {
-        const url = this.props?.domain?.url;
-        if (url && this.props?.domain?.code && this.props?.domain?.key && this.props?.domain?.value) {
-            this._http.get(url).pipe(takeUntilDestroyed(this._destroyRef)).subscribe((data) => {
-                if (data) {
-                    const key = this.field.props?.domain?.key;
-                    const code = this.field.props?.domain?.code;
-                    const datas = data.filter((i) => {
-                        if (key)
-                            return i[key] === code;
-                        return false;
-                    });
-                    if (datas && this.field.props?.domain?.value) {
-                        this.urlData = datas[0][this.field.props?.domain?.value];
-                    }
-                    else {
-                        this.urlData = [];
-                    }
-                }
-                else {
-                    this.urlData = [];
-                }
-                this.refreshVersion.update(value => value + 1);
-            });
-        }
-        else {
-            this.urlData = [];
-            this.refreshVersion.update(value => value + 1);
-        }
-        this._cmatMediaWatcherService.onMediaChange$
-            .pipe(takeUntilDestroyed(this._destroyRef))
-            .subscribe(({ matchingAliases }) => {
-            this.isHandSet.set(!matchingAliases.includes('lg'));
-            this.refreshVersion.update(value => value + 1);
+        this._lastDomain = this.props.domain;
+        this._refreshData();
+    }
+    ngDoCheck() {
+        const currentDomain = this.props.domain;
+        let shouldRefresh = false;
+        // 1. 检查 domain 变化
+        if (!isEqual(currentDomain, this._lastDomain)) {
+            this._lastDomain = currentDomain;
+            shouldRefresh = true;
+        }
+        if (shouldRefresh) {
+            this._refreshData();
+        }
+    }
+    _refreshData() {
+        const domain = this.props.domain;
+        // 使用 DomainDataService 加载远程数据
+        this._domainDataService.load(domain, this._destroyRef, {
+            onSuccess: data => this.urlData.set(data),
+            componentName: 'CmatCascadeTypeComponent'
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatCascadeTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CmatCascadeTypeComponent, isStandalone: true, selector: "cmat-cascade-type", usesInheritance: true, ngImport: i0, template: "<cmat-cascade-list [formControl]=\"formControl\" [clearable]=\"props.clearable\" [fullLevels]=\"props.fullLevels\"\r\n    [changeOnSelect]=\"props.changeOnSelect\" [placeholder]=\"placeholder\" [options]=\"urlData\" [tabIndex]=\"props.tabindex\"\r\n    [required]=\"required\" [touchUi]=\"isHandSet()\" [attr.data-refresh]=\"refreshVersion()\"></cmat-cascade-list>\r\n", styles: [":host{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CmatCascadeListComponent, selector: "cmat-cascade-list", inputs: ["id", "options", "clearable", "fullLevels", "changeOnSelect", "allowLabelValue", "touchUi", "placeholder", "value", "required", "disabled"], exportAs: ["cmatCascadeList"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatCascadeTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: CmatCascadeTypeComponent, isStandalone: true, selector: "cmat-cascade-type", usesInheritance: true, ngImport: i0, template: "<cmat-cascade-list [formControl]=\"formControl\" [clearable]=\"props.clearable\" [fullLevels]=\"props.fullLevels\"\r\n    [changeOnSelect]=\"props.changeOnSelect\" [placeholder]=\"placeholder\" [options]=\"urlData()\" [tabIndex]=\"props.tabindex\"\r\n    [required]=\"required\" [touchUi]=\"isHandSet()\"></cmat-cascade-list>\r\n", styles: [":host{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CmatCascadeListComponent, selector: "cmat-cascade-list", inputs: ["options", "clearable", "fullLevels", "changeOnSelect", "allowLabelValue", "touchUi", "placeholder", "disabled", "required", "value"], exportAs: ["cmatCascadeList"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatCascadeTypeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatCascadeTypeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-cascade-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, CmatCascadeListComponent], template: "<cmat-cascade-list [formControl]=\"formControl\" [clearable]=\"props.clearable\" [fullLevels]=\"props.fullLevels\"\r\n    [changeOnSelect]=\"props.changeOnSelect\" [placeholder]=\"placeholder\" [options]=\"urlData\" [tabIndex]=\"props.tabindex\"\r\n    [required]=\"required\" [touchUi]=\"isHandSet()\" [attr.data-refresh]=\"refreshVersion()\"></cmat-cascade-list>\r\n", styles: [":host{width:100%}\n"] }]
+            args: [{ selector: 'cmat-cascade-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, CmatCascadeListComponent], template: "<cmat-cascade-list [formControl]=\"formControl\" [clearable]=\"props.clearable\" [fullLevels]=\"props.fullLevels\"\r\n    [changeOnSelect]=\"props.changeOnSelect\" [placeholder]=\"placeholder\" [options]=\"urlData()\" [tabIndex]=\"props.tabindex\"\r\n    [required]=\"required\" [touchUi]=\"isHandSet()\"></cmat-cascade-list>\r\n", styles: [":host{width:100%}\n"] }]
         }], ctorParameters: () => [] });
 
 class CmatCheckListTypeComponent extends FieldType {
     constructor() {
         super();
-        this.isIndeterminate = false;
-        this.isChecked = false;
-        this.urlData = [];
-        this.optionsData = [];
-        this.checklist = [];
-        this.filteredData = [];
-        this._http = inject(HttpClient);
+        this.isIndeterminate = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isIndeterminate" }] : /* istanbul ignore next */ []));
+        this.isChecked = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isChecked" }] : /* istanbul ignore next */ []));
+        this.urlData = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "urlData" }] : /* istanbul ignore next */ []));
+        this.optionsData = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "optionsData" }] : /* istanbul ignore next */ []));
+        this.checklist = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "checklist" }] : /* istanbul ignore next */ []));
+        this.filteredItems = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
+        // 响应式数据源
+        this.datas = computed(() => {
+            if (this.urlData().length > 0) {
+                return this.urlData();
+            }
+            return this.optionsData() || [];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "datas" }] : /* istanbul ignore next */ []));
+        // 响应式过滤数据
+        this.filteredData = computed(() => {
+            const currentDatas = this.datas();
+            const query = this._filterQuery();
+            if (!query) {
+                return currentDatas;
+            }
+            return currentDatas.filter((data) => this._toSearchText(data.value).toLowerCase().includes(query.toLowerCase()) ||
+                this._toSearchText(data.label).toLowerCase().includes(query.toLowerCase()));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filteredData" }] : /* istanbul ignore next */ []));
+        this._lastDomain = undefined;
+        this._lastOptions = undefined;
         this._destroyRef = inject(DestroyRef);
-        this._filteredItems = signal(null, ...(ngDevMode ? [{ debugName: "_filteredItems" }] : /* istanbul ignore next */ []));
-        this._filteredItems$ = toObservable(this._filteredItems);
-    }
-    get filteredItems$() {
-        return this._filteredItems$;
-    }
-    get datas() {
-        if (isArray(this.field.props?.options)) {
-            return this.urlData?.length > 0 ? this.urlData : this.field.props?.options ?? [];
-        }
-        else {
-            return this.urlData?.length > 0 ? this.urlData : this.optionsData || [];
-        }
+        this._domainDataService = inject(DomainDataService);
+        this._filterQuery = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_filterQuery" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
-        if (this.field.props?.options && !isArray(this.field.props?.options)) {
-            this.field.props?.options.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((data) => {
-                this.optionsData = data;
-            });
-        }
-        const url = this.field.props?.domain?.url;
-        if (url && this.field.props?.domain?.code && this.field.props?.domain?.key && this.field.props?.domain?.value) {
-            this._http.get(url).pipe(takeUntilDestroyed(this._destroyRef)).subscribe((data) => {
-                if (data) {
-                    const key = this.field.props?.domain?.key;
-                    const code = this.field.props?.domain?.code;
-                    const datas = data.filter((i) => {
-                        if (key)
-                            return i[key] === code;
-                        return false;
-                    });
-                    if (datas && this.field.props?.domain?.value) {
-                        this.urlData = datas[0][this.field.props?.domain?.value] ?? [];
-                    }
-                    else {
-                        this.urlData = [];
-                    }
-                }
-                else {
-                    this.urlData = [];
-                }
-                this.filteredData = this.datas;
-                this._filteredItems.set(this.filteredData);
-            });
-        }
-        else {
-            this.urlData = [];
-            this.filteredData = this.datas;
-            this._filteredItems.set(this.filteredData);
-        }
+        this._lastDomain = this.props.domain;
+        this._lastOptions = this.field.props?.options;
+        this._refreshData();
+        this._refreshFilteredData();
         this.formControl.valueChanges.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((value) => {
-            this.checklist = (value ?? []);
+            const newVal = (value ?? []);
+            this.checklist.set(newVal);
             this._getAllCheckCountState();
         });
     }
+    ngDoCheck() {
+        const currentDomain = this.props.domain;
+        const currentOptions = this.field.props?.options;
+        let shouldRefresh = false;
+        // 1. 检查 domain 变化
+        if (!isEqual(currentDomain, this._lastDomain)) {
+            this._lastDomain = currentDomain;
+            shouldRefresh = true;
+        }
+        // 2. 检查 options 变化 (仅当 domain 未配置时，options 才生效，但为了稳妥，只要变了就更新)
+        // 注意：如果 domain 存在，urlData 优先级更高，但更新 optionsData 也无妨，因为 allOptions computed 会优先取 urlData
+        if (!isEqual(currentOptions, this._lastOptions)) {
+            this._lastOptions = currentOptions;
+            shouldRefresh = true;
+        }
+        if (shouldRefresh) {
+            this._refreshData();
+        }
+    }
     trackByFn(index, item) {
-        return item.id ?? index;
+        return item.id ?? item.value ?? index;
     }
     filterByQuery(event) {
         const query = typeof event === 'string' ? event : event.target?.value ?? '';
-        const normalizedQuery = query.toLowerCase();
-        this.filteredData = this.datas.filter((data) => this._toSearchText(data.value).toLowerCase().includes(normalizedQuery) || this._toSearchText(data.label).toLowerCase().includes(normalizedQuery));
-        this._filteredItems.set(this.filteredData);
+        this._filterQuery.set(query.toLowerCase());
         this._getAllCheckCountState();
     }
     toggleCheckList(data, event) {
         event.preventDefault();
         if (data.disabled || this.props.disabled)
             return;
-        const index = this.checklist.findIndex(item => item.value === data.value);
-        if (index > -1) {
-            this.checklist.splice(index, 1);
-        }
-        else {
-            this.checklist = [...this.checklist, data];
-        }
-        this.formControl.setValue(this.checklist);
+        this.checklist.update((currentList) => {
+            const index = currentList.findIndex(item => item.value === data.value);
+            let newList;
+            if (index > -1) {
+                newList = currentList.filter(item => item.value !== data.value);
+            }
+            else {
+                newList = [...currentList, data];
+            }
+            return newList;
+        });
+        // 同步表单值
+        this.formControl.setValue(this.checklist());
+        this._getAllCheckCountState();
     }
     allCheckChange(check) {
+        const itemsToAdd = this.filteredData().filter((t) => {
+            const index = this.checklist().findIndex(item => item.value === t.value);
+            return index < 0 && !t.disabled;
+        });
         if (check) {
-            const itemsToAdd = this.filteredData.filter((t) => {
-                const index = this.checklist.findIndex(item => item.value === t.value);
-                return index < 0 && !t.disabled;
-            });
-            this.checklist = [...this.checklist, ...itemsToAdd];
+            this.checklist.set([...this.checklist(), ...itemsToAdd]);
         }
         else {
-            this.checklist = this.checklist.filter((item) => {
-                const existsInFiltered = this.filteredData.some(t => t.value === item.value);
-                const shouldRemove = existsInFiltered && this.filteredData.find(t => t.value === item.value)?.disabled === false;
+            this.checklist.set(this.checklist().filter((item) => {
+                const existsInFiltered = this.filteredData().some(t => t.value === item.value);
+                const shouldRemove = existsInFiltered && this.filteredData().find(t => t.value === item.value)?.disabled === false;
                 return !shouldRemove;
-            });
+            }));
         }
-        this.formControl.setValue(this.checklist);
+        this.formControl.setValue(this.checklist());
+        this._getAllCheckCountState();
     }
     isCheck(data) {
-        const selected = (this.formControl.value ?? []);
-        return selected.filter((i) => i.value === data.value).length > 0;
+        const selected = this.checklist();
+        return selected.some((i) => i.value === data.value);
+    }
+    _refreshFilteredData() {
+        this.filteredItems.set(this.filteredData());
+        this._getAllCheckCountState();
     }
     _getAllCheckCountState() {
-        if (this.props.showAllCheck && !this.props.disabled) {
-            let allCheckCount = 0;
-            if (this.checklist?.length > 0) {
-                this.filteredData.forEach((t) => {
-                    const index = this.checklist.findIndex(item => item.value === t.value && !t.disabled);
-                    if (index > -1) {
-                        allCheckCount += 1;
-                    }
-                });
-                if (this.filteredData.filter(i => !i.disabled).length === allCheckCount) {
-                    this.isChecked = true;
-                    this.isIndeterminate = false;
-                }
-                else if (allCheckCount === 0) {
-                    this.isChecked = false;
-                    this.isIndeterminate = false;
-                }
-                else {
-                    this.isChecked = false;
-                    this.isIndeterminate = true;
-                }
-            }
-            else {
-                this.checklist = [];
-                this.isChecked = false;
-                this.isIndeterminate = false;
-            }
+        if (!this.props.showAllCheck || this.props.disabled)
+            return;
+        const currentChecklist = this.checklist();
+        const currentFiltered = this.filteredData();
+        const enabledFilteredItems = currentFiltered.filter(i => !i.disabled);
+        const totalEnabled = enabledFilteredItems.length;
+        if (totalEnabled === 0) {
+            this.isChecked.set(false);
+            this.isIndeterminate.set(false);
+            return;
+        }
+        const allCheckCount = enabledFilteredItems.filter(t => currentChecklist.some(item => item.value === t.value)).length;
+        if (allCheckCount === 0) {
+            this.isChecked.set(false);
+            this.isIndeterminate.set(false);
+        }
+        else if (allCheckCount === totalEnabled) {
+            this.isChecked.set(true);
+            this.isIndeterminate.set(false);
+        }
+        else {
+            this.isChecked.set(false);
+            this.isIndeterminate.set(true);
         }
     }
     _toSearchText(value) {
         return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' ? String(value) : '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatCheckListTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CmatCheckListTypeComponent, isStandalone: true, selector: "cmat-checklist-type", usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col\">\r\n  <div class=\"p-2\">\r\n    @if(props.label){\r\n    <legend class=\"text-lg\">\r\n      {{ props.label }}\r\n      @if(props.required){\r\n      <span>*</span>\r\n      }\r\n    </legend>\r\n    }\r\n    @if(props.description){\r\n    <p>{{ props.description }}</p>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"w-full h-full rounded-sm border shadow-sm bg-card\" [tabIndex]=\"props.tabindex\">\r\n    <div class=\"flex items-center m-1 mr-2 min-h-12 print:hidden\">\r\n      @if (props.showAllCheck&&!props.disabled) {\r\n      <div>\r\n        <mat-checkbox class=\"flex items-center h-10 min-h-10 m-1\" [color]=\"'primary'\" [checked]=\"isChecked\"\r\n          [indeterminate]=\"isIndeterminate\" (change)=\"allCheckChange($event.checked)\">\r\n        </mat-checkbox>\r\n      </div>\r\n      }\r\n      <div class=\"flex items-center w-full\">\r\n        <mat-icon class=\"icon-size-5\" [svgIcon]=\"'heroicons_solid:magnifying-glass'\"></mat-icon>\r\n        <div class=\"ml-2\">\r\n          <input #query class=\"w-full min-w-0 py-1 border-none\" type=\"text\"\r\n            placeholder=\"\u8F93\u5165\u8FC7\u6EE4\u4FE1\u606F\" (input)=\"filterByQuery(query.value)\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"border-t overflow-y-auto scrollbar-custom\"\r\n      [ngClass]=\"props.controlMaxHeight?'max-h-64 sm:max-h-128 lg:max-h-64':''\">\r\n      @if ((filteredItems$ | async); as filteredItems) {\r\n      @if(filteredItems.length>0){\r\n      @for (data of filteredItems; track trackByFn($index, data)) {\r\n      <div role=\"presentation\" class=\"flex items-center pl-2 pr-4 py-2 cursor-pointer hover:bg-hover\" matRipple\r\n        (click)=\"toggleCheckList(data,$event)\">\r\n        <mat-checkbox class=\"flex items-center h-10 min-h-10 pointer-events-none\" disableRipple [color]=\"'primary'\"\r\n          [checked]=\"isCheck(data)\" [disabled]=\"data.disabled||props.disabled\">\r\n          <div class=\"flex flex-col flex-auto\">\r\n            <div class=\"font-medium leading-5 truncate\">{{data.label}}</div>\r\n          </div>\r\n        </mat-checkbox>\r\n      </div>\r\n      }\r\n      } @else {\r\n      <div\r\n        class=\"flex flex-auto flex-col items-center justify-center bg-slate-100 dark:bg-transparent h-64 sm:h-128 lg:h-64\">\r\n        <mat-icon class=\"icon-size-24\" [svgIcon]=\"'heroicons_outline:document-magnifying-glass'\"></mat-icon>\r\n        <div class=\"mt-4 text-2xl font-bold tracking-tight text-secondary\">\u6CA1\u6709\u6570\u636E!</div>\r\n      </div>\r\n      }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i3$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    _refreshData() {
+        const domain = this.props.domain;
+        // 使用 DomainDataService 加载远程数据
+        this._domainDataService.load(domain, this._destroyRef, {
+            onSuccess: (data) => {
+                this.urlData.set(data);
+                this._refreshFilteredData();
+            },
+            componentName: 'CmatCheckListTypeComponent'
+        });
+        // 处理静态 options
+        if (!domain?.url && this.field.props?.options && isArray(this.field.props?.options)) {
+            this.optionsData.set(this.field.props.options || []);
+        }
+        else if (!domain?.url) {
+            this.optionsData.set([]);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatCheckListTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatCheckListTypeComponent, isStandalone: true, selector: "cmat-checklist-type", usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col\">\r\n  <div class=\"p-2\">\r\n    @if(props.label){\r\n    <legend class=\"text-lg\">\r\n      {{ props.label }}\r\n      @if(props.required){\r\n      <span>*</span>\r\n      }\r\n    </legend>\r\n    }\r\n    @if(props.description){\r\n    <p>{{ props.description }}</p>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"w-full h-full rounded-sm border shadow-sm bg-card\" [tabIndex]=\"props.tabindex\">\r\n    <div class=\"flex items-center m-1 mr-2 min-h-12 print:hidden\">\r\n      @if (props.showAllCheck&&!props.disabled) {\r\n      <div>\r\n        <mat-checkbox class=\"flex items-center h-10 min-h-10 m-1\" [color]=\"'primary'\" [checked]=\"isChecked()\"\r\n          [indeterminate]=\"isIndeterminate()\" (change)=\"allCheckChange($event.checked)\">\r\n        </mat-checkbox>\r\n      </div>\r\n      }\r\n      <div class=\"flex items-center w-full\">\r\n        <mat-icon class=\"icon-size-5\" [svgIcon]=\"'heroicons_solid:magnifying-glass'\"></mat-icon>\r\n        <div class=\"ml-2\">\r\n          <input #query class=\"w-full min-w-0 py-1 border-none\" type=\"text\" placeholder=\"\u8F93\u5165\u8FC7\u6EE4\u4FE1\u606F\"\r\n            [disabled]=\"props.disabled\"\r\n            (input)=\"filterByQuery(query.value)\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"flex flex-col border-t overflow-y-auto scrollbar-custom\"\r\n      [ngClass]=\"props.controlMaxHeight?'max-h-64 sm:max-h-128 lg:max-h-64':'flex-auto'\">\r\n      @if (filteredItems()) {\r\n      @if(filteredItems()!.length>0){\r\n      @for (data of filteredItems(); track trackByFn($index, data)) {\r\n      <div role=\"presentation\" class=\"flex items-center pl-2 pr-4 py-2 h-15 w-full\" matRipple [matRippleDisabled]=\"disabled\"\r\n        [ngClass]=\"{'cursor-pointer hover:bg-hover': !disabled}\" (click)=\"toggleCheckList(data,$event)\">\r\n        <mat-checkbox class=\"flex items-center h-10 min-h-10 pointer-events-none\" disableRipple [color]=\"'primary'\"\r\n          [checked]=\"isCheck(data)\" [disabled]=\"data.disabled||props.disabled\">\r\n          <div class=\"flex flex-col flex-auto\">\r\n            <div class=\"font-medium leading-5 truncate\">{{data.label}}</div>\r\n          </div>\r\n        </mat-checkbox>\r\n      </div>\r\n      }\r\n      } @else {\r\n      <div\r\n        class=\"flex flex-auto flex-col items-center justify-center bg-slate-100 dark:bg-transparent h-64 sm:h-128 lg:h-64\">\r\n        <mat-icon class=\"icon-size-24\" [svgIcon]=\"'heroicons_outline:document-magnifying-glass'\"></mat-icon>\r\n        <div class=\"mt-4 text-2xl font-bold tracking-tight text-secondary\">\u6CA1\u6709\u6570\u636E!</div>\r\n      </div>\r\n      }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>", styles: [":host{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i3$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatCheckListTypeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatCheckListTypeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-checklist-type', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatCheckboxModule, MatIconModule, NgClass, MatRippleModule, AsyncPipe], template: "<div class=\"flex flex-col\">\r\n  <div class=\"p-2\">\r\n    @if(props.label){\r\n    <legend class=\"text-lg\">\r\n      {{ props.label }}\r\n      @if(props.required){\r\n      <span>*</span>\r\n      }\r\n    </legend>\r\n    }\r\n    @if(props.description){\r\n    <p>{{ props.description }}</p>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"w-full h-full rounded-sm border shadow-sm bg-card\" [tabIndex]=\"props.tabindex\">\r\n    <div class=\"flex items-center m-1 mr-2 min-h-12 print:hidden\">\r\n      @if (props.showAllCheck&&!props.disabled) {\r\n      <div>\r\n        <mat-checkbox class=\"flex items-center h-10 min-h-10 m-1\" [color]=\"'primary'\" [checked]=\"isChecked\"\r\n          [indeterminate]=\"isIndeterminate\" (change)=\"allCheckChange($event.checked)\">\r\n        </mat-checkbox>\r\n      </div>\r\n      }\r\n      <div class=\"flex items-center w-full\">\r\n        <mat-icon class=\"icon-size-5\" [svgIcon]=\"'heroicons_solid:magnifying-glass'\"></mat-icon>\r\n        <div class=\"ml-2\">\r\n          <input #query class=\"w-full min-w-0 py-1 border-none\" type=\"text\"\r\n            placeholder=\"\u8F93\u5165\u8FC7\u6EE4\u4FE1\u606F\" (input)=\"filterByQuery(query.value)\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"border-t overflow-y-auto scrollbar-custom\"\r\n      [ngClass]=\"props.controlMaxHeight?'max-h-64 sm:max-h-128 lg:max-h-64':''\">\r\n      @if ((filteredItems$ | async); as filteredItems) {\r\n      @if(filteredItems.length>0){\r\n      @for (data of filteredItems; track trackByFn($index, data)) {\r\n      <div role=\"presentation\" class=\"flex items-center pl-2 pr-4 py-2 cursor-pointer hover:bg-hover\" matRipple\r\n        (click)=\"toggleCheckList(data,$event)\">\r\n        <mat-checkbox class=\"flex items-center h-10 min-h-10 pointer-events-none\" disableRipple [color]=\"'primary'\"\r\n          [checked]=\"isCheck(data)\" [disabled]=\"data.disabled||props.disabled\">\r\n          <div class=\"flex flex-col flex-auto\">\r\n            <div class=\"font-medium leading-5 truncate\">{{data.label}}</div>\r\n          </div>\r\n        </mat-checkbox>\r\n      </div>\r\n      }\r\n      } @else {\r\n      <div\r\n        class=\"flex flex-auto flex-col items-center justify-center bg-slate-100 dark:bg-transparent h-64 sm:h-128 lg:h-64\">\r\n        <mat-icon class=\"icon-size-24\" [svgIcon]=\"'heroicons_outline:document-magnifying-glass'\"></mat-icon>\r\n        <div class=\"mt-4 text-2xl font-bold tracking-tight text-secondary\">\u6CA1\u6709\u6570\u636E!</div>\r\n      </div>\r\n      }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{width:100%}\n"] }]
+            args: [{ selector: 'cmat-checklist-type', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatCheckboxModule, MatIconModule, NgClass, MatRippleModule], template: "<div class=\"flex flex-col\">\r\n  <div class=\"p-2\">\r\n    @if(props.label){\r\n    <legend class=\"text-lg\">\r\n      {{ props.label }}\r\n      @if(props.required){\r\n      <span>*</span>\r\n      }\r\n    </legend>\r\n    }\r\n    @if(props.description){\r\n    <p>{{ props.description }}</p>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"w-full h-full rounded-sm border shadow-sm bg-card\" [tabIndex]=\"props.tabindex\">\r\n    <div class=\"flex items-center m-1 mr-2 min-h-12 print:hidden\">\r\n      @if (props.showAllCheck&&!props.disabled) {\r\n      <div>\r\n        <mat-checkbox class=\"flex items-center h-10 min-h-10 m-1\" [color]=\"'primary'\" [checked]=\"isChecked()\"\r\n          [indeterminate]=\"isIndeterminate()\" (change)=\"allCheckChange($event.checked)\">\r\n        </mat-checkbox>\r\n      </div>\r\n      }\r\n      <div class=\"flex items-center w-full\">\r\n        <mat-icon class=\"icon-size-5\" [svgIcon]=\"'heroicons_solid:magnifying-glass'\"></mat-icon>\r\n        <div class=\"ml-2\">\r\n          <input #query class=\"w-full min-w-0 py-1 border-none\" type=\"text\" placeholder=\"\u8F93\u5165\u8FC7\u6EE4\u4FE1\u606F\"\r\n            [disabled]=\"props.disabled\"\r\n            (input)=\"filterByQuery(query.value)\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"flex flex-col border-t overflow-y-auto scrollbar-custom\"\r\n      [ngClass]=\"props.controlMaxHeight?'max-h-64 sm:max-h-128 lg:max-h-64':'flex-auto'\">\r\n      @if (filteredItems()) {\r\n      @if(filteredItems()!.length>0){\r\n      @for (data of filteredItems(); track trackByFn($index, data)) {\r\n      <div role=\"presentation\" class=\"flex items-center pl-2 pr-4 py-2 h-15 w-full\" matRipple [matRippleDisabled]=\"disabled\"\r\n        [ngClass]=\"{'cursor-pointer hover:bg-hover': !disabled}\" (click)=\"toggleCheckList(data,$event)\">\r\n        <mat-checkbox class=\"flex items-center h-10 min-h-10 pointer-events-none\" disableRipple [color]=\"'primary'\"\r\n          [checked]=\"isCheck(data)\" [disabled]=\"data.disabled||props.disabled\">\r\n          <div class=\"flex flex-col flex-auto\">\r\n            <div class=\"font-medium leading-5 truncate\">{{data.label}}</div>\r\n          </div>\r\n        </mat-checkbox>\r\n      </div>\r\n      }\r\n      } @else {\r\n      <div\r\n        class=\"flex flex-auto flex-col items-center justify-center bg-slate-100 dark:bg-transparent h-64 sm:h-128 lg:h-64\">\r\n        <mat-icon class=\"icon-size-24\" [svgIcon]=\"'heroicons_outline:document-magnifying-glass'\"></mat-icon>\r\n        <div class=\"mt-4 text-2xl font-bold tracking-tight text-secondary\">\u6CA1\u6709\u6570\u636E!</div>\r\n      </div>\r\n      }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>", styles: [":host{width:100%}\n"] }]
         }], ctorParameters: () => [] });
 
 class CmatChipsInputTypeComponent extends FieldType {
     constructor() {
         super();
-        this.autocompleteUrlData = [];
-        this._http = inject(HttpClient);
+        this.urlData = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "urlData" }] : /* istanbul ignore next */ []));
+        this.autocompleteOptions = computed(() => {
+            const data = this.urlData();
+            if (data && data.length > 0) {
+                return data.filter((item) => typeof item === 'string');
+            }
+            const staticText = this.props?.autocompleteText;
+            if (staticText) {
+                return staticText.split(',').map(s => s.trim()).filter(s => s.length > 0);
+            }
+            return [];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "autocompleteOptions" }] : /* istanbul ignore next */ []));
+        this._lastDomain = undefined;
         this._destroyRef = inject(DestroyRef);
-    }
-    get autocompleteText() {
-        if (this.autocompleteUrlData?.length > 0) {
-            // Ensure all elements are strings, filter out non-strings
-            return this.autocompleteUrlData.filter((item) => typeof item === 'string');
-        }
-        return this.props?.autocompleteText?.split(',') ?? [];
+        this._domainDataService = inject(DomainDataService);
     }
     ngOnInit() {
-        const url = this.props?.domain?.url;
-        if (url && this.props?.domain?.code && this.props?.domain?.key && this.props?.domain?.value) {
-            this._http.get(url).pipe(takeUntilDestroyed(this._destroyRef)).subscribe((data) => {
-                if (data) {
-                    const key = this.field.props?.domain?.key;
-                    const code = this.field.props?.domain?.code;
-                    const datas = data
-                        .filter((i) => typeof i === 'object' && i !== null)
-                        .filter((i) => {
-                        if (key)
-                            return i[key] === code;
-                        return false;
+        this._lastDomain = this.props.domain;
+        this._refreshData();
+    }
+    ngDoCheck() {
+        const currentDomain = this.props.domain;
+        let shouldRefresh = false;
+        if (!isEqual(currentDomain, this._lastDomain)) {
+            this._lastDomain = currentDomain;
+            shouldRefresh = true;
+        }
+        if (shouldRefresh) {
+            this._refreshData();
+        }
+    }
+    _refreshData() {
+        const domain = this.props.domain;
+        // 使用 DomainDataService 加载远程数据
+        this._domainDataService.load(domain, this._destroyRef, {
+            transform: (rawData) => {
+                // Chips 特殊处理：支持字符串数组或逗号分隔的字符串
+                if (rawData.length > 0 && typeof rawData[0] === 'string') {
+                    return rawData;
+                }
+                else if (rawData.length > 0 && typeof rawData[0] === 'object' && rawData[0] !== null) {
+                    // 如果是对象数组，尝试提取 label/name/text 字段
+                    return rawData.map((item) => {
+                        const obj = item;
+                        return (obj.label ?? obj.name ?? obj.text ?? obj.value ?? item);
                     });
-                    if (datas && this.field.props?.domain?.value) {
-                        this.autocompleteUrlData = [datas[0][this.field.props?.domain?.value]];
-                    }
-                    else {
-                        this.autocompleteUrlData = [];
-                    }
+                }
+                return rawData;
+            },
+            onSuccess: (data) => {
+                // 如果提取的是字符串，转换为数组
+                if (data.length === 1 && typeof data[0] === 'string') {
+                    this.urlData.set((data[0]).split(',').map(s => s.trim()));
                 }
                 else {
-                    this.autocompleteUrlData = [];
+                    this.urlData.set(data);
                 }
-            });
-        }
-        else {
-            this.autocompleteUrlData = [];
-        }
+            },
+            componentName: 'CmatChipsInputTypeComponent'
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatChipsInputTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CmatChipsInputTypeComponent, isStandalone: true, selector: "cmat-chips-input-type", usesInheritance: true, ngImport: i0, template: "<cmat-chip-input [hasAutocomplete]=\"props.hasAutocomplete??false\" [formControl]=\"formControl\"\r\n    [placeholder]=\"placeholder\" [selectableOptions]=\"autocompleteText\" [tabIndex]=\"props.tabindex\" [required]=\"required\"></cmat-chip-input>", styles: [":host{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CmatChipInputComponent, selector: "cmat-chip-input", inputs: ["id", "selectableOptions", "hasAutocomplete", "outputIsString", "separatorKey", "placeholder", "value", "required", "disabled"], exportAs: ["cmatChipInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatChipsInputTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: CmatChipsInputTypeComponent, isStandalone: true, selector: "cmat-chips-input-type", usesInheritance: true, ngImport: i0, template: "<cmat-chip-input \r\n    [hasAutocomplete]=\"props.hasAutocomplete ?? false\" \r\n    [formControl]=\"formControl\"\r\n    [selectableOptions]=\"autocompleteOptions()\" \r\n    [tabIndex]=\"props.tabindex\" \r\n    [required]=\"required\">\r\n</cmat-chip-input>", styles: [":host{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CmatChipInputComponent, selector: "cmat-chip-input", inputs: ["selectableOptions", "hasAutocomplete", "outputIsString", "separatorKey", "placeholder", "value", "required", "disabled"], exportAs: ["cmatChipInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatChipsInputTypeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatChipsInputTypeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-chips-input-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, CmatChipInputComponent], template: "<cmat-chip-input [hasAutocomplete]=\"props.hasAutocomplete??false\" [formControl]=\"formControl\"\r\n    [placeholder]=\"placeholder\" [selectableOptions]=\"autocompleteText\" [tabIndex]=\"props.tabindex\" [required]=\"required\"></cmat-chip-input>", styles: [":host{width:100%}\n"] }]
+            args: [{ selector: 'cmat-chips-input-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, CmatChipInputComponent], template: "<cmat-chip-input \r\n    [hasAutocomplete]=\"props.hasAutocomplete ?? false\" \r\n    [formControl]=\"formControl\"\r\n    [selectableOptions]=\"autocompleteOptions()\" \r\n    [tabIndex]=\"props.tabindex\" \r\n    [required]=\"required\">\r\n</cmat-chip-input>", styles: [":host{width:100%}\n"] }]
         }], ctorParameters: () => [] });
 
 class CmatColorPickerTypeComponent extends FieldType$1 {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatColorPickerTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CmatColorPickerTypeComponent, isStandalone: true, selector: "cmat-color-picker-type", usesInheritance: true, ngImport: i0, template: "<cmat-material-color-picker [title]=\"props.label??''\" [formControl]=\"formControl\" [readonly]=\"disabled\"\r\n    [tabindex]=\"props.tabindex\"></cmat-material-color-picker>", styles: [":host{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CmatMaterialColorPickerComponent, selector: "cmat-material-color-picker", inputs: ["color", "title", "readonly"], outputs: ["colorChanged"], exportAs: ["cmatMaterialColorPicker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatColorPickerTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: CmatColorPickerTypeComponent, isStandalone: true, selector: "cmat-color-picker-type", usesInheritance: true, ngImport: i0, template: "<cmat-color-picker-button [value]=\"value\" [label]=\"props.label??''\" [placeholder]=\"props.placeholder??''\" [tabindex]=\"props.tabindex\" [disabled]=\"props.disabled??false\" (valueChanged)=\"value=$event\"></cmat-color-picker-button>", styles: [":host{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: CmatColorPickerButtonComponent, selector: "cmat-color-picker-button", inputs: ["format", "value", "hideAlpha", "disabled", "placeholder", "label"], outputs: ["formatChange", "valueChange", "disabledChange", "formatChanged", "valueChanged", "colorChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatColorPickerTypeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatColorPickerTypeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-color-picker-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, CmatMaterialColorPickerComponent], template: "<cmat-material-color-picker [title]=\"props.label??''\" [formControl]=\"formControl\" [readonly]=\"disabled\"\r\n    [tabindex]=\"props.tabindex\"></cmat-material-color-picker>", styles: [":host{width:100%}\n"] }]
+            args: [{ selector: 'cmat-color-picker-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, CmatColorPickerButtonComponent], template: "<cmat-color-picker-button [value]=\"value\" [label]=\"props.label??''\" [placeholder]=\"props.placeholder??''\" [tabindex]=\"props.tabindex\" [disabled]=\"props.disabled??false\" (valueChanged)=\"value=$event\"></cmat-color-picker-button>", styles: [":host{width:100%}\n"] }]
         }] });
 
+class CmatDataPickerTypeComponent extends FieldType {
+    constructor() {
+        super();
+        this.dataProviderSignal = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dataProviderSignal" }] : /* istanbul ignore next */ []));
+        this._http = inject(HttpClient);
+        this._destroyRef = inject(DestroyRef);
+        // 用于记录上一次的配置快照
+        this._lastDomain = undefined;
+        this._lastApiUrl = undefined;
+    }
+    ngOnInit() {
+        // 初始化快照
+        this._lastDomain = this.props.domain;
+        this._lastApiUrl = this.props.apiUrl;
+        // 执行初始创建逻辑
+        this._createDataProvider();
+    }
+    ngDoCheck() {
+        const currentDomain = this.props.domain;
+        const currentApiUrl = this.props.apiUrl;
+        let shouldRefresh = false;
+        // 检查 domain 变化
+        if (!isEqual(currentDomain, this._lastDomain)) {
+            this._lastDomain = currentDomain;
+            shouldRefresh = true;
+        }
+        // 检查 apiUrl 变化
+        if (currentApiUrl !== this._lastApiUrl) {
+            this._lastApiUrl = currentApiUrl;
+            shouldRefresh = true;
+        }
+        if (shouldRefresh) {
+            this._createDataProvider();
+        }
+    }
+    /**
+     * 统一创建 dataProvider 的方法
+     */
+    _createDataProvider() {
+        const domain = this.props.domain;
+        const apiUrl = this.props.apiUrl;
+        if (domain?.url && domain?.key && domain?.code && domain?.value) {
+            this._createDataProviderFromDomain(domain);
+        }
+        else if (apiUrl) {
+            // 如果提供了 apiUrl，创建简单的 HTTP provider
+            this._createDataProviderFromUrl(apiUrl);
+        }
+        else {
+            // 没有配置，清空 provider
+            this.dataProviderSignal.set(undefined);
+        }
+    }
+    /**
+     * 从 domain 配置创建 dataProvider
+     */
+    _createDataProviderFromDomain(domain) {
+        if (!domain.url || !domain.key || !domain.code || !domain.value)
+            return;
+        const provider = {
+            loadPage: (query) => {
+                const params = {
+                    page: query.page,
+                    size: query.size,
+                };
+                if (query.search) {
+                    params[domain.key] = domain.code;
+                    params['search'] = query.search;
+                }
+                if (query.orderBy) {
+                    params['orderBy'] = query.orderBy;
+                    params['desc'] = query.desc ?? false;
+                }
+                return this._http.post(domain.url, params).pipe(takeUntilDestroyed(this._destroyRef), catchError((error) => {
+                    console.error('Failed to load data picker data:', error);
+                    return of({ data: [], total: 0 });
+                }));
+            },
+        };
+        this.dataProviderSignal.set(provider);
+    }
+    /**
+     * 从 URL 创建简单的 dataProvider
+     */
+    _createDataProviderFromUrl(url) {
+        const provider = {
+            loadPage: (query) => {
+                const params = {
+                    page: query.page,
+                    size: query.size,
+                };
+                if (query.search) {
+                    params['search'] = query.search;
+                }
+                if (query.orderBy) {
+                    params['orderBy'] = query.orderBy;
+                    params['desc'] = query.desc ?? false;
+                }
+                return this._http.post(url, params).pipe(takeUntilDestroyed(this._destroyRef), catchError((error) => {
+                    console.error('Failed to load data picker data:', error);
+                    return of({ data: [], total: 0 });
+                }));
+            },
+        };
+        this.dataProviderSignal.set(provider);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDataPickerTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: CmatDataPickerTypeComponent, isStandalone: true, selector: "cmat-data-picker-type", usesInheritance: true, ngImport: i0, template: "<cmat-data-picker\r\n  [formControl]=\"formControl\"\r\n  [dataProvider]=\"dataProviderSignal()\"\r\n  [columns]=\"props.columns ?? []\"\r\n  [keyField]=\"props.keyField ?? 'id'\"\r\n  [labelField]=\"props.labelField ?? 'name'\"\r\n  [multiple]=\"props.multiple ?? false\"\r\n  [searchable]=\"props.searchable ?? true\"\r\n  [pageSize]=\"props.pageSize ?? 20\"\r\n  [uiMode]=\"props.uiMode ?? 'auto'\"\r\n  [drawerPosition]=\"props.drawerPosition ?? 'end'\"\r\n  [drawerWidth]=\"props.drawerWidth ?? '600px'\"\r\n  [dialogWidth]=\"props.dialogWidth ?? '800px'\"\r\n  [dialogMaxHeight]=\"props.dialogMaxHeight ?? '80vh'\"\r\n  [displayTemplate]=\"props.displayTemplate\"\r\n  [placeholder]=\"placeholder\"\r\n  [required]=\"required\">\r\n</cmat-data-picker>\r\n", styles: [":host{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CmatDataPickerComponent, selector: "cmat-data-picker", inputs: ["apiUrl", "dataSource", "dataProvider", "columns", "keyField", "labelField", "displayTemplate", "displayLabelFn", "multiple", "searchable", "debounceTime", "pageSize", "uiMode", "drawerPosition", "drawerWidth", "dialogWidth", "dialogMaxHeight", "placeholder", "value", "required", "disabled"], outputs: ["selectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDataPickerTypeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cmat-data-picker-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, CmatDataPickerComponent], template: "<cmat-data-picker\r\n  [formControl]=\"formControl\"\r\n  [dataProvider]=\"dataProviderSignal()\"\r\n  [columns]=\"props.columns ?? []\"\r\n  [keyField]=\"props.keyField ?? 'id'\"\r\n  [labelField]=\"props.labelField ?? 'name'\"\r\n  [multiple]=\"props.multiple ?? false\"\r\n  [searchable]=\"props.searchable ?? true\"\r\n  [pageSize]=\"props.pageSize ?? 20\"\r\n  [uiMode]=\"props.uiMode ?? 'auto'\"\r\n  [drawerPosition]=\"props.drawerPosition ?? 'end'\"\r\n  [drawerWidth]=\"props.drawerWidth ?? '600px'\"\r\n  [dialogWidth]=\"props.dialogWidth ?? '800px'\"\r\n  [dialogMaxHeight]=\"props.dialogMaxHeight ?? '80vh'\"\r\n  [displayTemplate]=\"props.displayTemplate\"\r\n  [placeholder]=\"placeholder\"\r\n  [required]=\"required\">\r\n</cmat-data-picker>\r\n", styles: [":host{width:100%}\n"] }]
+        }], ctorParameters: () => [] });
+
 class CmatDateRangeTypeComponent extends FieldType {
     constructor() {
         super(...arguments);
@@ -578,10 +920,10 @@ class CmatDateRangeTypeComponent extends FieldType {
             },
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatDateRangeTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CmatDateRangeTypeComponent, isStandalone: true, selector: "cmat-date-range-type", usesInheritance: true, ngImport: i0, template: "<cmat-date-range [dateFormat]=\"props.dateFormat\" [timeFormat]=\"props.timeFormat\" [timeRange]=\"props.timeRange\" \r\n[formControl]=\"formControl\" [tabindex]=\"props.tabindex\" [readonly]=\"disabled\">\r\n</cmat-date-range>", styles: [":host{width:100%}\n"], dependencies: [{ kind: "component", type: CmatDateRangeComponent, selector: "cmat-date-range", inputs: ["controlClass", "initData", "readonly", "dateFormat", "timeFormat", "timeRange", "range"], outputs: ["rangeChanged"], exportAs: ["cmatDateRange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDateRangeTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: CmatDateRangeTypeComponent, isStandalone: true, selector: "cmat-date-range-type", usesInheritance: true, ngImport: i0, template: "<cmat-date-range [dateFormat]=\"props.dateFormat\" [timeFormat]=\"props.timeFormat\" [timeRange]=\"props.timeRange\" \r\n[formControl]=\"formControl\" [tabindex]=\"props.tabindex\" [readonly]=\"disabled\">\r\n</cmat-date-range>", styles: [":host{width:100%}\n"], dependencies: [{ kind: "component", type: CmatDateRangeComponent, selector: "cmat-date-range", inputs: ["controlClass", "dateFormat", "timeFormat", "readonly", "timeRange", "range"], outputs: ["rangeChanged"], exportAs: ["cmatDateRange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatDateRangeTypeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDateRangeTypeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-date-range-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CmatDateRangeComponent, ReactiveFormsModule], template: "<cmat-date-range [dateFormat]=\"props.dateFormat\" [timeFormat]=\"props.timeFormat\" [timeRange]=\"props.timeRange\" \r\n[formControl]=\"formControl\" [tabindex]=\"props.tabindex\" [readonly]=\"disabled\">\r\n</cmat-date-range>", styles: [":host{width:100%}\n"] }]
         }] });
@@ -602,21 +944,17 @@ class CmatDatepickerTypeComponent extends FieldType {
                 twelvehour: false
             }
         };
-        this.isHandSet = signal(false, ...(ngDevMode ? [{ debugName: "isHandSet" }] : /* istanbul ignore next */ []));
         this._cmatMediaWatcherService = inject(CmatMediaWatcherService);
-        this._destroyRef = inject(DestroyRef);
-    }
-    ngOnInit() {
-        this._cmatMediaWatcherService.onMediaChange$
-            .pipe(takeUntilDestroyed(this._destroyRef))
-            .subscribe(({ matchingAliases }) => {
-            this.isHandSet.set(!matchingAliases.includes('lg'));
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatDatepickerTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CmatDatepickerTypeComponent, isStandalone: true, selector: "cmat-datepicker-type", usesInheritance: true, ngImport: i0, template: "@if(props.togglePosition==='left'){\r\n<cmat-datetimepicker-toggle matPrefix [for]=\"datetimePicker\" [disabled]=\"disabled\"></cmat-datetimepicker-toggle>\r\n}\r\n\r\n<cmat-datetimepicker #datetimePicker openOnFocus=\"true\" [startView]=\"props.startView\" [mode]=\"props.mode\"\r\n    [timeInterval]=\"props.timeInterval\" [twelvehour]=\"props.twelvehour\" [type]=\"props.type\"\r\n    [multiYearSelector]=\"props.multiYearSelector\" [timeInput]=\"props.timeInput\" [touchUi]=\"isHandSet()\"\r\n    [disabled]=\"disabled\"></cmat-datetimepicker>\r\n\r\n<input autocomplete=\"false\" matInput [cmatDatetimepicker]=\"datetimePicker\" [required]=\"required\"\r\n    [formControl]=\"formControl\" [placeholder]=\"placeholder\" />\r\n\r\n@if(props.togglePosition==='right'){\r\n<cmat-datetimepicker-toggle matSuffix [for]=\"datetimePicker\" [disabled]=\"disabled\"></cmat-datetimepicker-toggle>\r\n}", styles: [":host{width:100%;display:flex}\n"], dependencies: [{ kind: "component", type: CmatDatetimepickerToggleComponent, selector: "cmat-datetimepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disableRipple", "disabled"], exportAs: ["cmatDatetimepickerToggle"] }, { kind: "directive", type: CmatDatetimepickerInputDirective, selector: "input[cmatDatetimepicker]", inputs: ["cmatDatetimepicker", "cmatDatepickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["cmatDatepickerInput"] }, { kind: "component", type: CmatDatetimepickerComponent, selector: "cmat-datetimepicker", inputs: ["startView", "mode", "timeInterval", "preventSameDateTimeSelection", "xPosition", "yPosition", "multiYearSelector", "twelvehour", "panelClass", "opened", "color", "startAt", "type", "timeInput", "touchUi", "disabled", "restoreFocus"], outputs: ["selectedChanged", "openedStream", "closedStream", "viewChanged"], exportAs: ["cmatDatetimepicker"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        // eslint-disable-next-line @typescript-eslint/member-ordering
+        this.isHandSet = computed(() => {
+            return !this._cmatMediaWatcherService.mediaChange().matchingAliases.includes('lg');
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isHandSet" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDatepickerTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatDatepickerTypeComponent, isStandalone: true, selector: "cmat-datepicker-type", usesInheritance: true, ngImport: i0, template: "@if(props.togglePosition==='left'){\r\n<cmat-datetimepicker-toggle matPrefix [for]=\"datetimePicker\" [disabled]=\"disabled\"></cmat-datetimepicker-toggle>\r\n}\r\n\r\n<cmat-datetimepicker #datetimePicker openOnFocus=\"true\" [startView]=\"props.startView\" [mode]=\"props.mode\"\r\n    [timeInterval]=\"props.timeInterval\" [twelvehour]=\"props.twelvehour\" [type]=\"props.type\"\r\n    [multiYearSelector]=\"props.multiYearSelector\" [timeInput]=\"props.timeInput\" [touchUi]=\"isHandSet()\"\r\n    [disabled]=\"disabled\"></cmat-datetimepicker>\r\n\r\n<input autocomplete=\"false\" matInput [cmatDatetimepicker]=\"datetimePicker\" [required]=\"required\"\r\n    [formControl]=\"formControl\" [placeholder]=\"placeholder\" />\r\n\r\n@if(props.togglePosition==='right'){\r\n<cmat-datetimepicker-toggle matSuffix [for]=\"datetimePicker\" [disabled]=\"disabled\"></cmat-datetimepicker-toggle>\r\n}", styles: [":host{width:100%;display:flex}\n"], dependencies: [{ kind: "component", type: CmatDatetimepickerToggleComponent, selector: "cmat-datetimepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disableRipple", "disabled"], exportAs: ["cmatDatetimepickerToggle"] }, { kind: "directive", type: CmatDatetimepickerInputDirective, selector: "input[cmatDatetimepicker]", inputs: ["cmatDatetimepicker", "cmatDatepickerFilter", "min", "max", "disabled", "value"], outputs: ["dateChange", "dateInput"], exportAs: ["cmatDatepickerInput"] }, { kind: "component", type: CmatDatetimepickerComponent, selector: "cmat-datetimepicker", inputs: ["startView", "mode", "timeInterval", "preventSameDateTimeSelection", "xPosition", "yPosition", "multiYearSelector", "twelvehour", "panelClass", "timeInput", "touchUi", "restoreFocus", "color", "type", "opened", "disabled", "startAt"], outputs: ["openedStream", "closedStream", "viewChanged"], exportAs: ["cmatDatetimepicker"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatDatepickerTypeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDatepickerTypeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-datepicker-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CmatDatetimepickerToggleComponent, CmatDatetimepickerInputDirective, CmatDatetimepickerComponent, MatInputModule, FormsModule, ReactiveFormsModule], template: "@if(props.togglePosition==='left'){\r\n<cmat-datetimepicker-toggle matPrefix [for]=\"datetimePicker\" [disabled]=\"disabled\"></cmat-datetimepicker-toggle>\r\n}\r\n\r\n<cmat-datetimepicker #datetimePicker openOnFocus=\"true\" [startView]=\"props.startView\" [mode]=\"props.mode\"\r\n    [timeInterval]=\"props.timeInterval\" [twelvehour]=\"props.twelvehour\" [type]=\"props.type\"\r\n    [multiYearSelector]=\"props.multiYearSelector\" [timeInput]=\"props.timeInput\" [touchUi]=\"isHandSet()\"\r\n    [disabled]=\"disabled\"></cmat-datetimepicker>\r\n\r\n<input autocomplete=\"false\" matInput [cmatDatetimepicker]=\"datetimePicker\" [required]=\"required\"\r\n    [formControl]=\"formControl\" [placeholder]=\"placeholder\" />\r\n\r\n@if(props.togglePosition==='right'){\r\n<cmat-datetimepicker-toggle matSuffix [for]=\"datetimePicker\" [disabled]=\"disabled\"></cmat-datetimepicker-toggle>\r\n}", styles: [":host{width:100%;display:flex}\n"] }]
         }], ctorParameters: () => [] });
@@ -632,74 +970,113 @@ class CmatMultiCheckboxTypeComponent extends FieldType {
                 labelPosition: 'after'
             },
         };
-        this._http = inject(HttpClient);
+        this.urlData = [];
+        this._lastDomain = undefined;
+        this._lastOptions = undefined;
         this._destroyRef = inject(DestroyRef);
-        this._urlData = signal([], ...(ngDevMode ? [{ debugName: "_urlData" }] : /* istanbul ignore next */ []));
-        this._urlData$ = toObservable(this._urlData);
+        this._domainDataService = inject(DomainDataService);
+    }
+    ngOnInit() {
+        this._lastDomain = this.props.domain;
+        this._lastOptions = this.field.props?.options;
+        this._refreshData();
     }
-    get urlData$() {
-        return this._urlData$;
+    ngDoCheck() {
+        const currentDomain = this.props.domain;
+        const currentOptions = this.field.props?.options;
+        let shouldRefresh = false;
+        // 1. 检查 domain 变化
+        if (!isEqual(currentDomain, this._lastDomain)) {
+            this._lastDomain = currentDomain;
+            shouldRefresh = true;
+        }
+        // 2. 检查 options 变化
+        if (!isEqual(currentOptions, this._lastOptions)) {
+            this._lastOptions = currentOptions;
+            shouldRefresh = true;
+        }
+        if (shouldRefresh) {
+            this._refreshData();
+        }
     }
     onChange(optionValue, checked) {
-        const value = optionValue ?? '';
+        if (optionValue === undefined || optionValue === null)
+            return;
         this.formControl.markAsDirty();
         if (this.props.type === 'array') {
             const currentValue = (this.formControl.value ?? []);
             this.formControl.patchValue(checked
-                ? [...currentValue, value]
-                : currentValue.filter(o => o !== value));
+                ? [...currentValue, optionValue]
+                : currentValue.filter(o => o !== optionValue));
         }
         else {
-            this.formControl.patchValue({ ...(this.formControl.value ?? {}), [value]: checked });
+            const currentObj = this.formControl.value ?? {};
+            this.formControl.patchValue({
+                ...currentObj,
+                [optionValue]: checked
+            });
         }
         this.formControl.markAsTouched();
     }
-    ngOnInit() {
-        const url = this.field.props?.domain?.url;
-        if (url && this.field.props?.domain?.code && this.field.props?.domain?.key && this.field.props?.domain?.value) {
-            this._http.get(url).pipe(takeUntilDestroyed(this._destroyRef)).subscribe((data) => {
-                if (data) {
-                    const key = this.field.props?.domain?.key;
-                    const code = this.field.props?.domain?.code;
-                    const datas = data.filter((i) => {
-                        if (key)
-                            return i[key] === code;
-                        return false;
-                    });
-                    if (datas && this.field.props?.domain?.value) {
-                        this._urlData.set(datas[0][this.field.props?.domain?.value] ?? []);
-                    }
-                    else {
-                        this._urlData.set([]);
-                    }
-                }
-                else {
-                    this._urlData.set([]);
-                }
-            });
+    isChecked(option) {
+        const formValue = this.formControl.value;
+        let optionValue;
+        if (option.value !== undefined) {
+            optionValue = option.value;
+        }
+        else if (option.value !== undefined) {
+            optionValue = option.value;
+        }
+        if (optionValue === undefined || optionValue === null) {
+            return false;
+        }
+        if (!formValue) {
+            return false;
+        }
+        const safeOptionValue = String(optionValue);
+        if (this.props.type === 'array') {
+            if (Array.isArray(formValue)) {
+                return formValue.some(v => String(v) === safeOptionValue);
+            }
+            return false;
         }
         else {
-            this._urlData.set([]);
+            if (typeof formValue === 'object' && formValue !== null) {
+                return !!formValue[safeOptionValue];
+            }
+            return false;
         }
     }
-    isChecked(option) {
-        const formValue = this.formControl.value;
-        const optionValue = option.value ?? '';
-        return !!formValue && (this.props.type === 'array' ? formValue.includes(optionValue) : !!formValue[optionValue]);
+    trackByFn(index, option) {
+        return option.value ?? index;
     }
-    trackByFn(index) {
-        return index;
+    getData() {
+        return this.urlData;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatMultiCheckboxTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CmatMultiCheckboxTypeComponent, isStandalone: true, selector: "cmat-multicheckbox-type", viewQueries: [{ propertyName: "checkboxes", predicate: MatCheckbox, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if ((urlData$ | async); as urlData) {\r\n@for (option of (urlData.length > 0 ? urlData : (props.options | formlySelectOptions : field | async)); track\r\ntrackByFn($index)) {\r\n<mat-checkbox [tabIndex]=\"props.tabindex\" [color]=\"props.color\" [labelPosition]=\"props.labelPosition\"\r\n    [checked]=\"isChecked(option)\" [disabled]=\"formControl.disabled || option.disabled\"\r\n    (change)=\"onChange(option.value?.toString(), $event.checked)\">\r\n    {{ option.label }}\r\n</mat-checkbox>\r\n}\r\n}", styles: [":host{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: FormlySelectModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i2$2.LegacyFormlySelectOptionsPipe, name: "formlySelectOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    _refreshData() {
+        const domain = this.props.domain;
+        // 使用 DomainDataService 加载远程数据
+        this._domainDataService.load(domain, this._destroyRef, {
+            onSuccess: (data) => {
+                this.urlData = data;
+            },
+            componentName: 'CmatMultiCheckboxTypeComponent'
+        });
+        // 处理静态 options（当没有 domain 时）
+        if (!domain?.url && this.field.props?.options) {
+            const options = this.field.props.options;
+            if (Array.isArray(options)) {
+                this.urlData = options;
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatMultiCheckboxTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatMultiCheckboxTypeComponent, isStandalone: true, selector: "cmat-multicheckbox-type", usesInheritance: true, ngImport: i0, template: "@if (urlData) {\r\n\r\n  @let options = props.domain ? getData() : (props.options | formlySelectOptions : field | async);\r\n  \r\n  @for (option of options; track trackByFn($index, option)) {\r\n    <mat-checkbox \r\n        [tabIndex]=\"props.tabindex\" \r\n        [color]=\"props.color\" \r\n        [labelPosition]=\"props.labelPosition\"\r\n        [checked]=\"isChecked(option)\" \r\n        [disabled]=\"formControl.disabled || option.disabled\"\r\n        (change)=\"onChange(option.value, $event.checked)\">\r\n        {{ option.label }}\r\n    </mat-checkbox>\r\n  }\r\n}", styles: [":host{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: FormlySelectModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i2$2.LegacyFormlySelectOptionsPipe, name: "formlySelectOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatMultiCheckboxTypeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatMultiCheckboxTypeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-multicheckbox-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatCheckboxModule, AsyncPipe, FormlySelectModule], template: "@if ((urlData$ | async); as urlData) {\r\n@for (option of (urlData.length > 0 ? urlData : (props.options | formlySelectOptions : field | async)); track\r\ntrackByFn($index)) {\r\n<mat-checkbox [tabIndex]=\"props.tabindex\" [color]=\"props.color\" [labelPosition]=\"props.labelPosition\"\r\n    [checked]=\"isChecked(option)\" [disabled]=\"formControl.disabled || option.disabled\"\r\n    (change)=\"onChange(option.value?.toString(), $event.checked)\">\r\n    {{ option.label }}\r\n</mat-checkbox>\r\n}\r\n}", styles: [":host{width:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { checkboxes: [{
-                type: ViewChildren,
-                args: [MatCheckbox]
-            }] } });
+            args: [{ selector: 'cmat-multicheckbox-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatCheckboxModule, AsyncPipe, FormlySelectModule], template: "@if (urlData) {\r\n\r\n  @let options = props.domain ? getData() : (props.options | formlySelectOptions : field | async);\r\n  \r\n  @for (option of options; track trackByFn($index, option)) {\r\n    <mat-checkbox \r\n        [tabIndex]=\"props.tabindex\" \r\n        [color]=\"props.color\" \r\n        [labelPosition]=\"props.labelPosition\"\r\n        [checked]=\"isChecked(option)\" \r\n        [disabled]=\"formControl.disabled || option.disabled\"\r\n        (change)=\"onChange(option.value, $event.checked)\">\r\n        {{ option.label }}\r\n    </mat-checkbox>\r\n  }\r\n}", styles: [":host{width:100%}\n"] }]
+        }], ctorParameters: () => [] });
 
 class CmatNumberTypeComponent extends FieldType {
     constructor() {
@@ -712,10 +1089,10 @@ class CmatNumberTypeComponent extends FieldType {
             },
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatNumberTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CmatNumberTypeComponent, isStandalone: true, selector: "cmat-number-type", usesInheritance: true, ngImport: i0, template: "<input matInput cmatDigitOnly [formControl]=\"formControl\" [readonly]=\"props.readonly\" [placeholder]=\"placeholder\" [tabIndex]=\"props.tabindex\" [required]=\"required\" [decimal]=\"props.decimal\" [allowNegatives]=\"true\" [allowPaste]=\"true\"\r\n    [min]=\"props.min\" [max]=\"props.max\" [errorStateMatcher]=\"errorStateMatcher\">\r\n\r\n", styles: [":host{width:100%}\n"], dependencies: [{ kind: "directive", type: CmatDigitOnlyDirective, selector: "[cmatDigitOnly]", inputs: ["decimal", "decimalSeparator", "allowNegatives", "allowPaste", "negativeSign", "min", "max", "pattern"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatNumberTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: CmatNumberTypeComponent, isStandalone: true, selector: "cmat-number-type", usesInheritance: true, ngImport: i0, template: "<input matInput cmatDigitOnly [formControl]=\"formControl\" [readonly]=\"props.readonly\" [placeholder]=\"placeholder\" [tabIndex]=\"props.tabindex\" [required]=\"required\" [decimal]=\"props.decimal\" [allowNegatives]=\"true\" [allowPaste]=\"true\"\r\n    [min]=\"props.min\" [max]=\"props.max\" [errorStateMatcher]=\"errorStateMatcher\">\r\n\r\n", styles: [":host{width:100%}\n"], dependencies: [{ kind: "directive", type: CmatDigitOnlyDirective, selector: "[cmatDigitOnly]", inputs: ["decimal", "decimalSeparator", "allowNegatives", "allowPaste", "negativeSign", "min", "max", "pattern"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatNumberTypeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatNumberTypeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-number-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CmatDigitOnlyDirective, MatInputModule, ReactiveFormsModule], template: "<input matInput cmatDigitOnly [formControl]=\"formControl\" [readonly]=\"props.readonly\" [placeholder]=\"placeholder\" [tabIndex]=\"props.tabindex\" [required]=\"required\" [decimal]=\"props.decimal\" [allowNegatives]=\"true\" [allowPaste]=\"true\"\r\n    [min]=\"props.min\" [max]=\"props.max\" [errorStateMatcher]=\"errorStateMatcher\">\r\n\r\n", styles: [":host{width:100%}\n"] }]
         }] });
@@ -728,14 +1105,15 @@ class CmatRatingTypeComponent extends FieldType {
                 stars: 5,
                 readonly: false,
                 hover: true,
-                half: true
+                half: true,
+                showMode: 'horizontal'
             },
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatRatingTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CmatRatingTypeComponent, isStandalone: true, selector: "cmat-rating-type", usesInheritance: true, ngImport: i0, template: "@if(props.customColor&&props.customColor.indexOf('#')>-1){\r\n<div [ngStyle]=\"{'color': props.customColor}\">\r\n    <cmat-rating [formControl]=\"formControl\" [tabIndex]=\"props.tabindex\" [stars]=\"props.stars\"\r\n        [readonly]=\"props.readonly\" [hover]=\"props.hover\" [half]=\"props.half\" [showMode]=\"props.showMode\"></cmat-rating>\r\n</div>\r\n}@else{\r\n<cmat-rating [formControl]=\"formControl\" [tabIndex]=\"props.tabindex\" [stars]=\"props.stars\" [readonly]=\"props.readonly\"\r\n    [hover]=\"props.hover\" [half]=\"props.half\" [color]=\"props.customColor\" [showMode]=\"props.showMode\"></cmat-rating>\r\n}", styles: [":host{width:100%}\n"], dependencies: [{ kind: "component", type: CmatRatingComponent, selector: "cmat-rating", inputs: ["id", "stars", "readonly", "hover", "half", "color", "showMode", "placeholder", "value", "required", "disabled"], outputs: ["valueChange"], exportAs: ["cmatRating"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatRatingTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatRatingTypeComponent, isStandalone: true, selector: "cmat-rating-type", usesInheritance: true, ngImport: i0, template: "@if(props.customColor&&props.customColor.indexOf('#')>-1){\r\n<div [ngStyle]=\"{'color': props.customColor}\">\r\n    <cmat-rating [formControl]=\"formControl\" [tabIndex]=\"props.tabindex\" [stars]=\"props.stars\"\r\n        [readonly]=\"props.readonly\" [hover]=\"props.hover\" [half]=\"props.half\" [showMode]=\"props.showMode\"></cmat-rating>\r\n</div>\r\n}@else{\r\n<cmat-rating [formControl]=\"formControl\" [tabIndex]=\"props.tabindex\" [stars]=\"props.stars\" [readonly]=\"props.readonly\"\r\n    [hover]=\"props.hover\" [half]=\"props.half\" [color]=\"props.customColor\" [showMode]=\"props.showMode\"></cmat-rating>\r\n}", styles: [":host{width:100%}\n"], dependencies: [{ kind: "component", type: CmatRatingComponent, selector: "cmat-rating", inputs: ["stars", "readonly", "hover", "half", "color", "showMode", "placeholder", "value", "required", "disabled"], outputs: ["valueChange"], exportAs: ["cmatRating"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatRatingTypeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatRatingTypeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-rating-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CmatRatingComponent, ReactiveFormsModule, NgStyle], template: "@if(props.customColor&&props.customColor.indexOf('#')>-1){\r\n<div [ngStyle]=\"{'color': props.customColor}\">\r\n    <cmat-rating [formControl]=\"formControl\" [tabIndex]=\"props.tabindex\" [stars]=\"props.stars\"\r\n        [readonly]=\"props.readonly\" [hover]=\"props.hover\" [half]=\"props.half\" [showMode]=\"props.showMode\"></cmat-rating>\r\n</div>\r\n}@else{\r\n<cmat-rating [formControl]=\"formControl\" [tabIndex]=\"props.tabindex\" [stars]=\"props.stars\" [readonly]=\"props.readonly\"\r\n    [hover]=\"props.hover\" [half]=\"props.half\" [color]=\"props.customColor\" [showMode]=\"props.showMode\"></cmat-rating>\r\n}", styles: [":host{width:100%}\n"] }]
         }] });
@@ -751,49 +1129,39 @@ class CmatRadioTypeComponent extends FieldType {
                 labelPosition: 'after'
             },
         };
-        this._http = inject(HttpClient);
-        this._urlData = signal([], ...(ngDevMode ? [{ debugName: "_urlData" }] : /* istanbul ignore next */ []));
+        this.urlData = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "urlData" }] : /* istanbul ignore next */ []));
+        this.radioGroup = viewChild(MatRadioGroup, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "radioGroup" }] : /* istanbul ignore next */ []));
+        this._lastDomain = undefined;
         this._destroyRef = inject(DestroyRef);
-        this._urlData$ = toObservable(this._urlData);
-    }
-    get urlData$() {
-        return this._urlData$;
+        this._domainDataService = inject(DomainDataService);
     }
     ngOnInit() {
-        const url = this.field.props?.domain?.url;
-        if (url && this.field.props?.domain?.code && this.field.props?.domain?.key && this.field.props?.domain?.value) {
-            this._http.get(url).pipe(takeUntilDestroyed(this._destroyRef)).subscribe((data) => {
-                if (data) {
-                    const key = this.field.props?.domain?.key;
-                    const code = this.field.props?.domain?.code;
-                    const datas = data.filter((i) => {
-                        if (key)
-                            return i[key] === code;
-                        return false;
-                    });
-                    if (datas && this.field.props?.domain?.value) {
-                        this._urlData.set(datas[0][this.field.props?.domain?.value] ?? []);
-                    }
-                    else {
-                        this._urlData.set([]);
-                    }
-                }
-                else {
-                    this._urlData.set([]);
-                }
-            });
+        this._lastDomain = this.props.domain;
+        this._refreshData();
+    }
+    ngDoCheck() {
+        const currentDomain = this.props.domain;
+        let shouldRefresh = false;
+        // 1. 检查 domain 变化
+        if (!isEqual(currentDomain, this._lastDomain)) {
+            this._lastDomain = currentDomain;
+            shouldRefresh = true;
         }
-        else {
-            this._urlData.set([]);
+        if (shouldRefresh) {
+            this._refreshData();
         }
     }
     ngAfterViewInit() {
         this.focusObserver = _observe(this.field, ['focus'], ({ currentValue }) => {
-            if (this.props.tabindex === -1 && currentValue && this.radioGroup._radios.length > 0) {
-                setTimeout(() => {
-                    const radio = this.radioGroup.selected ?? this.radioGroup._radios.first;
-                    radio.focus();
-                });
+            if (this.radioGroup()) {
+                if (this.props.tabindex === -1 && currentValue && this.radioGroup()._radios.length > 0) {
+                    setTimeout(() => {
+                        const radio = this.radioGroup().selected ?? this.radioGroup()._radios.first;
+                        radio?.focus();
+                    });
+                }
             }
         });
     }
@@ -801,19 +1169,24 @@ class CmatRadioTypeComponent extends FieldType {
         super.ngOnDestroy();
         this.focusObserver?.unsubscribe();
     }
-    trackByFn(index) {
-        return index;
+    trackByFn(index, option) {
+        return option.value ?? index;
+    }
+    _refreshData() {
+        const domain = this.props.domain;
+        // 使用 DomainDataService 加载远程数据
+        this._domainDataService.load(domain, this._destroyRef, {
+            onSuccess: data => this.urlData.set(data),
+            componentName: 'CmatRadioTypeComponent'
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatRadioTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CmatRadioTypeComponent, isStandalone: true, selector: "cmat-radio-type", viewQueries: [{ propertyName: "radioGroup", first: true, predicate: MatRadioGroup, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-radio-group [formControl]=\"formControl\" [required]=\"required\" [tabindex]=\"props.tabindex\">\r\n    @if ((urlData$ | async); as urlData) {\r\n    @for (option of (urlData.length > 0 ? urlData : (props.options | formlySelectOptions : field | async)); track\r\n    trackByFn($index)) {\r\n    <mat-radio-button [color]=\"props.color\" [labelPosition]=\"props.labelPosition\" [disabled]=\"option.disabled\"\r\n        [value]=\"option.value\">\r\n        {{ option.label }}\r\n    </mat-radio-button>\r\n    }\r\n    }\r\n</mat-radio-group>", styles: [":host{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i1$7.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i1$7.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: FormlySelectModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i2$2.LegacyFormlySelectOptionsPipe, name: "formlySelectOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatRadioTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatRadioTypeComponent, isStandalone: true, selector: "cmat-radio-type", viewQueries: [{ propertyName: "radioGroup", first: true, predicate: MatRadioGroup, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<mat-radio-group [formControl]=\"formControl\" [required]=\"required\" [tabindex]=\"props.tabindex\">\r\n    @if (urlData()) {\r\n    @for (option of (urlData().length > 0 ? urlData() : (props.options | formlySelectOptions : field | async)); track\r\n    trackByFn($index, option)) {\r\n    <mat-radio-button [color]=\"props.color\" [labelPosition]=\"props.labelPosition\" [disabled]=\"option.disabled\"\r\n        [value]=\"option.value\">\r\n        {{ option.label }}\r\n    </mat-radio-button>\r\n    }\r\n    }\r\n</mat-radio-group>", styles: [":host{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i1$7.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i1$7.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: FormlySelectModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i2$2.LegacyFormlySelectOptionsPipe, name: "formlySelectOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatRadioTypeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatRadioTypeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-radio-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatRadioModule, AsyncPipe, FormlySelectModule, ReactiveFormsModule], template: "<mat-radio-group [formControl]=\"formControl\" [required]=\"required\" [tabindex]=\"props.tabindex\">\r\n    @if ((urlData$ | async); as urlData) {\r\n    @for (option of (urlData.length > 0 ? urlData : (props.options | formlySelectOptions : field | async)); track\r\n    trackByFn($index)) {\r\n    <mat-radio-button [color]=\"props.color\" [labelPosition]=\"props.labelPosition\" [disabled]=\"option.disabled\"\r\n        [value]=\"option.value\">\r\n        {{ option.label }}\r\n    </mat-radio-button>\r\n    }\r\n    }\r\n</mat-radio-group>", styles: [":host{width:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { radioGroup: [{
-                type: ViewChild,
-                args: [MatRadioGroup, { static: true }]
-            }] } });
+            args: [{ selector: 'cmat-radio-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatRadioModule, AsyncPipe, FormlySelectModule, ReactiveFormsModule], template: "<mat-radio-group [formControl]=\"formControl\" [required]=\"required\" [tabindex]=\"props.tabindex\">\r\n    @if (urlData()) {\r\n    @for (option of (urlData().length > 0 ? urlData() : (props.options | formlySelectOptions : field | async)); track\r\n    trackByFn($index, option)) {\r\n    <mat-radio-button [color]=\"props.color\" [labelPosition]=\"props.labelPosition\" [disabled]=\"option.disabled\"\r\n        [value]=\"option.value\">\r\n        {{ option.label }}\r\n    </mat-radio-button>\r\n    }\r\n    }\r\n</mat-radio-group>", styles: [":host{width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { radioGroup: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatRadioGroup), { isSignal: true }] }] } });
 
 class CmatRepeatTypeComponent extends FieldArrayType {
     constructor() {
@@ -824,10 +1197,10 @@ class CmatRepeatTypeComponent extends FieldArrayType {
             },
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatRepeatTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CmatRepeatTypeComponent, isStandalone: true, selector: "cmat-repeat-type", usesInheritance: true, ngImport: i0, template: "<div class=\"mb-2\" [tabIndex]=\"props.tabindex\">\r\n    @if(props.label){\r\n    <legend class=\"text-lg\">\r\n        {{ props.label }}\r\n        @if(props.required){\r\n        <span>*</span>\r\n        }\r\n    </legend>\r\n    }\r\n\r\n    @if(props.description){\r\n    <p>{{ props.description }}</p>\r\n    }\r\n\r\n    <div class=\"mb-2 h-1 border-solid border-b-2\"></div>\r\n    <div class=\"flex flex-col repeat-body\">\r\n        @for (field of field.fieldGroup; track $index) {\r\n        <div class=\"flex flex-row repeat-item\">\r\n            <formly-field class=\"repeat-field\" [field]=\"field\"></formly-field>\r\n            @if(!props.disabled){\r\n            <div class=\"flex items-center pl-2 print:hidden\">\r\n                <button matIconButton  color=\"warn\" matTooltip=\"\u5220\u9664\" (click)=\"remove($index)\">\r\n                    <mat-icon color=\"warn\" [svgIcon]=\"'heroicons_outline:trash'\"></mat-icon>\r\n                </button>\r\n            </div>\r\n            }\r\n        </div>\r\n        }\r\n    </div>\r\n\r\n    @if(!props.disabled){\r\n    <div class=\"mt-2 print:hidden\">\r\n        <button matButton=\"filled\" color=\"primary\" (click)=\"add()\">{{ props.addText}}</button>\r\n    </div>\r\n    }\r\n\r\n</div>", styles: [":host{width:100%}::ng-deep .repeat-body .repeat-item:not(:first-child) .repeat-field .mat-mdc-form-field-infix .mat-mdc-floating-label{display:none!important}::ng-deep .repeat-body .repeat-item:not(:first-child) .repeat-field .mat-mdc-form-field-subscript-wrapper{display:none!important}::ng-deep .repeat-body .repeat-item:not(:first-child) .repeat-field .mat-mdc-text-field-wrapper{margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$3.LegacyFormlyField, selector: "formly-field" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatRepeatTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatRepeatTypeComponent, isStandalone: true, selector: "cmat-repeat-type", usesInheritance: true, ngImport: i0, template: "<div class=\"mb-2\" [tabIndex]=\"props.tabindex\">\r\n    @if(props.label){\r\n    <legend class=\"text-lg\">\r\n        {{ props.label }}\r\n        @if(props.required){\r\n        <span>*</span>\r\n        }\r\n    </legend>\r\n    }\r\n\r\n    @if(props.description){\r\n    <p>{{ props.description }}</p>\r\n    }\r\n\r\n    <div class=\"mb-2 h-1 border-solid border-b-2\"></div>\r\n    <div class=\"flex flex-col repeat-body\">\r\n        @for (field of field.fieldGroup; track $index) {\r\n        <div class=\"flex flex-row repeat-item\">\r\n            <formly-field class=\"repeat-field\" [field]=\"field\"></formly-field>\r\n            @if(!props.disabled){\r\n            <div class=\"flex items-center pl-2 print:hidden\">\r\n                <button matIconButton  color=\"warn\" matTooltip=\"\u5220\u9664\" (click)=\"remove($index)\">\r\n                    <mat-icon color=\"warn\" [svgIcon]=\"'heroicons_outline:trash'\"></mat-icon>\r\n                </button>\r\n            </div>\r\n            }\r\n        </div>\r\n        }\r\n    </div>\r\n\r\n    @if(!props.disabled){\r\n    <div class=\"mt-2 print:hidden\">\r\n        <button matButton=\"filled\" color=\"primary\" (click)=\"add()\">{{ props.addText}}</button>\r\n    </div>\r\n    }\r\n\r\n</div>", styles: [":host{width:100%}::ng-deep .repeat-body .repeat-item:not(:first-child) .repeat-field .mat-mdc-form-field-infix .mat-mdc-floating-label{display:none!important}::ng-deep .repeat-body .repeat-item:not(:first-child) .repeat-field .mat-mdc-form-field-subscript-wrapper{display:none!important}::ng-deep .repeat-body .repeat-item:not(:first-child) .repeat-field .mat-mdc-text-field-wrapper{margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$3.LegacyFormlyField, selector: "formly-field" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatRepeatTypeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatRepeatTypeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-repeat-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormlyModule, MatIconModule, MatButtonModule], template: "<div class=\"mb-2\" [tabIndex]=\"props.tabindex\">\r\n    @if(props.label){\r\n    <legend class=\"text-lg\">\r\n        {{ props.label }}\r\n        @if(props.required){\r\n        <span>*</span>\r\n        }\r\n    </legend>\r\n    }\r\n\r\n    @if(props.description){\r\n    <p>{{ props.description }}</p>\r\n    }\r\n\r\n    <div class=\"mb-2 h-1 border-solid border-b-2\"></div>\r\n    <div class=\"flex flex-col repeat-body\">\r\n        @for (field of field.fieldGroup; track $index) {\r\n        <div class=\"flex flex-row repeat-item\">\r\n            <formly-field class=\"repeat-field\" [field]=\"field\"></formly-field>\r\n            @if(!props.disabled){\r\n            <div class=\"flex items-center pl-2 print:hidden\">\r\n                <button matIconButton  color=\"warn\" matTooltip=\"\u5220\u9664\" (click)=\"remove($index)\">\r\n                    <mat-icon color=\"warn\" [svgIcon]=\"'heroicons_outline:trash'\"></mat-icon>\r\n                </button>\r\n            </div>\r\n            }\r\n        </div>\r\n        }\r\n    </div>\r\n\r\n    @if(!props.disabled){\r\n    <div class=\"mt-2 print:hidden\">\r\n        <button matButton=\"filled\" color=\"primary\" (click)=\"add()\">{{ props.addText}}</button>\r\n    </div>\r\n    }\r\n\r\n</div>", styles: [":host{width:100%}::ng-deep .repeat-body .repeat-item:not(:first-child) .repeat-field .mat-mdc-form-field-infix .mat-mdc-floating-label{display:none!important}::ng-deep .repeat-body .repeat-item:not(:first-child) .repeat-field .mat-mdc-form-field-subscript-wrapper{display:none!important}::ng-deep .repeat-body .repeat-item:not(:first-child) .repeat-field .mat-mdc-text-field-wrapper{margin-top:8px}\n"] }]
         }] });
@@ -842,80 +1215,105 @@ class CmatSelectTypeComponent extends FieldType {
                 showToggleAllCheckbox: false
             },
         };
-        this.optionsData = [];
-        this.filteredCustomDetails = new ReplaySubject(1);
-        this.filteredCache = [];
-        this.isIndeterminate = false;
-        this.isChecked = false;
-        this.multiFilterCtrl = new FormControl('');
-        this._http = inject(HttpClient);
+        this.searchControl = new FormControl('');
+        this.urlData = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "urlData" }] : /* istanbul ignore next */ []));
+        this.optionsData = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "optionsData" }] : /* istanbul ignore next */ []));
+        this.filteredOptions = computed(() => {
+            const allData = this.allOptions();
+            const search = this._searchText();
+            if (!search) {
+                return allData;
+            }
+            return allData.filter((item) => {
+                const labelMatch = item.label?.toString().toLowerCase().includes(search);
+                const valueMatch = item.value?.toString().toLowerCase().includes(search);
+                return labelMatch ?? valueMatch;
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+        this.isIndeterminate = computed(() => {
+            if (!this.props.multiple || !this.props.search)
+                return false;
+            const visibleOptions = this.filteredOptions().filter(o => !o.disabled);
+            if (visibleOptions.length === 0)
+                return false;
+            const currentValue = this.formControl.value;
+            if (!isArray(currentValue))
+                return false;
+            const selectedVisibleCount = visibleOptions.filter(opt => currentValue.some(sel => this._isSameSelectValue(sel, opt))).length;
+            return selectedVisibleCount > 0 && selectedVisibleCount < visibleOptions.length;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isIndeterminate" }] : /* istanbul ignore next */ []));
+        this.isChecked = computed(() => {
+            if (!this.props.multiple || !this.props.search)
+                return false;
+            const visibleOptions = this.filteredOptions().filter(o => !o.disabled);
+            if (visibleOptions.length === 0)
+                return false;
+            const currentValue = this.formControl.value;
+            if (!isArray(currentValue))
+                return false;
+            const selectedVisibleCount = visibleOptions.filter(opt => currentValue.some(sel => this._isSameSelectValue(sel, opt))).length;
+            return selectedVisibleCount > 0 && selectedVisibleCount === visibleOptions.length;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isChecked" }] : /* istanbul ignore next */ []));
+        this.allOptions = computed(() => {
+            if (this.urlData().length > 0) {
+                return this.urlData();
+            }
+            return this.optionsData() || [];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "allOptions" }] : /* istanbul ignore next */ []));
+        this._searchText = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_searchText" }] : /* istanbul ignore next */ []));
+        this._lastDomain = undefined;
+        this._lastOptions = undefined;
+        this._domainDataService = inject(DomainDataService);
         this._destroyRef = inject(DestroyRef);
-        this._urlData = [];
     }
-    get datas() {
-        if (isArray(this.field.props?.options)) {
-            return this._urlData?.length > 0 ? this._urlData : this.field.props?.options ?? [];
-        }
-        else {
-            return this._urlData?.length > 0 ? this._urlData : this.optionsData || [];
+    ngOnInit() {
+        this._lastDomain = this.props.domain;
+        this._lastOptions = this.field.props?.options;
+        this._refreshData();
+        if (!isUndefined(this.formControl.value) && !isArray(this.formControl.value) && this.props.multiple) {
+            this.formControl.setValue([this.formControl.value]);
         }
+        this.searchControl.valueChanges
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((value) => {
+            this._searchText.set(value ?? '');
+        });
     }
-    ngOnInit() {
-        if (this.field.props?.options && !isArray(this.field.props?.options)) {
-            this.field.props?.options.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((data) => {
-                this.optionsData = data;
-            });
+    ngDoCheck() {
+        const currentDomain = this.props.domain;
+        const currentOptions = this.field.props?.options;
+        let shouldRefresh = false;
+        // 1. 检查 domain 变化
+        if (!isEqual(currentDomain, this._lastDomain)) {
+            this._lastDomain = currentDomain;
+            shouldRefresh = true;
         }
-        const url = this.field.props?.domain?.url;
-        if (url && this.field.props?.domain?.code && this.field.props?.domain?.key && this.field.props?.domain?.value) {
-            this._http.get(url).pipe(takeUntilDestroyed(this._destroyRef)).subscribe((data) => {
-                if (data) {
-                    const key = this.field.props?.domain?.key;
-                    const code = this.field.props?.domain?.code;
-                    const datas = data.filter((i) => {
-                        if (key)
-                            return i[key] === code;
-                        return false;
-                    });
-                    if (datas && this.field.props?.domain?.value) {
-                        this._urlData = datas[0][this.field.props?.domain?.value] ?? [];
-                    }
-                    else {
-                        this._urlData = [];
-                    }
-                }
-                else {
-                    this._urlData = [];
-                }
-                this.filteredCache = this.datas.slice();
-                this.filteredCustomDetails.next(this.filteredCache);
-            });
+        // 2. 检查 options 变化 (仅当 domain 未配置时，options 才生效，但为了稳妥，只要变了就更新)
+        // 注意：如果 domain 存在，urlData 优先级更高，但更新 optionsData 也无妨，因为 allOptions computed 会优先取 urlData
+        if (!isEqual(currentOptions, this._lastOptions)) {
+            this._lastOptions = currentOptions;
+            shouldRefresh = true;
+        }
+        if (shouldRefresh) {
+            this._refreshData();
+        }
+    }
+    toggleSelectAll(selectAllValue) {
+        const visibleOptions = this.filteredOptions().filter(o => !o.disabled);
+        if (selectAllValue) {
+            this.formControl.setValue([...visibleOptions]);
         }
         else {
-            this._urlData = [];
-            this.filteredCache = this.datas.slice();
-            this.filteredCustomDetails.next(this.filteredCache);
-        }
-        of(this.props.multiple).pipe(takeUntilDestroyed(this._destroyRef))
-            .subscribe((multiple) => {
-            if (!isUndefined(this.formControl.value) && !isArray(this.formControl.value) && multiple) {
-                const value = [this.formControl.value];
-                this.formControl.setValue(value);
-            }
-        });
-        this.multiFilterCtrl.valueChanges
-            .pipe(takeUntilDestroyed(this._destroyRef))
-            .subscribe(() => {
-            this.filterMulti();
-            if (this.props.multiple)
-                this.setToggleAllCheckboxState();
-        });
-        this.formControl.valueChanges
-            .pipe(takeUntilDestroyed(this._destroyRef))
-            .subscribe(() => {
-            if (this.props.multiple)
-                this.setToggleAllCheckboxState();
-        });
+            this.formControl.setValue([]);
+        }
+        this.formControl.markAsDirty();
     }
     getAriaLabelledby() {
         if (this.props.attributes?.['aria-labelledby']) {
@@ -926,51 +1324,6 @@ class CmatSelectTypeComponent extends FieldType {
     getAriaLabel() {
         return this.props.attributes?.['aria-label'];
     }
-    toggleSelectAll(selectAllValue) {
-        this.filteredCustomDetails.pipe(take(1), takeUntilDestroyed(this._destroyRef))
-            .subscribe((val) => {
-            if (selectAllValue) {
-                this.formControl.setValue(val.filter((o) => !o.disabled));
-            }
-            else {
-                this.formControl.setValue([]);
-            }
-            this.formControl.markAsDirty();
-        });
-    }
-    filterMulti() {
-        if (!this.datas) {
-            return;
-        }
-        const search = (this.multiFilterCtrl.value ?? '').toLowerCase();
-        if (!search) {
-            this.filteredCache = this.datas.slice();
-            this.filteredCustomDetails.next(this.filteredCache);
-            return;
-        }
-        this.filteredCache = this.datas.filter((items) => this._toSearchText(items.value).toLowerCase().includes(search) || this._toSearchText(items.label).toLowerCase().includes(search));
-        this.filteredCustomDetails.next(this.filteredCache);
-    }
-    setToggleAllCheckboxState() {
-        let filteredLength = 0;
-        if (this.formControl.value && this.props.search) {
-            const cache = this.filteredCache.filter((o) => !o.disabled);
-            const currentValue = this.formControl.value;
-            const v = isArray(currentValue) || isUndefined(currentValue) ? currentValue : [currentValue];
-            if (v)
-                cache.forEach((el) => {
-                    if (v.findIndex(t => t != null && this._isSameSelectValue(t, el)) > -1) {
-                        filteredLength++;
-                    }
-                });
-            this.isIndeterminate = filteredLength > 0 && filteredLength < cache.length;
-            this.isChecked = filteredLength > 0 && filteredLength === cache.length;
-        }
-        else {
-            this.isIndeterminate = false;
-            this.isChecked = false;
-        }
-    }
     compareWithFn(o1, o2) {
         if (!o1 || !o2) {
             return o1 === o2;
@@ -980,15 +1333,27 @@ class CmatSelectTypeComponent extends FieldType {
     _isSameSelectValue(left, right) {
         return left.value === right.value && left.label === right.label;
     }
-    _toSearchText(value) {
-        return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' ? String(value) : '';
+    _refreshData() {
+        const domain = this.props.domain;
+        // 使用 DomainDataService 加载远程数据
+        this._domainDataService.load(domain, this._destroyRef, {
+            onSuccess: data => this.urlData.set(data),
+            componentName: 'CmatSelectTypeComponent'
+        });
+        // 处理静态 options（当没有 domain 时）
+        if (!domain?.url && this.field.props?.options && isArray(this.field.props?.options)) {
+            this.optionsData.set(this.field.props.options || []);
+        }
+        else if (!domain?.url) {
+            this.optionsData.set([]);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatSelectTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CmatSelectTypeComponent, isStandalone: true, selector: "cmat-select-search-type", usesInheritance: true, ngImport: i0, template: "@if(props.multiple){\r\n<mat-select #multiSelect multiple [id]=\"id\" [formControl]=\"formControl\" [placeholder]=\"props.placeholder??''\"\r\n    [required]=\"required\" [tabIndex]=\"props.tabindex\" [compareWith]=\"compareWithFn\"\r\n    [errorStateMatcher]=\"errorStateMatcher\" [aria-label]=\"getAriaLabel()\" [aria-labelledby]=\"getAriaLabelledby()\"\r\n    [disableOptionCentering]=\"props.disableOptionCentering\"\r\n    [typeaheadDebounceInterval]=\"props.typeaheadDebounceInterval\"\r\n    [panelClass]=\"'overflow-y-auto scrollbar-custom'\">\r\n    @if ((filteredCustomDetails | async); as customDetails) {\r\n    @if (props.search) {\r\n    <mat-option>\r\n        <cmat-select-search [formControl]=\"multiFilterCtrl\" [showToggleAllCheckbox]=\"props.showToggleAllCheckbox\"\r\n            [toggleAllCheckboxIndeterminate]=\"isIndeterminate\" [toggleAllCheckboxChecked]=\"isChecked\"\r\n            (toggleAll)=\"toggleSelectAll($event)\">\r\n        </cmat-select-search>\r\n    </mat-option>\r\n    }\r\n    @if (customDetails?.length!==0&&props.canNull&&!props.multiple) {\r\n    <mat-option>\u7A7A</mat-option>\r\n    }\r\n    @for (i of customDetails; track $index) {\r\n    @if(i.label){\r\n    @if(i.group){\r\n    <mat-optgroup [label]=\"i.label\">\r\n        @for (child of i.group; track $index) {\r\n        <mat-option [value]=\"child\" [disabled]=\"child.disabled\">\r\n            {{ child.label }}\r\n        </mat-option>\r\n        }\r\n    </mat-optgroup>\r\n    }@else {\r\n    <mat-option [value]=\"i\" [disabled]=\"i.disabled\">{{i.label}}</mat-option>\r\n    }\r\n    }@else {\r\n    <mat-option [value]=\"i\">{{i}}</mat-option>\r\n    }\r\n    }\r\n    }\r\n</mat-select>\r\n}@else {\r\n<mat-select #multiSelect [id]=\"id\" [formControl]=\"formControl\" [placeholder]=\"props.placeholder??''\"\r\n    [required]=\"required\" [tabIndex]=\"props.tabindex\" [compareWith]=\"compareWithFn\"\r\n    [errorStateMatcher]=\"errorStateMatcher\" [aria-label]=\"getAriaLabel()\" [aria-labelledby]=\"getAriaLabelledby()\"\r\n    [disableOptionCentering]=\"props.disableOptionCentering\"\r\n    [typeaheadDebounceInterval]=\"props.typeaheadDebounceInterval\"\r\n    [panelClass]=\"'overflow-y-auto scrollbar-custom'\">\r\n    @if ((filteredCustomDetails | async); as customDetails) {\r\n    @if (props.search) {\r\n    <mat-option>\r\n        <cmat-select-search [formControl]=\"multiFilterCtrl\" [showToggleAllCheckbox]=\"props.showToggleAllCheckbox\"\r\n            [toggleAllCheckboxIndeterminate]=\"isIndeterminate\" [toggleAllCheckboxChecked]=\"isChecked\"\r\n            (toggleAll)=\"toggleSelectAll($event)\">\r\n        </cmat-select-search>\r\n    </mat-option>\r\n    }\r\n    @if (customDetails?.length!==0&&props.canNull&&!props.multiple) {\r\n    <mat-option>\u7A7A</mat-option>\r\n    }\r\n    @for (i of customDetails; track $index) {\r\n    @if(i.label){\r\n    @if(i.group){\r\n    <mat-optgroup [label]=\"i.label\">\r\n        @for (child of i.group; track $index) {\r\n        <mat-option [value]=\"child\" [disabled]=\"child.disabled\">\r\n            {{ child.label }}\r\n        </mat-option>\r\n        }\r\n    </mat-optgroup>\r\n    }@else {\r\n    <mat-option [value]=\"i\" [disabled]=\"i.disabled\">{{i.label}}</mat-option>\r\n    }\r\n    }@else {\r\n    <mat-option [value]=\"i\">{{i}}</mat-option>\r\n    }\r\n    }\r\n    }\r\n</mat-select>\r\n}", styles: [":host{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1$8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i1$8.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i1$8.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: CmatSelectSearchComponent, selector: "cmat-select-search", inputs: ["placeholderLabel", "type", "noEntriesFoundLabel", "showNoFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"], exportAs: ["cmatSelectSearch"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatSelectTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatSelectTypeComponent, isStandalone: true, selector: "cmat-select-search-type", usesInheritance: true, ngImport: i0, template: "@if(props.multiple){\r\n<mat-select #multiSelect multiple [id]=\"id\" [formControl]=\"formControl\" [placeholder]=\"props.placeholder??''\"\r\n    [required]=\"required\" [tabIndex]=\"props.tabindex\" [compareWith]=\"compareWithFn\"\r\n    [errorStateMatcher]=\"errorStateMatcher\" [aria-label]=\"getAriaLabel()\" [aria-labelledby]=\"getAriaLabelledby()\"\r\n    [disableOptionCentering]=\"props.disableOptionCentering\"\r\n    [typeaheadDebounceInterval]=\"props.typeaheadDebounceInterval\">\r\n    \r\n    @if (props.search) {\r\n    <mat-option>\r\n        <cmat-select-search [formControl]=\"searchControl\" [showToggleAllCheckbox]=\"props.showToggleAllCheckbox\"\r\n            [toggleAllCheckboxIndeterminate]=\"isIndeterminate()\" [toggleAllCheckboxChecked]=\"isChecked()\"\r\n            (toggleAll)=\"toggleSelectAll($event)\">\r\n        </cmat-select-search>\r\n    </mat-option>\r\n    }\r\n\r\n    @if (allOptions().length !== 0 && props.canNull && !props.multiple) {\r\n    <mat-option value=\"\">\u7A7A</mat-option>\r\n    }\r\n\r\n    @for (i of filteredOptions(); track i.value || $index) {\r\n        @if(i.label){\r\n            @if(i.group){\r\n            <mat-optgroup [label]=\"i.label\">\r\n                @for (child of i.group; track child.value || $index) {\r\n                <mat-option [value]=\"child\" [disabled]=\"child.disabled\">\r\n                    {{ child.label }}\r\n                </mat-option>\r\n                }\r\n            </mat-optgroup>\r\n            }@else {\r\n            <mat-option [value]=\"i\" [disabled]=\"i.disabled\">{{i.label}}</mat-option>\r\n            }\r\n        }@else {\r\n        <mat-option [value]=\"i\">{{i}}</mat-option>\r\n        }\r\n    }\r\n</mat-select>\r\n}@else {\r\n<mat-select #multiSelect [id]=\"id\" [formControl]=\"formControl\" [placeholder]=\"props.placeholder??''\"\r\n    [required]=\"required\" [tabIndex]=\"props.tabindex\" [compareWith]=\"compareWithFn\"\r\n    [errorStateMatcher]=\"errorStateMatcher\" [aria-label]=\"getAriaLabel()\" [aria-labelledby]=\"getAriaLabelledby()\"\r\n    [disableOptionCentering]=\"props.disableOptionCentering\"\r\n    [typeaheadDebounceInterval]=\"props.typeaheadDebounceInterval\">\r\n    \r\n    @if (props.search) {\r\n    <mat-option>\r\n        <cmat-select-search [formControl]=\"searchControl\" [showToggleAllCheckbox]=\"props.showToggleAllCheckbox\"\r\n            [toggleAllCheckboxIndeterminate]=\"isIndeterminate()\" [toggleAllCheckboxChecked]=\"isChecked()\"\r\n            (toggleAll)=\"toggleSelectAll($event)\">\r\n        </cmat-select-search>\r\n    </mat-option>\r\n    }\r\n\r\n    @if (allOptions().length !== 0 && props.canNull && !props.multiple) {\r\n    <mat-option value=\"\">\u7A7A</mat-option>\r\n    }\r\n\r\n\r\n    @for (i of filteredOptions(); track i.value || $index) {\r\n        @if(i.label){\r\n            @if(i.group){\r\n            <mat-optgroup [label]=\"i.label\">\r\n                @for (child of i.group; track child.value || $index) {\r\n                <mat-option [value]=\"child\" [disabled]=\"child.disabled\">\r\n                    {{ child.label }}\r\n                </mat-option>\r\n                }\r\n            </mat-optgroup>\r\n            }@else {\r\n            <mat-option [value]=\"i\" [disabled]=\"i.disabled\">{{i.label}}</mat-option>\r\n            }\r\n        }@else {\r\n        <mat-option [value]=\"i\">{{i}}</mat-option>\r\n        }\r\n    }\r\n</mat-select>\r\n}", styles: [":host{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1$8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i1$8.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i1$8.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: CmatSelectSearchComponent, selector: "cmat-select-search", inputs: ["placeholderLabel", "type", "noEntriesFoundLabel", "showNoFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "debounceTime", "optionsCount"], outputs: ["toggleAll"], exportAs: ["cmatSelectSearch"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatSelectTypeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatSelectTypeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-select-search-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatCheckboxModule, MatSelectModule, CmatSelectSearchComponent, ReactiveFormsModule, AsyncPipe], template: "@if(props.multiple){\r\n<mat-select #multiSelect multiple [id]=\"id\" [formControl]=\"formControl\" [placeholder]=\"props.placeholder??''\"\r\n    [required]=\"required\" [tabIndex]=\"props.tabindex\" [compareWith]=\"compareWithFn\"\r\n    [errorStateMatcher]=\"errorStateMatcher\" [aria-label]=\"getAriaLabel()\" [aria-labelledby]=\"getAriaLabelledby()\"\r\n    [disableOptionCentering]=\"props.disableOptionCentering\"\r\n    [typeaheadDebounceInterval]=\"props.typeaheadDebounceInterval\"\r\n    [panelClass]=\"'overflow-y-auto scrollbar-custom'\">\r\n    @if ((filteredCustomDetails | async); as customDetails) {\r\n    @if (props.search) {\r\n    <mat-option>\r\n        <cmat-select-search [formControl]=\"multiFilterCtrl\" [showToggleAllCheckbox]=\"props.showToggleAllCheckbox\"\r\n            [toggleAllCheckboxIndeterminate]=\"isIndeterminate\" [toggleAllCheckboxChecked]=\"isChecked\"\r\n            (toggleAll)=\"toggleSelectAll($event)\">\r\n        </cmat-select-search>\r\n    </mat-option>\r\n    }\r\n    @if (customDetails?.length!==0&&props.canNull&&!props.multiple) {\r\n    <mat-option>\u7A7A</mat-option>\r\n    }\r\n    @for (i of customDetails; track $index) {\r\n    @if(i.label){\r\n    @if(i.group){\r\n    <mat-optgroup [label]=\"i.label\">\r\n        @for (child of i.group; track $index) {\r\n        <mat-option [value]=\"child\" [disabled]=\"child.disabled\">\r\n            {{ child.label }}\r\n        </mat-option>\r\n        }\r\n    </mat-optgroup>\r\n    }@else {\r\n    <mat-option [value]=\"i\" [disabled]=\"i.disabled\">{{i.label}}</mat-option>\r\n    }\r\n    }@else {\r\n    <mat-option [value]=\"i\">{{i}}</mat-option>\r\n    }\r\n    }\r\n    }\r\n</mat-select>\r\n}@else {\r\n<mat-select #multiSelect [id]=\"id\" [formControl]=\"formControl\" [placeholder]=\"props.placeholder??''\"\r\n    [required]=\"required\" [tabIndex]=\"props.tabindex\" [compareWith]=\"compareWithFn\"\r\n    [errorStateMatcher]=\"errorStateMatcher\" [aria-label]=\"getAriaLabel()\" [aria-labelledby]=\"getAriaLabelledby()\"\r\n    [disableOptionCentering]=\"props.disableOptionCentering\"\r\n    [typeaheadDebounceInterval]=\"props.typeaheadDebounceInterval\"\r\n    [panelClass]=\"'overflow-y-auto scrollbar-custom'\">\r\n    @if ((filteredCustomDetails | async); as customDetails) {\r\n    @if (props.search) {\r\n    <mat-option>\r\n        <cmat-select-search [formControl]=\"multiFilterCtrl\" [showToggleAllCheckbox]=\"props.showToggleAllCheckbox\"\r\n            [toggleAllCheckboxIndeterminate]=\"isIndeterminate\" [toggleAllCheckboxChecked]=\"isChecked\"\r\n            (toggleAll)=\"toggleSelectAll($event)\">\r\n        </cmat-select-search>\r\n    </mat-option>\r\n    }\r\n    @if (customDetails?.length!==0&&props.canNull&&!props.multiple) {\r\n    <mat-option>\u7A7A</mat-option>\r\n    }\r\n    @for (i of customDetails; track $index) {\r\n    @if(i.label){\r\n    @if(i.group){\r\n    <mat-optgroup [label]=\"i.label\">\r\n        @for (child of i.group; track $index) {\r\n        <mat-option [value]=\"child\" [disabled]=\"child.disabled\">\r\n            {{ child.label }}\r\n        </mat-option>\r\n        }\r\n    </mat-optgroup>\r\n    }@else {\r\n    <mat-option [value]=\"i\" [disabled]=\"i.disabled\">{{i.label}}</mat-option>\r\n    }\r\n    }@else {\r\n    <mat-option [value]=\"i\">{{i}}</mat-option>\r\n    }\r\n    }\r\n    }\r\n</mat-select>\r\n}", styles: [":host{width:100%}\n"] }]
+            args: [{ selector: 'cmat-select-search-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatCheckboxModule, MatSelectModule, CmatSelectSearchComponent, ReactiveFormsModule, AsyncPipe], template: "@if(props.multiple){\r\n<mat-select #multiSelect multiple [id]=\"id\" [formControl]=\"formControl\" [placeholder]=\"props.placeholder??''\"\r\n    [required]=\"required\" [tabIndex]=\"props.tabindex\" [compareWith]=\"compareWithFn\"\r\n    [errorStateMatcher]=\"errorStateMatcher\" [aria-label]=\"getAriaLabel()\" [aria-labelledby]=\"getAriaLabelledby()\"\r\n    [disableOptionCentering]=\"props.disableOptionCentering\"\r\n    [typeaheadDebounceInterval]=\"props.typeaheadDebounceInterval\">\r\n    \r\n    @if (props.search) {\r\n    <mat-option>\r\n        <cmat-select-search [formControl]=\"searchControl\" [showToggleAllCheckbox]=\"props.showToggleAllCheckbox\"\r\n            [toggleAllCheckboxIndeterminate]=\"isIndeterminate()\" [toggleAllCheckboxChecked]=\"isChecked()\"\r\n            (toggleAll)=\"toggleSelectAll($event)\">\r\n        </cmat-select-search>\r\n    </mat-option>\r\n    }\r\n\r\n    @if (allOptions().length !== 0 && props.canNull && !props.multiple) {\r\n    <mat-option value=\"\">\u7A7A</mat-option>\r\n    }\r\n\r\n    @for (i of filteredOptions(); track i.value || $index) {\r\n        @if(i.label){\r\n            @if(i.group){\r\n            <mat-optgroup [label]=\"i.label\">\r\n                @for (child of i.group; track child.value || $index) {\r\n                <mat-option [value]=\"child\" [disabled]=\"child.disabled\">\r\n                    {{ child.label }}\r\n                </mat-option>\r\n                }\r\n            </mat-optgroup>\r\n            }@else {\r\n            <mat-option [value]=\"i\" [disabled]=\"i.disabled\">{{i.label}}</mat-option>\r\n            }\r\n        }@else {\r\n        <mat-option [value]=\"i\">{{i}}</mat-option>\r\n        }\r\n    }\r\n</mat-select>\r\n}@else {\r\n<mat-select #multiSelect [id]=\"id\" [formControl]=\"formControl\" [placeholder]=\"props.placeholder??''\"\r\n    [required]=\"required\" [tabIndex]=\"props.tabindex\" [compareWith]=\"compareWithFn\"\r\n    [errorStateMatcher]=\"errorStateMatcher\" [aria-label]=\"getAriaLabel()\" [aria-labelledby]=\"getAriaLabelledby()\"\r\n    [disableOptionCentering]=\"props.disableOptionCentering\"\r\n    [typeaheadDebounceInterval]=\"props.typeaheadDebounceInterval\">\r\n    \r\n    @if (props.search) {\r\n    <mat-option>\r\n        <cmat-select-search [formControl]=\"searchControl\" [showToggleAllCheckbox]=\"props.showToggleAllCheckbox\"\r\n            [toggleAllCheckboxIndeterminate]=\"isIndeterminate()\" [toggleAllCheckboxChecked]=\"isChecked()\"\r\n            (toggleAll)=\"toggleSelectAll($event)\">\r\n        </cmat-select-search>\r\n    </mat-option>\r\n    }\r\n\r\n    @if (allOptions().length !== 0 && props.canNull && !props.multiple) {\r\n    <mat-option value=\"\">\u7A7A</mat-option>\r\n    }\r\n\r\n\r\n    @for (i of filteredOptions(); track i.value || $index) {\r\n        @if(i.label){\r\n            @if(i.group){\r\n            <mat-optgroup [label]=\"i.label\">\r\n                @for (child of i.group; track child.value || $index) {\r\n                <mat-option [value]=\"child\" [disabled]=\"child.disabled\">\r\n                    {{ child.label }}\r\n                </mat-option>\r\n                }\r\n            </mat-optgroup>\r\n            }@else {\r\n            <mat-option [value]=\"i\" [disabled]=\"i.disabled\">{{i.label}}</mat-option>\r\n            }\r\n        }@else {\r\n        <mat-option [value]=\"i\">{{i}}</mat-option>\r\n        }\r\n    }\r\n</mat-select>\r\n}", styles: [":host{width:100%}\n"] }]
         }], ctorParameters: () => [] });
 
 class CmatSelectTreeTypeComponent extends FieldType$1 {
@@ -1004,47 +1369,42 @@ class CmatSelectTreeTypeComponent extends FieldType$1 {
                 customTriggerLabelTemplate: '${name}'
             },
         };
-        this.urlData = [];
-        this.refreshVersion = signal(0, ...(ngDevMode ? [{ debugName: "refreshVersion" }] : /* istanbul ignore next */ []));
-        this._http = inject(HttpClient);
+        this.urlData = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "urlData" }] : /* istanbul ignore next */ []));
+        this._lastDomain = undefined;
         this._destroyRef = inject(DestroyRef);
+        this._domainDataService = inject(DomainDataService);
     }
     ngOnInit() {
-        const url = this.field.props?.domain?.url;
-        if (url && this.field.props?.domain?.code && this.field.props?.domain?.key && this.field.props?.domain?.value) {
-            this._http.get(url).pipe(takeUntilDestroyed(this._destroyRef)).subscribe((data) => {
-                if (data) {
-                    const key = this.field.props?.domain?.key;
-                    const code = this.field.props?.domain?.code;
-                    const datas = data.filter((i) => {
-                        if (key)
-                            return i[key] === code;
-                        return false;
-                    });
-                    if (datas && this.field.props?.domain?.value) {
-                        this.urlData = datas[0][this.field.props?.domain?.value];
-                    }
-                    else {
-                        this.urlData = [];
-                    }
-                }
-                else {
-                    this.urlData = [];
-                }
-                this.refreshVersion.update(value => value + 1);
-            });
-        }
-        else {
-            this.urlData = [];
-            this.refreshVersion.update(value => value + 1);
-        }
+        this._lastDomain = this.props.domain;
+        this._refreshData();
+    }
+    ngDoCheck() {
+        const currentDomain = this.props.domain;
+        let shouldRefresh = false;
+        // 1. 检查 domain 变化
+        if (!isEqual(currentDomain, this._lastDomain)) {
+            this._lastDomain = currentDomain;
+            shouldRefresh = true;
+        }
+        if (shouldRefresh) {
+            this._refreshData();
+        }
+    }
+    _refreshData() {
+        const domain = this.props.domain;
+        // 使用 DomainDataService 加载远程数据
+        this._domainDataService.load(domain, this._destroyRef, {
+            onSuccess: data => this.urlData.set(data),
+            componentName: 'CmatSelectTreeTypeComponent'
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatSelectTreeTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CmatSelectTreeTypeComponent, isStandalone: true, selector: "cmat-select-tree-type", usesInheritance: true, ngImport: i0, template: "<cmat-select-tree [formControl]=\"formControl\" [dataSource]=\"urlData\" [customTriggerLabelTemplate]=\"'${name}'\"\r\n    [multiple]=\"props.multiple\" [overallSearchEnabled]=\"props.search\" [canNull]=\"props.canNull\"\r\n    [showToggleAllCheckbox]=\"props.showToggleAllCheckbox\" [expandable]=\"props.expandable\" [placeholder]=\"placeholder\"\r\n    [tabIndex]=\"props.tabindex\" [required]=\"required\"></cmat-select-tree>", styles: [":host{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CmatSelectTreeComponent, selector: "cmat-select-tree", inputs: ["id", "dataSource", "noEntriesFoundLabel", "showNoFoundLabel", "multiple", "overallSearchEnabled", "canNull", "customTriggerLabelFn", "customTriggerLabelTemplate", "expandable", "showToggleAllCheckbox", "compareWith", "placeholder", "value", "required", "disabled"], exportAs: ["cmatSelectTree"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatSelectTreeTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: CmatSelectTreeTypeComponent, isStandalone: true, selector: "cmat-select-tree-type", usesInheritance: true, ngImport: i0, template: "<cmat-select-tree \r\n    [formControl]=\"formControl\" \r\n    [dataSource]=\"urlData()\" \r\n    [customTriggerLabelTemplate]=\"'${name}'\"\r\n    [multiple]=\"props.multiple\" \r\n    [overallSearchEnabled]=\"props.search\" \r\n    [canNull]=\"props.canNull\"\r\n    [showToggleAllCheckbox]=\"props.showToggleAllCheckbox\" \r\n    [expandable]=\"props.expandable\" \r\n    [placeholder]=\"placeholder\"\r\n    [tabIndex]=\"props.tabindex\" \r\n    [required]=\"required\">\r\n</cmat-select-tree>", styles: [":host{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CmatSelectTreeComponent, selector: "cmat-select-tree", inputs: ["dataSource", "noEntriesFoundLabel", "showNoFoundLabel", "multiple", "overallSearchEnabled", "canNull", "customTriggerLabelFn", "customTriggerLabelTemplate", "expandable", "showToggleAllCheckbox", "compareWith", "placeholder", "value", "required", "disabled"], exportAs: ["cmatSelectTree"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatSelectTreeTypeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatSelectTreeTypeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-select-tree-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, CmatSelectTreeComponent], template: "<cmat-select-tree [formControl]=\"formControl\" [dataSource]=\"urlData\" [customTriggerLabelTemplate]=\"'${name}'\"\r\n    [multiple]=\"props.multiple\" [overallSearchEnabled]=\"props.search\" [canNull]=\"props.canNull\"\r\n    [showToggleAllCheckbox]=\"props.showToggleAllCheckbox\" [expandable]=\"props.expandable\" [placeholder]=\"placeholder\"\r\n    [tabIndex]=\"props.tabindex\" [required]=\"required\"></cmat-select-tree>", styles: [":host{width:100%}\n"] }]
+            args: [{ selector: 'cmat-select-tree-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, CmatSelectTreeComponent], template: "<cmat-select-tree \r\n    [formControl]=\"formControl\" \r\n    [dataSource]=\"urlData()\" \r\n    [customTriggerLabelTemplate]=\"'${name}'\"\r\n    [multiple]=\"props.multiple\" \r\n    [overallSearchEnabled]=\"props.search\" \r\n    [canNull]=\"props.canNull\"\r\n    [showToggleAllCheckbox]=\"props.showToggleAllCheckbox\" \r\n    [expandable]=\"props.expandable\" \r\n    [placeholder]=\"placeholder\"\r\n    [tabIndex]=\"props.tabindex\" \r\n    [required]=\"required\">\r\n</cmat-select-tree>", styles: [":host{width:100%}\n"] }]
         }], ctorParameters: () => [] });
 
 class CmatSelectTableTypeComponent extends FieldType$1 {
@@ -1058,47 +1418,65 @@ class CmatSelectTableTypeComponent extends FieldType$1 {
                 customTriggerLabelTemplate: '${name}'
             },
         };
-        this.urlData = { columns: [], data: [] };
-        this.refreshVersion = signal(0, ...(ngDevMode ? [{ debugName: "refreshVersion" }] : /* istanbul ignore next */ []));
-        this._http = inject(HttpClient);
+        this.urlData = signal({ columns: [], data: [] }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "urlData" }] : /* istanbul ignore next */ []));
+        this._lastDomain = undefined;
         this._destroyRef = inject(DestroyRef);
+        this._domainDataService = inject(DomainDataService);
     }
     ngOnInit() {
-        const url = this.field.props?.domain?.url;
-        if (url && this.field.props?.domain?.code && this.field.props?.domain?.key && this.field.props?.domain?.value) {
-            this._http.get(url).pipe(takeUntilDestroyed(this._destroyRef)).subscribe((data) => {
-                if (data) {
-                    const key = this.field.props?.domain?.key;
-                    const code = this.field.props?.domain?.code;
-                    const datas = data.filter((i) => {
-                        if (key)
-                            return i[key] === code;
-                        return false;
-                    });
-                    if (datas && this.field.props?.domain?.value) {
-                        this.urlData = datas[0][this.field.props?.domain?.value];
-                    }
-                    else {
-                        this.urlData = { columns: [], data: [] };
-                    }
+        this._lastDomain = this.props.domain;
+        this._refreshData();
+    }
+    ngDoCheck() {
+        const currentDomain = this.props.domain;
+        let shouldRefresh = false;
+        // 1. 检查 domain 变化
+        if (!isEqual(currentDomain, this._lastDomain)) {
+            this._lastDomain = currentDomain;
+            shouldRefresh = true;
+        }
+        if (shouldRefresh) {
+            this._refreshData();
+        }
+    }
+    _refreshData() {
+        const domain = this.props.domain;
+        // 使用 DomainDataService 加载远程数据
+        this._domainDataService.load(domain, this._destroyRef, {
+            transform: (rawData) => {
+                // Select-Table 需要特殊验证数据结构
+                if (this._isValidDataSource(rawData)) {
+                    return rawData;
+                }
+                console.warn('Invalid select-table data structure');
+                return [];
+            },
+            onSuccess: (data) => {
+                if (data.length > 0) {
+                    this.urlData.set(data[0]);
                 }
                 else {
-                    this.urlData = { columns: [], data: [] };
+                    this.urlData.set({ columns: [], data: [] });
                 }
-                this.refreshVersion.update(value => value + 1);
-            });
-        }
-        else {
-            this.urlData = { columns: [], data: [] };
-            this.refreshVersion.update(value => value + 1);
-        }
+            },
+            componentName: 'CmatSelectTableTypeComponent'
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatSelectTableTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CmatSelectTableTypeComponent, isStandalone: true, selector: "cmat-select-table-type", usesInheritance: true, ngImport: i0, template: "<cmat-select-table [formControl]=\"formControl\" [dataSource]=\"urlData\" [customTriggerLabelTemplate]=\"'${name}'\"\r\n    [multiple]=\"props.multiple\" [overallSearchEnabled]=\"props.search\" [canNull]=\"props.canNull\"\r\n    [placeholder]=\"placeholder\" [tabIndex]=\"props.tabindex\" [required]=\"required\"></cmat-select-table>", styles: [":host{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CmatSelectTableComponent, selector: "cmat-select-table", inputs: ["id", "dataSource", "noEntriesFoundLabel", "showNoFoundLabel", "isPhone", "multiple", "overallSearchEnabled", "overallSearchVisible", "resetSortOnOpen", "resetFiltersOnOpen", "customTriggerLabelFn", "triggerLabelSort", "customTriggerLabelTemplate", "canNull", "defaultSort", "resetOptionAction", "keyParam", "compareWith", "placeholder", "value", "required", "disabled"], outputs: ["closed"], exportAs: ["cmatSelectTable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    _isValidDataSource(data) {
+        return (typeof data === 'object' &&
+            data !== null &&
+            'columns' in data &&
+            'data' in data &&
+            Array.isArray(data.columns) &&
+            Array.isArray(data.data));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatSelectTableTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: CmatSelectTableTypeComponent, isStandalone: true, selector: "cmat-select-table-type", usesInheritance: true, ngImport: i0, template: "<cmat-select-table \r\n    [formControl]=\"formControl\" \r\n    [dataSource]=\"urlData()\" \r\n    [customTriggerLabelTemplate]=\"'${name}'\"\r\n    [multiple]=\"props.multiple\" \r\n    [overallSearchEnabled]=\"props.search\" \r\n    [canNull]=\"props.canNull\"\r\n    [placeholder]=\"placeholder\" \r\n    [tabIndex]=\"props.tabindex\" \r\n    [required]=\"required\">\r\n</cmat-select-table>", styles: [":host{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CmatSelectTableComponent, selector: "cmat-select-table", inputs: ["dataSource", "noEntriesFoundLabel", "showNoFoundLabel", "isPhone", "multiple", "overallSearchEnabled", "overallSearchVisible", "resetSortOnOpen", "resetFiltersOnOpen", "customTriggerLabelFn", "triggerLabelSort", "customTriggerLabelTemplate", "canNull", "defaultSort", "resetOptionAction", "keyParam", "compareWith", "placeholder", "value", "required", "disabled"], outputs: ["closed"], exportAs: ["cmatSelectTable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatSelectTableTypeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatSelectTableTypeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-select-table-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, CmatSelectTableComponent], template: "<cmat-select-table [formControl]=\"formControl\" [dataSource]=\"urlData\" [customTriggerLabelTemplate]=\"'${name}'\"\r\n    [multiple]=\"props.multiple\" [overallSearchEnabled]=\"props.search\" [canNull]=\"props.canNull\"\r\n    [placeholder]=\"placeholder\" [tabIndex]=\"props.tabindex\" [required]=\"required\"></cmat-select-table>", styles: [":host{width:100%}\n"] }]
+            args: [{ selector: 'cmat-select-table-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, CmatSelectTableComponent], template: "<cmat-select-table \r\n    [formControl]=\"formControl\" \r\n    [dataSource]=\"urlData()\" \r\n    [customTriggerLabelTemplate]=\"'${name}'\"\r\n    [multiple]=\"props.multiple\" \r\n    [overallSearchEnabled]=\"props.search\" \r\n    [canNull]=\"props.canNull\"\r\n    [placeholder]=\"placeholder\" \r\n    [tabIndex]=\"props.tabindex\" \r\n    [required]=\"required\">\r\n</cmat-select-table>", styles: [":host{width:100%}\n"] }]
         }], ctorParameters: () => [] });
 
 class CmatStepperHorizontalTypeComponent extends FieldType$2 {
@@ -1110,10 +1488,10 @@ class CmatStepperHorizontalTypeComponent extends FieldType$2 {
         }
         return field.fieldGroup ? field.fieldGroup.every(f => this.isValid(f)) : true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatStepperHorizontalTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CmatStepperHorizontalTypeComponent, isStandalone: true, selector: "cmat-stepper-horizontal-type", usesInheritance: true, ngImport: i0, template: "<mat-horizontal-stepper [linear]=\"props.isLinear\" [tabIndex]=\"props.tabindex\">\r\n\r\n    <ng-template matStepperIcon=\"edit\">\r\n        <mat-icon class=\"icon-size-4\" [svgIcon]=\"'heroicons_solid:pencil'\"></mat-icon>\r\n    </ng-template>\r\n    <ng-template matStepperIcon=\"done\">\r\n        <mat-icon class=\"icon-size-4\" [svgIcon]=\"'heroicons_outline:check'\"></mat-icon>\r\n    </ng-template>\r\n\r\n    @for (step of field.fieldGroup; track $index) {\r\n    <mat-step [stepControl]=\"step.formControl!\" [editable]=\"step.props?.isEditable||$last\" [optional]=\"step.props?.isOptional\">\r\n        <ng-template matStepLabel>{{ step.props?.label||'' }}</ng-template>\r\n        <div class=\"py-2\">\r\n            <formly-field [field]=\"step\"></formly-field>\r\n        </div>\r\n        <div class=\"mt-2 flex flex-row gap-2\">\r\n            @if($index !== 0){\r\n            <button matStepperPrevious matButton=\"filled\" color=\"primary\" type=\"button\">\u4E0A\u4E00\u6B65</button>\r\n            }\r\n\r\n            @if(!$last){\r\n            <button matStepperNext matButton=\"filled\" color=\"primary\" type=\"button\" [disabled]=\"!isValid(step)\">\r\n                \u4E0B\u4E00\u6B65\r\n            </button>\r\n            }\r\n        </div>\r\n    </mat-step>\r\n    }\r\n\r\n</mat-horizontal-stepper>", styles: [":host{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$3.LegacyFormlyField, selector: "formly-field" }, { kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i2$3.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i2$3.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i2$3.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "headerPrefix", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i2$3.MatStepperNext, selector: "button[matStepperNext]" }, { kind: "directive", type: i2$3.MatStepperPrevious, selector: "button[matStepperPrevious]" }, { kind: "directive", type: i2$3.MatStepperIcon, selector: "ng-template[matStepperIcon]", inputs: ["matStepperIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatStepperHorizontalTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatStepperHorizontalTypeComponent, isStandalone: true, selector: "cmat-stepper-horizontal-type", usesInheritance: true, ngImport: i0, template: "<mat-horizontal-stepper [linear]=\"props.isLinear\" [tabIndex]=\"props.tabindex\">\r\n\r\n    <ng-template matStepperIcon=\"edit\">\r\n        <mat-icon class=\"icon-size-4\" [svgIcon]=\"'heroicons_solid:pencil'\"></mat-icon>\r\n    </ng-template>\r\n    <ng-template matStepperIcon=\"done\">\r\n        <mat-icon class=\"icon-size-4\" [svgIcon]=\"'heroicons_outline:check'\"></mat-icon>\r\n    </ng-template>\r\n\r\n    @for (step of field.fieldGroup; track $index) {\r\n    <mat-step [stepControl]=\"step.formControl!\" [editable]=\"step.props?.isEditable||$last\" [optional]=\"step.props?.isOptional\">\r\n        <ng-template matStepLabel>{{ step.props?.label||'' }}</ng-template>\r\n        <div class=\"py-2\">\r\n            <formly-field [field]=\"step\"></formly-field>\r\n        </div>\r\n        <div class=\"mt-2 flex flex-row gap-2\">\r\n            @if($index !== 0){\r\n            <button matStepperPrevious matButton=\"filled\" color=\"primary\" type=\"button\">\u4E0A\u4E00\u6B65</button>\r\n            }\r\n\r\n            @if(!$last){\r\n            <button matStepperNext matButton=\"filled\" color=\"primary\" type=\"button\" [disabled]=\"!isValid(step)\">\r\n                \u4E0B\u4E00\u6B65\r\n            </button>\r\n            }\r\n        </div>\r\n    </mat-step>\r\n    }\r\n\r\n</mat-horizontal-stepper>", styles: [":host{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$3.LegacyFormlyField, selector: "formly-field" }, { kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i2$3.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i2$3.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i2$3.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "aria-label", "headerPrefix", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i2$3.MatStepperNext, selector: "button[matStepperNext]" }, { kind: "directive", type: i2$3.MatStepperPrevious, selector: "button[matStepperPrevious]" }, { kind: "directive", type: i2$3.MatStepperIcon, selector: "ng-template[matStepperIcon]", inputs: ["matStepperIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatStepperHorizontalTypeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatStepperHorizontalTypeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-stepper-horizontal-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormlyModule, MatStepperModule, MatButtonModule, ReactiveFormsModule, MatIconModule], template: "<mat-horizontal-stepper [linear]=\"props.isLinear\" [tabIndex]=\"props.tabindex\">\r\n\r\n    <ng-template matStepperIcon=\"edit\">\r\n        <mat-icon class=\"icon-size-4\" [svgIcon]=\"'heroicons_solid:pencil'\"></mat-icon>\r\n    </ng-template>\r\n    <ng-template matStepperIcon=\"done\">\r\n        <mat-icon class=\"icon-size-4\" [svgIcon]=\"'heroicons_outline:check'\"></mat-icon>\r\n    </ng-template>\r\n\r\n    @for (step of field.fieldGroup; track $index) {\r\n    <mat-step [stepControl]=\"step.formControl!\" [editable]=\"step.props?.isEditable||$last\" [optional]=\"step.props?.isOptional\">\r\n        <ng-template matStepLabel>{{ step.props?.label||'' }}</ng-template>\r\n        <div class=\"py-2\">\r\n            <formly-field [field]=\"step\"></formly-field>\r\n        </div>\r\n        <div class=\"mt-2 flex flex-row gap-2\">\r\n            @if($index !== 0){\r\n            <button matStepperPrevious matButton=\"filled\" color=\"primary\" type=\"button\">\u4E0A\u4E00\u6B65</button>\r\n            }\r\n\r\n            @if(!$last){\r\n            <button matStepperNext matButton=\"filled\" color=\"primary\" type=\"button\" [disabled]=\"!isValid(step)\">\r\n                \u4E0B\u4E00\u6B65\r\n            </button>\r\n            }\r\n        </div>\r\n    </mat-step>\r\n    }\r\n\r\n</mat-horizontal-stepper>", styles: [":host{width:100%}\n"] }]
         }] });
@@ -1127,10 +1505,10 @@ class CmatStepperVerticalTypeComponent extends FieldType$2 {
         }
         return field.fieldGroup ? field.fieldGroup.every(f => this.isValid(f)) : true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatStepperVerticalTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CmatStepperVerticalTypeComponent, isStandalone: true, selector: "cmat-stepper-vertical-type", usesInheritance: true, ngImport: i0, template: "<mat-vertical-stepper [linear]=\"props.isLinear\" [tabIndex]=\"props.tabindex\">\r\n    <ng-template matStepperIcon=\"edit\">\r\n        <mat-icon class=\"icon-size-4\" [svgIcon]=\"'heroicons_solid:pencil'\"></mat-icon>\r\n    </ng-template>\r\n    <ng-template matStepperIcon=\"done\">\r\n        <mat-icon class=\"icon-size-4\" [svgIcon]=\"'heroicons_outline:check'\"></mat-icon>\r\n    </ng-template>\r\n\r\n    @for (step of field.fieldGroup; track $index) {\r\n    <mat-step [stepControl]=\"step.formControl!\" [editable]=\"step.props?.isEditable||$last\" [optional]=\"step.props?.isOptional\">\r\n        <ng-template matStepLabel>{{ step.props?.label||'' }}</ng-template>\r\n        <div class=\"py-2\">\r\n            <formly-field [field]=\"step\"></formly-field>\r\n        </div>\r\n\r\n        <div class=\"mt-2 flex flex-row gap-2\">\r\n            @if($index!==0){\r\n            <button matStepperPrevious matButton=\"filled\" color=\"primary\" type=\"button\">\u4E0A\u4E00\u6B65</button>\r\n            }\r\n\r\n            @if(!$last){\r\n            <button matStepperNext matButton=\"filled\" color=\"primary\" type=\"button\" [disabled]=\"!isValid(step)\">\r\n                \u4E0B\u4E00\u6B65\r\n            </button>\r\n            }\r\n        </div>\r\n    </mat-step>\r\n    }\r\n</mat-vertical-stepper>", styles: [":host{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$3.LegacyFormlyField, selector: "formly-field" }, { kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i2$3.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i2$3.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i2$3.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "headerPrefix", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i2$3.MatStepperNext, selector: "button[matStepperNext]" }, { kind: "directive", type: i2$3.MatStepperPrevious, selector: "button[matStepperPrevious]" }, { kind: "directive", type: i2$3.MatStepperIcon, selector: "ng-template[matStepperIcon]", inputs: ["matStepperIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatStepperVerticalTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatStepperVerticalTypeComponent, isStandalone: true, selector: "cmat-stepper-vertical-type", usesInheritance: true, ngImport: i0, template: "<mat-vertical-stepper [linear]=\"props.isLinear\" [tabIndex]=\"props.tabindex\">\r\n    <ng-template matStepperIcon=\"edit\">\r\n        <mat-icon class=\"icon-size-4\" [svgIcon]=\"'heroicons_solid:pencil'\"></mat-icon>\r\n    </ng-template>\r\n    <ng-template matStepperIcon=\"done\">\r\n        <mat-icon class=\"icon-size-4\" [svgIcon]=\"'heroicons_outline:check'\"></mat-icon>\r\n    </ng-template>\r\n\r\n    @for (step of field.fieldGroup; track $index) {\r\n    <mat-step [stepControl]=\"step.formControl!\" [editable]=\"step.props?.isEditable||$last\" [optional]=\"step.props?.isOptional\">\r\n        <ng-template matStepLabel>{{ step.props?.label||'' }}</ng-template>\r\n        <div class=\"py-2\">\r\n            <formly-field [field]=\"step\"></formly-field>\r\n        </div>\r\n\r\n        <div class=\"mt-2 flex flex-row gap-2\">\r\n            @if($index!==0){\r\n            <button matStepperPrevious matButton=\"filled\" color=\"primary\" type=\"button\">\u4E0A\u4E00\u6B65</button>\r\n            }\r\n\r\n            @if(!$last){\r\n            <button matStepperNext matButton=\"filled\" color=\"primary\" type=\"button\" [disabled]=\"!isValid(step)\">\r\n                \u4E0B\u4E00\u6B65\r\n            </button>\r\n            }\r\n        </div>\r\n    </mat-step>\r\n    }\r\n</mat-vertical-stepper>", styles: [":host{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$3.LegacyFormlyField, selector: "formly-field" }, { kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i2$3.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i2$3.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i2$3.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "aria-label", "headerPrefix", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i2$3.MatStepperNext, selector: "button[matStepperNext]" }, { kind: "directive", type: i2$3.MatStepperPrevious, selector: "button[matStepperPrevious]" }, { kind: "directive", type: i2$3.MatStepperIcon, selector: "ng-template[matStepperIcon]", inputs: ["matStepperIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatStepperVerticalTypeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatStepperVerticalTypeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-stepper-vertical-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormlyModule, MatStepperModule, MatButtonModule, ReactiveFormsModule, MatIconModule], template: "<mat-vertical-stepper [linear]=\"props.isLinear\" [tabIndex]=\"props.tabindex\">\r\n    <ng-template matStepperIcon=\"edit\">\r\n        <mat-icon class=\"icon-size-4\" [svgIcon]=\"'heroicons_solid:pencil'\"></mat-icon>\r\n    </ng-template>\r\n    <ng-template matStepperIcon=\"done\">\r\n        <mat-icon class=\"icon-size-4\" [svgIcon]=\"'heroicons_outline:check'\"></mat-icon>\r\n    </ng-template>\r\n\r\n    @for (step of field.fieldGroup; track $index) {\r\n    <mat-step [stepControl]=\"step.formControl!\" [editable]=\"step.props?.isEditable||$last\" [optional]=\"step.props?.isOptional\">\r\n        <ng-template matStepLabel>{{ step.props?.label||'' }}</ng-template>\r\n        <div class=\"py-2\">\r\n            <formly-field [field]=\"step\"></formly-field>\r\n        </div>\r\n\r\n        <div class=\"mt-2 flex flex-row gap-2\">\r\n            @if($index!==0){\r\n            <button matStepperPrevious matButton=\"filled\" color=\"primary\" type=\"button\">\u4E0A\u4E00\u6B65</button>\r\n            }\r\n\r\n            @if(!$last){\r\n            <button matStepperNext matButton=\"filled\" color=\"primary\" type=\"button\" [disabled]=\"!isValid(step)\">\r\n                \u4E0B\u4E00\u6B65\r\n            </button>\r\n            }\r\n        </div>\r\n    </mat-step>\r\n    }\r\n</mat-vertical-stepper>", styles: [":host{width:100%}\n"] }]
         }] });
@@ -1139,15 +1517,41 @@ class CmatTableTypeComponent extends FieldArrayType {
     constructor() {
         super();
         this.inlineform = new FormGroup({});
-        this.currentMode = {};
-        this.displayedColumns = [];
-        this.refreshVersion = signal(0, ...(ngDevMode ? [{ debugName: "refreshVersion" }] : /* istanbul ignore next */ []));
-        this.dialogType = '';
+        this.columns = computed(() => {
+            const fieldGroup = this._fieldModel.fieldArray?.fieldGroup?.[0]?.fieldGroup ?? [];
+            return fieldGroup
+                .filter(field => field.props?.showColumn)
+                .map(field => ({
+                key: String(field.key ?? ''),
+                label: field.props?.label ?? '',
+            }));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        this.displayedColumns = computed(() => {
+            const cols = this.columns().map(c => c.key);
+            if (this.props.disabled) {
+                return cols;
+            }
+            return [...cols, 'operate'];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayedColumns" }] : /* istanbul ignore next */ []));
+        this.refreshVersion = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "refreshVersion" }] : /* istanbul ignore next */ []));
+        this.currentMode = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentMode" }] : /* istanbul ignore next */ []));
+        this.currentIndex = signal(-1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentIndex" }] : /* istanbul ignore next */ []));
+        this.dialogType = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dialogType" }] : /* istanbul ignore next */ []));
         this.defaultOptions = {
             props: {
                 addText: '新增'
             },
         };
+        this.dialogRef = viewChild('dialogRef', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dialogRef" }] : /* istanbul ignore next */ []));
+        this.table = viewChild('table', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "table" }] : /* istanbul ignore next */ []));
         this._dialog = inject(MatDialog);
         this._viewContainerRef = inject(ViewContainerRef);
     }
@@ -1155,7 +1559,7 @@ class CmatTableTypeComponent extends FieldArrayType {
         return this._fieldModel.fieldArray?.fieldGroup ?? [];
     }
     get key() {
-        return this._fieldModel.fieldArray?.fieldGroup?.[0]?.id ?? '';
+        return this._fieldModel.fieldArray?.fieldGroup?.[0]?.key ?? 'data';
     }
     get _tableProps() {
         return this.props;
@@ -1163,48 +1567,24 @@ class CmatTableTypeComponent extends FieldArrayType {
     get _fieldModel() {
         return this.field;
     }
-    ngOnInit() {
-        this.columns = (this._fieldModel.fieldArray?.fieldGroup?.[0]?.fieldGroup ?? [])
-            .filter(field => field.props?.showColumn).map(field => ({
-            key: String(field.key ?? ''),
-            label: field.props?.label ?? '',
-        }));
-        if (this._tableProps.disabled) {
-            this.displayedColumns = [...this.columns.map(column => column.key)];
-        }
-        else {
-            this.displayedColumns = [...this.columns.map(column => column.key), 'operate'];
-        }
-    }
     addRow() {
-        this._dialogRef = this._dialog
-            .open(this.dialogRef, {
-            panelClass: ['cmat-table-dialog-container'],
-            viewContainerRef: this._viewContainerRef
-        });
-        this._dialogRef.afterClosed()
-            .subscribe(() => { this.dialogType = ''; });
-        this.dialogType = 'add';
-        this.currentMode = {};
+        this.dialogType.set('add');
+        this.currentMode.set({});
         this.inlineform.reset();
+        this._openDialog();
     }
     editRow(item, index) {
-        this.currentIndex = index;
-        this._dialogRef = this._dialog
-            .open(this.dialogRef, {
-            panelClass: ['cmat-table-dialog-container'],
-            viewContainerRef: this._viewContainerRef
+        this.currentIndex.set(index);
+        this.dialogType.set('edit');
+        this.currentMode.set({
+            [this.key]: { ...item } // 浅拷贝以防止直接修改原数据直到确认
         });
-        this._dialogRef.afterClosed()
-            .subscribe(() => { this.dialogType = ''; });
-        this.dialogType = 'edit';
-        this.currentMode = {
-            [this.key]: item
-        };
+        this._openDialog();
     }
-    deleteRow(id) {
-        this.remove(id);
-        this.table.renderRows();
+    deleteRow(index) {
+        this.remove(index);
+        // 触发变更检测以更新表格视图
+        this.refreshVersion.update(v => v + 1);
     }
     confirm() {
         if (this.inlineform.invalid) {
@@ -1212,37 +1592,53 @@ class CmatTableTypeComponent extends FieldArrayType {
             return;
         }
         const model = this.model;
-        const currentValue = this.currentMode[this.key];
-        if (this.dialogType === 'add' && currentValue) {
+        // 获取表单中编辑/新增的实际数据对象
+        const currentValue = this.currentMode()[this.key];
+        if (!currentValue) {
+            this._dialogRef.close();
+            return;
+        }
+        if (this.dialogType() === 'add') {
             this.add(model?.length ?? 0, currentValue);
         }
-        else if (this.dialogType === 'edit' && currentValue && model) {
-            model[this.currentIndex] = currentValue;
+        else if (this.dialogType() === 'edit') {
+            const index = this.currentIndex();
+            if (index > -1 && model) {
+                model[index] = currentValue;
+                this.formControl.patchValue([...model]);
+            }
         }
-        this.table.renderRows();
-        this.refreshVersion.update(value => value + 1);
+        this.refreshVersion.update(v => v + 1);
+        this.table()?.renderRows();
         this._dialogRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatTableTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CmatTableTypeComponent, isStandalone: true, selector: "cmat-table-type", viewQueries: [{ propertyName: "dialogRef", first: true, predicate: ["dialogRef"], descendants: true }, { propertyName: "table", first: true, predicate: ["table"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"relative flex flex-col sm:flex-row flex-none sm:items-center sm:justify-between p-2 border-b mb-1\">\r\n    <div>\r\n        @if(props.label){\r\n        <legend class=\"text-lg\">\r\n            {{ props.label }}\r\n            @if(props.required){\r\n            <span>*</span>\r\n            }\r\n        </legend>\r\n        }\r\n        @if(props.description){\r\n        <p>{{ props.description }}</p>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"cmat-table-type\" [attr.data-refresh]=\"refreshVersion()\">\r\n    @if(!props.disabled){\r\n    <div class=\"flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4 print:hidden\">\r\n        <button class=\"ml-4\" matButton=\"filled\" [color]=\"'primary'\" (click)=\"addRow()\">\r\n            <mat-icon [svgIcon]=\"'heroicons_outline:plus'\"></mat-icon>\r\n            <span class=\"ml-2\">{{props.addText}}</span>\r\n        </button>\r\n    </div>\r\n    }\r\n</div>\r\n\r\n\r\n<table #table mat-table class=\"w-full\" [dataSource]=\"model||[]\" [tabIndex]=\"props.tabindex\">\r\n    @for (column of columns; track $index) {\r\n    <ng-container [matColumnDef]=\"column.key\">\r\n        <th *matHeaderCellDef mat-header-cell> {{ column.label }} </th>\r\n        <td *matCellDef=\"let element; let i = index\" mat-cell>\r\n            <div class=\" has-label-on-mobile\" [attr.data-label]=\"column.label +':'\">\r\n                {{element[column.key]}}\r\n            </div>\r\n        </td>\r\n    </ng-container>\r\n    }\r\n\r\n    <ng-container matColumnDef=\"operate\" stickyEnd>\r\n        <th *matHeaderCellDef mat-header-cell class=\"print:hidden\">\u64CD\u4F5C</th>\r\n        <td *matCellDef=\"let element; let i = index\" mat-cell class=\"w-24 print:hidden\">\r\n            <div class=\"flex flex-col lg:w-full\">\r\n                <div class=\"relative flex flex-row gap-2 lg:m-2 justify-center\">\r\n                    <button type=\"button\" class=\"w-8 min-h-8 h-8 max-w-8 lg:opacity-0 lg:group-hover:opacity-100\"\r\n                    matIconButton  [matTooltip]=\"'\u7F16\u8F91'\" (click)=\"editRow(element,i)\">\r\n                    <mat-icon class=\"icon-size-5\" color=\"primary\" [svgIcon]=\"'heroicons_solid:pencil-square'\">\r\n                    </mat-icon>\r\n                </button>\r\n    \r\n                <button type=\"button\" class=\"w-8 min-h-8 h-8 max-w-8 lg:opacity-0 lg:group-hover:opacity-100\"\r\n                    matIconButton  [matTooltip]=\"'\u79FB\u9664'\" (click)=\"deleteRow(i)\">\r\n                    <mat-icon class=\"icon-size-5\" color=\"warn\" [svgIcon]=\"'heroicons_solid:trash'\"></mat-icon>\r\n                </button>\r\n                </div>\r\n            </div>\r\n        </td>\r\n    </ng-container>\r\n\r\n    <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\r\n    <tr *matRowDef=\"let row; columns: displayedColumns;\" mat-row class=\"group\"></tr>\r\n</table>\r\n\r\n<ng-template #inlineTable>\r\n    <div class=\"overflow-y-auto scrollbar-custom w-full\">\r\n        <form [formGroup]=\"inlineform\">\r\n            <formly-form [fields]=\"fieldArray\" [model]=\"currentMode\" [form]=\"inlineform\"></formly-form>\r\n        </form>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #dialogRef>\r\n    <div mat-dialog-title cdkDrag class=\"-mt-6\" cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle>\r\n        <h2 class=\"pointer-events-none text-xl\">{{ props.label +'\u8BE6\u7EC6\u9875'}}</h2>\r\n    </div>\r\n\r\n    <mat-dialog-content>\r\n        <ng-container *ngTemplateOutlet=\"inlineTable\"></ng-container>\r\n    </mat-dialog-content>\r\n\r\n    <mat-dialog-actions>\r\n        <div class=\"w-full flex justify-end items-center\">\r\n            <button matButton=\"filled\" color=\"primary\" cdkFocusInitial (click)=\"confirm()\">\r\n                \u786E\u5B9A\r\n            </button>\r\n            <button matButton=\"outlined\" mat-dialog-close>\r\n                \u53D6\u6D88\r\n            </button>\r\n        </div>\r\n    </mat-dialog-actions>\r\n</ng-template>\r\n", styles: [":host{width:100%}.mat-column-operate{width:8rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$3.LegacyFormlyForm, selector: "formly-form" }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i6.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i6.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i6.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i6.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    _openDialog() {
+        const template = this.dialogRef();
+        if (!template)
+            return;
+        this._dialogRef = this._dialog.open(template, {
+            panelClass: ['cmat-table-dialog-container'],
+            viewContainerRef: this._viewContainerRef
+        });
+        this._dialogRef.afterClosed().subscribe(() => {
+            this.dialogType.set('');
+            this.currentIndex.set(-1);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatTableTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatTableTypeComponent, isStandalone: true, selector: "cmat-table-type", viewQueries: [{ propertyName: "dialogRef", first: true, predicate: ["dialogRef"], descendants: true, isSignal: true }, { propertyName: "table", first: true, predicate: ["table"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"relative flex flex-row flex-none items-center justify-between p-2 border-b\">\r\n    <div>\r\n        @if(props.label){\r\n        <legend class=\"text-lg\">\r\n            {{ props.label }}\r\n            @if(props.required){\r\n            <span>*</span>\r\n            }\r\n        </legend>\r\n        }\r\n        @if(props.description){\r\n        <p>{{ props.description }}</p>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"cmat-table-type\" [attr.data-refresh]=\"refreshVersion()\">\r\n        @if(!props.disabled){\r\n        <div class=\"flex shrink-0 items-center ml-0 md:ml-4 print:hidden\">\r\n            <button matButton=\"filled\" [color]=\"'primary'\" (click)=\"addRow()\">\r\n                <mat-icon [svgIcon]=\"'heroicons_outline:plus'\"></mat-icon>\r\n                <span class=\"ml-2\">{{props.addText}}</span>\r\n            </button>\r\n        </div>\r\n        }\r\n    </div>\r\n</div>\r\n\r\n<table #table mat-table class=\"w-full\" [dataSource]=\"model||[]\" [tabIndex]=\"props.tabindex\">\r\n    @for (column of columns(); track $index) {\r\n    <ng-container [matColumnDef]=\"column.key\">\r\n        <th *matHeaderCellDef mat-header-cell> {{ column.label }} </th>\r\n        <td *matCellDef=\"let element; let i = index\" mat-cell>\r\n            <div class=\" has-label-on-mobile\" [attr.data-label]=\"column.label +':'\">\r\n                {{element[column.key]}}\r\n            </div>\r\n        </td>\r\n    </ng-container>\r\n    }\r\n\r\n    <ng-container matColumnDef=\"operate\" stickyEnd>\r\n        <th *matHeaderCellDef mat-header-cell class=\"print:hidden\">\u64CD\u4F5C</th>\r\n        <td *matCellDef=\"let element; let i = index\" mat-cell class=\"w-24 print:hidden\">\r\n            <div class=\"flex flex-col lg:w-full\">\r\n                <div class=\"relative flex flex-row gap-2 lg:m-2 justify-center\">\r\n                    <button type=\"button\" class=\"w-8 min-h-8 h-8 max-w-8 lg:opacity-0 lg:group-hover:opacity-100\"\r\n                        matIconButton [matTooltip]=\"'\u7F16\u8F91'\" (click)=\"editRow(element,i)\">\r\n                        <mat-icon class=\"icon-size-5\" color=\"primary\" [svgIcon]=\"'heroicons_solid:pencil-square'\">\r\n                        </mat-icon>\r\n                    </button>\r\n\r\n                    <button type=\"button\" class=\"w-8 min-h-8 h-8 max-w-8 lg:opacity-0 lg:group-hover:opacity-100\"\r\n                        matIconButton [matTooltip]=\"'\u79FB\u9664'\" (click)=\"deleteRow(i)\">\r\n                        <mat-icon class=\"icon-size-5\" color=\"warn\" [svgIcon]=\"'heroicons_solid:trash'\"></mat-icon>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </td>\r\n    </ng-container>\r\n\r\n    <tr *matHeaderRowDef=\"displayedColumns()\" mat-header-row></tr>\r\n    <tr *matRowDef=\"let row; columns: displayedColumns();\" mat-row class=\"group\"></tr>\r\n</table>\r\n\r\n<ng-template #inlineTable>\r\n    <div class=\"overflow-y-auto scrollbar-custom w-full\">\r\n        <form [formGroup]=\"inlineform\">\r\n            <formly-form [fields]=\"fieldArray\" [model]=\"currentMode()\" [form]=\"inlineform\"></formly-form>\r\n        </form>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #dialogRef>\r\n    <div mat-dialog-title cdkDrag class=\"-mt-6\" cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle>\r\n        <h2 class=\"pointer-events-none text-xl\">{{ props.label +'\u8BE6\u7EC6\u9875'}}</h2>\r\n    </div>\r\n\r\n    <mat-dialog-content>\r\n        <ng-container *ngTemplateOutlet=\"inlineTable\"></ng-container>\r\n    </mat-dialog-content>\r\n\r\n    <mat-dialog-actions>\r\n        <div class=\"w-full flex justify-end items-center\">\r\n            <button matButton=\"filled\" color=\"primary\" cdkFocusInitial (click)=\"confirm()\">\r\n                \u786E\u5B9A\r\n            </button>\r\n            <button matButton=\"outlined\" mat-dialog-close>\r\n                \u53D6\u6D88\r\n            </button>\r\n        </div>\r\n    </mat-dialog-actions>\r\n</ng-template>", styles: [":host{width:100%}.mat-column-operate{width:8rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$3.LegacyFormlyForm, selector: "formly-form" }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i6.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i6.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i6.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i6.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatTableTypeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatTableTypeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-table-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule, MatIconModule, MatTableModule, FormsModule, FormlyModule, CdkDrag,
-                        ReactiveFormsModule, MatDialogModule, NgTemplateOutlet, MatTooltipModule], template: "<div class=\"relative flex flex-col sm:flex-row flex-none sm:items-center sm:justify-between p-2 border-b mb-1\">\r\n    <div>\r\n        @if(props.label){\r\n        <legend class=\"text-lg\">\r\n            {{ props.label }}\r\n            @if(props.required){\r\n            <span>*</span>\r\n            }\r\n        </legend>\r\n        }\r\n        @if(props.description){\r\n        <p>{{ props.description }}</p>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"cmat-table-type\" [attr.data-refresh]=\"refreshVersion()\">\r\n    @if(!props.disabled){\r\n    <div class=\"flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4 print:hidden\">\r\n        <button class=\"ml-4\" matButton=\"filled\" [color]=\"'primary'\" (click)=\"addRow()\">\r\n            <mat-icon [svgIcon]=\"'heroicons_outline:plus'\"></mat-icon>\r\n            <span class=\"ml-2\">{{props.addText}}</span>\r\n        </button>\r\n    </div>\r\n    }\r\n</div>\r\n\r\n\r\n<table #table mat-table class=\"w-full\" [dataSource]=\"model||[]\" [tabIndex]=\"props.tabindex\">\r\n    @for (column of columns; track $index) {\r\n    <ng-container [matColumnDef]=\"column.key\">\r\n        <th *matHeaderCellDef mat-header-cell> {{ column.label }} </th>\r\n        <td *matCellDef=\"let element; let i = index\" mat-cell>\r\n            <div class=\" has-label-on-mobile\" [attr.data-label]=\"column.label +':'\">\r\n                {{element[column.key]}}\r\n            </div>\r\n        </td>\r\n    </ng-container>\r\n    }\r\n\r\n    <ng-container matColumnDef=\"operate\" stickyEnd>\r\n        <th *matHeaderCellDef mat-header-cell class=\"print:hidden\">\u64CD\u4F5C</th>\r\n        <td *matCellDef=\"let element; let i = index\" mat-cell class=\"w-24 print:hidden\">\r\n            <div class=\"flex flex-col lg:w-full\">\r\n                <div class=\"relative flex flex-row gap-2 lg:m-2 justify-center\">\r\n                    <button type=\"button\" class=\"w-8 min-h-8 h-8 max-w-8 lg:opacity-0 lg:group-hover:opacity-100\"\r\n                    matIconButton  [matTooltip]=\"'\u7F16\u8F91'\" (click)=\"editRow(element,i)\">\r\n                    <mat-icon class=\"icon-size-5\" color=\"primary\" [svgIcon]=\"'heroicons_solid:pencil-square'\">\r\n                    </mat-icon>\r\n                </button>\r\n    \r\n                <button type=\"button\" class=\"w-8 min-h-8 h-8 max-w-8 lg:opacity-0 lg:group-hover:opacity-100\"\r\n                    matIconButton  [matTooltip]=\"'\u79FB\u9664'\" (click)=\"deleteRow(i)\">\r\n                    <mat-icon class=\"icon-size-5\" color=\"warn\" [svgIcon]=\"'heroicons_solid:trash'\"></mat-icon>\r\n                </button>\r\n                </div>\r\n            </div>\r\n        </td>\r\n    </ng-container>\r\n\r\n    <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\r\n    <tr *matRowDef=\"let row; columns: displayedColumns;\" mat-row class=\"group\"></tr>\r\n</table>\r\n\r\n<ng-template #inlineTable>\r\n    <div class=\"overflow-y-auto scrollbar-custom w-full\">\r\n        <form [formGroup]=\"inlineform\">\r\n            <formly-form [fields]=\"fieldArray\" [model]=\"currentMode\" [form]=\"inlineform\"></formly-form>\r\n        </form>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #dialogRef>\r\n    <div mat-dialog-title cdkDrag class=\"-mt-6\" cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle>\r\n        <h2 class=\"pointer-events-none text-xl\">{{ props.label +'\u8BE6\u7EC6\u9875'}}</h2>\r\n    </div>\r\n\r\n    <mat-dialog-content>\r\n        <ng-container *ngTemplateOutlet=\"inlineTable\"></ng-container>\r\n    </mat-dialog-content>\r\n\r\n    <mat-dialog-actions>\r\n        <div class=\"w-full flex justify-end items-center\">\r\n            <button matButton=\"filled\" color=\"primary\" cdkFocusInitial (click)=\"confirm()\">\r\n                \u786E\u5B9A\r\n            </button>\r\n            <button matButton=\"outlined\" mat-dialog-close>\r\n                \u53D6\u6D88\r\n            </button>\r\n        </div>\r\n    </mat-dialog-actions>\r\n</ng-template>\r\n", styles: [":host{width:100%}.mat-column-operate{width:8rem;text-align:center}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { dialogRef: [{
-                type: ViewChild,
-                args: ['dialogRef']
-            }], table: [{
-                type: ViewChild,
-                args: ['table']
-            }] } });
+                        ReactiveFormsModule, MatDialogModule, NgTemplateOutlet, MatTooltipModule], template: "<div class=\"relative flex flex-row flex-none items-center justify-between p-2 border-b\">\r\n    <div>\r\n        @if(props.label){\r\n        <legend class=\"text-lg\">\r\n            {{ props.label }}\r\n            @if(props.required){\r\n            <span>*</span>\r\n            }\r\n        </legend>\r\n        }\r\n        @if(props.description){\r\n        <p>{{ props.description }}</p>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"cmat-table-type\" [attr.data-refresh]=\"refreshVersion()\">\r\n        @if(!props.disabled){\r\n        <div class=\"flex shrink-0 items-center ml-0 md:ml-4 print:hidden\">\r\n            <button matButton=\"filled\" [color]=\"'primary'\" (click)=\"addRow()\">\r\n                <mat-icon [svgIcon]=\"'heroicons_outline:plus'\"></mat-icon>\r\n                <span class=\"ml-2\">{{props.addText}}</span>\r\n            </button>\r\n        </div>\r\n        }\r\n    </div>\r\n</div>\r\n\r\n<table #table mat-table class=\"w-full\" [dataSource]=\"model||[]\" [tabIndex]=\"props.tabindex\">\r\n    @for (column of columns(); track $index) {\r\n    <ng-container [matColumnDef]=\"column.key\">\r\n        <th *matHeaderCellDef mat-header-cell> {{ column.label }} </th>\r\n        <td *matCellDef=\"let element; let i = index\" mat-cell>\r\n            <div class=\" has-label-on-mobile\" [attr.data-label]=\"column.label +':'\">\r\n                {{element[column.key]}}\r\n            </div>\r\n        </td>\r\n    </ng-container>\r\n    }\r\n\r\n    <ng-container matColumnDef=\"operate\" stickyEnd>\r\n        <th *matHeaderCellDef mat-header-cell class=\"print:hidden\">\u64CD\u4F5C</th>\r\n        <td *matCellDef=\"let element; let i = index\" mat-cell class=\"w-24 print:hidden\">\r\n            <div class=\"flex flex-col lg:w-full\">\r\n                <div class=\"relative flex flex-row gap-2 lg:m-2 justify-center\">\r\n                    <button type=\"button\" class=\"w-8 min-h-8 h-8 max-w-8 lg:opacity-0 lg:group-hover:opacity-100\"\r\n                        matIconButton [matTooltip]=\"'\u7F16\u8F91'\" (click)=\"editRow(element,i)\">\r\n                        <mat-icon class=\"icon-size-5\" color=\"primary\" [svgIcon]=\"'heroicons_solid:pencil-square'\">\r\n                        </mat-icon>\r\n                    </button>\r\n\r\n                    <button type=\"button\" class=\"w-8 min-h-8 h-8 max-w-8 lg:opacity-0 lg:group-hover:opacity-100\"\r\n                        matIconButton [matTooltip]=\"'\u79FB\u9664'\" (click)=\"deleteRow(i)\">\r\n                        <mat-icon class=\"icon-size-5\" color=\"warn\" [svgIcon]=\"'heroicons_solid:trash'\"></mat-icon>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </td>\r\n    </ng-container>\r\n\r\n    <tr *matHeaderRowDef=\"displayedColumns()\" mat-header-row></tr>\r\n    <tr *matRowDef=\"let row; columns: displayedColumns();\" mat-row class=\"group\"></tr>\r\n</table>\r\n\r\n<ng-template #inlineTable>\r\n    <div class=\"overflow-y-auto scrollbar-custom w-full\">\r\n        <form [formGroup]=\"inlineform\">\r\n            <formly-form [fields]=\"fieldArray\" [model]=\"currentMode()\" [form]=\"inlineform\"></formly-form>\r\n        </form>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #dialogRef>\r\n    <div mat-dialog-title cdkDrag class=\"-mt-6\" cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle>\r\n        <h2 class=\"pointer-events-none text-xl\">{{ props.label +'\u8BE6\u7EC6\u9875'}}</h2>\r\n    </div>\r\n\r\n    <mat-dialog-content>\r\n        <ng-container *ngTemplateOutlet=\"inlineTable\"></ng-container>\r\n    </mat-dialog-content>\r\n\r\n    <mat-dialog-actions>\r\n        <div class=\"w-full flex justify-end items-center\">\r\n            <button matButton=\"filled\" color=\"primary\" cdkFocusInitial (click)=\"confirm()\">\r\n                \u786E\u5B9A\r\n            </button>\r\n            <button matButton=\"outlined\" mat-dialog-close>\r\n                \u53D6\u6D88\r\n            </button>\r\n        </div>\r\n    </mat-dialog-actions>\r\n</ng-template>", styles: [":host{width:100%}.mat-column-operate{width:8rem;text-align:center}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { dialogRef: [{ type: i0.ViewChild, args: ['dialogRef', { isSignal: true }] }], table: [{ type: i0.ViewChild, args: ['table', { isSignal: true }] }] } });
 
 class CmatTabTypeComponent extends FieldType$1 {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatTabTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CmatTabTypeComponent, isStandalone: true, selector: "cmat-tab-type", usesInheritance: true, ngImport: i0, template: "<mat-tab-group [tabIndex]=\"props.tabindex\">\r\n    @for (tab of field.fieldGroup; track $index) {\r\n    <mat-tab [label]=\"tab.props?.label||''\" [disabled]=\"tab.props?.disabled\">\r\n        <div class=\"py-2\">\r\n            <formly-field [field]=\"tab\"></formly-field>\r\n        </div>\r\n    </mat-tab>\r\n    }\r\n</mat-tab-group>", styles: [":host{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i1$9.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i1$9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$3.LegacyFormlyField, selector: "formly-field" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatTabTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatTabTypeComponent, isStandalone: true, selector: "cmat-tab-type", usesInheritance: true, ngImport: i0, template: "<mat-tab-group [tabIndex]=\"props.tabindex\">\r\n    @for (tab of field.fieldGroup; track $index) {\r\n    <mat-tab [label]=\"tab.props?.label||''\" [disabled]=\"tab.props?.disabled\">\r\n        <div class=\"py-2\">\r\n            <formly-field [field]=\"tab\"></formly-field>\r\n        </div>\r\n    </mat-tab>\r\n    }\r\n</mat-tab-group>", styles: [":host{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i1$9.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i1$9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$3.LegacyFormlyField, selector: "formly-field" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatTabTypeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatTabTypeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-tab-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatTabsModule, FormlyModule], template: "<mat-tab-group [tabIndex]=\"props.tabindex\">\r\n    @for (tab of field.fieldGroup; track $index) {\r\n    <mat-tab [label]=\"tab.props?.label||''\" [disabled]=\"tab.props?.disabled\">\r\n        <div class=\"py-2\">\r\n            <formly-field [field]=\"tab\"></formly-field>\r\n        </div>\r\n    </mat-tab>\r\n    }\r\n</mat-tab-group>", styles: [":host{width:100%}\n"] }]
         }] });
@@ -1250,71 +1646,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
 class CmatTagsTypeComponent extends FieldType {
     constructor() {
         super();
-        this.urlData = [];
-        this.optionsData = [];
-        this.refreshVersion = signal(0, ...(ngDevMode ? [{ debugName: "refreshVersion" }] : /* istanbul ignore next */ []));
-        this._http = inject(HttpClient);
+        this.allTags = computed(() => {
+            const domainData = this._urlDataSignal();
+            if (domainData.length > 0) {
+                return domainData;
+            }
+            return this._staticOptionsSignal();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "allTags" }] : /* istanbul ignore next */ []));
+        this.filteredItems = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
+        this.refreshVersion = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "refreshVersion" }] : /* istanbul ignore next */ []));
+        this._urlDataSignal = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_urlDataSignal" }] : /* istanbul ignore next */ []));
+        this._staticOptionsSignal = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_staticOptionsSignal" }] : /* istanbul ignore next */ []));
+        this._tagsPanelOrigin = viewChild('tagsPanelOrigin', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_tagsPanelOrigin" }] : /* istanbul ignore next */ []));
+        this._tagsPanel = viewChild('tagsPanel', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_tagsPanel" }] : /* istanbul ignore next */ []));
+        this._lastDomain = undefined;
+        this._lastOptions = undefined;
         this._overlay = inject(Overlay);
         this._viewContainerRef = inject(ViewContainerRef);
         this._destroyRef = inject(DestroyRef);
-        this._filteredItems = signal(null, ...(ngDevMode ? [{ debugName: "_filteredItems" }] : /* istanbul ignore next */ []));
-        this._filteredItems$ = toObservable(this._filteredItems);
-    }
-    get filteredItems$() {
-        return this._filteredItems$;
-    }
-    get tags() {
-        if (isArray(this.field.props?.options)) {
-            return this.urlData?.length > 0 ? this.urlData : this.field.props?.options ?? [];
-        }
-        else {
-            return this.urlData?.length > 0 ? this.urlData : this.optionsData || [];
-        }
+        this._domainDataService = inject(DomainDataService);
     }
     ngOnInit() {
-        if (this.field.props?.options && !isArray(this.field.props?.options)) {
-            this.field.props?.options.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((data) => {
-                this.optionsData = data;
-            });
-        }
-        const url = this.field.props?.domain?.url;
-        if (url && this.field.props?.domain?.code && this.field.props?.domain?.key && this.field.props?.domain?.value) {
-            this._http.get(url).pipe(takeUntilDestroyed(this._destroyRef)).subscribe((data) => {
-                if (data) {
-                    const key = this.field.props?.domain?.key;
-                    const code = this.field.props?.domain?.code;
-                    const datas = data.filter((i) => {
-                        if (key)
-                            return i[key] === code;
-                        return false;
-                    });
-                    if (datas && this.field.props?.domain?.value) {
-                        this.urlData = datas[0][this.field.props?.domain?.value] ?? [];
-                    }
-                    else {
-                        this.urlData = [];
-                    }
-                }
-                else {
-                    this.urlData = [];
-                }
-                this._filteredItems.set(this.tags);
-                this.refreshVersion.update(value => value + 1);
-            });
-        }
-        else {
-            this.urlData = [];
-            this._filteredItems.set(this.tags);
-            this.refreshVersion.update(value => value + 1);
-        }
-    }
+        this._lastDomain = this.props.domain;
+        this._lastOptions = this.field.props?.options;
+        this._refreshDomainData();
+        this._refreshOptionData();
+    }
+    ngDoCheck() {
+        const currentDomain = this.props.domain;
+        const currentOptions = this.field.props?.options;
+        // 1. 检查 domain 变化
+        if (!isEqual(currentDomain, this._lastDomain)) {
+            this._lastDomain = currentDomain;
+            this._refreshDomainData();
+        }
+        // 2. 检查 options 变化 (仅当 domain 未配置时，options 才生效，但为了稳妥，只要变了就更新)
+        // 注意：如果 domain 存在，urlData 优先级更高，但更新 optionsData 也无妨，因为 allOptions computed 会优先取 urlData
+        if (!isEqual(currentOptions, this._lastOptions)) {
+            this._lastOptions = currentOptions;
+            this._refreshOptionData();
+        }
+    }
+    // --- 业务逻辑方法 ---
     openTagsPanel() {
+        // 每次打开时，重置过滤列表为所有可用标签
+        this._syncFilteredItems();
+        const origin = this._tagsPanelOrigin();
+        const template = this._tagsPanel();
+        if (!origin || !template)
+            return;
+        // 如果已经打开，先关闭
+        if (this._tagsPanelOverlayRef?.hasAttached()) {
+            this._tagsPanelOverlayRef.detach();
+        }
         this._tagsPanelOverlayRef = this._overlay.create({
             backdropClass: '',
             hasBackdrop: true,
             scrollStrategy: this._overlay.scrollStrategies.block(),
             positionStrategy: this._overlay.position()
-                .flexibleConnectedTo(this._tagsPanelOrigin.nativeElement)
+                .flexibleConnectedTo(origin.nativeElement)
                 .withFlexibleDimensions(true)
                 .withViewportMargin(64)
                 .withLockedPosition(true)
@@ -1327,59 +1724,92 @@ class CmatTagsTypeComponent extends FieldType {
                 }
             ])
         });
-        this._tagsPanelOverlayRef.attachments().subscribe(() => {
-            this._tagsPanelOverlayRef.overlayElement.querySelector('input')?.focus();
-        });
-        const templatePortal = new TemplatePortal(this._tagsPanel, this._viewContainerRef);
+        const templatePortal = new TemplatePortal(template, this._viewContainerRef);
         this._tagsPanelOverlayRef.attach(templatePortal);
+        // 聚焦输入框
+        setTimeout(() => {
+            this._tagsPanelOverlayRef.overlayElement.querySelector('input')?.focus();
+        }, 0);
         this._tagsPanelOverlayRef.backdropClick().subscribe(() => {
-            if (this._tagsPanelOverlayRef?.hasAttached()) {
-                this._tagsPanelOverlayRef.detach();
-                this._filteredItems.set(this.tags);
-                this.refreshVersion.update(value => value + 1);
-            }
-            if (templatePortal?.isAttached) {
-                templatePortal.detach();
-            }
+            this.closeTagsPanel();
         });
     }
+    closeTagsPanel() {
+        if (this._tagsPanelOverlayRef?.hasAttached()) {
+            this._tagsPanelOverlayRef.detach();
+            this._tagsPanelOverlayRef.dispose();
+        }
+    }
     filterTags(event) {
         const value = (event.target?.value ?? '').toLowerCase();
-        this._filteredItems.set(this.tags.filter((tag) => this._toSearchText(tag.label).toLowerCase().includes(value) || this._toSearchText(tag.value).toLowerCase().includes(value)));
+        const all = this.allTags();
+        if (!value) {
+            this.filteredItems.set(all);
+            return;
+        }
+        const filtered = all.filter((tag) => this._toSearchText(tag.label).toLowerCase().includes(value) ||
+            this._toSearchText(tag.value).toLowerCase().includes(value));
+        this.filteredItems.set(filtered);
     }
     toggleTag(tag) {
         if (tag.disabled)
             return;
-        const data = this.formControl.value ?? [];
-        const existsTag = data.findIndex((i) => i.value === tag.value);
-        if (existsTag > -1) {
-            data.splice(existsTag, 1);
+        const currentVal = this.formControl.value ?? [];
+        // 使用不可变方式更新数组
+        const existsIndex = currentVal.findIndex((i) => i.value === tag.value);
+        let newVal;
+        if (existsIndex > -1) {
+            newVal = currentVal.filter((_, index) => index !== existsIndex);
         }
         else {
-            data.unshift(tag);
+            newVal = [tag, ...currentVal];
         }
-        this.formControl.setValue(data);
-        this.refreshVersion.update(value => value + 1);
+        this.formControl.setValue(newVal);
+        this.refreshVersion.update(v => v + 1);
     }
     isCheck(tag) {
-        return (this.formControl.value?.filter((i) => i.value === tag.value).length ?? 0) > 0;
+        const currentVal = this.formControl.value;
+        if (!currentVal)
+            return false;
+        return currentVal.some((i) => i.value === tag.value);
+    }
+    _syncFilteredItems() {
+        this.filteredItems.set(this.allTags());
     }
     _toSearchText(value) {
         return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' ? String(value) : '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatTagsTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CmatTagsTypeComponent, isStandalone: true, selector: "cmat-tags-type", viewQueries: [{ propertyName: "_tagsPanelOrigin", first: true, predicate: ["tagsPanelOrigin"], descendants: true }, { propertyName: "_tagsPanel", first: true, predicate: ["tagsPanel"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"text-lg mb-2\">\r\n    {{ props.label }}\r\n    @if(props.required){\r\n    <span>*</span>\r\n    }\r\n</div>\r\n<div class=\"flex flex-wrap items-center -m-2\" [attr.data-refresh]=\"refreshVersion()\" [tabIndex]=\"props.tabindex\">\r\n    <ng-container>\r\n        @for (selectedItem of formControl.value; track $index) {\r\n        <div\r\n            class=\"flex items-center justify-center px-4 m-1.5 rounded-full leading-9 text-gray-500 bg-slate-100 dark:text-gray-300 dark:bg-slate-700\">\r\n            <span class=\"text-md font-medium whitespace-nowrap\">{{selectedItem.label}}</span>\r\n        </div>\r\n        }\r\n\r\n        <div #tagsPanelOrigin\r\n            class=\"flex items-center justify-center px-4 m-1.5 rounded-full leading-9 cursor-pointer text-gray-500 bg-slate-100 dark:text-gray-300 dark:bg-slate-700 print:hidden\" role=\"presentation\" (click)=\"openTagsPanel()\">\r\n\r\n            @if(formControl.value?.length&&!disabled){\r\n            <mat-icon class=\"icon-size-5\" [svgIcon]=\"'heroicons_solid:pencil-square'\"></mat-icon>\r\n            <span class=\"ml-1.5 text-md font-medium whitespace-nowrap\">\u7F16\u8F91</span>\r\n            }\r\n\r\n            @if(!formControl.value?.length&&!disabled){\r\n            <mat-icon class=\"icon-size-5\" [svgIcon]=\"'heroicons_solid:plus-circle'\"></mat-icon>\r\n            <span class=\"ml-1.5 text-md font-medium whitespace-nowrap\">\u65B0\u589E</span>\r\n            }\r\n\r\n            <ng-template #tagsPanel>\r\n                <div class=\"w-60 rounded-sm border shadow-md bg-card\">\r\n                    <div class=\"flex items-center m-3 mr-2\">\r\n                        <div class=\"flex items-center\">\r\n                            <mat-icon class=\"icon-size-5\" [svgIcon]=\"'heroicons_solid:magnifying-glass'\">\r\n                            </mat-icon>\r\n                            <div class=\"ml-2\">\r\n                                <input class=\"w-full min-w-0 py-1 border-none\" type=\"text\" placeholder=\"\u8F93\u5165\u6807\u7B7E\u540D\"\r\n                                    [maxLength]=\"30\" (input)=\"filterTags($event)\">\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"flex flex-col max-h-64 py-2 border-t overflow-y-auto scrollbar-custom\">\r\n                        @if ((filteredItems$ | async); as filteredItems) {\r\n                        @if(filteredItems.length>0){\r\n                        @for (tag of filteredItems; track $index) {\r\n                        <div role=\"presentation\"\r\n                            class=\"flex items-center h-10 min-h-10 pl-1 pr-4 cursor-pointer hover:bg-hover\"\r\n                            matRipple (click)=\"toggleTag(tag)\">\r\n                            <mat-checkbox class=\"flex items-center h-10 min-h-10\" [color]=\"'primary'\"\r\n                                [disabled]=\"tag.disabled\" [checked]=\"isCheck(tag)\">\r\n                                {{tag.label}}\r\n                            </mat-checkbox>\r\n                        </div>\r\n                        }\r\n                        }@else {\r\n                        <div class=\"flex flex-auto flex-col justify-center px-4 h-10 min-h-10\">\r\n                            \u65E0\u7ED3\u679C\r\n                        </div>\r\n                        }\r\n                        }\r\n                    </div>\r\n                </div>\r\n            </ng-template>\r\n        </div>\r\n    </ng-container>\r\n</div>\r\n", styles: [":host{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    _refreshDomainData() {
+        const domain = this.props.domain;
+        // 使用 DomainDataService 加载远程数据
+        this._domainDataService.load(domain, this._destroyRef, {
+            onSuccess: (data) => {
+                this._urlDataSignal.set(data);
+                this._syncFilteredItems();
+            },
+            componentName: 'CmatTagsTypeComponent'
+        });
+    }
+    _refreshOptionData() {
+        if (isArray(this.field.props?.options)) {
+            this._staticOptionsSignal.set(this.field.props?.options);
+            this._syncFilteredItems();
+        }
+        else if (this.field.props?.options && !isArray(this.field.props?.options)) {
+            // 处理 Observable options
+            this.field.props.options.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((data) => {
+                this._staticOptionsSignal.set(data || []);
+                this._syncFilteredItems();
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatTagsTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatTagsTypeComponent, isStandalone: true, selector: "cmat-tags-type", viewQueries: [{ propertyName: "_tagsPanelOrigin", first: true, predicate: ["tagsPanelOrigin"], descendants: true, isSignal: true }, { propertyName: "_tagsPanel", first: true, predicate: ["tagsPanel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"text-lg mb-2\">\r\n    {{ props.label }}\r\n    @if(props.required){\r\n    <span>*</span>\r\n    }\r\n</div>\r\n<div class=\"flex flex-wrap items-center -m-2\" [attr.data-refresh]=\"refreshVersion()\" [tabIndex]=\"props.tabindex\">\r\n    <ng-container>\r\n        @for (selectedItem of formControl.value; track selectedItem.value || $index) {\r\n        <div\r\n            class=\"flex items-center justify-center px-4 m-1.5 rounded-full leading-9 text-gray-500 bg-slate-100 dark:text-gray-300 dark:bg-slate-700\">\r\n            <span class=\"text-md font-medium whitespace-nowrap\">{{selectedItem.label}}</span>\r\n        </div>\r\n        }\r\n\r\n        <div #tagsPanelOrigin\r\n            class=\"flex items-center justify-center px-4 m-1.5 rounded-full leading-9 cursor-pointer text-gray-500 bg-slate-100 dark:text-gray-300 dark:bg-slate-700 print:hidden\" \r\n            role=\"presentation\" \r\n            (click)=\"openTagsPanel()\">\r\n\r\n            @if(formControl.value?.length && !disabled){\r\n            <mat-icon class=\"icon-size-5\" [svgIcon]=\"'heroicons_solid:pencil-square'\"></mat-icon>\r\n            <span class=\"ml-1.5 text-md font-medium whitespace-nowrap\">\u7F16\u8F91</span>\r\n            }\r\n\r\n            @if(!formControl.value?.length && !disabled){\r\n            <mat-icon class=\"icon-size-5\" [svgIcon]=\"'heroicons_solid:plus-circle'\"></mat-icon>\r\n            <span class=\"ml-1.5 text-md font-medium whitespace-nowrap\">\u65B0\u589E</span>\r\n            }\r\n\r\n            <ng-template #tagsPanel>\r\n                <div class=\"w-60 rounded-sm border shadow-md bg-card\">\r\n                    <div class=\"flex items-center m-3 mr-2\">\r\n                        <div class=\"flex items-center\">\r\n                            <mat-icon class=\"icon-size-5\" [svgIcon]=\"'heroicons_solid:magnifying-glass'\">\r\n                            </mat-icon>\r\n                            <div class=\"ml-2\">\r\n                                <input class=\"w-full min-w-0 py-1 border-none\" type=\"text\" placeholder=\"\u8F93\u5165\u6807\u7B7E\u540D\"\r\n                                    [maxLength]=\"30\" (input)=\"filterTags($event)\">\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"flex flex-col max-h-64 py-2 border-t overflow-y-auto scrollbar-custom\">\r\n                        @if (filteredItems().length > 0) {\r\n                            @for (tag of filteredItems(); track tag.value || $index) {\r\n                            <div role=\"presentation\"\r\n                                class=\"flex items-center h-10 min-h-10 pl-1 pr-4 cursor-pointer hover:bg-hover\"\r\n                                matRipple [matRippleDisabled]=\"disabled\" (click)=\"toggleTag(tag)\">\r\n                                <mat-checkbox class=\"flex items-center h-10 min-h-10\" [color]=\"'primary'\"\r\n                                    [disabled]=\"tag.disabled\" [checked]=\"isCheck(tag)\">\r\n                                    {{tag.label}}\r\n                                </mat-checkbox>\r\n                            </div>\r\n                            }\r\n                        } @else {\r\n                            <div class=\"flex flex-auto flex-col justify-center px-4 h-10 min-h-10\">\r\n                                \u65E0\u7ED3\u679C\r\n                            </div>\r\n                        }\r\n                    </div>\r\n                </div>\r\n            </ng-template>\r\n        </div>\r\n    </ng-container>\r\n</div>", styles: [":host{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i3$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatTagsTypeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatTagsTypeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-tags-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconModule, MatCheckboxModule, AsyncPipe], template: "<div class=\"text-lg mb-2\">\r\n    {{ props.label }}\r\n    @if(props.required){\r\n    <span>*</span>\r\n    }\r\n</div>\r\n<div class=\"flex flex-wrap items-center -m-2\" [attr.data-refresh]=\"refreshVersion()\" [tabIndex]=\"props.tabindex\">\r\n    <ng-container>\r\n        @for (selectedItem of formControl.value; track $index) {\r\n        <div\r\n            class=\"flex items-center justify-center px-4 m-1.5 rounded-full leading-9 text-gray-500 bg-slate-100 dark:text-gray-300 dark:bg-slate-700\">\r\n            <span class=\"text-md font-medium whitespace-nowrap\">{{selectedItem.label}}</span>\r\n        </div>\r\n        }\r\n\r\n        <div #tagsPanelOrigin\r\n            class=\"flex items-center justify-center px-4 m-1.5 rounded-full leading-9 cursor-pointer text-gray-500 bg-slate-100 dark:text-gray-300 dark:bg-slate-700 print:hidden\" role=\"presentation\" (click)=\"openTagsPanel()\">\r\n\r\n            @if(formControl.value?.length&&!disabled){\r\n            <mat-icon class=\"icon-size-5\" [svgIcon]=\"'heroicons_solid:pencil-square'\"></mat-icon>\r\n            <span class=\"ml-1.5 text-md font-medium whitespace-nowrap\">\u7F16\u8F91</span>\r\n            }\r\n\r\n            @if(!formControl.value?.length&&!disabled){\r\n            <mat-icon class=\"icon-size-5\" [svgIcon]=\"'heroicons_solid:plus-circle'\"></mat-icon>\r\n            <span class=\"ml-1.5 text-md font-medium whitespace-nowrap\">\u65B0\u589E</span>\r\n            }\r\n\r\n            <ng-template #tagsPanel>\r\n                <div class=\"w-60 rounded-sm border shadow-md bg-card\">\r\n                    <div class=\"flex items-center m-3 mr-2\">\r\n                        <div class=\"flex items-center\">\r\n                            <mat-icon class=\"icon-size-5\" [svgIcon]=\"'heroicons_solid:magnifying-glass'\">\r\n                            </mat-icon>\r\n                            <div class=\"ml-2\">\r\n                                <input class=\"w-full min-w-0 py-1 border-none\" type=\"text\" placeholder=\"\u8F93\u5165\u6807\u7B7E\u540D\"\r\n                                    [maxLength]=\"30\" (input)=\"filterTags($event)\">\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"flex flex-col max-h-64 py-2 border-t overflow-y-auto scrollbar-custom\">\r\n                        @if ((filteredItems$ | async); as filteredItems) {\r\n                        @if(filteredItems.length>0){\r\n                        @for (tag of filteredItems; track $index) {\r\n                        <div role=\"presentation\"\r\n                            class=\"flex items-center h-10 min-h-10 pl-1 pr-4 cursor-pointer hover:bg-hover\"\r\n                            matRipple (click)=\"toggleTag(tag)\">\r\n                            <mat-checkbox class=\"flex items-center h-10 min-h-10\" [color]=\"'primary'\"\r\n                                [disabled]=\"tag.disabled\" [checked]=\"isCheck(tag)\">\r\n                                {{tag.label}}\r\n                            </mat-checkbox>\r\n                        </div>\r\n                        }\r\n                        }@else {\r\n                        <div class=\"flex flex-auto flex-col justify-center px-4 h-10 min-h-10\">\r\n                            \u65E0\u7ED3\u679C\r\n                        </div>\r\n                        }\r\n                        }\r\n                    </div>\r\n                </div>\r\n            </ng-template>\r\n        </div>\r\n    </ng-container>\r\n</div>\r\n", styles: [":host{width:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { _tagsPanelOrigin: [{
-                type: ViewChild,
-                args: ['tagsPanelOrigin']
-            }], _tagsPanel: [{
-                type: ViewChild,
-                args: ['tagsPanel']
-            }] } });
+            args: [{ selector: 'cmat-tags-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconModule, MatCheckboxModule, MatRippleModule], template: "<div class=\"text-lg mb-2\">\r\n    {{ props.label }}\r\n    @if(props.required){\r\n    <span>*</span>\r\n    }\r\n</div>\r\n<div class=\"flex flex-wrap items-center -m-2\" [attr.data-refresh]=\"refreshVersion()\" [tabIndex]=\"props.tabindex\">\r\n    <ng-container>\r\n        @for (selectedItem of formControl.value; track selectedItem.value || $index) {\r\n        <div\r\n            class=\"flex items-center justify-center px-4 m-1.5 rounded-full leading-9 text-gray-500 bg-slate-100 dark:text-gray-300 dark:bg-slate-700\">\r\n            <span class=\"text-md font-medium whitespace-nowrap\">{{selectedItem.label}}</span>\r\n        </div>\r\n        }\r\n\r\n        <div #tagsPanelOrigin\r\n            class=\"flex items-center justify-center px-4 m-1.5 rounded-full leading-9 cursor-pointer text-gray-500 bg-slate-100 dark:text-gray-300 dark:bg-slate-700 print:hidden\" \r\n            role=\"presentation\" \r\n            (click)=\"openTagsPanel()\">\r\n\r\n            @if(formControl.value?.length && !disabled){\r\n            <mat-icon class=\"icon-size-5\" [svgIcon]=\"'heroicons_solid:pencil-square'\"></mat-icon>\r\n            <span class=\"ml-1.5 text-md font-medium whitespace-nowrap\">\u7F16\u8F91</span>\r\n            }\r\n\r\n            @if(!formControl.value?.length && !disabled){\r\n            <mat-icon class=\"icon-size-5\" [svgIcon]=\"'heroicons_solid:plus-circle'\"></mat-icon>\r\n            <span class=\"ml-1.5 text-md font-medium whitespace-nowrap\">\u65B0\u589E</span>\r\n            }\r\n\r\n            <ng-template #tagsPanel>\r\n                <div class=\"w-60 rounded-sm border shadow-md bg-card\">\r\n                    <div class=\"flex items-center m-3 mr-2\">\r\n                        <div class=\"flex items-center\">\r\n                            <mat-icon class=\"icon-size-5\" [svgIcon]=\"'heroicons_solid:magnifying-glass'\">\r\n                            </mat-icon>\r\n                            <div class=\"ml-2\">\r\n                                <input class=\"w-full min-w-0 py-1 border-none\" type=\"text\" placeholder=\"\u8F93\u5165\u6807\u7B7E\u540D\"\r\n                                    [maxLength]=\"30\" (input)=\"filterTags($event)\">\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"flex flex-col max-h-64 py-2 border-t overflow-y-auto scrollbar-custom\">\r\n                        @if (filteredItems().length > 0) {\r\n                            @for (tag of filteredItems(); track tag.value || $index) {\r\n                            <div role=\"presentation\"\r\n                                class=\"flex items-center h-10 min-h-10 pl-1 pr-4 cursor-pointer hover:bg-hover\"\r\n                                matRipple [matRippleDisabled]=\"disabled\" (click)=\"toggleTag(tag)\">\r\n                                <mat-checkbox class=\"flex items-center h-10 min-h-10\" [color]=\"'primary'\"\r\n                                    [disabled]=\"tag.disabled\" [checked]=\"isCheck(tag)\">\r\n                                    {{tag.label}}\r\n                                </mat-checkbox>\r\n                            </div>\r\n                            }\r\n                        } @else {\r\n                            <div class=\"flex flex-auto flex-col justify-center px-4 h-10 min-h-10\">\r\n                                \u65E0\u7ED3\u679C\r\n                            </div>\r\n                        }\r\n                    </div>\r\n                </div>\r\n            </ng-template>\r\n        </div>\r\n    </ng-container>\r\n</div>", styles: [":host{width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _tagsPanelOrigin: [{ type: i0.ViewChild, args: ['tagsPanelOrigin', { isSignal: true }] }], _tagsPanel: [{ type: i0.ViewChild, args: ['tagsPanel', { isSignal: true }] }] } });
 
 class CmatTextareaTypeComponent extends FieldType$1 {
     constructor() {
@@ -1391,10 +1821,10 @@ class CmatTextareaTypeComponent extends FieldType$1 {
             },
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatTextareaTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CmatTextareaTypeComponent, isStandalone: true, selector: "cmat-textarea-type", usesInheritance: true, ngImport: i0, template: "<textarea matInput [placeholder]=\"placeholder\"   \r\n    [readonly]=\"props.readonly\" [errorStateMatcher]=\"errorStateMatcher\"\r\n    [cols]=\"props.cols\"\r\n    [rows]=\"props.rows\"\r\n    [tabindex]=\"props.tabindex\"\r\n    [formControl]=\"formControl\" [required]=\"required\">\r\n</textarea>", styles: [":host{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatTextareaTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: CmatTextareaTypeComponent, isStandalone: true, selector: "cmat-textarea-type", usesInheritance: true, ngImport: i0, template: "<textarea matInput [placeholder]=\"placeholder\"   \r\n    [readonly]=\"props.readonly\" [errorStateMatcher]=\"errorStateMatcher\"\r\n    [cols]=\"props.cols\"\r\n    [rows]=\"props.rows\"\r\n    [tabindex]=\"props.tabindex\"\r\n    [formControl]=\"formControl\" [required]=\"required\">\r\n</textarea>", styles: [":host{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatTextareaTypeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatTextareaTypeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-textarea-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatInputModule, ReactiveFormsModule], template: "<textarea matInput [placeholder]=\"placeholder\"   \r\n    [readonly]=\"props.readonly\" [errorStateMatcher]=\"errorStateMatcher\"\r\n    [cols]=\"props.cols\"\r\n    [rows]=\"props.rows\"\r\n    [tabindex]=\"props.tabindex\"\r\n    [formControl]=\"formControl\" [required]=\"required\">\r\n</textarea>", styles: [":host{width:100%}\n"] }]
         }] });
@@ -1413,53 +1843,110 @@ class CmatUploadTypeComponent extends FieldType {
                 autoUpload: true
             }
         };
+        this._rootGroup = null;
     }
-    ngAfterViewInit() {
-        if (!this.baseGroup)
-            this.baseGroup = this._getRootControl(this.formControl);
-        if (!this.baseGroup.contains('uploadId')) {
-            this.baseGroup.addControl('uploadId', new FormControl([]));
-            this.baseGroup.addControl('removeId', new FormControl([]));
+    ngOnInit() {
+        this._rootGroup = this._getRootGroup(this.field);
+        if (this._rootGroup) {
+            if (!this._rootGroup.contains('uploadId')) {
+                this._rootGroup.addControl('uploadId', new FormControl([]));
+            }
+            if (!this._rootGroup.contains('removeId')) {
+                this._rootGroup.addControl('removeId', new FormControl([]));
+            }
         }
     }
+    /**
+     * 处理上传成功事件
+     * @param id 新上传文件的 ID
+     */
     upload(id) {
-        const rootValue = this.baseGroup.get('uploadId')?.value;
-        if (rootValue && !isNil(id)) {
-            this.baseGroup.get('uploadId')?.setValue([id, ...rootValue]);
+        if (!id || !this._rootGroup)
+            return;
+        const control = this._rootGroup.get('uploadId');
+        if (control) {
+            const currentIds = control.value || [];
+            // 避免重复添加
+            if (!currentIds.includes(id)) {
+                control.setValue([id, ...currentIds]);
+            }
         }
     }
+    /**
+     * 处理移除事件
+     * @param id 被移除文件的 ID
+     */
     remove(id) {
-        const rootValue = this.baseGroup.get('removeId')?.value;
-        if (rootValue && !isNil(id)) {
-            this.baseGroup.get('removeId')?.setValue([id, ...rootValue]);
+        if (!id || !this._rootGroup)
+            return;
+        const control = this._rootGroup.get('removeId');
+        if (control) {
+            const currentIds = control.value || [];
+            // 避免重复添加
+            if (!currentIds.includes(id)) {
+                control.setValue([id, ...currentIds]);
+            }
         }
     }
-    updateData(i) {
-        const data = Array.isArray(i) ? i : [i];
-        this.formControl.setValue(data.map((j) => {
-            if (typeof j === 'object' && j !== null && 'id' in j && typeof j.id === 'string')
-                return {
-                    id: String((j).id),
-                    name: typeof j.name === 'string' ? j.name : '',
-                    type: typeof j.type === 'string' ? j.type : '',
-                    size: Number(j.size ?? 0)
-                };
-            else
-                return j;
-        }));
-    }
-    _getRootControl(baseControl) {
-        if (baseControl.parent) {
-            return this._getRootControl(baseControl.parent);
-        }
-        return baseControl;
+    /**
+     * 处理文件列表更新事件
+     * @param data 文件数据数组或单个对象
+     */
+    updateData(data) {
+        const items = Array.isArray(data) ? data : [data];
+        const standardizedFiles = items.map(item => this._standardizeFileItem(item));
+        // 过滤掉无效项
+        const validFiles = standardizedFiles.filter((item) => item !== null);
+        this.formControl.setValue(validFiles);
+    }
+    /**
+     * 递归查找根 FormGroup
+     * @param field 当前 Formly 字段
+     * @returns 根 FormGroup
+     */
+    _getRootGroup(field) {
+        // Formly 字段通常有 parent 属性指向父字段，直到根字段
+        // 根字段的 form 属性通常是根 FormGroup
+        let currentField = field;
+        while (currentField.parent) {
+            currentField = currentField.parent;
+        }
+        // 尝试从根字段获取 form，或者直接使用 field.form 如果它是根
+        // 注意：在某些 Formly 配置中，field.form 可能始终指向根表单
+        if (currentField.form && currentField.form instanceof UntypedFormGroup) {
+            return currentField.form;
+        }
+        //  fallback: 如果找不到，返回 null，调用者需处理
+        return null;
+    }
+    /**
+     * 标准化文件对象，确保包含必要的字段
+     * @param item 原始文件数据
+     * @returns 标准化的文件对象或 null（如果无效）
+     */
+    _standardizeFileItem(item) {
+        if (typeof item !== 'object' || item === null) {
+            return null;
+        }
+        const obj = item;
+        if (typeof obj.id !== 'string') {
+            return null;
+        }
+        return {
+            id: obj.id,
+            name: typeof obj.name === 'string' ? obj.name : '',
+            type: typeof obj.type === 'string' ? obj.type : '',
+            size: typeof obj.size === 'number' ? obj.size : 0,
+            // 保留其他额外属性
+            ...obj
+        };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatUploadTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CmatUploadTypeComponent, isStandalone: true, selector: "cmat-upload-type", usesInheritance: true, ngImport: i0, template: "<cmat-upload-queue [tabindex]=\"props.tabindex\" [fileAlias]=\"props.fileAlias\"\r\n    [filePath]=\"props.filePath\" [required]=\"required\" [fileCategory]=\"props.fileCategory\" [multiple]=\"props.multiple\"\r\n    [accept]=\"props.accept\" [title]=\"props.label??'\u9644\u4EF6'\" [editMode]=\"props.editMode&&!disabled\" [filesData]=\"formControl.value\"\r\n    [autoUpload]=\"props.autoUpload\" (outputUploadIdEvent)=\"upload($event)\" (outputRemoveIdEvent)=\"remove($event)\" (outputFilesDataEvent)=\"updateData($event)\">\r\n</cmat-upload-queue>", styles: [":host{width:100%}\n"], dependencies: [{ kind: "component", type: CmatUploadQueueComponent, selector: "cmat-upload-queue", inputs: ["fileAlias", "filePath", "fileCategory", "isPublic", "required", "autoUpload", "multiple", "accept", "title", "editMode", "filesData"], outputs: ["outputRemoveIdEvent", "outputUploadIdEvent", "outputFilesDataEvent"], exportAs: ["cmatUploadQueue"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatUploadTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: CmatUploadTypeComponent, isStandalone: true, selector: "cmat-upload-type", usesInheritance: true, ngImport: i0, template: "<cmat-upload-queue \r\n    [tabindex]=\"props.tabindex\" \r\n    [fileAlias]=\"props.fileAlias\"\r\n    [filePath]=\"props.filePath\" \r\n    [required]=\"required\" \r\n    [fileCategory]=\"props.fileCategory\" \r\n    [multiple]=\"props.multiple\"\r\n    [accept]=\"props.accept\" \r\n    [title]=\"props.label ?? '\u9644\u4EF6'\" \r\n    [editMode]=\"props.editMode && !disabled\" \r\n    [filesData]=\"formControl.value\"\r\n    [autoUpload]=\"props.autoUpload\" \r\n    (outputUploadIdEvent)=\"upload($event)\" \r\n    (outputRemoveIdEvent)=\"remove($event)\" \r\n    (outputFilesDataEvent)=\"updateData($event)\">\r\n</cmat-upload-queue>", styles: [":host{width:100%}\n"], dependencies: [{ kind: "component", type: CmatUploadQueueComponent, selector: "cmat-upload-queue", inputs: ["fileAlias", "filePath", "fileCategory", "isPublic", "required", "autoUpload", "multiple", "accept", "title", "editMode", "filesData"], outputs: ["outputRemoveIdEvent", "outputUploadIdEvent", "outputFilesDataEvent", "filesDataChange"], exportAs: ["cmatUploadQueue"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatUploadTypeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatUploadTypeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-upload-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CmatUploadQueueComponent, ReactiveFormsModule], template: "<cmat-upload-queue [tabindex]=\"props.tabindex\" [fileAlias]=\"props.fileAlias\"\r\n    [filePath]=\"props.filePath\" [required]=\"required\" [fileCategory]=\"props.fileCategory\" [multiple]=\"props.multiple\"\r\n    [accept]=\"props.accept\" [title]=\"props.label??'\u9644\u4EF6'\" [editMode]=\"props.editMode&&!disabled\" [filesData]=\"formControl.value\"\r\n    [autoUpload]=\"props.autoUpload\" (outputUploadIdEvent)=\"upload($event)\" (outputRemoveIdEvent)=\"remove($event)\" (outputFilesDataEvent)=\"updateData($event)\">\r\n</cmat-upload-queue>", styles: [":host{width:100%}\n"] }]
+            args: [{ selector: 'cmat-upload-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CmatUploadQueueComponent, ReactiveFormsModule], template: "<cmat-upload-queue \r\n    [tabindex]=\"props.tabindex\" \r\n    [fileAlias]=\"props.fileAlias\"\r\n    [filePath]=\"props.filePath\" \r\n    [required]=\"required\" \r\n    [fileCategory]=\"props.fileCategory\" \r\n    [multiple]=\"props.multiple\"\r\n    [accept]=\"props.accept\" \r\n    [title]=\"props.label ?? '\u9644\u4EF6'\" \r\n    [editMode]=\"props.editMode && !disabled\" \r\n    [filesData]=\"formControl.value\"\r\n    [autoUpload]=\"props.autoUpload\" \r\n    (outputUploadIdEvent)=\"upload($event)\" \r\n    (outputRemoveIdEvent)=\"remove($event)\" \r\n    (outputFilesDataEvent)=\"updateData($event)\">\r\n</cmat-upload-queue>", styles: [":host{width:100%}\n"] }]
         }] });
 
 Quill.register('modules/blotFormatter', BlotFormatter);
@@ -1500,16 +1987,20 @@ class CmatQuillTypeComponent extends FieldType {
                 filePath: 'path'
             }
         };
-        this.refreshVersion = signal(0, ...(ngDevMode ? [{ debugName: "refreshVersion" }] : /* istanbul ignore next */ []));
+        this.isExporting = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isExporting" }] : /* istanbul ignore next */ []));
+        this.imgInput = viewChild('imgInput', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "imgInput" }] : /* istanbul ignore next */ []));
+        this.videoInput = viewChild('videoInput', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "videoInput" }] : /* istanbul ignore next */ []));
+        this._editorInstance = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_editorInstance" }] : /* istanbul ignore next */ []));
+        this._imgIds = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_imgIds" }] : /* istanbul ignore next */ []));
         this._fileService = inject(CmatFilesUtilService);
         this._urlStateConfigService = inject(CmatUrlStateConfigService);
         this._destroyRef = inject(DestroyRef);
-        this._imgIds = [];
-        this._urlStateConfigService.config$
-            .pipe(takeUntilDestroyed(this._destroyRef))
-            .subscribe((config) => {
-            this._config = config;
-        });
+        this._config = this._urlStateConfigService.config;
     }
     ngAfterViewInit() {
         const icons = Quill.import('ui/icons');
@@ -1546,70 +2037,109 @@ class CmatQuillTypeComponent extends FieldType {
                 if (typeof fileId !== 'string') {
                     return;
                 }
-                this._editorInstance.insertEmbed(this._editorInstance.getSelection(true).index, this._getMediaType(file.type), `${this._config.fileUrl}/download/quill/${fileId}`);
-                this._editorInstance.setSelection(this._editorInstance.getSelection(true).index + 1);
-                this.formControl.setValue(this._editorInstance.container.innerHTML);
+                const editor = this._editorInstance();
+                const config = this._config(); // 获取配置
+                if (editor && config?.fileUrl) { // 同时检查编辑器和服务配置
+                    const selection = editor.getSelection(true);
+                    const index = selection ? selection.index : editor.getLength();
+                    editor.insertEmbed(index, this._getMediaType(file.type), `${config.fileUrl}/download/quill/${fileId}`);
+                    editor.setSelection(index + 1);
+                    this.formControl.setValue(editor.container.innerHTML);
+                }
+                else {
+                    console.warn('无法插入图片：编辑器或文件服务配置未就绪');
+                }
                 this._upload(fileId);
             }
-            this.refreshVersion.update((value) => value + 1);
         });
     }
     editorCreated(editorInstance) {
-        this._editorInstance = editorInstance;
-        const dom = document.createElement('DIV');
-        dom.innerHTML = editorInstance.container.innerHTML;
-        const fileDom = dom.querySelectorAll('img, video');
-        fileDom.forEach((i) => {
-            if (i.src.includes(this._config.fileUrl)) {
-                this._imgIds.push(i.src.substring(`${this._config.fileUrl}/download/quill/`.length, i.src.length));
+        this._editorInstance.set(editorInstance);
+        // 1. 获取当前编辑器中的所有文件 ID
+        const currentIds = this._extractFileIdsFromDelta(editorInstance.getContents());
+        this._imgIds.set(currentIds);
+        // 2. 同步清理 removeId，确保“已存在”的图片不在“待删除”列表中
+        const removeControl = this.baseGroup.get('removeId');
+        if (removeControl) {
+            const existingRemoveIds = removeControl.value || [];
+            // 过滤掉那些当前实际存在于编辑器中的 ID
+            const cleanedRemoveIds = existingRemoveIds.filter(id => !currentIds.includes(id));
+            // 只有当数组内容真正改变时才更新表单，避免无限循环或无效变更检测
+            if (cleanedRemoveIds.length !== existingRemoveIds.length) {
+                removeControl.setValue(cleanedRemoveIds);
             }
-        });
+        }
     }
     contentChanged(contentChange) {
-        const dom = document.createElement('DIV');
-        dom.innerHTML = contentChange.editor.container.innerHTML;
-        const fileDom = dom.querySelectorAll('img, video');
-        const arr = [];
-        fileDom.forEach((i) => {
-            if (i.src.includes(this._config.fileUrl)) {
-                const id = i.src.substring(`${this._config.fileUrl}/download/quill/`.length, i.src.length);
-                this._imgIds.splice(this._imgIds.findIndex((k) => k === id), 1);
-                arr.push(id);
-            }
-        });
-        this._imgIds.forEach((i) => {
-            const rootValue = this.baseGroup.get('removeId')?.value;
-            if (rootValue && !isNil(i)) {
-                this.baseGroup.get('removeId')?.setValue([i, ...rootValue]);
-            }
-        });
-        this._imgIds = arr;
+        const delta = contentChange.editor.getContents();
+        const currentIds = this._extractFileIdsFromDelta(delta);
+        const previousIds = this._imgIds();
+        const removedIds = previousIds.filter(id => !currentIds.includes(id));
+        if (removedIds.length > 0) {
+            const removeControl = this.baseGroup.get('removeId');
+            const currentRemoveList = removeControl?.value || [];
+            const restoredIds = currentRemoveList.filter(id => currentIds.includes(id));
+            let finalRemoveList = currentRemoveList.filter(id => !restoredIds.includes(id));
+            // 添加新删除的
+            finalRemoveList = [...new Set([...finalRemoveList, ...removedIds])];
+            removeControl?.setValue(finalRemoveList);
+        }
+        this._imgIds.set(currentIds);
     }
     _imgFileHandler() {
-        this.imgInput.nativeElement.click();
+        if (this.imgInput()) {
+            this.imgInput().nativeElement.click();
+        }
     }
     _videoFileHandler() {
-        this.videoInput.nativeElement.click();
+        if (this.videoInput()) {
+            this.videoInput().nativeElement.click();
+        }
     }
     async _wordFileHandler() {
+        const editor = this._editorInstance();
+        if (!editor)
+            return;
+        this.isExporting.set(true);
         try {
-            const delta = this._editorInstance.getContents();
+            const delta = editor.getContents();
             const children = await this._convertDeltaToDocxChildren(delta);
             const doc = new Document({
-                sections: [{
-                        properties: {},
-                        children: children
-                    }]
+                sections: [{ properties: {}, children: children }]
             });
             const blob = await Packer.toBlob(doc);
-            FileSaver.saveAs(blob, `${this.placeholder ?? '富文本内容下载'}${dayjs().format('YYYYMMDDHHmmss')}.docx`);
+            FileSaver.saveAs(blob, `${this.placeholder ?? '文档'}_${dayjs().format('YYYYMMDD_HHmmss')}.docx`);
         }
         catch (error) {
             console.error('Word 导出失败:', error);
         }
+        finally {
+            this.isExporting.set(false);
+        }
     }
     async _convertDeltaToDocxChildren(delta) {
         const children = [];
+        // 1. 预加载所有图片数据 (并行)
+        const imageCache = new Map();
+        const imageOps = delta.ops.filter(op => typeof op.insert !== 'string' && op.insert?.image);
+        await Promise.all(imageOps.map(async (op) => {
+            if (typeof op.insert === 'object' && op.insert !== null && 'image' in op.insert && typeof op.insert.image === 'string') {
+                const url = op.insert.image;
+                if (!imageCache.has(url)) {
+                    const buffer = await this._getImageBuffer(url);
+                    const dims = await this._getImageDimensions(url);
+                    let type = 'png';
+                    if (url.toLowerCase().endsWith('.jpg') || url.toLowerCase().endsWith('.jpeg'))
+                        type = 'jpg';
+                    else if (url.toLowerCase().endsWith('.gif'))
+                        type = 'gif';
+                    else if (url.toLowerCase().endsWith('.svg'))
+                        type = 'svg';
+                    imageCache.set(url, { buffer, width: dims.width, height: dims.height, type });
+                }
+            }
+        }));
+        // 2. 构建文档结构 (同步)
         let currentRun = [];
         let currentListLevel = 0;
         let isList = false;
@@ -1619,11 +2149,14 @@ class CmatQuillTypeComponent extends FieldType {
                     children.push(new Paragraph({ children: currentRun }));
                     currentRun = [];
                 }
-                const imageRun = await this._createImageRun(op.insert.image);
-                children.push(new Paragraph({
-                    children: [imageRun],
-                    alignment: AlignmentType.CENTER
-                }));
+                const imgData = imageCache.get(op.insert.image);
+                if (imgData) {
+                    const imageRun = this._createImageRunFromData(imgData); // 提取一个新方法
+                    children.push(new Paragraph({
+                        children: [imageRun],
+                        alignment: AlignmentType.CENTER
+                    }));
+                }
             }
             else if (typeof op.insert === 'string') {
                 const text = op.insert;
@@ -1656,6 +2189,24 @@ class CmatQuillTypeComponent extends FieldType {
         }
         return children;
     }
+    _createImageRunFromData(data) {
+        const maxWidth = 500;
+        const maxHeight = 400;
+        const scale = Math.min(maxWidth / data.width, maxHeight / data.height, 1);
+        const imageType = data.type;
+        return new ImageRun({
+            data: data.buffer,
+            transformation: {
+                width: Math.round(data.width * scale),
+                height: Math.round(data.height * scale)
+            },
+            type: imageType,
+            fallback: {
+                type: imageType !== 'svg' ? imageType : 'png',
+                data: data.buffer
+            }
+        });
+    }
     _createTextRun(text, attributes) {
         return new TextRun({
             text: text,
@@ -1684,46 +2235,21 @@ class CmatQuillTypeComponent extends FieldType {
         };
         return new Paragraph(paragraphOptions);
     }
-    async _createImageRun(imageUrl) {
-        const imageBuffer = await this._getImageBuffer(imageUrl);
-        let type = 'png';
-        if (imageUrl.toLowerCase().endsWith('.svg')) {
-            type = 'svg';
-        }
-        else if (imageUrl.toLowerCase().endsWith('.jpeg') || imageUrl.toLowerCase().endsWith('.jpg')) {
-            type = 'jpg';
-        }
-        else if (imageUrl.toLowerCase().endsWith('.gif')) {
-            type = 'gif';
-        }
-        const dimensions = await this._getImageDimensions(imageUrl);
-        const maxWidth = 500;
-        const maxHeight = 400;
-        const scale = Math.min(maxWidth / dimensions.width, maxHeight / dimensions.height, 1);
-        return new ImageRun({
-            data: imageBuffer,
-            transformation: {
-                width: Math.round(dimensions.width * scale),
-                height: Math.round(dimensions.height * scale)
-            },
-            type: type,
-            fallback: {
-                type: type != 'svg' ? type : 'png',
-                data: imageBuffer
-            }
-        });
-    }
     async _getImageBuffer(imageUrl) {
         if (imageUrl.startsWith('data:image')) {
             const base64 = imageUrl.split(',')[1];
             return this._base64ToUint8Array(base64);
         }
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 10000); // 10秒超时
         try {
             const response = await fetch(imageUrl, {
                 method: 'GET',
                 mode: 'cors',
-                credentials: 'omit'
+                credentials: 'omit',
+                signal: controller.signal
             });
+            clearTimeout(timeoutId);
             if (!response.ok) {
                 throw new Error(`图片获取失败: ${imageUrl}`);
             }
@@ -1731,6 +2257,7 @@ class CmatQuillTypeComponent extends FieldType {
             return new Uint8Array(arrayBuffer);
         }
         catch (error) {
+            clearTimeout(timeoutId);
             console.error('图片加载失败:', imageUrl, error);
             return new Uint8Array(0);
         }
@@ -1738,10 +2265,18 @@ class CmatQuillTypeComponent extends FieldType {
     async _getImageDimensions(imageUrl) {
         return new Promise((resolve) => {
             const img = new Image();
+            const timeout = setTimeout(() => {
+                img.onload = null;
+                img.onerror = null;
+                // 超时也返回默认值，保证导出流程不中断
+                resolve({ width: 400, height: 300 });
+            }, 5000);
             img.onload = () => {
+                clearTimeout(timeout);
                 resolve({ width: img.width, height: img.height });
             };
             img.onerror = () => {
+                clearTimeout(timeout);
                 resolve({ width: 400, height: 300 });
             };
             img.src = imageUrl;
@@ -1833,9 +2368,15 @@ class CmatQuillTypeComponent extends FieldType {
         this.fileChangeEvent(fileData.toFile());
     }
     _upload(id) {
-        const rootValue = this.baseGroup.get('uploadId')?.value;
-        if (rootValue && !isNil(id)) {
-            this.baseGroup.get('uploadId')?.setValue([id, ...rootValue]);
+        if (isNil(id))
+            return;
+        const uploadControl = this.baseGroup.get('uploadId');
+        if (!uploadControl)
+            return;
+        const currentIds = uploadControl.value || [];
+        // 如果 ID 已存在，则不重复添加
+        if (!currentIds.includes(id)) {
+            uploadControl.setValue([id, ...currentIds]);
         }
     }
     _getMediaType(accept) {
@@ -1861,19 +2402,35 @@ class CmatQuillTypeComponent extends FieldType {
         }
         return baseControl;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatQuillTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CmatQuillTypeComponent, isStandalone: true, selector: "cmat-quill-type", viewQueries: [{ propertyName: "imgInput", first: true, predicate: ["imgInput"], descendants: true }, { propertyName: "videoInput", first: true, predicate: ["videoInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<quill-editor class=\"w-full\" defaultEmptyValue=\"\" [formControl]=\"formControl\" [required]=\"required\"  [placeholder]=\"placeholder\" [tabindex]=\"props.tabindex\"\r\n    [readOnly]=\"disabled\" [modules]=\"quillModules\" (onEditorCreated)=\"editorCreated($event)\"\r\n    (onContentChanged)=\"contentChanged($event)\">\r\n    \r\n    <input #imgInput type=\"file\" accept=\"image/png,image/jpeg,image/jpg,image/gif\" class=\"hidden\" (change)=\"fileChangeEvent(imgInput.files?.[0] ?? undefined)\" />\r\n    <input #videoInput type=\"file\" accept=\"video/mpeg,video/mp4,audio/mp4\" class=\"hidden\" (change)=\"fileChangeEvent(videoInput.files?.[0] ?? undefined)\" />\r\n</quill-editor>\r\n<div class=\"cmat-quill-type\" [attr.data-refresh]=\"refreshVersion()\">\r\n", styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: QuillModule }, { kind: "component", type: i2$4.QuillEditorComponent, selector: "quill-editor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    _extractFileIdsFromDelta(delta) {
+        const config = this._config();
+        if (!config?.fileUrl)
+            return [];
+        // 构建标准前缀，确保以 / 结尾
+        const baseUrl = `${config.fileUrl.replace(/\/$/, '')}/download/quill/`;
+        const ids = new Set(); // 使用 Set 自动去重
+        delta.ops.forEach((op) => {
+            if (op.insert && typeof op.insert === 'object') {
+                const url = op.insert.image ?? op.insert.video;
+                if (url && typeof url === 'string' && url.startsWith(baseUrl)) {
+                    // 提取 baseUrl 之后的部分，并去除查询参数
+                    const relativePath = url.substring(baseUrl.length);
+                    const id = relativePath.split('?')[0].split('#')[0];
+                    if (id) {
+                        ids.add(id);
+                    }
+                }
+            }
+        });
+        return Array.from(ids);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatQuillTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatQuillTypeComponent, isStandalone: true, selector: "cmat-quill-type", viewQueries: [{ propertyName: "imgInput", first: true, predicate: ["imgInput"], descendants: true, isSignal: true }, { propertyName: "videoInput", first: true, predicate: ["videoInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"relative w-full\">\r\n    <quill-editor \r\n        class=\"w-full\" \r\n        defaultEmptyValue=\"\" \r\n        [formControl]=\"formControl\" \r\n        [required]=\"required\"  \r\n        [placeholder]=\"placeholder\" \r\n        [tabindex]=\"props.tabindex\"\r\n        [readOnly]=\"disabled\" \r\n        [modules]=\"quillModules\" \r\n        (onEditorCreated)=\"editorCreated($event)\"\r\n        (onContentChanged)=\"contentChanged($event)\">\r\n        \r\n        <input #imgInput type=\"file\" accept=\"image/png,image/jpeg,image/jpg,image/gif\" class=\"hidden\" (change)=\"fileChangeEvent(imgInput.files?.[0] ?? undefined)\" />\r\n        <input #videoInput type=\"file\" accept=\"video/mpeg,video/mp4,audio/mp4\" class=\"hidden\" (change)=\"fileChangeEvent(videoInput.files?.[0] ?? undefined)\" />\r\n    </quill-editor>\r\n\r\n    @if (isExporting()) {\r\n        <div class=\"absolute inset-0 flex items-center justify-center rounded-2xl border border-dashed border-default bg-card/80 px-4 py-6 text-sm text-secondary shadow-sm z-50 backdrop-blur-sm\">\r\n            <span class=\"animate-pulse\">\u6B63\u5728\u751F\u6210 Word \u6587\u6863...</span>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: QuillModule }, { kind: "component", type: i2$4.QuillEditorComponent, selector: "quill-editor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatQuillTypeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatQuillTypeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-quill-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, QuillModule], template: "<quill-editor class=\"w-full\" defaultEmptyValue=\"\" [formControl]=\"formControl\" [required]=\"required\"  [placeholder]=\"placeholder\" [tabindex]=\"props.tabindex\"\r\n    [readOnly]=\"disabled\" [modules]=\"quillModules\" (onEditorCreated)=\"editorCreated($event)\"\r\n    (onContentChanged)=\"contentChanged($event)\">\r\n    \r\n    <input #imgInput type=\"file\" accept=\"image/png,image/jpeg,image/jpg,image/gif\" class=\"hidden\" (change)=\"fileChangeEvent(imgInput.files?.[0] ?? undefined)\" />\r\n    <input #videoInput type=\"file\" accept=\"video/mpeg,video/mp4,audio/mp4\" class=\"hidden\" (change)=\"fileChangeEvent(videoInput.files?.[0] ?? undefined)\" />\r\n</quill-editor>\r\n<div class=\"cmat-quill-type\" [attr.data-refresh]=\"refreshVersion()\">\r\n", styles: [":host{display:block;width:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { imgInput: [{
-                type: ViewChild,
-                args: ['imgInput']
-            }], videoInput: [{
-                type: ViewChild,
-                args: ['videoInput']
-            }] } });
+            args: [{ selector: 'cmat-quill-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, QuillModule], template: "<div class=\"relative w-full\">\r\n    <quill-editor \r\n        class=\"w-full\" \r\n        defaultEmptyValue=\"\" \r\n        [formControl]=\"formControl\" \r\n        [required]=\"required\"  \r\n        [placeholder]=\"placeholder\" \r\n        [tabindex]=\"props.tabindex\"\r\n        [readOnly]=\"disabled\" \r\n        [modules]=\"quillModules\" \r\n        (onEditorCreated)=\"editorCreated($event)\"\r\n        (onContentChanged)=\"contentChanged($event)\">\r\n        \r\n        <input #imgInput type=\"file\" accept=\"image/png,image/jpeg,image/jpg,image/gif\" class=\"hidden\" (change)=\"fileChangeEvent(imgInput.files?.[0] ?? undefined)\" />\r\n        <input #videoInput type=\"file\" accept=\"video/mpeg,video/mp4,audio/mp4\" class=\"hidden\" (change)=\"fileChangeEvent(videoInput.files?.[0] ?? undefined)\" />\r\n    </quill-editor>\r\n\r\n    @if (isExporting()) {\r\n        <div class=\"absolute inset-0 flex items-center justify-center rounded-2xl border border-dashed border-default bg-card/80 px-4 py-6 text-sm text-secondary shadow-sm z-50 backdrop-blur-sm\">\r\n            <span class=\"animate-pulse\">\u6B63\u5728\u751F\u6210 Word \u6587\u6863...</span>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [":host{display:block;width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { imgInput: [{ type: i0.ViewChild, args: ['imgInput', { isSignal: true }] }], videoInput: [{ type: i0.ViewChild, args: ['videoInput', { isSignal: true }] }] } });
 
 class CmatKnobTypeComponent extends FieldType {
     constructor() {
@@ -1893,10 +2450,10 @@ class CmatKnobTypeComponent extends FieldType {
             },
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatKnobTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CmatKnobTypeComponent, isStandalone: true, selector: "cmat-knob-type", usesInheritance: true, ngImport: i0, template: "<cmat-knob-input [formControl]=\"formControl\" [tabIndex]=\"props.tabindex\" [valueColor]=\"props.valueColor\"\r\n    [rangeColor]=\"props.rangeColor\" [textColor]=\"props.textColor\" [valueTemplate]=\"props.valueTemplate\"\r\n    [name]=\"props.name\" [size]=\"props.size\" [step]=\"props.step\" [min]=\"props.min\" [max]=\"props.max\"\r\n    [strokeWidth]=\"props.strokeWidth\" [showValue]=\"props.showValue\">\r\n</cmat-knob-input>", styles: [":host{width:100%}\n"], dependencies: [{ kind: "component", type: CmatKnobInputComponent, selector: "cmat-knob-input", inputs: ["id", "valueColor", "rangeColor", "textColor", "valueTemplate", "name", "size", "step", "min", "max", "strokeWidth", "showValue", "placeholder", "value", "required", "disabled"], outputs: ["valueChange"], exportAs: ["cmatKnobInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatKnobTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: CmatKnobTypeComponent, isStandalone: true, selector: "cmat-knob-type", usesInheritance: true, ngImport: i0, template: "<cmat-knob-input [formControl]=\"formControl\" [tabIndex]=\"props.tabindex\" [valueColor]=\"props.valueColor\"\r\n    [rangeColor]=\"props.rangeColor\" [textColor]=\"props.textColor\" [valueTemplate]=\"props.valueTemplate\"\r\n    [name]=\"props.name\" [size]=\"props.size\" [step]=\"props.step\" [min]=\"props.min\" [max]=\"props.max\"\r\n    [strokeWidth]=\"props.strokeWidth\" [showValue]=\"props.showValue\">\r\n</cmat-knob-input>", styles: [":host{width:100%}\n"], dependencies: [{ kind: "component", type: CmatKnobInputComponent, selector: "cmat-knob-input", inputs: ["valueColor", "rangeColor", "textColor", "valueTemplate", "name", "size", "step", "min", "max", "strokeWidth", "showValue", "value", "placeholder", "required", "disabled"], outputs: ["valueChange"], exportAs: ["cmatKnobInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatKnobTypeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatKnobTypeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-knob-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CmatKnobInputComponent, ReactiveFormsModule], template: "<cmat-knob-input [formControl]=\"formControl\" [tabIndex]=\"props.tabindex\" [valueColor]=\"props.valueColor\"\r\n    [rangeColor]=\"props.rangeColor\" [textColor]=\"props.textColor\" [valueTemplate]=\"props.valueTemplate\"\r\n    [name]=\"props.name\" [size]=\"props.size\" [step]=\"props.step\" [min]=\"props.min\" [max]=\"props.max\"\r\n    [strokeWidth]=\"props.strokeWidth\" [showValue]=\"props.showValue\">\r\n</cmat-knob-input>", styles: [":host{width:100%}\n"] }]
         }] });
@@ -1912,10 +2469,10 @@ class CmatSliderTypeComponent extends FieldType$1 {
             }
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatSliderTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CmatSliderTypeComponent, isStandalone: true, selector: "cmat-slider-type", usesInheritance: true, ngImport: i0, template: "<mat-slider class=\"w-full\" [id]=\"id\" [tabIndex]=\"props.tabindex\" [color]=\"props.color\"\r\n  [displayWith]=\"props.displayWith!\" [max]=\"props.max\" [min]=\"props.min\" [step]=\"props.step\" [discrete]=\"props.discrete\"\r\n  [showTickMarks]=\"props.showTickMarks\" (input)=\"props.input && props.input(field, $event)\"\r\n  (change)=\"props.change && props.change(field, $event)\">\r\n  <input matSliderThumb [formControl]=\"formControl\" />\r\n</mat-slider>", styles: [":host{width:100%}:host .mdc-slider__input{padding:0!important}\n"], dependencies: [{ kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i1$a.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i1$a.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatSliderTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: CmatSliderTypeComponent, isStandalone: true, selector: "cmat-slider-type", usesInheritance: true, ngImport: i0, template: "<mat-slider class=\"w-full\" [id]=\"id\" [tabIndex]=\"props.tabindex\" [color]=\"props.color\"\r\n  [displayWith]=\"props.displayWith!\" [max]=\"props.max\" [min]=\"props.min\" [step]=\"props.step\" [discrete]=\"props.discrete\"\r\n  [showTickMarks]=\"props.showTickMarks\" (input)=\"props.input && props.input(field, $event)\"\r\n  (change)=\"props.change && props.change(field, $event)\">\r\n  <input matSliderThumb [formControl]=\"formControl\" />\r\n</mat-slider>", styles: [":host{width:100%}:host .mdc-slider__input{padding:0!important}\n"], dependencies: [{ kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i1$a.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i1$a.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatSliderTypeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatSliderTypeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-slider-type', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatSliderModule, ReactiveFormsModule], template: "<mat-slider class=\"w-full\" [id]=\"id\" [tabIndex]=\"props.tabindex\" [color]=\"props.color\"\r\n  [displayWith]=\"props.displayWith!\" [max]=\"props.max\" [min]=\"props.min\" [step]=\"props.step\" [discrete]=\"props.discrete\"\r\n  [showTickMarks]=\"props.showTickMarks\" (input)=\"props.input && props.input(field, $event)\"\r\n  (change)=\"props.change && props.change(field, $event)\">\r\n  <input matSliderThumb [formControl]=\"formControl\" />\r\n</mat-slider>", styles: [":host{width:100%}:host .mdc-slider__input{padding:0!important}\n"] }]
         }] });
@@ -1924,5 +2481,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CmatAddonsWrapperComponent, CmatButtonTypeComponent, CmatCardWrapperComponent, CmatCascadeTypeComponent, CmatCheckListTypeComponent, CmatChipsInputTypeComponent, CmatColorPickerTypeComponent, CmatDateRangeTypeComponent, CmatDatepickerTypeComponent, CmatExpansionWrapperComponent, CmatFormFieldWrapperComponent, CmatKnobTypeComponent, CmatMultiCheckboxTypeComponent, CmatNumberTypeComponent, CmatPanelWrapperComponent, CmatQuillTypeComponent, CmatRadioTypeComponent, CmatRatingTypeComponent, CmatRepeatTypeComponent, CmatSelectTableTypeComponent, CmatSelectTreeTypeComponent, CmatSelectTypeComponent, CmatSliderTypeComponent, CmatStepperHorizontalTypeComponent, CmatStepperVerticalTypeComponent, CmatTabTypeComponent, CmatTableTypeComponent, CmatTagsTypeComponent, CmatTextareaTypeComponent, CmatUploadTypeComponent, addonsExtension };
+export { CmatAddonsWrapperComponent, CmatButtonTypeComponent, CmatCardWrapperComponent, CmatCascadeTypeComponent, CmatCheckListTypeComponent, CmatChipsInputTypeComponent, CmatColorPickerTypeComponent, CmatDataPickerTypeComponent, CmatDateRangeTypeComponent, CmatDatepickerTypeComponent, CmatExpansionWrapperComponent, CmatFormFieldWrapperComponent, CmatKnobTypeComponent, CmatMultiCheckboxTypeComponent, CmatNumberTypeComponent, CmatPanelWrapperComponent, CmatQuillTypeComponent, CmatRadioTypeComponent, CmatRatingTypeComponent, CmatRepeatTypeComponent, CmatSelectTableTypeComponent, CmatSelectTreeTypeComponent, CmatSelectTypeComponent, CmatSliderTypeComponent, CmatStepperHorizontalTypeComponent, CmatStepperVerticalTypeComponent, CmatTabTypeComponent, CmatTableTypeComponent, CmatTagsTypeComponent, CmatTextareaTypeComponent, CmatUploadTypeComponent, DomainDataService, addonsExtension };
 //# sourceMappingURL=cmat-components-custom-formly.mjs.map