封装调整

Web/src/views/BudgetView.vue

@@ -17,15 +17,16 @@
       </template>
     </van-nav-bar>
 
-    <div class="scroll-content">
-      <div class="page-content">
-        <van-tabs v-model:active="activeTab" sticky offset-top="0" type="card">
-        <van-tab title="支出" :name="BudgetCategory.Expense">
-          <BudgetSummary 
-            :stats="overallStats" 
-            :title="activeTabTitle" 
-            :get-value-class="getValueClass" 
-          />
+    <BudgetSummary 
+      v-if="activeTab !== BudgetCategory.Savings"
+      :stats="overallStats" 
+      :title="activeTabTitle" 
+      :get-value-class="getValueClass" 
+    />
+
+    <van-tabs v-model:active="activeTab" type="card" class="budget-tabs">
+      <van-tab title="支出" :name="BudgetCategory.Expense">
+        <div class="scroll-content">
           <div class="budget-list">
             <template v-if="expenseBudgets?.length > 0">
               <van-swipe-cell v-for="budget in expenseBudgets" :key="budget.id">
@@ -66,15 +67,14 @@
             </template>
             <van-empty v-else description="暂无支出预算" />
           </div>
+          <!-- 底部安全距离 -->
+          <div style="height: calc(50px + env(safe-area-inset-bottom, 0px))"></div>
+        </div>
         </van-tab>
 
         <van-tab title="收入" :name="BudgetCategory.Income">
-          <BudgetSummary 
-            :stats="overallStats" 
-            :title="activeTabTitle" 
-            :get-value-class="getValueClass" 
-          />
-          <div class="budget-list">
+          <div class="scroll-content">
+            <div class="budget-list">
             <template v-if="incomeBudgets?.length > 0">
               <van-swipe-cell v-for="budget in incomeBudgets" :key="budget.id">
                 <BudgetCard 
@@ -115,10 +115,14 @@
             </template>
             <van-empty v-else description="暂无收入预算" />
           </div>
+          <!-- 底部安全距离 -->
+          <div style="height: calc(50px + env(safe-area-inset-bottom, 0px))"></div>
+        </div>
         </van-tab>
 
         <van-tab title="存款" :name="BudgetCategory.Savings">
-          <div class="budget-list">
+          <div class="scroll-content">
+            <div class="budget-list">
             <template v-if="savingsBudgets?.length > 0">
               <van-swipe-cell v-for="budget in savingsBudgets" :key="budget.id">
                 <BudgetCard 
@@ -162,11 +166,11 @@
             </template>
             <van-empty v-else description="暂无存款计划" />
           </div>
+          <!-- 底部安全距离 -->
+          <div style="height: calc(50px + env(safe-area-inset-bottom, 0px))"></div>
+        </div>
         </van-tab>
       </van-tabs>
-      <!-- 底部安全距离 -->
-      <div style="height: calc(50px + env(safe-area-inset-bottom, 0px))"></div>
-    </div>
 
     <!-- 添加/编辑预算弹窗 -->
     <BudgetEditPopup 
@@ -177,7 +181,6 @@
       ref="savingsConfigRef"
       @success="fetchBudgetList"
     />
-    </div>
   </div>
 </template>
 
@@ -226,7 +229,6 @@ const overallStats = computed(() => {
   }
 
   return {
-    week: getStatsForType(BudgetPeriodType.Week),
     month: getStatsForType(BudgetPeriodType.Month),
     year: getStatsForType(BudgetPeriodType.Year)
   }
@@ -274,10 +276,8 @@ const formatMoney = (val) => {
 
 const getPeriodLabel = (type) => {
   const map = {
-    [BudgetPeriodType.Week]: '本周',
     [BudgetPeriodType.Month]: '本月',
-    [BudgetPeriodType.Year]: '本年',
-    [BudgetPeriodType.Longterm]: '长期'
+    [BudgetPeriodType.Year]: '本年'
   }
   return map[type] || '周期'
 }
@@ -298,18 +298,11 @@ const getIncomeProgressColor = (budget) => {
 const refDateMap = {}
 
 const handleSwitchPeriod = async (budget, direction) => {
-  if (budget.type === BudgetPeriodType.Longterm) {
-    showToast('长期预算不支持切换周期')
-    return
-  }
-
   // 获取或初始化该预算的参考日期
   let currentRefDate = refDateMap[budget.id] || new Date()
   const date = new Date(currentRefDate)
 
-  if (budget.type === BudgetPeriodType.Week) {
-    date.setDate(date.getDate() + direction * 7)
-  } else if (budget.type === BudgetPeriodType.Month) {
+  if (budget.type === BudgetPeriodType.Month) {
     date.setMonth(date.getMonth() + direction)
   } else if (budget.type === BudgetPeriodType.Year) {
     date.setFullYear(date.getFullYear() + direction)
@@ -362,6 +355,27 @@ const handleToggleStop = async (budget) => {
 </script>
 
 <style scoped>
+.budget-tabs {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+:deep(.van-tabs__content) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+:deep(.van-tab__panel) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
 .budget-list {
   padding-top: 8px;
   padding-bottom: 20px;