kiranShamsHere/RadixLab

# 🧬 RadixLab 基于 **React**、**TypeScript**、**Tailwind CSS v4** 以及通过 **Framer Motion** 实现的自定义物理引导弹簧过渡构建，RadixLab 提供了一个极致流畅、护眼且响应式的桌面优先开发沙盒。 ## 🚀 核心开发者模块 RadixLab 在单一可视化画布中汇集了全面的计算机运算和数据实用工具： ### 🔢 计算与转换器 * **多进制转换器：** 轻松实现二进制、八进制、十进制、十六进制及任意进制间的数字转换，支持实时对齐和剪贴板功能。 * **科学计算器：** 全面的数学运算，结合特定进制的转换模式。 * **批量转换器：** 通过拖拽或批量文件导入，同时处理多条记录的输入。 * **色彩空间转换器：** 动态的十六进制到颜色解码器，提供详细的 RGB、HSL 和 CMYK 转换。 ### 🔌 计算机体系结构与编码 * **IEEE 754 分析器：** 解码单精度（32位）和双精度（64位）浮点数二进制，提供完整的结构分解（符号位、指数位、尾数位）和舍入误差诊断。 * **有符号补码实验室：** 可视化并转换补码、反码和原码。 * **位模式与位运算：** 交互式位掩码演练场，带有实时移位指示器和逻辑表诊断。 ### 🎨 可视化与教育课堂 * **二叉树可视化工具：** 交互式树节点动画，展示深度优先和广度优先的搜索路径遍历。 * **交互式数轴：** 实时分式缩放可视化滑块，用于标绘整数边界和区间坐标。 * **字节与位房间：** 检视字节数组直至其二进制结构的精确视觉表示。 ### 🔐 文本与安全实用工具 * **加密哈希套件：** 快速的客户端 MD5、SHA-1 和 SHA-256 生成器，生成的哈希值可复制。 * **Base64 工作室：** 对复杂字符串、二进制结构或 URL 组件进行编码和解码，并带有验证保护。 * **正则表达式测试器：** 动态实时的模式测试器，配有状态、匹配组和结构化的测试断言。 * **UUID 生成器：** 高度可配置的版本 4 UUID 批量生成套件。 * **ASCII 与 Unicode 解码器：** 全面的索引表，将文本字形与整数即时配对。 ## ⚡ 人体工程学 UX 增强 RadixLab 的设计以最大化开发者生产力为核心： * **快速模块切换：** 在任意非输入区域按 ↑ 上箭头 或 ↓ 下箭头 即可瞬间在侧边模块间级联切换。 * **全局快捷键：** Alt 触发的快捷路由（Alt + 1 到 Alt + 9）和快捷键面板（Alt + K）。 * **触觉反馈界面：** 清脆的点击反馈动画和响应式 UI 触发器。 * **环境光主题：** 支持未来感十足的 **Cosmic Dark** 黑曜石配色方案，以及简洁、高对比度的 **Nordic Light** 视口视图。 ## ⚙️ 技术栈与架构 * **运行时框架：** [React 19](https://react.dev/) & [Vite 6](https://vite.dev/) * **编程语言：** [TypeScript 5](https://www.typescriptlang.org/)（严格编译，自定义联合类型契约） * **样式引擎：** [Tailwind CSS v4](https://tailwindcss.com/) 配有自定义 `@import` pipeline 和主题变量 * **动画系统：** [Motion](https://motion.dev/)（弹簧驱动的布局转换，等待模式路由） * **图标：** [Lucide React](https://lucide.dev/) API ## 📁 项目结构 以下是 RadixLab 的目录组织结构概览： ``` radix-lab/ ├── assets/ # Public visual configuration artifacts & graphics ├── src/ │ ├── components/ # Modularized view panels & layout wrappers │ │ ├── AsciiUnicodeView.tsx # Glyph mapping & character index reference │ │ ├── Base64View.tsx # Complex string & URL encoder/decoder │ │ ├── BatchConvertView.tsx # Bulk CSV data pipeline & input processor │ │ ├── BinaryTreeView.tsx # Interactive traversal renderer (DFS/BFS) │ │ ├── BitPatternsView.tsx # Active bitwise logical mask playground │ │ ├── BytesBitsView.tsx # Multi-byte structure & array visual inspector │ │ ├── CalculatorView.tsx # Dynamic basic calculator keypad overlay │ │ ├── ColorConverterView.tsx # HEX, RGB, HSL & CMYK interactive color decoder │ │ ├── ConverterView.tsx # Standard radix, floating-point & negative module │ │ ├── EducationalView.tsx # Complement formulas & float reference sheet │ │ ├── ErrorBoundary.tsx # Runtime fault isolation layer │ │ ├── HashGeneratorView.tsx # Cryptographic hashes (MD5, SHA1, SHA256) │ │ ├── HistoryView.tsx # Interactive, filterable action history ledger │ │ ├── IEEE754View.tsx # Floating point parser & mantissa calculator │ │ ├── NumberLineView.tsx # Zoomable real-time fractional pointer line │ │ ├── RegexTesterView.tsx # Live regular expression patterns analyzer │ │ ├── ScientificCalculatorView.tsx# Trigonometric & arithmetic sandbox │ │ ├── SignedComplementView.tsx # Sign-Magnitude, 1s & 2s complement generator │ │ └── UuidGeneratorView.tsx # Batch UUID v4 structural compiler │ ├── utils/ # High-performance algorithmic calculators │ │ ├── converter.ts # Custom arithmetic parsing engines │ │ ├── haptics.ts # Responsive user feedback triggers │ │ ├── mathSteps.ts # Multi-step radix conversion walk-through builder │ │ └── speech.ts # Dictation input utilities │ ├── App.tsx # Main orchestrator & routing state controller │ ├── main.tsx # React entry point mounting tree │ ├── types.ts # Shared layout contracts & static definitions │ └── index.css # Tailwind CSS input and customized theme layers ├── index.html # Custom HTML entrypoint with metadata ├── package.json # Manifest declaring dependencies & runtime run scripts └── tsconfig.json # TypeScript type compiler configuration ``` ## 🔧 入门指南 ### 前置条件 请确保您已安装 Node.js (v18+) 和 npm。 ### 安装说明 1. 克隆或下载仓库： git clone cd radix-lab 2. 安装依赖： npm install 3. 运行开发服务器： npm run dev 打开浏览器并导航至 `http://localhost:3000` 以开始使用 RadixLab。 ### 构建生产版本 将应用程序编译为高性能的静态 SPA： ``` npm run build ``` 静态文件产物将生成在 `dist/` 文件夹中，随时可部署到 GitHub Pages、Netlify、Vercel 或任何静态托管容器。 ## 📄 许可证 本项目基于 **MIT License** 授权 - 详见 [LICENSE](LICENSE) 文件了解详情。

标签：前端工具箱, 威胁情报, 开发者工具, 算法可视化, 自动化攻击, 计算机基础教学, 进制转换