红尘百宝箱是一个集成 30+ 实用开发工具 的纯前端 Web 应用。所有依赖（Vue、ElementUI、Three.js 等）全部本地化，断网也能用，数据全程在浏览器本地处理，绝不外传。
- 🎯 工具齐全 — JSON / SQL / JWT / Cron / Hash / 正则 / 代码生成 / Vue 速查……一网打尽
- 🌐 纯离线运行 — Vue、ElementUI、Three.js 全部 vendor 本地化，无网可用
- 🎨 7 套主题 — 含深色与极光午夜，按钮/阴影随主题色动态切换
- 💾 本地存储 — 数据保存在 localStorage，安全可靠
- 🌌 3D 背景 — Three.js 粒子背景，主题感知配色
- 🎵 音乐播放 — 黑胶唱片悬浮窗，边工作边听歌
- 🌤️ 天气 + 会议纪要 — 顺手的生活/办公小工具
- 🚀 零构建 — 双击 index.html 即可运行，无需任何框架/打包工具
| 工具 | 说明 |
|---|---|
| Vue 2 / Vue 3 速查 | 三段式（是什么/为什么/什么时候用）+ 行内中文注释，小白友好 |
| ElementUI 速查 | 22 个常用组件 · Attributes / Events / Slots / Methods 完整列表 |
| Vue Playground | 在线编辑 Vue 2/3 单文件组件，实时预览 |
| Vue SFC 生成器 | 一键生成 <template>/<script>/<style> 骨架 |
| 工具 | 说明 |
|---|---|
| JSON 格式化 | 格式化/压缩/字段识别/批量填充 |
| SQL 拼接 / 字段清洗 | IN 查询拼接、字段批量清理 |
| 表格转换 | Markdown / HTML / CSV / Excel 互转 |
| 文本对比 | diff 高亮，行级差异展示 |
| 工具 | 说明 |
|---|---|
| 编码加密 | Base64 / URL / MD5 / Unicode / HTML 实体 |
| Hash 计算 | MD5 / SHA-1 / SHA-256 / SHA-512 |
| Base 进制转换 | 二/八/十/十六进制互转 |
| 大小写转换 | camelCase / snake_case / PascalCase / kebab-case |
| 配置格式互转 | JSON ⇄ YAML ⇄ Properties ⇄ XML |
| JWT 解析 | Header / Payload 解码与签名校验 |
| 时间戳转换 | 时间戳 ⇄ 日期，多时区显示 |
| 工具 | 说明 |
|---|---|
| JSON 转类 | JSON → Java / TypeScript / Go 类定义 |
| JSON 转 Vue 表单 | JSON Schema → Element 表单代码 |
| POJO 映射 | 字段映射代码自动生成 |
| Spring 注解速查 | 常用注解 + 示例 + 一键复制 |
| Lombok 展开 | @Data 等注解展开为完整 Java 代码 |
| MyBatis 生成器 | 表结构 → Mapper / Entity / XML |
| 工具 | 说明 |
|---|---|
| Cron 表达式 | 可视化解析 + 自然语言翻译 + 下次执行时间 |
| 正则表达式 | 实时匹配、分组高亮、常用模板 |
| IP 计算 | 子网划分、CIDR、IP 范围、二进制展示 |
| UUID 生成 | v1 / v4 批量生成 |
| API Mock | 快速构造 Mock 响应数据 |
| 请求头工具 | 常用请求头模板 |
| 工具 | 说明 |
|---|---|
| Markdown 编辑器 | 实时双栏预览，支持代码高亮 |
| 代码片段 | 常用片段收藏 + 搜索 |
| 会议纪要 | 议题/决议/待办分类，本地存储，可导出 |
| 二维码 / 条形码 | 生成 + 解析 + 自定义样式 |
| 天气查询 | 50+ 城市，24h / 7d 预报 |
| 音乐播放器 | 悬浮窗，黑胶旋转效果 |
7 套主题，按钮渐变和阴影色会跟着主题色动态切换：
| 主题 | 描述 | 主色调 |
|---|---|---|
| 🌊 清新青蓝 | 清爽明亮，默认主题 | #00B4D8 |
| 🌸 甜美粉色 | 温柔甜美 | #FF6B9D |
| 💜 神秘紫色 | 高贵神秘 | #A78BFA |
| 🍊 阳光橙色 | 热情活力 | #FB923C |
| 🌿 清新绿色 | 自然清新 | #10B981 |
| 🌙 深色模式 | 低调护眼 | #60A5FA |
| 🌌 极光午夜 | 深空梦幻渐变 | #7DD3FC |
双击 index.html 即可运行 — 所有依赖已 vendor 本地化，完全不需要联网。
git clone https://github.com/HongChenGG/DeveloperToolBox.git
cd DeveloperToolBox
# 任选一种静态服务器
python -m http.server 8080
# 或
npx http-server -p 8080Chrome 90+ / Firefox 88+ / Safari 14+ / Edge 90+
toolbox/
├── index.html # 单页入口
├── favicon.ico
├── README.md
├── css/
│ ├── style.css # 主样式
│ ├── modern.css # 现代化样式系统
│ └── stars.css # 星空特效
├── js/
│ ├── app.js # 主应用
│ ├── theme.js # 主题切换 + 动态按钮配色
│ ├── three-bg.js # 3D 粒子背景
│ ├── vue-docs.js # Vue 2/3 速查文档
│ ├── eui-docs.js # ElementUI 速查文档
│ ├── vue-playground.js # Vue 在线 Playground
│ ├── jwt.js / cron.js / regex.js / ipcalc.js / hash.js
│ ├── json2class.js / pojo-mapper.js / mybatis-gen.js
│ ├── spring-annotations.js / lombok-expand.js
│ ├── markdown.js / textdiff.js / tableconv.js
│ ├── baseconv.js / caseconv.js / configconv.js
│ ├── idgen.js / api-mock.js / snippets.js
│ ├── notes.js / weather.js / music.js
│ └── offline-detect.js / enhance.js / page-meta.js
├── lib/ # 第三方库（本地化）
│ ├── three.min.js # 3D 背景
│ ├── marked.min.js # Markdown
│ ├── crypto-js.min.js # 加密
│ ├── diff.min.js # 文本对比
│ ├── js-yaml.min.js # YAML 解析
│ └── cronstrue*.min.js # Cron 翻译
└── vendor/ # 重型框架（离线）
├── vue.min.js # Vue 2.7
└── element-ui/ # ElementUI 2.15
- ✅ 纯前端 — 所有处理在浏览器本地完成
- ✅ 零外传 — 不向任何服务器发送用户数据
- ✅ 离线可用 — 第三方库全部 vendor 本地化
- ✅ 开源透明 — 代码可自行审查
- 基础工具集成（30+）
- 7 套主题 + 动态按钮配色
- 3D 粒子背景
- Vue 2 / Vue 3 / ElementUI 速查文档（小白友好版）
- Vue Playground 在线编辑器
- Markdown 编辑器 / 正则测试 / 代码生成系列
- 纯离线运行（Vue + ElementUI 本地化）
- 颜色选择器 / 调色板
- 图片压缩 / 格式转换
- 更多代码生成器（GraphQL / Protobuf）
- PWA 支持，可安装到桌面
- ✨ 新增 Vue 2/Vue 3 速查文档 — 三段式说明 + 行内中文注释，小白友好
- ✨ 新增 ElementUI 速查文档 — 22 个常用组件，含 Attrs/Events/Slots/Methods
- ✨ 新增 Vue Playground — 在线编辑 Vue SFC，实时预览
- ✨ 新增大批工具 — JWT、Cron、正则、IP 计算、Hash、Markdown、文本对比、表格/Base/大小写/配置转换、UUID、Spring/Lombok/MyBatis/POJO 代码生成等
- 🎨 主题按钮动态配色 — 主题设置 + 音乐按钮按主题色渲染渐变/阴影
- 🎨 3D 粒子背景 — Three.js 实现，配色感知主题
- 🌌 新增极光午夜主题
- 📦 完全离线化 — Vue / ElementUI / Three.js 等全部本地 vendor
- 🎉 首次发布，集成 10+ 基础工具
- 🎨 6 套主题
- 🎵 音乐播放器 + 🌤️ 天气查询 + 📋 会议纪要
- 🌟 星空背景特效
欢迎 Issue / PR！
- Fork 项目
- 新建分支 (
git checkout -b feature/AmazingFeature) - 提交 (
git commit -m 'feat: add AmazingFeature') - 推送 (
git push origin feature/AmazingFeature) - 开 Pull Request
MIT — 详见 LICENSE
- Vue.js · Element UI · Three.js
- marked · crypto-js · js-yaml
- cronstrue · diff
- QRCode.js · JsBarcode · jsQR
- 🐛 Issues: https://github.com/HongChenGG/DeveloperToolBox/issues
- ⭐ Star: https://github.com/HongChenGG/DeveloperToolBox
⭐ 如果这个项目对你有帮助，请点个 Star！⭐
Made with ❤️ by HongChen