Fun/SearcjGal-frontend
1
0
Fork 0
mirror of https://github.com/Moe-Sakura/frontend.git synced 2026-03-18 05:33:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #20 from Moe-Sakura/dev

Browse Source 
251127
This commit is contained in:
Asuna
2025-11-27 13:08:38 +08:00
committed by GitHub
parent d76eeefe08 4d44d5b620
commit ac63eeae6c
14 changed files with 100 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
README.md
View File

@@ -57,30 +57,24 @@ cd frontend
### 安装依赖
```bash
# 使用 pnpm (推荐)
pnpm install
# 或使用 npm
npm install
```
## 🚀 开发
### 启动开发服务器
```bash
pnpm run dev
pnpm dev
```
访问 `http://localhost:5500`
### 构建生产版本
```bash
pnpm run build
pnpm build
```
### 预览生产构建
```bash
pnpm run preview
pnpm preview
```
## 📁 项目结构
@@ -234,7 +228,7 @@ pnpm run build
## 🙏 致谢
- [@Asuna](https://saop.cc/) - 提供服务器和技术支持
- [Asuna](https://saop.cc/) - 提供服务器和技术支持
- [VNDB](https://vndb.org/) - 游戏数据库
- [Artalk](https://artalk.js.org/) - 评论系统
- 所有 Galgame 资源站点

0
.eslintrc.md → docs/.eslintrc.md
View File

0
CHANGELOG.md → docs/CHANGELOG.md
View File

0
CODE_OF_CONDUCT.md → docs/CODE_OF_CONDUCT.md
View File

0
CONTRIBUTING.md → docs/CONTRIBUTING.md
View File

0
public/FAVICON_GUIDE.md → docs/FAVICON_GUIDE.md
View File

0
RESPONSIVE_DESIGN.md → docs/RESPONSIVE_DESIGN.md
View File

0
THEME_SYSTEM.md → docs/THEME_SYSTEM.md
View File

4
src/App.vue
View File

@@ -44,6 +44,7 @@ import {
applyTheme,
watchSystemTheme,
loadCustomCSS,
saveCustomCSS,
applyCustomCSS,
} from '@/utils/theme'
import StatsCorner from '@/components/StatsCorner.vue'
@@ -433,7 +434,8 @@ function saveSettings(customApi: string, newCustomCSS: string) {
searchStore.setCustomApi(customApi)
// 保存并应用自定义CSS
customCSS.value = newCustomCSS
applyCustomCSS(newCustomCSS)
saveCustomCSS(newCustomCSS) // 保存到 localStorage
applyCustomCSS(newCustomCSS) // 应用到页面
}
</script>

2
src/components/CommentsModal.vue
View File

@@ -91,7 +91,7 @@ function initArtalk() {
pageTitle: 'Galgame 聚合搜索',
server: 'https://artalk.saop.cc',
site: 'Galgame 聚合搜索',
darkMode: "auto",
darkMode: 'auto',
} as any)
} catch (error) {
// 静默处理错误

15
src/components/SearchHeader.vue
View File

@@ -96,12 +96,13 @@
<!-- Search Mode Selector - 使用 Tailwind 胶囊开关 -->
<div class="flex justify-center">
<div class="relative flex p-1.5 rounded-full
<div
class="relative flex p-1.5 rounded-full
bg-white/60 dark:bg-slate-700/60
backdrop-blur-xl backdrop-saturate-150
border border-white/40 dark:border-slate-600/30
shadow-lg shadow-theme-primary/10 dark:shadow-theme-accent/15">
shadow-lg shadow-theme-primary/10 dark:shadow-theme-accent/15"
>
<!-- 滑动背景指示器 -->
<div
class="absolute top-1.5 bottom-1.5 rounded-full
@@ -200,7 +201,7 @@
class="text-theme-primary dark:text-theme-accent hover:underline font-bold
hover:text-theme-primary-dark dark:hover:text-theme-accent-light
transition-colors duration-200"
>@Asuna</a>
>Asuna</a>
大佬提供的服务器和技术支持！没有大佬的魔法，咱可跑不起来！
</li>
<li>
@@ -303,10 +304,10 @@ let statusCheckInterval: number | null = null
// 检查状态页面是否在线
async function checkStatus() {
try {
const controller = new AbortController()
const controller = new window.AbortController()
const timeoutId = setTimeout(() => controller.abort(), 5000) // 5秒超时
const response = await fetch('https://status.searchgal.homes', {
await fetch('https://status.searchgal.homes', {
method: 'HEAD',
mode: 'no-cors', // 避免CORS问题
signal: controller.signal,
@@ -315,7 +316,7 @@ async function checkStatus() {
clearTimeout(timeoutId)
// no-cors模式下，只要请求不报错就认为是在线
statusOnline.value = true
} catch (error) {
} catch (_error) {
statusOnline.value = false
}
}

76
src/components/SettingsModal.vue
View File

@@ -1,25 +1,35 @@
<template>
<!-- 遮罩层 -->
<Transition enter-active-class="transition-opacity duration-200 ease-out" enter-from-class="opacity-0"
<Transition
enter-active-class="transition-opacity duration-200 ease-out" enter-from-class="opacity-0"
enter-to-class="opacity-100" leave-active-class="transition-opacity duration-200 ease-in"
leave-from-class="opacity-100" leave-to-class="opacity-0">
<div v-if="isOpen" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
@click.self="close">
leave-from-class="opacity-100" leave-to-class="opacity-0"
>
<div
v-if="isOpen" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
@click.self="close"
>
<!-- 对话框 -->
<Transition enter-active-class="transition-all duration-200 ease-out" enter-from-class="opacity-0 scale-95"
<Transition
enter-active-class="transition-all duration-200 ease-out" enter-from-class="opacity-0 scale-95"
enter-to-class="opacity-100 scale-100" leave-active-class="transition-all duration-200 ease-in"
leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
<div v-if="isOpen"
leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95"
>
<div
v-if="isOpen"
class="glassmorphism-modal rounded-2xl sm:rounded-3xl shadow-2xl w-full max-w-2xl max-h-[90vh] mx-4 flex flex-col overflow-hidden"
@click.stop>
@click.stop
>
<!-- 标题栏 -->
<div
class="flex items-center gap-2 sm:gap-3 px-4 sm:px-6 py-4 sm:py-5 border-b border-gray-200/50 dark:border-slate-700">
class="flex items-center gap-2 sm:gap-3 px-4 sm:px-6 py-4 sm:py-5 border-b border-gray-200/50 dark:border-slate-700"
>
<i class="fas fa-cog text-[#ff1493] dark:text-[#ff69b4] text-xl sm:text-2xl" />
<h2 class="text-lg sm:text-xl font-bold text-gray-800 dark:text-slate-100 flex-1">设置</h2>
<button
class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-gray-200/50 dark:hover:bg-slate-700/50 text-gray-500 hover:text-[#ff1493] dark:text-slate-400 dark:hover:text-[#ff69b4] transition-all duration-200"
@click="close">
@click="close"
>
<i class="fas fa-times text-xl" />
</button>
</div>
@@ -30,7 +40,8 @@
<!-- 自定义样式 -->
<div class="setting-section">
<h3
class="text-base sm:text-lg font-semibold text-gray-800 dark:text-slate-100 mb-3 flex items-center gap-2">
class="text-base sm:text-lg font-semibold text-gray-800 dark:text-slate-100 mb-3 flex items-center gap-2"
>
<i class="fas fa-paint-brush text-[#ff1493] dark:text-[#ff69b4]" />
<span>自定义样式</span>
</h3>
@@ -40,26 +51,31 @@
输入自定义 CSS 样式代码
</p>
<!-- CSS 代码编辑器 -->
<!-- CSS 代码编辑器 - 可拖动调整大小 -->
<div class="relative">
<textarea v-model="localCustomCSS" placeholder="*:hover {
<textarea
v-model="localCustomCSS" placeholder="*:hover {
display: none;
}" rows="10" class="w-full px-4 py-3 text-sm font-mono rounded-xl bg-white dark:bg-slate-700/50 backdrop-blur-md shadow-md focus:shadow-lg focus:scale-[1.01] transition-all outline-none border-2 border-transparent text-gray-900 dark:text-slate-100 placeholder:text-gray-400 dark:placeholder:text-slate-500 resize-none"
}" rows="10" class="w-full px-4 py-3 text-sm font-mono rounded-xl bg-white dark:bg-slate-700/50 backdrop-blur-md shadow-md focus:shadow-lg focus:scale-[1.01] transition-all outline-none border-2 border-transparent text-gray-900 dark:text-slate-100 placeholder:text-gray-400 dark:placeholder:text-slate-500 resize-y min-h-[200px] max-h-[600px]"
@focus="$event.target.style.borderColor = '#ff1493'"
@blur="$event.target.style.borderColor = 'transparent'" />
@blur="$event.target.style.borderColor = 'transparent'"
/>
<!-- 拖动提示图标 -->
<div class="absolute bottom-2 right-2 pointer-events-none text-gray-400 dark:text-slate-500 opacity-50">
<i class="fas fa-grip-lines-vertical text-xs" />
</div>
</div>
<!-- 提示信息 -->
<div
class="bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800/50 rounded-xl p-4">
class="bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800/50 rounded-xl p-4"
>
<div class="flex items-start gap-3">
<i class="fas fa-info-circle text-blue-500 dark:text-blue-400 text-lg mt-0.5" />
<div class="flex-1 text-sm text-blue-700 dark:text-blue-300">
<p class="font-semibold mb-1">使用说明</p>
<ul class="list-disc list-inside space-y-1">
<li>支持标准 CSS 语法</li>
<li>使用 <code class="px-1 py-0.5 bg-blue-100 dark:bg-blue-900/50 rounded">.dark</code>
选择器定义暗色模式样式</li>
<li>可以覆盖现有样式或添加新样式</li>
<li>修改后点击"保存"即可应用</li>
</ul>
@@ -72,7 +88,8 @@
<!-- API 设置 -->
<div class="setting-section">
<h3
class="text-base sm:text-lg font-semibold text-gray-800 dark:text-slate-100 mb-3 flex items-center gap-2">
class="text-base sm:text-lg font-semibold text-gray-800 dark:text-slate-100 mb-3 flex items-center gap-2"
>
<i class="fas fa-server text-[#ff1493] dark:text-[#ff69b4]" />
<span>API 设置</span>
</h3>
@@ -85,11 +102,14 @@
</label>
<div class="relative">
<i
class="fas fa-link absolute left-3 sm:left-4 top-3 sm:top-4 text-gray-400 text-lg sm:text-xl pointer-events-none z-10" />
<input v-model="localCustomApi" type="url" placeholder="https://cfapi.searchgal.homes"
class="fas fa-link absolute left-3 sm:left-4 top-3 sm:top-4 text-gray-400 text-lg sm:text-xl pointer-events-none z-10"
/>
<input
v-model="localCustomApi" type="url" placeholder="https://cfapi.searchgal.homes"
class="w-full pl-10 sm:pl-12 pr-4 py-3 sm:py-4 text-sm sm:text-base rounded-xl bg-white dark:bg-slate-700/50 backdrop-blur-md shadow-md focus:shadow-lg focus:scale-[1.01] transition-all outline-none border-2 border-transparent text-gray-900 dark:text-slate-100 placeholder:text-gray-400 dark:placeholder:text-slate-400"
@focus="$event.target.style.borderColor = '#ff1493'"
@blur="$event.target.style.borderColor = 'transparent'" />
@blur="$event.target.style.borderColor = 'transparent'"
/>
</div>
<p class="text-xs text-gray-500 dark:text-slate-400 mt-2">
留空使用默认 API 地址。例如: https://cfapi.searchgal.homes 或 http://127.0.0.1:8787
@@ -98,7 +118,8 @@
<!-- API 状态 -->
<div
class="bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800/50 rounded-xl p-4">
class="bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800/50 rounded-xl p-4"
>
<div class="flex items-start gap-3">
<i class="fas fa-info-circle text-blue-500 dark:text-blue-400 text-lg mt-0.5" />
<div class="flex-1 text-sm text-blue-700 dark:text-blue-300">
@@ -114,16 +135,19 @@
<!-- 底部操作栏 -->
<div
class="flex items-center justify-end gap-3 px-4 sm:px-6 py-4 border-t border-gray-200 dark:border-slate-700">
class="flex items-center justify-end gap-3 px-4 sm:px-6 py-4 border-t border-gray-200 dark:border-slate-700"
>
<button
class="px-4 py-2 rounded-xl text-gray-700 dark:text-slate-300 hover:bg-gray-100 dark:hover:bg-slate-700 transition-all font-medium"
@click="reset">
@click="reset"
>
<i class="fas fa-undo mr-2" />
重置
</button>
<button
class="px-6 py-2 rounded-xl text-white font-semibold shadow-lg hover:shadow-xl hover:scale-105 transition-all bg-gradient-to-r from-[#ff1493] to-[#d946ef]"
@click="save">
@click="save"
>
<i class="fas fa-check mr-2" />
保存
</button>

37
src/components/VndbPanel.vue
View File

@@ -153,7 +153,7 @@
</div>
</div>
<!-- 简介 -->
<!-- 简介 - 艳粉主题 -->
<div v-if="searchStore.vndbInfo.description" class="mb-4">
<div class="flex items-center justify-between mb-2">
<p class="text-sm font-semibold text-gray-700 dark:text-slate-200">
@@ -162,7 +162,16 @@
</p>
<button
v-if="!isTranslating && !translatedDescription"
class="px-3 py-1 text-xs bg-gradient-to-r from-theme-accent to-theme-primary text-white rounded-full hover:from-theme-accent-dark hover:to-theme-primary-dark transition-all shadow-sm hover:shadow-md flex items-center gap-1"
class="px-3 py-1.5 text-xs
bg-gradient-pink text-white font-bold rounded-full
backdrop-blur-sm
border border-white/30 dark:border-white/20
shadow-md shadow-theme-primary/20 dark:shadow-theme-accent/25
hover:shadow-lg hover:shadow-theme-primary/30 dark:hover:shadow-theme-accent/35
hover:scale-105
active:scale-95
transition-all duration-300
flex items-center gap-1.5"
@click="handleTranslate"
>
<i class="fas fa-language" />
@@ -170,7 +179,17 @@
</button>
<button
v-if="translatedDescription && !isTranslating"
class="px-3 py-1 text-xs bg-gradient-to-r from-slate-500 to-slate-600 dark:from-slate-600 dark:to-slate-700 text-white rounded-full hover:from-slate-600 hover:to-slate-700 dark:hover:from-slate-700 dark:hover:to-slate-800 transition-all shadow-sm hover:shadow-md flex items-center gap-1"
class="px-3 py-1.5 text-xs
bg-white/70 dark:bg-slate-700/70
text-theme-primary dark:text-theme-accent font-bold rounded-full
backdrop-blur-sm
border border-white/40 dark:border-white/30
shadow-md shadow-theme-primary/10 dark:shadow-theme-accent/15
hover:shadow-lg hover:shadow-theme-primary/20 dark:hover:shadow-theme-accent/25
hover:scale-105
active:scale-95
transition-all duration-300
flex items-center gap-1.5"
@click="showOriginal = !showOriginal"
>
<i class="fas fa-exchange-alt" />
@@ -235,13 +254,21 @@
</div>
</div>
<!-- VNDB 链接 -->
<!-- VNDB 链接 - 艳粉主题 -->
<div class="mt-6 pt-4 border-t border-gray-200 dark:border-slate-700">
<a
:href="vndbUrl"
target="_blank"
rel="noopener noreferrer"
class="flex items-center justify-center gap-2 px-4 py-2 bg-gradient-to-r from-theme-accent to-theme-primary text-white rounded-xl hover:from-theme-accent-dark hover:to-theme-primary-dark transition-all shadow-md hover:shadow-lg"
class="flex items-center justify-center gap-2 px-4 py-3
bg-gradient-pink text-white font-bold rounded-xl
backdrop-blur-md
border border-white/30 dark:border-white/20
shadow-lg shadow-theme-primary/20 dark:shadow-theme-accent/25
hover:shadow-xl hover:shadow-theme-primary/30 dark:hover:shadow-theme-accent/35
hover:scale-105
active:scale-95
transition-all duration-300"
>
<i class="fas fa-external-link-alt" />
<span>在 VNDB 查看详情</span>

3
src/utils/theme.ts
View File

@@ -56,7 +56,7 @@ export function saveCustomCSS(css: string): void {
try {
localStorage.setItem(CUSTOM_CSS_STORAGE_KEY, css)
} catch (error) {
// 静默处理
console.error('保存自定义 CSS 失败:', error)
}
}
@@ -67,6 +67,7 @@ export function loadCustomCSS(): string {
try {
return localStorage.getItem(CUSTOM_CSS_STORAGE_KEY) || ''
} catch (error) {
console.error('加载自定义 CSS 失败:', error)
return ''
}
}