fix(ui): 批量替换所有组件中残留的硬编码深色值以彻底支持浅色主题

app/components/Admin/ApiKeyManager.vue

@@ -1026,7 +1026,7 @@ onMounted(() => {
   width: 24px;
   height: 24px;
   border: 2px solid rgba(255, 255, 255, 0.1);
-  border-top-color: #3b82f6;
+  border-top-color: var(--border-secondary, #3b82f6);
   border-radius: 50%;
   animation: spin 1s linear infinite;
 }
@@ -1044,7 +1044,7 @@ onMounted(() => {
   background: transparent;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: #27272a;
+  background: var(--bg-tertiary, #27272a);
   border-radius: 10px;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {

app/components/Admin/BackupManager.vue

@@ -556,8 +556,8 @@ const formatFileSize = (bytes) => {
 
 /* 操作卡片 */
 .action-card {
-  background: #2a2a2a;
-  border: 1px solid #404040;
+  background: var(--bg-tertiary, #2a2a2a);
+  border: 1px solid var(--border-secondary, #404040);
   border-radius: 12px;
   padding: 2rem;
   text-align: center;
@@ -566,7 +566,7 @@ const formatFileSize = (bytes) => {
 
 .action-card:hover {
   border-color: #606060;
-  background: #2f2f2f;
+  background: var(--bg-tertiary, #2f2f2f);
 }
 
 .action-card .card-content {
@@ -587,7 +587,7 @@ const formatFileSize = (bytes) => {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
 }
 
 .action-icon svg {
@@ -599,7 +599,7 @@ const formatFileSize = (bytes) => {
 .action-card h4 {
   font-size: 1.5rem;
   font-weight: 600;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   margin: 0 0 0.75rem 0;
 }
 
@@ -672,8 +672,8 @@ const formatFileSize = (bytes) => {
 }
 
 .modal {
-  background: #2a2a2a;
-  border: 1px solid #404040;
+  background: var(--bg-tertiary, #2a2a2a);
+  border: 1px solid var(--border-secondary, #404040);
   border-radius: 12px;
   max-width: 600px;
   width: 100%;
@@ -724,7 +724,7 @@ const formatFileSize = (bytes) => {
 .progress-details h5,
 .progress-errors h5 {
   margin: 0 0 10px 0;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   font-size: 14px;
   font-weight: 600;
 }
@@ -736,14 +736,14 @@ const formatFileSize = (bytes) => {
   border: 1px solid #505050;
   border-radius: 6px;
   padding: 10px;
-  background: #333333;
+  background: var(--bg-quaternary, #333333);
 }
 
 .detail-item {
   padding: 4px 0;
   color: #a0a0a0;
   font-size: 13px;
-  border-bottom: 1px solid #404040;
+  border-bottom: 1px solid var(--border-secondary, #404040);
 }
 
 .detail-item:last-child {
@@ -754,7 +754,7 @@ const formatFileSize = (bytes) => {
   padding: 4px 0;
   color: #ff6b6b;
   font-size: 13px;
-  border-bottom: 1px solid #4a2a2a;
+  border-bottom: 1px solid var(--border-secondary, #4a2a2a);
 }
 
 .error-item:last-child {
@@ -772,7 +772,7 @@ const formatFileSize = (bytes) => {
 .modal-title {
   font-size: 1.75rem;
   font-weight: 600;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   margin: 0;
 }
 
@@ -788,7 +788,7 @@ const formatFileSize = (bytes) => {
 
 .close-btn:hover {
   background: #505050;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
 }
 
 .close-btn svg {
@@ -802,11 +802,11 @@ const formatFileSize = (bytes) => {
 
 .modal-footer {
   padding: 1.5rem 2rem;
-  border-top: 1px solid #404040;
+  border-top: 1px solid var(--border-secondary, #404040);
   display: flex;
   gap: 1rem;
   justify-content: flex-end;
-  background: #252525;
+  background: var(--bg-tertiary, #252525);
 }
 
 .modal-footer button {
@@ -822,7 +822,7 @@ const formatFileSize = (bytes) => {
   display: block;
   font-size: 1.125rem;
   font-weight: 600;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   margin-bottom: 1rem;
 }
 
@@ -838,7 +838,7 @@ const formatFileSize = (bytes) => {
   align-items: flex-start;
   gap: 1rem;
   padding: 1.25rem;
-  background: #333333;
+  background: var(--bg-quaternary, #333333);
   border: 1px solid #505050;
   border-radius: 8px;
   cursor: pointer;
@@ -870,7 +870,7 @@ const formatFileSize = (bytes) => {
   display: block;
   font-size: 1rem;
   font-weight: 500;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   margin-bottom: 0.25rem;
 }
 
@@ -907,12 +907,12 @@ const formatFileSize = (bytes) => {
   text-align: center;
   cursor: pointer;
   transition: all 0.2s ease;
-  background: #333333;
+  background: var(--bg-quaternary, #333333);
 }
 
 .upload-area:hover,
 .upload-area.drag-over {
-  border-color: #4a90e2;
+  border-color: var(--border-secondary, #4a90e2);
   background: #383838;
 }
 
@@ -926,7 +926,7 @@ const formatFileSize = (bytes) => {
 .upload-area h4 {
   font-size: 1.25rem;
   font-weight: 600;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   margin: 0 0 0.5rem 0;
 }
 
@@ -941,7 +941,7 @@ const formatFileSize = (bytes) => {
   align-items: center;
   justify-content: space-between;
   padding: 1.25rem;
-  background: #333333;
+  background: var(--bg-quaternary, #333333);
   border: 1px solid #505050;
   border-radius: 8px;
   margin-top: 1rem;
@@ -969,7 +969,7 @@ const formatFileSize = (bytes) => {
   display: block;
   font-size: 1rem;
   font-weight: 500;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   margin-bottom: 0.25rem;
 }
 
@@ -1056,8 +1056,8 @@ const formatFileSize = (bytes) => {
 }
 
 .notification.success {
-  background: #2e7d32;
-  border: 1px solid #4caf50;
+  background: var(--bg-tertiary, #2e7d32);
+  border: 1px solid var(--border-secondary, #4caf50);
 }
 
 .notification.error {
@@ -1071,8 +1071,8 @@ const formatFileSize = (bytes) => {
 }
 
 .notification.info {
-  background: #1976d2;
-  border: 1px solid #2196f3;
+  background: var(--bg-secondary, #1976d2);
+  border: 1px solid var(--border-secondary, #2196f3);
 }
 
 @keyframes slideInRight {

app/components/Admin/BlacklistManager.vue

@@ -645,7 +645,7 @@ onMounted(() => {
   background: transparent;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: #27272a;
+  background: var(--bg-tertiary, #27272a);
   border-radius: 10px;
 }
 </style>

app/components/Admin/EmailTemplateManager.vue

@@ -336,7 +336,7 @@ onMounted(() => {
   background: transparent;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: #27272a;
+  background: var(--bg-tertiary, #27272a);
   border-radius: 10px;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {

app/components/Admin/NotificationSender.vue

@@ -742,7 +742,7 @@ onUnmounted(() => {
   background: transparent;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: #27272a;
+  background: var(--bg-tertiary, #27272a);
   border-radius: 10px;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {

app/components/Admin/OverviewDashboard.vue

@@ -366,7 +366,7 @@ onMounted(() => {
   background: transparent;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: #27272a;
+  background: var(--bg-tertiary, #27272a);
   border-radius: 10px;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {

app/components/Admin/RequestTimeManager.vue

@@ -842,7 +842,7 @@ const cancelForm = () => {
   background: transparent;
 }
 ::-webkit-scrollbar-thumb {
-  background: #27272a;
+  background: var(--bg-tertiary, #27272a);
   border-radius: 10px;
 }
 ::-webkit-scrollbar-thumb:hover {

app/components/Admin/ScheduleItemPrint.vue

@@ -112,7 +112,7 @@ const handleImageError = (event) => {
   justify-content: center;
   font-weight: bold;
   font-size: 14px;
-  color: #333;
+  color: var(--text-quaternary, #333333);
   flex-shrink: 0;
 }
 
@@ -141,7 +141,7 @@ const handleImageError = (event) => {
   display: none;
   align-items: center;
   justify-content: center;
-  color: #999;
+  color: var(--text-tertiary, #999999);
 }
 
 .cover-placeholder.show {
@@ -161,7 +161,7 @@ const handleImageError = (event) => {
 .song-title {
   font-weight: bold;
   font-size: 16px;
-  color: #333;
+  color: var(--text-quaternary, #333333);
   margin-bottom: 2px;
   white-space: nowrap;
   overflow: hidden;
@@ -176,7 +176,7 @@ const handleImageError = (event) => {
   display: inline-block;
   padding: 1px 4px;
   background: #e3f2fd;
-  border: 1px solid #2196f3;
+  border: 1px solid var(--border-secondary, #2196f3);
   border-radius: 3px;
   color: #1976d2;
   font-size: 10px;
@@ -186,7 +186,7 @@ const handleImageError = (event) => {
 
 .song-artist {
   font-size: 14px;
-  color: #666;
+  color: var(--text-quaternary, #666666);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -197,7 +197,7 @@ const handleImageError = (event) => {
   display: flex;
   align-items: center;
   font-size: 12px;
-  color: #666;
+  color: var(--text-quaternary, #666666);
   white-space: nowrap;
 }
 
@@ -207,14 +207,14 @@ const handleImageError = (event) => {
 }
 
 .value {
-  color: #333;
+  color: var(--text-quaternary, #333333);
 }
 
 /* 打印样式 */
 @media print {
   .schedule-item-print {
-    color: #000 !important;
-    background: #fff !important;
+    color: var(--text-primary, #000) !important;
+    background: var(--card-bg, #fff) !important;
     width: 100% !important;
     max-width: none !important;
     box-sizing: border-box !important;
@@ -230,7 +230,7 @@ const handleImageError = (event) => {
 
   .sequence-number {
     background: #f0f0f0 !important;
-    color: #000 !important;
+    color: var(--text-primary, #000) !important;
     width: 30px !important;
     height: 30px !important;
     flex-shrink: 0 !important;
@@ -264,7 +264,7 @@ const handleImageError = (event) => {
   }
 
   .song-title {
-    color: #000 !important;
+    color: var(--text-primary, #000) !important;
     font-size: 16px !important;
     white-space: nowrap !important;
     overflow: hidden !important;
@@ -274,11 +274,11 @@ const handleImageError = (event) => {
   .song-artist,
   .label,
   .value {
-    color: #333 !important;
+    color: var(--text-quaternary, #333333) !important;
   }
 
   .time-range {
-    color: #666 !important;
+    color: var(--text-quaternary, #666666) !important;
   }
 
   .requester-info,

app/components/Admin/SchedulePrinter.vue

@@ -1383,15 +1383,15 @@ watch(
 /* 预览区域和打印样式的核心CSS - 保持原生CSS以确保精确控制 */
 
 .preview-content {
-  background: #ffffff;
+  background: var(--card-bg, #ffffff);
   padding: 0;
   position: relative;
 }
 
 /* 打印页面样式 */
 .print-page {
-  background: #ffffff;
-  color: #000000;
+  background: var(--card-bg, #ffffff);
+  color: var(--text-primary, #000000);
   width: 100%;
   margin: 0 auto;
   padding: 30px;
@@ -1426,7 +1426,7 @@ watch(
 .logo-divider {
   width: 2px;
   height: 60px;
-  background: linear-gradient(to bottom, #ddd, #999, #ddd);
+  background: linear-gradient(to bottom, var(--border-secondary, #dddddd), #999, #ddd);
   border-radius: 1px;
   margin: 0 4px;
 }
@@ -1445,19 +1445,19 @@ watch(
   font-size: 24px;
   font-weight: normal;
   margin: 0 0 4px 0;
-  color: #000;
+  color: var(--text-primary, #000);
 }
 
 .title-section h2 {
   font-size: 18px;
   font-weight: 500;
   margin: 0;
-  color: #666;
+  color: var(--text-quaternary, #666666);
 }
 
 .date-info {
   font-size: 14px;
-  color: #666;
+  color: var(--text-quaternary, #666666);
   text-align: right;
   display: flex;
   align-items: flex-start;
@@ -1477,14 +1477,14 @@ watch(
 .no-data-message {
   text-align: center;
   padding: 60px 20px;
-  color: #666;
+  color: var(--text-quaternary, #666666);
 }
 
 .no-data-icon {
   width: 64px;
   height: 64px;
   margin: 0 auto 20px;
-  color: #ccc;
+  color: var(--text-secondary, #cccccc);
 }
 
 .no-data-icon svg {
@@ -1496,7 +1496,7 @@ watch(
   font-size: 18px;
   font-weight: 500;
   margin: 0 0 12px 0;
-  color: #333;
+  color: var(--text-quaternary, #333333);
 }
 
 .no-data-message p {
@@ -1512,15 +1512,15 @@ watch(
   font-weight: bold;
   margin: 24px 0 12px 0;
   padding: 8px 12px;
-  border-bottom: 2px solid #ddd;
+  border-bottom: 2px solid var(--border-secondary, #ddd);
   background: #f8f9fa;
-  color: #333;
+  color: var(--text-quaternary, #333333);
   border-radius: 4px 4px 0 0;
 }
 
 .playtime-group .group-title {
   background: #e3f2fd;
-  border-bottom-color: #2196f3;
+  border-bottom-color: var(--border-secondary, #2196f3);
   color: #1565c0;
 }
 
@@ -1533,7 +1533,7 @@ watch(
 .group-count {
   font-size: 14px;
   font-weight: normal;
-  color: #666;
+  color: var(--text-quaternary, #666666);
   margin-left: 8px;
 }
 
@@ -1547,7 +1547,7 @@ watch(
   margin: 16px 0 8px 0;
   padding: 6px 10px;
   background: #f0f8ff;
-  border-left: 3px solid #2196f3;
+  border-left: 3px solid var(--border-secondary, #2196f3);
   color: #1565c0;
   border-radius: 0 4px 4px 0;
 }
@@ -1555,7 +1555,7 @@ watch(
 .playtime-count {
   font-size: 12px;
   font-weight: normal;
-  color: #666;
+  color: var(--text-quaternary, #666666);
   margin-left: 6px;
 }
 
@@ -1570,7 +1570,7 @@ watch(
   padding-top: 16px;
   border-top: 1px solid #e5e5e5;
   font-size: 12px;
-  color: #666;
+  color: var(--text-quaternary, #666666);
 }
 
 .footer-left {

app/components/Admin/Sidebar.vue

@@ -279,7 +279,7 @@ const getRoleDisplayName = (role) => {
   background: transparent;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: #27272a;
+  background: var(--bg-tertiary, #27272a);
   border-radius: 10px;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {

app/components/Admin/SongDownloadDialog.vue

@@ -1228,7 +1228,7 @@ onUnmounted(() => {
   background: transparent;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: #27272a;
+  background: var(--bg-tertiary, #27272a);
   border-radius: 10px;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {

app/components/Admin/SongManagement.vue

@@ -2179,7 +2179,7 @@ onUnmounted(() => {
   background: transparent;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: #27272a;
+  background: var(--bg-tertiary, #27272a);
   border-radius: 10px;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {

app/components/Admin/VotersModal.vue

@@ -223,14 +223,14 @@ watch(
 .modal-title {
   font-size: 20px;
   font-weight: 600;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   margin: 0;
 }
 
 .close-btn {
   background: none;
   border: none;
-  color: #888;
+  color: var(--text-tertiary, #888888);
   cursor: pointer;
   padding: 8px;
   border-radius: 8px;
@@ -238,8 +238,8 @@ watch(
 }
 
 .close-btn:hover {
-  background: #2a2a2a;
-  color: #ffffff;
+  background: var(--bg-tertiary, #2a2a2a);
+  color: var(--text-primary, #ffffff);
 }
 
 .close-btn svg {
@@ -254,22 +254,22 @@ watch(
 }
 
 .song-info {
-  background: #2a2a2a;
+  background: var(--bg-tertiary, #2a2a2a);
   border-radius: 12px;
   padding: 20px;
   margin-bottom: 24px;
-  border: 1px solid #3a3a3a;
+  border: 1px solid var(--border-secondary, #3a3a3a);
 }
 
 .song-title {
   font-size: 18px;
   font-weight: 600;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   margin: 0 0 8px 0;
 }
 
 .song-artist {
-  color: #888;
+  color: var(--text-tertiary, #888888);
   margin: 0 0 16px 0;
   font-size: 14px;
 }
@@ -304,7 +304,7 @@ watch(
 .spinner {
   width: 32px;
   height: 32px;
-  border: 3px solid #3a3a3a;
+  border: 3px solid var(--border-secondary, #3a3a3a);
   border-top: 3px solid #667eea;
   border-radius: 50%;
   animation: spin 1s linear infinite;
@@ -366,12 +366,12 @@ watch(
   align-items: center;
   justify-content: space-between;
   padding-bottom: 12px;
-  border-bottom: 1px solid #3a3a3a;
+  border-bottom: 1px solid var(--border-secondary, #3a3a3a);
 }
 
 .voters-title {
   font-weight: 600;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   font-size: 16px;
 }
 
@@ -388,15 +388,15 @@ watch(
   align-items: center;
   justify-content: space-between;
   padding: 12px 16px;
-  background: #2a2a2a;
+  background: var(--bg-tertiary, #2a2a2a);
   border-radius: 8px;
-  border: 1px solid #3a3a3a;
+  border: 1px solid var(--border-secondary, #3a3a3a);
   transition: all 0.2s ease;
 }
 
 .voter-item:hover {
-  background: #333333;
-  border-color: #4a4a4a;
+  background: var(--bg-quaternary, #333333);
+  border-color: var(--border-secondary, #4a4a4a);
 }
 
 .voter-info {
@@ -426,18 +426,18 @@ watch(
 }
 
 .voter-name {
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   font-weight: 500;
   font-size: 14px;
 }
 
 .vote-time {
-  color: #888;
+  color: var(--text-tertiary, #888888);
   font-size: 12px;
 }
 
 .voter-number {
-  color: #888;
+  color: var(--text-tertiary, #888888);
   font-size: 12px;
   font-weight: 500;
 }
@@ -454,11 +454,11 @@ watch(
 .empty-icon {
   width: 48px;
   height: 48px;
-  color: #666;
+  color: var(--text-quaternary, #666666);
 }
 
 .empty-state p {
-  color: #888;
+  color: var(--text-tertiary, #888888);
   margin: 0;
 }
 
@@ -469,8 +469,8 @@ watch(
 }
 
 .close-button {
-  background: #3a3a3a;
-  color: #ffffff;
+  background: var(--bg-quaternary, #3a3a3a);
+  color: var(--text-primary, #ffffff);
   border: none;
   padding: 12px 24px;
   border-radius: 8px;
@@ -490,7 +490,7 @@ watch(
 }
 
 .voters-container::-webkit-scrollbar-track {
-  background: #2a2a2a;
+  background: var(--bg-tertiary, #2a2a2a);
   border-radius: 3px;
 }