polish(webui): calendar card titles, table/header fixes, wizard and contrast

- Calendar cards without a poster now show the series title on the
  placeholder (was an anonymous gray box until hover)
- Downloader: Seeds/Peers column no longer wraps mid-word; progress
  percentage moved outside the bar where it is readable at 0%
- RSS: Refresh All icon uses NButton's icon slot (was glued to label)
- Setup wizard: progress bar counts the current step (was empty on
  step 1), animates via transform with reduced-motion fallback,
  description text raised to AA contrast
- Card titles use the primary text color — headers were lighter than
  body text (inverted hierarchy) across every card

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GTnuEgR78cBk32bLNKar3z
This commit is contained in:
Estrella Pan
2026-07-02 21:33:02 +02:00
parent d80bf89cfa
commit ddd618b733
6 changed files with 44 additions and 11 deletions

View File

@@ -46,6 +46,8 @@ withDefaults(
.container-title {
font-size: 15px;
font-weight: 600;
// 卡片标题不应比正文更浅(层级倒挂),用主文本色,靠字重区分
color: var(--color-text);
}
.container-body {

View File

@@ -41,6 +41,9 @@ const posterSrc = computed(() =>
/>
<div v-else class="calendar-card-placeholder">
<ErrorPicture theme="outline" size="20" />
<span class="calendar-card-placeholder-title">
{{ group.primary.official_title }}
</span>
</div>
<div class="calendar-card-overlay">
<div class="calendar-card-overlay-tags">
@@ -141,13 +144,29 @@ const posterSrc = computed(() =>
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px;
background: var(--color-surface-hover);
color: var(--color-text-muted);
transition: background-color var(--transition-normal);
}
// 无海报时在卡片上直接显示标题,否则卡片只剩一个灰色占位块
.calendar-card-placeholder-title {
font-size: 11px;
font-weight: 500;
line-height: 1.35;
color: var(--color-text-secondary);
text-align: center;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
.calendar-card-overlay {
position: absolute;
inset: 0;

View File

@@ -11,9 +11,10 @@ const { t } = useMyI18n();
<div class="wizard-container">
<div class="wizard-progress">
<div class="wizard-progress-bar">
<!-- 按“已到第几步”计算,避免第一步进度条完全空白 -->
<div
class="wizard-progress-fill"
:style="{ width: `${(currentStep / (totalSteps - 1)) * 100}%` }"
:style="{ transform: `scaleX(${(currentStep + 1) / totalSteps})` }"
/>
</div>
<div class="wizard-step-indicator">
@@ -51,10 +52,16 @@ const { t } = useMyI18n();
}
.wizard-progress-fill {
width: 100%;
height: 100%;
background: var(--color-primary);
border-radius: 2px;
transition: width 0.3s ease;
transform-origin: left;
transition: transform 0.3s ease-out;
@media (prefers-reduced-motion: reduce) {
transition: none;
}
}
.wizard-step-indicator {

View File

@@ -39,8 +39,10 @@ const setupStore = useSetupStore();
}
.welcome-description {
font-size: 12px;
color: var(--color-text-muted);
font-size: 13px;
line-height: 1.6;
// muted (#94A3B8) 在白底上不足 AA 对比度,正文用 secondary
color: var(--color-text-secondary);
margin: 0;
}

View File

@@ -128,7 +128,6 @@ const tableColumnsValue = computed<DataTableColumns<QbTorrentInfo>>(() => [
<NProgress
type="line"
percentage={Math.round(row.progress * 100)}
indicator-placement="inside"
processing={row.state === 'downloading' || row.state === 'forcedDL'}
/>
);
@@ -179,7 +178,7 @@ const tableColumnsValue = computed<DataTableColumns<QbTorrentInfo>>(() => [
{
title: t('downloader.torrent.peers'),
key: 'peers',
width: 90,
width: 110,
render(row: QbTorrentInfo) {
return `${row.num_seeds} / ${row.num_leechs}`;
},

View File

@@ -130,11 +130,15 @@ const rssRowKey = (row: RSS) => row.id;
:disabled="isRefreshingAll"
@click="refreshAllRSS"
>
<div
:class="
isRefreshingAll ? 'i-carbon-renew animate-spin' : 'i-carbon-renew'
"
></div>
<template #icon>
<div
:class="
isRefreshingAll
? 'i-carbon-renew animate-spin'
: 'i-carbon-renew'
"
></div>
</template>
{{ $t('rss.refresh_all') }}
</NButton>
</template>