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

app/components/Songs/RequestForm.vue

@@ -2912,7 +2912,7 @@ defineExpose({
 <style scoped>
 .request-form {
   width: 100%;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   display: flex;
   gap: 2rem;
   height: calc(100vh - 160px);
@@ -2954,7 +2954,7 @@ defineExpose({
   font-size: 15px;
   line-height: 1.7;
   letter-spacing: 0.04em;
-  color: #fff;
+  color: var(--text-primary, #ffffff);
 }
 
 .rules-content-desktop p {
@@ -3181,7 +3181,7 @@ defineExpose({
   font-family: 'MiSans', sans-serif;
   font-weight: 600;
   font-size: 15px;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   white-space: nowrap;
   flex-shrink: 0; /* 防止标签被压缩 */
 }
@@ -3212,11 +3212,11 @@ defineExpose({
 }
 
 .search-button {
-  background: linear-gradient(180deg, #0043f8 0%, #0075f8 100%);
+  background: linear-gradient(180deg, var(--bg-secondary, #0043f8) 0%, #0075f8 100%);
   border: 1px solid rgba(255, 255, 255, 0.16);
   border-radius: 8px;
   padding: 0.75rem 1.5rem;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   font-family: 'MiSans', sans-serif;
   font-weight: 600;
   font-size: 14px;
@@ -3250,7 +3250,7 @@ defineExpose({
   font-family: 'MiSans', sans-serif;
   font-weight: 600;
   font-size: 16px;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   white-space: nowrap;
   flex-shrink: 0; /* 防止标签被压缩 */
 }
@@ -3271,7 +3271,7 @@ defineExpose({
   border-radius: 6px;
   padding: 0.25rem 0.5rem;
   font-size: 14px;
-  color: #fff;
+  color: var(--text-primary, #ffffff);
 }
 
 .remove-collaborator {
@@ -3285,7 +3285,7 @@ defineExpose({
 }
 
 .remove-collaborator:hover {
-  color: #fff;
+  color: var(--text-primary, #ffffff);
 }
 
 .add-collaborator-btn {
@@ -3304,7 +3304,7 @@ defineExpose({
 
 .add-collaborator-btn:hover {
   background: rgba(255, 255, 255, 0.1);
-  color: #fff;
+  color: var(--text-primary, #ffffff);
 }
 
 /* 自定义复选框样式 */
@@ -3327,7 +3327,7 @@ defineExpose({
   width: 14px;
   height: 14px;
   border-radius: 4px;
-  border: 1px solid #3f3f46;
+  border: 1px solid var(--border-secondary, #3f3f46);
   background: rgba(24, 24, 27, 0.5);
   transition: all 0.2s ease;
 }
@@ -3343,7 +3343,7 @@ defineExpose({
 
 .custom-checkbox-input:checked + .custom-checkbox-box {
   background: #3b82f6;
-  border-color: #3b82f6;
+  border-color: var(--border-secondary, #3b82f6);
 }
 
 .custom-checkbox-input:checked + .custom-checkbox-box .custom-checkbox-icon {
@@ -3428,7 +3428,7 @@ defineExpose({
   font-family: 'MiSans', sans-serif;
   font-weight: 600;
   font-size: 13px;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
 }
 
 .status-item-horizontal .status-value {
@@ -3615,7 +3615,7 @@ defineExpose({
 }
 
 .header-btn:hover {
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   background: rgba(255, 255, 255, 0.08);
 }
 
@@ -3645,7 +3645,7 @@ defineExpose({
 .import-btn:hover {
   background: rgba(255, 255, 255, 0.08);
   border-color: rgba(255, 255, 255, 0.15);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
 }
 
 .user-status {
@@ -3706,7 +3706,7 @@ defineExpose({
 
 .action-btn-compact:hover {
   background: rgba(255, 255, 255, 0.08);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   border-color: rgba(255, 255, 255, 0.12);
 }
 
@@ -3731,7 +3731,7 @@ defineExpose({
 }
 
 .radio-label.active {
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   font-weight: 600;
   background: rgba(255, 255, 255, 0.08);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
@@ -3775,9 +3775,9 @@ defineExpose({
 }
 
 .platform-btn.active {
-  background: linear-gradient(180deg, #0043f8 0%, #0075f8 100%);
+  background: linear-gradient(180deg, var(--bg-secondary, #0043f8) 0%, #0075f8 100%);
   border-color: rgba(255, 255, 255, 0.16);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
 }
 
 .platform-btn:hover:not(.active) {
@@ -3873,7 +3873,7 @@ defineExpose({
 }
 
 .source-item.healthy .source-indicator {
-  background: #22c55e;
+  background: var(--bg-tertiary, #22c55e);
   box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
 }
 
@@ -4031,7 +4031,7 @@ defineExpose({
   font-family: 'MiSans', sans-serif;
   font-weight: 600;
   font-size: 15px;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   margin: 0;
 }
 
@@ -4077,7 +4077,7 @@ defineExpose({
   font-family: 'MiSans', sans-serif;
   font-weight: 600;
   font-size: 14px;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   cursor: pointer;
   transition: all 0.3s ease;
 }
@@ -4103,14 +4103,14 @@ defineExpose({
 }
 
 .submit-button {
-  background: linear-gradient(180deg, #0043f8 0%, #0075f8 100%);
+  background: linear-gradient(180deg, var(--bg-secondary, #0043f8) 0%, #0075f8 100%);
   border: 1px solid rgba(255, 255, 255, 0.16);
   border-radius: 8px;
   padding: 0.5rem 1.5rem;
   font-family: 'MiSans', sans-serif;
   font-weight: 600;
   font-size: 14px;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   cursor: pointer;
   transition: all 0.3s ease;
 }
@@ -4125,7 +4125,7 @@ defineExpose({
   transform: none;
 }
 .similar-song-alert {
-  background: #21242d;
+  background: var(--bg-tertiary, #21242d);
   border-radius: 10px;
   padding: 0.5rem 0.75rem;
   box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
@@ -4157,7 +4157,7 @@ defineExpose({
   font-family: 'MiSans', sans-serif;
   font-weight: 600;
   font-size: 16px;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
 }
 
 .alert-content {
@@ -4190,7 +4190,7 @@ defineExpose({
 .song-title {
   margin: 0 0 0.25rem 0;
   font-size: 14px;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   font-weight: 500;
 }
 
@@ -4244,11 +4244,11 @@ defineExpose({
 }
 
 .vote-btn {
-  background: linear-gradient(180deg, #0043f8 0%, #0075f8 100%);
+  background: linear-gradient(180deg, var(--bg-secondary, #0043f8) 0%, #0075f8 100%);
   border: 1px solid rgba(255, 255, 255, 0.16);
   border-radius: 8px;
   padding: 0.5rem 1rem;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   font-family: 'MiSans', sans-serif;
   font-weight: 600;
   font-size: 14px;
@@ -4272,7 +4272,7 @@ defineExpose({
   border: 1px solid rgba(255, 255, 255, 0.16);
   border-radius: 8px;
   padding: 0.5rem 1rem;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   font-family: 'MiSans', sans-serif;
   font-weight: 600;
   font-size: 14px;
@@ -4390,7 +4390,7 @@ defineExpose({
 
 .modal-header h3 {
   margin: 0;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   font-family: 'MiSans', sans-serif;
   font-weight: 600;
   font-size: 18px;
@@ -4415,7 +4415,7 @@ defineExpose({
 
 .close-btn:hover {
   background: rgba(255, 255, 255, 0.1);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   transform: rotate(90deg);
 }
 
@@ -4456,14 +4456,14 @@ defineExpose({
 
 .btn-secondary:hover {
   background: rgba(255, 255, 255, 0.1);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   border-color: rgba(255, 255, 255, 0.2);
 }
 
 .btn-primary {
-  background: linear-gradient(135deg, #0043f8 0%, #0075f8 100%);
+  background: linear-gradient(135deg, var(--bg-secondary, #0043f8) 0%, #0075f8 100%);
   border-color: rgba(255, 255, 255, 0.1);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   box-shadow: 0 4px 12px rgba(0, 67, 248, 0.3);
 }
 
@@ -4527,7 +4527,7 @@ defineExpose({
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  background: #18181b;
+  background: var(--bg-secondary, #18181b);
 }
 
 .cover-img {
@@ -4600,7 +4600,7 @@ defineExpose({
   font-family: 'MiSans', sans-serif;
   font-weight: 600;
   font-size: 15px;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   margin: 0;
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -4662,7 +4662,7 @@ defineExpose({
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   cursor: pointer;
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   flex-shrink: 0;
@@ -4713,7 +4713,7 @@ defineExpose({
   border: 1px solid rgba(255, 255, 255, 0.16);
   border-radius: 6px;
   padding: 0.4rem 0.8rem;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   font-family: 'MiSans', sans-serif;
   font-weight: 600;
   font-size: 12px;
@@ -4750,11 +4750,11 @@ defineExpose({
 }
 
 .select-btn {
-  background: linear-gradient(180deg, #0043f8 0%, #0075f8 100%);
+  background: linear-gradient(180deg, var(--bg-secondary, #0043f8) 0%, #0075f8 100%);
   border: 1px solid rgba(255, 255, 255, 0.16);
   border-radius: 8px;
   padding: 0.5rem 1rem;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   font-family: 'MiSans', sans-serif;
   font-weight: 600;
   font-size: 14px;
@@ -4812,7 +4812,7 @@ defineExpose({
   font-family: 'MiSans', sans-serif;
   font-weight: 600;
   font-size: 14px;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   cursor: pointer;
   transition: all 0.3s ease;
 }
@@ -4835,7 +4835,7 @@ defineExpose({
   font-weight: 600;
   font-size: 18px;
   margin-bottom: 1rem;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
 }
 
 .manual-form {
@@ -4855,7 +4855,7 @@ defineExpose({
   border: 1px solid rgba(255, 255, 255, 0.16);
   border-radius: 8px;
   padding: 0.5rem 1rem;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   font-family: 'MiSans', sans-serif;
   font-weight: 600;
   font-size: 14px;
@@ -4868,11 +4868,11 @@ defineExpose({
 }
 
 .manual-confirm-btn {
-  background: linear-gradient(180deg, #0043f8 0%, #0075f8 100%);
+  background: linear-gradient(180deg, var(--bg-secondary, #0043f8) 0%, #0075f8 100%);
   border: 1px solid rgba(255, 255, 255, 0.16);
   border-radius: 8px;
   padding: 0.5rem 1rem;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
   font-family: 'MiSans', sans-serif;
   font-weight: 600;
   font-size: 14px;
@@ -5148,8 +5148,8 @@ defineExpose({
   }
 
   .platform-btn.active {
-    background: #0b5afe;
-    color: #ffffff;
+    background: var(--bg-secondary, #0b5afe);
+    color: var(--text-primary, #ffffff);
     box-shadow: 0 2px 8px rgba(11, 90, 254, 0.3);
   }
 
@@ -5487,7 +5487,7 @@ defineExpose({
 
 .import-semester-btn:hover {
   background: rgba(255, 255, 255, 0.15);
-  color: #fff;
+  color: var(--text-primary, #ffffff);
   border-color: rgba(255, 255, 255, 0.2);
 }
 
@@ -5513,7 +5513,7 @@ defineExpose({
   font-family: 'MiSans', sans-serif;
   font-weight: 500;
   font-size: 16px;
-  color: #fff;
+  color: var(--text-primary, #ffffff);
   margin-bottom: 0.5rem;
 }
 
@@ -5571,7 +5571,7 @@ defineExpose({
   font-family: 'MiSans', sans-serif;
   font-weight: 500;
   font-size: 14px;
-  color: #fff;
+  color: var(--text-primary, #ffffff);
 }
 
 .episode-duration {