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-4">
      <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 font-medium">
          管理站点全局属性、视觉识别、点歌逻辑及系统安全策略
        </p>
@@ -11,7 +11,7 @@
      <div class="flex gap-3">
        <button
          :disabled="loading || saving"
-          class="flex items-center gap-2 px-5 py-2 bg-zinc-900 border border-zinc-800 hover:border-zinc-700 text-zinc-400 text-xs font-bold rounded-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+          class="flex items-center gap-2 px-5 py-2 bg-white border border-zinc-200 hover:border-zinc-200 text-zinc-400 text-xs font-bold rounded-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed"
          @click="resetForm"
        >
          <RotateCcw :size="14" /> 重置
@@ -35,7 +35,7 @@

    <div v-if="loading" class="flex flex-col items-center justify-center py-20">
      <div
-        class="w-8 h-8 border-4 border-zinc-800 border-t-blue-500 rounded-full animate-spin mb-4"
+        class="w-8 h-8 border-4 border-zinc-200 border-t-blue-500 rounded-full animate-spin mb-4"
      />
      <p class="text-zinc-500 text-sm">加载配置中...</p>
    </div>
@@ -44,7 +44,7 @@
      <!-- 基础信息 -->
      <section :class="cardClass">
        <h3
-          class="text-sm font-black text-zinc-100 uppercase tracking-widest flex items-center gap-2 border-b border-zinc-800 pb-4"
+          class="text-sm font-black text-zinc-900 uppercase tracking-widest flex items-center gap-2 border-b border-zinc-200 pb-4"
        >
          <Globe :size="16" class="text-blue-500" /> 基础信息
        </h3>
@@ -100,7 +100,7 @@
      <!-- 视觉识别 -->
      <section :class="cardClass">
        <h3
-          class="text-sm font-black text-zinc-100 uppercase tracking-widest flex items-center gap-2 border-b border-zinc-800 pb-4"
+          class="text-sm font-black text-zinc-900 uppercase tracking-widest flex items-center gap-2 border-b border-zinc-200 pb-4"
        >
          <ImageIcon :size="16" class="text-purple-500" /> 视觉识别
        </h3>
@@ -137,10 +137,10 @@

      <!-- 投稿须知 -->
      <section
-        class="lg:col-span-2 bg-zinc-900/40 border border-zinc-800 rounded-2xl p-6 space-y-6"
+        class="lg:col-span-2 bg-zinc-50/40 border border-zinc-200 rounded-2xl p-6 space-y-6"
      >
        <h3
-          class="text-sm font-black text-zinc-100 uppercase tracking-widest flex items-center gap-2 border-b border-zinc-800 pb-4"
+          class="text-sm font-black text-zinc-900 uppercase tracking-widest flex items-center gap-2 border-b border-zinc-200 pb-4"
        >
          <FileText :size="16" class="text-emerald-500" /> 投稿须知
        </h3>
@@ -155,75 +155,75 @@
      <!-- 投稿逻辑设置 -->
      <section :class="cardClass">
        <h3
-          class="text-sm font-black text-zinc-100 uppercase tracking-widest flex items-center gap-2 border-b border-zinc-800 pb-4"
+          class="text-sm font-black text-zinc-900 uppercase tracking-widest flex items-center gap-2 border-b border-zinc-200 pb-4"
        >
          <Settings2 :size="16" class="text-amber-500" /> 投稿逻辑设置
        </h3>
        <div class="space-y-6">
          <div
-            class="flex items-center justify-between p-3 bg-zinc-950/50 border border-zinc-800 rounded-xl"
+            class="flex items-center justify-between p-3 bg-white/70 border border-zinc-200 rounded-xl"
          >
            <div>
-              <p class="text-xs font-bold text-zinc-200">启用联合投稿</p>
+              <p class="text-xs font-bold text-zinc-700">启用联合投稿</p>
              <p class="text-[10px] text-zinc-500 mt-0.5">允许用户添加联合投稿人并发起协作投稿</p>
            </div>
            <input
              v-model="formData.enableCollaborativeSubmission"
              type="checkbox"
-              class="w-5 h-5 rounded border-zinc-800 bg-zinc-900 accent-blue-600 cursor-pointer"
+              class="w-5 h-5 rounded border-zinc-200 bg-white accent-blue-600 cursor-pointer"
            >
          </div>

          <div
-            class="flex items-center justify-between p-3 bg-zinc-950/50 border border-zinc-800 rounded-xl"
+            class="flex items-center justify-between p-3 bg-white/70 border border-zinc-200 rounded-xl"
          >
            <div>
-              <p class="text-xs font-bold text-zinc-200">启用投稿备注留言</p>
+              <p class="text-xs font-bold text-zinc-700">启用投稿备注留言</p>
              <p class="text-[10px] text-zinc-500 mt-0.5">允许用户在投稿时附加公开或仅管理员可见的备注</p>
            </div>
            <input
              v-model="formData.enableSubmissionRemarks"
              type="checkbox"
-              class="w-5 h-5 rounded border-zinc-800 bg-zinc-900 accent-blue-600 cursor-pointer"
+              class="w-5 h-5 rounded border-zinc-200 bg-white accent-blue-600 cursor-pointer"
            >
          </div>

          <div
-            class="flex items-center justify-between p-3 bg-zinc-950/50 border border-zinc-800 rounded-xl"
+            class="flex items-center justify-between p-3 bg-white/70 border border-zinc-200 rounded-xl"
          >
            <div>
-              <p class="text-xs font-bold text-zinc-200">启用重播申请</p>
+              <p class="text-xs font-bold text-zinc-700">启用重播申请</p>
              <p class="text-[10px] text-zinc-500 mt-0.5">允许用户对本学期已播放过的歌曲再次申请</p>
            </div>
            <input
              v-model="formData.enableReplayRequests"
              type="checkbox"
-              class="w-5 h-5 rounded border-zinc-800 bg-zinc-900 accent-blue-600 cursor-pointer"
+              class="w-5 h-5 rounded border-zinc-200 bg-white accent-blue-600 cursor-pointer"
            >
          </div>

          <div class="space-y-4">
            <div
-              class="flex items-center justify-between p-3 bg-zinc-950/50 border border-zinc-800 rounded-xl"
+              class="flex items-center justify-between p-3 bg-white/70 border border-zinc-200 rounded-xl"
            >
              <div>
-                <p class="text-xs font-bold text-zinc-200">启用投稿限额</p>
+                <p class="text-xs font-bold text-zinc-700">启用投稿限额</p>
                <p class="text-[10px] text-zinc-500 mt-0.5">限制单个用户的点歌频率</p>
              </div>
              <input
                v-model="formData.enableSubmissionLimit"
                type="checkbox"
-                class="w-5 h-5 rounded border-zinc-800 bg-zinc-900 accent-blue-600 cursor-pointer"
+                class="w-5 h-5 rounded border-zinc-200 bg-white accent-blue-600 cursor-pointer"
              >
            </div>

            <div v-if="formData.enableSubmissionLimit" class="space-y-4">
-              <div class="grid grid-cols-3 gap-2 p-1 bg-zinc-950 border border-zinc-800 rounded-xl">
+              <div class="grid grid-cols-3 gap-2 p-1 bg-white border border-zinc-200 rounded-xl">
                <button
                  :class="[
                    'py-2 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all',
                    currentLimitType === 'daily'
-                      ? 'bg-zinc-800 text-blue-400 shadow-sm'
+                      ? 'bg-zinc-100 text-blue-700 shadow-sm'
                      : 'text-zinc-600 hover:text-zinc-400'
                  ]"
                  @click="handleLimitTypeChange('daily')"
@@ -234,7 +234,7 @@
                  :class="[
                    'py-2 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all',
                    currentLimitType === 'weekly'
-                      ? 'bg-zinc-800 text-blue-400 shadow-sm'
+                      ? 'bg-zinc-100 text-blue-700 shadow-sm'
                      : 'text-zinc-600 hover:text-zinc-400'
                  ]"
                  @click="handleLimitTypeChange('weekly')"
@@ -245,7 +245,7 @@
                  :class="[
                    'py-2 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all',
                    currentLimitType === 'monthly'
-                      ? 'bg-zinc-800 text-blue-400 shadow-sm'
+                      ? 'bg-zinc-100 text-blue-700 shadow-sm'
                      : 'text-zinc-600 hover:text-zinc-400'
                  ]"
                  @click="handleLimitTypeChange('monthly')"
@@ -279,23 +279,23 @@
      <!-- 安全与隐私设置 -->
      <section :class="cardClass">
        <h3
-          class="text-sm font-black text-zinc-100 uppercase tracking-widest flex items-center gap-2 border-b border-zinc-800 pb-4"
+          class="text-sm font-black text-zinc-900 uppercase tracking-widest flex items-center gap-2 border-b border-zinc-200 pb-4"
        >
          <Shield :size="16" class="text-rose-500" /> 安全与隐私设置
        </h3>
        <div class="space-y-4">
-          <div class="p-4 bg-zinc-950/50 border border-zinc-800 rounded-xl space-y-4">
+          <div class="p-4 bg-white/70 border border-zinc-200 rounded-xl space-y-4">
            <div class="flex items-start gap-4">
              <div class="shrink-0 pt-0.5">
                <input
                  id="show-keywords"
                  v-model="formData.showBlacklistKeywords"
                  type="checkbox"
-                  class="w-4 h-4 rounded border-zinc-800 bg-zinc-900 accent-blue-600 cursor-pointer"
+                  class="w-4 h-4 rounded border-zinc-200 bg-white accent-blue-600 cursor-pointer"
                >
              </div>
              <label for="show-keywords" class="cursor-pointer">
-                <p class="text-xs font-bold text-zinc-200">显示黑名单具体关键词</p>
+                <p class="text-xs font-bold text-zinc-700">显示黑名单具体关键词</p>
                <p class="text-[10px] text-zinc-500 mt-1 leading-relaxed">
                  开启后，在投稿命中黑名单时将明确提示冲突关键词；关闭则仅提示“包含关键词”。
                </p>
@@ -303,18 +303,18 @@
            </div>
          </div>

-          <div class="p-4 bg-zinc-950/50 border border-zinc-800 rounded-xl space-y-4">
+          <div class="p-4 bg-white/70 border border-zinc-200 rounded-xl space-y-4">
            <div class="flex items-start gap-4">
              <div class="shrink-0 pt-0.5">
                <input
                  id="hide-students"
                  v-model="formData.hideStudentInfo"
                  type="checkbox"
-                  class="w-4 h-4 rounded border-zinc-800 bg-zinc-900 accent-blue-600 cursor-pointer"
+                  class="w-4 h-4 rounded border-zinc-200 bg-white accent-blue-600 cursor-pointer"
                >
              </div>
              <label for="hide-students" class="cursor-pointer">
-                <p class="text-xs font-bold text-zinc-200">隐藏学生详细信息</p>
+                <p class="text-xs font-bold text-zinc-700">隐藏学生详细信息</p>
                <p class="text-[10px] text-zinc-500 mt-1 leading-relaxed">
                  开启后，非管理员用户在前端点歌列表、排期预览中将无法查看投稿学生的完整学号与真实姓名。
                </p>
@@ -359,9 +359,9 @@ const saveSuccess = ref(false)

 // 样式类常量
 const inputClass =
-  'w-full bg-zinc-950 border border-zinc-800 rounded-xl px-4 py-2.5 text-sm text-zinc-200 focus:outline-none focus:border-blue-500/30 transition-all placeholder:text-zinc-800'
+  'w-full bg-white border border-zinc-200 rounded-xl px-4 py-2.5 text-sm text-zinc-700 focus:outline-none focus:border-blue-200 transition-all placeholder:text-zinc-500'
 const labelClass = 'text-[10px] font-black text-zinc-600 uppercase tracking-widest px-1 block mb-2'
-const cardClass = 'bg-zinc-900/40 border border-zinc-800 rounded-2xl p-6 shadow-xl space-y-6'
+const cardClass = 'bg-zinc-50/40 border border-zinc-200 rounded-2xl p-6 shadow-xl space-y-6'

 const defaultSubmissionGuidelines = `1. 投稿时无需加入书名号
 2. 除DJ外，其他类型歌曲均接收（包括小语种）