vue-print-designer 1.0.2 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +50 -61
  2. package/dist/{index.es-CEmFzBjq.js → index.es-DKZEo7bA.js} +1 -1
  3. package/dist/print-designer.css +1 -1
  4. package/dist/print-designer.es.js +1 -1
  5. package/dist/print-designer.umd.js +148 -175
  6. package/dist/purify.es-CRlZ0Imf.js +553 -0
  7. package/dist/{web-component-Dt6wVDnY.js → web-component-Lph2pubp.js} +26011 -23312
  8. package/dist/web-component.d.ts +11 -0
  9. package/package.json +4 -4
  10. package/dist/purify.es-CKk_t3XZ.js +0 -471
package/README.md CHANGED
@@ -16,23 +16,45 @@ Vue Print Designer 是一款可视化打印设计器，面向业务表单、标
16
16
 
17
17
  ## 界面预览
18
18
 
19
- | 界面视图 | 界面视图 |
20
- | --- | --- |
21
- | **设计器主界面与画布视图**<br>![设计器主界面](https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/1.png) | **打印预览**<br>![打印预览](https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/2.png) |
22
- | **打印参数配置**<br>![打印参数](https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/3.png) | **系统设置与偏好**<br>![系统设置](https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/4.png) |
23
- | **快捷键说明**<br>![快捷键](https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/5.png) | **高级表格编辑**<br>![高级表格](https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/6.png) |
19
+ | 设计器主界面与画布视图 | 打印预览 | 打印参数配置 |
20
+ | --- | --- | --- |
21
+ | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/1.png" alt="设计器主界面" width="240" /> | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/2.png" alt="打印预览" width="240" /> | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/3.png" alt="打印参数" width="240" /> |
22
+
23
+ | 系统设置与偏好 | 快捷键说明 | 高级表格编辑 |
24
+ | --- | --- | --- |
25
+ | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/4.png" alt="系统设置" width="240" /> | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/5.png" alt="快捷键" width="240" /> | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/6.png" alt="高级表格" width="240" /> |
24
26
 
25
- ## 核心特性与优势
27
+ ## 集成示例
28
+
29
+ 我们提供了一个基于 **Vue 3 + Element Plus** 的完整集成示例项目，演示如何在实际业务系统中嵌入打印设计器。
26
30
 
27
- 市面上大多数打印插件要么**强耦合特定框架**，要么**仅提供基础打印功能**。我们专注于解决**分页逻辑复杂**与**集成成本高**的痛点，提供企业级的打印解决方案：
31
+ | 参数调试 | 设计器 | 暗色模式 |
32
+ | --- | --- | --- |
33
+ | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/11.png" alt="集成示例图 11" width="240" /> | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/12.png" alt="集成示例图 12" width="240" /> | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/13.png" alt="集成示例图 13" width="240" /> |
34
+
35
+ - **项目地址**：[https://github.com/0ldFive/vue-designer-sample](https://github.com/0ldFive/vue-designer-sample)
36
+ - **在线演示**：[https://0ldfive.github.io/vue-designer-sample/#/designer](https://0ldfive.github.io/vue-designer-sample/#/designer)
37
+ - **技术栈**：Vue 3, TypeScript, Element Plus, Vite
38
+
39
+ ## 社区交流
40
+
41
+ 欢迎加入 QQ 群一起交流功能使用、二次开发与问题排查。
42
+
43
+ - QQ 群号：**1038069636**
44
+
45
+ <p>
46
+ <img src="./docs/images/qq_group.jpg" alt="Vue Print Designer QQ 群二维码（1038069636）" width="120" />
47
+ </p>
48
+
49
+ ## 核心特性与功能亮点
50
+
51
+ 多数打印插件要么框架耦合重，要么功能偏基础。我们聚焦复杂分页与低成本集成，提供企业级打印方案：
28
52
 
29
53
  - **开箱即用**：不同于手写分页逻辑，内置完整的拖拽设计器与预览引擎，自动处理表格分页与表头重复。
30
54
  - **跨框架支持**：拒绝框架锁定，基于 Web Components，完美适配 Vue/React/Angular/原生 HTML 等所有技术栈。
31
55
  - **工程化完备**：不仅是打印，更提供静默打印、云打印、PDF/图片导出及精细的打印参数控制。
32
56
  - **灵活扩展**：支持自定义元素与 API 对接，满足深度业务定制需求。
33
57
 
34
- ## 功能亮点
35
-
36
58
  - 拖拽式页面编辑，支持文本、图片、条码、二维码、表格、形状
37
59
  - 表格自动分页（支持表头/表尾重复）
38
60
  - 多页面布局、网格/标尺、缩放与对齐工具
@@ -49,9 +71,9 @@ PrintDot Client 是配套的桌面打印助手（Wails + Vue），用于设备
49
71
  - 关键能力：自动发现与识别设备、稳定连接维护与转发队列、轻量后台运行
50
72
  - 项目地址：https://github.com/0ldFive/PrintDot-Client
51
73
 
52
- | 初始界面 | 偏好设置 |
74
+ | 主界面 - 设备状态与连接管理 | 设置页面 - 偏好与配置选项 |
53
75
  | --- | --- |
54
- | **主界面 - 设备状态与连接管理**<br><img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/7.png" alt="PrintDot 主界面" width="280" /> | **设置页面 - 偏好与配置选项**<br><img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/8.png" alt="PrintDot 设置页面" width="280" /> |
76
+ | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/7.png" alt="PrintDot 主界面" width="140" /> | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/8.png" alt="PrintDot 设置页面" width="140" /> |
55
77
 
56
78
  <p>
57
79
  <a href="https://github.com/0ldFive/PrintDot-Client/releases" target="_blank" rel="noopener noreferrer">⬇ 下载 PrintDot Client</a>
@@ -59,66 +81,39 @@ PrintDot Client 是配套的桌面打印助手（Wails + Vue），用于设备
59
81
 
60
82
  ## 快速开始
61
83
 
62
- ### 环境要求
63
-
64
- - Node.js >= 16.0.0
65
- - npm >= 7.0.0 或 yarn / pnpm
66
-
67
- ### 安装依赖
68
-
69
- ```bash
70
- npm install
71
- ```
72
-
73
- ### 开发模式
74
-
75
- ```bash
76
- npm run dev
77
- ```
78
-
79
- 启动后访问本地服务即可使用设计器。
80
-
81
- ### 生产构建
82
-
83
- ```bash
84
- npm run build
85
- ```
86
-
87
- ### 构建 Web Components 包
88
-
89
- ```bash
90
- npm run build:wc
91
- ```
92
-
93
- 产物说明：
94
-
95
- - `dist/print-designer.es.js` - ES 模块版本
96
- - `dist/print-designer.umd.js` - UMD 版本
97
- - `dist/print-designer.css` - 样式文件
98
- - `dist/web-component.d.ts` - TypeScript 类型声明
99
-
100
- ## 引入方式
101
-
102
84
  ### 方式一：下载源码自行改造与集成 API
103
85
 
104
86
  适合有深度定制需求的团队。
105
87
 
106
- 建议接入点：
88
+ #### 环境要求
89
+
90
+ - Node.js >= 16.0.0
91
+ - npm >= 7.0.0 或 yarn / pnpm
92
+
93
+ #### 建议接入点
107
94
 
108
95
  - 模板 CRUD：`useTemplateStore`（可替换为接口读写）
109
96
  - 自定义元素 CRUD：`useDesignerStore` 中的 `customElements`
110
97
  - 变量与模板数据：组件实例方法 `setVariables` / `loadTemplateData`
111
98
 
112
- 自定义元素扩展请查看：[自定义元素扩展指南](https://github.com/0ldFive/Vue-Print-Designer/blob/master/docs/zh/guide/custom-element.md)
99
+ 自定义元素扩展请查看：[自定义元素扩展指南](https://printdot.cc/docs)
113
100
 
114
101
  ### 方式二：npm 组件（Web Components）
115
102
 
116
103
  适合任何技术栈（Vue/React/Angular/原生）。Web Components 方式**支持 Vue 2**（作为自定义元素使用），无需 Vue 2 组件适配。
117
104
 
118
- 详细参数、CRUD 与 JSON 示例请查看：[Web Components API 用户手册](https://github.com/0ldFive/Vue-Print-Designer/blob/master/docs/zh/guide/web-components-guide.md)
105
+ 详细参数、CRUD 与 JSON 示例请查看：[Web Components API 用户手册](https://printdot.cc/docs)
106
+
107
+ #### 安装依赖
108
+
109
+ 选择任一包管理器安装依赖：
119
110
 
120
111
  ```bash
121
112
  npm i vue-print-designer
113
+ # 或
114
+ pnpm add vue-print-designer
115
+ # 或
116
+ yarn add vue-print-designer
122
117
  ```
123
118
 
124
119
  #### 1) 使用组件（Vue 3 / Vite）
@@ -190,13 +185,7 @@ el.addEventListener('error', (e) => {
190
185
  });
191
186
  ```
192
187
 
193
- #### 4) 集成示例
194
-
195
- 我们提供了一个基于 **Vue 3 + Element Plus** 的完整集成示例项目，演示如何在实际业务系统中嵌入打印设计器。
196
188
 
197
- - **项目地址**：[https://github.com/0ldFive/vue-designer-sample](https://github.com/0ldFive/vue-designer-sample)
198
- - **技术栈**：Vue 3, TypeScript, Element Plus, Vite
199
- - **项目状态**：🚧 **建设中**（逐步完善更多业务场景）
200
189
 
201
190
  ## 项目结构
202
191
 
@@ -231,4 +220,4 @@ src/
231
220
 
232
221
  AGPL-3.0-only
233
222
 
234
- 品牌与 Logo 使用请遵循 [TRADEMARKS.md](https://github.com/0ldFive/Vue-Print-Designer/blob/master/TRADEMARKS.md)。如需移除或替换品牌标识，请参考 [COMMERCIAL_LICENSE.md](https://github.com/0ldFive/Vue-Print-Designer/blob/master/COMMERCIAL_LICENSE.md)。
223
+ 品牌与 Logo 使用请遵循 [TRADEMARKS.md](https://github.com/0ldFive/Vue-Print-Designer/blob/master/TRADEMARKS.md)。如需移除或替换品牌标识，请参考 [COMMERCIAL_LICENSE.md](https://github.com/0ldFive/Vue-Print-Designer/blob/master/COMMERCIAL_LICENSE.md)。
package/dist/{index.es-CEmFzBjq.js → index.es-DKZEo7bA.js} RENAMED
@@ -1,4 +1,4 @@
1
- import { c as Ga, _ as ca, R as ga, p as pl, a as Xe, r as _r } from "./web-component-Dt6wVDnY.js";
1
+ import { c as Ga, _ as ca, R as ga, p as pl, a as Xe, r as _r } from "./web-component-Lph2pubp.js";
2
2
  var za = {}, $a = {}, Qe, Wa;
3
3
  function W() {
4
4
  if (Wa) return Qe;
package/dist/print-designer.css CHANGED
@@ -1 +1 @@
1
- .print-renderer[data-v-7d814419]{padding:0}.animate-fade-in[data-v-3de6c8f6]{animation:fadeIn-3de6c8f6 .2s ease-out}@keyframes fadeIn-3de6c8f6{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}[data-v-43107376] .print-page{margin-bottom:20px;background:#fff;box-shadow:none!important;position:relative!important;left:auto!important;top:auto!important}[data-v-43107376] .print-page:last-child{margin-bottom:0}.preview-content[data-v-43107376] *{cursor:default!important}.resize-y[data-v-44208768]{resize:vertical}.custom-scrollbar[data-v-0bce654d]::-webkit-scrollbar{width:6px}.custom-scrollbar[data-v-0bce654d]::-webkit-scrollbar-track{background:transparent}.custom-scrollbar[data-v-0bce654d]::-webkit-scrollbar-thumb{background-color:#e5e7eb;border-radius:3px}.custom-scrollbar[data-v-0bce654d]::-webkit-scrollbar-thumb:hover{background-color:#d1d5db}.no-scrollbar[data-v-5a8ed346]{-ms-overflow-style:none;scrollbar-width:none}.no-scrollbar[data-v-5a8ed346]::-webkit-scrollbar{display:none}
1
+ .print-renderer[data-v-7d814419]{padding:0}.animate-fade-in[data-v-3de6c8f6]{animation:fadeIn-3de6c8f6 .2s ease-out}@keyframes fadeIn-3de6c8f6{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}[data-v-43107376] .print-page{margin-bottom:20px;background:#fff;box-shadow:none!important;position:relative!important;left:auto!important;top:auto!important}[data-v-43107376] .print-page:last-child{margin-bottom:0}.preview-content[data-v-43107376] *{cursor:default!important}.resize-y[data-v-44208768]{resize:vertical}.custom-scrollbar[data-v-5680016c]::-webkit-scrollbar{width:6px}.custom-scrollbar[data-v-5680016c]::-webkit-scrollbar-track{background:transparent}.custom-scrollbar[data-v-5680016c]::-webkit-scrollbar-thumb{background-color:#e5e7eb;border-radius:3px}.custom-scrollbar[data-v-5680016c]::-webkit-scrollbar-thumb:hover{background-color:#d1d5db}.no-scrollbar[data-v-177efb4d]{-ms-overflow-style:none;scrollbar-width:none}.no-scrollbar[data-v-177efb4d]::-webkit-scrollbar{display:none}
package/dist/print-designer.es.js CHANGED
@@ -1,4 +1,4 @@
1
- import { P as n } from "./web-component-Dt6wVDnY.js";
1
+ import { P as n } from "./web-component-Lph2pubp.js";
2
2
  export {
3
3
  n as PrintDesignerElement
4
4
  };