mirror of
https://github.com/EstrellaXD/Auto_Bangumi.git
synced 2026-10-30 20:24:47 +08:00
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:
@@ -46,6 +46,8 @@ withDefaults(
|
||||
.container-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
// 卡片标题不应比正文更浅(层级倒挂),用主文本色,靠字重区分
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.container-body {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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}`;
|
||||
},
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user