fantasy-ngzorro 2.1.60 → 2.1.61

package/README.md

@@ -37,6 +37,7 @@
 | — | 2026-5-20 | 补充 hd-table、hd-detail-lines-page 等组件；完善公共子类型（SelectOption、FormItem 等）文档 |
 | — | 2026-9-18 | `hd-form-lines` 选中回显（nzHide）认 `showLabelAndValue`，与下拉 `[value]label` 一致（对齐 `hd-form`） |
 | — | 2026-9-18 | `hd-detail-lines-page` 对齐 `hd-table` 支持虚拟滚动（`virtualScroll` / `virtualItemSize`）；千行勾选时减少 DOM 卡顿 |
+| — | 2026-9-20 | hd-detail-form 支持附件图片字段（`HdDetailFormFieldType.Accessory`，Figma 48×48 缩略图横排，不复用 hd-accessory-list） |
 | — | 2026-9-17 | hd-table / hd-detail-lines / hd-detail-lines-page 支持 `selectDisabledField` / `rowInvalidField`：按行字段控制勾选禁用、失效行样式 |
 | — | 2026-9-14 | 新增 `hd-accessory-list` 附件列表组件（分组 name + accessoryList，点击下载/查看） |
 | — | 2026-6-23 | hd-table 状态列支持 `stateField` 自定义取值字段、`isState` 按列名取值；hd-form Input 支持 `prefix` / `prefixIcon`；hd-detail-lines-page 支持 `isCrossPageSelect` 跨页勾选开关 |
@@ -578,14 +579,27 @@ this.hdFormLines.batchFillSelected({ remark: '批量备注' }); // 批量填充
 ### 示例
 
 ```html
-<hd-detail-form [formCols]="formCols"></hd-detail-form>
+<hd-detail-form [formCols]="formCols" (imageClick)="onDetailFormImageClick($event)"></hd-detail-form>
 ```
 
 ```typescript
+import { HdDetailFormFieldType, HdOption } from 'fantasy-ngzorro';
+
 formCols: HdOption[] = [
   { label: '收货单号', value: '202111030001' },
   { label: '地址', value: '江苏/南京市/玄武区 某某路', width: 2 },
-  { label: '备注', value: '...' }
+  { label: '备注', value: '...' },
+  // 附件图片：label + 图片地址列表（Figma 48×48 缩略图横排）
+  {
+    label: '食品经营许可证',
+    type: HdDetailFormFieldType.Accessory,
+    width: 2,
+    value: [
+      { name: '正面', path: 'https://oss.xxx.com/a.png' },
+      { name: '背面', path: 'https://oss.xxx.com/b.png' },
+      'https://oss.xxx.com/c.png', // 也支持纯地址字符串
+    ],
+  },
 ];
 ```
 
@@ -593,6 +607,15 @@ formCols: HdOption[] = [
 | ---- | ---- | ------ | ---- |
 | formCols | HdOption[] | — | 展示字段，见 [HdOption](#hdoption键值展示项) |
 | nzColumn | number \| object | `4` | 一行列数，默认固定 4 列 |
+| imageClick | EventEmitter | — | 附件图片点击回调 `{ image, path, index }`（`type=accessory` 时） |
+
+附件字段 `type: HdDetailFormFieldType.Accessory`（或 `'accessory'`）：
+
+- 对齐 Figma `items/description-cell`「图片」：标签 + **48×48** 缩略图横排（间距 6px，边框 `#E5E6EB`，圆角 4px）
+- `value` 支持：图片地址 `string` / `string[]`，或 `{ name?, path?/url? }[]`
+- 点击缩略图默认 `window.open` 打开原图，并触发 `imageClick`
+- 无图时展示 `<空>`
+- **不使用** `hd-accessory-list`（文件列表样式请用独立附件列表组件）
 
 ---
 
@@ -904,7 +927,8 @@ selectOption: {
 | 参数 | 类型 | 说明 |
 | ---- | ---- | ---- |
 | label | string | 标签 |
-| value | any | 值 |
+| value | any | 值；附件类型时为图片地址 `string` / `string[]` 或 `{ name?, path?/url? }[]` |
+| type | string / HdDetailFormFieldType | 字段类型，默认文本；`accessory` 为附件图片缩略图 |
 | width | number | 占据列数，默认 1，最大 4；未传按 1 |
 | color | string | 文字颜色 |
 | hide | boolean | 是否隐藏 |

package/bundles/fantasy-ngzorro.umd.js

@@ -433,6 +433,44 @@
         return HdButtonModule;
     }());
 
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /** @enum {string} */
+    var HdDetailFormFieldType = {
+        /** 普通文本（默认） */
+        Text: "text",
+        /** 附件图片（描述项内横排缩略图） */
+        Accessory: "accessory",
+    };
+    /**
+     * 附件图片项（path 为图片地址）
+     * @record
+     */
+    function HdDetailFormImage() { }
+    if (false) {
+        /** @type {?|undefined} */
+        HdDetailFormImage.prototype.name;
+        /** @type {?|undefined} */
+        HdDetailFormImage.prototype.path;
+        /** @type {?|undefined} */
+        HdDetailFormImage.prototype.url;
+    }
+    var HdDetailFormService = /** @class */ (function () {
+        function HdDetailFormService() {
+        }
+        HdDetailFormService.decorators = [
+            { type: core.Injectable, args: [{
+                        providedIn: "root",
+                    },] }
+        ];
+        /** @nocollapse */
+        HdDetailFormService.ctorParameters = function () { return []; };
+        /** @nocollapse */ HdDetailFormService.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function HdDetailFormService_Factory() { return new HdDetailFormService(); }, token: HdDetailFormService, providedIn: "root" });
+        return HdDetailFormService;
+    }());
+
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -444,6 +482,11 @@
              * 一行列数，默认固定 4 列（不再按屏幕宽度自适应）
              */
             this.nzColumn = 4;
+            /**
+             * 附件图片点击回调
+             */
+            this.imageClick = new core.EventEmitter();
+            this.HdDetailFormFieldType = HdDetailFormFieldType;
         }
         /**
          * @return {?}
@@ -453,7 +496,6 @@
          */
         function () {
             if (this.formCols && this.formCols.length > 0) {
-                // 剔除掉formCols里面不需要显示的内容
                 this.formCols = this.formCols.filter((/**
                  * @param {?} item
                  * @return {?}
@@ -470,9 +512,10 @@
          * @return {?}
          */
         function (changes) {
-            if (changes['formCols'] && JSON.stringify(changes['formCols'].currentValue) !== JSON.stringify(changes['formCols'].previousValue)) {
+            if (changes["formCols"] &&
+                JSON.stringify(changes["formCols"].currentValue) !==
+                    JSON.stringify(changes["formCols"].previousValue)) {
                 if (this.formCols && this.formCols.length > 0) {
-                    // 剔除掉formCols里面不需要显示的内容
                     this.formCols = this.formCols.filter((/**
                      * @param {?} item
                      * @return {?}
@@ -481,6 +524,118 @@
                 }
             }
         };
+        /**
+         * @param {?} col
+         * @return {?}
+         */
+        HdDetailFormComponent.prototype.isAccessory = /**
+         * @param {?} col
+         * @return {?}
+         */
+        function (col) {
+            return !!(col &&
+                (col.type === HdDetailFormFieldType.Accessory ||
+                    col.type === "accessory"));
+        };
+        /**
+         * 解析附件图片列表。value 支持：
+         * - string / string[]（图片地址）
+         * - { name?, path? / url? }[]
+         */
+        /**
+         * 解析附件图片列表。value 支持：
+         * - string / string[]（图片地址）
+         * - { name?, path? / url? }[]
+         * @param {?} col
+         * @return {?}
+         */
+        HdDetailFormComponent.prototype.getImageList = /**
+         * 解析附件图片列表。value 支持：
+         * - string / string[]（图片地址）
+         * - { name?, path? / url? }[]
+         * @param {?} col
+         * @return {?}
+         */
+        function (col) {
+            /** @type {?} */
+            var value = col && col.value;
+            if (value == null || value === "") {
+                return [];
+            }
+            /** @type {?} */
+            var list = Array.isArray(value) ? value : [value];
+            /** @type {?} */
+            var result = [];
+            list.forEach((/**
+             * @param {?} item
+             * @return {?}
+             */
+            function (item) {
+                if (item == null || item === "") {
+                    return;
+                }
+                if (typeof item === "string") {
+                    result.push({ path: item });
+                    return;
+                }
+                /** @type {?} */
+                var path = item.path || item.url || item.address || "";
+                if (!path) {
+                    return;
+                }
+                result.push({
+                    name: item.name || item.fileName,
+                    path: String(path),
+                });
+            }));
+            return result;
+        };
+        /**
+         * @param {?} col
+         * @return {?}
+         */
+        HdDetailFormComponent.prototype.hasImages = /**
+         * @param {?} col
+         * @return {?}
+         */
+        function (col) {
+            return this.getImageList(col).length > 0;
+        };
+        /**
+         * @param {?} image
+         * @return {?}
+         */
+        HdDetailFormComponent.prototype.getImagePath = /**
+         * @param {?} image
+         * @return {?}
+         */
+        function (image) {
+            return (image && (image.path || image.url)) || "";
+        };
+        /**
+         * @param {?} image
+         * @param {?} index
+         * @param {?=} event
+         * @return {?}
+         */
+        HdDetailFormComponent.prototype.onImageClick = /**
+         * @param {?} image
+         * @param {?} index
+         * @param {?=} event
+         * @return {?}
+         */
+        function (image, index, event) {
+            if (event) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            /** @type {?} */
+            var path = this.getImagePath(image);
+            this.imageClick.emit({ image: image, path: path, index: index });
+            if (path) {
+                window.open(path, "_blank");
+            }
+        };
         /** HdOption.width：默认 1，最大 4 */
         /**
          * HdOption.width：默认 1，最大 4
@@ -515,16 +670,17 @@
         };
         HdDetailFormComponent.decorators = [
             { type: core.Component, args: [{
-                        selector: 'hd-detail-form',
-                        template: "<nz-content class=\"hd-detail-form-container\">\n  <nz-descriptions [nzColumn]=\"nzColumn\">\n    <ng-container *ngFor=\"let col of formCols\">\n      <nz-descriptions-item *ngIf=\"!col.click\" [nzTitle]=\"col.label\" [nzSpan]=\"getColSpan(col)\">\n        <span [ngStyle]=\"{'color': col?.color ? col.color : null}\">{{(col.value === '0' || col.value === 0 || col.value\n          )? col.value : '&lt;\u7A7A&gt;'}}</span>\n      </nz-descriptions-item>\n      <nz-descriptions-item *ngIf=\"col.click\" [nzTitle]=\"col.label\" [nzSpan]=\"getColSpan(col)\">\n        <span [ngStyle]=\"{'color': col?.color ? col.color : null}\" *ngIf=\"col.clickText\">\n          {{(col.value === '0' || col.value === 0 || col.value\n            )? col.value : '&lt;\u7A7A&gt;'}}\n          <a (click)=\"triggerEvent(col.click || null)\">&nbsp;&nbsp;&nbsp;&nbsp;{{ col.clickText }}</a>\n          <a *ngIf=\"col.clickText1\" (click)=\"triggerEvent(col.click1 || null)\">&nbsp;&nbsp;&nbsp;&nbsp;{{ col.clickText1 }}</a>\n        </span>\n        <span [ngStyle]=\"{'color': col?.color ? col.color : null}\" *ngIf=\"!col.clickText\">\n          <a (click)=\"triggerEvent(col.click || null)\">{{(col.value === '0' || col.value === 0 || col.value\n            )? col.value : '&lt;\u7A7A&gt;'}}</a>\n          <a *ngIf=\"col.clickText1\" (click)=\"triggerEvent(col.click1 || null)\">&nbsp;&nbsp;&nbsp;&nbsp;{{ col.clickText1 }}</a>\n        </span>\n      </nz-descriptions-item>\n    </ng-container>\n  </nz-descriptions>\n</nz-content>\n",
-                        styles: ["::ng-deep .common-btn-group>a{font-size:14px;font-weight:400;color:#20b95d!important;white-space:nowrap}::ng-deep .common-btn-group .common-danger-btn:hover{color:#f05b24!important}::ng-deep .common-btn-group>a:hover{color:#20bd62!important}::ng-deep .common-btn-group>a:not(:last-child)::after{content:'';margin:0 2px}::ng-deep .common-billNumber>a{color:#3b77e3}button{box-shadow:unset;text-shadow:unset}::ng-deep .ant-form-item-label>label{color:#4b504e;font-size:14px}::ng-deep .ant-input-number-input{height:32px}::ng-deep .ant-input-number{height:32px}textarea.ant-input{height:auto;min-height:32px}::ng-deep .ant-select-selection--multiple{min-height:32px}::ng-deep .ant-select-selection__rendered>ul>li{height:26px!important;margin-top:3px!important;line-height:26px!important}::ng-deep .ant-advanced-search-form .ant-form-item{margin-bottom:0!important}::ng-deep .ant-select-selection--single{height:32px!important}::ng-deep .ant-input{height:32px}::ng-deep .ant-input[disabled]:hover{border-color:#d9d9d9!important}::ng-deep .ant-select-selection__rendered{line-height:32px!important}::ng-deep .ant-calendar-range-picker-input{text-align:left!important}::ng-deep .ant-calendar-picker{width:100%!important}::ng-deep .ant-row{margin-right:0!important;margin-left:0!important}::ng-deep .ant-col-6{padding-left:12px;padding-right:12px}::ng-deep .ant-col-12{padding-left:12px;padding-right:12px}::ng-deep .ant-col-18{padding-left:12px;padding-right:12px}::ng-deep .ant-col-24{padding-left:12px;padding-right:12px}::ng-deep .ant-alert-info{background-color:#f5f8f6;border:1px solid #cfe3d4}::ng-deep .hd-table-container .ant-table-td-left-sticky,::ng-deep .hd-table-container .ant-table-td-right-sticky,::ng-deep .hd-table-container .ant-table-th-left-sticky,::ng-deep .hd-table-container .ant-table-th-right-sticky{z-index:2;transform:translateZ(0)}::ng-deep .hd-table-container .ant-table-thead>tr>th.ant-table-th-left-sticky,::ng-deep .hd-table-container .ant-table-thead>tr>th.ant-table-th-right-sticky{background:#f5f8f6!important}::ng-deep .hd-table-container .ant-table-tbody>tr>td.ant-table-td-left-sticky,::ng-deep .hd-table-container .ant-table-tbody>tr>td.ant-table-td-right-sticky{background:#fff}::ng-deep .hd-table-container .ant-table-tbody>tr.ant-table-row-hover>td.ant-table-td-left-sticky,::ng-deep .hd-table-container .ant-table-tbody>tr.ant-table-row-hover>td.ant-table-td-right-sticky,::ng-deep .hd-table-container .ant-table-tbody>tr:hover>td.ant-table-td-left-sticky,::ng-deep .hd-table-container .ant-table-tbody>tr:hover>td.ant-table-td-right-sticky{background:#ecf8f1!important}::ng-deep .hd-table-container .ant-table-scroll-position-left .ant-table-td-right-sticky,::ng-deep .hd-table-container .ant-table-scroll-position-left .ant-table-th-right-sticky,::ng-deep .hd-table-container .ant-table-scroll-position-middle .ant-table-td-right-sticky,::ng-deep .hd-table-container .ant-table-scroll-position-middle .ant-table-th-right-sticky,::ng-deep .hd-table-container .ant-table-scroll-position-right .ant-table-td-right-sticky,::ng-deep .hd-table-container .ant-table-scroll-position-right .ant-table-th-right-sticky{box-shadow:none!important}::ng-deep .hd-table-container .ant-table-fixed-right{right:0!important}:host ::ng-deep th{background:#f5f8f6!important;font-weight:700!important;white-space:nowrap;font-size:14px;font-family:PingFangSC-Medium,PingFang SC;color:#2a3634;padding:8px!important;box-sizing:border-box}:host ::ng-deep td{font-weight:400;font-style:normal;font-size:14px;color:#2a3634;text-align:left;white-space:nowrap;padding:8px!important;box-sizing:border-box}::ng-deep .ant-pagination-options{display:inline-flex;align-items:center}::ng-deep .ant-pagination-options .ant-select,::ng-deep .ant-pagination-options .ant-select-selection--single{min-width:100px}::ng-deep .ant-pagination-options-size-changer.ant-select{min-width:100px}::ng-deep .ant-time-picker{width:100%}::ng-deep .cdk-overlay-pane .hd-cascader-menus.ant-cascader-menus>.ant-cascader-menu:only-child{width:-webkit-max-content!important;width:-moz-max-content!important;width:max-content!important;min-width:var(--hd-cascader-menu-min-width,auto);max-width:560px}::ng-deep .cdk-overlay-pane .hd-cascader-menus.ant-cascader-menus>.ant-cascader-menu:only-child .ant-cascader-menu-item{white-space:nowrap}.ant-input-number-disabled,.ant-input[disabled],.ant-select-disabled{color:#4b504e}.hd-detail-form-container{font-size:14px}.hd-detail-form-container ::ng-deep td.ant-descriptions-item{vertical-align:top;padding-top:6px!important;padding-bottom:6px!important;padding-left:0!important;font-size:14px}.hd-detail-form-container ::ng-deep .ant-descriptions-item-label{color:#4b504e;font-size:14px}.hd-detail-form-container ::ng-deep .ant-descriptions-item-content{word-break:break-all;color:rgba(0,0,0,.85);font-weight:400;font-size:14px}.hd-detail-form-container ::ng-deep a{font-size:14px}.hd-detail-form-container ::ng-deep td{white-space:unset!important}"]
+                        selector: "hd-detail-form",
+                        template: "<nz-content class=\"hd-detail-form-container\">\n  <nz-descriptions [nzColumn]=\"nzColumn\">\n    <ng-container *ngFor=\"let col of formCols\">\n      <!-- \u9644\u4EF6\u56FE\u7247\uFF1A\u6807\u7B7E\u4E0E\u9996\u56FE\u5DE6\u4E0A\u89D2\u9876\u5BF9\u9F50\uFF08Figma description-cell / \u56FE\u7247\uFF09 -->\n      <nz-descriptions-item *ngIf=\"isAccessory(col)\" [nzTitle]=\"col.label\" [nzSpan]=\"getColSpan(col)\">\n        <div class=\"hd-detail-form-images\" *ngIf=\"hasImages(col)\">\n          <a class=\"hd-detail-form-image\" *ngFor=\"let image of getImageList(col); let i = index\"\n            href=\"javascript:void(0)\"\n            (click)=\"onImageClick(image, i, $event)\"\n            [attr.title]=\"image.name || ('\u56FE\u7247' + (i + 1))\">\n            <img [src]=\"getImagePath(image)\" [alt]=\"image.name || ('\u56FE\u7247' + (i + 1))\" />\n          </a>\n        </div>\n        <span *ngIf=\"!hasImages(col)\">&lt;\u7A7A&gt;</span>\n      </nz-descriptions-item>\n      <!-- \u666E\u901A\u6587\u672C -->\n      <nz-descriptions-item *ngIf=\"!isAccessory(col) && !col.click\" [nzTitle]=\"col.label\" [nzSpan]=\"getColSpan(col)\">\n        <span [ngStyle]=\"{'color': col?.color ? col.color : null}\">{{(col.value === '0' || col.value === 0 || col.value\n          )? col.value : '&lt;\u7A7A&gt;'}}</span>\n      </nz-descriptions-item>\n      <!-- \u53EF\u70B9\u51FB -->\n      <nz-descriptions-item *ngIf=\"!isAccessory(col) && col.click\" [nzTitle]=\"col.label\" [nzSpan]=\"getColSpan(col)\">\n        <span [ngStyle]=\"{'color': col?.color ? col.color : null}\" *ngIf=\"col.clickText\">\n          {{(col.value === '0' || col.value === 0 || col.value\n            )? col.value : '&lt;\u7A7A&gt;'}}\n          <a (click)=\"triggerEvent(col.click || null)\">&nbsp;&nbsp;&nbsp;&nbsp;{{ col.clickText }}</a>\n          <a *ngIf=\"col.clickText1\" (click)=\"triggerEvent(col.click1 || null)\">&nbsp;&nbsp;&nbsp;&nbsp;{{ col.clickText1 }}</a>\n        </span>\n        <span [ngStyle]=\"{'color': col?.color ? col.color : null}\" *ngIf=\"!col.clickText\">\n          <a (click)=\"triggerEvent(col.click || null)\">{{(col.value === '0' || col.value === 0 || col.value\n            )? col.value : '&lt;\u7A7A&gt;'}}</a>\n          <a *ngIf=\"col.clickText1\" (click)=\"triggerEvent(col.click1 || null)\">&nbsp;&nbsp;&nbsp;&nbsp;{{ col.clickText1 }}</a>\n        </span>\n      </nz-descriptions-item>\n    </ng-container>\n  </nz-descriptions>\n</nz-content>\n",
+                        styles: ["::ng-deep .common-btn-group>a{font-size:14px;font-weight:400;color:#20b95d!important;white-space:nowrap}::ng-deep .common-btn-group .common-danger-btn:hover{color:#f05b24!important}::ng-deep .common-btn-group>a:hover{color:#20bd62!important}::ng-deep .common-btn-group>a:not(:last-child)::after{content:'';margin:0 2px}::ng-deep .common-billNumber>a{color:#3b77e3}button{box-shadow:unset;text-shadow:unset}::ng-deep .ant-form-item-label>label{color:#4b504e;font-size:14px}::ng-deep .ant-input-number-input{height:32px}::ng-deep .ant-input-number{height:32px}textarea.ant-input{height:auto;min-height:32px}::ng-deep .ant-select-selection--multiple{min-height:32px}::ng-deep .ant-select-selection__rendered>ul>li{height:26px!important;margin-top:3px!important;line-height:26px!important}::ng-deep .ant-advanced-search-form .ant-form-item{margin-bottom:0!important}::ng-deep .ant-select-selection--single{height:32px!important}::ng-deep .ant-input{height:32px}::ng-deep .ant-input[disabled]:hover{border-color:#d9d9d9!important}::ng-deep .ant-select-selection__rendered{line-height:32px!important}::ng-deep .ant-calendar-range-picker-input{text-align:left!important}::ng-deep .ant-calendar-picker{width:100%!important}::ng-deep .ant-row{margin-right:0!important;margin-left:0!important}::ng-deep .ant-col-6{padding-left:12px;padding-right:12px}::ng-deep .ant-col-12{padding-left:12px;padding-right:12px}::ng-deep .ant-col-18{padding-left:12px;padding-right:12px}::ng-deep .ant-col-24{padding-left:12px;padding-right:12px}::ng-deep .ant-alert-info{background-color:#f5f8f6;border:1px solid #cfe3d4}::ng-deep .hd-table-container .ant-table-td-left-sticky,::ng-deep .hd-table-container .ant-table-td-right-sticky,::ng-deep .hd-table-container .ant-table-th-left-sticky,::ng-deep .hd-table-container .ant-table-th-right-sticky{z-index:2;transform:translateZ(0)}::ng-deep .hd-table-container .ant-table-thead>tr>th.ant-table-th-left-sticky,::ng-deep .hd-table-container .ant-table-thead>tr>th.ant-table-th-right-sticky{background:#f5f8f6!important}::ng-deep .hd-table-container .ant-table-tbody>tr>td.ant-table-td-left-sticky,::ng-deep .hd-table-container .ant-table-tbody>tr>td.ant-table-td-right-sticky{background:#fff}::ng-deep .hd-table-container .ant-table-tbody>tr.ant-table-row-hover>td.ant-table-td-left-sticky,::ng-deep .hd-table-container .ant-table-tbody>tr.ant-table-row-hover>td.ant-table-td-right-sticky,::ng-deep .hd-table-container .ant-table-tbody>tr:hover>td.ant-table-td-left-sticky,::ng-deep .hd-table-container .ant-table-tbody>tr:hover>td.ant-table-td-right-sticky{background:#ecf8f1!important}::ng-deep .hd-table-container .ant-table-scroll-position-left .ant-table-td-right-sticky,::ng-deep .hd-table-container .ant-table-scroll-position-left .ant-table-th-right-sticky,::ng-deep .hd-table-container .ant-table-scroll-position-middle .ant-table-td-right-sticky,::ng-deep .hd-table-container .ant-table-scroll-position-middle .ant-table-th-right-sticky,::ng-deep .hd-table-container .ant-table-scroll-position-right .ant-table-td-right-sticky,::ng-deep .hd-table-container .ant-table-scroll-position-right .ant-table-th-right-sticky{box-shadow:none!important}::ng-deep .hd-table-container .ant-table-fixed-right{right:0!important}:host ::ng-deep th{background:#f5f8f6!important;font-weight:700!important;white-space:nowrap;font-size:14px;font-family:PingFangSC-Medium,PingFang SC;color:#2a3634;padding:8px!important;box-sizing:border-box}:host ::ng-deep td{font-weight:400;font-style:normal;font-size:14px;color:#2a3634;text-align:left;white-space:nowrap;padding:8px!important;box-sizing:border-box}::ng-deep .ant-pagination-options{display:inline-flex;align-items:center}::ng-deep .ant-pagination-options .ant-select,::ng-deep .ant-pagination-options .ant-select-selection--single{min-width:100px}::ng-deep .ant-pagination-options-size-changer.ant-select{min-width:100px}::ng-deep .ant-time-picker{width:100%}::ng-deep .cdk-overlay-pane .hd-cascader-menus.ant-cascader-menus>.ant-cascader-menu:only-child{width:-webkit-max-content!important;width:-moz-max-content!important;width:max-content!important;min-width:var(--hd-cascader-menu-min-width,auto);max-width:560px}::ng-deep .cdk-overlay-pane .hd-cascader-menus.ant-cascader-menus>.ant-cascader-menu:only-child .ant-cascader-menu-item{white-space:nowrap}.ant-input-number-disabled,.ant-input[disabled],.ant-select-disabled{color:#4b504e}.hd-detail-form-container{font-size:14px}.hd-detail-form-container ::ng-deep td.ant-descriptions-item{vertical-align:top;padding-top:6px!important;padding-bottom:6px!important;padding-left:0!important;font-size:14px}.hd-detail-form-container ::ng-deep .ant-descriptions-item>span{vertical-align:top}.hd-detail-form-container ::ng-deep .ant-descriptions-item-label{color:#4b504e;font-size:14px;line-height:22px;padding-top:1px;vertical-align:top}.hd-detail-form-container ::ng-deep .ant-descriptions-item-content{word-break:break-all;color:rgba(0,0,0,.85);font-weight:400;font-size:14px;vertical-align:top;line-height:22px}.hd-detail-form-container ::ng-deep a{font-size:14px}.hd-detail-form-container ::ng-deep td{white-space:unset!important}.hd-detail-form-container .hd-detail-form-images{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px}.hd-detail-form-container .hd-detail-form-image{display:inline-flex;flex-shrink:0;box-sizing:border-box;width:48px;height:48px;overflow:hidden;border:1px solid #e5e6eb;border-radius:4px;cursor:pointer;line-height:0}.hd-detail-form-container .hd-detail-form-image img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.hd-detail-form-container .hd-detail-form-image:hover{border-color:#20b95d}"]
                     }] }
         ];
         /** @nocollapse */
         HdDetailFormComponent.ctorParameters = function () { return []; };
         HdDetailFormComponent.propDecorators = {
             formCols: [{ type: core.Input }],
-            nzColumn: [{ type: core.Input }]
+            nzColumn: [{ type: core.Input }],
+            imageClick: [{ type: core.Output }]
         };
         return HdDetailFormComponent;
     }());
@@ -536,6 +692,13 @@
          * @type {?}
          */
         HdDetailFormComponent.prototype.nzColumn;
+        /**
+         * 附件图片点击回调
+         * @type {?}
+         */
+        HdDetailFormComponent.prototype.imageClick;
+        /** @type {?} */
+        HdDetailFormComponent.prototype.HdDetailFormFieldType;
     }
 
     /**
@@ -547,12 +710,9 @@
         }
         HdDetailFormModule.decorators = [
             { type: core.NgModule, args: [{
-                        imports: [
-                            common.CommonModule,
-                            ngZorroAntd.NgZorroAntdModule
-                        ],
+                        imports: [common.CommonModule, ngZorroAntd.NgZorroAntdModule],
                         exports: [HdDetailFormComponent],
-                        declarations: [HdDetailFormComponent]
+                        declarations: [HdDetailFormComponent],
                     },] }
         ];
         return HdDetailFormModule;
@@ -727,6 +887,12 @@
          * @type {?}
          */
         HdOption.prototype.width;
+        /**
+         * 字段类型，默认文本。
+         * `accessory`：附件图片，value 为图片地址 string / string[] 或 { name?, path?/url? }[]
+         * @type {?}
+         */
+        HdOption.prototype.type;
         /** @type {?} */
         HdOption.prototype.clickText;
         /** @type {?} */
@@ -10910,24 +11076,6 @@
         TableTotalOption.prototype.insertName;
     }
 
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var HdDetailFormService = /** @class */ (function () {
-        function HdDetailFormService() {
-        }
-        HdDetailFormService.decorators = [
-            { type: core.Injectable, args: [{
-                        providedIn: 'root'
-                    },] }
-        ];
-        /** @nocollapse */
-        HdDetailFormService.ctorParameters = function () { return []; };
-        /** @nocollapse */ HdDetailFormService.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function HdDetailFormService_Factory() { return new HdDetailFormService(); }, token: HdDetailFormService, providedIn: "root" });
-        return HdDetailFormService;
-    }());
-
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -11381,6 +11529,7 @@
     exports.HdAccessoryListComponent = HdAccessoryListComponent;
     exports.HdButtonService = HdButtonService;
     exports.HdCurrentTableComponent = HdCurrentTableComponent;
+    exports.HdDetailFormFieldType = HdDetailFormFieldType;
     exports.HdDetailFormService = HdDetailFormService;
     exports.HdFilterService = HdFilterService;
     exports.HdFormLinesService = HdFormLinesService;