# toolbox **Repository Path**: ljh-project/toolbox ## Basic Information - **Project Name**: toolbox - **Description**: 一站式安装前端所需工具、环境等软件，持续更新…… ——基本AI生成 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2026-01-19 - **Last Updated**: 2026-02-03 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 前端工具箱 (Frontend Toolbox) 一款帮助前端开发者**快速检测、安装、管理**常用开发工具的桌面应用。 > 告别繁琐的手动下载，一键获取最新版本，自定义安装目录。 --- ## 功能亮点 | 功能 | 说明 | | ------------ | ---------------------------------------------- | | **智能检测** | 自动扫描本机已安装工具及版本号 | | **一键安装** | 自动抓取官网最新版本，下载到桌面并启动安装向导 | | **版本更新** | 支持 winget 一键检查更新并升级 | | **7天缓存** | 首次检测后缓存结果，后续秒开应用 | | **系统托盘** | 关闭窗口最小化到托盘，不打扰工作 | | **中断安装** | 支持在下载和安装过程中随时取消，灵活控制安装流程 | --- ## 支持的工具 | 分类 | 工具 | | -------------- | --------------------------------------------------- | | **前端环境** | Node.js、pnpm、Yarn、NVM | | **代码编辑** | VS Code、Cursor、Trae、WebStorm、HBuilderX | | **小程序开发** | 微信开发者工具、抖音开发者工具、DevEco Studio | | **API 调试** | Postman、Apipost | | **版本控制** | Git、GitHub Desktop、Sourcetree、TortoiseGit | | **浏览器** | Chrome、Firefox Developer、Edge | | **实用工具** | 7-Zip、Everything、PixPin、uTools、Geek、彩虹工具箱 | --- ## 技术栈 - Electron 39 + Vue 3.5 + TypeScript 5 - Element Plus 2（UI 组件） - Puppeteer-core（网页抓取，复用系统浏览器） - electron-vite 5 + Vite 7（构建） --- ## 快速开始 ### 环境要求 - Node.js >= 18 - Chrome 或 Edge 浏览器（用于抓取下载链接） ### 功能使用 - **一键安装**：点击工具卡片上的“立即安装”按钮，自动获取最新版本并下载到桌面 - **中断安装**：在下载过程中可点击“取消安装”按钮中断下载；在安装向导启动后可选择是否取消安装 - **版本更新**：已安装工具可点击“检查更新”或“立即更新”按钮进行版本升级 ### 安装运行 ```bash # 安装依赖 npm install # 开发模式 npm run dev # 打包（Windows） npm run build:win ``` 打包输出到 `release/` 目录： - `toolbox-x.x.x-setup.exe` - 安装版 - `toolbox-x.x.x-portable.exe` - 便携版 --- ## 项目结构 ``` toolbox/ ├── src/ │ ├── main/ # Electron 主进程 │ │ └── index.ts # 主进程入口 │ │ # - IPC 通信处理 │ │ # - 系统托盘管理 │ │ # - 窗口控制 │ │ # - 下载链接抓取（Puppeteer） │ │ # - 工具安装/更新逻辑 │ │ # - 缓存管理（7天有效期） │ │ │ ├── preload/ # 预加载脚本 │ │ ├── index.ts # 暴露安全 API 给渲染进程 │ │ └── index.d.ts # TypeScript 类型声明 │ │ │ └── renderer/ # Vue 渲染进程 │ ├── index.html # HTML 入口 │ └── src/ │ ├── components/ # Vue 组件 │ │ ├── TitleBar.vue # 自定义标题栏（最小化/最大化/关闭/反馈菜单） │ │ ├── SideMenu.vue # 侧边栏菜单（星空主题、分类导航、刷新按钮） │ │ ├── ToolContent.vue # 工具内容区（搜索框、子分类分组） │ │ └── ToolCard.vue # 工具卡片（状态显示、安装/更新按钮） │ │ │ ├── config/ │ │ └── tools.ts # 工具配置（添加新工具在这里） │ │ # - categories: 分类定义 │ │ # - tools: 工具列表 │ │ │ ├── types/ │ │ └── tool.ts # TypeScript 类型定义 │ │ # - Tool: 工具接口 │ │ # - InstallStatus: 安装状态枚举 │ │ # - ToolCategory: 分类接口 │ │ │ ├── assets/ │ │ ├── icons/ # 图标资源 │ │ │ ├── images/ # 工具图标（png/svg/ico/webp） │ │ │ ├── bug.svg # 反馈-问题图标 │ │ │ ├── email.svg # 反馈-邮箱图标 │ │ │ └── gitee.svg # 反馈-Gitee图标 │ │ ├── base.css # 基础样式变量 │ │ └── main.css # 全局主样式 │ │ │ ├── App.vue # 根组件（布局、安装逻辑、状态管理） │ ├── main.ts # 渲染进程入口 │ └── env.d.ts # Vite 环境类型声明 │ ├── resources/ # 应用资源 │ ├── icon.ico # Windows 应用图标 │ └── icon.png # 通用应用图标 │ ├── build/ # 打包资源 │ └── icon.ico # 安装程序图标 │ ├── .vscode/ # VSCode 配置 │ ├── extensions.json # 推荐扩展 │ ├── launch.json # 调试配置 │ └── settings.json # 编辑器设置 │ ├── electron-builder.yml # 打包配置（NSIS/Portable） ├── electron.vite.config.ts # Vite 构建配置 ├── eslint.config.mjs # ESLint 配置 ├── tsconfig.json # TypeScript 基础配置 ├── tsconfig.node.json # Node 环境 TS 配置 ├── tsconfig.web.json # Web 环境 TS 配置 ├── package.json # 项目依赖和脚本 ├── LICENSE.txt # MIT 许可证 └── README.md # 项目说明 ``` --- ## 添加新工具 只需 **3 步**： ### 1. 添加图标 将图标放到 `src/renderer/src/assets/icons/images/` ``` 支持：.svg（推荐）、.png、.ico 命名：工具ID.扩展名（如 typora.svg） ``` ### 2. 添加工具配置 编辑 `src/renderer/src/config/tools.ts`，在 `tools` 数组中添加： ```typescript { id: 'typora', name: 'Typora', version: '最新版', description: '简洁优雅的 Markdown 编辑器', categoryId: 'dev-tools', // frontend-env | dev-tools | version-control | browser | utilities subCategory: '文档工具', // 可选，子分类 platforms: ['windows'], icon: 'typora.svg', website: 'https://typora.io/', installCommand: 'winget install Typora.Typora --accept-source-agreements --accept-package-agreements', checkCommand: 'typora --version', // 或注册表检测 status: InstallStatus.NOT_INSTALLED } ``` ### 3. 配置下载链接（必填） 编辑 `src/main/index.ts`，选择以下任一方式： **方式 A：官方 latest 链接**（URL 不含版本号） ```typescript const DIRECT_DOWNLOAD_URLS = { // 固定写法 typora: 'https://download.typora.io/windows/typora-setup-x64.exe' // ↑ 修改：工具ID ↑ 修改：永久最新版下载链接（不含版本号） } ``` **方式 B：动态抓取**（从下载页面提取） ```typescript const FETCH_CONFIGS = { // 固定写法 typora: { // ← 修改：工具ID（与 tools.ts 中的 id 一致） url: 'https://typora.io/download', // ← 修改：下载页面地址 selectors: ['a[href*=".exe"]'], // ← 修改：CSS选择器（定位下载链接） linkPatterns: [/typora.*\.exe/i], // ← 修改：链接匹配正则 versionPattern: /(\d+\.\d+\.\d+)/ // 通常不用改（提取版本号） } } ``` > ⚠️ **不配置下载链接会怎样？** > > 安装时会直接执行 winget 静默安装，无法自定义安装目录，软件默认装到 C 盘。 > > **注意**：配置下载链接后，用户可在下载过程中使用“取消安装”功能中断安装，提升使用灵活性。 --- ## 检测命令示例 ```powershell # CLI 工具 node --version # 桌面应用（检测文件） Test-Path "$env:LOCALAPPDATA\Programs\MyTool\app.exe" # 桌面应用（读取版本） $p = "$env:LOCALAPPDATA\Programs\MyTool\app.exe" if (Test-Path $p) { (Get-Item $p).VersionInfo.ProductVersion } # 从注册表读取 $reg = Get-ItemProperty "HKCU:\SOFTWARE\Microsoft\Windows\CurrentVersion\Uninstall\*" | Where-Object { $_.DisplayName -like "*MyTool*" } if ($reg) { $reg.DisplayVersion } ``` --- ## 主要 IPC 通道 | 通道 | 说明 | | --------------------- | ---------------- | | `check-tool` | 检测工具安装状态 | | `install-tool` | 安装工具 | | `fetch-download-link` | 获取下载链接 | | `check-update` | 检查更新 | | `update-tool` | 执行更新 | | `cancel-install` | 中断安装 | | `window-close` | 最小化到托盘 | --- ## 问题反馈 - 邮箱：810520030@qq.com - Gitee：https://gitee.com/ljh-project/toolbox/issues --- ## 免责声明 本项目中使用的第三方软件图标均为各自公司或组织的商标，仅用于标识目的。本项目与这些公司无关联关系。 ## License MIT License © 2025 Frontend Toolbox