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

Merge pull request #18 from Moe-Sakura/dev

Browse Source 
feat: 统一主题样式与增强组件视觉一致性
This commit is contained in:
Asuna
2025-11-21 17:38:46 +08:00
committed by GitHub
parent 379242dfe9 92246b2139
commit 51a020fa1e
8 changed files with 82 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/CommentsModal.vue
View File

@@ -28,7 +28,7 @@
@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-pink-100 dark:border-slate-700">
<div class="flex items-center gap-2 sm:gap-3 px-4 sm:px-6 py-4 sm:py-5 border-b border-theme-primary/20 dark:border-slate-700">
<i class="fas fa-comments text-theme-primary dark:text-theme-accent 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
@@ -143,7 +143,7 @@ onUnmounted(() => {
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgb(236, 72, 153), rgb(139, 92, 246));
background: linear-gradient(180deg, var(--theme-primary), var(--theme-accent));
border-radius: 10px;
transition: background 0.3s ease;
}

4
src/components/FloatingButtons.vue
View File

@@ -220,7 +220,7 @@ onUnmounted(() => {
}
.comments-btn {
background: linear-gradient(135deg, rgb(236, 72, 153), rgb(219, 39, 119));
background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark));
color: white;
}
@@ -230,7 +230,7 @@ onUnmounted(() => {
}
.vndb-btn {
background: linear-gradient(135deg, rgb(139, 92, 246), rgb(124, 58, 237));
background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-dark));
color: white;
}

8
src/components/SearchHeader.vue
View File

@@ -296,6 +296,14 @@ watch([searchQuery, searchMode, customApi], () => {
}
})
// 监听 store 的 customApi 变化（从设置中更新）
watch(() => searchStore.customApi, (newApi) => {
// 只在不是由本地更新触发时才同步
if (customApi.value !== newApi) {
customApi.value = newApi
}
})
// 处理历史记录选择
function handleHistorySelect(history: SearchHistoryType) {
searchQuery.value = history.query

4
src/components/SearchHistory.vue
View File

@@ -31,7 +31,7 @@
<button
v-for="(item, index) in history"
:key="index"
class="history-item px-3 py-1.5 rounded-lg bg-gray-50 hover:bg-theme-primary/10 border border-gray-200 hover:border-pink-300 transition-all text-sm flex items-center gap-2 group"
class="history-item px-3 py-1.5 rounded-lg bg-gray-50 hover:bg-theme-primary/10 border border-gray-200 hover:border-theme-primary/30 transition-all text-sm flex items-center gap-2 group"
@click="selectHistory(item)"
>
<i
@@ -39,7 +39,7 @@
class="text-xs text-gray-400 group-hover:text-theme-primary transition-colors"
/>
<span class="text-gray-700 group-hover:text-theme-primary-dark font-medium">{{ item.query }}</span>
<span class="text-xs text-gray-400 group-hover:text-pink-400">{{ item.resultCount }}</span>
<span class="text-xs text-gray-400 group-hover:text-theme-primary/40">{{ item.resultCount }}</span>
</button>
</div>
</div>

2
src/components/SearchResults.vue
View File

@@ -83,7 +83,7 @@
:class="[
'min-w-10 h-10 px-3 rounded-lg font-medium transition-all',
page === platformData.currentPage
? 'bg-pink-500 dark:bg-purple-600 text-white shadow-lg'
? 'bg-theme-primary dark:bg-theme-accent text-white shadow-lg'
: 'bg-gray-100 dark:bg-slate-700 text-gray-700 dark:text-slate-200 hover:bg-gray-200 dark:hover:bg-slate-600'
]"
@click="goToPage(platformName, page)"

20
src/components/SettingsModal.vue
View File

@@ -99,7 +99,7 @@
</div>
<!-- 预览提示 -->
<div class="bg-gradient-to-r from-theme-primary/5 to-theme-accent/5 dark:from-pink-950/20 dark:to-purple-950/20 border border-theme-primary/30 dark:border-theme-primary/50 rounded-xl p-4">
<div class="bg-gradient-to-r from-theme-primary/5 to-theme-accent/5 dark:from-theme-primary/10 dark:to-theme-accent/10 border border-theme-primary/30 dark:border-theme-primary/50 rounded-xl p-4">
<div class="flex items-start gap-3">
<i class="fas fa-lightbulb" style="color: var(--theme-primary)" />
<div class="flex-1 text-sm text-gray-700 dark:text-slate-300">
@@ -230,10 +230,14 @@ function close() {
}
function save() {
// 保存主题
// 保存主题到 localStorage
saveTheme(localTheme.value)
// 更新原始主题，避免关闭时恢复
originalTheme.value = localTheme.value
// 发出保存事件
emit('save', localCustomApi.value, localTheme.value)
close()
// 关闭模态框（不会恢复主题，因为 originalTheme 已更新）
emit('close')
}
function reset() {
@@ -244,7 +248,7 @@ function reset() {
</script>
<style scoped>
/* 自定义滚动条 - 粉色渐变 */
/* 自定义滚动条 - 使用主题色 */
.custom-scrollbar::-webkit-scrollbar {
width: 10px;
}
@@ -255,13 +259,13 @@ function reset() {
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgb(236, 72, 153), rgb(139, 92, 246));
background: linear-gradient(180deg, var(--theme-primary), var(--theme-accent));
border-radius: 10px;
transition: background 0.3s ease;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgb(219, 39, 119), rgb(124, 58, 237));
background: linear-gradient(180deg, var(--theme-primary-dark), var(--theme-accent-dark));
}
/* 暗色模式滚动条 */
@@ -270,11 +274,11 @@ function reset() {
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgb(139, 92, 246), rgb(99, 102, 241));
background: linear-gradient(180deg, var(--theme-accent), var(--theme-accent-dark));
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgb(124, 58, 237), rgb(79, 70, 229));
background: linear-gradient(180deg, var(--theme-accent-dark), var(--theme-accent));
}
/* 设置区块 */

12
src/components/VndbPanel.vue
View File

@@ -64,7 +64,7 @@
<span
v-for="(name, index) in searchStore.vndbInfo.names.slice(0, 5)"
:key="index"
class="px-2 py-1 bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 text-xs rounded-full"
class="px-2 py-1 bg-theme-accent/10 dark:bg-theme-accent/30 text-theme-accent dark:text-theme-accent/70 text-xs rounded-full"
>
{{ name }}
</span>
@@ -108,9 +108,9 @@
<!-- 游戏信息卡片 -->
<div class="mb-4 grid grid-cols-1 gap-3">
<!-- 游戏时长 -->
<div v-if="searchStore.vndbInfo.play_hours" class="flex items-center gap-3 p-3 bg-gradient-to-r from-theme-primary/5 to-theme-accent/5 dark:from-pink-900/20 dark:to-purple-900/20 rounded-xl border border-theme-primary/20 dark:border-theme-primary/30">
<div v-if="searchStore.vndbInfo.play_hours" class="flex items-center gap-3 p-3 bg-gradient-to-r from-theme-primary/5 to-theme-accent/5 dark:from-theme-primary/10 dark:to-theme-accent/10 rounded-xl border border-theme-primary/20 dark:border-theme-primary/30">
<div class="w-10 h-10 flex items-center justify-center bg-white dark:bg-slate-700 rounded-lg shadow-sm">
<i class="fas fa-clock text-theme-primary dark:text-pink-400 text-lg" />
<i class="fas fa-clock text-theme-primary dark:text-theme-primary text-lg" />
</div>
<div class="flex-1">
<p class="text-xs text-gray-500 dark:text-slate-400 mb-0.5">游戏时长</p>
@@ -157,7 +157,7 @@
<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">
<i class="fas fa-align-left text-theme-primary dark:text-pink-400 mr-1" />
<i class="fas fa-align-left text-theme-primary dark:text-theme-primary mr-1" />
简介:
</p>
<button
@@ -381,7 +381,7 @@ function formatPlatform(platform: string): string {
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgb(236, 72, 153), rgb(139, 92, 246));
background: linear-gradient(180deg, var(--theme-primary), var(--theme-accent));
border-radius: 10px;
transition: background 0.3s ease;
}
@@ -396,7 +396,7 @@ function formatPlatform(platform: string): string {
}
:global(.dark) .custom-scrollbar::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgb(139, 92, 246), rgb(99, 102, 241));
background: linear-gradient(180deg, var(--theme-accent), var(--theme-accent-dark));
}
:global(.dark) .custom-scrollbar::-webkit-scrollbar-thumb:hover {

49
src/styles/theme.css
View File

@@ -96,6 +96,14 @@
background-color: color-mix(in srgb, var(--theme-primary) 60%, transparent);
}
.bg-theme-primary\/10 {
background-color: color-mix(in srgb, var(--theme-primary) 10%, transparent);
}
.bg-theme-primary\/5 {
background-color: color-mix(in srgb, var(--theme-primary) 5%, transparent);
}
.bg-theme-accent\/80 {
background-color: color-mix(in srgb, var(--theme-accent) 80%, transparent);
}
@@ -104,14 +112,55 @@
background-color: color-mix(in srgb, var(--theme-accent) 70%, transparent);
}
.bg-theme-accent\/30 {
background-color: color-mix(in srgb, var(--theme-accent) 30%, transparent);
}
.bg-theme-accent\/10 {
background-color: color-mix(in srgb, var(--theme-accent) 10%, transparent);
}
.text-theme-primary\/80 {
color: color-mix(in srgb, var(--theme-primary) 80%, transparent);
}
.text-theme-accent\/70 {
color: color-mix(in srgb, var(--theme-accent) 70%, transparent);
}
.border-theme-primary\/60 {
border-color: color-mix(in srgb, var(--theme-primary) 60%, transparent);
}
.border-theme-primary\/30 {
border-color: color-mix(in srgb, var(--theme-primary) 30%, transparent);
}
.border-theme-primary\/20 {
border-color: color-mix(in srgb, var(--theme-primary) 20%, transparent);
}
.border-theme-primary\/10 {
border-color: color-mix(in srgb, var(--theme-primary) 10%, transparent);
}
/* Hover 状态带透明度 */
.hover\:bg-theme-primary\/10:hover {
background-color: color-mix(in srgb, var(--theme-primary) 10%, transparent);
}
.hover\:border-theme-primary\/30:hover {
border-color: color-mix(in srgb, var(--theme-primary) 30%, transparent);
}
.group:hover .group-hover\:text-theme-primary {
color: var(--theme-primary);
}
.group:hover .group-hover\:text-theme-primary\/40 {
color: color-mix(in srgb, var(--theme-primary) 40%, transparent);
}
/* 渐变背景（带透明度） */
.from-theme-primary\/70 {
--tw-gradient-from: color-mix(in srgb, var(--theme-primary) 70%, transparent);