fix(ui): 修复浅色主题下的 Tailwind CSS 及部分残留硬编码

app/components/Songs/RequestForm.vue

@@ -2944,7 +2944,7 @@ defineExpose({
   font-weight: 400;
   font-size: 15px;
   letter-spacing: 0.04em;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--text-secondary);
   margin-bottom: 0.75rem;
 }
 
@@ -2968,7 +2968,7 @@ defineExpose({
   gap: 0.5rem;
   font-size: 15px;
   font-weight: 700;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--text-primary);
   margin-bottom: 1.25rem;
 }
 
@@ -2980,7 +2980,7 @@ defineExpose({
   font-family: 'MiSans', sans-serif;
   font-size: 13px;
   line-height: 1.8;
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--text-tertiary);
 }
 
 .rule-item {
@@ -2990,7 +2990,7 @@ defineExpose({
 
 .rule-item span {
   margin-right: 0.5rem;
-  color: rgba(255, 255, 255, 0.3);
+  color: var(--text-disabled);
   font-weight: 600;
 }
 
@@ -3025,7 +3025,7 @@ defineExpose({
   gap: 2px;
   padding: 8px 10px;
   border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border: 1px solid var(--border-tertiary);
   background: rgba(6, 15, 22, 0.9);
   backdrop-filter: blur(8px);
   min-width: 140px;
@@ -3066,7 +3066,7 @@ defineExpose({
 .badge-title {
   font-size: 12px;
   font-weight: 800;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--text-primary);
 }
 
 .submission-status-badge.open .badge-title {
@@ -3080,7 +3080,7 @@ defineExpose({
 .badge-subtitle {
   font-size: 11px;
   font-weight: 600;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--text-secondary);
 }
 
 .login-required-hint {
@@ -3136,7 +3136,7 @@ defineExpose({
   min-width: 28px;
   padding: 0 10px;
   border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
+  border: 1px solid var(--border-primary);
   background: rgba(0, 0, 0, 0.25);
   color: rgba(255, 255, 255, 0.85);
   font-family: 'MiSans', sans-serif;
@@ -3277,7 +3277,7 @@ defineExpose({
 .remove-collaborator {
   background: none;
   border: none;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--text-secondary);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -3292,7 +3292,7 @@ defineExpose({
   display: flex;
   align-items: center;
   gap: 0.25rem;
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--bg-tertiary);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 6px;
   padding: 0.25rem 0.75rem;
@@ -3474,7 +3474,7 @@ defineExpose({
   font-weight: 600;
   font-size: 15px;
   letter-spacing: 0.02em;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--text-primary);
   margin-bottom: 0.25rem;
 }
 
@@ -3606,7 +3606,7 @@ defineExpose({
   gap: 0.25rem;
   background: transparent;
   border: none;
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--text-tertiary);
   padding: 0.2rem 0.4rem;
   border-radius: 4px;
   font-size: 11px;
@@ -3628,7 +3628,7 @@ defineExpose({
 .import-btn {
   background: rgba(255, 255, 255, 0.04);
   color: rgba(255, 255, 255, 0.7);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border: 1px solid var(--border-tertiary);
   padding: 0.45rem 0.75rem;
   border-radius: 7px;
   font-size: 12px;
@@ -3676,7 +3676,7 @@ defineExpose({
 
 .user-name {
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--text-primary);
   font-weight: 600;
   white-space: nowrap;
   overflow: hidden;
@@ -3712,10 +3712,10 @@ defineExpose({
 
 .search-type-switch {
   display: flex;
-  background: rgba(0, 0, 0, 0.2);
+  background: var(--bg-primary);
   border-radius: 6px;
   padding: 2px;
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--border-secondary);
 }
 
 .radio-label {
@@ -3757,18 +3757,18 @@ defineExpose({
 
 .logout-btn:hover {
   color: rgba(255, 255, 255, 0.7);
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--bg-tertiary);
 }
 
 .platform-btn {
   background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.12);
+  border: 1px solid var(--border-primary);
   border-radius: 8px;
   padding: 0.45rem 0.85rem;
   font-family: 'MiSans', sans-serif;
   font-weight: 600;
   font-size: 13px;
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--text-tertiary);
   cursor: pointer;
   transition: all 0.3s ease;
   white-space: nowrap;
@@ -3787,7 +3787,7 @@ defineExpose({
 
 /* 音源状态显示 */
 .source-status-display {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--bg-tertiary);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 12px;
   padding: 1rem;
@@ -3805,13 +3805,13 @@ defineExpose({
 .status-title {
   font-size: 14px;
   font-weight: 600;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--text-primary);
   font-family: 'MiSans', sans-serif;
 }
 
 .status-summary {
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--text-secondary);
   background: rgba(255, 255, 255, 0.1);
   padding: 0.25rem 0.5rem;
   border-radius: 6px;
@@ -3954,7 +3954,7 @@ defineExpose({
 }
 
 .loading-text {
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--text-secondary);
   font-family: 'MiSans', sans-serif;
   font-weight: 500;
   margin: 0;
@@ -4037,7 +4037,7 @@ defineExpose({
 
 .empty-hint,
 .initial-hint {
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--text-secondary);
   font-size: 13px;
   margin: 0;
 }
@@ -4222,7 +4222,7 @@ defineExpose({
 }
 
 .alert-hint {
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--text-secondary);
   font-size: 14px;
   margin-top: 0.5rem;
 }
@@ -4385,7 +4385,7 @@ defineExpose({
   align-items: center;
   padding: 1.25rem 1.5rem;
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-  background: rgba(255, 255, 255, 0.02);
+  background: var(--bg-secondary);
 }
 
 .modal-header h3 {
@@ -4449,7 +4449,7 @@ defineExpose({
 }
 
 .btn-secondary {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--bg-tertiary);
   border-color: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.8);
 }
@@ -4516,7 +4516,7 @@ defineExpose({
 }
 
 .result-item:hover {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--bg-tertiary);
 }
 
 .result-cover {
@@ -4625,7 +4625,7 @@ defineExpose({
 }
 
 .result-artist {
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--text-secondary);
   font-size: 13px;
   margin: 0.25rem 0;
   white-space: nowrap;
@@ -4693,7 +4693,7 @@ defineExpose({
 
 .similar-text {
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--text-secondary);
   font-family: 'MiSans', sans-serif;
   font-weight: 500;
 }
@@ -4787,9 +4787,9 @@ defineExpose({
 }
 
 .replay-btn:disabled {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--bg-tertiary);
   border-color: rgba(255, 255, 255, 0.1);
-  color: rgba(255, 255, 255, 0.3);
+  color: var(--text-disabled);
   cursor: not-allowed;
   transform: none;
 }
@@ -4957,14 +4957,14 @@ defineExpose({
     padding: 1.25rem;
     background: rgba(255, 255, 255, 0.04);
     backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--border-tertiary);
     border-radius: 18px;
   }
 
   .rules-title {
     font-size: 15px;
     font-weight: 700;
-    color: rgba(255, 255, 255, 0.9);
+    color: var(--text-primary);
     margin-bottom: 1.25rem;
     letter-spacing: normal;
   }
@@ -5009,9 +5009,9 @@ defineExpose({
     display: flex;
     flex-direction: column;
     margin-bottom: 2rem;
-    background: rgba(255, 255, 255, 0.02);
+    background: var(--bg-secondary);
     backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--border-tertiary);
     border-radius: 20px;
     /* 允许容器内容触发页面滚动 */
     touch-action: pan-y;
@@ -5103,7 +5103,7 @@ defineExpose({
   }
 
   .search-input {
-    background: rgba(255, 255, 255, 0.05);
+    background: var(--bg-tertiary);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 12px;
     padding: 0.75rem 1rem;
@@ -5128,7 +5128,7 @@ defineExpose({
   }
   
   .platform-selection {
-    background: rgba(0, 0, 0, 0.2);
+    background: var(--bg-primary);
     padding: 4px;
     border-radius: 12px;
     margin-bottom: 0.5rem;
@@ -5143,7 +5143,7 @@ defineExpose({
     border-radius: 10px;
     background: transparent;
     border: none;
-    color: rgba(255, 255, 255, 0.5);
+    color: var(--text-tertiary);
     min-width: auto;
   }
 
@@ -5471,7 +5471,7 @@ defineExpose({
   align-items: center;
   gap: 0.4rem;
   background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.12);
+  border: 1px solid var(--border-primary);
   border-radius: 8px;
   padding: 0.6rem 0.8rem;
   color: rgba(255, 255, 255, 0.8);
@@ -5520,7 +5520,7 @@ defineExpose({
 .video-author {
   font-family: 'MiSans', sans-serif;
   font-size: 14px;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--text-secondary);
 }
 
 .episodes-list {
@@ -5535,7 +5535,7 @@ defineExpose({
   align-items: center;
   gap: 1rem;
   padding: 1rem;
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--bg-tertiary);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 8px;
   cursor: pointer;
@@ -5577,6 +5577,6 @@ defineExpose({
 .episode-duration {
   font-family: 'MiSans', sans-serif;
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--text-tertiary);
 }
 </style>