vg-print 1.0.213 → 1.0.215

package/README.md

@@ -1,13 +1,14 @@
 # vg-print
 
-一个基于 `vue-plugin-hiprint` 的打印设计器组件库（Vue 3）。将项目中的设计页封装为可复用组件，提供 `Designer`、`Header`、`Preview`、`DragBox` 四个组件，方便在任何业务项目中快速集成打印模板设计、预览与导出能力。
+一个开箱即用的打印设计器组件库（Vue 3）。现在聚焦于单一组件 `FullDesigner`，同时暴露底层 `hiprint` 能力与客户端直连（`hiwebSocket`）配置，便于快速集成模板设计、预览、浏览器打印、导出 PDF/图片、直接打印等功能。
 
 ## 特性
 
-- 可视化拖拽设计打印模板，支持网格线、面板激活等配置
-- 预览支持导出 PDF/图片、浏览器打印、直接打印（需客户端）
-- 插件机制可扩展元素类型，与 `vue-plugin-hiprint` 完整兼容
-- 组件化封装，按需组合 `Header/Designer/Preview/DragBox`
+- 全功能页面组件 `FullDesigner`，直接使用，无需拼装子组件
+- 支持预览、浏览器打印、导出 PDF/图片、直接打印（需客户端）
+- 通过属性配置 `hiwebSocket` 的 `host`、`token` 与自动连接
+- 暴露实例方法：预览、打印、导出、连接控制等，外部可直接调用
+- 集成并导出 `hiprint`，可进行模板对象级的高级定制
 
 ## 安装
 
@@ -15,18 +16,18 @@
 npm i vg-print
 ```
 
-样式引入（确保设计器与打印样式生效）：
+样式引入（确保设计与打印样式生效）：
 
 ```
 // 全局样式（组件库样式）
 import 'vg-print/style.css'
 
-// 打印锁样式（可选；库已内置常用样式，如需严格 media="print" 可额外添加）
-在 `index.html` 中引入打印锁样式：
+// 打印锁样式（推荐；保证打印时样式稳定）
+// 在 `index.html` 中引入：
 <link rel="stylesheet" type="text/css" media="print" href="https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@latest/dist/print-lock.css" />
 ```
 
-环境要求：Vue 3、Node >= 18.18。无需单独安装 `vue-plugin-hiprint`，本插件已内置并导出 `hiprint` 能力。
+环境要求：Vue 3、Node >= 18.18。无需单独安装 `vue-plugin-hiprint`，本库已内置并导出 `hiprint` 能力。
 
 ## 快速开始
 
@@ -42,155 +43,111 @@ createApp(App).use(vgPrint).mount('#app')
 
 ```vue
 <template>
-  <div style="width: 100vw; height: 97vh;">
-    <Designer :template="template" :printData="printData" :config="config" :plugins="plugins" @ready="onReady">
-      <template #header>
-        <Header title="打印设计器" />
-      </template>
-      <template #other>
-        <DragBox target="SVPrint" drag-key="demo" drag-style="width:200px;height:200px;left:238px;top:95px" :show="true" />
-      </template>
-    </Designer>
-
-    <Preview ref="previewRef" />
-    <el-button @click="showPreview">显示预览</el-button>
-  </div>
+  <FullDesigner
+    ref="designer"
+    :hi-host="'http://127.0.0.1:17521'"
+    :hi-token="'your-token'"
+    :hi-auto-connect="true"
+  />
+
+  <el-button @click="preview">预览</el-button>
+  <el-button @click="printBrowser">浏览器打印</el-button>
+  <el-button @click="exportPdf">导出 PDF</el-button>
+  <el-button @click="exportImage">导出图片</el-button>
+  <el-button @click="directPrint">直接打印（需客户端）</el-button>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import { hiprint } from 'vue-plugin-hiprint'
-
-const template = ref({})
-const printData = ref({ name: '示例' })
-const config = ref({ showAdsorbLine: true, showPosition: true, showSizeBox: true })
-const plugins = ref([])
-const previewRef = ref(null)
-
-const onReady = (tpl) => {}
-const showPreview = () => {
-  const tpl = new hiprint.PrintTemplate({ template: template.value })
-  previewRef.value.init(tpl, printData.value)
-  previewRef.value.show()
-}
+const designer = ref(null)
+
+// 预览
+const preview = () => designer.value.preView()
+// 浏览器打印
+const printBrowser = () => designer.value.printView()
+// 直接打印（需客户端已连接）
+const exportPdf = () => designer.value.toPdf()
+// 导出图片
+const exportImage = () => designer.value.toImage()
+// 直接打印（需客户端已连接）
+const directPrint = () => designer.value.print()
+
+// 连接控制与参数设置
+const setHostToken = () => designer.value.setHiwebSocket('http://127.0.0.1:17521', 'token')
+// 主动连接客户端
+const connect = () => designer.value.connect()
+// 断开客户端
+const disconnect = () => designer.value.disconnect()
+// 关闭自动连接策略
+const disableAutoConnect = () => designer.value.disAutoConnect()
 </script>
 ```
 
-## 组件概览
+## API（FullDesigner）
 
-### Designer
+### 属性（Props）
 
-- `template` object 模板 json 或模板对象，默认 `{}`
-- `printData` object 打印数据，默认 `{}`
-- `templateKey` string 本地缓存键，默认 `default-template`
-- `title` string 默认导出文件名，默认 `默认模板.json`
-- `designOptions` object 设计参数，如 `{ grid: true, activePanel: true }`
-- `paperList` array 可选纸张列表
-- `config` object `hiprint.setConfig` 参数，需在渲染前设置
-- `plugins` object[] 插件数组，`hiprint.register({ authKey, plugins })`
-- `authKey` string 插件授权 key
-- 事件：`ready(hiprintTemplate)`
-- 插槽：`header`、`other`
+- `hi-host: string` 客户端服务地址（`hiwebSocket.host`），如 `http://127.0.0.1:17521`
+- `hi-token: string` 客户端鉴权令牌（`hiwebSocket.token`）
+- `hi-auto-connect: boolean` 是否自动连接客户端，默认 `true`
 
-### Header
+以上属性支持运行时动态修改，组件内部会监听并应用。
 
-- `logoHtml` string 左侧 logo HTML，默认 `<i class="svp-header-logo svicon sv-print"></i>`
-- `title` string 左侧标题，默认 `sv-print`
-- `onPreviewClick: (e) => boolean` 返回 `true` 阻止默认行为
-- 事件：`preview`
-- 插槽：`headerLeft`、`headerCenter`、`headerRight`
+### 方法（通过组件 ref 调用）
 
-### Preview
+- `preView()` 打开预览弹窗
+- `printView()` 浏览器打印
+- `print()` 直接打印（需客户端已连接）
+- `toPdf()` 导出为 PDF（内置示例参数）
+- `toImage()` 导出为图片（内置示例参数）
+- `setHiwebSocket(host: string, token?: string, cb?: Function)` 设置客户端地址与令牌并重连
+- `connect(cb?: Function)` 主动连接客户端
+- `disconnect()` 断开客户端
+- `disAutoConnect()` 关闭自动连接策略
 
-- `printTemplate` object 模板对象（`hiprint.PrintTemplate`）
-- `printData` object 打印数据
-- `printerList` array 打印机列表
-- `selectedPrinter` string 默认选中打印机名称，支持 `v-model:selectedPrinter`
-- `showPdf`/`showImg`/`showPrint2` boolean 控制按钮
-- `modalShow` boolean 控制显示
-- 方法：`init(template, data)`、`getTarget()`、`show()`
+## 高级用法（hiprint）
 
-### DragBox
-
-- `target` string 容器 Id 或 ClassName
-- `dragKey` string 拖拽标识
-- `dragStyle` string 初始位置与大小，如 `width:200px;height:200px;left:238px;top:95px`
-- `mode` string `default | top | left | bottom | right | fixed`
-- `show` boolean 是否显示
-- 插槽：`iconTitle`、`body`
-
-## 与 hiprint 的集成
-
-初始化与配置：
+本库导出 `hiprint`，可直接创建与操作模板对象（`hiprint.PrintTemplate`）：
 
 ```js
-import { hiprint, defaultElementTypeProvider } from 'vue-plugin-hiprint'
-
+import { hiprint, defaultElementTypeProvider } from 'vg-print'
+// 全局配置
 hiprint.setConfig({ showAdsorbLine: true, showPosition: true, showSizeBox: true })
+// 注册插件
 hiprint.register({ authKey: '', plugins: [] })
+// 初始化元素提供器 （默认元素提供器）
 hiprint.init({ providers: [new defaultElementTypeProvider()] })
-```
-
-渲染与打印：
-
-```js
+// 创建模板对象
 const tpl = new hiprint.PrintTemplate({ template: {} })
+// 设计模板
 tpl.design('#hiprint-printTemplate', { grid: true })
+// 打印（需客户端已连接）
 tpl.print({ name: '示例' })
+// 打印2（需客户端已连接）
 tpl.print2({ name: '示例' }, { printer: '' })
+// 导出 PDF（内置示例参数）
 tpl.toPdf({ name: '示例' }, '打印预览pdf', { paperWidth: 210, paperHeight: 297, scale: 2, perPage: 6 })
+// 导出图片（内置示例参数） 
 tpl.toImage({ name: '示例' }, { isDownload: true, name: '图片', limit: 1, type: 'image/jpeg', pixelRatio: 2 })
 ```
 
-## 完整示例（预览组件）
-
-```vue
-<template>
-  <Preview ref="previewRef" :showPdf="true" :showImg="true" :showPrint2="true" v-model:selectedPrinter="selected" />
-  <el-button @click="open">预览</el-button>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { hiprint } from 'vue-plugin-hiprint'
-
-const selected = ref('')
-const previewRef = ref(null)
-
-const open = () => {
-  const template = new hiprint.PrintTemplate({ template: {} })
-  previewRef.value.init(template, { name: '示例' })
-  previewRef.value.show()
-}
-</script>
-```
-
-## 构建与发布
-
-打包组件库：
+## 注意事项
 
-```
-npm run build:lib
-```
+- 建议在 `index.html` 注入 `print-lock.css`，保证打印样式稳定
+- 直接打印需配套客户端（Electron 或服务端），跨域部署需启用 HTTPS
+- 若使用自定义 `host/token`，确保客户端配置一致且网络可达
 
-产物会生成到 `dist/`：`vg-print-designer.es.js`、`vg-print-designer.umd.js`。
+## 构建
 
-发布到 npm：
+开发与构建：
 
 ```
-npm login
-npm publish
+npm run dev      # 开发
+npm run build    # 应用构建
+npm run build:lib# 组件库构建
 ```
 
-如包名冲突，请在 `package.json` 中修改为未占用的名称。
-
-## 注意事项
-
-- 必须在 `index.html` 注入 `print-lock.css`，保证打印样式稳定
-- 直接打印需配套客户端，跨域部署需启用 HTTPS
-- 建议在渲染前调用 `hiprint.setConfig` 配置设计器显示选项
-
 ## 源码位置
 
 - 入口与导出：`packages/index.ts`
-- 组件：`packages/components/Designer.vue`、`packages/components/Header.vue`、`packages/components/Preview.vue`、`packages/components/DragBox.vue`
+- 完整页面组件：`src/views/index.vue`

package/dist/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>vue-plugin-hiprint-demo</title>
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="stylesheet" type="text/css" media="print" href="/css/print-lock.css" />
+    <script type="module" crossorigin src="/static/js/index-o25as6Wf.js"></script>
+    <link rel="stylesheet" crossorigin href="/static/css/index-CHrdN67h.css">
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>