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" image="search"
/> />
</div> </div>
<!-- 收入分类统计 --> <!-- 收支和不计收支并列显示 -->
<div <div
v-if="incomeCategoriesView.length > 0" v-if="incomeCategoriesView.length > 0 || noneCategoriesView.length > 0"
class="common-card" class="side-by-side-cards"
> >
<div class="card-header"> <!-- 收入分类统计 -->
<h3 class="card-title"> <div
收入分类统计 v-if="incomeCategoriesView.length > 0"
</h3> class="common-card half-card"
<van-tag >
type="success" <div class="card-header">
size="medium" <h3 class="card-title">
> 收入
{{ incomeCategoriesView.length }}类 </h3>
</van-tag> <van-tag
</div> type="success"
size="medium"
>
{{ incomeCategoriesView.length }}
</van-tag>
</div>
<div class="category-list"> <div class="category-list">
<div <div
v-for="category in incomeCategoriesView" v-for="category in incomeCategoriesView"
:key="category.classify" :key="category.classify"
class="category-item clickable" class="category-item clickable compact"
@click="goToCategoryBills(category.classify, 1)" @click="goToCategoryBills(category.classify, 1)"
> >
<div class="category-info"> <div class="compact-row top">
<div class="category-color income-color" /> <div class="category-info-compact">
<div class="category-name-with-count"> <div class="category-color income-color" />
<span class="category-name">{{ category.classify || '未分类' }}</span> <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> <span class="category-count">{{ category.count }}笔</span>
</div> </div>
</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>
</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 <div
v-for="category in noneCategoriesView" v-if="noneCategoriesView.length > 0"
:key="category.classify" class="common-card half-card"
class="category-item clickable" >
@click="goToCategoryBills(category.classify, 2)" <div class="card-header">
> <h3 class="card-title">
<div class="category-info"> 不计收支
<div class="category-color none-color" /> </h3>
<div class="category-name-with-count"> <van-tag
<span class="category-name">{{ category.classify || '未分类' }}</span> 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> <span class="category-count">{{ category.count }}笔</span>
</div> </div>
</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> </div>
</div> </div>
@@ -1805,4 +1804,69 @@ onBeforeUnmount(() => {
:deep(.van-nav-bar) { :deep(.van-nav-bar) {
background: transparent !important; 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> </style>