ngx-axis-appforge 0.0.3 → 0.0.4

package/axis-components/button/design/setting/setting.html

@@ -0,0 +1,151 @@
+<form [formGroup]="fg" nz-form>
+    <nz-collapse [nzBordered]="false">
+        <nz-collapse-panel nzHeader="外观设置" nzActive>
+            <nz-form-item>
+                <nz-form-label nzSpan="8">
+                    按钮文本
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="title">
+                        <input nz-input ngModel [ngModelOptions]="{standalone:true}" />
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="8">
+                    按钮图标
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="icon">
+                        <ng-container [axisDynamic]="{component:'axis-components/input-icon',inuse:true}"
+                            [standalone]="true" ngModel [ngModelOptions]="{standalone:true}"></ng-container>
+                    </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="disabledBtn">
+                        <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="styleType">
+                        <nz-select ngModel [ngModelOptions]="{standalone:true}">
+                            <nz-option nzLabel="默认" nzValue="default"></nz-option>
+                            <nz-option nzLabel="主要" nzValue="primary"></nz-option>
+                            <nz-option nzLabel="虚线" nzValue="dashed"></nz-option>
+                            <nz-option nzLabel="链接" nzValue="link"></nz-option>
+                            <nz-option nzLabel="文本" nzValue="text"></nz-option>
+                        </nz-select>
+                    </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="ghost">
+                        <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="size">
+                        <nz-radio-group ngModel [ngModelOptions]="{standalone:true}">
+                            <label nz-radio-button nzValue="large">大</label>
+                            <label nz-radio-button nzValue="default">中</label>
+                            <label nz-radio-button nzValue="small">小</label>
+                        </nz-radio-group>
+                    </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="block">
+                        <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="danger">
+                        <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="shape">
+                        <nz-select ngModel [ngModelOptions]="{standalone:true}">
+                            <nz-option nzLabel="默认" nzValue=""></nz-option>
+                            <nz-option nzLabel="圆形" nzValue="circle"></nz-option>
+                            <nz-option nzLabel="胶囊" nzValue="round"></nz-option>
+                        </nz-select>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+        </nz-collapse-panel>
+        <nz-collapse-panel nzHeader="确认提示">
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    开启确认提示
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="confirm">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            @if (formValue().confirm?.funMode || formValue().confirm?.originValue) {
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    确认框类型
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="confirmType">
+                        <nz-radio-group ngModel [ngModelOptions]="{standalone:true}">
+                            <label nz-radio-button nzValue="modal">弹窗</label>
+                            <label nz-radio-button nzValue="pop">气泡</label>
+                        </nz-radio-group>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="10">
+                    确认文本
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="confirmText">
+                        <input nz-input ngModel [ngModelOptions]="{standalone:true}" />
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            }
+        </nz-collapse-panel>
+        <axis-base-design-setting [fg]="fg"></axis-base-design-setting>
+        <axis-input-trigger formControlName="triggeEvents"
+            [eventDesc]="[{name:'buttonClick',title:'点击按钮'}]"></axis-input-trigger>
+    </nz-collapse>
+</form>

package/axis-components/button/design/setting/setting.ts

@@ -0,0 +1,76 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormsModule, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { NzGridModule } from 'ng-zorro-antd/grid';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
+import { NzCollapseModule } from 'ng-zorro-antd/collapse';
+import { InputTrigger, FunFieldValueBase, FunField, DynamicDirective, BaseDesignSetting, baseFbConfig, FormValidators, baseFunField, FunFieldOptions } from 'ngx-axis-appforge/core';
+
+@Component({
+  selector: 'axis-design-button-setting',
+  imports: [NzFormModule, NzSelectModule, FormsModule, ReactiveFormsModule, FunField, NzGridModule, NzInputModule, DynamicDirective, NzSwitchModule, NzRadioModule, NzCollapseModule, BaseDesignSetting, InputTrigger],
+  templateUrl: './setting.html',
+  styleUrl: './setting.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Setting extends FunFieldValueBase {
+
+  override fg: UntypedFormGroup = this.fb.group({
+    ...baseFbConfig,
+    title: [],
+    icon: [undefined],
+    confirm: [undefined, [FormValidators.requiredFun]],
+    confirmText: [undefined],
+    confirmType: [undefined],
+    disabledBtn: [undefined, [FormValidators.requiredFun]],
+    styleType: [undefined, [FormValidators.requiredFun]],
+    block: [undefined, [FormValidators.requiredFun]],
+    danger: [undefined, [FormValidators.requiredFun]],
+    ghost: [undefined, [FormValidators.requiredFun]],
+    size: [undefined, [FormValidators.requiredFun]],
+    shape: [],
+  });
+
+  protected override funFields: FunFieldOptions = {
+    ...baseFunField,
+    title: {
+      defaultValue: ""
+    },
+    icon: {
+      defaultValue: undefined
+    },
+    confirm: {
+      defaultValue: false
+    },
+    confirmType: {
+      defaultValue: "modal"
+    },
+    confirmText: {
+      defaultValue: "是否确认？"
+    },
+    disabledBtn: {
+      defaultValue: false
+    },
+    styleType: {
+      defaultValue: "default"
+    },
+    ghost: {
+      defaultValue: false
+    },
+    size: {
+      defaultValue: "default"
+    },
+    block: {
+      defaultValue: false
+    },
+    danger: {
+      defaultValue: false
+    },
+    shape: {
+      defaultValue: ""
+    },
+  };
+}

package/axis-components/button/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "button.ts"
+    }
+}

package/axis-components/cmp-map.ts

@@ -0,0 +1,52 @@
+export const cmpMap: { [component: string]: () => Promise<any> } = {
+    "axis-components/button": () => import("ngx-axis-appforge/axis-components/button"),
+    "axis-components/button/design": () => import("ngx-axis-appforge/axis-components/button/design"),
+    "axis-components/design": () => import("ngx-axis-appforge/axis-components/design"),
+    "axis-components/design/design": () => import("ngx-axis-appforge/axis-components/design/design"),
+    "axis-components/editor": () => import("ngx-axis-appforge/axis-components/editor"),
+    // "axis-components/editor/design": () => import("ngx-axis-appforge/axis-components/editor/design"),
+    "axis-components/flex": () => import("ngx-axis-appforge/axis-components/flex"),
+    "axis-components/flex/design": () => import("ngx-axis-appforge/axis-components/flex/design"),
+    "axis-components/icon": () => import("ngx-axis-appforge/axis-components/icon"),
+    "axis-components/icon/design": () => import("ngx-axis-appforge/axis-components/icon/design"),
+    "axis-components/input": () => import("ngx-axis-appforge/axis-components/input"),
+    "axis-components/input/design": () => import("ngx-axis-appforge/axis-components/input/design"),
+    "axis-components/input-icon": () => import("ngx-axis-appforge/axis-components/input-icon"),
+    "axis-components/input-icon/design": () => import("ngx-axis-appforge/axis-components/input-icon/design"),
+    "axis-components/input-json": () => import("ngx-axis-appforge/axis-components/input-json"),
+    "axis-components/input-json/design": () => import("ngx-axis-appforge/axis-components/input-json/design"),
+    "axis-components/scope": () => import("ngx-axis-appforge/axis-components/scope"),
+    "axis-components/scope/design": () => import("ngx-axis-appforge/axis-components/scope/design"),
+    "axis-components/text": () => import("ngx-axis-appforge/axis-components/text"),
+    "axis-components/text/design": () => import("ngx-axis-appforge/axis-components/text/design"),
+    "axis-components/form": () => import("ngx-axis-appforge/axis-components/form"),
+    "axis-components/form/design": () => import("ngx-axis-appforge/axis-components/form/design"),
+    "axis-components/form-item": () => import("ngx-axis-appforge/axis-components/form-item"),
+    "axis-components/form-item/design": () => import("ngx-axis-appforge/axis-components/form-item/design"),
+    "axis-components/table": () => import("ngx-axis-appforge/axis-components/table"),
+    "axis-components/table/design": () => import("ngx-axis-appforge/axis-components/table/design"),
+    "axis-components/single-selector": () => import("ngx-axis-appforge/axis-components/single-selector"),
+    "axis-components/single-selector/design": () => import("ngx-axis-appforge/axis-components/single-selector/design"),
+    "axis-components/tree-selector": () => import("ngx-axis-appforge/axis-components/tree-selector"),
+    "axis-components/tree-selector/design": () => import("ngx-axis-appforge/axis-components/tree-selector/design"),
+    "axis-components/splitter": () => import("ngx-axis-appforge/axis-components/splitter"),
+    "axis-components/splitter/design": () => import("ngx-axis-appforge/axis-components/splitter/design"),
+    "axis-components/modal": () => import("ngx-axis-appforge/axis-components/modal"),
+    "axis-components/modal/design": () => import("ngx-axis-appforge/axis-components/modal/design"),
+    "axis-components/desc": () => import("ngx-axis-appforge/axis-components/desc"),
+    "axis-components/desc/design": () => import("ngx-axis-appforge/axis-components/desc/design"),
+    "axis-components/badge": () => import("ngx-axis-appforge/axis-components/badge"),
+    "axis-components/badge/design": () => import("ngx-axis-appforge/axis-components/badge/design"),
+    "axis-components/image": () => import("ngx-axis-appforge/axis-components/image"),
+    "axis-components/image/design": () => import("ngx-axis-appforge/axis-components/image/design"),
+    "axis-components/input-number": () => import("ngx-axis-appforge/axis-components/input-number"),
+    "axis-components/input-number/design": () => import("ngx-axis-appforge/axis-components/input-number/design"),
+    "axis-components/upload": () => import("ngx-axis-appforge/axis-components/upload"),
+    "axis-components/upload/design": () => import("ngx-axis-appforge/axis-components/upload/design"),
+    "axis-components/textarea": () => import("ngx-axis-appforge/axis-components/textarea"),
+    "axis-components/textarea/design": () => import("ngx-axis-appforge/axis-components/textarea/design"),
+    "axis-components/dynamic-container": () => import("ngx-axis-appforge/axis-components/dynamic-container"),
+    "axis-components/dynamic-container/design": () => import("ngx-axis-appforge/axis-components/dynamic-container/design"),
+    "axis-components/input-component": () => import("ngx-axis-appforge/axis-components/input-component"),
+    "axis-components/input-component/design": () => import("ngx-axis-appforge/axis-components/input-component/design"),
+}

package/axis-components/cmplib.ts

@@ -0,0 +1,9 @@
+import { Cmplib } from "ngx-axis-appforge/core";
+import { cmpMap } from "./cmp-map";
+import { examples } from "./examples/examples";
+
+export const axisCmplib: Cmplib = {
+    name: "标准组件库",
+    cmpMap: cmpMap,
+    examples: examples
+}

package/axis-components/desc/desc.css

@@ -0,0 +1,8 @@
+:host {
+    display: block;
+    width: 100%;
+}
+
+::ng-deep nz-descriptions span.ant-descriptions-item-content {
+    display: contents !important;
+}

package/axis-components/desc/desc.html

@@ -0,0 +1,19 @@
+<nz-descriptions [nzTitle]="options.title()" [nzColumn]="options.column()" [nzBordered]="options.bordered()"
+    [nzSize]="options.size()" [nzColon]="options.colon()" [nzExtra]="extraTpl">
+    @for (item of items(); track $index;let i=$index) {
+    @if (item.inuse()) {
+    <nz-descriptions-item [nzTitle]="item.title()" [nzSpan]="item.span()">
+        <div [attr.data-index]="i" style="display: contents;">
+            @if (item.child()) {
+            <ng-container [axisDynamic]="item.child()"></ng-container>
+            }@else if(item.field()){
+            {{options.data()?.[item.field()]}}
+            }
+        </div>
+    </nz-descriptions-item>
+    }
+    }
+</nz-descriptions>
+<ng-template #extraTpl>
+    <ng-container [axisDynamic]="options.extra()"></ng-container>
+</ng-template>

package/axis-components/desc/desc.options.ts

@@ -0,0 +1,24 @@
+import { signal } from "@angular/core";
+import { DataOptions } from "ngx-axis-appforge/core";
+
+export class DescOptions extends DataOptions {
+
+    readonly title = signal("");
+    readonly column = signal(3);
+    readonly bordered = signal(true);
+    readonly size = signal<'default' | 'middle' | 'small'>("default");
+    readonly colon = signal(true);
+    readonly extra = signal<any>([]);
+    readonly items = signal<DescItemOptions[]>([]);
+
+}
+
+export class DescItemOptions {
+
+    readonly inuse = signal(true);
+    readonly title = signal("未命名");
+    readonly field = signal("");
+    readonly span = signal(1);
+    readonly child = signal<any>(undefined);
+
+}

package/axis-components/desc/desc.ts

@@ -0,0 +1,29 @@
+import { ChangeDetectionStrategy, Component, computed, effect } from '@angular/core';
+import { DescItemOptions, DescOptions } from './desc.options';
+import { Base, DynamicDirective } from 'ngx-axis-appforge/core';
+import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
+
+@Component({
+  selector: 'axis-desc',
+  imports: [NzDescriptionsModule, DynamicDirective],
+  templateUrl: './desc.html',
+  styleUrl: './desc.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Desc extends Base<DescOptions> {
+
+  constructor() {
+    super();
+    effect(() => {
+      this.items().forEach((p, i) => {
+        this.bindWithConfig(this.options.items()[i], { options: p, tag: `bindItems.${i}` });
+      });
+    });
+  }
+  override options: DescOptions = new DescOptions();
+  readonly items = computed(() => this.buildItems());
+
+  private buildItems(): DescItemOptions[] {
+    return this.options.items().map(_ => new DescItemOptions());
+  }
+}

package/axis-components/desc/design/config.ts

@@ -0,0 +1,113 @@
+import { NextInfo, DesignBuildResult, DesignBindElementsResult, DesignConfig, OptionsNode, nameCode, SimpleMenu } from "ngx-axis-appforge/core";
+import { DescSetting } from "./desc-setting/desc-setting";
+import { DescItemSetting } from "./desc-item-setting/desc-item-setting";
+import { DescItemsMenu } from "./desc-items-menu/desc-items-menu";
+
+export const Config: DesignConfig = {
+
+    componentName: "描述",
+    buildOptionsNodes(nextInfo: NextInfo): DesignBuildResult {
+        const next: NextInfo[] = [];
+        const itemsChildren: OptionsNode[] = [];
+        const itemsNode = new OptionsNode({
+            id: nextInfo.currentObject.id + ".items",
+            parentId: nextInfo.currentObject.id,
+            scopeId: nextInfo.scopeId,
+            rootOptions: nextInfo.currentObject.items,
+            contextMenu: DescItemsMenu,
+            name: `描述项[${nextInfo.currentObject.items?.length ?? 0}]`,
+            canDrop: true,
+            dropType: "axis-components/desc/desc-item",
+            dropObj: nextInfo.currentObject.items,
+            defaultDropIndex: nextInfo.currentObject.items?.length ?? 0,
+            childDirection: 'vertical',
+            icon: "project",
+            children: itemsChildren
+        });
+        nextInfo.currentObject.items?.forEach((r: any, i: number) => {
+            next.push({
+                parentId: itemsNode.id + "." + i,
+                parentObject: r,
+                indexOfParent: "child",
+                scopeId: nextInfo.scopeId
+            });
+            itemsChildren.push(new OptionsNode({
+                id: itemsNode.id + "." + i,
+                scopeId: itemsNode.scopeId,
+                parentId: itemsNode.id,
+                parentObj: itemsNode.options,
+                indexOfParentObj: i,
+                rootOptions: r,
+                name: nameCode("描述项", r.title),
+                icon: "profile",
+                canSetting: true,
+                settingType: DescItemSetting,
+                contextMenu: SimpleMenu,
+                canDrag: true,
+                dragType: "axis-components/desc/desc-item",
+                canDrop: true,
+                dropType: "component",
+                dropObj: r,
+                defaultDropIndex: "child",
+                children: []
+            }));
+        });
+        const extraNode = new OptionsNode({
+            id: nextInfo.currentObject.id + ".extra",
+            parentId: nextInfo.currentObject.id,
+            scopeId: nextInfo.scopeId,
+            rootOptions: nextInfo.currentObject,
+            name: "操作",
+            contextMenu: SimpleMenu,
+            canDrop: true,
+            dropType: "component",
+            dropObj: nextInfo.currentObject,
+            defaultDropIndex: "extra",
+            icon: "control",
+            children: []
+        });
+        next.push({
+            parentId: extraNode.id,
+            parentObject: extraNode.options,
+            indexOfParent: "extra",
+            scopeId: extraNode.scopeId
+        });
+        return {
+            treeNode: new OptionsNode({
+                parentId: nextInfo.parentId,
+                scopeId: nextInfo.scopeId,
+                name: nameCode("描述", nextInfo.currentObject.title),
+                canSetting: true,
+                canDrag: true,
+                dragType: "component",
+                parentObj: nextInfo.parentObject,
+                indexOfParentObj: nextInfo.indexOfParent,
+                rootOptions: nextInfo.currentObject,
+                settingType: DescSetting,
+                contextMenu: SimpleMenu,
+                icon: "file-text",
+                children: [
+                    itemsNode,
+                    extraNode
+                ],
+            }),
+            next: next
+        };
+    },
+    bindElementsOptionsNode(element: HTMLElement, options: any): DesignBindElementsResult {
+        const itemsElement = element.querySelector(".ant-descriptions-view") as HTMLElement;
+        const res: DesignBindElementsResult = {
+            [options.id]: { element: element },
+            [`${options.id}.items`]: { element: itemsElement, dropElement: itemsElement }
+        };
+        const items = element.querySelectorAll(".ant-descriptions-item-content>div[data-index]");
+        items.forEach((e) => {
+            const element = e.parentElement?.previousElementSibling as HTMLElement;
+            res[`${options.id}.items.${(e as HTMLElement).dataset['index']}`] = {
+                element: element!,
+                dropElement: e.parentElement!
+            }
+        });
+        return res;
+    },
+};

package/axis-components/desc/design/desc-item-setting/desc-item-setting.html

@@ -0,0 +1,47 @@
+<form [formGroup]="fg" nz-form>
+    <nz-collapse [nzBordered]="false">
+        <nz-collapse-panel nzHeader="基本设置" nzActive>
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    是否可用
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="inuse">
+                        <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">
+                    标题
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="title">
+                        <input nz-input ngModel [ngModelOptions]="{standalone:true}" />
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="8">
+                    字段名
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="field">
+                        <input nz-input ngModel [ngModelOptions]="{standalone:true}" />
+                    </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="span">
+                        <nz-input-number style="width:100%;" nzMin="1" ngModel
+                            [ngModelOptions]="{standalone:true}"></nz-input-number>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+        </nz-collapse-panel>
+    </nz-collapse>
+</form>

package/axis-components/desc/design/desc-item-setting/desc-item-setting.ts

@@ -0,0 +1,40 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormsModule, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { NzCollapseModule } from 'ng-zorro-antd/collapse';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { FormValidators, FunField, FunFieldOptions, FunFieldValueBase } from 'ngx-axis-appforge/core';
+
+@Component({
+  selector: 'axis-design-desc-item-setting',
+  imports: [FormsModule, NzFormModule, ReactiveFormsModule, NzCollapseModule, FunField, NzInputModule, NzInputNumberModule, NzSwitchModule],
+  templateUrl: './desc-item-setting.html',
+  styleUrl: './desc-item-setting.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DescItemSetting extends FunFieldValueBase {
+
+  override fg: UntypedFormGroup = this.fb.group({
+    inuse: [undefined, FormValidators.requiredFun],
+    title: [],
+    field: [],
+    span: [undefined, FormValidators.requiredFun],
+  });
+
+  protected override funFields: FunFieldOptions = {
+    inuse: {
+      defaultValue: true
+    },
+    title: {
+      defaultValue: ""
+    },
+    field: {
+      defaultValue: ""
+    },
+    span: {
+      defaultValue: 1
+    },
+  };
+}

package/axis-components/desc/design/desc-items-menu/desc-items-menu.html

@@ -0,0 +1,9 @@
+<nz-dropdown-menu #menu="nzDropdownMenu">
+    <ul nz-menu>
+        <li nz-menu-item (click)="addItem()">
+            <i nz-icon nzType="plus" nzTheme="outline"></i>
+            <nz-divider nzType="vertical"></nz-divider>
+            <span>添加描述项</span>
+        </li>
+    </ul>
+</nz-dropdown-menu>

package/axis-components/desc/design/desc-items-menu/desc-items-menu.ts

@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NzDividerModule } from 'ng-zorro-antd/divider';
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { BaseMenu } from 'ngx-axis-appforge/core';
+
+@Component({
+  selector: 'axis-design-desc-items-menu',
+  imports: [NzDropDownModule, NzDividerModule, NzIconModule],
+  templateUrl: './desc-items-menu.html',
+  styleUrl: './desc-items-menu.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DescItemsMenu extends BaseMenu {
+
+  addItem() {
+    this.optionsNodes.current.options.push({
+      inuse: true,
+      title: "未命名"
+    });
+    this.onChange();
+  }
+}