# toolnav **Repository Path**: zraylong/toolnav ## Basic Information - **Project Name**: toolnav - **Description**: 工具集合 - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-07-10 - **Last Updated**: 2025-08-05 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 工具导航 - 在线工具集合 一个集成多种实用工具的现代化Web应用平台，提供专业的在线工具服务。 ## 🌟 项目特色 - **🎨 现代化设计**: 采用卡片式布局，美观直观的用户界面 - **🔍 智能搜索**: 支持工具名称、功能、关键词的模糊搜索 - **📱 响应式设计**: 完美适配桌面端和移动端设备 - **⚡ 性能优化**: 快速加载，流畅的用户体验 - **🛠️ 模块化架构**: 清晰的目录结构，便于维护和扩展 ## 📁 项目架构 ``` toolnav/ ├── index.html # 主导航页面 ├── assets/ # 公共资源目录 │ ├── css/ │ │ └── main.css # 主样式文件 │ ├── js/ │ │ ├── main.js # 主功能脚本 │ │ └── minified.min.js # 压缩库文件 │ └── images/ # 图片资源 ├── tools/ # 工具模块目录 │ ├── json-formatter/ # JSON格式化工具 │ │ ├── json-formatter.html │ │ ├── json-formatter.css │ │ ├── json-formatter.js │ │ └── README.md │ ├── mermaid-editor/ # Mermaid图表编辑器 │ │ ├── mermaid.html │ │ ├── mermaid.css │ │ ├── mermaid.js │ │ └── mermaid.min.js │ ├── image-compressor/ # 图片压缩工具 │ │ ├── image-compressor.html │ │ ├── image-compressor.css │ │ ├── image-compressor.js │ │ └── browser-image-compression.min.js │ ├── ocr-scanner/ # OCR文字识别工具 │ │ ├── ocr-scanner.html │ │ ├── ocr-scanner.css │ │ └── ocr-scanner.js │ └── ocr-tool/ # OCR相关库文件 │ ├── tesseract.min.js │ ├── tesseract.esm.min.js │ └── worker.min.js └── README.md # 项目说明文档 ``` ## 🛠️ 可用工具 ### 已实现工具 ✅ 1. **📝 JSON格式化工具** - JSON数据格式化、压缩、验证和转换 - 支持树形视图、Excel视图、YAML视图 - 语法错误检测和行号显示 - 历史记录和保存功能 2. **📊 Mermaid图表编辑器** - 在线绘制流程图、序列图、甘特图等 - 实时预览，支持缩放和拖拽 - 图表保存和加载功能 - 导出SVG和PNG格式 3. **🖼️ 图片压缩工具** - 在线压缩图片，支持多种格式转换 - 高质量压缩算法 - 批量处理功能 - 格式转换（WebP、JPEG、PNG） 4. **📷 OCR文字识别** - 从图片中提取文字，支持多种语言 - 基于Tesseract.js引擎 - 高精度识别，在线处理 - 支持中文、英文等多语言 ### 待开发工具 🚧 1. **💻 代码格式化工具** - HTML、CSS、JavaScript代码格式化和美化 - 多语言支持，自定义配置 - 实时预览功能 2. **📱 二维码生成器** - 生成和解析二维码，支持多种数据类型 - 自定义样式，批量生成 - 多种格式导出 3. **🔍 正则表达式测试器** - 实时测试和验证正则表达式匹配 - 匹配高亮显示 - 常用正则模式库 4. **🔐 Base64编解码** - Base64编码解码，支持文本和图片 - 文本编码，图片转换 - 批量处理功能 ## 🚀 快速开始 ### 在线使用 直接访问 `index.html` 即可使用所有工具。 ### 本地部署 1. 克隆或下载项目文件 2. 使用任意Web服务器运行（如Live Server、Nginx、Apache） 3. 访问 `index.html` 开始使用 ### 工具导航功能 - **🔍 智能搜索**: 在搜索框中输入关键词，支持工具名称、功能描述搜索 - **📂 分类过滤**: 点击分类按钮快速筛选不同类型的工具 - **⌨️ 快捷键**: - 按 `/` 键快速聚焦搜索框 - 按 `ESC` 键清空搜索 - **📱 响应式**: 完美适配各种屏幕尺寸 ## 🎯 主要功能 ### 主导航页面 - **卡片式布局**: 每个工具以卡片形式展示，包含图标、描述、功能特色 - **状态标识**: 清晰区分可用工具和即将推出的工具 - **交互动画**: 流畅的悬停效果和页面切换动画 - **搜索过滤**: 实时搜索和分类筛选功能 ### 工具特性 - **实时处理**: 大部分工具支持实时预览和处理 - **本地存储**: 支持浏览器本地存储，保存用户数据 - **响应式设计**: 所有工具均适配移动端和桌面端 - **现代化界面**: 统一的设计语言和用户体验 ## 🔧 技术栈 - **前端框架**: 原生HTML5 + CSS3 + JavaScript ES6+ - **样式设计**: - CSS Grid 和 Flexbox 布局 - CSS3 动画和变换 - 响应式媒体查询 - **JavaScript**: - 模块化类设计 - 事件驱动架构 - localStorage 数据持久化 - **第三方库**: - Mermaid.js (图表渲染) - Tesseract.js (OCR识别) - browser-image-compression (图片压缩) ## 📱 浏览器兼容性 - **Chrome** 90+ - **Firefox** 88+ - **Safari** 14+ - **Edge** 90+ - **移动端**: iOS Safari 14+, Chrome Mobile 90+ ## 🛡️ 数据安全 - **本地处理**: 所有工具均在浏览器本地处理，数据不上传服务器 - **隐私保护**: 不收集用户个人信息，仅使用localStorage保存用户偏好 - **安全性**: 所有文件操作均在客户端完成，确保数据安全 ## 🤝 贡献指南 欢迎贡献代码和建议！请遵循以下步骤： 1. Fork 本项目 2. 创建功能分支 (`git checkout -b feature/新功能`) 3. 提交更改 (`git commit -am '添加新功能'`) 4. 推送到分支 (`git push origin feature/新功能`) 5. 创建 Pull Request ### 开发规范 - 使用统一的代码风格和缩进 - 为新功能添加适当的文档 - 确保跨浏览器兼容性 - 遵循响应式设计原则 ## 📄 许可证 MIT License - 可自由使用、修改和分发。 ## 🆕 更新日志 ### v2.0.0 (2024-01-15) - 🎉 重新设计项目架构，采用模块化结构 - ✨ 创建主导航页面，整合所有工具入口 - 🎨 全新的UI设计，现代化卡片式布局 - 🔍 添加智能搜索和分类过滤功能 - 📱 优化响应式设计，提升移动端体验 - ⚡ 性能优化，提升页面加载速度 ### v1.0.0 (2024-01-01) - 🚀 首次发布 - 📝 JSON格式化工具 - 📊 Mermaid图表编辑器 - 🖼️ 图片压缩工具 - 📷 OCR文字识别工具 --- **工具导航** - *让工作更高效，让生活更简单* 🚀