@canvas-components/react-print-design 0.1.1 → 0.1.3

package/README.md

@@ -28,6 +28,8 @@ export function TemplateEditor() {
 
 传入 `document` 可加载外部模板并使用受控更新；`data` 提供 `{{field.path}}` 变量预览数据，`onChange` 返回文档副本。组件也接受 `readonly`、`showGrid`、`zoom` 和 `editor={false}` 等属性。默认编辑器会注入自身样式，容器需要有明确高度。
 
+大数据量可在设计阶段只传入第一页样本，并提供 `loadPreviewData(document, { signal, onProgress })`，在点击预览或打印、导出时异步返回完整的 `{ document, data }`。预览会分批生成页面并显示进度，退出预览时通过 `signal` 取消任务；加载函数应响应取消信号，并避免同步遍历全部数据。ReactListTable 的打印设计已采用此方式，首次打开只读取第一页，预览分页保留当前模板的编辑结果。
+
 组件栏提供文本、形状、分割线、图片、条形码、二维码和图表。选中分割线后，可在属性面板设置方向、线型、颜色和线宽；尺寸、位置及旋转也可在通用属性中调整。
 
 开发排查时可设置 `debug` 开启 Canvas 调试覆盖层。它会显示元素边界、当前选区和指针命中的元素；也可通过对象配置单独控制各层：
@@ -72,7 +74,15 @@ export function TemplateEditor() {
 
 静态数据支持按行展开、直接编辑字段和增删数据行，保留数值、布尔值及嵌套字段类型，复杂对象可用 JSON 编辑。动态绑定使用设计器 `data` 中的数组路径，显示有效记录数和前 5 行预览；切换模式保留静态记录。示例页提供 `order.items` 数据源。表头、表格体、汇总行各自支持背景色和文字色，默认背景透明，可通过“背景透明”开关切换。
 
-画布与左侧元素图层共用右键菜单：剪切、复制、粘贴、生成副本、层级调整、组合/取消组合、对齐、锁定/解锁、显示/隐藏、删除，以及全选和撤销重做。空白画布提供全部解锁、显示全部图层与适合页面。右键已选元素保留多选；复制粘贴使用当前设计器实例内剪贴板，粘贴偏移 5mm 并重建组合 ID。菜单支持方向键、Home/End 和 Esc。
+“单元格边框”可选择显示、隐藏或动态数据控制；动态边框字段使用级联选择器从当前 mock/data 或记录字段中选择。“单元格”面板按行列设置合并行列数、对角线文字、背景、文字及边框颜色，单元格边框字段也使用级联选择器。画布中先点击表头或表体单元格，再按 Shift 点击同一区域的另一单元格可选择矩形范围；右侧面板与右键菜单均可执行“合并选中单元格”。右键菜单也支持与右侧或下方单元格合并及取消合并。拖动表格上下句柄会调整行高，表格随数据行数变化而扩高，打印分页时后续组件紧跟实际表格末尾。
+
+“数据自动合并”面板可输入逗号分隔的字段名：连续行分组字段用于判定相邻记录是否属于同一组，执行行合并的列用于指定需要显示为合并单元格的列（留空时使用分组字段），同行相邻列合并字段用于合并值相同的相邻列。字段设置失焦后应用，动态绑定数据变化时重新计算，手动合并配置优先。
+
+选中表格后，顶部字母选择器可选整列，左侧行号选择器可选表头或数据整行，左上角可全选。右键数据行号可在上方或下方新增静态数据行；右键列字母可在左侧或右侧新增列。左上角全选选择器的右键菜单可在末尾新增行或列。动态绑定表格的新增数据行操作禁用；所有插入操作支持撤销重做。
+
+列类型支持文本、金额、图片、二维码、条码、颜色、进度、勾选、评分、标签、按钮、图表等常见 ListTable 单元格内容；数据值也可使用带 `type` 的对象覆盖列类型。图表对象需提供 `chartType` 和 `option`，时间线对象需提供 `items`。
+
+画布与左侧元素图层共用右键菜单：剪切、复制、粘贴、生成副本、组合/取消组合、锁定/解锁、显示/隐藏、删除，以及全选和撤销重做。层级和对齐操作在对应面板中使用。空白画布提供全部解锁、显示全部图层与适合页面。右键已选元素保留多选；复制粘贴使用当前设计器实例内剪贴板，粘贴偏移 5mm 并重建组合 ID。菜单支持方向键、Home/End 和 Esc。
 
 左侧点击组合的子图层只选中该子图层，点击组合标题选中其成员；画布点击组合成员时选中整个组合，拖动时整体移动。元素超过 80 个时，左侧自动启用虚拟列表，只挂载可视区域与预加载行，支持展开分组、滚动和拖拽排序。