不懂战国1. 项目背景与核心价值
去年在开发个人博客时，我经常需要临时使用各种在线工具：JSON格式化、二维码生成、颜色选择器...每次都要打开新标签页搜索特定工具网站，既低效又分散注意力。于是萌生了一个想法：为什么不能把这些常用开发者工具直接集成到自己的网站里？
这个项目的本质是构建一个轻量级的Web应用聚合平台，将高频使用的技术工具以组件形式嵌入个人站点。相比传统方案，它解决了三个核心痛点：
- 工具碎片化：不再需要收藏夹里存几十个工具网站
- 数据隐私：敏感代码/数据无需上传到第三方服务器
- 定制自由：可以按需组合工具，甚至二次开发功能
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术架构设计
2.1 前端实现方案
选择纯前端实现是考虑到：
- 零服务器成本（适合个人站点）
- 即时响应（无需网络请求）
- 隐私保障（数据不离开浏览器）
主要技术栈：
javascript复制// 核心框架
const stack = {
ui: 'TailwindCSS + DaisyUI', // 原子化CSS方案
logic: 'Vanilla JS + Web Components', // 避免框架依赖
build: 'Vite', // 极速构建
deploy: 'Cloudflare Pages' // 免费边缘网络
}
2.2 工具组件化设计
每个工具都是独立Web Component，通过自定义元素加载：
html复制<!-- 示例：Base64编码工具 -->
<dev-tool type="base64">
<textarea slot="input"></textarea>
<div slot="output"></div>
</dev-tool>
关键设计原则：
- 统一接口规范：所有工具实现相同的input/output插槽
- 状态隔离：通过Shadow DOM避免CSS污染
- 懒加载：动态import工具脚本
3. 核心工具实现细节
3.1 JSON格式化工具
采用Monaco Editor作为编辑器核心：
javascript复制class JSONFormatter extends HTMLElement {
connectedCallback() {
t