fantasy-ngzorro 2.1.61 → 2.1.63

package/README.md

@@ -37,6 +37,15 @@
 | — | 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-21 | hd-table 列支持 `rowNo`：字段值后竖线展示行号，前面字段仍可超链接 |
+| — | 2026-9-22 | `hd-form-lines` 支持列设置（`showColSettings` 默认开）：仅非 hide 的 ViewDom 可显隐，禁止调序；可选 `uuid` 缓存 |
+| — | 2026-9-22 | `hd-tip` 支持右侧展开/收起（`showCollapse` / `[(expanded)]`），暴露 `expand` / `collapse` / `toggle` 供父组件控制其它区块 |
+| — | 2026-9-22 | `hd-form-lines` 勾选提示改为 `tableTotal` 插槽（同 hd-table），组件内不再默认渲染已选中块 |
+| — | 2026-9-22 | `hd-table` / `hd-detail-form` 字段值后支持编辑笔图标（`editable` + `edit` 回调，图标对齐 Figma） |
+| — | 2026-9-22 | `hd-table` 支持 `pagination` / `frontPagination`：全量 `content` 可「不分页展示」或「前端切片分页」，列表默认仍为服务端分页 |
+| — | 2026-9-21 | hd-table 列 `color` 支持函数，按行给某一个字段标红 |
+| — | 2026-9-20 | hd-detail-form 附件图片：最多展示 4 张，超出末张蒙版 `+n`；弹窗预览支持左右翻页 |
+| — | 2026-9-20 | hd-detail-form 附件图片点击弹窗预览大图（不再 `window.open`） |
 | — | 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，点击下载/查看） |
@@ -147,6 +156,13 @@
 ```html
 <hd-tip title="基本信息" [fontSize]="14"></hd-tip>
 <hd-tip title="新增" [showIcon]="false" [fontSize]="16"></hd-tip>
+
+<!-- 右侧展开/收起：父组件控制其它区块显隐 -->
+<hd-tip #basicTip title="基本信息" showCollapse [(expanded)]="showBasicBlock"></hd-tip>
+<div *ngIf="showBasicBlock">…其它内容…</div>
+
+<!-- 或 ViewChild 调用 -->
+<!-- this.basicTip.expand() / collapse() / toggle() -->
 ```
 
 | 参数 | 类型 | 默认值 | 说明 |
@@ -154,6 +170,19 @@
 | title | string | — | 标题文案 |
 | showIcon | boolean | true | 是否显示左侧竖线 |
 | fontSize | number | — | 字体大小 |
+| showCollapse | boolean | false | 是否在右侧显示展开/收起 |
+| expanded | boolean | true | 当前是否展开；可 `[(expanded)]` 双向绑定 |
+| expandedChange | EventEmitter\<boolean\> | — | 展开状态变化 |
+
+#### 暴露方法（ViewChild）
+
+| 方法 | 说明 |
+| ---- | ---- |
+| expand() | 展开，并触发 `expandedChange` |
+| collapse() | 收起，并触发 `expandedChange` |
+| toggle() | 切换，并触发 `expandedChange` |
+
+`hd-tip` 本身不包裹内容块，由父组件根据 `expanded` / 方法结果自行控制其它区域的 `*ngIf` 等显隐。
 
 ---
 
@@ -269,8 +298,10 @@ search(reset = false) {
 
 | 参数 | 类型 | 默认值 | 说明 |
 | ---- | ---- | ------ | ---- |
-| tableData | Page\<any\> | — | 分页数据 |
-| tablePageIndex | number | 1 | 当前页（双向绑定） |
+| tableData | Page\<any\> | — | 分页数据；非分页时 `content` 放全量，`totalElements` 建议等于 `content.length` |
+| pagination | boolean | true | 是否显示分页；`false` 时一次展示全部 `content` |
+| frontPagination | boolean | false | 前端分页：对 `content` 全量切片，翻页不触发 `tableSearchEvent`。详情全量数据时与 `pagination` 搭配：`pagination=false` 全展示，`pagination=true` + `frontPagination` 前端分页。列表服务端分页保持默认即可（`frontPagination` 不传） |
+| tablePageIndex | number | 1 | 当前页（双向绑定）；`pagination=false` 时无意义 |
 | tablePageSize | number | 10 | 每页条数（双向绑定） |
 | tableLoading | boolean | false | 加载状态 |
 | tableSearchEvent | EventEmitter | — | 翻页 / 改 pageSize 触发，参数 reset 表示是否重置到第一页 |
@@ -352,9 +383,11 @@ tableCols: HdTableColumn[] = [{
 | 参数 | 类型 | 默认值 | 说明 |
 | ---- | ---- | ------ | ---- |
 | tableCols | HdTableColumn[] | [] | 列配置 |
-| tableData | Page\<any\> | — | 分页数据 |
-| tablePageIndex | number | 1 | 当前页（双向绑定） |
-| tablePageSize | number | 100 | 每页条数（双向绑定）；外面传入会覆盖默认值 |
+| tableData | Page\<any\> | — | 数据；服务端分页时为当前页；全量场景 `content` 放全部行 |
+| pagination | boolean | true | 是否显示分页；`false` 一次展示全部 `content` |
+| frontPagination | boolean | false | 前端分页：对 `content` 切片，翻页不触发 `tableSearchEvent`。详情全量数据：`[pagination]="x" frontPagination`，切 `x` 即可在「全展示 / 前端分页」间切换。列表保持默认（不传）即为服务端分页 |
+| tablePageIndex | number | 1 | 当前页（双向绑定）；`pagination=false` 时可忽略 |
+| tablePageSize | number | 100 | 每页条数（双向绑定）；外面传入会覆盖默认值；非分页时可忽略 |
 | tableLoading | boolean | false | 加载状态 |
 | tableSearchEvent | EventEmitter | — | 翻页查询 |
 | tablePageSizeChange | EventEmitter | — | pageSize 双向绑定同步 |
@@ -375,7 +408,24 @@ tableCols: HdTableColumn[] = [{
 | uuid | string | — | 列缓存唯一标识（必填，用于 IndexedDB 缓存） |
 | tableLeftButton / tableRightButton / tableTotal | TemplateRef | — | 工具栏插槽 |
 
-分页可选条数：`10 / 50 / 100 / 200 / 500 / 1000`。若本地缓存过该表 `pageSize` 且 `> 10`，初始化会优先使用缓存值并回写父组件。
+分页可选条数：`10 / 50 / 100 / 200 / 500 / 1000`。若本地缓存过该表 `pageSize` 且 `> 10`，初始化会优先使用缓存值并回写父组件（仅 `pagination=true`）。
+
+非分页示例：
+
+```html
+<!-- 不分页：一次展示全部 -->
+<hd-table [pagination]="false" frontPagination
+  [tableCols]="cols" [tableData]="linesPage" uuid="detail-lines-uuid"></hd-table>
+
+<!-- 前端分页：对全量 content 切片 -->
+<hd-table [pagination]="true" frontPagination [tablePageSize]="10"
+  [tableCols]="cols" [tableData]="linesPage" uuid="detail-lines-uuid"></hd-table>
+```
+
+```typescript
+// content 放全量；totalElements 建议与 content.length 一致
+linesPage = { content: lines, totalElements: lines.length };
+```
 
 #### HdTableColumn 配置
 
@@ -480,6 +530,7 @@ formChangeEvent(validateForm: FormGroup) {
 
 ```html
 <hd-form-lines #hdFormLines showSearch showCheckbox showKeyboardOperateTip
+  uuid="demo-form-lines-col-settings"
   [formLines]="formLines" [formLinesData]="formLinesData"
   [operateButtons]="['add', 'copy', 'delete']" [allowEmpty]="false"
   (changeEvent)="formLinesChangeEvent($event)"
@@ -491,6 +542,17 @@ formChangeEvent(validateForm: FormGroup) {
   <ng-template #formLinesRightButton>
     <hd-button type="default">右侧操作</hd-button>
   </ng-template>
+  <!-- 勾选提示等同 hd-table 的 tableTotal，放在表格上方 -->
+  <ng-template #tableTotal>
+    <nz-alert *ngIf="hdFormLines.getSelectedCount() > 0" nzType="info"
+      [nzMessage]="formLinesAlertTpl" nzShowIcon></nz-alert>
+    <ng-template #formLinesAlertTpl>
+      <span>已选择{{ hdFormLines.getSelectedCount() }}条数据</span>&nbsp;&nbsp;
+      <span class="common-btn-group">
+        <a (click)="hdFormLines.clearSelection()">清空</a>
+      </span>
+    </ng-template>
+  </ng-template>
   <ng-template #ViewDomRightTemplate let-formItem="formItem" let-formLine="formLine">
     <!-- ViewDom 列右侧自定义内容 -->
   </ng-template>
@@ -505,6 +567,8 @@ formChangeEvent(validateForm: FormGroup) {
 | showDeleteConfirm | boolean | false | 删除前确认 |
 | showSearch | boolean | false | 行内搜索 |
 | showCheckbox | boolean | false | 行勾选列（用于批量操作） |
+| showColSettings | boolean | true | 是否展示列设置（齿轮，位置同 hd-table）；仅 **非 hide 的 ViewDom** 可配置显示/隐藏，**不可拖拽调序** |
+| uuid | string | — | 列设置缓存标识；有值时按用户+路由持久化到 IndexedDB |
 | showKeyboardOperateTip | boolean | false | 键盘操作提示 |
 | showLineNumber | boolean | true | 序号列 |
 | tableLoading | boolean | false | 加载状态 |
@@ -523,6 +587,7 @@ formChangeEvent(validateForm: FormGroup) {
 | ---- | ---- |
 | formLinesLeftButton | 工具栏左侧自定义按钮（同 hd-table 的 tableLeftButton） |
 | formLinesRightButton | 工具栏右侧自定义按钮 |
+| tableTotal | 表格上方自定义区域（同 hd-table）；勾选提示等由业务自行放入，组件内不再默认渲染 |
 | ViewDomRightTemplate | ViewDom 列右侧自定义模板，上下文：`formItem`、`formLine` |
 
 ### allowEmpty 行为
@@ -611,9 +676,10 @@ formCols: HdOption[] = [
 
 附件字段 `type: HdDetailFormFieldType.Accessory`（或 `'accessory'`）：
 
-- 对齐 Figma `items/description-cell`「图片」：标签 + **48×48** 缩略图横排（间距 6px，边框 `#E5E6EB`，圆角 4px）
+- 对齐 Figma `items/description-cell`「图片」：标签 + **48×48** 缩略图横排（间距 6px，边框 `#E5E6EB`，圆角 4px）；标签与首图顶对齐
 - `value` 支持：图片地址 `string` / `string[]`，或 `{ name?, path?/url? }[]`
-- 点击缩略图默认 `window.open` 打开原图，并触发 `imageClick`
+- 最多直接展示 **4** 张；超出时第 4 张蒙版显示 `+n`（n 为剩余张数）
+- 点击缩略图弹窗预览大图（支持左右翻页），并触发 `imageClick`
 - 无图时展示 `<空>`
 - **不使用** `hd-accessory-list`（文件列表样式请用独立附件列表组件）
 
@@ -934,6 +1000,8 @@ selectOption: {
 | hide | boolean | 是否隐藏 |
 | clickText | string | 可点击文案 |
 | click | (value) => void | 点击回调 |
+| editable | boolean | 值后显示编辑笔图标（Figma 14px） |
+| edit | (col) => void | 点击编辑笔回调，供父组件处理 |
 
 ### Filter（筛选项）
 
@@ -1020,6 +1088,7 @@ selectOption: {
 | type | FormLineType | — | 控件类型 |
 | align | string | — | 列对齐 left \| right \| center |
 | hideViewDomValue | boolean | false | ViewDom 隐藏 value（如只显示图片） |
+| isShow | boolean | true | 列设置可见性（仅非 hide 的 ViewDom 可由设置列切换） |
 | isSelect | boolean | — | 聚焦后全选内容 |
 | preserveNumber | number | — | ViewDom 小数位 |
 | maxLength | number | — | Input 最大长度 |
@@ -1068,7 +1137,7 @@ onOpenChangeEvent: (open: boolean, line: FormGroup) => void
 | title / name | string | — | 列标题 / 字段名 |
 | width / minWidth | number | — | 列宽 / 最小列宽 |
 | align | string | left | 对齐方式 |
-| color | string | — | 文字颜色 |
+| color | string \| (line) => string | — | 文字颜色。字符串为整列同色；函数按行返回颜色，标红可返回 `#F5222D`，不标色返回空 |
 | fixed / fixedWidth | — | — | 固定列 |
 | isShow | boolean | true | 设置列可见性 |
 | canSort / canWarp | boolean | false | 排序 / 换行 |
@@ -1076,6 +1145,9 @@ onOpenChangeEvent: (open: boolean, line: FormGroup) => void
 | stateField | string | — | 状态列取值字段（`name` 为 `state` 且未设置 `isState` 时生效，默认 `state`） |
 | render / click | Function | — | 渲染 / 点击 |
 | canClick | (line) => boolean | — | 按行控制是否可点 |
+| rowNo | boolean \| string | — | 字段值后竖线 + 行号。`true` 为分页连续序号（从 1 起）；字符串为行数据字段名。前面的字段仍可用 `click` 做成超链接，行号不可点 |
+| editable | boolean \| (line) => boolean | — | 值后显示编辑笔图标（Figma 14px）；函数按行控制 |
+| edit | (line) => void | — | 点击编辑笔回调，供父组件处理（如弹窗改值） |
 | btnList | OperateBtn[] | — | `title` 为「操作」时整列按钮；其他列时显示在单元格文案后的操作按钮 |
 
 #### OperateBtn（操作列按钮）
@@ -1121,6 +1193,8 @@ onOpenChangeEvent: (open: boolean, line: FormGroup) => void
 
 ## 附录：ColWidth 列宽常量
 
+发布后的 `.d.ts` 带字面量类型（`as const`），业务仓 IDE 悬停 `ColWidth.xxx` 可直接看到数值与说明。
+
 ```typescript
 import { ColWidth } from 'fantasy-ngzorro';