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 处手工精细化修正)
2026-09-19 08:30:59 +08:00
parent 357876a716
commit 573e168702
36 changed files with 1023 additions and 1017 deletions
@@ -3,7 +3,7 @@
    <!-- 顶部标题栏 -->
    <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>
@@ -134,7 +134,7 @@

        <div
          v-else
-          class="bg-zinc-900/30 border border-zinc-800 border-dashed rounded-3xl p-20 flex flex-col items-center justify-center text-center gap-4"
+          class="bg-zinc-50/30 border border-zinc-200 border-dashed rounded-3xl p-20 flex flex-col items-center justify-center text-center gap-4"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
@@ -158,7 +158,7 @@
          </button>
        </div>

-        <div class="p-6 bg-zinc-900/20 border border-zinc-800 rounded-3xl flex items-start gap-4">
+        <div class="p-6 bg-zinc-50/20 border border-zinc-200 rounded-3xl flex items-start gap-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="18"
@@ -214,7 +214,7 @@
        <div class="space-y-4">
          <div
            v-if="loading && semesters.length === 0"
-            class="text-center py-20 bg-zinc-900/10 border border-zinc-800 border-dashed rounded-[2rem]"
+            class="text-center py-20 bg-zinc-50/10 border border-zinc-200 border-dashed rounded-[2rem]"
          >
            <p class="text-xs font-bold text-zinc-600">加载中...</p>
          </div>
@@ -225,8 +225,8 @@
            class="group flex items-center justify-between p-6 rounded-[2rem] border transition-all"
            :class="
              sem.isActive
-                ? 'bg-blue-600/5 border-blue-500/30'
-                : 'bg-zinc-900/40 border-zinc-800 hover:border-zinc-700'
+                ? 'bg-blue-600/5 border-blue-200'
+                : 'bg-zinc-50/40 border-zinc-200 hover:border-zinc-200'
            "
          >
            <div class="flex items-center gap-5">
@@ -235,7 +235,7 @@
                :class="
                  sem.isActive
                    ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/20'
-                    : 'bg-zinc-800 text-zinc-600 border border-zinc-700'
+                    : 'bg-zinc-100 text-zinc-600 border border-zinc-200'
                "
              >
                <svg
@@ -258,7 +258,7 @@
                <h5
                  class="font-bold transition-colors"
                  :class="
-                    sem.isActive ? 'text-blue-400' : 'text-zinc-200 group-hover:text-blue-400'
+                    sem.isActive ? 'text-blue-700' : 'text-zinc-700 group-hover:text-blue-700'
                  "
                >
                  {{ sem.name }}
@@ -293,7 +293,7 @@
              <template v-else>
                <button
                  :disabled="loading"
-                  class="flex items-center gap-2 px-4 py-2 bg-zinc-800 hover:bg-zinc-700 text-zinc-400 hover:text-white text-[10px] font-black rounded-xl border border-zinc-700 transition-all uppercase tracking-widest disabled:opacity-50 disabled:cursor-not-allowed"
+                  class="flex items-center gap-2 px-4 py-2 bg-zinc-100 hover:bg-zinc-200 text-zinc-400 hover:text-zinc-900 text-[10px] font-black rounded-xl border border-zinc-200 transition-all uppercase tracking-widest disabled:opacity-50 disabled:cursor-not-allowed"
                  @click="setActive(sem.id)"
                >
                  <svg
@@ -342,7 +342,7 @@

          <div
            v-if="semesters.length === 0 && !loading"
-            class="text-center py-20 bg-zinc-900/10 border border-zinc-800 border-dashed rounded-[2rem]"
+            class="text-center py-20 bg-zinc-50/10 border border-zinc-200 border-dashed rounded-[2rem]"
          >
            <p class="text-xs font-bold text-zinc-600">暂无学期数据</p>
          </div>
@@ -356,14 +356,14 @@
      class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
    >
      <div
-        class="w-full max-w-md bg-zinc-900 rounded-3xl border border-zinc-800 shadow-2xl overflow-hidden"
+        class="w-full max-w-md bg-white rounded-3xl border border-zinc-200 shadow-2xl overflow-hidden"
        @click.stop
      >
        <div class="p-8 space-y-6">
          <div class="flex items-center justify-between">
            <h3 class="text-xl font-black text-white tracking-tight">添加新学期</h3>
            <button
-              class="p-2 text-zinc-500 hover:text-white transition-colors"
+              class="p-2 text-zinc-500 hover:text-zinc-900 transition-colors"
              @click="closeAddModal"
            >
              <svg
@@ -392,7 +392,7 @@
                v-model="newSemester.name"
                type="text"
                placeholder="例如: 2025学年第一学期"
-                class="w-full bg-zinc-950 border border-zinc-800 rounded-2xl px-5 py-4 text-sm text-zinc-200 focus:outline-none focus:border-blue-500/30 font-bold transition-all"
+                class="w-full bg-white border border-zinc-200 rounded-2xl px-5 py-4 text-sm text-zinc-700 focus:outline-none focus:border-blue-200 font-bold transition-all"
              >
            </div>

@@ -400,11 +400,11 @@
              <input
                v-model="newSemester.isActive"
                type="checkbox"
-                class="w-4.5 h-4.5 rounded-lg border-zinc-800 bg-zinc-950 accent-blue-600 transition-all"
+                class="w-4.5 h-4.5 rounded-lg border-zinc-200 bg-white accent-blue-600 transition-all"
              >
              <div>
                <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
                >
                <p class="text-[10px] text-zinc-600 font-medium">
@@ -413,7 +413,7 @@
              </div>
            </label>

-            <div class="p-4 bg-zinc-950 border border-zinc-800 rounded-2xl flex items-start gap-3">
+            <div class="p-4 bg-white border border-zinc-200 rounded-2xl flex items-start gap-3">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="14"
@@ -437,9 +437,9 @@
          </div>
        </div>

-        <div class="p-6 bg-zinc-800/50 border-t border-zinc-800 flex gap-3 justify-end">
+        <div class="p-6 bg-zinc-100/50 border-t border-zinc-200 flex gap-3 justify-end">
          <button
-            class="px-6 py-2.5 text-xs font-bold text-zinc-500 hover:text-zinc-300 transition-colors"
+            class="px-6 py-2.5 text-xs font-bold text-zinc-500 hover:text-zinc-600 transition-colors"
            @click="closeAddModal"
          >
            取消