Tzioan4/transformJS

# transform JS [](https://pagespeed.web.dev/analysis?url=https://transformjs.com/) [](https://pagespeed.web.dev/analysis?url=https://transformjs.com/) [](https://opensource.org/licenses/MIT) [](https://react.dev/) [](https://vitejs.dev/) 快速、私密且现代的开发工具——专为日常工作流打造。 TransformJS 是一系列轻量级的、基于浏览器的实用工具集合，旨在帮助开发者更快速地工作，避免不必要的复杂性。它使用 React 和 Vite 构建，并部署在 Vercel 上。 **在线演示：** [transformjs.com](https://transformjs.com/) ## 设计理念 TransformJS 遵循一个简单的理念： - 快速的工具 - 简洁的界面 - 零干扰 - 隐私至上 所有功能完全在您的浏览器内运行。无需账户。无分析追踪。无数据库。无服务器端处理。您的数据永不离开您的设备。 ## 性能表现 TransformJS 专为速度和隐私而构建： - **移动端 PageSpeed：** 95-98 (处于网络前5%) - **桌面端 PageSpeed：** 98-100 - **首次内容绘制 (FCP)：** 1.8秒 (移动端, Slow 4G) - **最大内容绘制 (LCP)：** 2.1秒 (移动端, Slow 4G) - **100% 客户端运行** —— 无服务器，无追踪，无分析 - **自托管字体** —— 零第三方请求 - **懒加载路由** —— 每个工具拥有独立的打包文件 完整的优化历程请见 [`docs/SPRINTS.md`](./docs/SPRINTS.md)。 ## 工具列表 | 工具 | 描述 | | --------------------- | --------------------------------------------------------- | | JSON 格式化器 | 使用语法高亮美化、压缩和验证 JSON | | Base64 工具 | 编码和解码 Base64 字符串 (文本 + 二进制) | | URL 编码器 / 解码器 | 符合 RFC 3986 的 URL 组件编码 | | HTML 预览 | 针对 HTML 和 CSS 的沙盒化实时渲染 | | Markdown 预览 | GitHub 风格 Markdown 到 HTML 的转换 | | JWT 调试器 | 解码头部和有效载荷，验证 HMAC 签名 | | YAML 转 JSON | 将 YAML 配置转换为简洁的 JSON | | SQL 格式化器 | 格式化和美化 SQL 查询，并对破坏性查询发出警告 | | 哈希生成器 | 通过 Web Crypto API 生成 SHA-1、SHA-256、SHA-512 | | 密码生成器 | 使用密码学安全的随机数生成密码，附带熵值计 | | CSV 转 JSON | 符合 RFC 4180 的 CSV 解析 | | 正则表达式测试器 | 实时模式匹配，支持捕获组 | | FTL 预览器 | 使用模拟 JSON 数据预览 Apache FreeMarker 模板 | | 大小写转换器 | 驼峰命名法(camelCase)、蛇形命名法(snake_case)、短横线命名法(kebab-case)、帕斯卡命名法(PascalCase) 等 | | UUID 生成器 | 批量生成密码学安全的 UUID v4 | | URL 解析器 | 将 URL 分解为协议、主机、端口、路径、参数等部分 | | 差异检查器 | 使用 LCS 算法进行逐行对比 | | 颜色转换器 | HEX、RGB、HSL 转换，附带实时颜色拾取器 | 更多工具正在持续添加中。 ## 技术栈 - **React 19** —— 组件架构 - **Vite 8** —— 构建工具和开发服务器 - **React Router 7** —— 支持懒加载的客户端路由 - **Web APIs** —— 加密、剪贴板、沙盒化 iframe - **Web Workers** —— 将繁重的解析任务从主线程剥离 (YAML、正则表达式) - **自定义 CSS** —— 使用 CSS 变量的设计系统，无 UI 框架 - **Vercel** —— 边缘 CDN 部署 ## 架构 该项目采用模块化、基于工具的架构设计，旨在具备可扩展性。 ### 结构亮点 - **隔离的工具组件** —— 每个工具都是自包含的 - **集中式工具注册表** —— `src/tools/index.jsx` 作为唯一数据源 - **自动生成路由** —— 路由从注册表派生 - **可复用布局和钩子** —— `ToolLayout`、`useCopy`、`useKeyboardShortcuts` - **分离的样式架构** —— 每个组件和工具都有独立的 CSS 文件 - **懒加载路由** —— 按工具进行代码分割以获得最佳包大小 ### 项目结构 ``` src/ ├── components/ # Shared UI (Navbar, Footer, Hero, ToolCard) ├── hooks/ # Custom React hooks ├── layouts/ # Shared layout wrappers ├── pages/ # Top-level pages (Home, About, Privacy, 404) ├── styles/ # CSS architecture │ ├── components/ │ ├── pages/ │ └── tools/ ├── tools/ # Tool implementations │ ├── code/ # HTML, Markdown, RegEx, FTL, Case, Diff, Color │ ├── data/ # JSON, YAML, SQL, CSV │ ├── security/ # Base64, URL, JWT, Hash, Password │ └── text/ # UUID, URL Parser └── utils/ # Pure utility functions public/ └── fonts/ # Self-hosted Inter + JetBrains Mono (woff2) ``` ## 本地开发 克隆仓库： ``` git clone https://github.com/Tzioan4/transformJS.git cd transformJS ``` 安装依赖： ``` npm install ``` 启动开发服务器： ``` npm run dev ``` 生产环境构建： ``` npm run build ``` 本地预览生产构建： ``` npm run preview ``` 代码检查： ``` npm run lint ``` ## 开发历史 TransformJS 通过几次专注的开发迭代（Sprint）逐步演进： - **迭代 1** —— 关键错误修复及所有工具的正确性验证 - **迭代 2** —— 用户体验打磨：输入验证、反馈消息、安全警告 - **迭代 3** —— 移动端性能优化 (PageSpeed 81 → 97) 版本历史请见 [`CHANGELOG.md`](./CHANGELOG.md)，详细回顾请见 [`docs/SPRINTS.md`](./docs/SPRINTS.md)。 ## 未来计划 - 更好的移动端用户体验改进 - 无障碍性提升 (当前得分: 93，目标: 100) - 增加工具 (XML 格式化器、图片转 Base64、Cron 表达式解析器、时间戳转换器) - 自动化测试套件 (单元测试使用 Vitest，端到端测试使用 Playwright) ## 初衷 TransformJS 最初是一个专注于以下方面的学习和作品集项目： - React 架构与可扩展的前端模式 - 可复用的组件系统 - 现代构建工具和路由 - 性能优化 - Git 工作流与部署流水线 - UI/UX 设计 随着时间的推移，它已演变成一个在日常工作中使用的实用工具平台。 ## 许可证 依据 [MIT 许可证](./LICENSE) 授权。 版权所有 © 2026 [Tziotis Ioannis](https://www.linkedin.com/in/giannistziotis/)

标签：CMS安全, JavaScript, JSON格式化, LangChain, React, Syscalls, Vercel部署, Vite, Web工具, 代码格式化, 免费工具, 在线工具, 威胁情报, 客户端处理, 开发者工具, 快速, 性能优化, 无服务器, 检测绕过, 浏览器应用, 网络安全, 自定义脚本, 轻量级, 隐私保护