二开文档

本组件库采用「共享渲染层」架构，画布预览与打印共用同一套渲染逻辑，二开时可针对性地扩展元素类型、纸张规格、渲染规则。

架构分层

PrintDesigner.vue / PrintPreview.vue（页面级组件）
        │ provide / props
        ▼
composables（useDesigner / useHistory / useAssets）
        │
        ▼
纯逻辑层（无 Vue 依赖）
  types.ts / schema.ts / constants.ts / utils.ts
  data.ts（{字段} 解析）
  render.ts（元素 → HTML，画布与打印共用）
  print.ts（打印 HTML + 分页 + 批量）
  seal.ts（公章 SVG 生成器）

mm 坐标：模板元素用 mm 建模，屏幕画布 PX_PER_MM = 3.779527559 换算，打印 CSS 直接用 mm。
共享渲染：render.ts 的 renderElementHtml 同时供画布预览和打印使用，保证「预览即所得」。
页面渲染复用：buildPages 输出分页后的页面片段 + CSS，打印（buildPrintHtml）与预览页（PrintPreview）共用。

目录结构

src/designer/
├── index.ts              # 公共 API
├── types.ts              # 类型 / 模板 Schema / 数据源契约
├── schema.ts             # 元素工厂 createElement + 默认值 + 表格合并
├── constants.ts          # 纸张尺寸 / mm↔px
├── utils.ts              # mm↔px / id / 等距分布等工具
├── data.ts               # 数据绑定解析
├── render.ts             # 元素 → HTML（画布/打印共用）
├── print.ts              # 打印 HTML + 分页 + 批量打印
├── seal.ts               # 公章 SVG 生成器
├── composables/          # useDesigner / useHistory / useAssets
├── components/           # Toolbar / CanvasStage / PropertyPanel / ElementPalette / TableEditor / SignaturePad
├── PrintDesigner.vue     # 设计器页
└── PrintPreview.vue      # 预览页

新增元素类型

以「新增一个 印章 类元素」为例，改动点如下：

types.ts — 扩展 ElementType 联合类型 + 新增元素属性接口（继承 BaseElement）。
schema.ts — 在 createElement 中补充该类型的默认值。
render.ts — 在 renderElementHtml 中新增渲染分支（返回内部 HTML）。
components/ElementPalette.vue — 组件面板新增可拖入项。
components/PropertyPanel.vue — 属性面板新增该元素的编辑表单。

完整架构与交互模型说明见 docs/architecture.md。

扩展纸张规格

constants.ts 中维护纸张尺寸表，新增规格即可在工具栏纸张下拉中出现：

export const PAPER_SIZES = {
  A4: { width: 210, height: 297 },
  A5: { width: 148, height: 210 },
  Letter: { width: 216, height: 279 },
  // 自定义规格在此追加
}

扩展数据源

types.ts 中的 DataField / DataRecord / DataSource 定义数据源契约；data.ts 的 resolveValue / resolveList / resolveRaw 负责解析。新增字段类型时同步扩展 FieldType 联合类型。

自定义打印逻辑

buildPages(template, data) 返回分页后的页面片段 + CSS，可在其上做自定义排版 / 导出 PDF：

import { buildPages } from 'm7_print_designer'

const { pages, css, pageCount, paperW, paperH } = await buildPages(template, data)
// pages: 每页 <div class="paper">…</div> HTML
// 可将其交给 html2pdf、puppeteer 等做 PDF 导出

二开文档 ​

架构分层 ​

目录结构 ​

新增元素类型 ​

扩展纸张规格 ​

扩展数据源 ​

自定义打印逻辑 ​