🔷 S-Hex

专为开发者打造的字节流日志与进制调试利器

核心功能 • 应用场景 • 快速开始 • 项目结构

📖 简介 | Introduction

S-Hex 是一款解决字节流数据阅读痛点的轻量级工具。

在嵌入式开发、网络协议调试或串口通信中，我们经常面对晦涩的 HEX 字节流。S-Hex 不仅提供高效的进制转换，更引入了可视化字节位分析与带备注的历史记录功能，让数据含义一目了然，从繁琐的计算中解放你的大脑。

✨ 核心功能 | Features

1. ⚡️ 极速进制转换

• 多进制同屏展示：输入 HEX，实时查看对应的 DEC（十进制）、BIN（二进制）及 ASCII 码（处理不可见字符）。
• 智能格式化：自动过滤空格、换行符，支持从日志文件批量复制粘贴处理。

2. 🔬 字节位分析器 (Bit Analyzer)

特色功能：不再需要对着计算器按位与（Bitwise AND）

• Bit 级可视化：将选定的 Hex 字节展开为 b7 - b0 的 8 位二进制视图。
• 自定义模板：支持为每一位（Bit）定义含义（如 Error, Enable, Ack），特别适合寄存器配置或硬件标志位排查。
• 模板保存：常用寄存器定义可保存为模板，随时调用。

3. 📝 智能工作流

• 会话历史：自动保存转换记录，防止灵感或数据丢失。
• 业务备注：支持为每一条转换记录添加备注（如“试剂用量”、“握手包 0x01”），让枯燥的 Hex 变成可读的日志。
• 一键导出：支持导出分析记录，便于团队协作或存档。

📸 界面预览 | Screenshots

主工作台：日志转换与备注	深度调试：字节位分析器
支持 HEX/DEC/ASCII 对照与备注管理	b0-b7 标志位直观解析与模板保存

(注：请将截图文件放入项目 assets 目录)

🎯 应用场景

• 嵌入式/硬件开发：快速解析传感器数据、单片机寄存器状态（Bit mask）。
• 后端/网络编程：TCP/UDP 报文协议分析，特殊字符排查。
• 逆向工程：分析二进制文件头或特定指令集。

🛠 技术栈 | Tech Stack

• Core: TypeScript (类型安全，逻辑严谨)
• UI Framework: React + Hooks (组件化开发)
• Build Tool: Vite (秒级热更新)
• Styling: CSS Modules / Less (清爽的 UI 风格)

🚀 快速开始 | Quick Start

环境准备

确保本地已安装 Node.js (v14+) 和 npm/yarn。

安装与运行

# 1. 克隆仓库
# 2. 进入项目目录
cd s-hex

# 3. 安装依赖
npm install
# or
yarn install

# 4. 启动本地开发服务器
npm run dev

启动后访问终端输出的本地地址（ http://localhost:3000），即可开始使用。

构建部署

npm run build

构建产物将生成于 dist 目录，该目录为纯静态资源，可直接部署至 Nginx、GitHub Pages 或 Vercel。

📂 项目结构 | Project Structure

s-hex/
├── src/
│   ├── components/  # UI组件 (HexInput, BitAnalyzer, HistoryList...)
│   ├── hooks/       # 逻辑复用 (useConversion, useHistory...)
│   ├── utils/       # 核心算法 (hexToBinary, formatBytes...)
│   ├── types.ts     # TypeScript 类型定义
│   ├── App.tsx      # 应用入口
│   └── main.tsx     # 渲染挂载
├── public/          # 静态资源
├── vite.config.ts   # Vite 配置
└── package.json     # 依赖管理

📄 许可证 | License

未经作者授权，禁止将本项目用于商业用途。

Made with ❤️ by NightPasture