fix(components): 为录音名称添加标题提示和文本溢出处理

添加标题提示以显示完整录音名称,并设置文本溢出样式防止布局问题
This commit is contained in:
2025-11-21 19:36:34 +08:00
parent e696f768e6
commit 1647970bed

View File

@@ -336,7 +336,7 @@
<div class="recording-item" v-for="recording in filteredRecordings" :key="recording.id">
<div class="recording-info">
<div class="recording-header">
<span class="recording-name">{{ recording.name }}</span>
<span class="recording-name" :title="recording.name">{{ recording.name }}</span>
<span class="recording-score">分数: {{ recording.score }}</span>
</div>
<span class="recording-time">{{ recording.time }}</span>
@@ -877,7 +877,14 @@ $indigo: #4f46e5;
.recording-item { display: flex; flex-direction: column; justify-content: space-between; padding: 12px 16px; background-color: $slate-50; border-radius: 8px; transition: all 0.2s ease; &:hover { background-color: $slate-100; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); } }
.recording-info { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.recording-header { display: flex; justify-content: space-between; align-items: center; }
.recording-name { font-weight: 500; color: $slate-800; }
.recording-name {
font-weight: 500;
color: $slate-800;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: calc(100% - 80px);
}
.recording-time { font-size: 0.8rem; color: $slate-600; }
.recording-type { font-size: 0.75rem; color: $slate-500; background-color: $slate-200; padding: 2px 8px; border-radius: 12px; display: inline-block; width: fit-content; }
.recording-score { font-size: 0.8rem; color: $warning; font-weight: 600; }