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

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

Browse Source 
- 修复 SongList/ScheduleList 投稿人、热度、投稿时间文字对比度，统一引用 --text-secondary 主题变量
- 重构 CustomSelect 通用组件为浅色底 + indigo 主色系，适配前台投稿页日期选择
- 调整 RequestForm 平台按钮三态配色，激活态使用 indigo 渐变保持主题统一
- 重写 search.svg 全部 19 个 path fill 为深灰系列，解决浅色背景下占位图不可见问题
This commit is contained in:
Henry_Du
2026-09-18 22:48:14 +08:00
parent 43f05a6e34
commit 8a82cb77a7
5 changed files with 75 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Songs/RequestForm.vue
+11 -9
View File
@@ -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
+6 -6
View File
@@ -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
+26 -24
View File
@@ -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,