From f77cc57cab0ef65ef344df5133e7a609009c8395 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E8=AF=9A?= <cheng2.sun@ly.com>
Date: Fri, 16 Jan 2026 12:27:00 +0800
Subject: [PATCH] 1

---
 Web/src/views/StatisticsView.vue | 218 ++++++++++++++++++++-----------
 1 file changed, 141 insertions(+), 77 deletions(-)

diff --git a/Web/src/views/StatisticsView.vue b/Web/src/views/StatisticsView.vue
index c2dd97c..78844fc 100644
--- a/Web/src/views/StatisticsView.vue
+++ b/Web/src/views/StatisticsView.vue
@@ -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>