Galgame 聚合搜索前端 - 基于 Vue 3 + TypeScript + Tailwind CSS
🌐 在线访问: searchgal.homes
- 🎮 聚合搜索 - 整合多个 Galgame 资源站点的搜索结果
- 🚀 流式响应 - SSE 实时流式显示搜索进度和结果
- 🏷️ 智能标签 - 自动标注资源特性（直接下载、需登录、BT/磁力等）
- 📚 游戏信息 - 集成 VNDB 数据库，显示游戏详情和截图
- 🤖 AI 翻译 - 自动翻译游戏简介为中文
- 💬 评论系统 - 基于 Artalk 的评论功能
- 🖼️ 随机背景 - IndexedDB 缓存的随机背景图片系统
- 📱 响应式设计 - 完美适配桌面和移动设备
- ⚡ 性能优化 - Pace.js 加载进度、Fancybox 图片预览、Lazysizes 懒加载、Quicklink 预加载
- 📲 PWA 支持 - 可安装为桌面/移动应用，支持离线访问
- 📡 RSS 订阅 - 订阅更新动态
- Vue 3.5 - 渐进式 JavaScript 框架
- TypeScript 5.9 - 类型安全的 JavaScript 超集
- Vite 7 - 下一代前端构建工具
- Pinia 3 - Vue 状态管理库
- Tailwind CSS 4.1 - 实用优先的 CSS 框架
- Lucide Icons - 现代化 SVG 图标库
- Artalk 2.9 - 评论系统
- Fancybox 6 - 图片和内容预览
- Pace.js 1.2 - 页面加载进度条
- Lazysizes 5.3 - 高性能图片懒加载
- Quicklink 2.3 - 智能预加载
- Cloudflare Workers API - 搜索聚合后端
- VNDB API - 游戏数据库
- AI Translation API - 智能翻译服务
- Node.js 18+
- pnpm 8+ (推荐) 或 npm
git clone https://github.com/Moe-Sakura/frontend.git
cd frontend# 复制环境变量模板
cp .env.example .env
# 根据需要修改 .env 文件中的配置
# 详见 docs/ENV_GUIDE.mdpnpm installpnpm devpnpm buildpnpm previewfrontend/
├── public/ # 静态资源
│ ├── favicon-*.png # 网站图标
│ └── sw.js # Service Worker
├── src/
│ ├── api/ # API 接口
│ │ └── search.ts # 搜索和 VNDB API
│ ├── components/ # Vue 组件
│ │ ├── SearchHeader.vue # 搜索头部
│ │ ├── SearchResults.vue # 搜索结果
│ │ ├── PlatformNav.vue # 平台导航
│ │ ├── FloatingButtons.vue # 浮动按钮
│ │ ├── CommentsModal.vue # 评论弹窗
│ │ └── VndbPanel.vue # 游戏信息面板
│ ├── stores/ # Pinia 状态管理
│ │ └── search.ts # 搜索状态
│ ├── utils/ # 工具函数
│ │ └── imageDB.ts # IndexedDB 图片缓存
│ ├── types/ # TypeScript 类型定义
│ │ ├── pace-js.d.ts
│ │ └── artalk.d.ts
│ ├── App.vue # 根组件
│ └── main.ts # 入口文件
├── index.html # HTML 模板
├── vite.config.ts # Vite 配置
├── package.json # 项目配置
└── tsconfig.json # TypeScript 配置
- 支持游戏和补丁两种搜索模式
- SSE 流式实时显示搜索进度
- 多平台并行搜索，结果即时展示
根据 Cloudflare Workers API 规范，自动标注资源特性：
| 标签 | 含义 | 说明 |
|---|---|---|
| 🟢 直接下载 | NoReq | 无需登录/回复即可下载 |
| 🔵 需登录 | Login | 需要账号登录 |
| 🟡 需付费 | LoginPay | 需登录且支付积分 |
| 🟣 登录+回复 | LoginRep | 需登录并回复/评论 |
| 🔷 需回复 | Rep | 需回复但无需登录 |
| 🎀 自建盘 | SuDrive | 自建网盘盘源 |
| ⚡ 不限速 | NoSplDrive | 不限速网盘（Onedrive/Mega） |
| 🟠 限速盘 | SplDrive | 限速网盘（百度/夸克/天翼） |
| 🔵 混合盘 | MixDrive | 混合网盘盘源 |
| 🟣 BT/磁力 | BTmag | BT 或磁力链接 |
| 🔴 需代理 | magic | 需要代理访问 |
- 集成 VNDB 数据库
- 显示游戏封面、截图、标题、别名
- 游戏时长评估
- AI 自动翻译简介
- 每秒从 API 获取新图片
- 每 5 秒自动切换背景
- IndexedDB 本地缓存（最多 9999 张）
- Fisher-Yates 洗牌算法确保完整遍历
- 预加载机制避免白屏闪烁
- 基于 Artalk 的现代化评论系统
- 支持 Markdown 语法
- 表情包支持
- 嵌套回复
默认使用 Cloudflare Workers API：
// src/api/search.ts
const apiUrl = 'https://cfapi.searchgal.homes'支持自定义 API 地址，在搜索页面输入框中填写即可。
如果使用本地 API 进行开发：
# 在 Wrangler-API 项目中
npx wrangler dev --local然后在前端使用：http://127.0.0.1:8787
# 安装 Vercel CLI
npm i -g vercel
# 部署
vercel# 安装 Netlify CLI
npm i -g netlify-cli
# 部署
netlify deploy --prod# 构建
pnpm run build
# 上传 dist 目录到 Cloudflare Pages项目不需要环境变量配置，所有 API 端点都在代码中硬编码或支持用户自定义。
本项目遵循 llms.txt 规范，为 AI 助手和大语言模型提供了结构化的项目文档。
- 📄 访问
/llms.txt获取项目的 LLM 友好文档 - 🔗 在线地址: searchgal.homes/llms.txt
欢迎提交 Issue 和 Pull Request！
- Fork 本仓库
- 创建特性分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 开启 Pull Request
- 使用 TypeScript 编写代码
- 遵循 Vue 3 Composition API 风格
- 使用 Tailwind CSS 进行样式编写
- 保持代码简洁和可读性
项目使用环境变量进行配置管理，所有配置项都可以通过 .env 文件进行自定义。
# 复制模板文件
cp .env.example .env
# 编辑配置（可选）
vim .env- API 地址：
VITE_API_BASE_URL - 功能开关：
VITE_ENABLE_COMMENTS、VITE_ENABLE_VNDB等 - 主题颜色：
VITE_THEME_PRIMARY、VITE_THEME_ACCENT - 性能配置：缓存时长、搜索冷却时间等
详细配置说明请查看：
本项目采用 MIT 许可证。
- GitHub: @Moe-Sakura
- 项目主页: searchgal.homes
⭐ 如果这个项目对你有帮助，请给个 Star！