qak2019
/
cents
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refine: use icon for currency display toggle

This commit is contained in:
openclaw 2026-07-25 01:59:21 +08:00
parent 1b52de229f
commit 758f061eb5
2 changed files with 22 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
apps/web/src/styles.css
View File

@ -104,30 +104,21 @@ input:focus-visible {
gap: 6px; gap: 6px;
} }
.currency-display-toggle { .currency-display-button {
height: 32px; width: 34px;
display: inline-flex; height: 34px;
align-items: stretch; display: inline-grid;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.28); border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 7px; border-radius: 7px;
padding: 2px; padding: 0;
background: rgba(0, 0, 0, 0.12); background: rgba(0, 0, 0, 0.12);
color: rgba(255, 255, 255, 0.82);
} }
.currency-display-toggle button { .currency-display-button.active {
min-width: 32px; background: rgba(255, 255, 255, 0.2);
border: 0; color: #ffffff;
border-radius: 5px;
padding: 0 6px;
background: transparent;
color: rgba(255, 255, 255, 0.72);
font-size: 11px;
font-weight: 700;
}
.currency-display-toggle button.active {
background: rgba(255, 255, 255, 0.92);
color: #24766d;
} }
.participant-avatars { .participant-avatars {

16
apps/web/src/views/LedgerView.vue
View File

@ -2,6 +2,7 @@
import { formatCurrencyAmount, type LedgerEntry } from "@cents/domain"; import { formatCurrencyAmount, type LedgerEntry } from "@cents/domain";
import { import {
BookOpen, BookOpen,
ArrowLeftRight,
ChevronLeft, ChevronLeft,
ChevronDown, ChevronDown,
ChevronRight, ChevronRight,
@ -437,10 +438,17 @@ async function shareLedger() {
<ChevronDown :size="16" /> <ChevronDown :size="16" />
</button> </button>
<div class="header-right-actions"> <div class="header-right-actions">
<div class="currency-display-toggle" role="group" aria-label="流水金额显示方式"> <button
<button type="button" :class="{ active: showBaseCurrency }" :aria-pressed="showBaseCurrency" @click="showBaseCurrency = true">本币</button> class="currency-display-button"
<button type="button" :class="{ active: !showBaseCurrency }" :aria-pressed="!showBaseCurrency" @click="showBaseCurrency = false">原币</button> type="button"
</div> :class="{ active: showBaseCurrency }"
:aria-label="showBaseCurrency ? '当前显示本币，点击显示原币' : '当前显示原币，点击显示本币'"
:title="showBaseCurrency ? '当前显示本币，点击切换为原币' : '当前显示原币，点击切换为本币'"
:aria-pressed="showBaseCurrency"
@click="showBaseCurrency = !showBaseCurrency"
>
<ArrowLeftRight :size="17" />
</button>
<button v-if="ledgerStore.currentRole === 'owner'" class="icon-button header-icon" type="button" aria-label="更多" title="更多" @click.stop="moreMenuOpen = true"> <button v-if="ledgerStore.currentRole === 'owner'" class="icon-button header-icon" type="button" aria-label="更多" title="更多" @click.stop="moreMenuOpen = true">
<MoreHorizontal :size="21" /> <MoreHorizontal :size="21" />
</button> </button>