Henry_Du/BYW-VoiceHub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): 适配歌曲卡片、日期选择器、平台按钮及搜索占位图的浅色主题

Browse Source 
- 修复 SongList/ScheduleList 投稿人、热度、投稿时间文字对比度，统一引用 --text-secondary 主题变量
- 重构 CustomSelect 通用组件为浅色底 + indigo 主色系，适配前台投稿页日期选择
- 调整 RequestForm 平台按钮三态配色，激活态使用 indigo 渐变保持主题统一
- 重写 search.svg 全部 19 个 path fill 为深灰系列，解决浅色背景下占位图不可见问题
This commit is contained in:
Henry_Du
2026-09-18 22:48:14 +08:00
parent 43f05a6e34
commit 8a82cb77a7
5 changed files with 75 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/UI/Common/CustomSelect.vue
+15 -15
View File
@@ -1,11 +1,11 @@
<template>
<div ref="containerRef" class="relative" :class="className">
<div
class="flex items-center gap-2 px-3 py-2 bg-zinc-950 border rounded-lg transition-all cursor-pointer select-none"
class="flex items-center gap-2 px-3 py-2 bg-white border rounded-xl transition-all cursor-pointer select-none"
:class="[
isOpen
? 'border-blue-500/50 bg-blue-600/5 shadow-lg'
: 'border-zinc-800 hover:border-zinc-700'
? 'border-indigo-400/60 bg-indigo-50/60 shadow-sm'
: 'border-zinc-200 hover:border-zinc-300'
]"
@click="toggleDropdown"
>
@@ -13,14 +13,14 @@
<span
v-if="label"
class="text-[8px] font-black uppercase tracking-widest leading-none mb-0.5 transition-colors"
:class="isOpen ? 'text-blue-400' : 'text-zinc-600'"
:class="isOpen ? 'text-indigo-500' : 'text-zinc-500'"
>
{{ label }}
</span>
<span class="text-[11px] font-bold text-zinc-300 truncate">{{ displayLabel }}</span>
<span class="text-[12px] font-bold text-zinc-800 truncate">{{ displayLabel }}</span>
</div>
<div class="transition-transform duration-200" :class="{ 'rotate-180': isOpen }">
<ChevronDown :size="12" :class="isOpen ? 'text-blue-400' : 'text-zinc-700'" />
<ChevronDown :size="12" :class="isOpen ? 'text-indigo-500' : 'text-zinc-500'" />
</div>
</div>
@@ -28,26 +28,26 @@
<Transition
enter-active-class="transition duration-100 ease-out"
enter-from-class="transform scale-95 opacity-0"
enter-to-class="transform scale-100 opacity-100"
enter-to-class="transform scale-100 opacity-1"
leave-active-class="transition duration-75 ease-in"
leave-from-class="transform scale-100 opacity-100"
leave-from-class="transform scale-100 opacity-1"
leave-to-class="transform scale-95 opacity-0"
>
<div
v-if="isOpen"
ref="dropdownRef"
:style="dropdownStyle"
class="fixed z-[9999] p-1 bg-[#0c0c0e] border border-zinc-800 rounded-lg shadow-2xl backdrop-blur-xl origin-top"
class="fixed z-[9999] p-1.5 bg-white border border-zinc-200 rounded-xl shadow-lg backdrop-blur-xl origin-top"
>
<div class="max-h-[200px] overflow-y-auto custom-scrollbar">
<div class="max-h-[220px] overflow-y-auto custom-scrollbar">
<button
v-for="option in normalizedOptions"
:key="option.value"
class="w-full flex items-center justify-between px-3 py-2 rounded-md text-[11px] font-bold transition-all"
class="w-full flex items-center justify-between px-3 py-2 rounded-lg text-[12px] font-bold transition-all"
:class="[
isSelected(option)
? 'bg-blue-600/10 text-blue-400'
: 'text-zinc-500 hover:text-zinc-200 hover:bg-zinc-800/40'
? 'bg-indigo-50 text-indigo-600'
: 'text-zinc-600 hover:text-zinc-900 hover:bg-zinc-100'
]"
@click="selectOption(option)"
>
@@ -216,10 +216,10 @@ onUnmounted(() => {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: var(--bg-tertiary, #27272a);
background: var(--border-secondary, #e4e4e7);
border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #3f3f46;
background: var(--border-primary, #d4d4d8);
}
</style>