ngx-axis-appforge 0.0.0

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

@@ -0,0 +1,288 @@
+<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="url">
+                        <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="formName">
+                        <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">
+                    <nz-switch formControlName="multiple"></nz-switch>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    完整对象值
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <nz-switch formControlName="fullValue"></nz-switch>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    地址字段
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <input nz-input formControlName="urlField" />
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    文件名字段
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <input nz-input formControlName="filenameField" />
+                </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="responseFn"
+                        [scopes]="[{scopeId:'__uploadResponse',scopeName:'上传接口响应',ds:{apiResponse:{tip:'示例数据'}}}]"
+                        [noListen]="true" [onlyFun]="true"
+                        editTip="请返回一个对象，类型：{success:boolean,errmsg?:string,[地址字段]?:string,[文件名字段]?:string}"></axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+        </nz-collapse-panel>
+        <nz-collapse-panel nzHeader="上传控制">
+            @if (formValue()?.multiple) {
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    选择文件夹
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="directory">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            }
+            @if (formValue()?.directory.funMode || !formValue()?.directory.originValue) {
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    文件类型
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="fileType">
+                        <input nz-input ngModel [ngModelOptions]="{standalone:true}" [nzAutocomplete]="idAuto" />
+                        <nz-autocomplete #idAuto nzBackfill>
+                            <nz-auto-option nzValue="*/*">
+                                全部类型
+                            </nz-auto-option>
+                            <nz-auto-option nzValue="image/*">
+                                图片
+                            </nz-auto-option>
+                            <nz-auto-option nzValue="video/*">
+                                视频
+                            </nz-auto-option>
+                            <nz-auto-option nzValue="application/vnd.android.package-archive">
+                                *.apk
+                            </nz-auto-option>
+                            <nz-auto-option nzValue="application/vnd.ms-excel">
+                                Excel
+                            </nz-auto-option>
+                            <nz-auto-option nzValue="application/json">
+                                *.json
+                            </nz-auto-option>
+                            <nz-auto-option nzValue="application/pdf">
+                                *.pdf
+                            </nz-auto-option>
+                            <nz-auto-option nzValue="text/javascript">
+                                *.js
+                            </nz-auto-option>
+                        </nz-autocomplete>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            }
+            @if (formValue()?.multiple) {
+            <nz-form-item>
+                <nz-form-label nzSpan="8">
+                    数量限制
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="limitLength">
+                        <nz-input-number style="width: 100%;" ngModel [ngModelOptions]="{standalone:true}"
+                            [nzMin]="0"></nz-input-number>
+                    </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="limitSize">
+                        <nz-input-number style="width: 100%;" ngModel [ngModelOptions]="{standalone:true}" [nzMin]="0">
+                            <span nzInputAddonAfter>KB</span>
+                        </nz-input-number>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+        </nz-collapse-panel>
+        <nz-collapse-panel nzHeader="外观设置">
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    文件风格
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="listType">
+                        <nz-select ngModel [ngModelOptions]="{standalone:true}">
+                            <nz-option nzValue="text" nzLabel="文件名"></nz-option>
+                            <nz-option nzValue="picture" nzLabel="预览图"></nz-option>
+                            <nz-option nzValue="picture-card" nzLabel="照片墙"></nz-option>
+                        </nz-select>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            @if (formValue()?.listType.funMode || formValue()?.listType.originValue == "picture-card") {
+            <nz-form-item>
+                <nz-form-label nzSpan="8">
+                    按钮文本
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="buttonTitle">
+                        <input nz-input ngModel [ngModelOptions]="{standalone:true}" />
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            }@else{
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    上传按钮
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="buttonType">
+                        <nz-select ngModel [ngModelOptions]="{standalone:true}">
+                            <nz-option nzValue="custom" nzLabel="自定义"></nz-option>
+                            <nz-option nzValue="drag-file" nzLabel="文件拖拽"></nz-option>
+                        </nz-select>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            @if (formValue()?.buttonType.funMode || formValue()?.buttonType.originValue === "custom") {
+            <nz-form-item>
+                <nz-form-label nzSpan="8">
+                    按钮文本
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="buttonTitle">
+                        <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="buttonIcon">
+                        <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="buttonStyle">
+                        <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="buttonSize">
+                        <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="buttonBlock">
+                        <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="buttonShape">
+                        <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>
+            }@else {
+            <nz-form-item>
+                <nz-form-label nzSpan="8">
+                    拖拽标题
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="dropTitle">
+                        <textarea nz-input ngModel [ngModelOptions]="{standalone:true}"></textarea>
+                    </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="dropTip">
+                        <textarea nz-input ngModel [ngModelOptions]="{standalone:true}"></textarea>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            }
+            }
+        </nz-collapse-panel>
+        <axis-value-design-setting [fg]="fg"></axis-value-design-setting>
+        <axis-base-design-setting [fg]="fg"></axis-base-design-setting>
+    </nz-collapse>
+</form>

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

@@ -0,0 +1,96 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormsModule, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { BaseDesignSetting, baseFbConfig, baseFunField, DynamicDirective, FormValidators, FunField, FunFieldOptions, FunFieldValueBase, ValueDesignSetting, valueFbConfig, valueFunField } from 'ngx-axis-appforge/core';
+import { NzCollapseModule } from 'ng-zorro-antd/collapse';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
+import { NzAutocompleteModule } from 'ng-zorro-antd/auto-complete';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
+
+@Component({
+  selector: 'axis-design-input-icon-setting',
+  imports: [FormsModule, NzFormModule, ReactiveFormsModule, NzCollapseModule, BaseDesignSetting, FunField, ValueDesignSetting, NzInputModule, NzSwitchModule, NzInputNumberModule, NzAutocompleteModule, NzSelectModule, DynamicDirective, NzRadioModule],
+  templateUrl: './setting.html',
+  styleUrl: './setting.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Setting extends FunFieldValueBase {
+  override fg: UntypedFormGroup = this.fb.group(({
+    ...baseFbConfig,
+    ...valueFbConfig,
+    url: [undefined, FormValidators.requiredFun],
+    formName: [undefined, FormValidators.requiredFun],
+    fullValue: [undefined, FormValidators.required],
+    multiple: [false, FormValidators.required],
+    urlField: ["url", FormValidators.required],
+    filenameField: ["filename", FormValidators.required],
+    responseFn: [],
+    fileType: [undefined, FormValidators.requiredFun],
+    directory: [undefined, FormValidators.requiredFun],
+    limitLength: [],
+    limitSize: [],
+    listType: [undefined, FormValidators.requiredFun],
+    buttonType: [undefined, FormValidators.requiredFun],
+    buttonTitle: [],
+    buttonIcon: [{ component: 'axis-components/icon', inuse: true, icon: 'upload' }],
+    buttonStyle: [undefined, FormValidators.requiredFun],
+    buttonSize: [undefined, FormValidators.requiredFun],
+    buttonBlock: [undefined, FormValidators.requiredFun],
+    buttonShape: [],
+    dropTitle: [],
+    dropTip: [],
+  }));
+
+  protected override funFields: FunFieldOptions = {
+    ...baseFunField,
+    ...valueFunField,
+    url: {
+      defaultValue: ""
+    },
+    formName: {
+      defaultValue: "file"
+    },
+    fileType: {
+      defaultValue: "*/*"
+    },
+    directory: {
+      defaultValue: false
+    },
+    limitLength: {
+      defaultValue: null
+    },
+    limitSize: {
+      defaultValue: null
+    },
+    listType: {
+      defaultValue: "text"
+    },
+    buttonType: {
+      defaultValue: "custom"
+    },
+    buttonTitle: {
+      defaultValue: "上传"
+    },
+    buttonStyle: {
+      defaultValue: "default"
+    },
+    buttonSize: {
+      defaultValue: "default"
+    },
+    buttonBlock: {
+      defaultValue: false
+    },
+    buttonShape: {
+      defaultValue: ""
+    },
+    dropTitle: {
+      defaultValue: "点击或拖拽上传"
+    },
+    dropTip: {
+      defaultValue: ""
+    },
+  };
+}

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

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

package/axis-components/upload/upload.css

@@ -0,0 +1,3 @@
+:host {
+    display: block;
+}

package/axis-components/upload/upload.html

@@ -0,0 +1,36 @@
+<nz-upload [(nzFileList)]="fileList"
+    [nzType]="options.listType()!='picture-card'&& options.buttonType()=='drag-file'?'drag':'select'"
+    [nzDirectory]="directory()" [nzAccept]="options.fileType()" [nzMultiple]="options.multiple()"
+    [nzLimit]="limitLength()" [nzSize]="options.limitSize()" [nzListType]="options.listType()"
+    [nzDisabled]="options.disabled()" [nzCustomRequest]="upload" (nzChange)="fileChange($event)"
+    [nzShowButton]="!options.readonly() && ( limitLength() == null || fileList().length<limitLength()!)"
+    [nzPreview]="handlePreview"
+    [nzShowUploadList]="{showRemoveIcon:!this.options.readonly() && !this.options.disabled(),showPreviewIcon:true,showDownloadIcon:true}">
+    @if (options.listType() == "picture-card") {
+    <div>
+        <nz-icon nzType="plus" />
+        <div style="margin-top: 8px">{{options.buttonTitle()}}</div>
+    </div>
+    }@else if (options.buttonType() == "drag-file") {
+    <p class="ant-upload-drag-icon">
+        <nz-icon nzType="inbox" />
+    </p>
+    <p class="ant-upload-text">{{options.dropTitle()}}</p>
+    @if (options.dropTip()) {
+    <p class="ant-upload-hint">
+        {{options.dropTip()}}
+    </p>
+    }
+    }@else {
+    <button nz-button [nzSize]="options.buttonSize()" [nzType]="options.buttonStyle()" [nzBlock]="options.buttonBlock()"
+        [nzShape]="options.buttonShape()">
+        @if (options.buttonIcon()) {
+        <ng-container [axisDynamic]="options.buttonIcon()" [standalone]="true"></ng-container>
+        @if (options.buttonTitle()) {
+        <span style="margin-right: 10px;"></span>
+        }
+        }
+        {{options.buttonTitle()}}
+    </button>
+    }
+</nz-upload>

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

@@ -0,0 +1,29 @@
+import { signal, WritableSignal } from "@angular/core";
+import { ValueAccessOptions } from "ngx-axis-appforge/core";
+
+export class UploadOptions extends ValueAccessOptions {
+
+    readonly url = signal("");
+    readonly formName = signal("file");
+    readonly fullValue = signal(false);
+    readonly urlField = signal("url");
+    readonly filenameField = signal("filename");
+    readonly responseFn = signal("");
+
+    readonly fileType = signal("*/*");
+    readonly multiple = signal(true);
+    readonly directory = signal(false);
+    readonly limitLength = signal<number | null>(null);
+    readonly limitSize = signal<number | null>(null);
+
+    readonly listType = signal<"text" | "picture" | "picture-card">("text");
+    readonly buttonType = signal<"drag-file" | "custom">("custom");
+    readonly buttonTitle = signal<string>("上传");
+    readonly buttonIcon = signal<any>({ component: 'axis-components/icon', inuse: true, icon: 'upload' });
+    readonly buttonStyle = signal<"default" | "primary" | "dashed" | "link" | "text">("default");
+    readonly buttonSize = signal<"large" | "small" | "default">("default");
+    readonly buttonBlock = signal<boolean>(false);
+    readonly buttonShape = signal<null | "circle" | "round">(null);
+    readonly dropTitle = signal<string>("点击或拖拽上传");
+    readonly dropTip = signal<string>("");
+}

package/axis-components/upload/upload.ts

@@ -0,0 +1,130 @@
+import { ChangeDetectionStrategy, Component, computed, effect, inject, model, untracked } from '@angular/core';
+import { UploadOptions } from './upload.options';
+import { DynamicDirective, fn, ValueAccess } from 'ngx-axis-appforge/core';
+import { NzUploadChangeParam, NzUploadFile, NzUploadModule, NzUploadXHRArgs } from 'ng-zorro-antd/upload';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzFlexModule } from 'ng-zorro-antd/flex';
+import { Subscription } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+import { NzImageModule, NzImageService } from 'ng-zorro-antd/image';
+
+@Component({
+  selector: 'axis-upload',
+  imports: [NzUploadModule, NzButtonModule, NzIconModule, DynamicDirective, NzFlexModule, NzImageModule],
+  templateUrl: './upload.html',
+  styleUrl: './upload.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Upload extends ValueAccess<UploadOptions> {
+
+  protected override options: UploadOptions = new UploadOptions();
+  private readonly http = inject(HttpClient);
+  private readonly imageService = inject(NzImageService);
+  readonly fileList = model<NzUploadFile[]>([]);
+  readonly limitLength = computed(() => this.options.multiple() ? this.options.limitLength() : 1);
+  readonly directory = computed(() => this.options.multiple() && this.options.directory());
+
+  override setInitValue(value: any): void {
+    super.setInitValue(value);
+    if (value !== undefined) {
+      this.updateFileList(value);
+    }
+  }
+
+  override writeValue(value: any): void {
+    super.writeValue(value);
+    this.updateFileList(value);
+  }
+
+  private updateFileList(value: any) {
+    if (value) {
+      if (!this.options.multiple()) {
+        value = [value];
+      }
+      this.fileList.set((value as any[]).map(r => this.options.fullValue() ? r : {
+        [this.options.urlField()]: r,
+        [this.options.filenameField()]: this.getFileNameByUrl(r),
+      }).map((resp, i) => ({
+        uid: i.toString(),
+        url: resp[this.options.urlField()],
+        name: resp[this.options.filenameField()],
+        status: 'done',
+        response: resp
+      })));
+    } else {
+      this.fileList.set([]);
+    }
+  }
+
+  private getFileNameByUrl(url: string | undefined): string {
+    if (!url) {
+      return "";
+    }
+    const i = url.lastIndexOf("/");
+    if (i > -1) {
+      return url.substring(i + 1);
+    }
+    return url;
+  }
+
+  private updateValue(fileList: NzUploadFile[]) {
+    let value: any = fileList.map(f => this.options.fullValue() ? f.response : f.response[this.options.urlField()]);
+    if (!this.options.multiple()) {
+      value = value[0] ?? null;
+    }
+    this.value.set(value);
+    this.onChange?.(this.value());
+  }
+
+  upload = (item: NzUploadXHRArgs): Subscription => {
+    const formData = new FormData();
+    formData.append(this.options.formName(), item.file as any);
+    return this.http.post(this.options.url(), formData).subscribe((res: any) => {
+      if (this.options.responseFn()) {
+        res = fn(this.options.responseFn(), { apiResponse: res })
+      }
+      const { success, errmsg } = res;
+      if (success) {
+        item.file.url = res[this.options.urlField()];
+        res[this.options.filenameField()] ??= this.getFileNameByUrl(item.file.url!);
+        item.file.filename = res[this.options.filenameField()];
+        item.onSuccess?.(res, item.file, null);
+      } else {
+        item.onError?.(errmsg || "上传失败", item.file);
+      }
+    });
+  }
+
+  fileChange(e: NzUploadChangeParam) {
+    switch (e.type) {
+      case "success":
+        this.refreshFileListUrl();
+        this.updateValue(e.fileList);
+        break;
+      case "removed":
+        this.updateValue(e.fileList);
+        break;
+    }
+  }
+
+  handlePreview = async (file: NzUploadFile) => {
+    const fileUrl = file.response[this.options.urlField()];
+    if (fileUrl) {
+      if (file['isImageUrl']) {
+        const imgList = this.fileList().map(e => ({ src: e.response[this.options.urlField()] }));
+        const index = imgList.findIndex(e => e.src == fileUrl);
+        this.imageService.preview(imgList).switchTo(index);
+      } else {
+        open(fileUrl);
+      }
+    }
+  }
+
+  refreshFileListUrl() {
+    this.fileList().forEach(f => {
+      f.url = f.response?.[this.options.urlField()];
+    });
+  }
+
+}

package/axis-components-covers/badge.svg

@@ -0,0 +1 @@
+<svg width="191" height="55" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g transform="translate(0 -1)"><rect fill="#EEE" y="10" width="46" height="46" rx="4"/><g transform="translate(36)"><circle stroke="#FFF" fill="#F5222D" cx="10" cy="11" r="9.5"/><path d="M10.384 15.132c.536 0 .986-.09 1.35-.27.364-.18.656-.408.876-.684a2.61 2.61 0 0 0 .474-.918c.096-.336.144-.66.144-.972 0-.392-.06-.756-.18-1.092a2.644 2.644 0 0 0-.51-.876 2.285 2.285 0 0 0-.816-.582c-.324-.14-.69-.21-1.098-.21a2.74 2.74 0 0 0-1.23.264c-.356.176-.654.46-.894.852l-.024-.024c.008-.328.04-.68.096-1.056s.158-.726.306-1.05c.148-.324.354-.592.618-.804.264-.212.612-.318 1.044-.318.408 0 .736.116.984.348.248.232.396.54.444.924h1.02c-.064-.704-.304-1.242-.72-1.614-.416-.372-.976-.558-1.68-.558-.608 0-1.112.128-1.512.384-.4.256-.72.596-.96 1.02-.24.424-.41.91-.51 1.458-.1.548-.15 1.114-.15 1.698 0 .448.034.912.102 1.392.068.48.206.92.414 1.32s.504.728.888.984.892.384 1.524.384zm.048-.888c-.28 0-.53-.05-.75-.15-.22-.1-.404-.234-.552-.402a1.768 1.768 0 0 1-.342-.6c-.08-.232-.12-.48-.12-.744s.038-.514.114-.75c.076-.236.19-.44.342-.612a1.655 1.655 0 0 1 1.308-.558c.288 0 .54.052.756.156.216.104.396.242.54.414.144.172.25.376.318.612s.102.486.102.75c0 .248-.038.486-.114.714-.076.228-.186.43-.33.606a1.515 1.515 0 0 1-.534.414c-.212.1-.458.15-.738.15z" fill="#FFF" fill-rule="nonzero"/></g></g><g transform="translate(68 -1)"><rect fill="#EEE" y="10" width="46" height="46" rx="4"/><g transform="translate(36)"><circle stroke="#FFF" fill="#F5222D" cx="10" cy="11" r="9.5"/><path d="M10.336 15.132c.448 0 .828-.062 1.14-.186.312-.124.572-.294.78-.51a2.44 2.44 0 0 0 .492-.75c.12-.284.212-.586.276-.906.064-.32.104-.648.12-.984a20.454 20.454 0 0 0 0-1.944 6.615 6.615 0 0 0-.12-.984 4.825 4.825 0 0 0-.276-.912 2.42 2.42 0 0 0-.492-.756 2.24 2.24 0 0 0-.786-.516c-.316-.128-.694-.192-1.134-.192-.44 0-.818.064-1.134.192a2.24 2.24 0 0 0-.786.516 2.42 2.42 0 0 0-.492.756c-.12.288-.212.592-.276.912-.064.32-.104.648-.12.984a20.454 20.454 0 0 0 0 1.944c.016.336.056.664.12.984.064.32.156.622.276.906.12.284.284.534.492.75.208.216.47.386.786.51.316.124.694.186 1.134.186zm0-.888c-.432 0-.768-.12-1.008-.36a2.108 2.108 0 0 1-.522-.882 4.522 4.522 0 0 1-.192-1.116c-.02-.396-.03-.754-.03-1.074 0-.208.002-.438.006-.69a6.016 6.016 0 0 1 .216-1.494c.068-.24.168-.45.3-.63.132-.18.298-.326.498-.438.2-.112.444-.168.732-.168s.532.056.732.168c.2.112.366.258.498.438s.232.39.3.63a6.016 6.016 0 0 1 .216 1.494c.004.252.006.482.006.69 0 .32-.01.678-.03 1.074-.02.396-.084.768-.192 1.116a2.108 2.108 0 0 1-.522.882c-.24.24-.576.36-1.008.36z" fill="#FFF" fill-rule="nonzero"/></g></g><g transform="translate(136)"><rect fill="#EEE" y="9" width="46" height="46" rx="4"/><circle stroke="#F5232D" cx="46.5" cy="8.5" r="8"/><path stroke="#F5232D" stroke-linecap="round" d="M46.5 9V4m2.121 7.349L46.5 9.228"/></g></g></svg>

package/axis-components-covers/button.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="81px" height="80px" viewBox="0 0 81 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Button</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Ant-Design-组件缩略图" transform="translate(-1100.000000, -792.000000)">
+            <g id="Button" transform="translate(1100.000000, 792.000000)">
+                <rect id="矩形" stroke="#1890FF" fill="#0091FF" x="0" y="0" width="79" height="31" rx="2"></rect>
+                <text id="||||||||||||||||||" fill="#FFFFFF" font-family="PingFangSC-Regular, PingFang SC" font-size="14" font-weight="normal">
+                    <tspan x="16" y="20">||||||||||||||||||</tspan>
+                </text>
+            </g>
+        </g>
+    </g>
+</svg>

package/axis-components-covers/desc.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="187px" height="74px" viewBox="0 0 187 74" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Descriptions</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Ant-Design-组件缩略图" transform="translate(-90.000000, -577.000000)">
+            <g id="Descriptions" transform="translate(90.000000, 577.000000)">
+                <rect id="矩形复制-57" fill="#EBEBEB" x="0" y="0" width="65" height="10"></rect>
+                <g id="编组-33" transform="translate(0.000000, 26.000000)">
+                    <rect id="矩形复制-61" fill="#EBEBEB" x="0" y="6" width="28" height="10"></rect>
+                    <rect id="矩形复制-60" fill="#F5F5F5" x="44" y="6" width="43" height="10"></rect>
+                    <text id="：" font-family="PingFangSC-Regular, PingFang SC" font-size="16" font-weight="normal" fill="#000000" fill-opacity="0.85">
+                        <tspan x="30" y="17">：</tspan>
+                    </text>
+                </g>
+                <g id="编组-33复制-2" transform="translate(112.000000, 26.000000)">
+                    <rect id="矩形复制-61" fill="#EBEBEB" x="0" y="6" width="28" height="10"></rect>
+                    <rect id="矩形复制-60" fill="#F5F5F5" x="44" y="6" width="31" height="10"></rect>
+                    <text id="：" font-family="PingFangSC-Regular, PingFang SC" font-size="16" font-weight="normal" fill="#000000" fill-opacity="0.85">
+                        <tspan x="30" y="17">：</tspan>
+                    </text>
+                </g>
+                <g id="编组-33复制" transform="translate(0.000000, 52.000000)">
+                    <rect id="矩形复制-61" fill="#EBEBEB" x="0" y="6" width="19" height="10"></rect>
+                    <rect id="矩形复制-60" fill="#F5F5F5" x="35" y="6" width="40" height="10"></rect>
+                    <text id="：" font-family="PingFangSC-Regular, PingFang SC" font-size="16" font-weight="normal" fill="#000000" fill-opacity="0.85">
+                        <tspan x="21" y="17">：</tspan>
+                    </text>
+                </g>
+                <g id="编组-33复制-3" transform="translate(112.000000, 52.000000)">
+                    <rect id="矩形复制-61" fill="#EBEBEB" x="0" y="6" width="19" height="10"></rect>
+                    <rect id="矩形复制-60" fill="#F5F5F5" x="35" y="6" width="40" height="10"></rect>
+                    <text id="：" font-family="PingFangSC-Regular, PingFang SC" font-size="16" font-weight="normal" fill="#000000" fill-opacity="0.85">
+                        <tspan x="21" y="17">：</tspan>
+                    </text>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>