封装调整

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;

Web/src/views/PeriodicRecord.vue

@@ -192,36 +192,11 @@
               </template>
             </van-field>
             
-            <!-- 分类按钮网格 -->
-            <div class="classify-buttons">
-              <van-button
-                type="success"
-                size="small"
-                class="classify-btn"
-                @click="addClassifyDialogRef.open()"
-              >
-                + 新增
-              </van-button>
-              <van-button
-                v-for="item in classifyColumns"
-                :key="item.id"
-                :type="form.classify === item.text ? 'primary' : 'default'"
-                size="small"
-                class="classify-btn"
-                @click="selectClassify(item.text)"
-              >
-                {{ item.text }}
-              </van-button>
-              <van-button
-                v-if="form.classify"
-                type="warning"
-                size="small"
-                class="classify-btn"
-                @click="clearClassify"
-              >
-                清空
-              </van-button>
-            </div>
+            <!-- 分类选择组件 -->
+            <ClassifySelector
+              v-model="form.classify"
+              :type="form.type"
+            />
         </van-cell-group>
       </van-form>
       <template #footer>
@@ -257,12 +232,6 @@
         @cancel="showMonthDaysPicker = false"
       />
     </van-popup>
-
-    <!-- 新增分类对话框 -->
-    <AddClassifyDialog
-      ref="addClassifyDialogRef"
-      @confirm="handleAddClassify"
-    />
   </div>
 </template>
 
@@ -275,13 +244,11 @@ import {
   deletePeriodic as deletePeriodicApi,
   togglePeriodicEnabled
 } from '@/api/transactionPeriodic'
-import { getCategoryList, createCategory } from '@/api/transactionCategory'
 import PopupContainer from '@/components/PopupContainer.vue'
-import AddClassifyDialog from '@/components/AddClassifyDialog.vue'
+import ClassifySelector from '@/components/ClassifySelector.vue'
 
 const router = useRouter()
 const navTitle = ref('周期账单')
-const addClassifyDialogRef = ref()
 
 const periodicList = ref([])
 const loading = ref(false)
@@ -299,9 +266,6 @@ const showPeriodicTypePicker = ref(false)
 const showWeekdaysPicker = ref(false)
 const showMonthDaysPicker = ref(false)
 
-// 分类列表
-const classifyColumns = ref([])
-
 // 周期类型
 const periodicTypeColumns = [
   { text: '每天', value: 0 },
@@ -459,24 +423,6 @@ const openAddDialog = () => {
   isEdit.value = false
   resetForm()
   dialogVisible.value = true
-  // 加载分类列表
-  loadClassifyList(form.type)
-}
-
-// 加载分类列表
-const loadClassifyList = async (type = null) => {
-  try {
-    const response = await getCategoryList(type)
-    if (response.success) {
-      classifyColumns.value = (response.data || []).map(item => ({
-        text: item.name,
-        value: item.name,
-        id: item.id
-      }))
-    }
-  } catch (error) {
-    console.error('加载分类列表出错:', error)
-  }
 }
 
 // 编辑
@@ -490,9 +436,6 @@ const editPeriodic = (item) => {
   form.periodicType = item.periodicType
   form.periodicTypeText = periodicTypeColumns.find(t => t.value === item.periodicType)?.text || ''
   
-  // 加载对应类型的分类列表
-  loadClassifyList(item.type)
-  
   // 解析周期配置
   if (item.periodicConfig) {
     switch (item.periodicType) {
@@ -607,40 +550,6 @@ const onMonthDaysConfirm = ({ selectedValues, selectedOptions }) => {
   showMonthDaysPicker.value = false
 }
 
-// 选择分类
-const selectClassify = (classify) => {
-  form.classify = classify
-}
-
-// 清空分类
-const clearClassify = () => {
-  form.classify = ''
-  showToast('已清空分类')
-}
-
-// 新增分类
-const handleAddClassify = async (categoryName) => {
-  try {
-    // 调用API创建分类
-    const response = await createCategory({
-      name: categoryName,
-      type: form.type
-    })
-    
-    if (response.success) {
-      showToast('分类创建成功')
-      // 重新加载分类列表
-      await loadClassifyList(form.type)
-      form.classify = categoryName
-    } else {
-      showToast(response.message || '创建分类失败')
-    }
-  } catch (error) {
-    console.error('创建分类出错:', error)
-    showToast('创建分类失败')
-  }
-}
-
 </script>
 
 <style scoped>
@@ -679,17 +588,4 @@ const handleAddClassify = async (categoryName) => {
   height: 100%;
 }
 
-.classify-buttons {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  padding: 12px 16px;
-}
-
-.classify-btn {
-  flex: 0 0 auto;
-  min-width: 70px;
-  border-radius: 16px;
-}
-
 </style>