封装调整

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;