zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

在交易列表页面顶部显示账户信息：新增账户图标、名称和余额信息卡片，优化单账户筛选时的显示逻辑

Browse Source
This commit is contained in:
Zhengchen Tao
2026-04-05 18:51:27 +08:00
parent c7c84c74d3
commit ba85852543
3 changed files with 72 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/desktop/transactions/ListPage.vue
+30 -1
View File
@@ -172,6 +172,16 @@
</div>
</v-card-text>
<v-card-text class="pt-0" v-if="filteredSingleAccount">
<v-card variant="tonal" class="d-inline-flex align-center px-4 py-2" rounded="lg">
<ItemIcon icon-type="account" :icon-id="filteredSingleAccount.icon" :color="filteredSingleAccount.color" />
<div class="ms-3">
<div class="text-subtitle-1 font-weight-bold">{{ filteredSingleAccount.name }}</div>
<div class="text-body-2 text-medium-emphasis">{{ filteredAccountBalanceText }}</div>
</div>
</v-card>
</v-card-text>
<v-card-text class="transaction-calendar-container pt-0" v-if="pageType === TransactionListPageType.Calendar.type">
<transaction-calendar day-has-transaction-class="font-weight-bold"
:readonly="loading" :is-dark-mode="isDarkMode"
@@ -775,7 +785,8 @@ const {
tt,
getAllRecentMonthDateRanges,
getWeekdayLongName,
getCurrentNumeralSystemType
getCurrentNumeralSystemType,
formatAmountToLocalizedNumeralsWithCurrency
} = useI18n();
const {
@@ -875,6 +886,24 @@ const showFilterTagDialog = ref<boolean>(false);
const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
const numeralSystem = computed<NumeralSystem>(() => getCurrentNumeralSystemType());
const filteredSingleAccount = computed(() => {
if (queryAllFilterAccountIdsCount.value !== 1) return null;
return allAccountsMap.value[query.value.accountIds] ?? null;
});
const filteredAccountBalanceText = computed<string>(() => {
const account = filteredSingleAccount.value;
if (!account) return '';
if (account.creditLimit) {
const outstanding = -account.balance;
const available = account.creditLimit + account.balance;
return formatAmountToLocalizedNumeralsWithCurrency(outstanding, account.currency)
+ ' · ' + tt('Available') + ' ' + formatAmountToLocalizedNumeralsWithCurrency(available, account.currency);
}
const displayBalance = account.isLiability ? -account.balance : account.balance;
return formatAmountToLocalizedNumeralsWithCurrency(displayBalance, account.currency);
});
const allPageCounts = computed<NameNumeralValue[]>(() => {
const pageCounts: NameNumeralValue[] = [];
const availableCountPerPage: number[] = [ 5, 10, 15, 20, 25, 30, 50 ];
src/views/mobile/transactions/ListPage.vue
+30 -1
View File
@@ -69,6 +69,16 @@
</f7-link>
</f7-toolbar>
<f7-card class="margin-vertical" v-if="filteredSingleAccount">
<f7-card-content class="display-flex align-items-center padding-half">
<ItemIcon icon-type="account" :icon-id="filteredSingleAccount.icon" :color="filteredSingleAccount.color" />
<div class="margin-inline-start-half">
<div class="font-weight-bold">{{ filteredSingleAccount.name }}</div>
<div><small>{{ filteredAccountBalanceText }}</small></div>
</div>
</f7-card-content>
</f7-card>
<f7-block class="transaction-calendar-container margin-vertical" v-if="pageType === TransactionListPageType.Calendar.type">
<transaction-calendar calendar-class="justify-content-center" week-day-name-type="short"
:readonly="loading" :is-dark-mode="isDarkMode"
@@ -670,7 +680,8 @@ const {
tt,
getCurrentLanguageTextDirection,
getCurrentNumeralSystemType,
getWeekdayShortName
getWeekdayShortName,
formatAmountToLocalizedNumeralsWithCurrency
} = useI18n();
const { showAlert, showToast, routeBackOnError } = useI18nUIComponents();
@@ -748,6 +759,24 @@ const textDirection = computed<TextDirection>(() => getCurrentLanguageTextDirect
const numeralSystem = computed<NumeralSystem>(() => getCurrentNumeralSystemType());
const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);
const filteredSingleAccount = computed(() => {
if (queryAllFilterAccountIdsCount.value !== 1) return null;
return allAccountsMap.value[query.value.accountIds] ?? null;
});
const filteredAccountBalanceText = computed<string>(() => {
const account = filteredSingleAccount.value;
if (!account) return '';
if (account.creditLimit) {
const outstanding = -account.balance;
const available = account.creditLimit + account.balance;
return formatAmountToLocalizedNumeralsWithCurrency(outstanding, account.currency)
+ ' · ' + tt('Available') + ' ' + formatAmountToLocalizedNumeralsWithCurrency(available, account.currency);
}
const displayBalance = account.isLiability ? -account.balance : account.balance;
return formatAmountToLocalizedNumeralsWithCurrency(displayBalance, account.currency);
});
const transactions = computed<TransactionMonthList[]>(() => {
if (loading.value) {
return [];