feat: 更新 TraditionalSongListTemplate 组件,优化无特殊要求和无标签的显示样式

- 为“无特殊要求”和“无标签”添加了 'empty-placeholder' 类,提升视觉效果。
- 新增样式定义,统一空占位符的显示风格,增强用户体验。
This commit is contained in:
2025-04-22 23:20:54 +08:00
parent f267592e37
commit b24974540f

View File

@@ -361,7 +361,8 @@ function GetPlayButton(song: SongsInfo) {
// --- New: Helper function for Song Request Options ---
function getOptionDisplay(options?: SongRequestOption) {
if (!options) {
return h('span', '无特殊要求');
// 为"无特殊要求"添加 'empty-placeholder' 类
return h('span', { class: 'empty-placeholder' }, '无特殊要求');
}
const conditions: VNode[] = [];
@@ -383,7 +384,8 @@ function getOptionDisplay(options?: SongRequestOption) {
}
if (conditions.length === 0) {
return h('span', '无特殊要求');
// 为"无特殊要求"添加 'empty-placeholder' 类
return h('span', { class: 'empty-placeholder' }, '无特殊要求');
}
// Use NFlex for better wrapping
@@ -902,7 +904,11 @@ export const Config = defineTemplateConfig([
>
{{ tag }}
</n-tag>
<span v-if="!song.tags || song.tags.length === 0">无标签</span>
<!-- "无标签"添加 'empty-placeholder' -->
<span
v-if="!song.tags || song.tags.length === 0"
class="empty-placeholder"
>无标签</span>
</n-flex>
</td>
<td>
@@ -1432,4 +1438,15 @@ html.dark .language-link.selected-language {
color: currentColor !important; fill: currentColor !important;
}
/* --- NEW: Style for empty placeholders --- */
.empty-placeholder {
color: #999999; /* Use a standard gray color */
font-style: italic; /* Optional: make it italic */
font-size: 0.9em; /* Optional: slightly smaller */
}
html.dark .empty-placeholder {
color: var(--text-color-3); /* Use theme variable for dark mode */
}
</style>