suncheng/EmailBill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 23s
Details
Docker Build & Deploy / Deploy to Production (push) Successful in 10s
Details
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s
Details
Docker Build & Deploy / WeChat Notification (push) Successful in 1s
Details

Browse Source
This commit is contained in:
孙诚
2026-01-16 12:27:00 +08:00
parent 59b81148ac
commit f77cc57cab
1 changed files with 141 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
Web/src/views/StatisticsView.vue
View File

@@ -228,95 +228,94 @@
image="search"
/>
</div>
<!-- 收入分类统计 -->
<!-- 收支和不计收支并列显示 -->
<div
v-if="incomeCategoriesView.length > 0"
class="common-card"
v-if="incomeCategoriesView.length > 0 || noneCategoriesView.length > 0"
class="side-by-side-cards"
>
<div class="card-header">
<h3 class="card-title">
收入分类统计
</h3>
<van-tag
type="success"
size="medium"
>
{{ incomeCategoriesView.length }}类
</van-tag>
</div>
<!-- 收入分类统计 -->
<div
v-if="incomeCategoriesView.length > 0"
class="common-card half-card"
>
<div class="card-header">
<h3 class="card-title">
收入
</h3>
<van-tag
type="success"
size="medium"
>
{{ incomeCategoriesView.length }}
</van-tag>
</div>
<div class="category-list">
<div
v-for="category in incomeCategoriesView"
:key="category.classify"
class="category-item clickable"
@click="goToCategoryBills(category.classify, 1)"
>
<div class="category-info">
<div class="category-color income-color" />
<div class="category-name-with-count">
<span class="category-name">{{ category.classify || '未分类' }}</span>
<div class="category-list">
<div
v-for="category in incomeCategoriesView"
:key="category.classify"
class="category-item clickable compact"
@click="goToCategoryBills(category.classify, 1)"
>
<div class="compact-row top">
<div class="category-info-compact">
<div class="category-color income-color" />
<span class="category-name text-ellipsis">{{ category.classify || '未分类' }}</span>
</div>
<div class="category-percent">
{{ category.percent }}%
</div>
</div>
<div class="compact-row bottom">
<div class="category-amount income-text">
¥{{ formatMoney(category.amount) }}
</div>
<span class="category-count">{{ category.count }}笔</span>
</div>
</div>
<div class="category-stats">
<div class="category-amount income-text">
¥{{ formatMoney(category.amount) }}
</div>
<div class="category-percent">
{{ category.percent }}%
</div>
</div>
<van-icon
name="arrow"
class="category-arrow"
/>
</div>
</div>
</div>
<!-- 不计收支分类统计 -->
<div
v-if="noneCategoriesView.length > 0"
class="common-card"
>
<div class="card-header">
<h3 class="card-title">
不计收支分类统计
</h3>
<van-tag
type="warning"
size="medium"
>
{{ noneCategoriesView.length }}类
</van-tag>
</div>
<div class="category-list">
<div
v-for="category in noneCategoriesView"
:key="category.classify"
class="category-item clickable"
@click="goToCategoryBills(category.classify, 2)"
>
<div class="category-info">
<div class="category-color none-color" />
<div class="category-name-with-count">
<span class="category-name">{{ category.classify || '未分类' }}</span>
<!-- 不计收支分类统计 -->
<div
v-if="noneCategoriesView.length > 0"
class="common-card half-card"
>
<div class="card-header">
<h3 class="card-title">
不计收支
</h3>
<van-tag
type="warning"
size="medium"
>
{{ noneCategoriesView.length }}
</van-tag>
</div>
<div class="category-list">
<div
v-for="category in noneCategoriesView"
:key="category.classify"
class="category-item clickable compact"
@click="goToCategoryBills(category.classify, 2)"
>
<div class="compact-row top">
<div class="category-info-compact">
<div class="category-color none-color" />
<span class="category-name text-ellipsis">{{ category.classify || '未分类' }}</span>
</div>
<div class="category-percent">
{{ category.percent }}%
</div>
</div>
<div class="compact-row bottom">
<div class="category-amount none-text">
¥{{ formatMoney(category.amount) }}
</div>
<span class="category-count">{{ category.count }}笔</span>
</div>
</div>
<div class="category-stats">
<div class="category-amount none-text">
¥{{ formatMoney(category.amount) }}
</div>
<div class="category-percent">
{{ category.percent }}%
</div>
</div>
<van-icon
name="arrow"
class="category-arrow"
/>
</div>
</div>
</div>
@@ -1805,4 +1804,69 @@ onBeforeUnmount(() => {
:deep(.van-nav-bar) {
background: transparent !important;
}
/* 并列显示卡片 */
.side-by-side-cards {
display: flex;
gap: 12px;
margin: 0 12px 16px;
}
.side-by-side-cards .common-card {
margin: 0;
flex: 1;
min-width: 0; /* 允许内部元素缩小 */
padding: 12px;
}
.side-by-side-cards .card-header {
margin-bottom: 12px;
}
/* 紧凑模式列表项 */
.category-item.compact {
flex-direction: column;
align-items: stretch;
gap: 6px;
padding: 10px 0;
}
.compact-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.compact-row.top {
margin-bottom: 2px;
}
.category-info-compact {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
flex: 1;
}
.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
}
/* 调整紧凑模式下的字体大小 */
.compact-row .category-percent {
font-size: 12px;
}
.compact-row .category-amount {
font-size: 14px;
}
.compact-row .category-count {
font-size: 11px;
}
</style>