Henry_Du/BYW-VoiceHub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): 优化投票/评论按钮样式、评论弹窗浅色化、投稿表单残留黑框修复

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