ngx-axis-appforge 0.0.2 → 0.0.3

package/core/share/fun-field/fun-field.html

@@ -1,175 +0,0 @@
-@if (!onlyFun()) {
-<div nz-flex nzAlign="center">
-    @if (!value()?.funMode) {
-    <div nz-flex nzFlex="1 0 0">
-        <ng-content #content></ng-content>
-    </div>
-    }@else{
-    <nz-input-group nz-flex nzFlex="1 0 0" [nzSuffix]="suffixTemplate" [nzPrefix]="prefixTemplate">
-        <input nz-input readonly type="text" [class]="{success:success(),warn:warn(),error:error()}"
-            [placeholder]="success() || warn() || error()" (click)="openFunModal()" />
-    </nz-input-group>
-    }
-    <a nz-button nzType="link" [disabled]="disabled()" (click)="toogleMode()"><i style="margin: 0 auto;display: block;"
-            nz-icon [nzType]="value()?.funMode?'rollback':'function'" nzTheme="outline"></i></a>
-</div>
-}@else{
-<nz-input-group [nzSuffix]="suffixTemplate" [nzPrefix]="prefixTemplate">
-    <input nz-input readonly type="text" [class]="{success:success(),warn:warn(),error:error()}"
-        [placeholder]="success() || warn() || error() || ''" (click)="openFunModal()" />
-</nz-input-group>
-}
-<ng-template #prefixTemplate>
-    <i nz-icon nzType="function" style="margin-right: 5px;"></i>
-    @if (success()) {
-    <i nz-icon nzType="check-circle" style="color:#52c41a;"></i>
-    }@else if (warn()) {
-    <i nz-icon nzType="exclamation-circle" style="color:#faad14;"></i>
-    }@else if (error()) {
-    <i nz-icon nzType="close-circle" style="color:#ff4d4f;"></i>
-    }
-</ng-template>
-<ng-template #suffixTemplate>
-    <i style="color:rgba(150, 150, 150, 0.5);" nz-icon nzType="edit" nzTheme="outline"></i>
-</ng-template>
-<nz-modal nzWidth="1000px" [nzBodyStyle]="{padding:'0'}" [(nzVisible)]="open" (nzOnCancel)="onCancel()"
-    (nzOnOk)="onOk()" (nzAfterClose)="editValue.set(undefined);">
-    <ng-container *nzModalTitle>
-        <i nz-icon nzType="function" style="margin-right: 8px;"></i>编辑脚本
-        @if (editTip()) {
-        <span style="font-size: 12px;margin-left: 30px;color:var(--ant-error-color)">
-            <nz-icon nzType="info-circle" nzTheme="outline" />
-            {{editTip()}}
-        </span>
-        }
-    </ng-container>
-    <ng-container *nzModalContent>
-        <nz-splitter style="height: 400px;" (nzResize)="layoutEditor()">
-            <nz-splitter-panel [nzDefaultSize]="250" [nzMin]="250" nzMax="70%" [nzCollapsible]="true">
-                <nz-collapse nzAccordion [nzBordered]="false">
-                    @if (funcsNames.length) {
-                    <nz-collapse-panel nzHeader="注入函数" [nzExtra]="funcsNames.length.toString()">
-                        @for (item of funcsNames; track $index) {
-                        <div><span style="color:#C52727">function</span> {{item}}</div>
-                        }
-                    </nz-collapse-panel>
-                    }
-                    @if (importsList().length) {
-                    <nz-collapse-panel nzHeader="函数库导入"
-                        [nzExtra]="(editValue().fnValue?.imports?.length ?? 0) + '/'+importsList().length">
-                        <nz-checkbox-group [nzOptions]="importsList()" [ngModel]="editValue().fnValue?.imports"
-                            (ngModelChange)="changeImports($event)" />
-                    </nz-collapse-panel>
-                    }
-                    <nz-collapse-panel nzActive nzHeader="数据源" [nzExtra]="addListenBtn">
-                        <ng-template #addListenBtn>
-                            <a nz-button nzType="link" nzSize="small"
-                                (click)="$event.stopPropagation();showCreateListenModal.set(true)">
-                                <nz-icon nzType="plus"></nz-icon>
-                                添加
-                            </a>
-                        </ng-template>
-                        @if (!scopeds().length) {
-                        <nz-empty nzNotFoundContent="暂无数据源"></nz-empty>
-                        }@else{
-                        @for (scope of scopeds(); track scope.scopeId) {
-                        <div class="scope-tag">{{scope.scopeName}}</div>
-                        @for (item of getDsNames(scope); track item;) {
-                        <div nz-flex nzVertical style="margin-top: 2px;">
-                            <div nz-flex nzAlign="center">
-                                <a nz-button nzType="link" nzSize="small" (click)="doShowDataSource(item)">
-                                    <i nz-icon nzType="search" nzTheme="outline"></i>
-                                    {{item}}
-                                </a>
-                                <a nz-button nzType="link" nzSize="small" ngxClipboard [cbContent]="item"
-                                    (cbOnSuccess)="copySuccess()">
-                                    <i nz-icon nzType="copy" nzTheme="outline"></i>
-                                </a>
-                                @if (scope.scopeId == '__unknown__') {
-                                <a nz-button nzType="link" nzSize="small" nzDanger (click)="removeListen(item)">
-                                    <i nz-icon nzType="delete" nzTheme="outline"></i>
-                                </a>
-                                }
-                            </div>
-                            @if (!noListen()) {
-                            <nz-select style="margin-left:16px;font-size: 12px;width: fit-content;"
-                                [nzDropdownMatchSelectWidth]="false" nzVariant="borderless"
-                                [ngModel]="editValue().fnValue?.listen?.[item]??'none'"
-                                (ngModelChange)="changeLinstenMode(item,$event)" nzSize="small">
-                                <nz-option nzCustomContent nzLabel="不监听" nzValue="none">
-                                    <span style="font-size: 12px;">不监听</span>
-                                </nz-option>
-                                <nz-option nzCustomContent nzLabel="首次有定义" nzValue="firstDefined">
-                                    <span style="font-size: 12px;">首次有定义</span>
-                                </nz-option>
-                                <nz-option nzCustomContent nzLabel="有定义" nzValue="defined">
-                                    <span style="font-size: 12px;">有定义</span>
-                                </nz-option>
-                                <nz-option nzCustomContent nzLabel="总是" nzValue="aways">
-                                    <span style="font-size: 12px;">总是</span>
-                                </nz-option>
-                            </nz-select>
-                            }
-                        </div>
-                        }
-                        }
-                        }
-                    </nz-collapse-panel>
-                </nz-collapse>
-            </nz-splitter-panel>
-            <nz-splitter-panel>
-                <div nz-flex nzVertical style="height: 100%;">
-                    <div class="code-row"><span style="color: #C52727;">function</span>({{argsName()}})
-                        {{'{'}}</div>
-                    <div nz-flex nzFlex="1 1 0">
-                        <ng-container #funEditor="axisDynamic"
-                            [axisDynamic]="{component:'axis-components/editor',inuse:true,mode:'javascript',typescriptExtLibs:importDeclarations()}"
-                            [standalone]="true" [(ngModel)]="editFn"
-                            (ngModelChange)="execFnSubject.next()"></ng-container>
-                    </div>
-                    <div class="code-row"> {{'}'}}</div>
-                </div>
-            </nz-splitter-panel>
-        </nz-splitter>
-        @if (success()) {
-        <nz-alert nzShowIcon nzType="success" nzCloseable [nzDescription]="success()" (nzOnClose)="success.set('')"
-            [nzAction]="showSuccessResultBtn">
-        </nz-alert>
-        <ng-template #showSuccessResultBtn>
-            <button nz-button (click)="isShowSuccessResult=true">查看执行结果</button>
-        </ng-template>
-        }@else if(error()){
-        <nz-alert nzShowIcon nzType="error" nzCloseable [nzDescription]="error()" (nzOnClose)="error.set('')">
-        </nz-alert>
-        }@else if(warn()){
-        <nz-alert nzShowIcon nzType="warning" nzCloseable [nzDescription]="warn()" (nzOnClose)="warn.set('')">
-        </nz-alert>
-        }
-    </ng-container>
-</nz-modal>
-
-<nz-modal [nzVisible]="!!isShowSuccessResult" nzTitle="函数执行结果" [nzOkText]="null"
-    (nzOnCancel)="isShowSuccessResult=false;" [nzBodyStyle]="{padding:'0',position:'relative'}" nzCancelText="关闭">
-    <div *nzModalContent style="height: 400px;" nz-flex>
-        <ng-container [axisDynamic]="{component:'axis-components/editor',inuse:true,mode:'json',readonly:true}"
-            [standalone]="true" [ngModel]="successResult"></ng-container>
-    </div>
-</nz-modal>
-
-<nz-modal nzWidth="800px" [nzVisible]="!!showDataSource()" [nzTitle]="'查看数据源-'+showDataSource()?.name" [nzOkText]="null"
-    (nzOnCancel)="showDataSource.set(undefined)" [nzBodyStyle]="{padding:'0'}" nzCancelText="关闭">
-    <div *nzModalContent style="height: 400px;" nz-flex>
-        <ng-container [axisDynamic]="{component:'axis-components/editor',inuse:true,mode:'json',readonly:true}"
-            [standalone]="true" [ngModel]="showDataSource()?.data ??''"></ng-container>
-    </div>
-</nz-modal>
-
-<nz-modal [(nzVisible)]="showCreateListenModal" nzDraggable nzTitle="创建监听" (nzOnOk)="addListen()"
-    (nzOnCancel)="showCreateListenModal.set(false)" nzWidth="400px">
-    <ng-container *nzModalContent>
-        <div nz-flex nzAlign="center">
-            <div>数据源名称：</div>
-            <input style="flex:1" nz-input [(ngModel)]="createListenDataSourceName" />
-        </div>
-    </ng-container>
-</nz-modal>

package/core/share/fun-field/fun-field.ts

@@ -1,363 +0,0 @@
-import { AfterContentInit, ChangeDetectionStrategy, Component, computed, ContentChild, effect, forwardRef, inject, input, model, OnDestroy, signal, ViewChild } from '@angular/core';
-import { ControlValueAccessor, NgModel, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import { NzMessageService } from 'ng-zorro-antd/message';
-import { debounceTime, Subject, Subscription, switchMap } from 'rxjs';
-import { NzModalModule } from 'ng-zorro-antd/modal';
-import { NzListModule } from 'ng-zorro-antd/list';
-import { NzFlexModule } from 'ng-zorro-antd/flex';
-import { NzInputModule } from 'ng-zorro-antd/input';
-import { NzIconModule } from 'ng-zorro-antd/icon';
-import { NzButtonModule } from 'ng-zorro-antd/button';
-import { NzRadioModule } from 'ng-zorro-antd/radio';
-import { ClipboardModule } from 'ngx-clipboard';
-import { NzAlertModule } from 'ng-zorro-antd/alert';
-import { NzEmptyModule } from 'ng-zorro-antd/empty';
-import { NzSelectModule } from 'ng-zorro-antd/select';
-import { NzSplitterModule } from 'ng-zorro-antd/splitter';
-import { AXIS_SCRIPTS_TOKEN, AXIS_DESIGN_SCOPE_INFOS_GETTER_TOKEN, AXIS_INJECT_FUNC_TOKEN } from '../tokens';
-import { fn } from '../../utils/dynamic.util';
-import { ScopeInfo } from '../../models/design-build';
-import { copy } from '../../utils/object.utils';
-import { NzCollapseModule } from 'ng-zorro-antd/collapse';
-import { NzCheckboxModule, NzCheckboxOption } from 'ng-zorro-antd/checkbox';
-import { loadScripts } from '../../utils/scripts-loader';
-import { generateDeclarations } from '../../utils/declaration.utils';
-import { DynamicDirective } from '../../directives/dynamic';
-import { toObservable, toSignal } from '@angular/core/rxjs-interop';
-
-@Component({
-  selector: 'axis-fun-field',
-  imports: [NzModalModule, NzListModule, NzFlexModule, NzInputModule, NzIconModule, NzButtonModule, NzRadioModule, FormsModule, ClipboardModule, NzAlertModule, NzEmptyModule, NzSelectModule, NzSplitterModule, NzCollapseModule, NzCheckboxModule, DynamicDirective],
-  templateUrl: './fun-field.html',
-  styleUrls: ['./fun-field.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => FunField),
-      multi: true
-    }
-  ]
-})
-export class FunField implements ControlValueAccessor, OnDestroy, AfterContentInit {
-  constructor(private msg: NzMessageService) {
-    this._sub.push(this.execFnSubject.pipe(debounceTime(300))
-      .subscribe(async _ => {
-        if (!this.onlyFun() && !(this.editValue() ?? this.value()).funMode) {
-          this.computeResult.set(this.value().originValue);
-        } else {
-          const args = this.ds();
-          const libs: string[] = [];
-          for (const i of (this.editValue() ?? this.value())?.fnValue?.imports ?? []) {
-            if (this.scripts?.hasOwnProperty(i)) {
-              libs.push(await loadScripts(`${this.scripts[i]}.js`));
-            }
-          }
-          try {
-            this.success.set("");
-            this.warn.set("");
-            this.error.set("");
-            this.computeResult.set(fn(`${libs.join("\n")}\n${this.editFn()}`, args, true, false));
-            if (!this.onlyFun() && this.editValue()?.funMode) {
-              this.editValue().originValue = this.computeResult();
-              this.updateContentValue();
-            }
-            if (this.computeResult() == undefined) {
-              this.warn.set(`警告：执行结果为${this.computeResult()}`);
-            } else {
-              if (typeof (this.computeResult()) == "object") {
-                this.resultResultEditorMode = "json";
-              } else {
-                this.resultResultEditorMode = "plain_text";
-              }
-              this.successResult = JSON.stringify(this.computeResult(), undefined, "\t");
-              this.success.set("函数运行成功！");
-            }
-          } catch (e: any) {
-            this.error.set(`报错：${e.message}`);
-          }
-        }
-      }));
-    effect(() => {
-      this.buildImportDeclarations();
-    });
-  }
-
-  readonly scopes = input<ScopeInfo[]>();
-  readonly exclude = input<string[] | undefined>([]);
-  readonly scopeId = input<string>();
-  readonly onlyFun = input(false);
-  readonly noListen = input(false);
-  readonly disabled = input(false);
-  readonly getScopeInfos = inject(AXIS_DESIGN_SCOPE_INFOS_GETTER_TOKEN);
-  readonly scopeInfos = toSignal(toObservable(this.scopeId).pipe(switchMap(scopeId => this.getScopeInfos(scopeId))));
-  readonly scripts = inject(AXIS_SCRIPTS_TOKEN, { optional: true });
-  readonly funcs = inject(AXIS_INJECT_FUNC_TOKEN, { optional: true });
-  readonly funcsNames = Object.keys(this.funcs ?? {});
-  readonly scopeds = computed(() => this.buildScopeDs());
-  readonly ds = computed(() => this.buildDs());
-  readonly argsName = computed(() => this.buildArgsName());
-  readonly importsList = computed(() => this.buildImportsList());
-  readonly importDeclarations = signal<any[]>([]);
-  readonly showDataSource = signal<any>(undefined);
-  readonly editValue = signal<any>(undefined);
-  readonly editFn = signal<any>(undefined);
-  readonly editTip = input<string>();
-
-  @ViewChild("funEditor")
-  funEditor?: DynamicDirective;
-  monaco?: any;
-
-  @ContentChild(NgModel)
-  contentModel?: NgModel;
-
-  execFnSubject = new Subject<void>();
-
-  successResult: any;
-  computeResult = signal<any>(undefined);
-
-  resultResultEditorMode: string = "json";
-
-  isShowSuccessResult = false;
-
-  _sub: Subscription[] = [];
-
-  ngOnDestroy(): void {
-    this._sub.forEach(s => s.unsubscribe());
-  }
-
-  onChange: any;
-
-  value = model<any>();
-
-  writeValue(v: FunFieldValue | undefined): void {
-    this.value.set(v);
-    if (this.onlyFun() && this.noListen()) {
-      this.editFn.set(v as any || "return undefined");
-      this.execFnSubject.next();
-    } else if (v) {
-      if (v?.funMode) {
-        this.editFn.set(this.value()!.fnValue.fn);
-        this.execFnSubject.next();
-      } else {
-        this.value()!.fnValue = {
-          listen: {},
-          fn: `return ${JSON.stringify(this.value()!.originValue)};`
-        };
-        this.editFn.set(this.value()!.fnValue.fn);
-      }
-    }
-    this.updateContentValue();
-  }
-
-  private updateContentValue() {
-    if (!this.onlyFun() && this.value()) {
-      this.contentModel?.control.setValue(this.value()!.originValue, { emitModelToViewChange: true, emitViewToModelChange: false });
-    }
-  }
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(_: any): void {
-  }
-
-  _templateDataSource?: any[] = [];
-
-  readonly open = model(false);
-  readonly success = signal<string>("");
-  readonly error = signal<string>("");
-  readonly warn = signal<string>("");
-
-  showCreateListenModal = model(false);
-
-  showAddImportModal = false;
-
-  createListenDataSourceName = model("");
-
-  ngAfterContentInit(): void {
-    setTimeout(() => {
-      if (this.value()?.fnValue?.fn) {
-        this.execFnSubject.next();
-      }
-      this.updateContentValue();
-    });
-    if (this.contentModel?.update) {
-      this._sub.push(this.contentModel.update.subscribe(v => {
-        if (this.value() !== undefined) {
-          this.value()!.originValue = v;
-          this.changeValue();
-          // this.computeResult.set(v);
-        }
-      }))
-    }
-  }
-
-  private buildScopeDs(): ScopeInfo[] {
-    let scopes: any[] = copy((this.scopes() ?? []).concat(this.scopeInfos() ?? []), true);
-    const sdname = new Set<string>();
-    for (const scope of scopes) {
-      for (const name in scope.ds) {
-        sdname.add(name);
-        if (this.exclude()?.includes(name)) {
-          delete scope.ds[name];
-        }
-      }
-    }
-    const unknownScope: any = {
-      scopeId: "__unknown__",
-      scopeName: "未知",
-      ds: {},
-    }
-    scopes.unshift(unknownScope);
-    for (const en of Object.entries((this.editValue() ?? this.value())?.fnValue?.listen ?? {})) {
-      if (!sdname.has(en[0])) {
-        unknownScope.ds[en[0]] = "示例数据";
-      }
-    }
-    this.execFnSubject.next();
-    return scopes.filter(s => Object.keys(s.ds ?? {}).length);
-  }
-
-  getDsNames(scope: ScopeInfo): string[] {
-    return Object.keys(scope.ds);
-  }
-
-  private buildDs(): any {
-    const ds: any = {};
-    for (const scope of this.scopeds()) {
-      Object.assign(ds, scope.ds);
-    }
-    Object.assign(ds, this.funcs)
-    return ds;
-  }
-
-  openFunModal() {
-    this.open.set(true);
-    this.editValue.set(copy(this.value(), true));
-  }
-
-  private buildArgsName(): string {
-    return Object.keys(this.ds()).join(",");
-  }
-
-  private buildImportsList(): NzCheckboxOption[] {
-    return Object.keys(this.scripts ?? {})
-      .map((name) => ({ label: name, value: name }))
-  }
-
-  changeLinstenMode(name: string, mode: string) {
-    if (!this.editValue()!.fnValue?.listen) {
-      this.editValue()!.fnValue.listen = {};
-    }
-    if (mode == "none") {
-      delete this.editValue()!.fnValue.listen![name];
-    } else {
-      this.editValue()!.fnValue.listen![name] = mode;
-    }
-    this.editValue.set({ ...this.editValue() });
-  }
-
-  changeImports(imports: string[]) {
-    this.editValue().fnValue.imports = imports;
-    this.editValue.set({ ...this.editValue() });
-    this.execFnSubject.next();
-  }
-
-  onCancel() {
-    this.open.set(false);
-  }
-
-  onOk() {
-    this.value.set(this.editValue());
-    this.changeValue();
-    this.open.set(false);
-  }
-
-  toogleMode() {
-    if (this.value() && !this.onlyFun()) {
-      this.value()!.funMode = !this.value()!.funMode;
-      if (this.value()!.funMode && !this.value()!.fnValue) {
-        this.value()!.fnValue = { fn: `return ${JSON.stringify(this.value()!.originValue)};` };
-      }
-      this.changeValue();
-    }
-  }
-
-  changeValue() {
-    if (this.noListen() && this.onlyFun()) {
-      this.value.set(this.editFn());
-      this.onChange(this.value());
-      return;
-    } else if (this.onlyFun() || this.value()?.funMode) {
-      this.value()!.funMode = true;
-      for (const en of Object.entries(this.value()!.fnValue.listen)) {
-        if (en[1] == "none") {
-          delete this.value()!.fnValue.listen[en[0]];
-        }
-      }
-      this.value().fnValue.fn = this.editFn();
-    }
-    this.value.set(copy(this.value()));
-    this.onChange(this.value());
-  }
-
-  doShowDataSource(name: string) {
-    this.showDataSource.set({
-      name: name,
-      data: JSON.stringify(this.ds()[name], undefined, '\t')
-    });
-  }
-
-  copySuccess() {
-    this.msg.info("已复制");
-  }
-
-  addListen() {
-    if (this.createListenDataSourceName()) {
-      if (this.ds().hasOwnProperty(this.createListenDataSourceName())) {
-        this.msg.error("数据源名称重复");
-        return;
-      }
-      if (!this.editValue().fnValue.listen) {
-        this.editValue().fnValue.listen = {};
-      }
-      this.editValue().fnValue.listen[this.createListenDataSourceName()] = "defined";
-      this.editValue.set({ ...this.editValue() });
-    }
-    this.showCreateListenModal.set(false);
-    this.createListenDataSourceName.set("");
-    this.execFnSubject.next();
-  }
-
-  removeListen(name: string) {
-    delete this.editValue().fnValue.listen[name];
-    this.editValue.set({ ...this.editValue() });
-    this.execFnSubject.next();
-  }
-
-  async buildImportDeclarations() {
-    const libs: { content: string; filePath?: string; }[] = [];
-    for (const name in this.scripts) {
-      if (this.editValue().fnValue?.imports?.includes(name)) {
-        const filePath = this.scripts[name] + ".d.ts";
-        const dtsContent = await loadScripts(filePath);
-        libs.push({ content: dtsContent, filePath });
-      }
-    }
-    libs.push({ content: generateDeclarations(this.ds()) });
-    this.importDeclarations.set(libs);
-  }
-
-  layoutEditor() {
-    this.funEditor?.onEvents?.({ name: "layout", target: "component" })?.subscribe();
-  }
-
-}
-
-export interface FunFieldValue {
-  funMode: boolean;
-  originValue: any;
-  fnValue: any;
-}

package/core/share/input-trigger/input-trigger.css

@@ -1,16 +0,0 @@
-nz-tree {
-    background-color: transparent;
-    overflow-x: auto;
-}
-
-[nz-button] {
-    padding: 0;
-}
-
-.expand-button {
-    opacity: 0;
-}
-
-nz-flex:hover .expand-button {
-    opacity: 1;
-}

package/core/share/input-trigger/input-trigger.html

@@ -1,114 +0,0 @@
-<nz-collapse [nzBordered]="false">
-    <nz-collapse-panel nzHeader="事件设置">
-        <nz-tree #tree [nzData]="nodes()" nzDraggable nzBlockNode [nzTreeTemplate]="nodeTemp"
-            [nzExpandedKeys]="treeExpandedKeys()" (nzOnDragStart)="onDragStart($event)" [nzBeforeDrop]="beforeDrop"
-            nzExpandAll></nz-tree>
-    </nz-collapse-panel>
-    @if (showLine()) {
-    <div></div>
-    }
-</nz-collapse>
-
-<ng-template #nodeTemp let-node>
-    <nz-flex nzAlign="center" style="width: 100%;" nzGap="4px">
-        @switch (node.origin.type) {
-        @case ("event") {
-        <div style="white-space: nowrap;">{{node.title}}</div>
-        <a nz-button nzType="link" nzSize="small" (click)="startAddHandler(node)"><nz-icon
-                nzType="plus"></nz-icon>操作</a>
-        @if (node.children.length) {
-        <a class="expand-button" nz-button nzType="text" nzSize="small" nzShape="circle"
-            (click)="expand(node,!hasExpanded(node))"><nz-icon
-                [nzType]="hasExpanded(node)?'shrink':'arrows-alt'"></nz-icon></a>
-        }
-        }
-        @case ("handler") {
-        <nz-icon style="cursor: move;" nzType="holder" nzTheme="outline" />
-        <a nz-button nzType="link" nzSize="small" (click)="startSetHandler(node)">
-            <nz-icon [nzType]="node.icon" nzTheme="outline" />
-            <span style="text-decoration: underline;white-space: nowrap;">{{node.title}}</span>
-        </a>
-        <a nz-button nzType="link" nzDanger nzSize="small" (click)="deleteHandler(node)"><nz-icon
-                nzType="delete"></nz-icon></a>
-        @if (node.children.length) {
-        <a class="expand-button" nz-button nzType="text" nzSize="small" nzShape="circle"
-            (click)="expand(node,!hasExpanded(node))"><nz-icon
-                [nzType]="hasExpanded(node)?'shrink':'arrows-alt'"></nz-icon></a>
-        }
-        }
-        }
-    </nz-flex>
-</ng-template>
-
-<nz-modal [nzWidth]="selectedHandlerDesc()?.formStyle?.width ?? '400px'" [(nzVisible)]="isVisibleHandlerModal"
-    nzDraggable nzTitle="设置事件操作" (nzOnCancel)="isVisibleHandlerModal.set(false)" (nzOnOk)="onSetHandlerOk()"
-    (nzAfterClose)="resetSetHandler()" (nzAfterOpen)="onHandlerChange(fg.value.name)">
-    <ng-container *nzModalContent>
-        <form nz-form [formGroup]="fg">
-            <nz-form-item>
-                <nz-form-label [nzSpan]="selectedHandlerDesc()?.formStyle?.labelSpan ?? 6" nzRequired>操作</nz-form-label>
-                <nz-form-control [nzSpan]="24 - (selectedHandlerDesc()?.formStyle?.labelSpan ?? 6)">
-                    <nz-select formControlName="name" nzShowSearch nzPlaceHolder="选择操作" [nzFilterOption]="filterOption"
-                        (ngModelChange)="onHandlerChange($event)">
-                        @for (item of allEventHanderDescGroups(); track item.groupName) {
-                        <nz-option-group [nzLabel]="item.groupName">
-                            @for (item of item.handlerDescs; track item.name) {
-                            <nz-option nzCustomContent [nzValue]="item.name" [nzLabel]="item.title">
-                                @if (item.icon) {
-                                <nz-icon [nzType]="item.icon" />
-                                }
-                                {{item.title}}
-                            </nz-option>
-                            }
-                        </nz-option-group>
-                        }
-                    </nz-select>
-                </nz-form-control>
-            </nz-form-item>
-            <nz-form-item>
-                <nz-form-label [nzSpan]="selectedHandlerDesc()?.formStyle?.labelSpan ?? 6" nzRequired>禁用</nz-form-label>
-                <nz-form-control [nzSpan]="24 - (selectedHandlerDesc()?.formStyle?.labelSpan ?? 6)">
-                    <axis-fun-field formControlName="disabled" [noListen]="noListen()"
-                        [scopes]="handlerFunFieldScopes()">
-                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
-                    </axis-fun-field>
-                </nz-form-control>
-            </nz-form-item>
-            @if (selectedHandlerDesc()?.target == "component") {
-            <nz-form-item>
-                <nz-form-label [nzSpan]="selectedHandlerDesc()?.formStyle?.labelSpan ?? 6" nzRequired>目标</nz-form-label>
-                <nz-form-control [nzSpan]="24 - (selectedHandlerDesc()?.formStyle?.labelSpan ?? 6)">
-                    <axis-fun-field formControlName="id" [noListen]="noListen()" [scopes]="handlerFunFieldScopes()">
-                        <nz-select ngModel [ngModelOptions]="{standalone:true}" nzShowSearch>
-                            @for (component of canChooseComponentsInfo(); track component.componentName) {
-                            <nz-option-group [nzLabel]="component.componentName">
-                                @for(node of component.nodes; track node.id){
-                                <nz-option [nzLabel]="node.id" [nzValue]="node.id"></nz-option>
-                                }
-                            </nz-option-group>
-                            }
-                        </nz-select>
-                    </axis-fun-field>
-                </nz-form-control>
-            </nz-form-item>
-            }@else if (selectedHandlerDesc()?.target == "scope") {
-            <nz-form-item>
-                <nz-form-label [nzSpan]="selectedHandlerDesc()?.formStyle?.labelSpan ?? 6">目标域</nz-form-label>
-                <nz-form-control [nzSpan]="24 - (selectedHandlerDesc()?.formStyle?.labelSpan ?? 6)">
-                    <axis-fun-field formControlName="id" [noListen]="noListen()" [scopes]="handlerFunFieldScopes()">
-                        <nz-select ngModel [ngModelOptions]="{standalone:true}" nzShowSearch nzAllowClear
-                            nzPlaceHolder="默认当前域">
-                            @for (scope of scopeInfoSubject().value; track scope.scopeId) {
-                            @if (!scope.scopeId.startsWith("__handler_scope_")) {
-                            <nz-option [nzLabel]="scope.scopeName" [nzValue]="scope.scopeId"></nz-option>
-                            }
-                            }
-                        </nz-select>
-                    </axis-fun-field>
-                </nz-form-control>
-            </nz-form-item>
-            }
-            <ng-container #dataContainer></ng-container>
-        </form>
-    </ng-container>
-</nz-modal>