GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-09-06 16:16:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: 更新 SiteResourceDialog 组件样式，优化移动端显示和用户交互体验

Browse Source
This commit is contained in:
jxxghp
2026-06-18 17:54:25 +08:00
parent a771dc5354
commit fc1f163a94
2 changed files with 171 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/@iconify/tsconfig.tsbuildinfo
+1 -1
View File
@@ -1 +1 @@
{"root":["./build-icons.ts"],"errors":true,"version":"6.0.3"} {"root":["./build-icons.ts"],"version":"5.8.3"}
src/components/dialog/SiteResourceDialog.vue
+170 -62
View File
@@ -475,26 +475,26 @@ onMounted(() => {
:items="mobileResourceList" :items="mobileResourceList"
:columns="1" :columns="1"
:gap="12" :gap="12"
:estimated-item-height="320" :estimated-item-height="220"
:overscan-rows="5" :overscan-rows="5"
:get-item-key="getResourceItemKey" :get-item-key="getResourceItemKey"
> >
<template #default="{ item }"> <template #default="{ item }">
<VCard> <VCard class="site-resource-card" variant="flat">
<VCardText class="pa-4"> <VCardText class="pa-3">
<button type="button" class="site-resource-title-btn text-start" @click="addDownload(item)"> <button type="button" class="site-resource-title-btn text-start" @click="addDownload(item)">
<div class="text-body-1 font-weight-medium text-high-emphasis"> <div class="site-resource-card__title text-body-1 font-weight-medium text-high-emphasis">
{{ item.title }} {{ item.title }}
</div> </div>
<div <div
v-if="item.description" v-if="item.description"
class="site-resource-card__description mt-2 text-body-2 text-medium-emphasis" class="site-resource-card__description mt-1 text-body-2 text-medium-emphasis"
> >
{{ item.description }} {{ item.description }}
</div> </div>
</button> </button>
<div class="mt-3"> <div class="site-resource-card__chips mt-2">
<VChip <VChip
v-if="item.hit_and_run" v-if="item.hit_and_run"
variant="elevated" variant="elevated"
@@ -533,47 +533,82 @@ onMounted(() => {
</VChip> </VChip>
</div> </div>
<div class="site-resource-card__meta mt-4"> <!-- 移动端在操作区前展示关键资源指标，方便点击前快速判断。 -->
<div class="site-resource-card__meta-item"> <div class="site-resource-card__summary mt-3">
<div class="text-caption text-medium-emphasis">{{ t('dialog.siteResource.timeColumn') }}</div> <div class="site-resource-card__stat">
<div class="text-body-2 font-weight-medium">{{ item.date_elapsed || item.pubdate || '-' }}</div> <VIcon icon="mdi-clock-outline" size="15" />
<div v-if="item.pubdate" class="text-caption text-medium-emphasis mt-1">{{ item.pubdate }}</div> <span>{{ item.date_elapsed || item.pubdate || '-' }}</span>
</div> </div>
<div class="site-resource-card__meta-item"> <div class="site-resource-card__stat">
<div class="text-caption text-medium-emphasis">{{ t('dialog.siteResource.sizeColumn') }}</div> <VIcon icon="mdi-harddisk" size="15" />
<div class="text-body-2 font-weight-medium">{{ formatFileSize(item.size) }}</div> <span>{{ formatFileSize(item.size) }}</span>
</div> </div>
<div class="site-resource-card__meta-item"> <div class="site-resource-card__stat site-resource-card__stat--success">
<div class="text-caption text-medium-emphasis">{{ t('dialog.siteResource.seedersColumn') }}</div> <VIcon icon="mdi-arrow-up" size="15" />
<div class="text-body-2 font-weight-medium">{{ item.seeders }}</div> <span>{{ item.seeders ?? '-' }}</span>
</div> </div>
<div class="site-resource-card__meta-item"> <div class="site-resource-card__stat site-resource-card__stat--warning">
<div class="text-caption text-medium-emphasis">{{ t('dialog.siteResource.peersColumn') }}</div> <VIcon icon="mdi-arrow-down" size="15" />
<div class="text-body-2 font-weight-medium">{{ item.peers }}</div> <span>{{ item.peers ?? '-' }}</span>
</div> </div>
</div> </div>
<div class="site-resource-card__actions mt-4"> <!-- 下载保留文本，其它低频操作改为图标按钮并保持同一行。 -->
<VBtn color="primary" variant="flat" block prepend-icon="mdi-download" @click="addDownload(item)"> <div class="site-resource-card__actions mt-2">
<VBtn
color="primary"
variant="flat"
class="site-resource-card__download-btn"
prepend-icon="mdi-download"
@click="addDownload(item)"
>
{{ t('actionStep.addDownload') }} {{ t('actionStep.addDownload') }}
</VBtn> </VBtn>
<div class="site-resource-card__secondary-actions mt-2"> <VTooltip :text="t('common.viewDetails')" location="top">
<VBtn <template #activator="{ props: tooltipProps }">
variant="tonal" <VBtn
prepend-icon="mdi-open-in-new" v-bind="tooltipProps"
@click="openTorrentDetail(item.page_url || '')" icon
> variant="tonal"
{{ t('common.viewDetails') }} color="primary"
</VBtn> class="site-resource-card__icon-btn"
<VBtn :aria-label="t('common.viewDetails')"
v-if="item.enclosure?.startsWith('http')" @click="openTorrentDetail(item.page_url || '')"
variant="tonal" >
prepend-icon="mdi-tray-arrow-down" <VIcon icon="mdi-open-in-new" />
@click="downloadTorrentFile(item.enclosure)" </VBtn>
> </template>
{{ t('dialog.siteResource.downloadTorrent') }} </VTooltip>
</VBtn> <VTooltip
</div> v-if="item.enclosure?.startsWith('http')"
:text="t('dialog.siteResource.downloadTorrent')"
location="top"
>
<template #activator="{ props: tooltipProps }">
<VBtn
v-bind="tooltipProps"
icon
variant="tonal"
color="primary"
class="site-resource-card__icon-btn"
:aria-label="t('dialog.siteResource.downloadTorrent')"
@click="downloadTorrentFile(item.enclosure)"
>
<VIcon icon="mdi-file-download-outline" />
</VBtn>
</template>
</VTooltip>
<VBtn
v-else
icon
variant="tonal"
color="primary"
disabled
class="site-resource-card__icon-btn"
:aria-label="t('dialog.siteResource.downloadTorrent')"
>
<VIcon icon="mdi-file-download-outline" />
</VBtn>
</div> </div>
</VCardText> </VCardText>
</VCard> </VCard>
@@ -702,44 +737,107 @@ onMounted(() => {
white-space: nowrap; white-space: nowrap;
} }
.site-resource-card {
--site-resource-card-bg:
linear-gradient(180deg, rgba(var(--v-theme-surface), 0.98), rgba(var(--v-theme-surface), 0.94)),
radial-gradient(circle at top right, rgba(var(--v-theme-primary), 0.08), transparent 34%);
border: 1px solid rgba(var(--v-border-color), calc(var(--v-border-opacity) * 0.9));
background: var(--site-resource-card-bg);
}
:global(html[data-theme="transparent"]) .site-resource-card {
--site-resource-card-bg: rgba(var(--v-theme-surface), var(--transparent-opacity));
backdrop-filter: blur(var(--transparent-blur));
}
.site-resource-card__summary {
display: grid;
gap: 0.35rem;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(2.5rem, 0.62fr) minmax(2.5rem, 0.62fr);
align-items: center;
}
.site-resource-card__stat {
display: inline-flex;
overflow: hidden;
align-items: center;
justify-content: center;
gap: 0.22rem;
border-radius: 6px;
background: rgba(var(--v-theme-on-surface), 0.05);
color: rgba(var(--v-theme-on-surface), 0.72);
font-size: 0.74rem;
font-weight: 600;
line-height: 1;
min-block-size: 1.65rem;
min-inline-size: 0;
padding-inline: 0.4rem;
}
.site-resource-card__stat span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.site-resource-card__stat--success {
color: rgb(var(--v-theme-success));
}
.site-resource-card__stat--warning {
color: rgb(var(--v-theme-warning));
}
.site-resource-card__title {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-height: 1.38;
}
.site-resource-card__description { .site-resource-card__description {
display: -webkit-box; display: -webkit-box;
overflow: hidden; overflow: hidden;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 3; -webkit-line-clamp: 2;
line-height: 1.35;
} }
.site-resource-card__meta { .site-resource-card__chips {
max-block-size: 4.75rem;
overflow: hidden;
}
.site-resource-card__actions {
display: grid; display: grid;
gap: 0.55rem; gap: 0.45rem;
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: minmax(0, 1fr) 2.5rem 2.5rem;
align-items: center;
} }
.site-resource-card__meta-item { .site-resource-card__download-btn {
background: rgba(var(--v-theme-surface), 0.78); min-block-size: 2.5rem;
min-block-size: 0; min-inline-size: 0;
padding-block: 0.55rem; box-shadow: 0 6px 16px rgba(var(--v-theme-primary), 0.17);
padding-inline: 0.65rem;
} }
.site-resource-card__meta-item :deep(.text-caption) { .site-resource-card__download-btn :deep(.v-btn__content) {
font-size: 0.72rem !important; overflow: hidden;
line-height: 1.2; text-overflow: ellipsis;
white-space: nowrap;
} }
.site-resource-card__meta-item :deep(.text-body-2) { .site-resource-card__icon-btn {
font-size: 0.82rem !important; block-size: 2.5rem;
line-height: 1.25; inline-size: 2.5rem;
min-inline-size: 2.5rem;
} }
.site-resource-card__secondary-actions { .site-resource-card__icon-btn :deep(.v-btn__content) {
display: flex; font-size: 1.05rem;
flex-wrap: wrap;
gap: 0.5rem;
}
.site-resource-card__secondary-actions :deep(.v-btn) {
flex: 1 1 12rem;
} }
@media (width >= 960px) { @media (width >= 960px) {
@@ -761,4 +859,14 @@ onMounted(() => {
min-block-size: 2.5rem; min-block-size: 2.5rem;
} }
} }
@media (width <= 420px) {
.site-resource-card__summary {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr) minmax(2.3rem, 0.55fr) minmax(2.3rem, 0.55fr);
}
.site-resource-card__stat {
padding-inline: 0.3rem;
}
}
</style> </style>