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/ScheduleManager.vue
+74 -74
View File
@@ -9,7 +9,7 @@
<!-- 播出时段标签组 + 自动排期策略 -->
<div
class="space-y-3 bg-zinc-900/30 border border-zinc-800 rounded-xl p-3 md:p-4"
class="space-y-3 bg-zinc-50/30 border border-zinc-200 rounded-xl p-3 md:p-4"
>
<!-- 播出时段：标签按钮组（直接点击切换） -->
<div v-if="playTimeEnabled && playTimes.length > 0" class="space-y-2">
@@ -25,7 +25,7 @@
'px-4 py-2 rounded-xl text-xs font-black border transition-all whitespace-nowrap',
selectedPlayTime === ''
? 'bg-blue-600 border-blue-500 text-white shadow-lg shadow-blue-900/20'
: 'bg-zinc-950 border-zinc-800 text-zinc-400 hover:text-zinc-200 hover:border-zinc-700'
: 'bg-white border-zinc-200 text-zinc-400 hover:text-zinc-700 hover:border-zinc-200'
]"
@click="handlePlayTimeSelect('')"
>
@@ -43,10 +43,10 @@
selectedPlayTime === String(pt.id)
? pt.enabled
? 'bg-blue-600 border-blue-500 text-white shadow-lg shadow-blue-900/20'
: 'bg-zinc-700 border-zinc-600 text-zinc-300'
: 'bg-zinc-200 border-zinc-300 text-zinc-600'
: pt.enabled
? 'bg-zinc-950 border-zinc-800 text-zinc-400 hover:text-zinc-200 hover:border-zinc-700'
: 'bg-zinc-950/40 border-zinc-800/40 text-zinc-700 cursor-not-allowed'
? 'bg-white border-zinc-200 text-zinc-400 hover:text-zinc-700 hover:border-zinc-200'
: 'bg-white/80 border-zinc-200 text-zinc-700 cursor-not-allowed'
]"
@click="pt.enabled && handlePlayTimeSelect(String(pt.id))"
>
@@ -61,7 +61,7 @@
</span>
<span
v-if="!pt.enabled"
class="ml-1 px-1.5 py-0.5 text-[9px] bg-zinc-800 rounded text-zinc-500"
class="ml-1 px-1.5 py-0.5 text-[9px] bg-zinc-100 rounded text-zinc-500"
>已禁用</span>
</span>
</button>
@@ -82,27 +82,27 @@
<!-- 快速统计信息 -->
<div
v-if="playTimeEnabled && playTimes.length > 0"
class="hidden md:flex items-center gap-3 bg-zinc-950/60 border border-zinc-800 rounded-xl px-4 py-2"
class="hidden md:flex items-center gap-3 bg-white/80 border border-zinc-200 rounded-xl px-4 py-2"
>
<div class="flex-1 flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-blue-600/20 text-blue-400 flex items-center justify-center">
<div class="w-8 h-8 rounded-lg bg-blue-600/20 text-blue-700 flex items-center justify-center">
<ListMusic :size="14" />
</div>
<div class="flex flex-col leading-tight">
<span class="text-[10px] font-black text-zinc-600 uppercase tracking-widest">当前列表</span>
<span class="text-sm font-black text-zinc-200">
<span class="text-sm font-black text-zinc-700">
{{ localScheduledSongs.length }} 首 / {{ playTimeScheduledCount }} 首
</span>
</div>
</div>
<div class="w-px h-8 bg-zinc-800" />
<div class="w-px h-8 bg-zinc-100" />
<div class="flex-1 flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-purple-600/20 text-purple-400 flex items-center justify-center">
<Inbox :size="14" />
</div>
<div class="flex flex-col leading-tight">
<span class="text-[10px] font-black text-zinc-600 uppercase tracking-widest">待排歌曲</span>
<span class="text-sm font-black text-zinc-200">
<span class="text-sm font-black text-zinc-700">
{{ filteredUnscheduledSongs.length }} 首
</span>
</div>
@@ -119,7 +119,7 @@
<div v-else>
<div
class="lg:hidden sticky -top-4 -mx-4 -mt-4 z-20 flex gap-2 p-2 bg-zinc-950/90 backdrop-blur-md border-b border-zinc-800 shadow-xl mb-4 pt-4 min-h-[64px]"
class="lg:hidden sticky -top-4 -mx-4 -mt-4 z-20 flex gap-2 p-2 bg-white/90 backdrop-blur-md border-b border-zinc-200 shadow-xl mb-4 pt-4 min-h-[64px]"
>
<button
:class="[
@@ -131,7 +131,7 @@
<ListMusic class="w-4 h-4" />
<span class="flex items-center gap-1.5"
>待排歌曲
<span class="px-1.5 py-0.5 bg-zinc-800 text-[10px] rounded text-zinc-400">{{
<span class="px-1.5 py-0.5 bg-zinc-100 text-[10px] rounded text-zinc-400">{{
filteredUnscheduledSongs.length
}}</span></span
>
@@ -146,7 +146,7 @@
<PlaySquare class="w-4 h-4" />
<span class="flex items-center gap-1.5"
>播放列表
<span class="px-1.5 py-0.5 bg-zinc-800 text-[10px] rounded text-zinc-400">{{
<span class="px-1.5 py-0.5 bg-zinc-100 text-[10px] rounded text-zinc-400">{{
localScheduledSongs.length
}}</span></span
>
@@ -166,11 +166,11 @@
@drop.stop.prevent="handleReturnToDraggable"
>
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-2 md:gap-3 px-1 min-h-[52px]">
<h3 class="hidden lg:block text-lg font-black tracking-tight text-zinc-100 uppercase">
<h3 class="hidden lg:block text-lg font-black tracking-tight text-zinc-900 uppercase">
待排歌曲
</h3>
<div
class="flex w-full lg:w-auto gap-2 p-1.5 bg-zinc-900/50 rounded-xl border border-zinc-800"
class="flex w-full lg:w-auto gap-2 p-1.5 bg-zinc-50/50 rounded-xl border border-zinc-200"
>
<button
v-for="tab in [
@@ -182,7 +182,7 @@
:class="[
'flex-1 lg:flex-none px-3 md:px-4 py-2 rounded-lg text-[10px] md:text-xs font-black uppercase tracking-widest transition-all',
activeTab === tab.id
? 'bg-zinc-800 text-blue-400 shadow-md border border-blue-500/20'
? 'bg-zinc-100 text-blue-700 shadow-md border border-blue-200'
: 'text-zinc-600 hover:text-zinc-400'
]"
@click="activeTab = tab.id"
@@ -193,9 +193,9 @@
</div>
<!-- 筛选区 - 移动端折叠 -->
<div class="bg-zinc-900/40 border border-zinc-800 rounded-2xl shadow-xl">
<div class="bg-zinc-50/40 border border-zinc-200 rounded-2xl shadow-xl">
<div
class="p-3 md:p-4 flex items-center justify-between lg:hidden border-b border-zinc-800/50 rounded-t-2xl"
class="p-3 md:p-4 flex items-center justify-between lg:hidden border-b border-zinc-200 rounded-t-2xl"
@click="mobileFiltersOpen = !mobileFiltersOpen"
>
<div class="flex items-center gap-2 text-zinc-400">
@@ -222,7 +222,7 @@
v-model="searchQuery"
type="text"
placeholder="搜索歌曲、艺术家..."
class="w-full pl-9 pr-4 py-2 bg-zinc-950 border border-zinc-800 rounded-xl text-xs focus:outline-none focus:border-blue-500/30 transition-all text-zinc-200"
class="w-full pl-9 pr-4 py-2 bg-white border border-zinc-200 rounded-xl text-xs focus:outline-none focus:border-blue-200 transition-all text-zinc-700"
>
<button
v-if="searchQuery"
@@ -254,14 +254,14 @@
'draggable-songs flex-1 border-2 border-dashed rounded-[2rem] p-2 md:p-3 min-h-[400px] transition-colors duration-200',
isDraggableOver
? 'border-blue-500 bg-blue-500/5'
: 'border-zinc-800/80 bg-zinc-900/20'
: 'border-zinc-200/80 bg-zinc-50/20'
]"
>
<div class="space-y-2">
<div
v-for="song in filteredUnscheduledSongs"
:key="song.id"
class="draggable-song relative group bg-zinc-900 border border-zinc-800/50 rounded-xl p-3 hover:border-zinc-700 transition-all select-none"
class="draggable-song relative group bg-white border border-zinc-200 rounded-xl p-3 hover:border-zinc-200 transition-all select-none"
draggable="true"
@dragend="dragEnd"
@dragstart="dragStart($event, song)"
@@ -273,7 +273,7 @@
<div class="flex items-center gap-3">
<!-- 封面图片 -->
<div
class="relative w-12 h-12 rounded-lg overflow-hidden bg-zinc-800 flex-shrink-0 border border-zinc-700/50 cursor-pointer hover:opacity-80 transition-opacity"
class="relative w-12 h-12 rounded-lg overflow-hidden bg-zinc-100 flex-shrink-0 border border-zinc-200 cursor-pointer hover:opacity-80 transition-opacity"
@click.stop="playSong(song)"
>
<img
@@ -294,10 +294,10 @@
<div class="flex-1 min-w-0 flex flex-col gap-0.5">
<div class="flex items-center gap-2">
<h4 class="font-bold text-zinc-100 text-sm truncate">
<h4 class="font-bold text-zinc-900 text-sm truncate">
<span
v-if="false"
class="text-zinc-100 flex items-center gap-1 w-full text-left"
class="text-zinc-900 flex items-center gap-1 w-full text-left"
>
<span class="truncate">{{ song.title }}</span>
</span>
@@ -305,7 +305,7 @@
</h4>
<button
v-if="song.hasSubmissionNote && song.submissionNote"
class="inline-flex items-center justify-center w-5 h-5 rounded-full border border-blue-500/30 bg-blue-500/10 text-blue-400 hover:bg-blue-500/20 transition-all flex-shrink-0"
class="inline-flex items-center justify-center w-5 h-5 rounded-full border border-blue-200 bg-blue-500/10 text-blue-700 hover:bg-blue-500/20 transition-all flex-shrink-0"
title="查看备注留言"
@click.stop="openSubmissionRemark(song)"
>
@@ -342,7 +342,7 @@
<!-- 普通模式：投票数 -->
<div
v-if="activeTab !== 'replay'"
class="flex items-center gap-1 text-[10px] font-bold text-zinc-500 bg-zinc-950/50 px-2 py-1 rounded-md border border-zinc-800/50"
class="flex items-center gap-1 text-[10px] font-bold text-zinc-500 bg-white/70 px-2 py-1 rounded-md border border-zinc-200"
>
<Heart class="w-3 h-3 text-red-500/50" />
{{ song.voteCount || 0 }}
@@ -351,7 +351,7 @@
<!-- 重播模式：查看按钮 -->
<button
v-if="activeTab === 'replay'"
class="px-3 py-1.5 rounded-lg bg-blue-500/10 hover:bg-blue-500/20 text-blue-400 border border-blue-500/20 text-[10px] font-bold transition-colors"
class="px-3 py-1.5 rounded-lg bg-blue-500/10 hover:bg-blue-500/20 text-blue-700 border border-blue-200 text-[10px] font-bold transition-colors"
@click.stop="openReplayModal(song)"
>
查看
@@ -369,7 +369,7 @@
<!-- 移动端添加按钮 -->
<button
class="lg:hidden p-2 rounded-full bg-blue-600/20 text-blue-400 hover:bg-blue-600/30 active:scale-95 transition-all flex-shrink-0"
class="lg:hidden p-2 rounded-full bg-blue-600/20 text-blue-700 hover:bg-blue-600/30 active:scale-95 transition-all flex-shrink-0"
@click.stop="addSongToSchedule(song)"
>
<Plus class="w-5 h-5" />
@@ -377,7 +377,7 @@
<!-- 菜单按钮 -->
<div
class="p-1.5 rounded-lg bg-zinc-950 border border-zinc-800 text-zinc-600 cursor-grab active:cursor-grabbing hover:text-zinc-400 transition-colors"
class="p-1.5 rounded-lg bg-white border border-zinc-200 text-zinc-600 cursor-grab active:cursor-grabbing hover:text-zinc-400 transition-colors"
>
<MoreVertical class="w-4 h-4" />
</div>
@@ -422,81 +422,81 @@
<div
class="hidden lg:flex flex-col xl:flex-row xl:items-center justify-between gap-3 md:gap-4 px-1 min-h-[56px]"
>
<h3 class="text-lg font-black tracking-tight text-zinc-100 uppercase">播放顺序</h3>
<h3 class="text-lg font-black tracking-tight text-zinc-900 uppercase">播放顺序</h3>
<div
class="flex flex-wrap items-center gap-1.5 md:gap-2 p-1.5 bg-zinc-900/50 border border-zinc-800/50 rounded-2xl"
class="flex flex-wrap items-center gap-1.5 md:gap-2 p-1.5 bg-zinc-50/50 border border-zinc-200 rounded-2xl"
>
<div class="flex gap-1 md:gap-1.5">
<button
:disabled="
!hasChanges && localScheduledSongs.length === 0 && !hasUnpublishedDrafts
"
class="p-2 bg-zinc-950 border border-zinc-800 hover:bg-zinc-800 text-zinc-500 hover:text-zinc-200 rounded-xl transition-all group relative disabled:opacity-50 disabled:cursor-not-allowed"
class="p-2 bg-white border border-zinc-200 hover:bg-zinc-100 text-zinc-500 hover:text-zinc-700 rounded-xl transition-all group relative disabled:opacity-50 disabled:cursor-not-allowed"
@click="saveDraft"
>
<Save class="w-3.5 h-3.5" />
<span
class="absolute -top-10 left-1/2 -translate-x-1/2 px-2 py-1 bg-zinc-800 text-[9px] text-zinc-300 rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap border border-zinc-700"
class="absolute -top-10 left-1/2 -translate-x-1/2 px-2 py-1 bg-zinc-100 text-[9px] text-zinc-600 rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap border border-zinc-200"
>保存草稿</span
>
</button>
<button
:disabled="localScheduledSongs.length === 0"
class="p-2 bg-zinc-950 border border-zinc-800 hover:bg-zinc-800 text-zinc-500 hover:text-zinc-200 rounded-xl transition-all group relative disabled:opacity-50 disabled:cursor-not-allowed"
class="p-2 bg-white border border-zinc-200 hover:bg-zinc-100 text-zinc-500 hover:text-zinc-700 rounded-xl transition-all group relative disabled:opacity-50 disabled:cursor-not-allowed"
@click="openDownloadDialog"
>
<Download class="w-3.5 h-3.5" />
<span
class="absolute -top-10 left-1/2 -translate-x-1/2 px-2 py-1 bg-zinc-800 text-[9px] text-zinc-300 rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap border border-zinc-700"
class="absolute -top-10 left-1/2 -translate-x-1/2 px-2 py-1 bg-zinc-100 text-[9px] text-zinc-600 rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap border border-zinc-200"
>下载歌曲</span
>
</button>
<button
:disabled="localScheduledSongs.length === 0"
class="p-2 bg-zinc-950 border border-zinc-800 hover:bg-zinc-800 text-zinc-500 hover:text-blue-400 rounded-xl transition-all group relative disabled:opacity-50 disabled:cursor-not-allowed"
class="p-2 bg-white border border-zinc-200 hover:bg-zinc-100 text-zinc-500 hover:text-blue-700 rounded-xl transition-all group relative disabled:opacity-50 disabled:cursor-not-allowed"
@click="showCardGenerator = true"
>
<ImageIcon class="w-3.5 h-3.5" />
<span
class="absolute -top-10 left-1/2 -translate-x-1/2 px-2 py-1 bg-zinc-800 text-[9px] text-zinc-300 rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap border border-zinc-700"
class="absolute -top-10 left-1/2 -translate-x-1/2 px-2 py-1 bg-zinc-100 text-[9px] text-zinc-600 rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap border border-zinc-200"
>生成图片</span
>
</button>
<button
:disabled="localScheduledSongs.length === 0"
class="p-2 bg-zinc-950 border border-zinc-800 hover:bg-zinc-800 text-zinc-500 hover:text-emerald-500 rounded-xl transition-all group relative disabled:opacity-50 disabled:cursor-not-allowed"
class="p-2 bg-white border border-zinc-200 hover:bg-zinc-100 text-zinc-500 hover:text-emerald-500 rounded-xl transition-all group relative disabled:opacity-50 disabled:cursor-not-allowed"
@click="markAllAsPlayed"
>
<CheckCircle2 class="w-3.5 h-3.5" />
<span
class="absolute -top-10 left-1/2 -translate-x-1/2 px-2 py-1 bg-zinc-800 text-[9px] text-zinc-300 rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap border border-zinc-700"
class="absolute -top-10 left-1/2 -translate-x-1/2 px-2 py-1 bg-zinc-100 text-[9px] text-zinc-600 rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap border border-zinc-200"
>全部已播放</span
>
</button>
<button
:disabled="localScheduledSongs.length === 0"
class="p-2 bg-zinc-950 border border-zinc-800 hover:bg-zinc-800 text-zinc-500 hover:text-cyan-400 rounded-xl transition-all group relative disabled:opacity-50 disabled:cursor-not-allowed"
class="p-2 bg-white border border-zinc-200 hover:bg-zinc-100 text-zinc-500 hover:text-cyan-400 rounded-xl transition-all group relative disabled:opacity-50 disabled:cursor-not-allowed"
title="构建播放队列"
@click="confirmBuildPlayQueue"
>
<Music2 class="w-3.5 h-3.5" />
<span
class="absolute -top-10 left-1/2 -translate-x-1/2 px-2 py-1 bg-zinc-800 text-[9px] text-zinc-300 rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap border border-zinc-700"
class="absolute -top-10 left-1/2 -translate-x-1/2 px-2 py-1 bg-zinc-100 text-[9px] text-zinc-600 rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap border border-zinc-200"
>构建播放队列</span
>
</button>
<button
class="p-2 bg-zinc-950 border border-zinc-800 hover:bg-zinc-800 text-zinc-500 hover:text-purple-400 rounded-xl transition-all group relative"
class="p-2 bg-white border border-zinc-200 hover:bg-zinc-100 text-zinc-500 hover:text-purple-400 rounded-xl transition-all group relative"
@click="openMoveDateDialog"
>
<ArrowRight class="w-3.5 h-3.5" />
<span
class="absolute -top-10 left-1/2 -translate-x-1/2 px-2 py-1 bg-zinc-800 text-[9px] text-zinc-300 rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap border border-zinc-700"
class="absolute -top-10 left-1/2 -translate-x-1/2 px-2 py-1 bg-zinc-100 text-[9px] text-zinc-600 rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap border border-zinc-200"
>迁移日期</span
>
</button>
</div>
<div class="h-6 w-[1px] bg-zinc-800 mx-1" />
<div class="h-6 w-[1px] bg-zinc-100 mx-1" />
<button
class="flex items-center gap-1.5 px-3 md:px-4 py-2 bg-yellow-500/10 hover:bg-yellow-500/20 text-yellow-500 text-[10px] md:text-xs font-black rounded-xl border border-yellow-500/20 transition-all uppercase tracking-widest active:scale-95 disabled:opacity-50"
title="一键将当前待排歌曲自动排入"
@@ -525,7 +525,7 @@
ref="sequenceList"
:class="[
'sequence-list flex-1 border-2 border-dashed rounded-[2rem] p-2 md:p-3 min-h-[400px] transition-colors duration-200',
isSequenceOver ? 'border-blue-500 bg-blue-500/5' : 'border-zinc-800/80 bg-zinc-900/20'
isSequenceOver ? 'border-blue-500 bg-blue-500/5' : 'border-zinc-200/80 bg-zinc-50/20'
]"
@dragleave="handleSequenceDragLeave"
@dragover.prevent="handleDragOver"
@@ -545,9 +545,9 @@
v-for="(schedule, index) in localScheduledSongs"
:key="schedule.id"
:class="[
'scheduled-song relative group bg-zinc-900 border border-zinc-800/50 rounded-xl p-3 hover:border-zinc-700 transition-all select-none',
'scheduled-song relative group bg-white border border-zinc-200 rounded-xl p-3 hover:border-zinc-200 transition-all select-none',
dragOverIndex === index ? 'border-t-2 border-t-blue-500' : '',
schedule.isDraft ? 'border-amber-500/30 bg-amber-500/5' : ''
schedule.isDraft ? 'border-amber-200 bg-amber-500/5' : ''
]"
:data-schedule-id="schedule.id"
draggable="true"
@@ -563,17 +563,17 @@
>
<div class="flex items-center gap-3">
<div
class="flex flex-col items-center justify-center w-10 h-10 rounded-lg bg-zinc-950/50 border border-zinc-800 text-zinc-500 font-black text-xs flex-shrink-0"
class="flex flex-col items-center justify-center w-10 h-10 rounded-lg bg-white/70 border border-zinc-200 text-zinc-500 font-black text-xs flex-shrink-0"
>
<span class="text-[8px] text-zinc-600 uppercase leading-none mb-0.5">POS</span>
<span class="text-sm text-zinc-300 leading-none">{{
<span class="text-sm text-zinc-600 leading-none">{{
index + 1 < 10 ? '0' + (index + 1) : index + 1
}}</span>
</div>
<!-- 封面图片 -->
<div
class="relative w-10 h-10 rounded-lg overflow-hidden bg-zinc-800 flex-shrink-0 border border-zinc-700/50 cursor-pointer hover:opacity-80 transition-opacity"
class="relative w-10 h-10 rounded-lg overflow-hidden bg-zinc-100 flex-shrink-0 border border-zinc-200 cursor-pointer hover:opacity-80 transition-opacity"
@click.stop="playSong(schedule.song)"
>
<img
@@ -594,12 +594,12 @@
<div class="flex-1 min-w-0 flex flex-col gap-0.5">
<div class="flex items-center gap-2">
<h4 class="font-bold text-zinc-200 text-sm truncate">
<h4 class="font-bold text-zinc-700 text-sm truncate">
{{ schedule.song.title }}
</h4>
<button
v-if="schedule.song.hasSubmissionNote && schedule.song.submissionNote"
class="inline-flex items-center justify-center w-5 h-5 rounded-full border border-blue-500/30 bg-blue-500/10 text-blue-400 hover:bg-blue-500/20 transition-all flex-shrink-0"
class="inline-flex items-center justify-center w-5 h-5 rounded-full border border-blue-200 bg-blue-500/10 text-blue-700 hover:bg-blue-500/20 transition-all flex-shrink-0"
title="查看备注留言"
@click.stop="openSubmissionRemark(schedule.song)"
>
@@ -608,7 +608,7 @@
<!-- 重播标识 -->
<span
v-if="schedule.song.replayRequestCount > 0"
class="px-1.5 py-0.5 rounded text-[9px] font-bold bg-blue-500/10 text-blue-500 border border-blue-500/20 uppercase tracking-wider flex items-center gap-1"
class="px-1.5 py-0.5 rounded text-[9px] font-bold bg-blue-500/10 text-blue-500 border border-blue-200 uppercase tracking-wider flex items-center gap-1"
title="重播歌曲"
>
<Icon name="repeat" :size="10" />
@@ -682,7 +682,7 @@
</button>
<div
class="p-1.5 rounded-lg bg-zinc-950 border border-zinc-800 text-zinc-600 cursor-grab active:cursor-grabbing hover:text-zinc-400 transition-colors"
class="p-1.5 rounded-lg bg-white border border-zinc-200 text-zinc-600 cursor-grab active:cursor-grabbing hover:text-zinc-400 transition-colors"
>
<MoreVertical class="w-4 h-4" />
</div>
@@ -696,42 +696,42 @@
<!-- 移动端底部操作栏 -->
<div
class="lg:hidden fixed bottom-0 left-0 right-0 z-40 p-3 bg-zinc-950/90 backdrop-blur-xl border-t border-zinc-800 flex items-center gap-3 pb-6"
class="lg:hidden fixed bottom-0 left-0 right-0 z-40 p-3 bg-white/90 backdrop-blur-xl border-t border-zinc-200 flex items-center gap-3 pb-6"
>
<div class="w-[240px] overflow-x-auto scrollbar-hide">
<div class="flex items-center gap-2 w-max">
<button
class="w-11 h-11 shrink-0 bg-zinc-900 border border-zinc-800 text-zinc-400 rounded-xl flex items-center justify-center active:scale-95 transition-all"
class="w-11 h-11 shrink-0 bg-white border border-zinc-200 text-zinc-400 rounded-xl flex items-center justify-center active:scale-95 transition-all"
@click="openDownloadDialog"
>
<Download class="w-5 h-5" />
</button>
<button
class="w-11 h-11 shrink-0 bg-zinc-900 border border-zinc-800 text-zinc-400 rounded-xl flex items-center justify-center active:scale-95 transition-all"
class="w-11 h-11 shrink-0 bg-white border border-zinc-200 text-zinc-400 rounded-xl flex items-center justify-center active:scale-95 transition-all"
@click="showCardGenerator = true"
>
<ImageIcon class="w-5 h-5" />
</button>
<button
class="w-11 h-11 shrink-0 bg-zinc-900 border border-zinc-800 text-zinc-400 rounded-xl flex items-center justify-center active:scale-95 transition-all"
class="w-11 h-11 shrink-0 bg-white border border-zinc-200 text-zinc-400 rounded-xl flex items-center justify-center active:scale-95 transition-all"
@click="saveDraft"
>
<Save class="w-5 h-5" />
</button>
<button
class="w-11 h-11 shrink-0 bg-zinc-900 border border-zinc-800 text-emerald-500 rounded-xl flex items-center justify-center active:scale-95 transition-all"
class="w-11 h-11 shrink-0 bg-white border border-zinc-200 text-emerald-500 rounded-xl flex items-center justify-center active:scale-95 transition-all"
@click="markAllAsPlayed"
>
<CheckCircle2 class="w-5 h-5" />
</button>
<button
class="w-11 h-11 shrink-0 bg-zinc-900 border border-zinc-800 text-purple-400 rounded-xl flex items-center justify-center active:scale-95 transition-all"
class="w-11 h-11 shrink-0 bg-white border border-zinc-200 text-purple-400 rounded-xl flex items-center justify-center active:scale-95 transition-all"
@click="openMoveDateDialog"
>
<ArrowRight class="w-5 h-5" />
</button>
<button
class="w-11 h-11 shrink-0 bg-zinc-900 border border-zinc-800 text-blue-500 rounded-xl flex items-center justify-center active:scale-95 transition-all"
class="w-11 h-11 shrink-0 bg-white border border-zinc-200 text-blue-500 rounded-xl flex items-center justify-center active:scale-95 transition-all"
title="仅发布排期"
@click="publishSchedule"
>
@@ -785,13 +785,13 @@
class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
>
<div
class="bg-zinc-900 border border-zinc-800 rounded-xl shadow-2xl w-full max-w-sm overflow-hidden"
class="bg-white border border-zinc-200 rounded-xl shadow-2xl w-full max-w-sm overflow-hidden"
@click.stop
>
<div class="flex items-center justify-between p-4 border-b border-zinc-800">
<h3 class="text-sm font-black text-zinc-100 uppercase tracking-widest">迁移排期日期</h3>
<div class="flex items-center justify-between p-4 border-b border-zinc-200">
<h3 class="text-sm font-black text-zinc-900 uppercase tracking-widest">迁移排期日期</h3>
<button
class="text-zinc-500 hover:text-zinc-300 transition-colors"
class="text-zinc-500 hover:text-zinc-600 transition-colors"
@click="showMoveDateDialog = false"
>
<CloseIcon class="w-5 h-5" />
@@ -801,12 +801,12 @@
<div class="text-xs text-zinc-500">当前日期：{{ selectedDate }}</div>
<input
v-model="moveTargetDate"
class="w-full bg-zinc-950 border border-zinc-800 rounded-xl px-4 py-3 text-zinc-200 focus:outline-none focus:border-purple-500 transition-colors"
class="w-full bg-white border border-zinc-200 rounded-xl px-4 py-3 text-zinc-700 focus:outline-none focus:border-purple-500 transition-colors"
type="date"
>
<div class="flex gap-3">
<button
class="flex-1 py-3 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 text-xs font-bold rounded-xl transition-colors uppercase tracking-wider"
class="flex-1 py-3 bg-zinc-100 hover:bg-zinc-200 text-zinc-600 text-xs font-bold rounded-xl transition-colors uppercase tracking-wider"
@click="showMoveDateDialog = false"
>
取消
@@ -829,11 +829,11 @@
@click="closeReplayModal"
>
<div
class="bg-zinc-900 border border-zinc-800 rounded-2xl shadow-2xl w-full max-w-md overflow-hidden"
class="bg-white border border-zinc-200 rounded-2xl shadow-2xl w-full max-w-md overflow-hidden"
@click.stop
>
<div class="flex items-center justify-between p-4 border-b border-zinc-800">
<h3 class="text-sm font-black text-zinc-100 uppercase tracking-widest">
<div class="flex items-center justify-between p-4 border-b border-zinc-200">
<h3 class="text-sm font-black text-zinc-900 uppercase tracking-widest">
{{ replayModalTitle }} - 重播申请详情
</h3>
<div class="flex items-center gap-3">
@@ -847,7 +847,7 @@
拒绝申请
</button>
<button
class="text-zinc-500 hover:text-zinc-300 transition-colors"
class="text-zinc-500 hover:text-zinc-600 transition-colors"
@click="closeReplayModal"
>
<CloseIcon class="w-5 h-5" />
@@ -863,12 +863,12 @@
>
<div class="flex items-center gap-3">
<div
class="w-8 h-8 rounded-lg bg-zinc-900 border border-zinc-800 flex items-center justify-center text-zinc-500 group-hover:text-blue-400 transition-colors"
class="w-8 h-8 rounded-lg bg-white border border-zinc-200 flex items-center justify-center text-zinc-500 group-hover:text-blue-700 transition-colors"
>
<User class="w-3.5 h-3.5" />
</div>
<div class="flex flex-col">
<span class="text-sm font-bold text-zinc-200">{{ req.name }}</span>
<span class="text-sm font-bold text-zinc-700">{{ req.name }}</span>
<span v-if="req.grade" class="text-[10px] text-zinc-500"
>{{ req.grade }}{{ req.class ? ` ${req.class}` : '' }}</span
>