# print-webapp 前端使用说明

`print-webapp` 当前对外仅暴露以下 3 个能力：

- `PrintDesigner`：打印模板设计组件
- `PrintApi`：打印模板后端接口封装
- `PrintRuntime`：打印运行时预览对象

## 1. 安装与引入

在业务项目中安装后，从包根入口引入：

```ts
import { PrintDesigner, PrintApi, PrintRuntime } from "print-template";
```

> 当前包的 `exports` 仅开放根入口，请勿使用子路径导入。

## 2. PrintDesigner 组件

### 2.1 组件入参

- `modelId: string`（必填）
  数据模型 ID，用于设计器内部字段查询。
- `id: string`（必填）
  模板 ID。
- `templateName?: string`（选填）
  页面头部展示的模板名称。

### 2.2 组件事件

- `back`
  点击头部“返回”按钮触发。

### 2.3 页面中使用示例（Vue 3）

```vue
<script setup lang="ts">
import { PrintDesigner } from "print-template";

const modelId = "YOUR_MODEL_ID";
const templateId = "YOUR_TEMPLATE_ID";

const onBack = () => {
  // 返回列表页
};
</script>

<template>
  <PrintDesigner
    :model-id="modelId"
    :id="templateId"
    template-name="测试模板"
    @back="onBack"
  />
</template>
```

## 3. PrintApi 接口

`PrintApi` 为模板 CRUD 封装，返回值为 `Promise`。

- `getPrintTemplate(templateId: string)`
- `createPrintTemplate(data: any)`
- `updatePrintTemplate(templateId: string, data: any)`
- `deletePrintTemplate(templateId: string)`

示例：

```ts
import { PrintApi } from "print-template";

// 查询模板
const detail = await PrintApi.getPrintTemplate("template-id");

// 新建模板
await PrintApi.createPrintTemplate({
  templateName: "测试模板",
  settings: "{}",
  content: "[]",
});

// 更新模板
await PrintApi.updatePrintTemplate("template-id", {
  templateName: "测试模板-更新",
});

// 删除模板
await PrintApi.deletePrintTemplate("template-id");
```

## 4. PrintRuntime 对象

`PrintRuntime` 用于基于模板数据和表单数据进行打印预览。

### 4.1 构造参数

- `templateData: PageData`
- `formData: RuntimeFormData`

### 4.2 当前可用方法

- `printPreview()`

示例：

```ts
import { PrintRuntime } from "print-template";

const runtime = new PrintRuntime(templateData, formData);
runtime.printPreview();
```

## 5. 运行与打包

- 本地开发：`pnpm run dev`
- SDK 打包：`pnpm run build`

## 6. 当前版本注意事项

- `PrintDesigner` 内部目前包含示例模板数据和字段元数据，属于“可演示优先”实现。
- 保存按钮当前仅在控制台输出模板数据，未直接调用 `PrintApi` 持久化。
- 若用于生产业务，建议在下个版本将模板数据、字段元数据、保存行为改为外部可配置。