style(download): improve history item hierarchy

This commit is contained in:
jxxghp
2026-08-03 11:54:41 +08:00
parent 5ca6c520ae
commit d27b402b74
2 changed files with 25 additions and 9 deletions
@@ -118,7 +118,7 @@ function getSeasonEpisode(item: DownloadHistory) {
<template #empty /> <template #empty />
<VList lines="three" class="download-history-dialog__content py-0"> <VList lines="three" class="download-history-dialog__content py-0">
<VVirtualScroll v-if="historyList.length > 0" renderless :items="historyList" :item-height="112"> <VVirtualScroll v-if="historyList.length > 0" renderless :items="historyList" :item-height="136">
<template #default="{ item, itemRef }"> <template #default="{ item, itemRef }">
<div :ref="itemRef"> <div :ref="itemRef">
<VListItem class="download-history-item"> <VListItem class="download-history-item">
@@ -145,14 +145,20 @@ function getSeasonEpisode(item: DownloadHistory) {
<VChip v-if="getSeasonEpisode(item)" color="primary" size="x-small" variant="tonal"> <VChip v-if="getSeasonEpisode(item)" color="primary" size="x-small" variant="tonal">
{{ getSeasonEpisode(item) }} {{ getSeasonEpisode(item) }}
</VChip> </VChip>
<VChip v-if="item.torrent_site" color="secondary" size="x-small" variant="tonal"> <VChip v-if="item.torrent_site" color="info" size="x-small" variant="tonal">
{{ item.torrent_site }} {{ item.torrent_site }}
</VChip> </VChip>
</div> </div>
<VListItemSubtitle v-if="item.torrent_name" class="download-history-item__torrent mt-1"> <VListItemSubtitle
v-if="item.torrent_name"
class="download-history-item__torrent download-history-item__meta mt-1"
>
{{ item.torrent_name }} {{ item.torrent_name }}
</VListItemSubtitle> </VListItemSubtitle>
<VListItemSubtitle v-if="item.date" class="mt-1"> <VListItemSubtitle
v-if="item.date"
class="download-history-item__date download-history-item__meta mt-1"
>
{{ formatDateDifference(item.date) }} {{ formatDateDifference(item.date) }}
</VListItemSubtitle> </VListItemSubtitle>
@@ -209,7 +215,7 @@ function getSeasonEpisode(item: DownloadHistory) {
} }
.download-history-item { .download-history-item {
min-block-size: 7rem; min-block-size: 8.5rem;
} }
.download-history-item__image { .download-history-item__image {
@@ -229,9 +235,17 @@ function getSeasonEpisode(item: DownloadHistory) {
} }
.download-history-item__torrent { .download-history-item__torrent {
display: -webkit-box;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; -webkit-box-orient: vertical;
white-space: nowrap; -webkit-line-clamp: 2;
overflow-wrap: anywhere;
white-space: normal;
}
.download-history-item__meta {
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !important;
opacity: 1;
} }
.download-history-empty { .download-history-empty {
@@ -150,8 +150,10 @@ describe('DownloadHistoryDialog', () => {
expect(await screen.findByText('首载剧集')).toBeInTheDocument() expect(await screen.findByText('首载剧集')).toBeInTheDocument()
expect(screen.getByText('(2026)')).toBeInTheDocument() expect(screen.getByText('(2026)')).toBeInTheDocument()
expect(screen.getByText('S01E01-E02').closest('.v-chip')).toBeInTheDocument() expect(screen.getByText('S01E01-E02').closest('.v-chip')).toBeInTheDocument()
expect(screen.getByText('示例站').closest('.v-chip')).toBeInTheDocument() expect(screen.getByText('示例站').closest('.v-chip')).toHaveClass('text-info')
expect(screen.getByText(item.torrent_name!)).toBeInTheDocument() const resourceTitle = screen.getByText(item.torrent_name!)
expect(resourceTitle).toHaveClass('download-history-item__torrent', 'download-history-item__meta')
expect(document.querySelector('.download-history-item__date')).toHaveClass('download-history-item__meta')
expect(screen.getByTestId('history-infinite-scroll')).toHaveClass('download-history-dialog__scroll') expect(screen.getByTestId('history-infinite-scroll')).toHaveClass('download-history-dialog__scroll')
expect(document.querySelector('.download-history-dialog__content')).toBeInTheDocument() expect(document.querySelector('.download-history-dialog__content')).toBeInTheDocument()
expect(requests).toHaveLength(1) expect(requests).toHaveLength(1)