fix

Web/package.json

@@ -1,4 +1,4 @@
-{
+{
   "name": "email-bill",
   "version": "1.0.0",
   "private": true,

Web/src/views/StatisticsView.vue

@@ -153,7 +153,10 @@
               </div>
             </div>
             <!-- 分类统计 -->
-            <div class="common-card">
+            <div
+              class="common-card"
+              style="padding-bottom: 10px;"
+            >
               <div class="card-header">
                 <h3 class="card-title">
                   支出分类
@@ -179,18 +182,13 @@
               </div>
               <!-- 分类列表 -->
               <div
-                v-if="expenseCategoriesSimpView.length > 0"
                 class="category-list"
               >
                 <div
                   v-for="category in expenseCategoriesSimpView"
-                  :key="category.isOther ? 'other' : category.classify"
+                  :key="category.classify"
                   class="category-item clickable"
-                  @click="
+                  @click="goToCategoryBills(category.classify, 0)"
-                    category.isOther
-                      ? (showAllExpense = true)
-                      : goToCategoryBills(category.classify, 0)
-                  "
                 >
                   <div class="category-info">
                     <div
@@ -211,13 +209,21 @@
                     </div>
                   </div>
                   <van-icon
-                    :name="category.isOther ? 'arrow-down' : 'arrow'"
+                    name="arrow"
                     class="category-arrow"
                   />
                 </div>
+                <!-- 展开/收起按钮 -->
+                <div
+                  v-if="expenseCategoriesView.length > 1"
+                  class="expand-toggle"
+                  @click="showAllExpense = !showAllExpense"
+                >
+                  <van-icon :name="showAllExpense ? 'arrow-up' : 'arrow-down'" />
+                </div>
               </div>
               <van-empty
-                v-else
+                v-if="!expenseCategoriesView || !expenseCategoriesView.length"
                 description="本月暂无支出记录"
                 image="search"
               />
@@ -241,14 +247,10 @@
 
               <div class="category-list">
                 <div
-                  v-for="category in incomeCategoriesView"
+                  v-for="category in incomeCategoriesSimpView"
-                  :key="category.isOther ? 'other' : category.classify"
+                  :key="category.classify"
                   class="category-item clickable"
-                  @click="
+                  @click="goToCategoryBills(category.classify, 1)"
-                    category.isOther
-                      ? (showAllIncome = true)
-                      : goToCategoryBills(category.classify, 1)
-                  "
                 >
                   <div class="category-info">
                     <div class="category-color income-color" />
@@ -266,10 +268,18 @@
                     </div>
                   </div>
                   <van-icon
-                    :name="category.isOther ? 'arrow-down' : 'arrow'"
+                    name="arrow"
                     class="category-arrow"
                   />
                 </div>
+                <!-- 展开/收起按钮 -->
+                <div
+                  v-if="incomeCategoriesView.length > 1"
+                  class="expand-toggle"
+                  @click="showAllIncome = !showAllIncome"
+                >
+                  <van-icon :name="showAllIncome ? 'arrow-up' : 'arrow-down'" />
+                </div>
               </div>
             </div>
             <!-- 不计收支分类统计 -->
@@ -291,14 +301,10 @@
 
               <div class="category-list">
                 <div
-                  v-for="category in noneCategoriesView"
+                  v-for="category in noneCategoriesSimpView"
-                  :key="category.isOther ? 'other' : category.classify"
+                  :key="category.classify"
                   class="category-item clickable"
-                  @click="
+                  @click="goToCategoryBills(category.classify, 2)"
-                    category.isOther
-                      ? (showAllNone = true)
-                      : goToCategoryBills(category.classify, 2)
-                  "
                 >
                   <div class="category-info">
                     <div class="category-color none-color" />
@@ -316,10 +322,18 @@
                     </div>
                   </div>
                   <van-icon
-                    :name="category.isOther ? 'arrow-down' : 'arrow'"
+                    name="arrow"
                     class="category-arrow"
                   />
                 </div>
+                <!-- 展开/收起按钮 -->
+                <div
+                  v-if="noneCategoriesView.length > 1"
+                  class="expand-toggle"
+                  @click="showAllNone = !showAllNone"
+                >
+                  <van-icon :name="showAllNone ? 'arrow-up' : 'arrow-down'" />
+                </div>
               </div>
             </div>
             <!-- 其他统计 -->
@@ -498,21 +512,16 @@ const noneCategories = ref([])
 const expenseCategoriesSimpView = computed(() => {
   const list = expenseCategoriesView.value
 
-  if (showAllExpense.value || list.length <= 7) {
+  if (showAllExpense.value) {
     return list
   }
 
-  const top = list.slice(0, 6)
+  // 只展示未分类
-  const rest = list.slice(6)
+  const unclassified = list.filter((c) => c.classify === '未分类' || !c.classify)
-  top.push({
+  if (unclassified.length > 0) {
-    classify: '其他',
+    return [...unclassified]
-    amount: rest.reduce((s, c) => s + c.amount, 0),
+  }
-    count: rest.reduce((s, c) => s + c.count, 0),
+  return []
-    percent: parseFloat(rest.reduce((s, c) => s + c.percent, 0).toFixed(1)),
-    color: '#AAB7B8',
-    isOther: true
-  })
-  return top
 })
 
 const expenseCategoriesView = computed(() => {
@@ -526,6 +535,21 @@ const expenseCategoriesView = computed(() => {
   return list
 })
 
+const incomeCategoriesSimpView = computed(() => {
+  const list = incomeCategoriesView.value
+
+  if (showAllIncome.value) {
+    return list
+  }
+
+  // 只展示未分类
+  const unclassified = list.filter((c) => c.classify === '未分类' || !c.classify)
+  if (unclassified.length > 0) {
+    return [...unclassified]
+  }
+  return []
+})
+
 const incomeCategoriesView = computed(() => {
   const list = [...incomeCategories.value]
   const unclassifiedIndex = list.findIndex((c) => !c.classify)
@@ -534,20 +558,22 @@ const incomeCategoriesView = computed(() => {
     list.unshift(unclassified)
   }
 
-  if (showAllIncome.value || list.length <= 7) {
+  return list
+})
+
+const noneCategoriesSimpView = computed(() => {
+  const list = noneCategoriesView.value
+
+  if (showAllNone.value) {
     return list
   }
 
-  const top = list.slice(0, 6)
+  // 只展示未分类
-  const rest = list.slice(6)
+  const unclassified = list.filter((c) => c.classify === '未分类' || !c.classify)
-  top.push({
+  if (unclassified.length > 0) {
-    classify: '其他',
+    return [...unclassified]
-    amount: rest.reduce((s, c) => s + c.amount, 0),
+  }
-    count: rest.reduce((s, c) => s + c.count, 0),
+  return []
-    percent: parseFloat(rest.reduce((s, c) => s + c.percent, 0).toFixed(1)),
-    isOther: true
-  })
-  return top
 })
 
 const noneCategoriesView = computed(() => {
@@ -558,20 +584,7 @@ const noneCategoriesView = computed(() => {
     list.unshift(unclassified)
   }
 
-  if (showAllNone.value || list.length <= 7) {
   return list
-  }
-
-  const top = list.slice(0, 6)
-  const rest = list.slice(6)
-  top.push({
-    classify: '其他',
-    amount: rest.reduce((s, c) => s + c.amount, 0),
-    count: rest.reduce((s, c) => s + c.count, 0),
-    percent: parseFloat(rest.reduce((s, c) => s + c.percent, 0).toFixed(1)),
-    isOther: true
-  })
-  return top
 })
 
 // 趋势数据
@@ -1701,6 +1714,20 @@ onBeforeUnmount(() => {
   flex-shrink: 0;
 }
 
+.expand-toggle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: 10px;
+  color: var(--van-text-color-3);
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.expand-toggle:active {
+  opacity: 0.7;
+}
+
 .category-amount {
   font-size: 15px;
   font-weight: 600;