@data_wise/hyper-markdown 1.1.4 → 1.1.6

package/README.md

@@ -77,6 +77,39 @@ export default {
 | `defaultShowEditor` | Boolean | `true` | 编辑器初始显示状态（仅在 editable 为 true 时有效） |
 | `datasource` | Object | - | 数据源配置对象（可选） |
 
+### 组件事件
+
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| `update:content` | `(content: string)` | 内容更新时触发 |
+| `errors` | `(errors: Array)` | 渲染错误时触发，返回错误数组 |
+
+#### 错误对象格式
+
+```javascript
+{
+  line: 10,              // 错误所在行号
+  type: 'ECharts',       // 错误类型：ECharts, Dataset, Mermaid, Container
+  message: '配置错误',    // 错误描述
+  code: '```echarts...',  // 相关代码片段
+  severity: 'error'      // 错误级别
+}
+```
+
+#### 错误收集说明
+
+组件会自动收集以下类型的渲染错误：
+
+- **ECharts 错误**：图表配置错误、数据格式错误等
+- **Mermaid 错误**：流程图语法错误
+- **Dataset 错误**：数据集格式错误、数据源查询失败等
+- **Container 错误**：容器配置错误（如 cell 宽度超出范围）
+
+错误会在渲染完成后自动收集，并通过 `@errors` 事件传递给外部。你可以：
+
+1. **监听事件**：`@errors="handleErrors"` 实时获取错误
+2. **主动获取**：`this.$refs.editor.getErrors()` 获取当前错误列表
+
 ### 基础用法
 
 ```vue
@@ -85,6 +118,7 @@ export default {
     <MarkdownEditor 
       :content="markdownContent" 
       :editable="true"
+      @errors="handleErrors"
     />
   </div>
 </template>
@@ -101,6 +135,17 @@ export default {
     return {
       markdownContent: '# 欢迎使用 Hyper Markdown'
     }
+  },
+  methods: {
+    handleErrors(errors) {
+      // 处理渲染错误
+      if (errors.length > 0) {
+        console.log('发现渲染错误:', errors)
+        errors.forEach(error => {
+          console.error(`第 ${error.line} 行 [${error.type}]: ${error.message}`)
+        })
+      }
+    }
   }
 }
 </script>
@@ -316,6 +361,29 @@ graph TD
 ```
 ````
 
+#### ⚠️ 使用 dataset + encode 时的注意事项
+
+使用 `dataset` + `encode` 时，formatter 必须用**函数形式**，字符串模板会显示 `[object Object]`：
+
+````markdown
+```echarts
+{
+  dataset: dataset['sales_data'],
+  series: [{
+    type: "pie",
+    encode: { itemName: "产品", value: "销量" },
+    label: {
+      // ❌ 错误：formatter: "{b}: {c}次 ({d}%)"
+      // ✅ 正确：使用函数
+      formatter: function(params) {
+        return params.data['产品'] + ': ' + params.data['销量'] + '次 (' + params.percent + '%)';
+      }
+    }
+  }]
+}
+```
+````
+
 ### 4. SQL 数据源查询
 
 支持从数据源查询数据，需要先注入 `datasource` 属性：