From 87aa12d573122f30d43e93040ac230128e4da520 Mon Sep 17 00:00:00 2001
From: HenryDu8133 <813367384@qq.com>
Date: Fri, 18 Sep 2026 23:21:53 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E4=BC=98=E5=8C=96=E6=8A=95=E7=A5=A8?=
 =?UTF-8?q?/=E8=AF=84=E8=AE=BA=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E3=80=81=E8=AF=84=E8=AE=BA=E5=BC=B9=E7=AA=97=E6=B5=85=E8=89=B2?=
 =?UTF-8?q?=E5=8C=96=E3=80=81=E6=8A=95=E7=A8=BF=E8=A1=A8=E5=8D=95=E6=AE=8B?=
 =?UTF-8?q?=E7=95=99=E9=BB=91=E6=A1=86=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- SongList 点赞按钮改用 indigo 渐变硬边圆角 12px，新增阴影；评论按钮从胶囊 blue 改为浅灰底 indigo 图标几何风格
- SongCommentsDialog 弹窗整体浅色化：bg-white 主底、评论卡片 zinc-50、输入框 focus indigo 环、发送按钮 indigo 主色系
- RequestForm 投稿表单：搜索结果容器从 rgba(0,0,0,0.4) 改为 bg-secondary 浅灰；备注输入框 bg-white；复选框/横条状态/手动输入按钮/提交按钮全套浅色 + indigo 主题
---
 app/components/Songs/RequestForm.vue        | 99 +++++++++++----------
 app/components/Songs/SongCommentsDialog.vue | 30 +++----
 app/components/Songs/SongList.vue           | 38 ++++----
 3 files changed, 88 insertions(+), 79 deletions(-)

diff --git a/app/components/Songs/RequestForm.vue b/app/components/Songs/RequestForm.vue
index 958b9dd..761dcef 100644
--- a/app/components/Songs/RequestForm.vue
+++ b/app/components/Songs/RequestForm.vue
@@ -486,7 +486,7 @@
           <div v-if="enableSubmissionRemarks" class="form-group">
             <div class="input-wrapper">
               <div class="flex items-center justify-between mb-2">
-                <label for="submission-note" class="text-[12px] font-bold text-zinc-300">投稿备注留言</label>
+                <label for="submission-note" class="text-[12px] font-bold text-zinc-700">投稿备注留言</label>
                 <label class="custom-checkbox-wrapper">
                   <input
                     v-model="submissionNotePublic"
@@ -505,9 +505,9 @@
                 id="submission-note"
                 v-model="submissionNote"
                 maxlength="300"
-                class="w-full min-h-[60px] rounded-xl border border-zinc-800 bg-zinc-900/60 px-4 py-2 text-sm text-zinc-100 focus:outline-none focus:border-blue-500/50 focus:ring-1 focus:ring-blue-500/50 resize-y transition-all"
+                class="w-full min-h-[60px] rounded-xl border border-zinc-200 bg-white px-4 py-3 text-sm text-zinc-900 placeholder-zinc-400 focus:outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100 resize-y transition-all"
               />
-              <div class="mt-1 flex justify-end text-[11px] text-zinc-500">
+              <div class="mt-1 flex justify-end text-[11px] text-zinc-400">
                 <span>{{ submissionNote.length }}/300</span>
               </div>
             </div>
@@ -3349,8 +3349,8 @@ defineExpose({
   width: 14px;
   height: 14px;
   border-radius: 4px;
-  border: 1px solid var(--border-secondary, #3f3f46);
-  background: rgba(24, 24, 27, 0.5);
+  border: 1px solid var(--border-secondary, #d4d4d8);
+  background: var(--bg-primary, #ffffff);
   transition: all 0.2s ease;
 }
 
@@ -3364,8 +3364,8 @@ defineExpose({
 }
 
 .custom-checkbox-input:checked + .custom-checkbox-box {
-  background: #3b82f6;
-  border-color: var(--border-secondary, #3b82f6);
+  background: var(--primary, #4f46e5);
+  border-color: var(--primary, #4f46e5);
 }
 
 .custom-checkbox-input:checked + .custom-checkbox-box .custom-checkbox-icon {
@@ -3375,25 +3375,25 @@ defineExpose({
 
 .custom-checkbox-text {
   font-size: 11px;
-  color: #9ca3af;
+  color: var(--text-secondary, #71717a);
   transition: color 0.2s ease;
 }
 
 .custom-checkbox-input:checked ~ .custom-checkbox-text {
-  color: #d1d5db;
+  color: var(--primary, #4f46e5);
 }
 
 .custom-checkbox-wrapper:hover .custom-checkbox-box {
-  border-color: #60a5fa;
+  border-color: var(--primary, #4f46e5);
 }
 
 /* 横向投稿状态样式 */
 .submission-status-horizontal {
-  background: rgba(0, 0, 0, 0.3);
-  border-radius: 8px;
-  padding: 0.4rem 0.75rem;
-  margin-bottom: 0.5rem;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: var(--bg-primary, #ffffff);
+  border-radius: 10px;
+  padding: 0.5rem 0.75rem;
+  margin-bottom: 0.75rem;
+  border: 1px solid var(--border-secondary, #e4e4e7);
 }
 
 .admin-notice-horizontal {
@@ -3409,9 +3409,9 @@ defineExpose({
 
 .admin-notice-horizontal .admin-text {
   font-family: 'MiSans', sans-serif;
-  font-weight: 500;
+  font-weight: 600;
   font-size: 13px;
-  color: #ffd700;
+  color: #ca8a04;
 }
 
 .submission-closed-notice {
@@ -3427,9 +3427,9 @@ defineExpose({
 
 .submission-closed-notice .closed-text {
   font-family: 'MiSans', sans-serif;
-  font-weight: 500;
+  font-weight: 600;
   font-size: 13px;
-  color: #ff6b6b;
+  color: #dc2626;
 }
 
 .status-content-horizontal {
@@ -3450,25 +3450,25 @@ defineExpose({
   font-family: 'MiSans', sans-serif;
   font-weight: 600;
   font-size: 13px;
-  color: var(--text-primary, #ffffff);
+  color: var(--text-secondary, #52525b);
 }
 
 .status-item-horizontal .status-value {
   font-family: 'MiSans', sans-serif;
-  font-weight: 600;
+  font-weight: 700;
   font-size: 13px;
-  color: #0b5afe;
+  color: var(--primary, #4f46e5);
 }
 
 .status-item-horizontal .status-remaining {
   font-family: 'MiSans', sans-serif;
   font-weight: 500;
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.7);
-  background: rgba(11, 90, 254, 0.1);
-  border: 1px solid rgba(11, 90, 254, 0.3);
-  border-radius: 4px;
-  padding: 0.15rem 0.4rem;
+  color: var(--primary, #4f46e5);
+  background: rgba(79, 70, 229, 0.08);
+  border: 1px solid rgba(79, 70, 229, 0.2);
+  border-radius: 6px;
+  padding: 0.15rem 0.5rem;
 }
 
 .form-row {
@@ -3940,8 +3940,9 @@ defineExpose({
 /* 搜索结果容器样式 */
 .search-results-container {
   flex: 1;
-  background: rgba(0, 0, 0, 0.4);
-  border-radius: 13px;
+  background: var(--bg-secondary, #f4f4f5);
+  border: 1px solid var(--border-secondary, #e4e4e7);
+  border-radius: 14px;
   display: flex;
   flex-direction: column;
   min-height: 400px;
@@ -4017,17 +4018,17 @@ defineExpose({
 }
 
 .results-grid::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--bg-tertiary, #e4e4e7);
   border-radius: 3px;
 }
 
 .results-grid::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.3);
+  background: #a1a1aa;
   border-radius: 3px;
 }
 
 .results-grid::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.5);
+  background: #71717a;
 }
 
 /* 空状态和初始状态 */
@@ -4055,7 +4056,7 @@ defineExpose({
   font-family: 'MiSans', sans-serif;
   font-weight: 600;
   font-size: 15px;
-  color: var(--text-primary, #ffffff);
+  color: var(--text-primary, #09090b);
   margin: 0;
 }
 
@@ -4089,25 +4090,27 @@ defineExpose({
 .manual-input-trigger {
   margin-top: 1rem;
   padding-top: 1rem;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  border-top: 1px solid var(--border-secondary, #e4e4e7);
   text-align: center;
 }
 
 .manual-submit-btn {
-  background: rgba(255, 255, 255, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.16);
-  border-radius: 8px;
-  padding: 0.5rem 1.5rem;
+  background: var(--bg-secondary, #f4f4f5);
+  border: 1px solid var(--border-secondary, #e4e4e7);
+  border-radius: 12px;
+  padding: 0.6rem 1.5rem;
   font-family: 'MiSans', sans-serif;
   font-weight: 600;
   font-size: 14px;
-  color: var(--text-primary, #ffffff);
+  color: var(--text-primary, #09090b);
   cursor: pointer;
   transition: all 0.3s ease;
 }
 
 .manual-submit-btn:hover {
-  background: rgba(255, 255, 255, 0.2);
+  background: var(--primary, #4f46e5);
+  color: white;
+  border-color: var(--primary, #4f46e5);
   transform: translateY(-2px);
 }
 
@@ -4116,7 +4119,7 @@ defineExpose({
   font-weight: 600;
   font-size: 14px;
   letter-spacing: 0.04em;
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--text-secondary, #71717a);
   margin-top: 0.5rem;
 }
 
@@ -4127,20 +4130,22 @@ defineExpose({
 }
 
 .submit-button {
-  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;
+  background: linear-gradient(180deg, #4f46e5 0%, #6366f1 100%);
+  border: 1px solid rgba(79, 70, 229, 0.25);
+  border-radius: 12px;
+  padding: 0.65rem 1.75rem;
   font-family: 'MiSans', sans-serif;
-  font-weight: 600;
+  font-weight: 700;
   font-size: 14px;
-  color: var(--text-primary, #ffffff);
+  color: #ffffff;
   cursor: pointer;
   transition: all 0.3s ease;
+  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.18);
 }
 
 .submit-button:hover {
   transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.28);
 }
 
 .submit-button:disabled {
diff --git a/app/components/Songs/SongCommentsDialog.vue b/app/components/Songs/SongCommentsDialog.vue
index 7dc4440..18c64e8 100644
--- a/app/components/Songs/SongCommentsDialog.vue
+++ b/app/components/Songs/SongCommentsDialog.vue
@@ -13,16 +13,16 @@
         class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
         @click="emit('close')"
       >
-        <div class="bg-zinc-950 border border-zinc-800 rounded-2xl w-full max-w-2xl overflow-hidden" @click.stop>
-          <div class="px-5 py-4 border-b border-zinc-800 flex items-start justify-between gap-4">
+        <div class="bg-white border border-zinc-200 rounded-2xl w-full max-w-2xl overflow-hidden shadow-xl" @click.stop>
+          <div class="px-5 py-4 border-b border-zinc-100 flex items-start justify-between gap-4">
             <div class="min-w-0">
-              <p class="text-sm font-black text-zinc-100">歌曲评论</p>
-              <p class="text-[10px] text-zinc-500 mt-1 truncate">
+              <p class="text-sm font-black text-zinc-900">歌曲评论</p>
+              <p class="text-[11px] text-zinc-500 mt-1 truncate">
                 {{ song?.title }} - {{ song?.artist }}
               </p>
             </div>
             <button
-              class="h-9 w-9 rounded-lg border border-zinc-700 text-zinc-400 hover:text-zinc-200 hover:bg-zinc-900 transition-colors"
+              class="h-9 w-9 rounded-xl border border-zinc-200 text-zinc-500 hover:text-zinc-900 hover:bg-zinc-50 transition-colors"
               @click="emit('close')"
             >
               <X :size="16" class="mx-auto" />
@@ -30,36 +30,36 @@
           </div>
 
           <div class="p-5 space-y-4 max-h-[70vh] overflow-y-auto">
-            <div v-if="loading" class="text-center text-zinc-500 py-6">加载中...</div>
-            <div v-else-if="comments.length === 0" class="text-center text-zinc-500 py-6">
+            <div v-if="loading" class="text-center text-zinc-400 py-6">加载中...</div>
+            <div v-else-if="comments.length === 0" class="text-center text-zinc-400 py-6">
               暂无评论
             </div>
             <div v-else class="space-y-3">
               <div
                 v-for="c in comments"
                 :key="c.id"
-                class="p-4 rounded-xl border border-zinc-800 bg-zinc-900/30"
+                class="p-4 rounded-xl border border-zinc-100 bg-zinc-50"
               >
                 <div class="flex items-center justify-between gap-3">
                   <div class="min-w-0">
-                    <p class="text-xs font-black text-zinc-200 truncate">{{ c.authorName || '用户' }}</p>
+                    <p class="text-xs font-black text-zinc-900 truncate">{{ c.authorName || '用户' }}</p>
                     <p class="text-[10px] text-zinc-500 mt-0.5">{{ formatTime(c.createdAt) }}</p>
                   </div>
                   <button
                     v-if="canDelete(c)"
-                    class="px-3 py-1.5 rounded-lg border border-red-500/30 text-red-300 hover:bg-red-500/10 text-xs font-bold disabled:opacity-50"
+                    class="px-3 py-1.5 rounded-lg border border-red-200 text-red-500 hover:bg-red-50 text-xs font-bold disabled:opacity-50"
                     :disabled="deletingId === c.id"
                     @click="deleteComment(c)"
                   >
                     删除
                   </button>
                 </div>
-                <p class="text-sm text-zinc-200 mt-3 whitespace-pre-wrap leading-relaxed">{{ c.content }}</p>
+                <p class="text-sm text-zinc-700 mt-3 whitespace-pre-wrap leading-relaxed">{{ c.content }}</p>
               </div>
             </div>
           </div>
 
-          <div class="px-5 py-4 border-t border-zinc-800 space-y-3">
+          <div class="px-5 py-4 border-t border-zinc-100 space-y-3">
             <div v-if="!isAuthenticated" class="text-xs text-zinc-500">
               登录后可发表评论
             </div>
@@ -67,13 +67,13 @@
               <textarea
                 v-model="draft"
                 :rows="3"
-                class="w-full bg-zinc-900 border border-zinc-800 rounded-xl px-4 py-3 text-sm text-zinc-200 focus:outline-none focus:border-blue-500/30 transition-all resize-none"
+                class="w-full bg-white border border-zinc-200 rounded-xl px-4 py-3 text-sm text-zinc-900 placeholder-zinc-400 focus:outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100 transition-all resize-none"
                 placeholder="写下你的评论（最多 300 字）"
               />
               <div class="flex items-center justify-between gap-3">
-                <p class="text-[10px] text-zinc-500">{{ draft.length }} / 300</p>
+                <p class="text-[11px] text-zinc-400">{{ draft.length }} / 300</p>
                 <button
-                  class="px-5 py-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white text-sm font-black disabled:opacity-50"
+                  class="px-5 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-black disabled:opacity-50 shadow-sm shadow-indigo-200 transition-colors"
                   :disabled="posting || !draft.trim() || draft.trim().length > 300"
                   @click="postComment"
                 >
diff --git a/app/components/Songs/SongList.vue b/app/components/Songs/SongList.vue
index 77356f3..8c6b2e2 100644
--- a/app/components/Songs/SongList.vue
+++ b/app/components/Songs/SongList.vue
@@ -2231,24 +2231,27 @@ const vRipple = {
   justify-content: center;
   width: 48px;
   height: 45px;
-  background: linear-gradient(180deg, var(--bg-secondary, #0043f8) 0%, #0075f8 100%);
-  border: 1px solid rgba(255, 255, 255, 0.16);
-  border-radius: 8px;
+  background: linear-gradient(180deg, #4f46e5 0%, #6366f1 100%);
+  border: 1px solid rgba(79, 70, 229, 0.25);
+  border-radius: 12px;
   cursor: pointer;
   transition: all 0.2s ease;
+  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.18);
 }
 
 .like-button.liked {
-  background: var(--bg-secondary, #1a1d24);
-  border-color: var(--border-secondary, #242f38);
+  background: var(--primary-light, rgba(79, 70, 229, 0.12));
+  border-color: var(--primary, #4f46e5);
   background-image: none;
+  box-shadow: none;
 }
 
 .like-button.disabled {
-  background: rgba(255, 255, 255, 0.1);
-  border-color: rgba(255, 255, 255, 0.2);
+  background: var(--bg-secondary, #f4f4f5);
+  border-color: var(--border-secondary, #e4e4e7);
   cursor: not-allowed;
   opacity: 0.5;
+  box-shadow: none;
 }
 
 .like-button.disabled .like-icon {
@@ -3054,22 +3057,23 @@ button:disabled {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 22px;
-  height: 22px;
+  width: 26px;
+  height: 26px;
   margin-left: 6px;
-  border: 1px solid rgba(59, 130, 246, 0.3);
-  border-radius: 999px;
-  background: rgba(59, 130, 246, 0.08);
-  color: #60a5fa;
+  border: 1px solid var(--border-secondary, #e4e4e7);
+  border-radius: 10px;
+  background: var(--bg-secondary, #f4f4f5);
+  color: var(--primary, #4f46e5);
   cursor: pointer;
   transition: all 0.2s ease;
-  box-shadow: 0 0 0 0 rgba(96, 165, 250, 0);
+  box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
 }
 
 .submission-note-trigger:hover {
-  background: rgba(59, 130, 246, 0.18);
-  border-color: rgba(59, 130, 246, 0.5);
-  box-shadow: 0 6px 12px rgba(96, 165, 250, 0.15);
+  background: rgba(79, 70, 229, 0.08);
+  border-color: rgba(79, 70, 229, 0.35);
+  color: #4338ca;
+  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.12);
 }
 
 .submission-note-modal {