operp-print-designer 1.0.8 → 1.0.9

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/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,67 @@
+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;
+    };
+    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/store/index.d.ts

@@ -0,0 +1,33 @@
+import { CanvasComponent, CanvasComponentType, PageSettings, GridSettings, DataSource, TableColumnConfig } from '../types';
+export interface DesignerStore {
+    components: CanvasComponent[];
+    selectedId: string | null;
+    pageSettings: PageSettings;
+    gridSettings: GridSettings;
+    previewVisible: boolean;
+    templateName: string;
+    headerFooterVisible: boolean;
+    dataSources: DataSource[];
+    activeDataSourceId: string | null;
+    addComponent: (type: CanvasComponentType, x?: number, y?: number) => void;
+    updateComponent: (id: string, props: Partial<CanvasComponent>) => void;
+    selectComponent: (id: string | null) => void;
+    removeComponent: (id: string) => void;
+    setComponents: (components: CanvasComponent[]) => void;
+    setPageSettings: (settings: Partial<PageSettings>) => void;
+    setPreviewVisible: (visible: boolean) => void;
+    setTemplateName: (name: string) => void;
+    setHeaderFooterVisible: (visible: boolean) => void;
+    addDataSource: (name: string, type: 'object' | 'array', data: string) => void;
+    updateDataSource: (id: string, updates: Partial<Omit<DataSource, 'id' | 'createdAt'>>) => void;
+    removeDataSource: (id: string) => void;
+    setActiveDataSourceId: (id: string | null) => void;
+    updateComponentTableColumns: (compId: string, columns: TableColumnConfig[]) => void;
+    /** 获取导出用的模板 JSON 字符串 */
+    exportJSON: () => string;
+    /** 从 JSON 字符串导入模板，返回 null 表示成功，返回 string 表示错误信息 */
+    importJSON: (jsonStr: string) => string | null;
+    /** 重置整个设计 */
+    reset: () => void;
+}
+export declare const useDesignerStore: import("zustand").UseBoundStore<import("zustand").StoreApi<DesignerStore>>;

package/dist/types/index.d.ts

@@ -0,0 +1,82 @@
+export type CanvasComponentType = 'text' | 'image' | 'table' | 'barcode' | 'line';
+export interface DataBinding {
+    /** 绑定的数据源 ID */
+    dataSourceId?: string;
+    /** 绑定的字段路径（支持点号，如 user.name） */
+    fieldPath?: string;
+    /** 原始静态值（当未绑定数据时使用） */
+    staticValue: string;
+}
+export type DataBindingConfig = DataBinding;
+export interface TableColumnConfig {
+    /** 列标题 */
+    title: string;
+    /** 绑定的字段路径 */
+    fieldPath?: string;
+    /** 列宽（可选） */
+    width?: number;
+    /** 是否可编辑 */
+    editable?: boolean;
+}
+export interface CanvasComponent {
+    id: string;
+    type: CanvasComponentType;
+    /** 在 react-grid-layout 中的网格单位 */
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    /** 组件自定义属性 */
+    props: Record<string, unknown>;
+    /** 表格组件专用：列配置 */
+    tableColumns?: TableColumnConfig[];
+}
+export type DataSourceType = 'object' | 'array';
+export interface DataSource {
+    id: string;
+    name: string;
+    type: DataSourceType;
+    /** JSON 字符串存储 */
+    data: string;
+    /** 创建时间戳 */
+    createdAt: number;
+}
+export type PaperSizePreset = 'A4' | 'A3' | 'A5' | 'Letter' | 'Legal' | 'custom';
+export type Orientation = 'portrait' | 'landscape';
+export interface PageSettings {
+    paperSize: PaperSizePreset;
+    /** 自定义纸张 - mm */
+    customWidth: number;
+    customHeight: number;
+    orientation: Orientation;
+    /** 页边距 - mm */
+    marginTop: number;
+    marginRight: number;
+    marginBottom: number;
+    marginLeft: number;
+    /** 是否显示页眉 */
+    showHeader: boolean;
+    /** 页眉内容 */
+    headerContent: string;
+    /** 是否显示页脚 */
+    showFooter: boolean;
+    /** 页脚内容 */
+    footerContent: string;
+    /** 是否显示页码 */
+    showPageNumber: boolean;
+    /** 页码格式，{page} 替换为当前页 */
+    pageNumberFormat: string;
+}
+export interface GridSettings {
+    /** 每格像素大小 */
+    cellSize: number;
+    /** 列数 */
+    cols: number;
+}
+export interface TemplateData {
+    version: string;
+    templateName: string;
+    pageSettings: PageSettings;
+    components: Omit<CanvasComponent, 'id'>[];
+    dataSources: Omit<DataSource, 'id'>[];
+}

package/dist/utils/dataHelper.d.ts

@@ -0,0 +1,26 @@
+import { DataSource, TableColumnConfig, CanvasComponent } from '../types';
+/**
+ * 安全解析 JSON 字符串
+ */
+export declare function safeParseJSON(jsonStr: string): any;
+/**
+ * 获取组件属性的渲染值（支持数据绑定）
+ */
+export declare function getRenderValue(comp: CanvasComponent, propName: string, dataSources: DataSource[]): string;
+/**
+ * 通过路径获取对象属性值
+ * 例如：obj = {a: {b: 123}}, path = 'a.b' -> return 123
+ */
+export declare function getValueByPath(obj: any, path?: string): string;
+/**
+ * 从数据源获取对象数据
+ */
+export declare function getObjectFromDataSource(dataSource: DataSource): Record<string, any> | null;
+/**
+ * 从数据源获取数组数据
+ */
+export declare function getArrayFromDataSource(dataSource: DataSource): any[] | null;
+/**
+ * 渲染表格行
+ */
+export declare function renderTableRow(item: any, columns: TableColumnConfig[]): string[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "operp-print-designer",
   "private": false,
-  "version": "1.0.8",
+  "version": "1.0.9",
   "type": "module",
   "description": "一个功能强大的打印模板设计器组件，支持拖拽、数据绑定和打印预览",
   "main": "./dist/operp-print-designer.umd.js",
@@ -12,18 +12,18 @@
   ],
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/operp-print-designer.es.js",
-      "require": "./dist/operp-print-designer.umd.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/operp-print-designer.umd.js"      
     },
     "./dist/operp-print-designer.css": "./dist/operp-print-designer.css"
   },
   "style": "./dist/operp-print-designer.css",
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "vite build && tsc -p tsconfig.lib.json",
     "preview": "vite preview",
-    "build:lib": "tsc -p tsconfig.lib.json && vite build"
+    "build:lib": "vite build && tsc -p tsconfig.lib.json"
   },
   "keywords": [
     "print",