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

fix: position month picker at app level

This commit is contained in:
openclaw 2026-07-25 23:52:33 +08:00
parent 81590b2d80
commit 4f30bd9830
1 changed files with 39 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -511,45 +511,6 @@ async function shareLedger() {
</div>
</Transition>
<Transition name="month-picker">
<div v-if="monthPickerOpen" class="month-picker-layer">
<button class="month-picker-scrim" type="button" aria-label="关闭月份选择" @click="closeMonthPicker"></button>
<section class="month-picker-modal" role="dialog" aria-modal="true" aria-label="选择月份">
<header>
<button v-if="monthPickerMode === 'years'" type="button" aria-label="返回月份选择" title="返回月份选择" @click="monthPickerMode = 'months'"><ChevronLeft :size="20" /></button>
<span v-else></span>
<strong>{{ monthPickerMode === "months" ? "选择月份" : "选择年份" }}</strong>
<button type="button" aria-label="关闭" title="关闭" @click="closeMonthPicker"><X :size="20" /></button>
</header>
<template v-if="monthPickerMode === 'months'">
<button class="month-picker-year" type="button" @click="monthPickerMode = 'years'">
<strong>{{ monthPickerYear }}年</strong>
<ChevronDown :size="16" />
</button>
<div class="month-picker-total">
<span class="income">+ ¥{{ formatMoney(pickerYearSummary.income) }}</span>
<span class="expense">− ¥{{ formatMoney(pickerYearSummary.expense) }}</span>
</div>
<div class="month-picker-grid">
<button v-for="summary in monthSummaries" :key="summary.month" type="button" :class="{ selected: selectedMonth === `${monthPickerYear}-${String(summary.month + 1).padStart(2, '0')}` }" @click="selectPickerMonth(summary.month)">
<strong>{{ summary.month + 1 }}月</strong>
<small class="income">+{{ formatCompactMoney(summary.income) }}</small>
<small class="expense">−{{ formatCompactMoney(summary.expense) }}</small>
</button>
</div>
</template>
<div v-else class="year-picker-list">
<button v-for="summary in yearSummaries" :key="summary.year" type="button" :class="{ selected: summary.year === monthPickerYear }" @click="selectPickerYear(summary.year)">
<strong>{{ summary.year }}年</strong>
<span><i class="income">+{{ formatCompactMoney(summary.income) }}</i><i class="expense">−{{ formatCompactMoney(summary.expense) }}</i></span>
</button>
</div>
</section>
</div>
</Transition>
<section class="monthly-summary" aria-label="月度收支">
<div class="summary-main">
<span>结余</span>
@ -568,6 +529,45 @@ async function shareLedger() {
</section>
</header>
<Transition name="month-picker">
<div v-if="monthPickerOpen" class="month-picker-layer">
<button class="month-picker-scrim" type="button" aria-label="关闭月份选择" @click="closeMonthPicker"></button>
<section class="month-picker-modal" role="dialog" aria-modal="true" aria-label="选择月份">
<header>
<button v-if="monthPickerMode === 'years'" type="button" aria-label="返回月份选择" title="返回月份选择" @click="monthPickerMode = 'months'"><ChevronLeft :size="20" /></button>
<span v-else></span>
<strong>{{ monthPickerMode === "months" ? "选择月份" : "选择年份" }}</strong>
<button type="button" aria-label="关闭" title="关闭" @click="closeMonthPicker"><X :size="20" /></button>
</header>
<template v-if="monthPickerMode === 'months'">
<button class="month-picker-year" type="button" @click="monthPickerMode = 'years'">
<strong>{{ monthPickerYear }}年</strong>
<ChevronDown :size="16" />
</button>
<div class="month-picker-total">
<span class="income">+ ¥{{ formatMoney(pickerYearSummary.income) }}</span>
<span class="expense">− ¥{{ formatMoney(pickerYearSummary.expense) }}</span>
</div>
<div class="month-picker-grid">
<button v-for="summary in monthSummaries" :key="summary.month" type="button" :class="{ selected: selectedMonth === `${monthPickerYear}-${String(summary.month + 1).padStart(2, '0')}` }" @click="selectPickerMonth(summary.month)">
<strong>{{ summary.month + 1 }}月</strong>
<small class="income">+{{ formatCompactMoney(summary.income) }}</small>
<small class="expense">−{{ formatCompactMoney(summary.expense) }}</small>
</button>
</div>
</template>
<div v-else class="year-picker-list">
<button v-for="summary in yearSummaries" :key="summary.year" type="button" :class="{ selected: summary.year === monthPickerYear }" @click="selectPickerYear(summary.year)">
<strong>{{ summary.year }}年</strong>
<span><i class="income">+{{ formatCompactMoney(summary.income) }}</i><i class="expense">−{{ formatCompactMoney(summary.expense) }}</i></span>
</button>
</div>
</section>
</div>
</Transition>
<section
ref="ledgerContent"
class="ledger-content"