diff --git a/src/components/cards/SubscribeCard.vue b/src/components/cards/SubscribeCard.vue index 6296058a..423c441f 100644 --- a/src/components/cards/SubscribeCard.vue +++ b/src/components/cards/SubscribeCard.vue @@ -70,15 +70,6 @@ function isTvSubscribe(media?: Subscribe) { return media?.type === '电视剧' || media?.type === 'tv' || !!media?.season || !!media?.total_episode } -// TV 洗版订阅在卡片上展示分集或全集短标签 -const bestVersionModeLabel = computed(() => { - if (!isEnabledFlag(props.media?.best_version) || !isTvSubscribe(props.media)) return '' - - return isEnabledFlag(props.media?.best_version_full) - ? t('subscribe.bestVersionWholeShort') - : t('subscribe.bestVersionEpisodeShort') -}) - // 已下载集数:total_episode - lack_episode const downloadedEpisode = computed(() => { const total = props.media?.total_episode || 0 @@ -89,8 +80,26 @@ const downloadedEpisode = computed(() => { // 是否为洗版订阅(影响进度条与 tooltip 的展示分支) const isBestVersion = computed(() => isEnabledFlag(props.media?.best_version) && isTvSubscribe(props.media)) -// 已洗版集数:取后端派生字段 completed_episode。普通订阅下其值等于已下载集数,洗版订阅下为 -// (start-1) + [start, total] 范围内 priority==100 命中数。 +const rightBottomStateDisplay = computed(() => { + if (subscribeState.value === 'S') { + return { icon: 'mdi-pause-circle', label: '已暂停' } + } + if (subscribeState.value === 'P') { + return { icon: 'mdi-clock', label: '待定中' } + } + return null +}) + +// 洗版徽标:共用 mdi-shimmer 图标,分集 / 全集 由 full 标记区分背景 +const bestVersionBadge = computed(() => { + if (!isEnabledFlag(props.media?.best_version)) return null + return { + icon: 'mdi-shimmer', + full: isEnabledFlag(props.media?.best_version_full), + } +}) + +// 已洗版集数:取后端派生字段 completed_episode const completedEpisode = computed(() => { const total = props.media?.total_episode || 0 return Math.min(Math.max(props.media?.completed_episode ?? 0, 0), total) @@ -134,8 +143,7 @@ function getPercentage() { return Math.round((value / total) * 100) } -// 洗版进度条的 buffer 段百分比:表示"已下载"的占比,叠在底色之上、高亮段之外。 -// 普通订阅 buffer 与 model 等值(视觉上呈单段),此函数仅在洗版场景被模板调用。 +// 洗版进度条的 buffer 段百分比:表示"已下载"占比,仅在洗版场景被模板调用 function getBufferPercentage() { const total = props.media?.total_episode || 0 if (!isBestVersion.value || !total) return 0 @@ -401,11 +409,11 @@ function handleCardClick() { -
@@ -500,15 +511,6 @@ function handleCardClick() { {{ subscribeProgressTooltip }}
- - {{ bestVersionModeLabel }} - @@ -517,8 +519,16 @@ function handleCardClick() {
+ + + {{ rightBottomStateDisplay.label }} + + @@ -557,4 +567,54 @@ function handleCardClick() { .subscribe-card-background { background-image: linear-gradient(180deg, rgba(31, 41, 55, 47%) 0%, rgb(31, 41, 55) 100%); } + +/** + * 暂停:降低不透明度表达"已停止活动" + */ +.subscribe-card-paused { + opacity: 0.65; + transition: opacity 0.2s ease; +} + +/** + * 待定:用 ::after 浮层在 VCard 之上渲染 sky 漫反射式内发光 + */ +.subscribe-card-pending-tint { + position: relative; +} +.subscribe-card-pending-tint::after { + content: ''; + position: absolute; + inset: 0; + pointer-events: none; + border-radius: 8px; + box-shadow: inset 0 0 48px rgba(56, 189, 248, 0.4); // sky-400 + z-index: 3; +} + +/** + * 洗版标识:卡片左上角 24x24 圆形徽标 + * 分集:深色半透底 + 模糊 + * 全集:磨砂玻璃半透白底 + 大模糊 + */ +.best-version-badge { + position: absolute; + top: 6px; + left: 8px; + width: 24px; + height: 24px; + border-radius: 50%; + background: rgba(0, 0, 0, 0.75); + display: flex; + align-items: center; + justify-content: center; + z-index: 4; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); + backdrop-filter: blur(6px); +} +.best-version-badge-full { + background: rgba(255, 255, 255, 0.22); + backdrop-filter: blur(10px); + box-shadow: 0 2px 8px rgba(255, 255, 255, 0.15); +}