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/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"
@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"
>