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

feat(admin-ui): 管理后台整体切换为浅色主题(ModernLight) + 新增 lightbulb 图标

Browse Source 
1. layout(管理控制台 dashboard.vue): main bg-[#09090b] text-zinc-100 → bg-[#f8fafc] text-zinc-900; header bg-zinc-950/60 border-zinc-800 → bg-white/80 border-zinc-200; 移动菜单按钮/新手引导按钮 text-zinc-300/400 hover:bg-zinc-800 → text-zinc-600 hover:bg-zinc-100 border-zinc-200

2. Admin/Sidebar.vue: bg-[#09090b] border-zinc-800 → bg-white border-zinc-200 + shadow-sm; 标题 text-zinc-100 → 900; activeTab bg-blue-600/10 text-blue-400 → bg-blue-50 text-blue-700 border-blue-200; 未选中 text-zinc-500 hover:text-zinc-200 hover:bg-zinc-800/40 → text-zinc-600 hover:text-zinc-900 hover:bg-zinc-100; 用户卡 avatar/首字母 bg-white/70 border-zinc-200 + 退出按钮 hover:bg-red-50 text-red-600

3. 批量 33 个 Admin 组件硬编码深色原子类 1414 处替换(bg-zinc-9xx / border-zinc-8xx / text-zinc-100,200,300 / shadow-black/ -> 对应 light 版本) + style 块原生 CSS rgba(255,255,255,x) 16 处改为 rgba(0,0,0,x) / var 浅色主题 + 硬编码 bg-[#0c0c0e] / border-white/10 / color:white / surface-primary fallback 对应浅色修正

4. 二轮批量追加: bg-zinc-950 + opacity 变体(80/60/50/40/30/20/10) 共 431 处 → bg-white 对应 opacity 版本；placeholder:text-zinc-800 → 500；text-blue/red/emerald/amber/rose/purple 400 版 → 700/600 深浅一致版；border color /500 /30 → 200；focus:ring /20 → /30；shadow color 阴影降低强度

5. hover:text-white 扫尾: 13 处 DataAnalysisPanel/DatabaseManager/NotificationSender/SemesterManager/SongManagement/UserSongsModal hover 文本从 white → zinc-900；按钮三态从 hover:bg-*600 白字 → hover:bg-*-100/200 对应深字色，和前台 indigo/浅色体系保持一致

6. BlacklistManager 前台可见提示 💡→ <Icon lightbulb amber-600 size=13>；ChangelogManager 徽章色从 emerald-300/blue-300/zinc-400 → emerald-700/blue-700/zinc-600 可读；Icon.vue 新增 lightbulb 分支 stroke 图标

7. 受影响文件: dashboard.vue + Sidebar.vue + Icon.vue + Admin/* (33个组件共 1874 处批量替换 + 20 处手工精细化修正)
This commit is contained in:
Henry_Du
2026-09-19 08:30:59 +08:00
parent 357876a716
commit 573e168702
36 changed files with 1023 additions and 1017 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Admin/PlayTimeManager.vue
+39 -39
View File
@@ -3,14 +3,14 @@
<!-- 页面标题 -->
<div class="flex flex-col md:flex-row md:items-end justify-between gap-6">
<div>
<h2 class="text-2xl font-black text-zinc-100 tracking-tight">播出时段管理</h2>
<h2 class="text-2xl font-black text-zinc-900 tracking-tight">播出时段管理</h2>
<p class="text-xs text-zinc-500 mt-1">
定义校园广播的常规播放窗口，用户仅可在这些时间段内进行点歌或查看排期
</p>
</div>
<div class="flex flex-wrap items-center gap-3">
<div
class="bg-zinc-900/40 border border-zinc-800 rounded-xl px-4 py-2 flex items-center gap-3"
class="bg-zinc-50/40 border border-zinc-200 rounded-xl px-4 py-2 flex items-center gap-3"
>
<span class="text-[10px] font-black text-zinc-500 uppercase tracking-widest"
>启用播出时段选择</span
@@ -18,7 +18,7 @@
<button
:class="[
'relative w-10 h-5 rounded-full transition-colors',
enablePlayTimeSelection ? 'bg-blue-600' : 'bg-zinc-800'
enablePlayTimeSelection ? 'bg-blue-600' : 'bg-zinc-100'
]"
@click="toggleGlobalEnabled"
>
@@ -30,16 +30,16 @@
/>
</button>
</div>
<div v-if="playTimes.length > 1" class="flex items-center gap-2 bg-zinc-900/40 border border-zinc-800 rounded-xl px-3 py-2">
<div v-if="playTimes.length > 1" class="flex items-center gap-2 bg-zinc-50/40 border border-zinc-200 rounded-xl px-3 py-2">
<span class="text-[10px] font-black text-zinc-500 uppercase tracking-widest">批量</span>
<button
class="px-3 py-1.5 text-[10px] font-black bg-emerald-600/20 text-emerald-400 border border-emerald-500/30 rounded-lg hover:bg-emerald-600/30 transition-all"
class="px-3 py-1.5 text-[10px] font-black bg-emerald-600/20 text-emerald-700 border border-emerald-200 rounded-lg hover:bg-emerald-600/30 transition-all"
@click="batchToggleAll(true)"
>
全部启用
</button>
<button
class="px-3 py-1.5 text-[10px] font-black bg-zinc-800 text-zinc-400 border border-zinc-700 rounded-lg hover:bg-zinc-700 transition-all"
class="px-3 py-1.5 text-[10px] font-black bg-zinc-100 text-zinc-400 border border-zinc-200 rounded-lg hover:bg-zinc-200 transition-all"
@click="batchToggleAll(false)"
>
全部禁用
@@ -58,7 +58,7 @@
<div class="bg-blue-600/5 border border-blue-500/10 rounded-xl p-5 flex items-start gap-4">
<Info class="text-blue-500 shrink-0 mt-0.5" :size="18" />
<div class="space-y-1">
<p class="text-xs font-bold text-zinc-300">关于时段限制</p>
<p class="text-xs font-bold text-zinc-600">关于时段限制</p>
<p class="text-[11px] text-zinc-500 leading-relaxed">
启用全局时段选择后，系统将仅在定义的时段内开放点歌功能。如果未设置开始或结束时间，系统将视为该边界不设限。
</p>
@@ -68,7 +68,7 @@
<!-- 加载状态 -->
<div
v-if="loading"
class="flex flex-col items-center justify-center py-20 space-y-4 bg-zinc-900/20 border border-zinc-800/50 rounded-xl"
class="flex flex-col items-center justify-center py-20 space-y-4 bg-zinc-50/20 border border-zinc-200 rounded-xl"
>
<div
class="w-10 h-10 border-4 border-blue-600/20 border-t-blue-600 rounded-full animate-spin"
@@ -83,7 +83,7 @@
>
<AlertCircle class="text-red-500 shrink-0 mt-0.5" :size="18" />
<div class="space-y-1">
<p class="text-xs font-bold text-zinc-300">获取数据失败</p>
<p class="text-xs font-bold text-zinc-600">获取数据失败</p>
<p class="text-[11px] text-zinc-500 leading-relaxed">{{ error }}</p>
</div>
</div>
@@ -91,13 +91,13 @@
<!-- 空状态 -->
<div
v-else-if="playTimes.length === 0"
class="flex flex-col items-center justify-center py-20 space-y-6 bg-zinc-900/20 border border-zinc-800/50 rounded-xl"
class="flex flex-col items-center justify-center py-20 space-y-6 bg-zinc-50/20 border border-zinc-200 rounded-xl"
>
<div class="p-6 rounded-xl bg-zinc-950 border border-zinc-800 text-zinc-700">
<div class="p-6 rounded-xl bg-white border border-zinc-200 text-zinc-700">
<Clock :size="48" />
</div>
<div class="text-center space-y-2">
<h3 class="text-lg font-bold text-zinc-100">暂无播出时段</h3>
<h3 class="text-lg font-bold text-zinc-900">暂无播出时段</h3>
<p class="text-xs text-zinc-500">点击“添加播出时段”按钮创建第一个播出时段</p>
</div>
</div>
@@ -109,15 +109,15 @@
v-for="playTime in playTimes"
:key="playTime.id"
:class="[
'group relative bg-zinc-900/30 border rounded-xl p-8 transition-all hover:shadow-2xl hover:shadow-black/40',
playTime.enabled ? 'border-zinc-800/80' : 'border-zinc-800/40 opacity-60'
'group relative bg-zinc-50/30 border rounded-xl p-8 transition-all hover:shadow-2xl hover:shadow-black/40',
playTime.enabled ? 'border-zinc-200/80' : 'border-zinc-200 opacity-60'
]"
>
<div class="flex items-start justify-between mb-6">
<div
:class="[
'p-3 rounded-xl bg-zinc-950 border border-zinc-800 transition-all',
playTime.enabled ? 'text-blue-500 border-blue-500/20' : 'text-zinc-700'
'p-3 rounded-xl bg-white border border-zinc-200 transition-all',
playTime.enabled ? 'text-blue-500 border-blue-200' : 'text-zinc-700'
]"
>
<Clock :size="20" />
@@ -128,7 +128,7 @@
'px-2 py-0.5 rounded text-[9px] font-black uppercase tracking-widest border transition-all',
playTime.enabled
? 'bg-emerald-500/10 text-emerald-500 border-emerald-500/20'
: 'bg-zinc-800/50 text-zinc-600 border-zinc-700/50'
: 'bg-zinc-100/50 text-zinc-600 border-zinc-200'
]"
>
{{ playTime.enabled ? '已启用' : '已禁用' }}
@@ -142,7 +142,7 @@
<div class="space-y-4">
<div>
<h4
class="text-lg font-black text-zinc-100 group-hover:text-blue-400 transition-colors"
class="text-lg font-black text-zinc-900 group-hover:text-blue-700 transition-colors"
>
{{ playTime.name }}
</h4>
@@ -150,7 +150,7 @@
class="flex items-center gap-2 mt-1.5 text-blue-500/80 font-black tracking-tighter"
>
<span class="text-xl">{{ playTime.startTime || '不限' }}</span>
<div class="w-4 h-[2px] bg-zinc-800" />
<div class="w-4 h-[2px] bg-zinc-100" />
<span class="text-xl">{{ playTime.endTime || '不限' }}</span>
</div>
</div>
@@ -160,23 +160,23 @@
</p>
</div>
<div class="mt-8 pt-6 border-t border-zinc-800/50 flex items-center justify-between">
<div class="mt-8 pt-6 border-t border-zinc-200 flex items-center justify-between">
<div class="flex gap-2">
<button
class="p-2.5 bg-zinc-950 border border-zinc-800 rounded-lg text-zinc-500 hover:text-emerald-400 hover:border-emerald-500/30 transition-all"
class="p-2.5 bg-white border border-zinc-200 rounded-lg text-zinc-500 hover:text-emerald-700 hover:border-emerald-200 transition-all"
title="复制此时段"
@click="duplicatePlayTime(playTime)"
>
<Copy :size="14" />
</button>
<button
class="p-2.5 bg-zinc-950 border border-zinc-800 rounded-lg text-zinc-500 hover:text-blue-400 hover:border-blue-500/30 transition-all"
class="p-2.5 bg-white border border-zinc-200 rounded-lg text-zinc-500 hover:text-blue-700 hover:border-blue-200 transition-all"
@click="editPlayTime(playTime)"
>
<Edit2 :size="14" />
</button>
<button
class="p-2.5 bg-zinc-950 border border-zinc-800 rounded-lg text-zinc-500 hover:text-red-400 hover:border-red-500/30 transition-all"
class="p-2.5 bg-white border border-zinc-200 rounded-lg text-zinc-500 hover:text-red-400 hover:border-red-200 transition-all"
@click="confirmDelete(playTime)"
>
<Trash2 :size="14" />
@@ -186,7 +186,7 @@
:class="[
'flex items-center gap-2 px-4 py-2 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all',
playTime.enabled
? 'bg-zinc-800 text-zinc-400 hover:text-zinc-200'
? 'bg-zinc-100 text-zinc-400 hover:text-zinc-700'
: 'bg-emerald-600 text-white shadow-lg shadow-emerald-900/20'
]"
@click="togglePlayTimeStatus(playTime)"
@@ -207,15 +207,15 @@
>
<div class="absolute inset-0 bg-black/80 backdrop-blur-sm" @click="cancelForm" />
<div
class="relative w-full max-w-lg bg-zinc-900 border border-zinc-800 rounded-xl shadow-2xl overflow-hidden"
class="relative w-full max-w-lg bg-white border border-zinc-200 rounded-xl shadow-2xl overflow-hidden"
>
<div class="p-8">
<div class="flex items-center justify-between mb-8">
<h3 class="text-xl font-black text-zinc-100 tracking-tight">
<h3 class="text-xl font-black text-zinc-900 tracking-tight">
{{ editingPlayTime ? '编辑播出时段' : '添加播出时段' }}
</h3>
<button
class="p-2 text-zinc-500 hover:text-zinc-200 transition-colors"
class="p-2 text-zinc-500 hover:text-zinc-700 transition-colors"
@click="cancelForm"
>
<X :size="20" />
@@ -231,7 +231,7 @@
v-for="p in playTimePresets"
:key="p.name"
type="button"
class="px-3 py-2 bg-zinc-950 border border-zinc-800 rounded-lg text-[11px] font-bold text-zinc-400 hover:text-zinc-200 hover:border-zinc-700 hover:bg-zinc-900 transition-all"
class="px-3 py-2 bg-white border border-zinc-200 rounded-lg text-[11px] font-bold text-zinc-400 hover:text-zinc-700 hover:border-zinc-200 hover:bg-white transition-all"
@click="applyPreset(p)"
>
<span class="block">{{ p.name }}</span>
@@ -248,7 +248,7 @@
v-model="formData.name"
type="text"
placeholder="例如: 午间广播"
class="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-5 py-3.5 text-sm text-zinc-200 focus:outline-none focus:border-blue-500/30"
class="w-full bg-white border border-zinc-200 rounded-lg px-5 py-3.5 text-sm text-zinc-700 focus:outline-none focus:border-blue-200"
>
</div>
@@ -261,7 +261,7 @@
<input
v-model="formData.startTime"
type="time"
class="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-5 py-3.5 text-sm text-zinc-200 focus:outline-none focus:border-blue-500/30 appearance-none"
class="w-full bg-white border border-zinc-200 rounded-lg px-5 py-3.5 text-sm text-zinc-700 focus:outline-none focus:border-blue-200 appearance-none"
>
<Clock
class="absolute right-4 top-1/2 -translate-y-1/2 text-zinc-700 pointer-events-none"
@@ -278,7 +278,7 @@
<input
v-model="formData.endTime"
type="time"
class="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-5 py-3.5 text-sm text-zinc-200 focus:outline-none focus:border-blue-500/30 appearance-none"
class="w-full bg-white border border-zinc-200 rounded-lg px-5 py-3.5 text-sm text-zinc-700 focus:outline-none focus:border-blue-200 appearance-none"
>
<Clock
class="absolute right-4 top-1/2 -translate-y-1/2 text-zinc-700 pointer-events-none"
@@ -298,7 +298,7 @@
<textarea
v-model="formData.description"
placeholder="请输入时段描述信息..."
class="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-5 py-4 text-sm text-zinc-200 focus:outline-none focus:border-blue-500/30 min-h-[100px] resize-none"
class="w-full bg-white border border-zinc-200 rounded-lg px-5 py-4 text-sm text-zinc-700 focus:outline-none focus:border-blue-200 min-h-[100px] resize-none"
/>
</div>
@@ -306,10 +306,10 @@
<input
v-model="formData.enabled"
type="checkbox"
class="w-4 h-4 rounded border-zinc-800 bg-zinc-950 accent-blue-600"
class="w-4 h-4 rounded border-zinc-200 bg-white accent-blue-600"
>
<span
class="text-xs font-bold text-zinc-300 group-hover:text-blue-400 transition-colors"
class="text-xs font-bold text-zinc-600 group-hover:text-blue-700 transition-colors"
>启用此播出时段</span
>
</label>
@@ -323,9 +323,9 @@
</div>
</div>
<div class="px-8 py-6 bg-zinc-950/50 border-t border-zinc-800 flex justify-end gap-3">
<div class="px-8 py-6 bg-white/70 border-t border-zinc-200 flex justify-end gap-3">
<button
class="px-6 py-2.5 text-xs font-bold text-zinc-500 hover:text-zinc-300"
class="px-6 py-2.5 text-xs font-bold text-zinc-500 hover:text-zinc-600"
@click="cancelForm"
>
取消
@@ -350,7 +350,7 @@
@click="showDeleteConfirm = false"
/>
<div
class="relative w-full max-w-sm bg-zinc-900 border border-zinc-800 rounded-xl shadow-2xl overflow-hidden"
class="relative w-full max-w-sm bg-white border border-zinc-200 rounded-xl shadow-2xl overflow-hidden"
>
<div class="p-8">
<div class="flex flex-col items-center py-4 space-y-6">
@@ -360,7 +360,7 @@
<AlertCircle :size="32" />
</div>
<div class="text-center space-y-2 px-4">
<h4 class="text-lg font-bold text-zinc-100">
<h4 class="text-lg font-bold text-zinc-900">
确定要删除播出时段 "{{ playTimeToDelete?.name }}" 吗？
</h4>
<p class="text-xs text-zinc-500 leading-relaxed">
@@ -369,7 +369,7 @@
</div>
<div class="flex gap-3 w-full pt-4">
<button
class="flex-1 px-4 py-3 bg-zinc-950 border border-zinc-800 text-zinc-500 text-xs font-black rounded-lg transition-all hover:bg-zinc-800"
class="flex-1 px-4 py-3 bg-white border border-zinc-200 text-zinc-500 text-xs font-black rounded-lg transition-all hover:bg-zinc-100"
@click="showDeleteConfirm = false"
>
取消