图形化脚本库 - 收集、预览和管理分散的脚本文件
这是一个基于 Electron 的桌面应用程序，用于收集、预览和管理各种类型的脚本文件。它可以帮助您整理分散在不同位置的脚本文件，并提供便捷的查看和管理功能。
- 支持多种脚本文件类型（Shell、PowerShell、Python、JavaScript、Batch 等）
- 图形化界面，易于使用
- 文件内容预览和语法高亮
- 文件信息查看（大小、修改时间等）
- 搜索和过滤功能
- 扫描目录功能，批量添加脚本文件
- 脚本分类和标签管理
- 统计信息展示
- Electron (桌面应用框架)
- React (前端框架)
- Node.js (后端服务)
- Vite (前端构建工具)
- Node.js >= 20.19.4
- npm >= 10.8.2
使用一键安装命令自动安装所有依赖：
npm run install:all或者手动安装：
# 安装根目录依赖
npm install
# 安装后端依赖
cd backend
npm install
cd ..
# 安装前端依赖
cd frontend
npm install
cd ..# 启动 Electron 应用（开发模式）
npm run dev在 Windows 环境下开发时，如果遇到终端日志中文乱码问题，可以修改package.json中的命令，在命令前添加 chcp 65001 && 来设置 UTF-8 编码：
{
"scripts": {
"dev": "chcp 65001 && set NODE_ENV=development&& cd frontend && npm run build && cd .. && electron .",
"dev:prod": "chcp 65001 && set NODE_ENV=production&& cd frontend && npm run build && cd .. && electron ."
}
}这样可以确保在 Windows 命令行中正确显示中文日志信息。
# 构建前端应用
npm run build:frontend# 打包 Electron 应用（包含前端构建）
npm run build# 构建 Windows 应用
npm run build-win
# 构建 Linux 应用
npm run build-linux
# 构建 macOS 应用
npm run build-mac
# 构建 Windows 便携版应用
npm run build-portable
# 构建 Windows 安装程序
npm run build-installer
# 构建所有平台应用
npm run dist-all构建输出文件将位于以下目录：
dist-electron/- Electron构建输出目录release/- 打包后的可执行文件目录
本项目使用 electron-icon-builder 工具来生成应用所需的各种尺寸图标。
- 准备一张 1024x1024 像素的 PNG 格式图片，命名为
icon.png - 将该图片放置在
resources/目录下 - 运行以下命令生成各种尺寸的图标：
npm run electron:generate-icons该命令会根据 resources/icon.png 生成多种尺寸的图标文件，并输出到 build/icons/ 目录下。
Electron 应用中使用的图标主要分为以下几类：
- 窗口图标：应用窗口左上角显示的图标
- 任务栏图标：应用在任务栏/ dock 中显示的图标
- 安装包图标：安装程序文件的图标
- 桌面图标：安装后在桌面创建的快捷方式图标
在项目中，图标配置主要体现在以下几个地方：
-
窗口图标配置： 在
electron/main.js文件中，通过icon属性设置窗口图标：mainWindow = new BrowserWindow({ // ... icon: path.join(__dirname, '../resources/icon.png'), // ... });
-
构建图标配置： 通过
electron-icon-builder生成的图标位于build/icons/目录下，包含多种格式和尺寸：icon.icns- macOS 应用图标icon.ico- Windows 应用图标- 各种尺寸的 PNG 图片 - 用于不同场景
-
资源文件： 项目中的图标资源文件位于：
resources/icon.png- 原始图标文件build/icons/- 生成的各种图标文件
- 点击界面右上角的"添加脚本"按钮
- 选择要添加的脚本文件
- 文件将自动添加到脚本库中
- 点击界面右上角的"扫描目录"按钮
- 选择要扫描的目录
- 设置扫描参数（可选）
- 点击"开始扫描"按钮
- 扫描完成后，选择要添加的脚本文件
- 在脚本列表中点击任意脚本
- 可以查看脚本的详细信息和内容
- 支持语法高亮显示
- 在脚本列表中点击脚本右侧的"编辑"按钮
- 可以修改脚本的名称、描述、标签等信息
- 保存修改后信息将自动更新
- 使用顶部搜索框可以按名称、描述、标签搜索脚本
- 使用左侧边栏可以按脚本类型过滤
- 点击搜索设置图标可以设置精确匹配和大小写敏感选项
scripts-hub/
├── backend/ # 后端服务
│ ├── data/ # 数据存储目录
│ ├── utils/ # 工具函数
│ ├── config.js # 配置文件
│ └── index.js # 后端入口文件
├── frontend/ # 前端应用
│ ├── public/ # 静态资源
│ ├── src/ # 源代码
│ │ ├── components/ # React组件
│ │ ├── context/ # React上下文
│ │ ├── hooks/ # React自定义钩子
│ │ ├── services/ # API服务
│ │ ├── styles/ # 样式文件
│ │ ├── utils/ # 工具函数
│ │ ├── App.jsx # 主应用组件
│ │ └── main.jsx # 入口文件
│ └── vite.config.js # Vite配置
├── electron/ # Electron主进程
│ ├── main.js # 主进程文件
│ └── preload.js # 预加载脚本
├── resources/ # 应用资源
│ ├── icons/ # 应用图标
│ └── icon.png # 应用主图标
└── README.md # 项目说明文档
应用数据存储在以下目录：
- Windows:
C:\Users\[用户名]\AppData\Roaming\scripts-hub\ - macOS:
~/Library/Application Support/scripts-hub/ - Linux:
~/.config/scripts-hub/
数据包括：
data/datafile/scripts-datafile.json- 脚本元数据文件
当打包成单文件应用时，数据将存储在用户数据目录中，确保数据在应用更新时不会丢失。
应用支持通过环境变量进行配置，可以在 backend/.env 文件中设置以下参数：
MAX_SCAN_FILES- 扫描目录时的最大文件数限制（默认：10000）SCAN_RECURSIVE- 是否启用递归扫描（默认：true）SCAN_SHOW_PROGRESS- 扫描目录时是否显示进度信息（默认：true）
示例 .env 文件：
MAX_SCAN_FILES=5000
SCAN_RECURSIVE=true
SCAN_SHOW_PROGRESS=true欢迎提交 Issue 和 Pull Request 来帮助改进项目。
本项目采用 MIT 许可证，详情请见 LICENSE 文件。
BeginnerCong