封装调整

Web/src/components/Budget/BudgetCard.vue

@@ -41,7 +41,7 @@
                 <span class="percent" :class="percentClass">{{ percentage }}%</span>
               </slot>
             </div>
-            <div v-if="budget.type !== BudgetPeriodType.Longterm" class="progress-section time-progress">
+            <div class="progress-section time-progress">
               <span class="period-type">时间进度</span>
               <van-progress 
                 :percentage="timePercentage" 
@@ -126,7 +126,7 @@ const percentage = computed(() => {
 })
 
 const timePercentage = computed(() => {
-  if (!props.budget.periodStart || !props.budget.periodEnd || props.budget.type === BudgetPeriodType.Longterm) return 0
+  if (!props.budget.periodStart || !props.budget.periodEnd) return 0
   const start = new Date(props.budget.periodStart).getTime()
   const end = new Date(props.budget.periodEnd).getTime()
   const now = new Date().getTime()

Web/src/components/Budget/BudgetEditPopup.vue

@@ -17,7 +17,6 @@
           <van-field name="type" label="统计周期">
             <template #input>
               <van-radio-group v-model="form.type" direction="horizontal">
-                <van-radio :name="BudgetPeriodType.Week">周</van-radio>
                 <van-radio :name="BudgetPeriodType.Month">月</van-radio>
                 <van-radio :name="BudgetPeriodType.Year">年</van-radio>
               </van-radio-group>
@@ -45,29 +44,13 @@
               </div>
             </template>
           </van-field>
-          <div class="classify-buttons">
-            <van-button
-              v-if="filteredCategories.length > 0"
-              :type="isAllSelected ? 'primary' : 'default'"
-              size="small"
-              class="classify-btn all-btn"
-              @click="toggleAll"
-            >
-              {{ isAllSelected ? '取消全选' : '全选' }}
-            </van-button>
-            <van-button
-              v-for="item in filteredCategories"
-              :key="item.id"
-              :type="form.selectedCategories.includes(item.name) ? 'primary' : 'default'"
-              size="small"
-              class="classify-btn"
-              @click="toggleCategory(item.name)"
-            >
-              {{ item.name }}
-            </van-button>
-            <div v-if="filteredCategories.length === 0" class="no-data">暂无分类</div>
-          </div>
-          
+          <ClassifySelector
+            v-model="form.selectedCategories"
+            :type="budgetType"
+            multiple
+            :show-add="false"
+            :show-clear="false"
+          />
         </van-cell-group>
       </van-form>
     </div>
@@ -78,19 +61,18 @@
 </template>
 
 <script setup>
-import { ref, reactive, computed, onMounted, watch } from 'vue'
+import { ref, reactive, computed } from 'vue'
 import { showToast } from 'vant'
-import { getCategoryList } from '@/api/transactionCategory'
 import { createBudget, updateBudget } from '@/api/budget'
 import { BudgetPeriodType, BudgetCategory } from '@/constants/enums'
 import PopupContainer from '@/components/PopupContainer.vue'
+import ClassifySelector from '@/components/ClassifySelector.vue'
 
 const emit = defineEmits(['success'])
 
 const visible = ref(false)
 const isEdit = ref(false)
 
-const categories = ref([])
 const form = reactive({
   id: undefined,
   name: '',
@@ -137,44 +119,10 @@ defineExpose({
   open
 })
 
-const filteredCategories = computed(() => {
-  const targetType = form.category === BudgetCategory.Expense ? 0 : (form.category === BudgetCategory.Income ? 1 : 2)
-  return categories.value.filter(c => c.type === targetType)
+const budgetType = computed(() => {
+  return form.category === BudgetCategory.Expense ? 0 : (form.category === BudgetCategory.Income ? 1 : 2)
 })
 
-const isAllSelected = computed(() => {
-  return filteredCategories.value.length > 0 && 
-         filteredCategories.value.every(c => form.selectedCategories.includes(c.name))
-})
-
-const toggleCategory = (name) => {
-  const index = form.selectedCategories.indexOf(name)
-  if (index > -1) {
-    form.selectedCategories.splice(index, 1)
-  } else {
-    form.selectedCategories.push(name)
-  }
-}
-
-const toggleAll = () => {
-  if (isAllSelected.value) {
-    form.selectedCategories = []
-  } else {
-    form.selectedCategories = filteredCategories.value.map(c => c.name)
-  }
-}
-
-const fetchCategories = async () => {
-  try {
-    const res = await getCategoryList()
-    if (res.success) {
-      categories.value = res.data || []
-    }
-  } catch (err) {
-    console.error('获取分类列表失败', err)
-  }
-}
-
 const onSubmit = async () => {
   try {
     const data = {
@@ -207,10 +155,6 @@ const getCategoryName = (category) => {
       return ''
   }
 }
-
-onMounted(() => {
-  fetchCategories()
-})
 </script>
 
 <style scoped>
@@ -235,29 +179,9 @@ onMounted(() => {
   width: 100%;
 }
 
-.classify-buttons {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  padding: 12px 16px;
-  overflow-y: auto;
-}
-
-.classify-btn {
-  flex: 0 0 auto;
-  min-width: 60px;
-  border-radius: 16px;
-  padding: 0 12px;
-}
-
-.all-btn {
-  font-weight: bold;
-  border-style: dashed;
-}
-
 .no-data {
   font-size: 13px;
   color: #969799;
-  padding: 8px 0;
+  padding: 8px 16px;
 }
 </style>

Web/src/components/Budget/BudgetSummary.vue

@@ -30,7 +30,6 @@ const props = defineProps({
 })
 
 const periodConfigs = {
-  week: { label: '本周', showDivider: true },
   month: { label: '本月', showDivider: true },
   year: { label: '年度', showDivider: false }
 }

Web/src/components/Budget/SavingsConfigPopup.vue

@@ -11,29 +11,13 @@
 
       <div class="category-section">
         <div class="section-title">可多选分类</div>
-        <div class="classify-buttons">
-          <van-button
-            v-if="incomeCategories.length > 0"
-            :type="isAllSelected ? 'primary' : 'default'"
-            size="small"
-            class="classify-btn all-btn"
-            @click="toggleAll"
-          >
-            {{ isAllSelected ? '取消全选' : '全选' }}
-          </van-button>
-          <van-button
-            v-for="item in incomeCategories"
-            :key="item.id"
-            :type="selectedCategories.includes(item.name) ? 'primary' : 'default'"
-            size="small"
-            class="classify-btn"
-            style="margin-bottom: 8px; margin-right: 8px;"
-            @click="toggleCategory(item.name)"
-          >
-            {{ item.name }}
-          </van-button>
-          <div v-if="incomeCategories.length === 0" class="no-data">暂无收入分类</div>
-        </div>
+        <ClassifySelector
+          v-model="selectedCategories"
+          :type="2"
+          multiple
+          :show-add="false"
+          :show-clear="false"
+        />
       </div>
     </div>
     
@@ -44,21 +28,19 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref } from 'vue'
 import { showToast, showLoadingToast, closeToast } from 'vant'
-import { getCategoryList } from '@/api/transactionCategory'
 import { getConfig, setConfig } from '@/api/config'
 import PopupContainer from '@/components/PopupContainer.vue'
+import ClassifySelector from '@/components/ClassifySelector.vue'
 
 const emit = defineEmits(['success'])
 
 const visible = ref(false)
-const categories = ref([])
 const selectedCategories = ref([])
 
 const open = async () => {
   visible.value = true
-  await fetchCategories()
   await fetchConfig()
 }
 
@@ -66,43 +48,6 @@ defineExpose({
   open
 })
 
-const incomeCategories = computed(() => {
-  return categories.value.filter(c => c.type === 1) // Income = 1
-})
-
-const isAllSelected = computed(() => {
-  return incomeCategories.value.length > 0 && 
-         incomeCategories.value.every(c => selectedCategories.value.includes(c.name))
-})
-
-const toggleCategory = (name) => {
-  const index = selectedCategories.value.indexOf(name)
-  if (index > -1) {
-    selectedCategories.value.splice(index, 1)
-  } else {
-    selectedCategories.value.push(name)
-  }
-}
-
-const toggleAll = () => {
-  if (isAllSelected.value) {
-    selectedCategories.value = []
-  } else {
-    selectedCategories.value = incomeCategories.value.map(c => c.name)
-  }
-}
-
-const fetchCategories = async () => {
-  try {
-    const res = await getCategoryList()
-    if (res.success) {
-      categories.value = res.data || []
-    }
-  } catch (err) {
-    console.error('获取分类列表失败', err)
-  }
-}
-
 const fetchConfig = async () => {
   try {
     const res = await getConfig('SavingsCategories')
@@ -156,22 +101,6 @@ const onSubmit = async () => {
   margin-bottom: 12px;
 }
 
-.classify-buttons {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.classify-btn {
-  margin-bottom: 8px;
-  margin-right: 8px;
-  border-radius: 20px;
-  min-width: 60px;
-}
-
-.all-btn {
-  border-style: dashed;
-}
-
 .no-data {
   text-align: center;
   color: #969799;