mirror of
https://github.com/Moe-Sakura/frontend.git
synced 2026-05-22 21:55:46 +08:00
3d414157a0
依赖： - pnpm update --latest（vite、vue、eslint、typescript 等 14 个包到最新版） - 显式加入 vue-eslint-parser ^10.4.0 / workbox-build ^7.4.1，消除 peer 警告 代码质量： - 修复 ESLint vue parser 配置（用 vue-eslint-parser 作主 parser），lint 错误 17 → 0 - tsconfig 启用 noUncheckedIndexedAccess，修复 16 个潜在 undefined 访问 bug - 删除未使用的 src/utils/icons.ts（723 行死代码） 打包体积： - PWA precache 10.5 MB / 424 项 → 740 KB / 24 项（字体改为运行时缓存） - vendor CSS gzip 201 KB → 141 KB（禁用字体 base64 内联，保留 unicode-range 子集策略） - Artalk CSS 跟随 CommentsModal 异步加载 - 字体精简：移除未使用的 300 字重，补上用到的 600 - 删除僵尸的 fancybox manualChunks 配置 健壮性： - SSE 搜索新增 AbortController + 60s 超时，新搜索取消旧请求，组件卸载取消进行中 - settings 持久化加 300ms 防抖 + QuotaExceededError 处理 + beforeunload 强制落盘 组件拆分： - SearchHeader.vue 1330 → 1061 行，抽出 SearchErrorCard 子组件 - SettingsModal.vue 1289 → 1171 行，抽出 AdvancedApiSettings 子组件 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
SearchGal Frontend
Galgame 聚合搜索前端 - 基于 Vue 3 + TypeScript + Tailwind CSS
🌐 在线访问: searchgal.top
✨ 特性
- 🎮 聚合搜索 - 整合多个 Galgame 资源站点的搜索结果
- 🚀 流式响应 - SSE 实时流式显示搜索进度和结果
- 🏷️ 智能标签 - 自动标注资源特性（直接下载、需登录、BT/磁力等）
- 📚 游戏信息 - 集成 VNDB 数据库，显示游戏详情和截图
- 🤖 AI 翻译 - 自动翻译游戏简介为中文
- 💬 评论系统 - 基于 Artalk 的评论功能
- 🖼️ 随机背景 - IndexedDB 缓存的随机背景图片系统
- 📱 响应式设计 - 完美适配桌面和移动设备
- ⚡ 性能优化 - NProgress 进度条、Fancybox 图片预览
- 📲 PWA 支持 - 可安装为桌面/移动应用，支持离线访问
🛠️ 技术栈
核心框架
- Vue 3.5 - 渐进式 JavaScript 框架
- TypeScript 5.9 - 类型安全的 JavaScript 超集
- Vite 7 - 下一代前端构建工具
- Pinia 3 - Vue 状态管理库
UI 框架
- Tailwind CSS 4.1 - 实用优先的 CSS 框架
- Lucide Icons - 现代化 SVG 图标库
功能库
- Artalk 2.9 - 评论系统
- Fancybox 6 - 图片和内容预览
- NProgress - 页面加载进度条
API 集成
- 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.md
安装依赖
pnpm install
🚀 开发
启动开发服务器
pnpm dev
构建生产版本
pnpm build
预览生产构建
pnpm preview
📁 项目结构
frontend/
├── 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 配置
🎯 核心功能
1. 聚合搜索
- 支持游戏和补丁两种搜索模式
- SSE 流式实时显示搜索进度
- 多平台并行搜索，结果即时展示
2. 智能标签系统
根据 Cloudflare Workers API 规范，自动标注资源特性：
| 标签 | 含义 | 说明 |
|---|---|---|
| 🟢 直接下载 | NoReq | 无需登录/回复即可下载 |
| 🔵 需登录 | Login | 需要账号登录 |
| 🟡 需付费 | LoginPay | 需登录且支付积分 |
| 🟣 登录+回复 | LoginRep | 需登录并回复/评论 |
| 🔷 需回复 | Rep | 需回复但无需登录 |
| 🎀 自建盘 | SuDrive | 自建网盘盘源 |
| ⚡ 不限速 | NoSplDrive | 不限速网盘（Onedrive/Mega） |
| 🟠 限速盘 | SplDrive | 限速网盘（百度/夸克/天翼） |
| 🔵 混合盘 | MixDrive | 混合网盘盘源 |
| 🟣 BT/磁力 | BTmag | BT 或磁力链接 |
| 🔴 需代理 | magic | 需要代理访问 |
3. 游戏信息展示
- 集成 VNDB 数据库
- 显示游戏封面、截图、标题、别名
- 游戏时长评估
- AI 自动翻译简介
4. 随机背景系统
- 每秒从 API 获取新图片
- 每 5 秒自动切换背景
- IndexedDB 本地缓存（最多 9999 张）
- Fisher-Yates 洗牌算法确保完整遍历
- 预加载机制避免白屏闪烁
5. 评论系统
- 基于 Artalk 的现代化评论系统
- 支持 Markdown 语法
- 表情包支持
- 嵌套回复
🔧 配置
API 端点配置
默认使用 Cloudflare Workers API：
// src/api/search.ts
const apiUrl = 'https://cf.api.searchgal.top'
支持自定义 API 地址，在搜索页面输入框中填写即可。
本地开发 API
如果使用本地 API 进行开发：
# 在 SearchGal 项目中
npx wrangler dev --local
然后在前端使用：http://127.0.0.1:8787
🌐 部署
Vercel
# 安装 Vercel CLI
npm i -g vercel
# 部署
vercel
Netlify
# 安装 Netlify CLI
npm i -g netlify-cli
# 部署
netlify deploy --prod
Cloudflare Pages
# 构建
pnpm run build
# 上传 dist 目录到 Cloudflare Pages
📝 环境变量
项目不需要环境变量配置，所有 API 端点都在代码中硬编码或支持用户自定义。
🤖 LLM 友好
本项目遵循 llms.txt 规范，为 AI 助手和大语言模型提供了结构化的项目文档。
- 📄 访问
/llms.txt获取项目的 LLM 友好文档 - 🔗 在线地址: searchgal.top/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.top
⭐ 如果这个项目对你有帮助，请给个 Star！