🛠️ 工具盒子 - 多功能在线工具集

一个功能丰富的在线工具网站，基于 Monorepo 构建，主应用与工具包分离，目前已上线 31 个实用工具，目标支撑 1000+ 工具 的插件化平台。

🚀 快速开始（后续开发直接按此操作）

环境要求

• Node.js 24+
• pnpm 8+（推荐 corepack enable && corepack prepare pnpm@latest --activate）

一键跑起来

# 克隆后
pnpm install
pnpm dev

浏览器打开 http://localhost:3000 即可。

常用命令

详细目录结构、添加新工具步骤、工具包扩展方式见 docs/refactor-structure.md（开发必读）。

✨ 功能列表（31 个已上线）

📱 实用工具（16 个）

• 二维码生成 / 解析 / 美化、图片压缩、图片去背景、Markdown 转换、BMI 计算器、单位换算、PDF 工具集、短链接生成、简历生成器、AI 配色生成器、表情包生成、AI 文案生成、电子木鱼、人生进度条 等

👨‍💻 研发工具（11 个）

• JSON 格式化、Base64/URL 编解码、时间戳、正则/Cron、密码/哈希、代码美化、UUID、文本对比 等

🔍 查询 / 资讯（5 个）

• 邮编、天气、IP 查询、颜色拾取、每日热点

完整清单见 TOOLS_LIST.md。

🏗️ 技术栈与架构

• 前端：React 18 + TypeScript + Vite，Tailwind CSS，Lucide 图标
• 包管理：pnpm workspace（apps/*、packages/*、tools/*）
• 主应用：apps/web（壳 + 路由 + 按需懒加载工具包）
• 工具包：tools/tool-resume、tools/tool-pdf、tools/tool-qrcode 等，各自独立依赖、可独立开发
• 公共包：packages/core（类型 + ToolLoader）、packages/ui-kit（通用 UI）
• 后端：Express 静态 + API，新闻爬虫为 TypeScript（cheerio），Docker 部署无 Python 依赖

架构演进与规划见 ARCHITECTURE.md。

📂 项目结构（重构后）

toolbox/
├── apps/web/              # 主应用（开发/构建入口）
│   ├── src/
│   │   ├── App.tsx        # 路由 + React.lazy 加载工具包
│   │   ├── pages/         # 主应用内页面（未拆到 tools 的）
│   │   └── components/
│   ├── public/
│   └── package.json
├── packages/
│   ├── core/              # 工具类型、ToolLoader
│   └── ui-kit/            # 通用 UI 组件
├── tools/                 # 独立工具包（各自 package.json）
│   ├── tool-resume/       # 简历生成器
│   ├── tool-pdf/          # PDF 工具集
│   └── tool-qrcode/       # 二维码三合一
├── package.json           # 根脚本 + express + playwright
├── server.js              # 生产静态与 API
├── crawler/               # 新闻爬虫
└── docs/
    └── refactor-structure.md   # 开发与扩展说明（必读）

🔧 扩展新功能

方式一：在主应用内新增页面（简单工具、无重依赖）

1. 在 apps/web/src/pages/ 新建页面组件
2. 在 apps/web/src/App.tsx 增加路由
3. 在 apps/web/src/components/Layout.tsx 和 apps/web/src/pages/Home.tsx 增加导航与首页卡片
4. 更新 TOOLS_LIST.md

方式二：新增独立工具包（有专属依赖、需独立开发）

1. 在 tools/ 下新建 tool-xxx/，配置 package.json（name: @toolbox/tool-xxx，main: src/index.tsx）
2. 在 apps/web/package.json 增加 "@toolbox/tool-xxx": "workspace:*"
3. 在 apps/web/src/App.tsx 用 React.lazy(() => import('@toolbox/tool-xxx')) 挂路由
4. 在 apps/web/vite.config.ts 的 optimizeDeps.exclude 加上 @toolbox/tool-xxx
5. pnpm install 后即可开发

详细步骤与注意事项见 docs/refactor-structure.md。

🐳 Docker 部署

一键构建并运行（推荐）：

会依次执行：构建镜像 → 停止并删除旧容器（若存在）→ 启动新容器，访问 http://localhost:3000。

分步命令：

如需映射到 80 端口：docker run -d -p 80:3000 --name toolbox --restart unless-stopped toolbox:latest

若构建报错 pull access denied / insufficient_scope：多为未登录 Docker Hub 或网络限制。可先执行 docker login 后重试；或在 Docker 设置中配置可用镜像加速/镜像源后再构建。

📄 文档索引

📄 许可证

MIT License