feat(admin-ui): 管理后台整体切换为浅色主题(ModernLight) + 新增 lightbulb 图标
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:
@@ -8,13 +8,13 @@
|
||||
<Transition name="scale">
|
||||
<div
|
||||
v-if="show"
|
||||
class="bg-zinc-900 border border-zinc-800 rounded-2xl shadow-2xl w-full max-w-sm overflow-hidden flex flex-col"
|
||||
class="bg-white border border-zinc-200 rounded-2xl shadow-2xl w-full max-w-sm overflow-hidden flex flex-col"
|
||||
@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="$emit('close')"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12"/></svg>
|
||||
@@ -29,22 +29,22 @@
|
||||
v-model="cardTitle"
|
||||
type="text"
|
||||
placeholder="例如: 2026-03-21 校园午间广播"
|
||||
class="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm text-zinc-300 focus:outline-none focus:border-blue-500/50 transition-colors"
|
||||
class="w-full bg-white border border-zinc-200 rounded-lg px-3 py-2 text-sm text-zinc-600 focus:outline-none focus:border-blue-500/50 transition-colors"
|
||||
@input="drawCanvas"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Canvas 预览 -->
|
||||
<div class="relative w-full aspect-[2/3] max-w-[280px] bg-zinc-950 rounded-xl overflow-hidden border border-zinc-800 shadow-inner flex items-center justify-center">
|
||||
<div class="relative w-full aspect-[2/3] max-w-[280px] bg-white rounded-xl overflow-hidden border border-zinc-200 shadow-inner flex items-center justify-center">
|
||||
<canvas ref="canvasRef" width="400" :height="canvasHeight" class="w-full h-full object-contain bg-white"></canvas>
|
||||
</div>
|
||||
|
||||
<p class="text-[10px] text-zinc-500 text-center">宽度 400 像素，高度自适应，适合在手机端查看和分享</p>
|
||||
</div>
|
||||
|
||||
<div class="p-4 border-t border-zinc-800 bg-zinc-900/50 flex gap-3">
|
||||
<div class="p-4 border-t border-zinc-200 bg-zinc-50/50 flex gap-3">
|
||||
<button
|
||||
class="flex-1 py-2.5 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-2.5 bg-zinc-100 hover:bg-zinc-200 text-zinc-600 text-xs font-bold rounded-xl transition-colors uppercase tracking-wider"
|
||||
@click="$emit('close')"
|
||||
>
|
||||
取消
|
||||
@@ -210,7 +210,7 @@ const drawCanvas = () => {
|
||||
|
||||
// 绘制副标题(日期)
|
||||
ctx.font = '14px "Inter", "system-ui", sans-serif'
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, 0.8)'
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.75)'
|
||||
ctx.fillText(new Date().toLocaleDateString('zh-CN'), 200, 80)
|
||||
|
||||
// 绘制列表背景
|
||||
@@ -278,7 +278,7 @@ const drawCanvas = () => {
|
||||
|
||||
// 绘制底部水印
|
||||
if (bgImageObj.value) {
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, 0.6)'
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.55)'
|
||||
} else {
|
||||
ctx.fillStyle = '#CBD5E1'
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user