npm package: @geekt/g-print-design
Description: 基于vue-plugin-hiprint的可视化打印设计组件
Author: Geekt
Latest version: 1.0.1

# Geekt Print Design

基于 [vue-plugin-hiprint](https://github.com/CcSimple/vue-plugin-hiprint) 的 Vue 3 可视化打印设计组件

## 功能特性

✨ **可视化设计** - 拖拽式打印模板设计
📄 **多种组件** - 文本、图片、二维码、条形码、表格等
🖨️ **打印预览** - 实时预览打印效果
📥 **导出PDF** - 支持导出PDF文件
🎨 **高度可定制** - 支持自定义组件和业务套件
🔧 **业务套件** - 内置常见业务模板
📊 **数据绑定** - 支持数据集配置和数据转换

## 安装

```bash
npm install geekt-print-design
```

## 基础使用

### 1. 完整示例

```vue
<template>
  <div style="height: 800px;">
    <GeektPrintDesign
      v-model:template="printTemplate"
      :data-sets="dataSets"
      @save="handleSave"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { GeektPrintDesign } from 'geekt-print-design';
import 'geekt-print-design/dist/style.css';

const printTemplate = ref('');

// 数据集配置
const dataSets = ref([
  {
    id: 'order',
    fullName: '订单信息',
    children: [
      { id: 'orderNo', fullName: '订单号' },
      { id: 'customerName', fullName: '客户名称' },
      { id: 'totalAmount', fullName: '总金额' },
    ]
  }
]);

function handleSave(data) {
  console.log('保存设计:', data);
  // 保存到后端
}
</script>
```

### 2. 设计器组件

```vue
<template>
  <GeektPrintDesigner
    v-model:template="template"
    :data-sets="dataSets"
    :convert-config="convertConfig"
    :global-config="globalConfig"
    @preview="handlePreview"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { GeektPrintDesigner } from 'geekt-print-design';

const template = ref('');
const dataSets = ref([]);
const convertConfig = ref([]);
const globalConfig = ref({
  sliceConfig: [] // 多联打印配置
});
</script>
```

### 3. 预览组件

```vue
<template>
  <GeektPrintPreview
    :template="template"
    :data="printData"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { GeektPrintPreview } from 'geekt-print-design';

const template = ref('{"panels":[{"width":210,"height":297,"printElements":[]}]}');
const printData = ref({
  orderNo: 'ORDER20240120001',
  customerName: '张三',
  totalAmount: '1000.00'
});
</script>
```

### 4. 打印组件

```vue
<template>
  <GeektPrintBrowse
    :template-id="templateId"
    :form-data="formData"
    @download="handleDownload"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { GeektPrintBrowse } from 'geekt-print-design';

const templateId = ref('template-001');
const formData = ref([
  { id: 1, name: '订单1' },
  { id: 2, name: '订单2' }
]);
</script>
```

## API 文档

### GeektPrintDesigner Props

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| template | String | '' | 打印模板JSON |
| dataSets | Array | [] | 数据集配置 |
| convertConfig | Array | [] | 数据转换配置 |
| globalConfig | Object | {} | 全局配置 |
| readOnly | Boolean | false | 只读模式 |
| apiConfig | Object | {} | API配置 |

### GeektPrintDesigner Events

| 事件名 | 参数 | 说明 |
|--------|------|------|
| save | (data: Object) | 保存模板 |
| preview | (template: String) | 预览模板 |

### GeektPrintPreview Props

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| template | String | '' | 打印模板JSON |
| data | Object | {} | 打印数据 |
| title | String | '打印预览' | 标题 |

### GeektPrintBrowse Props

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| templateId | String | '' | 模板ID |
| formData | Array | [] | 表单数据列表 |
| apiConfig | Object | {} | API配置 |

## API 配置

如果需要使用后端存储，需要配置API：

```typescript
const apiConfig = {
  baseURL: 'https://api.example.com',
  endpoints: {
    // 获取版本列表
    getVersionList: '/api/print/version/list',
    // 获取版本详情
    getVersionInfo: '/api/print/version/info',
    // 保存版本
    saveVersion: '/api/print/version/save',
    // 复制版本
    copyVersion: '/api/print/version/copy',
    // 删除版本
    deleteVersion: '/api/print/version/delete',
    // 获取预览信息
    getPreviewInfo: '/api/print/preview/info',
    // 批量打印数据
    getBatchData: '/api/print/batch/data',
  }
};
```

## 自定义组件

### 1. 自定义打印元素

```typescript
import { hiprint } from 'vue-plugin-hiprint';

const customProvider = () => ({
  addElementTypes: (context) => {
    context.addPrintElementTypes('customModule', [
      new hiprint.PrintElementTypeGroup('自定义组件', [
        {
          tid: 'customModule.myText',
          title: '我的文本',
          type: 'text',
          options: {
            width: 100,
            height: 30,
            fontSize: 12
          }
        }
      ])
    ]);
  }
});

// 使用
<GeektPrintDesigner :custom-provider="customProvider" />
```

### 2. 自定义业务套件

```typescript
import { ref } from 'vue';
import { GeektPrintDesigner } from 'geekt-print-design';

const businessComponents = ref([
  {
    id: 'contract1',
    label: '销售合同',
    icon: 'icon-ym icon-ym-combination',
    templateJson: [
      // 模板JSON
    ]
  }
]);
```

## 开发与部署

### 快速开始

- 📖 [快速开始指南](./QUICKSTART.md) - 5分钟快速上手
- 📘 [完整开发指南](./DEVELOPMENT_GUIDE.md) - 开发、构建、发布、接入全流程

### 开发流程

详细文档：[DEVELOPMENT_GUIDE.md](./DEVELOPMENT_GUIDE.md)

- 🛠️ **开发环境搭建** - 依赖安装、启动开发服务器
- 🏗️ **构建项目** - 构建配置、验证输出
- 🎬 **功能演示** - 运行示例、功能测试
- 📦 **发布npm** - 版本管理、发布流程
- 🔌 **项目接入** - 安装使用、高级配置

### 项目接入

```bash
# 1. 安装依赖
npm install geekt-print-design

# 2. 安装必需的peer dependencies
npm install vue@^3.3.0 ant-design-vue@^4.0.0 vue-plugin-hiprint@^0.0.57

# 3. 引入样式
import 'geekt-print-design/dist/style.css';

# 4. 使用组件
import { GeektPrintDesigner } from 'geekt-print-design';
```

详细接入方式请参考：[项目接入文档](./DEVELOPMENT_GUIDE.md#项目接入方式)

## 完整示例项目

参见 `examples/` 目录下的完整示例

## 更多文档

- 📚 [完整文档索引](./docs/DOCS_INDEX.md) - 查看所有详细文档
- 🐛 [已知问题](./docs/KNOWN_ISSUES.md) - 已知问题和解决方案
- 🔧 [问题排查](./docs/TROUBLESHOOTING.md) - 常见问题排查指南
- 📦 [NPM发布指南](./docs/NPM_PUBLISH_GUIDE.md) - NPM包发布详细流程

## 浏览器支持

- Chrome (推荐)
- Firefox
- Edge
- Safari

## 许可证

MIT