DevBox 开发工具箱

动机

每次要格式化一段 JSON，都得打开一个满是广告的在线网站，还要担心数据被上传。

这类工具的需求场景有一个共同特征：频率高、单次耗时短、数据敏感。剪贴板里经常是一段接口返回、一条日志、一份配置——谁也不想把它们贴到来路不明的网页表单里。而在线工具站的模式恰好全踩反了：广告追踪、数据过服务器、页面里三分之一的面积和你无关。

DevBox 是纯前端的 PWA 应用，装到本地后完全离线运行。

设计原则

• 键盘优先：所有工具都能用快捷键触达，Ctrl+K 唤起命令面板，输入即搜，回车直达；
• 零网络请求：数据不出浏览器，装完后可以断网使用；
• 打开即用：没有注册、没有引导页、没有「先看看我们的新功能」弹窗。

架构：壳层 + 注册表 + 独立模块

fig. 新增一个工具 = 写一个新模块 + 注册一行，壳层零改动

整体分两层：壳层负责快捷键系统、命令面板、路由和 PWA 能力（manifest + service worker 预缓存）；工具层是一组互相独立的模块，每个工具自己声明名称、关键词、快捷键和组件，注册进注册表即可被搜索和调用。

所有工具模块按需加载，不进首屏包。整体基于 Vue 3 + Vite 构建，首屏体积不到 60KB——比大多数在线工具站的一个广告脚本还小。

一些细节

• 输入跟随剪贴板：打开工具时自动读取剪贴板，能解析就直接填好，省掉一次粘贴；
• 结果一键回写：处理完的内容回车即复制回剪贴板，整个动线是「复制 → 唤起 → 回车 → 粘贴」；
• 最近使用置顶：命令面板按使用频率排序，常用工具永远在第一屏。

体会

工具类产品的竞争力不在功能多，在动线短。从「想起要用」到「拿到结果」中间的每一步——搜索、等加载、关广告、粘贴、复制——都是流失点。把这些摩擦一个个拆掉之后，工具才会真正进入肌肉记忆。