Tauri 工业HMI前端指令与工具集
npm install hmi_vue3_tauri_lib_v2
Vue 3 + Tauri 的工业 HMI 前后端组合包，封装 Modbus TCP/RTU、Snap7（西门子）、三菱 MC/TCP 任务队列、事件桥接与工业化指令。内置长连接复用、自动重连与页面任务守卫，配套 TypeScript 类型和示例，开箱即可做工业监控界面。
> 演示视图仅保留占位说明，实际接入时替换设备配置并按需引入指令或 API 即可。
- Vue 指令：v-工业按钮、v-工业输入框、v-原始字节按钮，涵盖切换/置位/复归/读写/报文字节发送等场景。
- 任务管理 API：添加/批量添加 Modbus 任务，清理指定来源或当前页面任务，便捷封装读写寄存器/线圈函数。
- 事件桥接：后端线圈、寄存器、设备状态、原始字节结果实时推送到前端，支持 DOM 事件监听与程序化订阅。
- 页面任务守卫：路由守卫自动清理页面任务并同步标题，可自定义后缀、默认标题与日志开关。
- 长连接池：Snap7 与三菱 MC/TCP 按 IP/端口（Snap7 含机架/插槽）复用连接，失败自动剔除并重建。
1) 安装依赖
``bash`
npm install hmi_vue3_tauri_lib_v2
2) 在入口启用插件、路由与事件桥接（自动初始化可按需关闭）
`typescript
// main.ts（参考 使用示例/跨项目前端示例/外部项目入口示例.ts）
import { createApp } from "vue";
import { createRouter, createWebHistory } from "vue-router";
import App from "./App.vue";
import 工业HMI插件, {
初始化事件桥接,
注册页面任务守卫,
设置全局路由引用,
} from "hmi_vue3_tauri_lib_v2";
import "hmi_vue3_tauri_lib_v2/style.css";
const 路由器 = createRouter({
history: createWebHistory(),
routes: [
{
path: "/",
name: "首页",
component: () => import("./视图/首页.vue"),
meta: { 标题: "车间概览" },
},
],
});
const 应用 = createApp(App);
应用.use(工业HMI插件); // 若要手动初始化事件桥接，可传 { 自动初始化事件桥接: false }
应用.use(路由器);
注册页面任务守卫(路由器, {
默认标题: "工业监控系统",
标题后缀: " - 中控",
输出日志: true,
});
设置全局路由引用(路由器);
// 仅在关闭自动初始化时需要手动调用
// await 初始化事件桥接();
应用.mount("#app");
`
3) 在组件中使用指令与 API（摘自 使用示例/跨项目前端示例/示范工业面板.vue）
` 设备状态：{{ 设备状态 }}，当前温度：{{ 当前温度.toFixed(1) }}°Cvue
`
文件需放在运行目录根部，命名保持 设备配置-TCP.json / 设备配置-RTU.json：
`jsonc`
// Modbus TCP
[
{ "设备名称型号": "车床PLC-tcp", "服务器地址": "192.168.1.100", "端口": 502, "从站地址": 1 }
]
`jsonc`
// Modbus RTU
[
{ "设备名称型号": "车床PLC-rtu", "串口": "COM3", "波特率": 9600, "从站地址": 1, "数据位": 8, "停止位": 1, "校验": "None" }
]
`jsonc`
// 西门子 Snap7（协议: "snap7"）
[
{
"设备名称型号": "西门子PLC",
"服务器地址": "192.168.1.10",
"协议": "snap7",
"tcp端口": 102,
"机架": 0,
"插槽": 1,
"超时毫秒": 2000,
"区域": "DB",
"db号": 1,
"起始偏移": 0,
"字节序": "CDAB"
}
]
`jsonc`
// 三菱 MC/TCP（协议: "mc"，单条配置线圈区域仅能选 X/Y/M 之一）
[
{
"设备名称型号": "三菱PLC",
"服务器地址": "192.168.1.20",
"协议": "mc",
"端口": 6000,
"帧格式": "E4Tcp",
"寄存器区域": "D",
"线圈区域": "X",
"字节序": "CDAB"
}
]
长连接池会按 IP/端口（Snap7 含机架/插槽）复用并自动重连，与设备名称无关。
1) 添加依赖与可选特性（Snap7/MC 默认启用，可通过 default-features = false 精简）
`toml`
[dependencies]
hmi_vue3_tauri_lib_v2 = { version = "1.0.20", features = ["snap7", "mc"] }
tauri = { version = "2", features = [] }
2) 在 src/main.rs 注册插件与命令（新版不再提供 run() / 创建应用构建器() / 附加工业能力()）
`rust
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
fn main() {
tauri::Builder::default()
.plugin(hmi_vue3_tauri_lib_v2::init())
.plugin(tauri_plugin_opener::init())
.invoke_handler(hmi_vue3_tauri_lib_v2::命令处理器())
.run(tauri::generate_context!())
.expect("运行Tauri应用时发生错误");
}
`
- 设备配置文件需与可执行文件同级；缺失会阻止应用启动。
- 若你已有 invoke_handler，将 添加Modbus任务 与 清除指定来源任务 合并到同一个 generate_handler! 即可。
`typescript
import {
添加读取保持寄存器任务,
添加写入单个寄存器任务,
添加原始字节任务,
添加Modbus任务,
清除当前页面任务,
Modbus操作类型,
} from "hmi_vue3_tauri_lib_v2";
await 添加读取保持寄存器任务({ 设备名称型号: "车床PLC", 起始地址: 300, 数量: 4 });
await 添加写入单个寄存器任务({ 设备名称型号: "车床PLC", 寄存器地址: 310, 数值: 1200 });
await 添加原始字节任务({ 设备名称型号: "车床PLC", 数据: [0x01, 0x03, 0x00, 0x2C, 0x00, 0x02] });
await 添加Modbus任务({
设备名称型号: "车床PLC",
操作: { 操作类型: Modbus操作类型.读取线圈, 起始地址: 100, 数量: 4 },
});
await 清除当前页面任务();
`
事件桥接导出 线圈状态事件名称、保持寄存器事件名称、设备状态事件名称，可直接用 window.addEventListener 订阅。
- 安装依赖：npm install
- 前端开发：
- Tauri 调试（启用 Snap7 + MC 特性）：
- 仅构建前端站点：
- 打包 npm 库（类型 + 产物）：
- Rust 检查/发布：，cargo publish（如需）
前置：仓库根目录已 npm install，Rust 工具链已可用，且已登录 npm / crates.io。
1) 发布前端 npm 包
`bash生成类型与产物
npm run build:lib
2) 发布 Rust crate（后端插件）
bash
cd src-tauri
cargo publish
`3) 如需产出桌面应用（可选）
bash
npm run tauri build
`📁 示例与目录索引
-
：独立 Vue 入口与完整面板示例，可拷贝复用。
- 使用示例/跨项目Tauri集成示例/：最小 Tauri 工程，演示如何在外部项目中依赖本 crate。
- src/视图/：示范页面骨架；src/工具函数/：指令、事件桥接、任务守卫与 API 实现。
- src-tauri/src/：Rust 插件、命令接口、事件派发与循环队列。📄 许可证
MIT License，详见
LICENSE`。