feat: 添加存款分类设置功能，优化预算管理界面

Web/src/components/Budget/SavingsConfigPopup.vue

@@ -0,0 +1,181 @@
+<template>
+  <PopupContainer 
+    v-model="visible" 
+    title="设置存款分类" 
+    height="60%"
+  >
+    <div class="savings-config-content">
+      <div class="config-header">
+        <p class="subtitle">这些分类的统计值将计入“存款”中</p>
+      </div>
+
+      <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>
+      </div>
+    </div>
+    
+    <template #footer>
+      <van-button block round type="primary" @click="onSubmit">保存配置</van-button>
+    </template>
+  </PopupContainer>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } 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'
+
+const emit = defineEmits(['success'])
+
+const visible = ref(false)
+const categories = ref([])
+const selectedCategories = ref([])
+
+const open = async () => {
+  visible.value = true
+  await fetchCategories()
+  await fetchConfig()
+}
+
+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')
+    if (res.success && res.data) {
+      selectedCategories.value = res.data.split(',').filter(x => x)
+    } else {
+      selectedCategories.value = []
+    }
+  } catch (err) {
+    console.error('获取配置失败', err)
+  }
+}
+
+const onSubmit = async () => {
+  showLoadingToast({ message: '保存中...', forbidClick: true })
+  try {
+    const value = selectedCategories.value.join(',')
+    const res = await setConfig('SavingsCategories', value)
+    if (res.success) {
+      showToast('配置已保存')
+      visible.value = false
+      emit('success')
+    }
+  } catch (err) {
+    console.error('保存配置失败', err)
+    showToast('保存失败')
+  } finally {
+    closeToast()
+  }
+}
+</script>
+
+<style scoped>
+.savings-config-content {
+  padding: 16px;
+}
+
+.config-header {
+  margin-bottom: 20px;
+}
+
+.subtitle {
+  font-size: 14px;
+  color: #969799;
+  margin: 0;
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 500;
+  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;
+  width: 100%;
+  padding: 20px 0;
+}
+</style>