@nywqs/scada-engine 1.1.11 → 1.1.12

package/README.md

@@ -2,16 +2,18 @@
 
 基于 AntV X6 + Vue 3 的自研 SCADA 组态引擎
 
-## ✨ 特性
+## 特性
 
-- 🎨 **可视化编辑器** - 拖拽式组态界面设计
-- 📦 **丰富组件库** - 内置基础图形、IoT组件、图表等
-- 🔗 **数据绑定** - 支持设备数据点绑定和实时更新
-- ⚡ **事件系统** - 灵活的事件配置和交互响应
-- 🎯 **TypeScript** - 完整的类型定义支持
-- 📱 **响应式** - 基于 Vue 3 Composition API
+- 可视化编辑器：拖拽式组态界面设计
+- 丰富组件库：内置基础图形、IoT组件、图表等
+- 数据绑定：支持设备数据点绑定和实时更新
+- 事件系统：灵活的事件配置和交互响应
+- TypeScript：完整的类型定义支持
+- 响应式：基于 Vue 3 Composition API
+- 动画引擎：支持节点和连线动画效果
+- 预览模式：支持编辑模式和预览模式切换
 
-## 📦 安装
+## 安装
 
 ```bash
 npm install @nywqs/scada-engine
@@ -29,7 +31,7 @@ yarn add @nywqs/scada-engine
 npm install vue@^3.4.0 vue-router@^4.6.0 @antv/x6@^2.18.0 echarts@^5.5.0 pinia@^2.1.0
 ```
 
-## 🚀 快速开始
+## 快速开始
 
 ### 全局注册
 
@@ -69,26 +71,50 @@ const handleNodeUpdate = (data: any) => {
 </script>
 ```
 
-## 📚 组件列表
+## 组件列表
 
 ### 核心组件
 
-- `ScadaCanvas` - 画布组件（核心）
-- `PropertyPanel` - 属性面板
-- `ComponentLibrary` - 组件库面板
-- `CanvasConfigPanel` - 画布配置面板
-- `Header` - 顶部工具栏
-- `PreviewView` - 预览视图
+- `ScadaCanvas`：画布组件（核心），支持编辑和预览模式
+- `PropertyPanel`：属性面板，配置节点和连线属性
+- `ComponentLibrary`：组件库面板，拖拽添加组件
+- `CanvasConfigPanel`：画布配置面板
+- `Header`：顶部工具栏
 
 ### 辅助组件
 
-- `BindingCard` - 数据绑定卡片
-- `EventCard` - 事件配置卡片
-- `BasicPropertiesTab` - 基础属性标签页
-- `AttributeConfigDialog` - 属性配置对话框
-- `CustomCodeDialog` - 自定义代码对话框
-
-## 🔧 API
+- `BindingCard`：数据绑定卡片，配置设备数据点绑定
+- `EventCard`：事件配置卡片，配置交互事件
+- `BasicPropertiesTab`：基础属性标签页
+- `DataPropertiesTab`：数据属性标签页
+- `EdgePropertiesTab`：连线属性标签页
+- `AttributeConfigDialog`：属性配置对话框
+- `CustomCodeDialog`：自定义代码对话框
+- `DevicePointSelector`：设备数据点选择器
+- `MappingConfigurator`：映射配置器
+- `WorkflowSelectorDialog`：流程选择对话框
+
+### 内置组件库
+
+#### 基础组件（basic）
+- 矩形（rect）
+- 圆形（circle）
+- 文本（text）
+
+#### IoT组件（iot）
+- 仪表盘（gauge）：支持ECharts仪表盘展示
+- 指示灯（light）：支持开关状态指示
+- 开关（switch）：支持设备控制
+
+#### 画布配置
+- 画布尺寸：支持多种预设尺寸（1920x1080、1366x768等）
+- 背景设置：支持颜色、图片背景
+- 网格配置：支持网格显示、类型、大小设置
+- 缩放控制：支持画布缩放
+- 参考线：支持对齐参考线
+- 磁吸功能：支持节点磁吸对齐
+
+## API
 
 ### ScadaCanvas 组件 API
 
@@ -254,7 +280,7 @@ import type {
 } from '@nywqs/scada-engine'
 ```
 
-## 📝 使用示例
+## 使用示例
 
 ### 完整编辑器应用
 
@@ -323,27 +349,27 @@ const handlePreview = () => {
 
 本软件默认在底部显示版权信息。如需隐藏或修改版权信息，必须获取授权码。
 
-#### 1. 获取授权码
+#### 获取授权码
 
-**方式一：联系作者**
-- 📧 邮箱：nywqs@outlook.com
-- 📱 电话：18637762001
+**联系作者**
+- 邮箱：nywqs@outlook.com
+- 电话：18637762001
 
-**方式二：使用授权码生成工具**
+**使用授权码生成工具**
 
 打开项目根目录下的 `authcode-generator.html` 文件，在浏览器中生成授权码：
 
 ```bash
-# 1. 打开授权码生成工具
+# 打开授权码生成工具
 open authcode-generator.html  # macOS
 start authcode-generator.html  # Windows
 xdg-open authcode-generator.html  # Linux
 
-# 2. 或使用命令行工具（Node.js）
+# 或使用命令行工具（Node.js）
 node src/utils/authkey_tool.js <公司名称>
 ```
 
-#### 2. 使用授权码
+#### 使用授权码
 
 ```vue
 <template>
@@ -353,7 +379,7 @@ node src/utils/authkey_tool.js <公司名称>
 </template>
 ```
 
-#### 3. 自定义 Footer 信息（需授权）
+#### 自定义 Footer 信息（需授权）
 
 ```vue
 <template>
@@ -368,26 +394,53 @@ node src/utils/authkey_tool.js <公司名称>
 </template>
 ```
 
-**授权模式说明：**
-- ❌ 不提供 `authCode`：显示默认版权信息
-- ✅ 有效 `authCode` + 无 `customFooter`：隐藏 Footer
-- ✅ 有效 `authCode` + `customFooter`：显示自定义 Footer
+**授权模式说明**
+- 不提供 authCode：显示默认版权信息
+- 有效 authCode + 无 customFooter：隐藏 Footer
+- 有效 authCode + customFooter：显示自定义 Footer
 
-**授权信息解密：**
+**授权信息解密**
 
-授权码采用 **AES-256-CBC + OpenSSL** 格式加密，可解密出：
+授权码采用 AES-256-CBC + OpenSSL 格式加密，可解密出：
 - 公司/授权名称
 - 有效期（可选）
 - 机器码绑定（可选）
 
 控制台会输出授权验证信息：
 ```javascript
-✅ 授权验证成功
-🏛️ 授权公司: leoncheng
-📅 有效期至: 2026-12-17
+授权验证成功
+授权公司: leoncheng
+有效期至: 2026-12-17
+```
+
+## 预览模式
+
+ScadaCanvas 组件支持预览模式，用于在运行时展示组态画面：
+
+```vue
+<template>
+  <ScadaCanvas 
+    :preview-mode="true"
+    :auth-code="authCode"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { ScadaCanvas } from '@nywqs/scada-engine'
+
+const authCode = ref('your-auth-code')
+
+// 预览模式特性：
+// 1. 隐藏编辑工具栏和组件库
+// 2. 禁止节点移动和编辑
+// 3. 仅显示画布和组件
+// 4. 支持动画自动播放
+// 5. 支持实时数据更新
+</script>
 ```
 
-## 🔨 开发
+## 开发
 
 ```bash
 # 克隆项目
@@ -403,7 +456,7 @@ npm run dev
 npm run build:lib
 ```
 
-## 📄 发布到 npm
+## 发布到 npm
 
 ```bash
 # 1. 登录 npm
@@ -422,17 +475,33 @@ npm version major  # 主版本 1.0.0 -> 2.0.0
 npm publish
 ```
 
-## 📋 版本管理建议
+## 版本管理建议
+
+- patch (1.0.x)：Bug 修复、小改进
+- minor (1.x.0)：新功能、向后兼容
+- major (x.0.0)：破坏性更新、重大重构
+
+## 版本历史
+
+### 1.1.11 (2025-12-30)
+- 修复预览按钮事件触发问题
+- 优化路由跳转逻辑
+- 添加详细调试日志
+
+### 1.1.10 (2025-12-30)
+- 添加预览事件支持
+- 优化事件触发机制
 
-- **patch** (1.0.x): Bug 修复、小改进
-- **minor** (1.x.0): 新功能、向后兼容
-- **major** (x.0.0): 破坏性更新、重大重构
+### 1.0.0
+- 初始版本发布
+- 基础组态编辑功能
+- 支持基础组件和IoT组件
 
-## 🤝 贡献
+## 贡献
 
 欢迎提交 Issue 和 Pull Request！
 
-## 📜 许可协议
+## 许可协议
 
 **版权所有 © 2025 leoncheng**
 
@@ -445,7 +514,7 @@ npm publish
 
 如需商业使用，请联系作者获取授权。
 
-## 👨‍💻 作者
+## 作者
 
 **leoncheng**
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nywqs/scada-engine",
-  "version": "1.1.11",
+  "version": "1.1.12",
   "description": "自研 SCADA 组态引擎 - 基于 AntV X6",
   "type": "module",
   "main": "./dist/scada-engine.umd.js",