ToolFun-浏览器本地化的实用小工具聚合网站(https://toolfun.top)

技术信息

语言技术
HTML5、CSS、JavaScript系统类型
Web行业分类
开发工具

作品详情

行业场景

日常会用到的些小工具，以前网上搜索的不是要登录就是找不到合适的，所以自己vibe coding了一个工具聚合类网站，遇到新的需求会往上增加工具

功能介绍

ToolFun 功能集合（共 13 项）

一、文件与媒体工具
1. 图片工作室：图片格式转换、压缩、调整尺寸、裁剪旋转、去背景、生成网站图标。
2. 帧动画制作：将有序图片序列合成为 GIF、MP4、WebM、MOV、MKV。
3. 视频转换：视频格式转换、调整尺寸、截取片段、提取音频。
4. 本地视频编辑器：多轨时间线编辑、字幕、关键帧、音频混音、滤镜、视频导出。
5. 批量重命名：批量修改本地文件名。
6. 文件查看器：打开文件夹或拖入文件，在浏览器内浏览和预览。

二、文本工具
7. JSON 格式化：JSON 格式化、校验、压缩。
8. Base64 编解码：文本及文件的 Base64 编码与解码。

三、开发工具
9. 哈希计算器：计算 MD5、SHA-1、SHA-256、SHA-512。
10. Unix 时间戳转换：秒或毫秒时间戳与本地时间、UTC、ISO 8601 格式互转。
11. JWT 解码器：解码 JWT 的 Header、Payload、Signature。
12. UUID 生成器：生成 UUID v4、v7。

四、通用工具
13. 二维码生成器：将文本或网址生成二维码，支持实时预览。

项目实现

1. 前端框架：Astro 5 + React 18，采用静态页面与交互组件结合的架构。
2. 开发语言：TypeScript，启用严格类型检查。
3. 样式与组件：Tailwind CSS 4、Radix UI、Lucide React 图标，以及自定义 UI 组件。
4. 状态管理：Nanostores，用于组件间共享状态。
5. 动画：GSAP + ScrollTrigger。
6. 图片处理：Canvas、react-easy-crop、@discourse/heic、@jsquash/oxipng，分别用于图片处理、裁剪、HEIC 解码和 PNG 优化。
7. 音视频处理：Mediabunny、FFmpeg WebAssembly、gifenc，用于视频转换、媒体导出和 GIF 编码。
8. 文本与代码展示：react-markdown、remark-gfm、rehype-highlight、highlight.js。
9. 浏览器能力：File System Access API 读写本地文件，Web Crypto API 处理加密摘要和随机数，IndexedDB 保存视频编辑项目。
10. 国际化：Astro 国际化路由 + 自定义中英文语言包。
11. 构建与检查：Vite、Astro Check、Prettier、自定义 SEO 审计脚本。
12. 部署配置：GitHub Actions + Wrangler + Cloudflare Pages，CI 使用 Node.js 20。

整体是以浏览器本地处理为核心的静态工具站，没有独立业务后端或服务端数据库。