mirror of
https://github.com/Megghy/vtsuru.live.git
synced 2025-12-06 18:36:55 +08:00
feat: 更新 TraditionalSongListTemplate 组件,优化无特殊要求和无标签的显示样式
- 为“无特殊要求”和“无标签”添加了 'empty-placeholder' 类,提升视觉效果。 - 新增样式定义,统一空占位符的显示风格,增强用户体验。
This commit is contained in:
@@ -361,7 +361,8 @@ function GetPlayButton(song: SongsInfo) {
|
|||||||
// --- New: Helper function for Song Request Options ---
|
// --- New: Helper function for Song Request Options ---
|
||||||
function getOptionDisplay(options?: SongRequestOption) {
|
function getOptionDisplay(options?: SongRequestOption) {
|
||||||
if (!options) {
|
if (!options) {
|
||||||
return h('span', '无特殊要求');
|
// 为"无特殊要求"添加 'empty-placeholder' 类
|
||||||
|
return h('span', { class: 'empty-placeholder' }, '无特殊要求');
|
||||||
}
|
}
|
||||||
|
|
||||||
const conditions: VNode[] = [];
|
const conditions: VNode[] = [];
|
||||||
@@ -383,7 +384,8 @@ function getOptionDisplay(options?: SongRequestOption) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (conditions.length === 0) {
|
if (conditions.length === 0) {
|
||||||
return h('span', '无特殊要求');
|
// 为"无特殊要求"添加 'empty-placeholder' 类
|
||||||
|
return h('span', { class: 'empty-placeholder' }, '无特殊要求');
|
||||||
}
|
}
|
||||||
|
|
||||||
// Use NFlex for better wrapping
|
// Use NFlex for better wrapping
|
||||||
@@ -902,7 +904,11 @@ export const Config = defineTemplateConfig([
|
|||||||
>
|
>
|
||||||
{{ tag }}
|
{{ tag }}
|
||||||
</n-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>
|
</n-flex>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
@@ -1432,4 +1438,15 @@ html.dark .language-link.selected-language {
|
|||||||
color: currentColor !important; fill: currentColor !important;
|
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>
|
</style>
|
||||||
Reference in New Issue
Block a user