operp-print-designer 1.0.8 → 1.1.0

package/README.md

@@ -1,4 +1,6 @@
-# Print Designer 使用文档
+# Operp Print Designer 使用文档
+
+**Git 仓库地址**: https://gitee.com/garychk/operp-react-print
 
 ## 安装
 
@@ -87,7 +89,7 @@ interface DataSource {
 ### CanvasComponent
 
 ```typescript
-type CanvasComponentType = 'text' | 'image' | 'table' | 'barcode' | 'line';
+type CanvasComponentType = 'text' | 'image' | 'table' | 'barcode' | 'qrcode' | 'line';
 
 interface CanvasComponent {
   id: string;
@@ -274,7 +276,7 @@ import 'operp-print-designer/dist/index.css';
 2. **TypeScript**: 该库使用 TypeScript 编写，自带类型定义。
 
 3. **数据绑定**: 数据源支持对象和数组两种类型：
-   - **对象类型**: 适用于文本、条码、图片等组件的数据绑定
+   - **对象类型**: 适用于文本、图片、条码、二维码等组件的数据绑定
    - **数组类型**: 适用于表格组件的数据绑定
 
 4. **预览模式**: 当 `isPreview` 为 `true` 时，组件处于只读模式，用户不能编辑模板，只能预览和打印。

package/dist/components/Barcode.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+/** 简易条形码渲染组件（使用Canvas绘制） */
+interface BarcodeProps {
+    value: string;
+    format: string;
+}
+declare const Barcode: React.FC<BarcodeProps>;
+export default Barcode;

package/dist/components/Canvas.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import 'react-grid-layout/css/styles.css';
+import 'react-resizable/css/styles.css';
+declare const Canvas: React.FC<{
+    isPreview?: boolean;
+}>;
+export default Canvas;

package/dist/components/ComponentPanel.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ComponentPanel: React.FC;
+export default ComponentPanel;

package/dist/components/DataSourcePanel.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const DataSourcePanel: React.FC;
+export default DataSourcePanel;

package/dist/components/HeaderFooterDialog.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const HeaderFooterDialog: React.FC;
+export default HeaderFooterDialog;

package/dist/components/LeftPanel.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const LeftPanel: React.FC;
+export default LeftPanel;

package/dist/components/PageSettings.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const PageSettings: React.FC;
+export default PageSettings;

package/dist/components/PrintDesigner/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TemplateData } from '../../types';
+export interface PrintDesignerProps {
+    /** 是否为预览模式（只读） */
+    isPreview?: boolean;
+    /** 初始模板数据 */
+    initialTemplateData?: TemplateData;
+    /** 保存回调 */
+    onSave?: (templateData: TemplateData) => void;
+    /** 打印回调 */
+    onPrint?: () => void;
+}
+declare const PrintDesigner: React.FC<PrintDesignerProps>;
+export default PrintDesigner;

package/dist/components/PrintPreview.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const PrintPreview: React.FC;
+export default PrintPreview;

package/dist/components/PropertyPanel.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const PropertyPanel: React.FC;
+export default PropertyPanel;

package/dist/components/QRCode.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface QRCodeProps {
+    value: string;
+    errorLevel?: 'L' | 'M' | 'Q' | 'H';
+    color?: string;
+    backgroundColor?: string;
+}
+declare const QRCode: React.FC<QRCodeProps>;
+export default QRCode;

package/dist/components/Toolbar.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface ToolbarProps {
+    /** 自定义保存回调 */
+    onCustomSave?: () => void;
+    /** 自定义打印回调 */
+    onCustomPrint?: () => void;
+}
+declare const Toolbar: React.FC<ToolbarProps>;
+export default Toolbar;

package/dist/constants/index.d.ts

@@ -0,0 +1,74 @@
+import { PaperSizePreset } from '../types';
+/** 纸张预设尺寸 - 宽高 mm (portrait) */
+export declare const PAPER_SIZES: Record<Exclude<PaperSizePreset, 'custom'>, {
+    width: number;
+    height: number;
+}>;
+/** 默认页面设置 */
+export declare const DEFAULT_PAGE_SETTINGS: {
+    paperSize: PaperSizePreset;
+    customWidth: number;
+    customHeight: number;
+    orientation: "portrait";
+    marginTop: number;
+    marginRight: number;
+    marginBottom: number;
+    marginLeft: number;
+    showHeader: boolean;
+    headerContent: string;
+    showFooter: boolean;
+    footerContent: string;
+    showPageNumber: boolean;
+    pageNumberFormat: string;
+};
+/** 缩放系数: 1mm 对应的像素 */
+export declare const MM_TO_PX_RATIO = 3;
+/** 默认网格设置 */
+export declare const DEFAULT_GRID_SETTINGS: {
+    cellSize: number;
+    cols: number;
+};
+/** 组件类型中文名 */
+export declare const COMPONENT_TYPE_LABELS: Record<string, string>;
+/** 组件类型默认属性 */
+export declare const COMPONENT_DEFAULTS: {
+    text: {
+        content: string;
+        fontSize: number;
+        fontWeight: "normal";
+        fontStyle: "normal";
+        textAlign: "left";
+        color: string;
+        backgroundColor: string;
+    };
+    image: {
+        src: string;
+        fit: "contain";
+        content: string;
+    };
+    table: {
+        rows: number;
+        cols: number;
+        borderWidth: number;
+        borderColor: string;
+        content: string;
+    };
+    barcode: {
+        value: string;
+        format: "CODE128";
+        content: string;
+    };
+    qrcode: {
+        value: string;
+        errorLevel: "M";
+        color: string;
+        backgroundColor: string;
+        content: string;
+    };
+    line: {
+        color: string;
+        thickness: number;
+        style: "solid";
+        content: string;
+    };
+};

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import PrintDesigner from './components/PrintDesigner';
+export default PrintDesigner;
+export { PrintDesigner };
+export type { PrintDesignerProps } from './components/PrintDesigner';
+export type { CanvasComponent, CanvasComponentType, PageSettings, GridSettings, TemplateData, DataSource, DataSourceType, TableColumnConfig, DataBinding, DataBindingConfig, } from './types';
+export { getRenderValue, getObjectFromDataSource, getArrayFromDataSource, safeParseJSON, getValueByPath, } from './utils/dataHelper';
+export { useDesignerStore } from './store';

package/dist/operp-print-designer.css

@@ -1 +1 @@
-*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.app-container{display:flex;flex-direction:column;height:100vh;overflow:hidden}.app-body{display:flex;flex:1;overflow:hidden}.app-left-panel{width:280px;min-width:220px;display:flex;flex-direction:column;border-right:1px solid #e8e8e8;background:#fff;overflow:hidden}.app-left-top{flex-shrink:0}.app-left-bottom{flex:1;overflow:auto}.app-right-panel{width:260px;min-width:260px;border-left:1px solid #e8e8e8;background:#fff;overflow:auto}.canvas-grid{background-image:linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px);background-size:20px 20px}.react-grid-item.react-grid-placeholder{background:#1677ff!important;opacity:.15!important;border-radius:4px}.react-grid-layout{position:relative;transition:height .2s ease}.react-grid-item{transition:all .2s ease;transition-property:left,top,width,height}.react-grid-item img{pointer-events:none;-webkit-user-select:none;user-select:none}.react-grid-item.cssTransforms{transition-property:transform,width,height}.react-grid-item.resizing{transition:none;z-index:1;will-change:width,height}.react-grid-item.react-draggable-dragging{transition:none;z-index:3;will-change:transform}.react-grid-item.dropping{visibility:hidden}.react-grid-item.react-grid-placeholder{background:red;opacity:.2;transition-duration:.1s;z-index:2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.react-grid-item.react-grid-placeholder.placeholder-resizing{transition:none}.react-grid-item>.react-resizable-handle{position:absolute;width:20px;height:20px}.react-grid-item>.react-resizable-handle:after{content:"";position:absolute;right:3px;bottom:3px;width:5px;height:5px;border-right:2px solid rgba(0,0,0,.4);border-bottom:2px solid rgba(0,0,0,.4)}.react-resizable-hide>.react-resizable-handle{display:none}.react-grid-item>.react-resizable-handle.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-w,.react-grid-item>.react-resizable-handle.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-n,.react-grid-item>.react-resizable-handle.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}.react-resizable{position:relative}.react-resizable-handle{position:absolute;width:20px;height:20px;background-repeat:no-repeat;background-origin:content-box;box-sizing:border-box;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+);background-position:bottom right;padding:0 3px 3px 0}.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg)}.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg)}.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg)}.react-resizable-handle-w,.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize}.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-resizable-handle-n,.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}
+*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.app-container{display:flex;flex-direction:column;height:100vh;overflow:hidden}.app-body{display:flex;flex:1;overflow:hidden}.app-left-panel{position:relative;width:240px;min-width:220px;display:flex;flex-direction:column;border-right:1px solid #e8e8e8;background:#fff;overflow:hidden;transition:width .2s ease,min-width .2s ease}.app-left-top{flex-shrink:0}.app-left-bottom{flex:1;overflow:auto}.app-right-panel{position:relative;width:260px;min-width:260px;display:flex;flex-direction:column;border-left:1px solid #e8e8e8;background:#fff;overflow:auto;transition:width .2s ease,min-width .2s ease}.app-left-panel.collapsed,.app-right-panel.collapsed{width:40px;min-width:40px;align-items:center;justify-content:flex-start;overflow:hidden}.panel-collapse-trigger{position:absolute;top:8px;z-index:2;width:24px;height:24px;padding:0}.panel-collapse-trigger-left,.panel-collapse-trigger-right{right:8px}.panel-collapsed-trigger{width:32px;height:32px;margin-top:8px;padding:0}.canvas-grid{background-image:linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px);background-size:20px 20px}.react-grid-item.react-grid-placeholder{background:#1677ff!important;opacity:.15!important;border-radius:4px}.react-grid-layout{position:relative;transition:height .2s ease}.react-grid-item{transition:all .2s ease;transition-property:left,top,width,height}.react-grid-item img{pointer-events:none;-webkit-user-select:none;user-select:none}.react-grid-item.cssTransforms{transition-property:transform,width,height}.react-grid-item.resizing{transition:none;z-index:1;will-change:width,height}.react-grid-item.react-draggable-dragging{transition:none;z-index:3;will-change:transform}.react-grid-item.dropping{visibility:hidden}.react-grid-item.react-grid-placeholder{background:red;opacity:.2;transition-duration:.1s;z-index:2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.react-grid-item.react-grid-placeholder.placeholder-resizing{transition:none}.react-grid-item>.react-resizable-handle{position:absolute;width:20px;height:20px}.react-grid-item>.react-resizable-handle:after{content:"";position:absolute;right:3px;bottom:3px;width:5px;height:5px;border-right:2px solid rgba(0,0,0,.4);border-bottom:2px solid rgba(0,0,0,.4)}.react-resizable-hide>.react-resizable-handle{display:none}.react-grid-item>.react-resizable-handle.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-w,.react-grid-item>.react-resizable-handle.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-n,.react-grid-item>.react-resizable-handle.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}.react-resizable{position:relative}.react-resizable-handle{position:absolute;width:20px;height:20px;background-repeat:no-repeat;background-origin:content-box;box-sizing:border-box;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+);background-position:bottom right;padding:0 3px 3px 0}.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg)}.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg)}.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg)}.react-resizable-handle-w,.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize}.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-resizable-handle-n,.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}