fix: reserve space for conversion notices

This commit is contained in:
openclaw 2026-07-25 01:06:09 +08:00
parent ffc8fb0eee
commit f860b78917
3 changed files with 19 additions and 13 deletions

View File

@ -755,7 +755,8 @@ input:focus-visible {
line-height: 1.1;
}
.conversion-notice { min-height:38px; display:flex; align-items:center; border-bottom:1px solid #eadfca; padding:7px 12px; background:#fff9ed; color:#775b24; font-size:12px; }
.ledger-notice-slot { height:38px; overflow:hidden; }
.conversion-notice { height:38px; display:flex; align-items:center; border-bottom:1px solid #eadfca; padding:7px 12px; background:#fff9ed; color:#775b24; font-size:12px; }
.conversion-notice span { display:flex; align-items:center; gap:6px; }
.amount-value {

View File

@ -310,14 +310,16 @@ async function shareLedger() {
</header>
<section ref="ledgerContent" class="ledger-content" aria-label="账本流水">
<div v-if="pendingEntryCount" class="sync-notice" role="status">
<span><CloudOff :size="16" />{{ pendingEntryCount }} 条账目未同步云端</span>
<button type="button" :disabled="store.syncing" @click="store.syncEntries">
<RefreshCw :size="15" :class="{ spinning: store.syncing }" />{{ store.syncing ? "同步中" : "立即同步" }}
</button>
</div>
<div v-if="pendingConversionCount" class="conversion-notice" role="status">
<span><Clock3 :size="15" />{{ pendingConversionCount }} 条外币账目等待换算</span>
<div class="ledger-notice-slot" aria-live="polite">
<div v-if="pendingEntryCount" class="sync-notice" role="status">
<span><CloudOff :size="16" />{{ pendingEntryCount }} 条账目未同步云端</span>
<button type="button" :disabled="store.syncing" @click="store.syncEntries">
<RefreshCw :size="15" :class="{ spinning: store.syncing }" />{{ store.syncing ? "同步中" : "立即同步" }}
</button>
</div>
<div v-else-if="pendingConversionCount" class="conversion-notice" role="status">
<span><Clock3 :size="15" />{{ pendingConversionCount }} 条外币账目等待换算</span>
</div>
</div>
<div class="list-toolbar">
<div class="list-toolbar-copy">

View File

@ -196,9 +196,11 @@ function dailyLabel(value: string) {
<div class="income"><span><TrendingUp :size="17" />收入</span><strong>{{ money(totals.income) }}</strong></div>
<div class="expense"><span><TrendingDown :size="17" />支出</span><strong>{{ money(totals.expense) }}</strong></div>
</section>
<p v-if="pendingConversionCount" class="stats-conversion-notice">
{{ pendingConversionCount }} 条外币账目等待换算暂未计入人民币统计
</p>
<div class="stats-conversion-slot" aria-live="polite">
<p v-if="pendingConversionCount" class="stats-conversion-notice" role="status">
{{ pendingConversionCount }} 条外币账目等待换算暂未计入人民币统计
</p>
</div>
<div class="stats-tabs" role="tablist" aria-label="统计维度">
<button type="button" :class="{ active: activeTab === 'flow' }" @click="activeTab = 'flow'">收支</button>
@ -275,7 +277,8 @@ function dailyLabel(value: string) {
.stats-summary .balance strong { font-size:24px; }
.stats-summary .income { color: #0d8b67; }
.stats-summary .expense { color: #d84c36; }
.stats-conversion-notice { margin:8px 0 0; border-left:3px solid #d69a32; padding:7px 9px; background:#fff8e9; color:#755719; font-size:11px; }
.stats-conversion-slot { height:34px; margin-top:8px; overflow:hidden; }
.stats-conversion-notice { margin:0; border-left:3px solid #d69a32; padding:7px 9px; background:#fff8e9; color:#755719; font-size:11px; }
.stats-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin: 14px 0 10px; border-radius: 8px; padding: 4px; background: #e7eeec; }
.stats-tabs button { height: 38px; border: 0; border-radius: 6px; background: transparent; color: #71807c; font-size: 13px; font-weight: 680; }
.stats-tabs button.active { background: #fff; color: #087f72; box-shadow: 0 2px 7px rgba(28,52,47,.12); }