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

feat: add month navigation buttons

This commit is contained in:
openclaw 2026-07-25 01:26:39 +08:00
parent b401dc808d
commit bc8547510b
2 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -337,6 +337,9 @@ input:focus-visible {
}
.list-toolbar-content.dragging { transition: none; }
.month-nav-button { width:30px; height:30px; flex:0 0 30px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:#92a09c; }
.month-nav-button:active { background:#e5efec; color:#087f72; }
.list-toolbar-actions { display:flex; align-items:center; gap:2px; }
.month-swipe-hint { position:absolute; top:50%; left:50%; display:flex; align-items:center; gap:3px; transform:translate(-50%,-50%); border:1px solid #cfe0db; border-radius:999px; padding:4px 8px; background:rgba(255,255,255,.96); color:#087f72; box-shadow:0 4px 12px rgba(26,60,52,.12); font-size:11px; font-weight:700; pointer-events:none; }
.month-swipe-hint.next { color:#3478e5; }

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

@ -388,6 +388,9 @@ async function shareLedger() {
</div>
<div class="list-toolbar" @touchstart.passive="startMonthSwipe" @touchmove.passive="moveMonthSwipe" @touchend="finishMonthSwipe" @touchcancel="cancelMonthSwipe">
<div class="list-toolbar-content" :class="{ dragging: monthSwipeDragging }" :style="{ '--month-swipe-offset': `${monthSwipeDelta * 0.22}px` }">
<button class="month-nav-button" type="button" aria-label="上个月" title="上个月" @click="shiftMonth(-1)">
<ChevronLeft :size="17" />
</button>
<div class="list-toolbar-copy">
<div class="list-toolbar-heading">
<button class="list-month-switcher" type="button" @click="openMonthPicker">
@ -402,9 +405,14 @@ async function shareLedger() {
<span class="expense">支出 {{ formatMoney(totals.expense) }}</span>
</div>
</div>
<button class="icon-button list-action" type="button" aria-label="搜索流水" title="搜索流水">
<Search :size="19" />
</button>
<div class="list-toolbar-actions">
<button class="month-nav-button" type="button" aria-label="下个月" title="下个月" @click="shiftMonth(1)">
<ChevronRight :size="17" />
</button>
<button class="icon-button list-action" type="button" aria-label="搜索流水" title="搜索流水">
<Search :size="19" />
</button>
</div>
</div>
<div v-if="monthSwipeDragging" class="month-swipe-hint" :class="{ next: monthSwipeDelta < 0 }" aria-hidden="true">
<ChevronRight v-if="monthSwipeDelta < 0" :size="14" />