# iot_protocol_toolbox **Repository Path**: road0329/iot_protocol_toolbox ## Basic Information - **Project Name**: iot_protocol_toolbox - **Description**: IoT Protocol Toolbox v4.0 — 即时转换 + 可扩展导航的纯前端协议工具箱 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-06-19 - **Last Updated**: 2026-07-05 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # IoT Protocol Toolbox > 物联网协议工具箱 — 纯前端 · 即时转换 · 零依赖 · 开箱即用 [![Gitee](https://img.shields.io/badge/Gitee-项目地址-red)](https://gitee.com/road0329/iot_protocol_toolbox) [![License](https://img.shields.io/badge/license-MIT-blue)](LICENSE) [![Online Demo](https://img.shields.io/badge/在线体验-点击访问-brightgreen)](http://101.35.144.246:24681/) --- ## 简介 IoT Protocol Toolbox 是一款面向物联网开发者的纯前端协议工具箱，**无需后端、无需安装、打开即用**。 项目采用 **Vite + 原生 JavaScript（ES6+）** 构建，代码规范参考 [协议报文在线解析工具](https://gitee.com/road0329/protocol-parser) 风格，模块化设计，易于扩展。 ### 核心特性 - 🚀 **即时转换** — 输入即出结果，无需点击按钮 - 🗂️ **可扩展导航** — 左侧分类导航，工具数量不限 - 📦 **零依赖运行** — 纯前端实现，打包后可直接部署到任意静态服务器 - 📊 **本地统计** — 基于 localStorage 的访问统计，无需后端 - ⌨️ **键盘友好** — Ctrl+Enter 复制结果，Esc 关闭弹窗 - 📱 **响应式布局** — 适配桌面端和移动端 - 🌐 **在线体验** — http://101.35.144.246:24681/ --- ## 内置工具 | 工具 | 功能 | 说明 | |------|------|------| | **HEX ↔ ASCII** | HEX 与 ASCII 互转 | 支持空格分隔的 HEX 字节输入 | | **时间戳转换** | 时间戳与日期互转 | 实时时钟面板，支持秒/毫秒 | | **Base64 编码/解码** | Base64 编解码 | 支持文本、文件、HEX、二进制、Data URI | | **DL/T645 协议** | +33 加密 / −33 解密 / 字节反转 | 符合 DL/T645 协议规范 | | **字符串处理** | 大小写/反转/加空格/去空格/分析 | 多种字符串操作 | | **进制转换** | 2/8/10/16 进制互转 | 支持任意进制 | | **JSON 格式化** | JSON 格式化与校验 | 交互式树形视图，支持节点折叠/展开 | | **XML 格式化** | XML 格式化与校验 | 交互式树形视图，支持节点折叠/展开 | | **AES 加解密** | AES 加密/解密 | 支持 ECB/CBC/CFB/OFB/CTR 模式，128/192/256 位密钥 | --- ## 快速开始 ### 在线使用 直接访问：http://101.35.144.246:24681/ 或下载 `dist/` 目录，用任意静态服务器打开 `index.html`。 ### 本地开发 ```bash # 克隆项目 git clone https://gitee.com/road0329/iot_protocol_toolbox.git cd iot_protocol_toolbox # 安装依赖 npm install # 启动开发服务器（支持热更新） npm run dev # 打包生产版本（输出到 dist/） npm run build # 预览打包结果 npm run preview ``` ### 部署 将 `dist/` 目录部署到任意静态服务器（Nginx、Apache、GitHub Pages、Gitee Pages 等）即可。 ```bash # 打包 npm run build # dist/ 目录即为最终部署文件 # 将其复制到服务器的 Web 目录即可 ``` --- ## 项目结构 ``` iot_protocol_toolbox/ ├── src/ # 源码目录（Vite 入口） │ ├── index.html # 入口 HTML（含所有工具面板） │ ├── css/ │ │ └── style.css # 全局样式（CSS 变量主题） │ └── js/ │ ├── app.js # 主入口（导航/模式切换/初始化） │ └── modules/ # 功能模块（ES6 Module） │ ├── ui.js # UI 工具函数（toast/copy/setOutput） │ ├── hex.js # HEX/ASCII 转换 │ ├── timestamp.js # 时间戳转换（含实时时钟） │ ├── base64.js # Base64 编码/解码（多格式支持） │ ├── protocol.js # DL/T645 协议处理 │ ├── string.js # 字符串处理 │ ├── radix.js # 进制转换 │ ├── json.js # JSON 格式化（含树形视图） │ ├── xml.js # XML 格式化（含树形视图） │ ├── aes.js # AES 加解密（crypto-js） │ └── stats.js # 访问统计（localStorage） ├── public/ # 静态资源（复制到 dist/） ├── dist/ # 打包输出（gitignore） ├── vite.config.js # Vite 配置 ├── package.json # npm 配置 ├── DESIGN.md # 设计系统规范（9 章节） └── README.md # 本文件 ``` --- ## 代码规范 参考协议报文在线解析工具的代码风格，遵循以下规范： - **模块规范**：使用 ES6 Module（`import` / `export`） - **命名规范**：函数用驼峰 `hexLive()`，常量用大写下划线 `ADD_33` - **注释规范**：使用 JSDoc 格式，每个导出函数均有注释 - **单一职责**：每个模块只负责一类功能 - **错误处理**：使用 `try/catch`，提供用户友好的错误提示 - **即时响应**：通过 `oninput` 事件实现输入即转换 --- ## DL/T645 协议说明 DL/T645 是我国电力行业多功能电能表通信协议标准，工具箱支持三种处理模式： | 模式 | 处理流程 | 应用场景 | |------|----------|----------| | **+33 加密** | 每字节 + 0x33 → 自动反转字节顺序 | 发送方数据域编码 | | **−33 解密** | 先反转字节顺序 → 每字节 - 0x33 | 接收方数据域解码 | | **仅反转** | 仅反转字节顺序 | 独立操作，不加/不减 33 | **示例**： 输入 `01 02 03` → +33 加密 → `36 35 34`（每字节+33后反转） --- ## Base64 多格式支持 Base64 工具支持以下格式的输入和输出： | 格式 | 说明 | |------|------| | **文本** | 任意文本字符串（支持中文） | | **文件** | 拖放或选择文件，自动编码为 Base64 | | **HEX** | 十六进制字节串 | | **二进制** | 二进制位串 | | **Data URI** | 生成 `data:image/png;base64,...` 格式（图片文件） | --- ## JSON/XML 树形视图 JSON 和 XML 格式化工具提供交互式树形视图： - ▼ / ▶ 图标指示节点展开/折叠状态 - 点击节点可折叠/展开子节点 - 颜色编码区分不同类型（字符串/数字/布尔/ null） - 一键展开全部 / 折叠全部 --- ## 技术栈 - [Vite](https://vitejs.dev/) v5 — 构建工具 - 原生 JavaScript（ES6+）— 无框架依赖 - [crypto-js](https://github.com/brix/crypto-js) — AES 加解密 - CSS 变量 — 主题可扩展 --- ## 浏览器兼容 - Chrome/Edge 90+ - Firefox 88+ - Safari 14+ --- ## 扩展新工具 项目采用模块化设计，添加新工具只需 3 步： 1. 在 `src/js/modules/` 下新建模块文件，导出实时转换函数 2. 在 `src/index.html` 中添加对应的工具面板（`
`） 3. 在 `src/js/app.js` 中导入模块并注册到 `fnMap` 详细规范参见 [DESIGN.md](DESIGN.md)。 --- ## 许可证 MIT License --- ## 仓库地址 - Gitee：https://gitee.com/road0329/iot_protocol_toolbox - 在线体验：http://101.35.144.246:24681/ --- ## 更新日志 ### v4.0（2026-06-20） - ✅ 新增 JSON 格式化（交互式树形视图） - ✅ 新增 XML 格式化（交互式树形视图） - ✅ 新增 AES 加解密（多模式支持） - ✅ Base64 升级：支持文件/HEX/二进制/Data URI - ✅ DL/T645 协议：+33/-33 自动反转，独立反转按钮 - ✅ 优化输入框高度（180px），提升输入体验 - ✅ 代码全面模块化（Vite + ES6 Module） - ✅ 修复 JSON/XML 树形视图展开/收缩逻辑 ### v3.0 - ✅ 纯前端重构（移除 Spring Boot 后端） - ✅ 即时转换范式（输入即出结果） - ✅ 左侧可扩展导航 ### v2.0 - ✅ 新增网站访问统计 - ✅ 参考协议报文在线解析工具重新设计页面 ### v1.0 - ✅ 初始版本（Spring Boot 后端）