ngx-axis-appforge 0.0.0

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

@@ -0,0 +1,175 @@
+@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

@@ -0,0 +1,363 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,114 @@
+<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>