x-print-designer 0.0.1 → 0.0.2

package/README.md

@@ -1,4 +1,103 @@
-基于Vue Print Designer 做的二开插件
+# X-Print-Designer
 
+基于Vue Print Designer的二开插件
 
-新增echarts图表组件
+## 插件简介
+
+本插件是一款功能强大的打印设计器，集成了Vue 3和TypeScript开发的环境，新增了ECharts图表组件，支持多种元素类型和数据绑定方式。
+
+## 新增功能
+
+### ECharts图表组件
+
+支持以下图表类型：
+- **柱状图（Bar）**：展示分类数据的数值大小
+- **折线图（Line）**：展示数据趋势变化
+- **饼图（Pie）**：展示数据的占比分布
+- **环形图（Doughnut）**：展示数据的占比分布（带中心镂空）
+- **面积图（Area）**：展示数据趋势变化（带填充效果）
+
+图表支持特性：
+- 自定义标题、图例、提示框
+- 自定义坐标轴标题和标签样式
+- 显示数据标签
+- 自定义颜色配置
+- 支持自定义ECharts选项
+
+## 支持的元素类型
+
+| 元素类型 | 说明 | 数据支持 |
+|---------|------|---------|
+| 文本（Text） | 显示静态文本或变量内容 | 静态内容 / 变量引用 |
+| 图片（Image） | 显示图片 | 静态URL / 变量引用 |
+| 表格（Table） | 展示数据表格 | 静态数据 / 数据变量 |
+| 条形码（Barcode） | 生成条形码 | 变量引用 |
+| 二维码（QRCode） | 生成二维码 | 变量引用 |
+| 图表（Chart） | ECharts图表展示 | 静态数据 / 数据变量 |
+| 线条（Line） | 绘制直线 | - |
+| 矩形（Rect） | 绘制矩形 | - |
+| 圆形（Circle） | 绘制圆形 | - |
+| 页码（PageNumber） | 显示页码信息 | - |
+
+## 数据使用方式
+
+### 1. 静态数据配置
+
+直接在元素属性面板中输入静态内容，适用于固定不变的数据。
+
+### 2. 变量数据绑定
+
+使用变量语法引用外部数据，支持两种格式：
+
+| 语法格式 | 示例 | 说明 |
+|---------|------|------|
+| `@变量名` | `@customerName` | 使用@符号开头 |
+| `{#变量名}` | `{#order.total}` | 使用{#}包裹 |
+
+变量支持嵌套访问，例如 `{#order.details[0].productName}`。
+
+### 3. 数组数据处理
+
+对于表格和图表组件，支持绑定数组类型数据：
+
+**表格数据格式示例：**
+```json
+{
+  "tableData": [
+    { "name": "产品A", "price": 100, "quantity": 2 },
+    { "name": "产品B", "price": 200, "quantity": 3 }
+  ]
+}
+```
+
+**图表数据格式示例：**
+```json
+{
+  "chartData": [
+    { "category": "一月", "value": 1200 },
+    { "category": "二月", "value": 1500 },
+    { "category": "三月", "value": 1800 }
+  ]
+}
+```
+
+### 4. 表格高级功能
+
+表格组件支持以下高级功能：
+- **列数据变量**：动态绑定表格列数据
+- **页脚数据变量**：显示表格汇总信息
+- **自定义脚本**：使用脚本处理数据转换
+- **自动分页**：数据过多时自动分页显示
+- **页脚重复**：每页重复显示页脚
+
+## 测试数据
+
+在设计器中编辑时，系统会根据元素配置自动生成测试数据用于预览。您也可以在设计器中手动编辑测试数据，以便更好地预览各种数据情况下的打印效果。
+
+## 技术栈
+
+- Vue 3
+- TypeScript
+- ECharts 5
+- Pinia（状态管理）
+- Tailwind CSS