fix(ui): 适配歌曲卡片、日期选择器、平台按钮及搜索占位图的浅色主题

- 修复 SongList/ScheduleList 投稿人、热度、投稿时间文字对比度，统一引用 --text-secondary 主题变量
- 重构 CustomSelect 通用组件为浅色底 + indigo 主色系，适配前台投稿页日期选择
- 调整 RequestForm 平台按钮三态配色，激活态使用 indigo 渐变保持主题统一
- 重写 search.svg 全部 19 个 path fill 为深灰系列，解决浅色背景下占位图不可见问题

app/components/Songs/RequestForm.vue

@@ -3783,28 +3783,30 @@ defineExpose({
 }
 
 .platform-btn {
-  background: rgba(255, 255, 255, 0.08);
-  border: 1px solid var(--border-primary);
-  border-radius: 8px;
+  background: var(--bg-secondary, #f4f4f5);
+  border: 1px solid var(--border-secondary, #e4e4e7);
+  border-radius: 10px;
   padding: 0.45rem 0.85rem;
   font-family: 'MiSans', sans-serif;
   font-weight: 600;
   font-size: 13px;
-  color: var(--text-tertiary);
+  color: var(--text-secondary, #52525b);
   cursor: pointer;
   transition: all 0.3s ease;
   white-space: nowrap;
 }
 
 .platform-btn.active {
-  background: linear-gradient(180deg, var(--bg-secondary, #0043f8) 0%, #0075f8 100%);
-  border-color: rgba(255, 255, 255, 0.16);
-  color: var(--text-primary, #ffffff);
+  background: linear-gradient(180deg, var(--primary, #4f46e5) 0%, #6366f1 100%);
+  border-color: rgba(79, 70, 229, 0.4);
+  color: #ffffff;
+  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.2);
 }
 
 .platform-btn:hover:not(.active) {
-  background: rgba(255, 255, 255, 0.2);
-  color: rgba(255, 255, 255, 0.8);
+  background: var(--bg-tertiary, #e4e4e7);
+  color: var(--text-primary, #09090b);
+  border-color: var(--border-primary, #d4d4d8);
 }
 
 /* 音源状态显示 */

app/components/Songs/ScheduleList.vue

@@ -2777,14 +2777,14 @@ const vRipple = {
   font-family: 'MiSans', sans-serif;
   font-weight: normal;
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--text-secondary, #52525b);
   text-align: left;
 }
 
 /* 重播申请人数样式 */
 .replay-requester {
   /* 使用和普通投稿人相同的颜色 */
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--text-secondary, #52525b);
   font-weight: normal;
   cursor: help;
 }
@@ -2824,8 +2824,8 @@ const vRipple = {
   font-family: 'MiSans', sans-serif;
   font-weight: 600;
   font-size: 12px;
-  color: var(--text-primary);
-  opacity: 0.4;
+  color: var(--text-secondary, #52525b);
+  opacity: 0.95;
 }
 
 /* ==================== 移动端设计 ==================== */
@@ -3124,7 +3124,7 @@ const vRipple = {
 
   .requester {
     font-size: 12px;
-    color: rgba(255, 255, 255, 0.5);
+    color: var(--text-secondary, #52525b);
     font-weight: 400;
   }
 
@@ -3140,7 +3140,7 @@ const vRipple = {
   .vote-count .label {
     font-size: 11px;
     font-weight: 600;
-    color: rgba(255, 255, 255, 0.4);
+    color: var(--text-secondary, #52525b);
     margin-top: 2px;
   }
 

app/components/Songs/SongList.vue

@@ -2167,7 +2167,7 @@ const vRipple = {
   font-family: 'MiSans', sans-serif;
   font-weight: normal;
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--text-secondary, #52525b);
   text-align: left;
   white-space: nowrap;
   overflow: hidden;
@@ -2215,8 +2215,8 @@ const vRipple = {
   font-family: 'MiSans-Demibold', sans-serif;
   font-weight: 600;
   font-size: 12px;
-  color: var(--text-primary, #ffffff);
-  opacity: 0.4;
+  color: var(--text-secondary, #52525b);
+  opacity: 0.9;
 }
 
 /* 点赞按钮样式 */
@@ -2308,13 +2308,14 @@ const vRipple = {
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
-  padding: 0.15rem 0.4rem;
-  border-radius: 4px;
-  font-size: 0.7rem;
+  padding: 0.25rem 0.6rem;
+  border-radius: 8px;
+  font-size: 11px;
+  font-weight: 600;
   line-height: 1;
-  background: rgba(59, 130, 246, 0.15);
-  border: 1px solid rgba(59, 130, 246, 0.3);
-  color: #93c5fd;
+  background: rgba(79, 70, 229, 0.08);
+  border: 1px solid rgba(79, 70, 229, 0.2);
+  color: var(--primary, #4f46e5);
   white-space: nowrap;
 }
 
@@ -2329,20 +2330,21 @@ const vRipple = {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background: var(--bg-tertiary, #21242d);
-  border-radius: 0 0 10px 10px;
-  padding: 0.5rem 1rem;
+  background: var(--bg-secondary, #f4f4f5);
+  border-radius: 0 0 14px 14px;
+  padding: 0.6rem 1rem;
   width: 95%;
   position: relative;
   z-index: 1;
   height: 45px;
+  border-top: 1px solid var(--border-secondary, #e4e4e7);
 }
 
 .submission-time {
   font-family: 'MiSans-Demibold', sans-serif;
   font-weight: 600;
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--text-secondary, #52525b);
   text-align: left;
   max-width: 70%;
 }
@@ -2705,13 +2707,13 @@ button:disabled {
     font-weight: 700;
     margin-bottom: 4px;
     line-height: 1.2;
-    color: var(--text-primary, #ffffff);
+    color: var(--text-primary, #09090b);
     letter-spacing: 0.01em;
   }
 
   .requester {
     font-size: 12px;
-    color: rgba(255, 255, 255, 0.4);
+    color: var(--text-secondary, #52525b);
     font-weight: 400;
     margin-top: 2px;
   }
@@ -2736,7 +2738,7 @@ button:disabled {
   .vote-count .label {
     font-size: 10px;
     font-weight: 600;
-    color: rgba(255, 255, 255, 0.3);
+    color: var(--text-secondary, #52525b);
     margin-top: 2px;
     text-transform: uppercase;
   }
@@ -2745,8 +2747,8 @@ button:disabled {
     width: 44px;
     height: 44px;
     border-radius: 14px;
-    background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: var(--bg-secondary, #f4f4f5);
+    border: 1px solid var(--border-secondary, #e4e4e7);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -2765,16 +2767,16 @@ button:disabled {
 
   /* 投稿时间和操作 */
   .submission-footer {
-    background: rgba(255, 255, 255, 0.02);
+    background: var(--bg-secondary, #f4f4f5);
     padding: 10px 16px;
     height: auto;
     width: 100%;
-    border-top: 1px solid rgba(255, 255, 255, 0.04);
+    border-top: 1px solid var(--border-secondary, #e4e4e7);
   }
 
   .submission-time {
     font-size: 11px;
-    color: rgba(255, 255, 255, 0.3);
+    color: var(--text-secondary, #52525b);
     font-weight: 400;
   }
 
@@ -2783,9 +2785,9 @@ button:disabled {
     padding: 0 12px;
     font-size: 12px;
     border-radius: 8px;
-    background: rgba(255, 255, 255, 0.08);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.8);
+    background: var(--bg-secondary, #f4f4f5);
+    border: 1px solid var(--border-secondary, #e4e4e7);
+    color: var(--text-primary, #09090b);
   }
 
   .withdraw-button.replay-cancel-btn,

app/components/UI/Common/CustomSelect.vue

@@ -1,11 +1,11 @@
 <template>
   <div ref="containerRef" class="relative" :class="className">
     <div
-      class="flex items-center gap-2 px-3 py-2 bg-zinc-950 border rounded-lg transition-all cursor-pointer select-none"
+      class="flex items-center gap-2 px-3 py-2 bg-white border rounded-xl transition-all cursor-pointer select-none"
       :class="[
         isOpen
-          ? 'border-blue-500/50 bg-blue-600/5 shadow-lg'
-          : 'border-zinc-800 hover:border-zinc-700'
+          ? 'border-indigo-400/60 bg-indigo-50/60 shadow-sm'
+          : 'border-zinc-200 hover:border-zinc-300'
       ]"
       @click="toggleDropdown"
     >
@@ -13,14 +13,14 @@
         <span
           v-if="label"
           class="text-[8px] font-black uppercase tracking-widest leading-none mb-0.5 transition-colors"
-          :class="isOpen ? 'text-blue-400' : 'text-zinc-600'"
+          :class="isOpen ? 'text-indigo-500' : 'text-zinc-500'"
         >
           {{ label }}
         </span>
-        <span class="text-[11px] font-bold text-zinc-300 truncate">{{ displayLabel }}</span>
+        <span class="text-[12px] font-bold text-zinc-800 truncate">{{ displayLabel }}</span>
       </div>
       <div class="transition-transform duration-200" :class="{ 'rotate-180': isOpen }">
-        <ChevronDown :size="12" :class="isOpen ? 'text-blue-400' : 'text-zinc-700'" />
+        <ChevronDown :size="12" :class="isOpen ? 'text-indigo-500' : 'text-zinc-500'" />
       </div>
     </div>
 
@@ -28,26 +28,26 @@
       <Transition
         enter-active-class="transition duration-100 ease-out"
         enter-from-class="transform scale-95 opacity-0"
-        enter-to-class="transform scale-100 opacity-100"
+        enter-to-class="transform scale-100 opacity-1"
         leave-active-class="transition duration-75 ease-in"
-        leave-from-class="transform scale-100 opacity-100"
+        leave-from-class="transform scale-100 opacity-1"
         leave-to-class="transform scale-95 opacity-0"
       >
         <div
           v-if="isOpen"
           ref="dropdownRef"
           :style="dropdownStyle"
-          class="fixed z-[9999] p-1 bg-[#0c0c0e] border border-zinc-800 rounded-lg shadow-2xl backdrop-blur-xl origin-top"
+          class="fixed z-[9999] p-1.5 bg-white border border-zinc-200 rounded-xl shadow-lg backdrop-blur-xl origin-top"
         >
-          <div class="max-h-[200px] overflow-y-auto custom-scrollbar">
+          <div class="max-h-[220px] overflow-y-auto custom-scrollbar">
             <button
               v-for="option in normalizedOptions"
               :key="option.value"
-              class="w-full flex items-center justify-between px-3 py-2 rounded-md text-[11px] font-bold transition-all"
+              class="w-full flex items-center justify-between px-3 py-2 rounded-lg text-[12px] font-bold transition-all"
               :class="[
                 isSelected(option)
-                  ? 'bg-blue-600/10 text-blue-400'
-                  : 'text-zinc-500 hover:text-zinc-200 hover:bg-zinc-800/40'
+                  ? 'bg-indigo-50 text-indigo-600'
+                  : 'text-zinc-600 hover:text-zinc-900 hover:bg-zinc-100'
               ]"
               @click="selectOption(option)"
             >
@@ -216,10 +216,10 @@ onUnmounted(() => {
   background: transparent;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: var(--bg-tertiary, #27272a);
+  background: var(--border-secondary, #e4e4e7);
   border-radius: 10px;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: #3f3f46;
+  background: var(--border-primary, #d4d4d8);
 }
 </style>