盘点日期：2026-05-28
Tools Hub 是一个基于 React + Vite 的前端工具集合。当前功能以浏览器本地计算为主，没有后端服务依赖；入口页提供工具搜索、分类展示和路由跳转，各工具页提供统一的返回首页、标题区、输入区、结果区和复制结果能力。
- React 19、React Router 7、TypeScript、Vite 8
- Tailwind CSS 4、shadcn 风格 UI 组件、Radix UI 组件
- lucide-react 图标
- date-fns 用于日期选择器本地化
- dxf-parser 用于 DXF 文件解析
- 首页路由：
/ - 首页能力：
- 按工具分类展示入口。
- 支持按工具名称和简介搜索。
- 工具卡片显示图标、标题、简介、可用状态和跳转入口。
- 通用工具页能力：
- 页面顶部返回首页。
- 统一标题、英文 kicker、图标展示。
- 多数结果项支持一键复制到剪贴板。
- 输入校验失败时在页面内显示错误提示。
| 工具 | 路由 | 分类 | 已实现能力 |
|---|---|---|---|
| 颜色转换 | /color-converter |
转换 | HEX、RGB、HSL、HSV、CMYK 互转；支持 HEX 输入校验；支持颜色选择器实时改色；展示颜色预览；可复制各格式结果。 |
| 时间戳转换 | /timestamp-converter |
转换 | 实时显示当前秒级和毫秒级时间戳；支持秒级/毫秒级时间戳解析；支持本地日期和时间选择；输出本地时间、ISO 8601、UTC、秒级时间戳、毫秒级时间戳。 |
| JSON 格式化 | /json-formatter |
格式化 | JSON 解析校验；可配置缩进空格数；输出格式化 JSON 和压缩 JSON；解析失败时显示错误信息。 |
| URL 编解码 | /url-codec |
编码 | 使用 encodeURIComponent 和 decodeURIComponent 进行 URL 编码/解码；解码异常时提示；自动解析 Query 参数并按键值展示。 |
| Base64 编解码 | /base64-codec |
编码 | 支持 UTF-8 文本 Base64 编码；支持 Base64 解码；解码异常时提示。 |
| CSS 单位换算 | /css-unit-converter |
转换 | 输入 px、根字号、视口宽度、视口高度；输出 px、rem、em、vw、vh 换算结果。 |
| Gradient 生成器 | /gradient-generator |
CSS | 支持选择起始色、结束色和角度；实时预览线性渐变；输出 linear-gradient(...) CSS。 |
| Regex 测试器 | /regex-tester |
格式化 | 输入正则 pattern、flags 和测试文本；自动补充全局匹配；显示匹配数量、匹配位置、匹配长度和捕获组；正则无效时显示错误信息。 |
| UUID 生成器 | /uuid-generator |
生成 | 批量生成 UUID v4；数量限制 1-100；支持大小写输出切换；可重新生成并复制全部结果。 |
| Hash 生成器 | /hash-generator |
编码 | 基于浏览器 Web Crypto API 生成文本摘要；支持 SHA-1、SHA-256、SHA-384、SHA-512；输入变化后自动更新。 |
| CAD 文件查看器 | /cad-viewer |
文件 | 内置 sample DXF；支持上传 DXF 文件；解析并预览常见 2D 实体；展示实体总数、已渲染数量、暂未支持数量和图层列表。 |
| 旷野之息地图 | /botw-map |
地图 | 基于 Leaflet 实现图片底图漫游、缩放、复位、坐标读取、示例标注、标注搜索和类型筛选。 |
当前 CAD 文件查看器主要用于轻量预览 DXF 文件中的常见 2D 实体：
- 已渲染：
LINE、LWPOLYLINE、POLYLINE、CIRCLE、ARC、TEXT、MTEXT - 暂未渲染：除上述类型外的 DXF 实体会计入“暂未支持”数量
- 渲染方式：解析后转换为 SVG，在浏览器中本地显示
- 文件来源：支持上传
.dxf或文本格式文件，也可以恢复内置示例
- 工程目前是纯前端实现，文件解析、编码、哈希、格式转换都在浏览器本地完成。
- 剪贴板复制依赖浏览器
navigator.clipboard能力，通常需要 HTTPS 或本地开发环境支持。 - Hash 生成器依赖 Web Crypto API，需运行在现代浏览器环境中。
- CSS Gradient 生成器当前只支持两个颜色 stop 的线性渐变。
- CAD Viewer 当前是轻量预览器，不是完整 CAD 编辑器；复杂块、尺寸标注、填充、样式等 DXF 能力可能不会完整渲染。
- 当前没有发现专门的自动化测试用例；已通过生产构建校验基本编译状态。
规划原则：
- 优先选择高频、纯前端可实现、无需后端服务的工具。
- 保持现有单页工具形态：输入、实时处理、结果预览、复制/下载。
- 优先服务开发者日常调试、格式转换、编码解码、文本处理场景。
| 功能 | 分类 | 规划能力 |
|---|---|---|
| JWT 解析器 | 编码 / 调试 | 粘贴 JWT 后解析 Header、Payload、签名段；展示 iat、exp 等时间字段的人类可读时间；先不做密钥校验。 |
| 字符串工具箱 | 文本 | 大小写转换、驼峰/短横线/下划线转换、去首尾空格、去空行、去重行、排序行、字符数/词数/行数统计。 |
| JSON 转 TypeScript | 开发 | 根据 JSON 示例生成 TypeScript type 或 interface；支持数组、嵌套对象、可选字段的基础推断。 |
| Markdown 预览 | 格式化 | 左侧编辑 Markdown，右侧实时预览；支持复制源码和复制渲染后的 HTML。 |
| Cron 表达式解析 | 时间 / 调试 | 输入 cron 表达式，解释字段含义，并展示最近几次预计执行时间。 |
| XML 格式化 | 格式化 | XML 校验、格式化、压缩；解析失败时显示错误位置或错误信息。 |
| YAML 格式化 / JSON 互转 | 格式化 | YAML 校验和格式化；支持 YAML 转 JSON、JSON 转 YAML。 |
| 功能 | 分类 | 规划能力 |
|---|---|---|
| 二维码生成器 | 生成 | 输入文本或 URL 生成二维码；支持尺寸、容错级别配置；支持下载 PNG/SVG。 |
| Diff 对比工具 | 文本 / 开发 | 左右文本对比，标记新增、删除、修改；支持复制对比结果。 |
| 图片压缩 / 格式转换 | 图片 | 上传图片后本地压缩；支持 WebP、PNG、JPEG 转换；支持质量和尺寸调整。 |
| SQL 格式化 | 格式化 | SQL 美化、压缩；支持关键字大写配置。 |
| User-Agent 解析器 | 网络 / 调试 | 解析浏览器、系统、设备、渲染引擎等信息。 |
| HTTP 状态码查询 | 查询 | 按状态码或关键词搜索，展示含义、分类和常见使用场景。 |
| MIME 类型查询 | 查询 | 根据扩展名查 MIME，或根据 MIME 反查常见扩展名。 |
该功能已作为独立工具页实现，路由为 /botw-map。核心目标是把一张高分辨率地图图片变成可漫游、可缩放、可筛选标注的交互地图。
建议技术方案：
- 使用 Leaflet 作为地图引擎。
- 使用
L.CRS.Simple，不接入真实经纬度地图服务。 - 使用
L.imageOverlay将本地地图图片铺到底图层。 - 用图片宽高建立 bounds，例如
[[0, 0], [height, width]]。 - 标注数据使用 JSON/TS 常量维护，字段包含
id、name、type、x、y、region、description。 - 标注点使用 Leaflet marker、circle marker 或自定义 icon。
- 图层筛选使用页面侧栏或顶部工具栏控制。
第一阶段能力已实现：
- 加载一张本地地图图片作为底图。
- 支持拖拽、缩放、双击缩放、缩放控件。
- 支持适配容器大小，首次进入自动 fit bounds。
- 支持少量示例标注点。
- 点击标注弹出名称、类型、区域和备注。
- 支持点击地图读取图片坐标。
- 支持按标注名称、区域和备注搜索定位。
- 支持标注类型显示/隐藏。
后续增强能力：
- 替换为正式授权的高分辨率地图底图。
- 扩充真实地点、神庙、塔、驿站、呀哈哈、回忆点等标注数据。
- 支持更细的图层分组和图层样式配置。
第三阶段能力：
- 支持新增、编辑、删除自定义标注，并暂存到
localStorage。 - 支持导入/导出标注 JSON。
- 支持不同地图版本或图层切换，例如普通地图、地形图、收集物地图。
- 支持标注完成度状态，例如未完成、已完成、收藏。
资源与版权注意：
- 地图底图需要使用可合法使用的图片资源，或由用户自行提供本地图片。
- 如果使用第三方整理的标注数据，需要确认授权来源。
- 工程内可以先放一张占位地图或低分辨率示例图，后续再替换为正式资源。
| 功能 | 分类 | 规划能力 |
|---|---|---|
| CSV / 表格转换 | 数据 | CSV、TSV、JSON 互转；支持首行作为字段名；展示表格预览。 |
| CSS Shadow 生成器 | CSS | 可视化生成 box-shadow 和 text-shadow；支持多层阴影。 |
| CSS Clamp 生成器 | CSS | 根据最小/最大字号和视口范围生成 clamp() 表达式。 |
| SVG 优化 / 预览 | 图片 / 开发 | 粘贴 SVG 后预览、压缩、复制；后续可支持下载。 |
| 密码生成器 | 生成 | 支持长度、字符集、排除相似字符、批量生成和强度提示。 |
| 正则可视化 | 格式化 | 将正则表达式结构可视化，辅助理解复杂表达式。 |
| Open Graph 预览器 | Web | 输入标题、描述、图片 URL 后预览社交分享卡片效果。 |
第一批建议按以下顺序实现：
- JWT 解析器
- 字符串工具箱
- JSON 转 TypeScript
- 二维码生成器
- Diff 对比工具
这批功能都适合沿用现有页面结构，并能明显提升 Tools Hub 作为开发者日常工具箱的覆盖面。
npm install
npm run dev生产构建：
npm run build本次盘点已执行 npm run build，构建通过。Vite 仅提示主 JS chunk 超过 500 kB，可在后续通过路由级懒加载或代码分包优化。