一个基于 Vue3 + Vite + TailwindCSS 构建的前端开发者工具箱应用,提供多种实用的开发工具,所有功能在浏览器本地运行,无需后端支持。
- JSON ↔ YAML ↔ TOML 互转
- XML ↔ JSON 转换
- Markdown ↔ HTML 转换
- Base64 编解码
- URL 编解码
- 在线测试正则表达式
- 高亮显示匹配结果
- 提供常用正则模板
- 详细的匹配统计信息
- 常用 Python/Go/PHP/JavaScript 代码片段
- 支持添加自定义代码片段
- 本地存储,数据持久化
- 按语言和关键词搜索
- 时间戳 ↔ 日期时间转换
- UUID / 随机字符串生成
- 哈希计算(MD5、SHA1、SHA256、SHA512)
- JWT Token 解析
- 大小写转换(驼峰、下划线等命名格式)
- 文本清理(去空格、去重、排序)
- 文本统计(字数、行数、词频分析)
- 文本比较和差异分析
- IP 地址解析(IPv4/IPv6)
- 端口号服务查询
- URL 解析和分析
- 常用端口对照表
- 批量文件重命名(多种模式)
- 图片压缩和格式转换
- 生成重命名脚本下载
npm installnpm run dev项目将在 http://localhost:3000 启动
npm run buildnpm run preview- 前端框架: Vue 3 (组合式 API)
- 构建工具: Vite
- 样式框架: TailwindCSS
- 路由: Vue Router 4
- 工具库:
- js-yaml (YAML 处理)
- @iarna/toml (TOML 处理)
- xml2js (XML 处理)
- marked (Markdown 处理)
- uuid (UUID 生成)
- crypto-js (加密哈希)
- jwt-decode (JWT 解析)
src/
├── components/ # 公共组件
│ ├── Header.vue # 顶部导航栏
│ └── Sidebar.vue # 侧边栏
├── views/ # 页面组件
│ ├── FormatTools.vue # 格式化工具
│ ├── RegexTools.vue # 正则工具
│ ├── SnippetTools.vue# 代码片段
│ ├── CalcTools.vue # 计算工具
│ ├── TextTools.vue # 文本处理
│ ├── NetworkTools.vue# 网络工具
│ └── FileTools.vue # 文件处理
├── utils/ # 工具函数
│ ├── formatUtils.js # 格式转换
│ └── snippets.js # 代码片段数据
├── App.vue # 根组件
├── main.js # 入口文件
└── style.css # 全局样式
- 🔒 隐私安全: 所有数据处理在本地进行,无需上传到服务器
- 📱 响应式设计: 完美适配桌面和移动设备
- 🎨 现代界面: 基于 TailwindCSS 的清爽简洁设计
- ⚡ 高性能: Vite 构建,快速启动和热重载
- 🔍 智能搜索: 全局搜索功能,快速定位所需工具
- 💾 数据持久化: 自定义代码片段本地存储
- 🌈 用户友好: 直观的操作界面和详细的功能说明
MIT License - 详见 LICENSE 文件
欢迎提交 Issue 和 Pull Request 来改进这个项目!
开发者工具箱 - 让开发更高效,让工作更轻松!