ngx-axis-appforge 0.0.3 → 0.0.4

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

@@ -0,0 +1,394 @@
+import { AfterViewInit, ChangeDetectionStrategy, Component, computed, ElementRef, forwardRef, inject, Injector, input, model, signal, ViewChild, ViewContainerRef } from '@angular/core';
+import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { NzCollapseModule } from 'ng-zorro-antd/collapse';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzFormatBeforeDropEvent, NzFormatEmitEvent, NzTreeComponent, NzTreeModule, NzTreeNode, NzTreeNodeOptions } from 'ng-zorro-antd/tree';
+import { BehaviorSubject, map, Observable, of } from 'rxjs';
+import { baseEventHandlerDescGroups, baseEventHandlerDescs } from '../base-event-handler-descs';
+import { CommonModule } from '@angular/common';
+import { NzModalModule } from 'ng-zorro-antd/modal';
+import { NzFilterOptionType, NzSelectItemInterface, NzSelectModule } from 'ng-zorro-antd/select';
+import { AXIS_DESIGN_COMPONENT_INFO_FOR_SETTING_TOKEN, AXIS_DESIGN_SCOPE_INFOS_GETTER_TOKEN, AXIS_EVENT_HANDLER_DESCS_TOKEN } from '../tokens';
+import { FunField } from '../fun-field/fun-field';
+import { FunFieldBase } from '../../base/funfield-base';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { ScopeInfo } from '../../models/design-build';
+import { EventDesc, EventHandlerDesc, EventHandlerDescGroup } from '../../models/event-desc';
+import { EventHandlerOptions } from '../../models/event.options';
+import { TriggeEventsOptions } from '../../models/trigge-events.options';
+import { FormValidators } from '../../utils/form-validators';
+import { FunFieldOptions } from '../../models/fun-field.options';
+import { updateAndValidAll } from '../../utils/form.util';
+import { OptionsNode } from '../../models/options-node';
+import { NzFlexModule } from 'ng-zorro-antd/flex';
+
+@Component({
+    selector: 'axis-input-trigger',
+    imports: [NzCollapseModule, NzFormModule, NzButtonModule, NzIconModule, NzTreeModule, CommonModule, NzModalModule, NzSelectModule, ReactiveFormsModule, FunField, FormsModule, NzSwitchModule, NzFlexModule],
+    templateUrl: './input-trigger.html',
+    styleUrl: './input-trigger.css',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => InputTrigger),
+            multi: true
+        }
+    ]
+})
+export class InputTrigger extends FunFieldBase implements AfterViewInit {
+
+    constructor(private element: ElementRef) {
+        super();
+    }
+
+    fg: UntypedFormGroup = this.fb.group({
+        name: [undefined, FormValidators.required],
+        disabled: [undefined, FormValidators.requiredFun],
+        data: [],
+        id: [],
+    });
+
+    protected override funFields: FunFieldOptions = {
+        disabled: {
+            defaultValue: false
+        },
+        id: {
+            defaultValue: undefined
+        },
+
+    };
+
+    onChange: any;
+    readonly noListen = signal(true);
+    readonly internalTriggers = input<"valueChange"[]>();
+    readonly getScopeInfos = inject(AXIS_DESIGN_SCOPE_INFOS_GETTER_TOKEN);
+    readonly componentsInfo = inject(AXIS_DESIGN_COMPONENT_INFO_FOR_SETTING_TOKEN);
+    readonly canChooseComponentsInfo = signal<{ component: string, componentName: string, nodes: OptionsNode[], eventHandlerDescs: { [event: string]: EventHandlerDesc } }[]>([]);
+    readonly value = model<TriggeEventsOptions>();
+    readonly nodes = computed(() => this.makeTreeNode(this.buildAllEventDesc()!, this.value()));
+    readonly eventDesc = input<EventDesc[]>();
+    readonly allEventDesc = computed(() => this.buildAllEventDesc());
+    readonly allEventHanderDescGroups = computed(() => this.buildAllEventHandlerDescGroups());
+    readonly allEventHanderDescs = computed(() => this.buildAllEventHandlerDescs());
+    readonly showLine = signal(false);
+    readonly isVisibleHandlerModal = model(false);
+    readonly handlerFunFieldScopes = signal<ScopeInfo[]>([]);
+    readonly editEventHandler = model<EventHandlerOptions<any>>();
+    readonly treeExpandedKeys = signal<string[]>([]);
+    readonly selectedHandlerDesc = signal<EventHandlerDesc | undefined>(undefined);
+    readonly otherHandlerDescs = inject(AXIS_EVENT_HANDLER_DESCS_TOKEN, { optional: true });
+    @ViewChild("tree", { static: true })
+    tree!: NzTreeComponent;
+    @ViewChild("dataContainer", { read: ViewContainerRef })
+    dataContainer?: ViewContainerRef;
+    readonly scopeInfoSubject = computed(() => this.buildScopeInfoSubject());
+
+    editInfo?: { key: string, event: string, isAdd: boolean, value?: EventHandlerOptions<any>, parentValue?: EventHandlerOptions<any> };
+
+    filterOption: NzFilterOptionType = (input: string, option: NzSelectItemInterface): boolean => {
+        if (input) {
+            return option.nzValue.includes(input) || option.nzLabel?.toString()?.includes(input);
+        }
+        return false;
+    }
+    writeValue(v: any): void {
+        this.value.set(v);
+    }
+    registerOnChange(fn: any): void {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn: any): void {
+    }
+
+    ngAfterViewInit(): void {
+        if (this.element.nativeElement.nextElementSibling) {
+            this.showLine.set(true);
+        }
+    }
+
+    onDragStart(e: NzFormatEmitEvent): void {
+        if (e.node?.origin["type"] == "event") {
+            e.event?.stopPropagation();
+            e.event?.preventDefault();
+            const ele = (e.event?.target as HTMLElement);
+            ele.draggable = false;
+            setTimeout(() => {
+                ele.parentElement?.classList.remove("dragging");
+            });
+        }
+    }
+
+    beforeDrop = (e: NzFormatBeforeDropEvent): Observable<boolean> => {
+        const { dragNode, node, pos } = e;
+        if (dragNode.origin["type"] == "handler" && node.origin["type"] == "handler" && pos != 0 && node.parentNode == dragNode.parentNode) {
+            const dragV = dragNode.origin["value"];
+            const dropV = node.origin["value"];
+            const parentV: any[] = node.parentNode?.origin["value"];
+            parentV.splice(parentV.indexOf(dragV), 1);
+            parentV.splice(parentV.indexOf(dropV) + (pos == -1 ? 0 : 1), 0, dragV);
+            this.onValueChange();
+            return of(true);
+        }
+        return of(false);
+    }
+
+    private buildAllEventHandlerDescGroups(): EventHandlerDescGroup[] {
+
+        const groups = [
+            ...baseEventHandlerDescGroups,
+            ...this.otherHandlerDescs ?? [],
+        ];
+        this.componentsInfo.forEach(c => {
+            groups.push({
+                groupName: c.componentName,
+                handlerDescs: Array.from(Object.values(c.eventHandlerDescs))
+            });
+        });
+        return groups;
+    }
+
+    private buildAllEventHandlerDescs(): { [name: string]: EventHandlerDesc } {
+        const descs = {
+            ...baseEventHandlerDescs
+        };
+        if (this.otherHandlerDescs) {
+            this.otherHandlerDescs.forEach(g => {
+                g.handlerDescs.forEach(d => {
+                    descs[d.name] = d;
+                })
+            });
+        }
+        this.componentsInfo.forEach(c => {
+            Object.assign(descs, c.eventHandlerDescs);
+        });
+        return descs;
+    }
+
+    private buildAllEventDesc(): EventDesc[] {
+        let eventDesc: EventDesc[] = [];
+        if (this.eventDesc()) {
+            eventDesc = eventDesc.concat(this.eventDesc()!);
+        }
+        if (this.internalTriggers()) {
+            for (const name of this.internalTriggers()!) {
+                switch (name) {
+                    case "valueChange":
+                        eventDesc.push({
+                            name: "valueChange",
+                            title: "值变化",
+                            ds: {
+                                value: "示例数据"
+                            }
+                        });
+                        break;
+                }
+            }
+        }
+        return eventDesc;
+    }
+
+    private makeTreeNode(descs: EventDesc[], value: TriggeEventsOptions | undefined, treeNode: NzTreeNodeOptions[] = [], key = ""): NzTreeNodeOptions[] {
+        for (const desc of descs) {
+            const node: NzTreeNodeOptions = {
+                ...desc,
+                type: "event",
+                key: key + desc.name,
+                isLeaf: !value?.[desc.name]?.length,
+                children: [],
+                selectable: false,
+                value: value?.[desc.name],
+            };
+            if (!node.isLeaf) {
+                for (let i = 0; i < value![desc.name].length; i++) {
+                    const handler = value![desc.name][i];
+                    const handlerDesc: EventHandlerDesc | undefined = this.allEventHanderDescs()[handler.name];
+                    const handlerNode: NzTreeNodeOptions = {
+                        type: "handler",
+                        key: key + desc.name + "." + i,
+                        selectable: false,
+                        isLeaf: !handlerDesc?.events?.length,
+                        children: [],
+                        title: handler.name,
+                        value: handler
+                    };
+                    if (handlerDesc) {
+                        Object.assign(handlerNode, handlerDesc);
+                    }
+                    if (handlerDesc && !handlerNode.isLeaf) {
+                        this.makeTreeNode(handlerDesc.events!, handler.triggeEvents, handlerNode.children, handlerNode.key + ".");
+                    }
+                    node.children!.push(handlerNode);
+                }
+            }
+            treeNode.push(node);
+        }
+        return treeNode;
+    }
+
+    deleteHandler(e: NzTreeNode) {
+        const parentValue: any[] = e.parentNode?.origin["value"];
+        const value = e.origin["value"];
+        if (parentValue && value && parentValue.includes(value)) {
+            parentValue.splice(parentValue.indexOf(value), 1);
+        }
+        this.onValueChange();
+    }
+
+    private onValueChange(value?: TriggeEventsOptions, expandedKey?: string) {
+        this.value.set(value ?? { ...this.value() });
+        this.onChange(this.value());
+        const expandedKeys = this.tree.getExpandedNodeList().map(n => n.key);
+        if (expandedKey) {
+            expandedKeys.push(expandedKey);
+        }
+        this.treeExpandedKeys.set(expandedKeys);
+    }
+
+    startAddHandler(node: NzTreeNode) {
+        this.fg.reset(this.buildFunField({}));
+        this.editInfo = {
+            key: node.key,
+            event: node.origin["name"],
+            isAdd: true,
+            parentValue: node.parentNode?.origin["value"],
+        };
+        this.handlerFunFieldScopes.set(this.buildHandlerFunFieldScopes(node));
+        this.noListen.set(node.origin["noListen"] ?? true);
+        this.isVisibleHandlerModal.set(true);
+    }
+
+    startSetHandler(node: NzTreeNode) {
+        this.fg.reset(this.buildFunField(node.origin["value"]));
+        this.editInfo = {
+            key: node.key,
+            event: node.parentNode!.origin["name"],
+            isAdd: false,
+            value: node.origin["value"],
+            parentValue: node.parentNode?.origin["value"],
+        };
+        this.handlerFunFieldScopes.set(this.buildHandlerFunFieldScopes(node));
+        this.noListen.set(node.parentNode?.origin["noListen"] ?? true);
+        this.isVisibleHandlerModal.set(true);
+    }
+
+    private buildHandlerFunFieldScopes(node: NzTreeNode, scopes: ScopeInfo[] = []) {
+        if (node.origin['type'] == "event" && node?.origin["ds"]) {
+            scopes.push({
+                scopeId: `__handler_scope_${node.key}__`,
+                scopeName: node.title,
+                ds: node?.origin["ds"]
+            });
+        }
+        if (node.parentNode) {
+            this.buildHandlerFunFieldScopes(node.parentNode, scopes);
+        }
+        return scopes;
+    }
+
+    private buildScopeInfoSubject(scopeId?: string): BehaviorSubject<ScopeInfo[]> {
+        const scopeInfos = this.getScopeInfos(scopeId);
+        const scopeInfoSubject = new BehaviorSubject<ScopeInfo[]>(this.handlerFunFieldScopes().concat(scopeInfos.value));
+        scopeInfos.pipe(map(sis => this.handlerFunFieldScopes().concat(sis))).subscribe(scopeInfoSubject);
+        return scopeInfoSubject;
+    }
+
+    onHandlerChange(name: string | undefined) {
+        if (name && name != this.selectedHandlerDesc()?.name) {
+            const desc = this.allEventHanderDescs()[name];
+            this.selectedHandlerDesc.set(desc);
+            const idCtrl = this.fg.get("id")!;
+            if (desc.target == "component") {
+                let canChooseComponentsInfo = this.componentsInfo;
+                if (desc.targetComponent) {
+                    canChooseComponentsInfo = canChooseComponentsInfo.filter(info => info.component == desc.targetComponent);
+                }
+                this.canChooseComponentsInfo.set(canChooseComponentsInfo);
+                idCtrl.setValidators(FormValidators.requiredFun);
+            } else if (desc.target == "scope") {
+                idCtrl.clearValidators();
+                const scopes = this.scopeInfoSubject().value?.filter(s => s.scopeId.startsWith("__handler_scope__"));
+                if (scopes?.length) {
+                    const { funMode, originValue } = idCtrl.value;
+                    if (!funMode && !originValue) {
+                        this.reset({ id: scopes[0].scopeId })
+                    }
+                }
+            } else {
+                idCtrl.clearValidators();
+            }
+            this.dataContainer?.clear();
+            if (desc.dataComponent) {
+                const injector = Injector.create({
+                    providers: [
+                        { provide: AXIS_DESIGN_SCOPE_INFOS_GETTER_TOKEN, useValue: (scopeId?: string) => this.buildScopeInfoSubject(scopeId) },
+                        { provide: InputTrigger, useValue: this }
+                    ]
+                })
+                const r = this.dataContainer?.createComponent(desc.dataComponent, { injector: injector });
+                r?.instance?.writeValue(this.fg.value?.data);
+                const control = this.fb.control(this.fg.value?.data, [() => {
+                    return r?.instance.valid() ? null : {
+                        invalid: true
+                    };
+                }]);
+                r?.instance.registerOnChange((v: any) => control.setValue(v));
+                this.fg.setControl('data', control, { emitEvent: false });
+            }
+        }
+    }
+
+    onSetHandlerOk() {
+        if (updateAndValidAll(this.fg)) {
+            let value = this.value() ?? {};
+            const formValue = this.recoverFunField(this.fg.value);
+            formValue.target = this.selectedHandlerDesc()!.target;
+            if (this.editInfo?.isAdd) {
+                let array: EventHandlerOptions<any>[];
+                if (this.editInfo?.parentValue) {
+                    if (!this.editInfo.parentValue.triggeEvents?.[this.editInfo.event]) {
+                        this.editInfo.parentValue.triggeEvents = {
+                            [this.editInfo.event]: []
+                        }
+                    }
+                    array = this.editInfo.parentValue.triggeEvents[this.editInfo.event];
+                } else {
+                    if (!value[this.editInfo.event]) {
+                        value[this.editInfo.event] = [];
+                    }
+                    array = value[this.editInfo.event];
+                }
+                array.push(formValue);
+            } else {
+                Object.assign(this.editInfo!.value!, formValue);
+            }
+            this.isVisibleHandlerModal.set(false);
+            this.onValueChange({ ...value }, this.editInfo?.key);
+        } else {
+            Object.values(this.fg.controls).forEach(control => {
+                if (control.invalid) {
+                    control.markAsDirty();
+                    control.updateValueAndValidity({ onlySelf: true });
+                }
+            });
+        }
+    }
+
+    resetSetHandler(): void {
+        this.fg.reset();
+        this.selectedHandlerDesc.set(undefined);
+        this.editInfo = undefined;
+    }
+
+    hasExpanded(node: NzTreeNode): boolean {
+        return node.isExpanded || node.children.some(c => this.hasExpanded(c));
+    }
+
+    expand(node: NzTreeNode, expanded: boolean) {
+        node.isExpanded = expanded;
+        node.children.forEach(c => this.expand(c, expanded));
+    }
+
+}

package/core/share/msg-tip-handler/msg-tip-handler.html

@@ -0,0 +1,40 @@
+<form nz-form [formGroup]="fg">
+    <nz-form-item>
+        <nz-form-label nzSpan="6" nzRequired>
+            提醒方式
+        </nz-form-label>
+        <nz-form-control nzSpan="18">
+            <axis-fun-field formControlName="tipWay" [noListen]="noListen()">
+                <nz-radio-group ngModel [ngModelOptions]="{standalone:true}">
+                    <label nz-radio-button nzValue="message">消息</label>
+                    <label nz-radio-button nzValue="modal">弹窗</label>
+                </nz-radio-group>
+            </axis-fun-field>
+        </nz-form-control>
+    </nz-form-item>
+    <nz-form-item>
+        <nz-form-label nzSpan="6" nzRequired>
+            消息类型
+        </nz-form-label>
+        <nz-form-control nzSpan="18">
+            <axis-fun-field formControlName="type" [noListen]="noListen()">
+                <nz-radio-group ngModel [ngModelOptions]="{standalone:true}" nzSize="small">
+                    <label nz-radio-button nzValue="info">提醒</label>
+                    <label nz-radio-button nzValue="success">成功</label>
+                    <label nz-radio-button nzValue="warning">警告</label>
+                    <label nz-radio-button nzValue="error">错误</label>
+                </nz-radio-group>
+            </axis-fun-field>
+        </nz-form-control>
+    </nz-form-item>
+    <nz-form-item>
+        <nz-form-label nzSpan="6" nzRequired>
+            消息内容
+        </nz-form-label>
+        <nz-form-control nzSpan="18">
+            <axis-fun-field formControlName="content" [noListen]="noListen()">
+                <textarea nz-input ngModel [ngModelOptions]="{standalone:true}"></textarea>
+            </axis-fun-field>
+        </nz-form-control>
+    </nz-form-item>
+</form>

package/core/share/msg-tip-handler/msg-tip-handler.ts

@@ -0,0 +1,46 @@
+import { ChangeDetectionStrategy, Component, forwardRef, inject } from '@angular/core';
+import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { FunField } from '../fun-field/fun-field';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { FunFieldValueBase } from '../../base/funfield-value-base';
+import { FormValidators } from '../../utils/form-validators';
+import { FunFieldOptions } from '../../models/fun-field.options';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
+import { InputTrigger } from '../input-trigger/input-trigger';
+
+@Component({
+  selector: 'axis-msg-tip-handler',
+  imports: [NzFormModule, ReactiveFormsModule, FunField, FormsModule, NzSelectModule, NzInputModule, NzRadioModule],
+  templateUrl: './msg-tip-handler.html',
+  styleUrl: './msg-tip-handler.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => MsgTipHandler),
+      multi: true
+    }
+  ]
+})
+export class MsgTipHandler extends FunFieldValueBase {
+  readonly noListen = inject(InputTrigger).noListen;
+  override fg: UntypedFormGroup = this.fb.group({
+    tipWay: [undefined, FormValidators.requiredFun],
+    type: [undefined, FormValidators.requiredFun],
+    content: [undefined, FormValidators.requiredFun],
+  });
+
+  protected override funFields: FunFieldOptions = {
+    tipWay: {
+      defaultValue: "message",
+    },
+    type: {
+      defaultValue: "info",
+    },
+    content: {
+      defaultValue: undefined,
+    },
+  };
+}

package/core/share/refresh-data-source-handler/refresh-data-source-handler.html

@@ -0,0 +1,29 @@
+<form nz-form [formGroup]="fg">
+    <nz-form-item>
+        <nz-form-label nzSpan="6" nzRequired>
+            数据源名
+        </nz-form-label>
+        <nz-form-control nzSpan="18">
+            <axis-fun-field formControlName="name" [noListen]="noListen()">
+                <input nz-input ngModel [ngModelOptions]="{standalone:true}" [nzAutocomplete]="dsAuto" />
+                <nz-autocomplete #dsAuto nzBackfill>
+                    @for (name of scopeDsNames()??[]; track name) {
+                    <nz-auto-option [nzLabel]="name" [nzValue]="name">
+                        {{name}}
+                    </nz-auto-option>
+                    }
+                </nz-autocomplete>
+            </axis-fun-field>
+        </nz-form-control>
+    </nz-form-item>
+    <nz-form-item>
+        <nz-form-label nzSpan="6" nzRequired>
+            刷新前清空
+        </nz-form-label>
+        <nz-form-control nzSpan="18">
+            <axis-fun-field formControlName="setNull" [noListen]="noListen()">
+                <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+            </axis-fun-field>
+        </nz-form-control>
+    </nz-form-item>
+</form>

package/core/share/refresh-data-source-handler/refresh-data-source-handler.ts

@@ -0,0 +1,55 @@
+import { ChangeDetectionStrategy, Component, forwardRef, inject } from '@angular/core';
+import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { FunField } from '../fun-field/fun-field';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
+import { FunFieldValueBase } from '../../base/funfield-value-base';
+import { FormValidators } from '../../utils/form-validators';
+import { FunFieldOptions } from '../../models/fun-field.options';
+import { filter, map, mergeWith, of, switchMap } from 'rxjs';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { AXIS_DESIGN_SCOPE_INFOS_GETTER_TOKEN } from '../tokens';
+import { InputTrigger } from '../input-trigger/input-trigger';
+import { NzAutocompleteModule } from 'ng-zorro-antd/auto-complete';
+
+@Component({
+  selector: 'axis-refresh-data-source-handler',
+  imports: [NzFormModule, ReactiveFormsModule, FunField, FormsModule, NzSelectModule, NzInputModule, NzSwitchModule, NzRadioModule, NzAutocompleteModule, NzSwitchModule],
+  templateUrl: './refresh-data-source-handler.html',
+  styleUrl: './refresh-data-source-handler.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => RefreshDataSourceHandler),
+      multi: true
+    }
+  ]
+})
+export class RefreshDataSourceHandler extends FunFieldValueBase {
+  override fg: UntypedFormGroup = this.fb.group({
+    name: [undefined, FormValidators.requiredFun],
+    setNull: [undefined, FormValidators.requiredFun],
+  });
+
+  protected override funFields: FunFieldOptions = {
+    name: {
+      defaultValue: null,
+    },
+    setNull: {
+      defaultValue: false,
+    },
+  };
+  readonly inputTrigger = inject(InputTrigger);
+  readonly noListen = this.inputTrigger.noListen;
+  readonly getScopeInfos = inject(AXIS_DESIGN_SCOPE_INFOS_GETTER_TOKEN);
+  readonly scopeDsNames = toSignal(this.inputTrigger.fg.valueChanges.pipe(
+    mergeWith(of(this.inputTrigger.fg.value)),
+    filter(v => v.id?.funMode === false),
+    map(v => v.id.originValue),
+    switchMap(scopeId => this.getScopeInfos(scopeId)
+      .pipe(map(sis => Object.keys(scopeId ? sis.find(s => s.scopeId == scopeId)?.ds : sis[0]?.ds))))));
+}

package/core/share/route-handler/route-handler.html

@@ -0,0 +1,49 @@
+<form nz-form [formGroup]="fg">
+    <nz-form-item>
+        <nz-form-label nzSpan="8" nzRequired>
+            打开类型
+        </nz-form-label>
+        <nz-form-control nzSpan="16">
+            <axis-fun-field formControlName="type" [noListen]="noListen()">
+                <nz-select ngModel [ngModelOptions]="{standalone:true}">
+                    <nz-option nzValue="web" nzLabel="网页"></nz-option>
+                </nz-select>
+            </axis-fun-field>
+        </nz-form-control>
+    </nz-form-item>
+    @if (formValue()?.type?.funMode || formValue()?.type?.originValue == "web") {
+    <nz-form-item>
+        <nz-form-label nzSpan="8" nzRequired>
+            新浏览器标签
+        </nz-form-label>
+        <nz-form-control nzSpan="16">
+            <axis-fun-field formControlName="newtab" [noListen]="noListen()">
+                <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+            </axis-fun-field>
+        </nz-form-control>
+    </nz-form-item>
+    <nz-form-item>
+        <nz-form-label nzSpan="8" nzRequired>
+            链接
+        </nz-form-label>
+        <nz-form-control nzSpan="16">
+            <axis-fun-field formControlName="path" [noListen]="noListen()">
+                <input nz-input ngModel [ngModelOptions]="{standalone:true}" />
+            </axis-fun-field>
+        </nz-form-control>
+    </nz-form-item>
+    @if (formValue()?.newtab.funMode || !formValue()?.newtab.originValue) {
+    <nz-form-item>
+        <nz-form-label nzSpan="8">
+            参数
+        </nz-form-label>
+        <nz-form-control nzSpan="16">
+            <axis-fun-field formControlName="params" [noListen]="noListen()">
+                <ng-container [axisDynamic]="{component:'axis-components/input-json',inuse:true}" [standalone]="true"
+                    ngModel [ngModelOptions]="{standalone:true}"></ng-container>
+            </axis-fun-field>
+        </nz-form-control>
+    </nz-form-item>
+    }
+    }
+</form>

package/core/share/route-handler/route-handler.ts

@@ -0,0 +1,51 @@
+import { ChangeDetectionStrategy, Component, forwardRef, inject } from '@angular/core';
+import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { FunField } from '../fun-field/fun-field';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { FunFieldValueBase } from '../../base/funfield-value-base';
+import { FormValidators } from '../../utils/form-validators';
+import { FunFieldOptions } from '../../models/fun-field.options';
+import { InputTrigger } from '../input-trigger/input-trigger';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { DynamicDirective } from '../../directives/dynamic';
+
+@Component({
+  selector: 'axis-route-handler',
+  imports: [NzFormModule, ReactiveFormsModule, FunField, FormsModule, NzSelectModule, NzInputModule, NzSwitchModule, DynamicDirective],
+  templateUrl: './route-handler.html',
+  styleUrl: './route-handler.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => RouteHandler),
+      multi: true
+    }
+  ]
+})
+export class RouteHandler extends FunFieldValueBase {
+  readonly noListen = inject(InputTrigger).noListen;
+  override fg: UntypedFormGroup = this.fb.group({
+    type: [undefined, FormValidators.requiredFun],
+    newtab: [undefined, FormValidators.requiredFun],
+    path: [undefined, FormValidators.requiredFun],
+    params: [],
+  });
+
+  protected override funFields: FunFieldOptions = {
+    type: {
+      defaultValue: "web",
+    },
+    newtab: {
+      defaultValue: false,
+    },
+    path: {
+      defaultValue: undefined,
+    },
+    params: {
+      defaultValue: undefined,
+    },
+  };
+}