diff --git a/.env.example b/.env.example index 1629a95..826f362 100644 --- a/.env.example +++ b/.env.example @@ -66,8 +66,6 @@ VITE_THEME_BACKGROUND_DARK=#1e293b # ============================================ # 性能配置 # ============================================ -VITE_QUICKLINK_DELAY=500 -VITE_QUICKLINK_LIMIT=10 VITE_LAZY_LOAD_THRESHOLD=0.5 # ============================================ diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..4e5c9d1 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,312 @@ +# SearchGal Frontend - AI 项目上下文 + +> 本文件帮助 AI 助手理解和管理此项目。请在每次对话开始时参考此文件。 + +## 项目概述 + +SearchGal 是一个 Galgame 聚合搜索前端,使用现代 Web 技术构建。 + +- **主题色**: 艳粉色 `#ff1493` +- **设计风格**: 液态玻璃拟态 (Liquid Glass / Glassmorphism) +- **目标用户**: Galgame 玩家 + +## 技术栈 + +| 类别 | 技术 | 版本 | +|------|------|------| +| 框架 | Vue 3 (Composition API) | 3.5 | +| 语言 | TypeScript | 5.9 | +| 构建 | Vite | 7.2 | +| 状态管理 | Pinia | 3.0 | +| 样式 | Tailwind CSS | 4.1 | +| 动画 | motion-v | 1.7 | +| 图标 | lucide-vue-next | 0.561 | +| 音效 | snd-lib | 1.2 | +| 评论 | Artalk | 2.9 | +| 图片预览 | @fancyapps/ui | 6.1 | +| 代码编辑 | vue-prism-editor + prismjs | - | + +## 项目结构 + +``` +src/ +├── api/ # API 请求 +│ └── search.ts # SSE 流式搜索、VNDB、AI 翻译 +├── components/ # Vue 组件 +│ ├── SearchHeader.vue # 搜索框 + 模式切换 +│ ├── SearchResults.vue # 搜索结果列表 +│ ├── VndbPanel.vue # VNDB 游戏信息面板 +│ ├── SettingsModal.vue # 设置面板 +│ ├── CommentsModal.vue # Artalk 评论 +│ ├── SearchHistoryModal.vue # 搜索历史 +│ ├── FloatingButtons.vue # 浮动按钮 + 站点导航 +│ ├── TopToolbar.vue # 顶部工具栏 +│ ├── StatsCorner.vue # 统计角标 +│ ├── UpdateToast.vue # SW 更新提示 +│ └── LiquidGlass.vue # 液态玻璃组件 +├── composables/ # 组合式函数 +│ ├── useSound.ts # snd-lib 音效封装 +│ ├── useKeyboardShortcuts.ts # 全局快捷键 +│ ├── usePerformance.ts # 性能工具 +│ ├── useProgress.ts # 进度条 +│ ├── useScrollLock.ts # 滚动锁定 +│ ├── useDebounce.ts # 防抖 +│ └── useClickEffect.ts # 点击涟漪效果 +├── stores/ # Pinia 状态管理 +│ ├── search.ts # 搜索状态 +│ ├── ui.ts # UI 状态 (模态框、暗色模式) +│ ├── settings.ts # 用户设置 +│ ├── history.ts # 搜索历史 +│ └── cache.ts # 缓存管理 +├── styles/ # 全局样式 +│ ├── base.css # 基础样式 + 性能工具类 +│ ├── glassmorphism.css # 液态玻璃效果 +│ ├── theme.css # 主题变量 +│ └── nprogress.css # 进度条样式 +├── utils/ # 工具函数 +│ ├── imageDB.ts # IndexedDB 图片缓存 +│ ├── persistence.ts # LocalStorage 持久化 +│ ├── theme.ts # 主题管理 +│ ├── icons.ts # 图标集中管理 +│ └── urlParams.ts # URL 参数处理 +├── config/ # 配置 +│ ├── index.ts # 统一配置入口 +│ └── env.ts # 环境变量 +├── App.vue # 根组件 +└── main.ts # 入口文件 +``` + +## 代码规范 + +### Vue 组件 + +```vue + + + + + +``` + +### 音效使用 + +```typescript +import { playTap, playButton, playToggle, playSwipe, playNotification, playCelebration, playCaution, playTransitionUp, playTransitionDown, playType, playSelect } from '@/composables/useSound' + +// 点击普通按钮 +playTap() + +// 重要按钮/功能按钮 +playButton() + +// 开关切换 +playToggle() + +// 滑动/刷新操作 +playSwipe() + +// 面板打开 +playTransitionUp() + +// 面板关闭 +playTransitionDown() + +// 成功操作 +playCelebration() + +// 警告/错误 +playCaution() + +// 通知 +playNotification() + +// 输入文字 (需节流 80ms) +playType() + +// 选择列表项 +playSelect() +``` + +### 液态玻璃效果 + +```html + +
+
+
+
+ +
+
+ + + +``` + +### 动画 + +```vue + + + +``` + +## 常用操作 + +### 添加新组件 + +1. 在 `src/components/` 创建 `.vue` 文件 +2. 使用 ` - SearchGal - Galgame 聚合搜索 @@ -84,19 +96,13 @@ - - - - - - - - - - + + + + @@ -193,10 +199,9 @@ } - + @@ -204,6 +209,8 @@