优化编辑元数据模态框内的匹配结果的显示效果

This commit is contained in:
x1ao4 2025-10-06 14:42:45 +08:00
parent 59aca339bb
commit e36a4e6f6c
2 changed files with 34 additions and 4 deletions

View File

@ -7735,6 +7735,34 @@ div:has(> .collapse:not(.show)):has(+ .row.title[title^="资源搜索"]) {
text-decoration: none;
}
/* 匹配结果主文本区域:防止换行,仅该区域横向滚动 */
#editMetadataModal .matched-result {
flex-wrap: nowrap !important; /* 整体不换行,季数固定在末尾 */
min-width: 0 !important;
}
#editMetadataModal .matched-result .matched-main {
overflow-x: auto !important; /* 主文本横向滚动 */
overflow-y: hidden !important;
white-space: nowrap !important; /* 主文本单行 */
flex: 1 1 auto !important; /* 占据剩余空间 */
min-width: 0 !important; /* 允许收缩以形成滚动 */
scrollbar-width: none; /* Firefox 隐藏滚动条 */
-ms-overflow-style: none; /* IE/Edge (旧版) 隐藏滚动条 */
}
/* WebKit 隐藏滚动条但保留滚动行为 */
#editMetadataModal .matched-result .matched-main::-webkit-scrollbar {
display: none;
}
/* 主文本内部元素不换行且不被挤压 */
#editMetadataModal .matched-result .matched-main a,
#editMetadataModal .matched-result .matched-main span {
white-space: nowrap !important;
flex-shrink: 0 !important;
}
/* 编辑元数据底部提示内的 TMDB 链接样式 */
#editMetadataModal .tmdb-link {
color: var(--dark-text-color);

View File

@ -2739,10 +2739,12 @@
<span class="input-group-text" style="background-color: var(--button-gray-background-color);">匹配结果</span>
</div>
<div class="form-control matched-result" style="display: flex; align-items: center; gap: 8px;">
<a v-if="editMetadata.display.matched_tmdb_id" href="#" @click.prevent="openTaskMatchedTmdbPage({ match: { tmdb_id: editMetadata.display.matched_tmdb_id } })" class="matched-link">
{{ editMetadata.display.matched_label }}
</a>
<span v-else>{{ editMetadata.display.matched_label }}</span>
<div class="matched-main">
<a v-if="editMetadata.display.matched_tmdb_id" href="#" @click.prevent="openTaskMatchedTmdbPage({ match: { tmdb_id: editMetadata.display.matched_tmdb_id } })" class="matched-link">
{{ editMetadata.display.matched_label }}
</a>
<span v-else>{{ editMetadata.display.matched_label }}</span>
</div>
<span v-if="editMetadata.display.matched_season_number" class="matched-season-wrap">
<span class="input-group-text square-append"></span>
<a href="#" @click.prevent="editMetadata.display.matched_tmdb_id && window.open('https://www.themoviedb.org/tv/' + editMetadata.display.matched_tmdb_id + '/season/' + parseInt(editMetadata.display.matched_season_number), '_blank')" class="matched-link matched-season">