一个面向开发者与数据信息工作者的前端工具集合，力求在浏览器内“一站式”完成常见的编码解码、数据格式转换、网络调试、文本处理、时间日期、图像多媒体、办公杂项等任务。项目使用 React + Vite + TailwindCSS 构建，强调 即开即用、无需登录、支持离线本地数据持久化，并通过异步加载大型依赖保持敏捷体验。
| 分类 | 说明 | 代表工具 |
|---|---|---|
| 编码 / 解码 | 常见数据编码转化、加密解密、哈希等 | MD5 生成、SHA 系列、Base64 工具、URL 编解码、JWT 解码等 |
| 数据格式化 / 转换 | 各类结构化数据格式化、压缩、互转 | JSON 工具、XML/TOML/YAML ↔ JSON、CSV ↔ JSON、JSON ↔ SQL、SQL 格式化等 |
| 网络 / 调试 | 网络请求调试、参数解析等 | cURL ↔ requests 转换、HTTP Header 格式化、URL 参数提取、Cookie 格式化、User-Agent 解析、IP 转换、端口扫描示例等 |
| 文本处理 | 文本整理、分析、差异对比 | 文本去重/排序、大小写转换、文本统计、文本差异、密码生成、Lorem Ipsum 等 |
| 时间 / 日期 | 时间戳转换、倒计时、Cron 表达 | Unix 时间戳转换、倒计时/定时器、Cron 表达式解析 |
| 开发辅助 | 颜色转换、正则测试、二维码、条形码等 | RGB ↔ HEX ↔ HSL、正则测试、二维码生成 / 解码、条形码生成、UUID、Mermaid 图等 |
| 图像 / 多媒体 | 图片、音频相关快速处理 | 图片 Base64 转换、图片压缩、音频频谱分析、Favicon 预览 |
| 办公 / 杂项 | 日常办公小工具 | 邮箱签名生成、单位换算、货币换算、随机工具、日历记事等 |
当前已内置 60+ 工具，所有工具均为前端实现，不依赖后端服务。
- 本地数据持久化：部分工具（JSON、cURL ↔ requests、Cron 等）自动记忆上次输入，断网或关闭浏览器后再次打开仍可继续工作。
- 一键示例：在 JSON、Cron、网络请求等工具中提供“载入示例”按钮，方便快速试用和教学演示。
- 双语内容：支持中英文 UI，且针对不同语言提供本地化示例数据（例如邮箱签名默认值、模板名称等）。
- 视觉与响应式：支持亮/暗主题切换，大屏双栏导航 + 移动端抽屉式侧边栏，覆盖桌面与移动场景。
- 纯前端实现、安全可控：不依赖服务器，敏感数据仅在本地处理。
- 渐进式加载：Mermaid、JSON/TOML 解析、CSV 处理等大依赖均在工具使用时才异步载入，降低首屏体积并提升 Safari / Edge 的加载稳定性。
- 编码 / 解码：MD5、SHA、Base64、URL、HTML 实体、JWT 解码等
- 数据格式化：JSON 格式化/压缩/校验、CSV ↔ JSON、XML ↔ JSON、TOML ↔ JSON、YAML ↔ JSON、JSON ↔ SQL、SQL 格式化
- 网络工具：cURL ↔ Python requests、HTTP Header 展示、URL 参数解析、Cookie 转表格、User-Agent 与 IP 转换、端口扫描示例
- 文本工具：大小写转换、文本去重/排序、文本统计、文本对比、随机密码、Lorem Ipsum
- 时间工具：Unix 时间戳、倒计时/定时器、Cron 解析（含自然语言描述）
- 开发辅助：颜色转换、正则测试、二维码生成/解码、条形码、UUID、Mermaid 图
- 图像 / 多媒体：图片 ↔ Base64、图片压缩、Favicon 预览、音频频谱分析
- 办公杂项：邮箱签名、单位换算、货币换算、随机工具、日历记事
完整清单可在侧边栏浏览，亦可通过顶部搜索框快速定位。
├── src
│ ├── components # 通用 UI 组件（按钮、输入框、布局、导航等）
│ ├── hooks # 自定义 hooks（如 usePersistentState、本地化逻辑）
│ ├── i18n # 语言上下文、自动翻译补丁、词典
│ ├── pages # 各个工具页面（按功能子目录划分）
│ ├── utils # 编码、网络、颜色、时间等工具函数
│ ├── App.jsx # 应用根组件
│ └── main.jsx # 入口挂载
├── public # 静态资源
├── TODO.md # 下一阶段迭代计划（中文）
├── README.md # 项目说明文档
├── package.json # 项目依赖及脚本
└── vite.config.js # Vite 构建配置
# 安装依赖（任选一个包管理器）
yarn install # 或 npm install / pnpm install
# 启动开发环境
yarn dev # 默认运行在 http://localhost:5173
# 生产构建
yarn build
# 预览构建产物
yarn preview
# 代码检查
yarn lint项目集成 ESLint 9 + React Hooks 规则集，推荐在提交前运行
lint保障质量。
- 技术栈：React 19、Vite 7、TailwindCSS 3
- 常用三方库：dayjs、js-beautify、qrcode.react、jsqr、Turndown、sql-formatter、yaml、@ltd/j-toml 等
- 异步依赖加载：YAML、TOML、CSV、代码美化、SQL/XML 格式化、HTML 实体等重型库采用动态
import()，避免首屏加载压力。 - 主题与动画：TailwindCSS + CSS 自定义，暗色模式通过 localStorage + DOM class 控制
- 性能建议：工具组件采用 React.lazy 按需加载；保持工具独立，便于扩展和维护
- 新增工具流程：
- 在
src/pages/{category}中创建工具组件 - 在
src/pages/toolRegistry.js注册到对应分组 - 如有新文案，补充
src/i18n/index.jsx词典 - 如涉及示例或持久化，利用现有 hooks 保持行为一致
- 在
- 使用
usePersistentState（位于src/hooks/usePersistentState.js）封装 localStorage：- 支持初始值函数、异常捕获、状态重置
- 适用于需要记忆用户输入的工具
- 国际化策略：
- 默认根据浏览器语言或手动选择（存储在 localStorage）
- 词典在
src/i18n/index.jsx中维护，自动翻译 fallback 对常见提示做替换 - 邮箱签名等工具根据语言切换默认示例内容
- 按需加载工具组件：所有工具通过
React.lazy+Suspense渲染，仅在用户点击时加载对应模块。 - 重型依赖异步导入：
yaml、@ltd/j-toml、papaparse、js-beautify、sql-formatter、xml-formatter、mermaid等在使用时动态import()，首屏 bundle 更轻。 - 状态合并与提示：JSON/TOML/YAML/CSV、代码美化等工具在处理数据时展示“处理中…”状态，避免重复触发并保障 UI 可响应。
- 精简构建输出：复用 Vite 默认 chunk 策略，避免手动拆分造成循环依赖问题；告警阈值设为 4 MB 以便监控大块同时不影响构建。
- 轻量默认图标：自定义
favicon.svg（蓝色渐变“IT” 标识），减少浏览器请求体积。
实际效果：在常见场景下首屏 JS 下载量可下降 30%~50%，Safari / Edge 的白屏时间和失败概率明显降低。
- 部署：构建结果位于
dist/，可直接上传至任何静态服务器或 CDN。若部署在子路径，请在vite.config.js设置base。 - 缓存：建议开启 gzip / Brotli 压缩与 HTTP/2，提升远端访问速度；如曾启用旧版 Service Worker，请先清理缓存避免拦截。
- 浏览器支持：默认构建目标为
es2019。若需要兼容更旧的 Safari，可改为es2017或引入@vitejs/plugin-legacy生成双构建。 - 跨域资源：所有脚本、样式默认从根路径
/assets/引用；部署时确保 MIME 类型正确，避免Content-Type错误导致 Safari/Edge 阻止加载。
详见 TODO.md，当前重点：
- 导航体验升级（最近使用 / 收藏 / 命令面板）
- 工具之间的数据联动（例：Base64 → JSON → Diff）
- 文件级批量处理（拖拽上传、多文件并行）
- 分享功能（生成可复现链接或分享片段）
- HTTP 工具增强（请求构造、响应历史、二次利用）
欢迎提交 Issue / PR 共同完善。
- Fork 或在本仓库创建分支开发
- 保持 eslint 通过：
yarn lint - 提交信息清晰，必要时附截图或操作演示
- 新增工具时同步补充 i18n 翻译和示例数据
- PR 中说明改动动机与验证方式
- Q: 数据会上传到服务器吗？
- A: 不会。所有计算在浏览器本地完成，localStorage 仅保存少量状态。
- Q: 可以导出/备份我的输入内容吗？
- A: 当前可通过复制输出或下载结果实现。后续会考虑内置导出、分享功能。
- Q: 如何新增工具？
- A: 参考“开发与调试说明”中的流程，新建组件并在
toolRegistry注册即可。
- A: 参考“开发与调试说明”中的流程，新建组件并在
- Q: 是否计划推出 VS Code 插件或桌面版本？
- A: 正在评估需求，欢迎在 Issue 中讨论。
项目暂未指定正式开源协议，默认保留所有权利。如需引用、二次开发或商业使用，请先联系作者获取授权。