日常工作中，文本比对、JSON 格式化、编码转换、图片压缩、PDF 处理这类需求高频又琐碎，能找到的在线工具大多要求把内容上传服务器——客户资料、订单数据、未公开的合同文本不敢传；本地装软件则要面对广告弹窗、捆绑安装包和版本腐化；自己写脚本吧，为了一个正则或一次格式转换再搭半���环境，往往比干活本身还久。
本项目的立项原因正是切掉这三难：让这些高频小事从「找软件 / 求人 / 临时写脚本」变成「打开网页三秒解决」。
行业场景上，它面向的是没有专门工具预算的中小团队与一线从业者：程序员做接口联调与日志排查、运营与财务做表格与文案处理、跨境电商与行政岗做图片和单据整理、跨境业务做汇率以外的单位与时间换算。这些岗位的共同点是——需求零散、频次不高、数据敏感，恰好落在「现成软件太重、自己开发太贵」的夹缝里，纯前端本地化处理是成本最低的答案。
yunutil 在线工具集是一个纯前端 Web 工具站，包含 11 大分类工具。
文本处理：文本对比（Myers diff，行内精细高亮）、Markdown 编辑器、JSON 脱敏、全半角转换。格式化：JSON 格式化 / 数据转换 / 转 TS、SQL 格式化、XML 格式化、SQL 建表助手。编码转换：Base64、URL、Hex、Unicode 码点、ASCII 码表、进制转换。加密摘要：MD5、哈希摘要与校验、AES 加解密、密码生成与强度检查。图片：压缩、Base64、信息查看、裁剪、拼接、格式转换、水印、去水印、九宫格切图。PDF：图片转 PDF、合并、拆分、压缩、加水印。网络：IP 与子网、URL 拆解、MAC 地址、书签整理、HTTP 请求头。开发：正则测试（ReDoS 超时保护）、时间戳、JSON 路径查询、版本号比较、时区对照、Cron 表达式。生成器：二维码与条形码生成及解析、颜色工具、随机决策、字符串生成。生活：税后工资、贷款与提前还款测算、单位换算、日期计算、快递计费重、金额转中文大写。
主要特性：
1. 数据零上传——所有解析、加解密、图片与 PDF 处理 100% 在浏览器本地完成，不经过服务器，从根上消除数据泄露顾虑。
2. 零安装零广告，打开网址即用，不装插件也不装客户端。
3. 构建期预渲染所有页面为含完整正文的 HTML，配合独立 title/description、canonical 与 sitemap，解决纯前端站点不被搜索引擎收录的通病。
4. 支持简中、繁中、英、日、韩、法、德、俄、西、意、葡、越、泰、印尼 14 语种，界面与 SEO 信息同步多语言。
5. 注册表驱动架构，新增工具只需写组件加一条配置，路由、侧边菜单、首页卡片、多语言条目自动生成。
我独立完成项目从 0 到 1：需求规划、技术选型、架构设计、11 类 所有工具的页面实现、算法自研、14 语种国际化、预渲染与站点地图、nginx 部署、测试体系搭建。
技术栈 Vue 3 + Vite 6 + vue-router 4，不引入第三方 UI 库，样式全部自研；PDF 用 pdf-lib、pdfjs-dist，二维码用 qrcode-generator，无 CDN 与字体外链。架构以「工具注册表」为单一数据源，路由、菜单、卡片、多语言条目由它派生；逻辑算法层与组件层分离，纯函数可脱离浏览器独立测试。
亮点一，算法自研：文本对比实现完整 Myers diff（分词 + 行对齐 + 行内高亮）；MD5 手写并通过 RFC 1321 官方向量验证，再与 Node crypto 对拍 320 组，覆盖 UTF-8 代理对问题。亮点二，安全兜底：正则匹配放 Web Worker 并设 1.5 秒超时，灾难性回溯直接 terminate；Markdown 引擎拦截 javascript: 等危险协议，用户内容统一经 escapeHtml 出口。亮点三，SEO：针对爬虫不执行 JS 导致收录不了，构建期用 Vue SSR 把 63 个页面预渲染为含完整正文的 HTML，客户端水合接管，交互不变。亮点四，路由级懒加载，首屏只加载当前代码。
难点：SPA 空壳难收录（预渲染 + canonical + sitemap，且协议须与线上一致，否则被拒收）；ReDoS 卡死主线程（Worker + 超时终止）；HTTP 明文下剪贴板 API 不可用，自研 execCommand 通道；btoa 遇中文抛错，须先经 TextEncoder 转 UTF-8。
自建 22 套 Node 测试脚本，纯逻辑 5128 项 + 服务端渲染 599 项断言，全部通过。
评论