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

251127

Browse Source
This commit is contained in:
AdingApkgg
2025-11-27 13:06:33 +08:00
parent 47288cfdaa
commit 4d44d5b620
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 ''
}
}