From 620effd1f85ef03e16cd318956bd7eb1b7e98444 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E8=AF=9A?= <cheng2.sun@ly.com>
Date: Wed, 7 Jan 2026 17:33:50 +0800
Subject: [PATCH] feat: add budget update functionality and enhance budget
 management UI

- Implemented UpdateAsync method in BudgetController for updating budget details.
- Created UpdateBudgetDto for handling budget update requests.
- Added BudgetCard component for displaying budget information with progress tracking.
- Developed BudgetEditPopup component for creating and editing budget entries.
- Introduced BudgetSummary component for summarizing budget statistics by period.
- Enhanced budget period display logic in BudgetDto to support various timeframes.
---
 Service/BudgetService.cs                      |   4 +-
 Web/src/api/budget.js                         |  12 +
 Web/src/components/Budget/BudgetCard.vue      | 219 ++++++
 Web/src/components/Budget/BudgetEditPopup.vue | 267 +++++++
 Web/src/components/Budget/BudgetSummary.vue   | 105 +++
 Web/src/views/BudgetView.vue                  | 704 +++---------------
 WebApi/Controllers/BudgetController.cs        |  32 +
 WebApi/Controllers/Dto/BudgetDto.cs           |  16 +-
 8 files changed, 759 insertions(+), 600 deletions(-)
 create mode 100644 Web/src/components/Budget/BudgetCard.vue
 create mode 100644 Web/src/components/Budget/BudgetEditPopup.vue
 create mode 100644 Web/src/components/Budget/BudgetSummary.vue

diff --git a/Service/BudgetService.cs b/Service/BudgetService.cs
index d9a56f9..c9ba9a3 100644
--- a/Service/BudgetService.cs
+++ b/Service/BudgetService.cs
@@ -12,8 +12,8 @@ public interface IBudgetService
 }
 
 public class BudgetService(
-    IBudgetRepository budgetRepository,
-    ILogger<BudgetService> logger) : IBudgetService
+    IBudgetRepository budgetRepository
+) : IBudgetService
 {
     public async Task<List<BudgetRecord>> GetAllAsync()
     {
diff --git a/Web/src/api/budget.js b/Web/src/api/budget.js
index b9ccf5a..c1090bf 100644
--- a/Web/src/api/budget.js
+++ b/Web/src/api/budget.js
@@ -37,6 +37,18 @@ export function createBudget(data) {
   })
 }
 
+/**
+ * 更新预算
+ * @param {object} data 预算数据
+ */
+export function updateBudget(data) {
+  return request({
+    url: '/Budget/Update',
+    method: 'post',
+    data
+  })
+}
+
 /**
  * 删除预算
  * @param {number} id 预算ID
diff --git a/Web/src/components/Budget/BudgetCard.vue b/Web/src/components/Budget/BudgetCard.vue
new file mode 100644
index 0000000..e2e4cb0
--- /dev/null
+++ b/Web/src/components/Budget/BudgetCard.vue
@@ -0,0 +1,219 @@
+<template>
+  <div class="common-card budget-card" @click="$emit('click')">
+    <div class="card-header">
+      <div class="budget-info">
+        <h3 class="card-title">{{ budget.name }}</h3>
+        <slot name="tag">
+          <van-tag v-if="budget.isStopped" type="danger" size="small" plain>已停止</van-tag>
+          <van-tag v-else :type="statusTagType" size="small" plain>{{ statusTagText }}</van-tag>
+        </slot>
+      </div>
+      <div class="header-actions">
+        <slot name="actions">
+          <van-button 
+            :icon="budget.isStopped ? 'play' : 'pause'" 
+            size="mini" 
+            plain 
+            round
+            @click.stop="$emit('toggle-stop', budget)" 
+          />
+        </slot>
+      </div>
+    </div>
+    
+    <div class="budget-body">
+      <div class="amount-info">
+        <slot name="amount-info"></slot>
+      </div>
+
+      <div class="progress-section">
+        <div class="progress-info">
+          <slot name="progress-info">
+            <span class="period-type">{{ periodLabel }}进度</span>
+            <span class="percent" :class="percentClass">
+              {{ percentage }}%
+            </span>
+          </slot>
+        </div>
+        <van-progress 
+          :percentage="Math.min(percentage, 100)" 
+          stroke-width="8"
+          :color="progressColor"
+          :show-pivot="false"
+        />
+      </div>
+    </div>
+
+    <div class="card-footer">
+      <div class="period-navigation" @click.stop>
+        <van-button 
+          icon="arrow-left" 
+          class="nav-icon"
+          plain 
+          size="small"
+          style="width: 50px;"
+          @click="$emit('switch-period', -1)" 
+        />
+        <span class="period-text">{{ budget.period }}</span>
+        <van-button 
+          icon="arrow" 
+          class="nav-icon"
+          plain 
+          size="small"
+          style="width: 50px;"
+          @click="$emit('switch-period', 1)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  budget: {
+    type: Object,
+    required: true
+  },
+  statusTagType: {
+    type: String,
+    default: 'success'
+  },
+  statusTagText: {
+    type: String,
+    default: '进行中'
+  },
+  progressColor: {
+    type: String,
+    default: '#1989fa'
+  },
+  percentClass: {
+    type: [String, Object],
+    default: ''
+  },
+  periodLabel: {
+    type: String,
+    default: ''
+  }
+})
+
+defineEmits(['toggle-stop', 'switch-period', 'click'])
+
+const percentage = computed(() => {
+  if (!props.budget.limit) return 0
+  return Math.round((props.budget.current / props.budget.limit) * 100)
+})
+</script>
+
+<style scoped>
+.budget-card {
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 0;
+  padding-bottom: 8px;
+}
+
+.budget-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.card-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.header-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.amount-info {
+  display: flex;
+  justify-content: space-between;
+  margin: 16px 0;
+  text-align: center;
+}
+
+:deep(.info-item) .label {
+  font-size: 12px;
+  color: #969799;
+  margin-bottom: 4px;
+}
+
+:deep(.info-item) .value {
+  font-size: 15px;
+  font-weight: 600;
+}
+
+:deep(.value.expense) {
+  color: #ee0a24;
+}
+
+:deep(.value.income) {
+  color: #07c160;
+}
+
+.progress-section {
+  margin-bottom: 16px;
+}
+
+.progress-info {
+  display: flex;
+  justify-content: space-between;
+  font-size: 13px;
+  margin-bottom: 6px;
+  color: #646566;
+}
+
+.percent.warning {
+  color: #ff976a;
+  font-weight: bold;
+}
+
+.percent.income {
+  color: #07c160;
+  font-weight: bold;
+}
+
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #969799;
+  padding: 12px 12px 0;
+  padding-top: 8px;
+  border-top: 1px solid #ebedf0;
+}
+
+.period-navigation {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.period-text {
+  font-size: 14px;
+  font-weight: 500;
+  color: #323233;
+}
+
+.nav-icon {
+  padding: 4px;
+  font-size: 12px;
+  color: #1989fa;
+}
+
+@media (prefers-color-scheme: dark) {
+  .card-footer {
+    border-top-color: #2c2c2c;
+  }
+  .period-text {
+    color: #f5f5f5;
+  }
+}
+</style>
diff --git a/Web/src/components/Budget/BudgetEditPopup.vue b/Web/src/components/Budget/BudgetEditPopup.vue
new file mode 100644
index 0000000..9a802cb
--- /dev/null
+++ b/Web/src/components/Budget/BudgetEditPopup.vue
@@ -0,0 +1,267 @@
+<template>
+  <PopupContainer 
+    v-model="visible" 
+    :title="isEdit ? '编辑预算' : '新增预算'" 
+    height="70%"
+  >
+    <div class="add-budget-form">
+      <van-form>
+        <van-cell-group inset>
+          <van-field
+            v-model="form.name"
+            name="name"
+            label="预算名称"
+            placeholder="例如：每月餐饮、年度奖金"
+            :rules="[{ required: true, message: '请填写预算名称' }]"
+          />
+          <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 :name="BudgetPeriodType.Longterm">长期</van-radio>
+              </van-radio-group>
+            </template>
+          </van-field>
+          <van-field
+            v-model="form.limit"
+            type="number"
+            name="limit"
+            label="预算金额"
+            placeholder="0.00"
+            :rules="[{ required: true, message: '请填写预算金额' }]"
+          >
+            <template #extra>
+              <span>元</span>
+            </template>
+          </van-field>
+          <van-field name="category" label="类型">
+            <template #input>
+              <van-radio-group v-model="form.category" direction="horizontal" :disabled="isEdit">
+                <van-radio :name="BudgetCategory.Expense">支出</van-radio>
+                <van-radio :name="BudgetCategory.Income">收入</van-radio>
+                <van-radio :name="BudgetCategory.Savings">存款</van-radio>
+              </van-radio-group>
+            </template>
+          </van-field>
+          <van-field label="相关分类">
+            <template #input>
+              <div v-if="form.selectedCategories.length === 0" style="color: #c8c9cc;">可多选分类</div>
+              <div v-else class="selected-categories">
+                <span class="ellipsis-text">
+                  {{ form.selectedCategories.join('、') }}
+                </span>
+              </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>
+          
+        </van-cell-group>
+      </van-form>
+    </div>
+    <template #footer>
+        <van-button block type="primary" @click="onSubmit">保存预算</van-button>
+    </template>
+  </PopupContainer>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted, watch } 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'
+
+const props = defineProps({
+  editData: {
+    type: Object,
+    default: null
+  }
+})
+
+const emit = defineEmits(['success'])
+
+const visible = ref(false)
+const isEdit = computed(() => !!props.editData)
+
+const categories = ref([])
+const form = reactive({
+  id: undefined,
+  name: '',
+  type: BudgetPeriodType.Month,
+  category: BudgetCategory.Expense,
+  limit: '',
+  selectedCategories: []
+})
+
+const open = (data = null) => {
+  if (data) {
+    Object.assign(form, {
+      id: data.id,
+      name: data.name,
+      type: data.type,
+      category: data.category,
+      limit: data.limit,
+      selectedCategories: data.selectedCategories ? [...data.selectedCategories] : []
+    })
+  } else {
+    Object.assign(form, {
+      id: undefined,
+      name: '',
+      type: BudgetPeriodType.Month,
+      category: BudgetCategory.Expense,
+      limit: '',
+      selectedCategories: []
+    })
+  }
+  visible.value = true
+}
+
+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 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)
+  }
+}
+
+watch(() => form.category, (newVal, oldVal) => {
+  // 只有在手动切换类型且不是初始化编辑数据时才清空
+  // 为简单起见，如果旧值存在（即不是第一次赋值），则清空已选分类
+  if (oldVal !== undefined) {
+    form.selectedCategories = []
+  }
+})
+
+const onSubmit = async () => {
+  try {
+    const data = {
+      ...form,
+      limit: parseFloat(form.limit),
+      selectedCategories: form.selectedCategories
+    }
+    
+    const res = form.id ? await updateBudget(data) : await createBudget(data)
+    
+    if (res.success) {
+      showToast('保存成功')
+      visible.value = false
+      emit('success')
+    }
+  } catch (err) {
+    showToast('保存失败')
+    console.error('保存预算失败', err)
+  }
+}
+
+onMounted(() => {
+  fetchCategories()
+})
+</script>
+
+<style scoped>
+.add-budget-form {
+  padding: 20px 0;
+}
+
+.selected-categories {
+  display: flex;
+  align-items: center;
+  padding: 4px 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+.ellipsis-text {
+  font-size: 14px;
+  color: #323233;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
+.classify-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 12px 16px;
+  max-height: 200px;
+  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;
+}
+</style>
diff --git a/Web/src/components/Budget/BudgetSummary.vue b/Web/src/components/Budget/BudgetSummary.vue
new file mode 100644
index 0000000..15c44cb
--- /dev/null
+++ b/Web/src/components/Budget/BudgetSummary.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="summary-card common-card">
+    <template v-for="(config, key) in periodConfigs" :key="key">
+      <div class="summary-item">
+        <div class="label">{{ config.label }}{{ title }}率</div>
+        <div class="value" :class="getValueClass(stats[key].rate)">
+          {{ stats[key].rate }}<span class="unit">%</span>
+        </div>
+        <div class="sub-label">{{ stats[key].count }}个预算</div>
+      </div>
+      <div v-if="config.showDivider" class="divider"></div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  stats: {
+    type: Object,
+    required: true
+  },
+  title: {
+    type: String,
+    required: true
+  },
+  getValueClass: {
+    type: Function,
+    required: true
+  }
+})
+
+const periodConfigs = {
+  week: { label: '本周', showDivider: true },
+  month: { label: '本月', showDivider: true },
+  year: { label: '年度', showDivider: false }
+}
+</script>
+
+<style scoped>
+.summary-card {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  text-align: center;
+  padding: 12px 16px;
+  margin-top: 12px;
+  margin-bottom: 4px;
+}
+
+.summary-item {
+  flex: 1;
+}
+
+.summary-item .label {
+  font-size: 12px;
+  color: #969799;
+  margin-bottom: 6px;
+}
+
+.summary-item .value {
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 2px;
+  color: #323233;
+}
+
+.summary-item :deep(.value.expense) {
+  color: #ee0a24;
+}
+
+.summary-item :deep(.value.income) {
+  color: #07c160;
+}
+
+.summary-item :deep(.value.warning) {
+  color: #ff976a;
+}
+
+.summary-item .unit {
+  font-size: 11px;
+  margin-left: 1px;
+  font-weight: normal;
+}
+
+.summary-item .sub-label {
+  font-size: 11px;
+  color: #c8c9cc;
+}
+
+.divider {
+  width: 1px;
+  height: 24px;
+  background-color: #ebedf0;
+  margin: 0 4px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .summary-item .value {
+    color: #f5f5f5;
+  }
+  .divider {
+    background-color: #2c2c2c;
+  }
+}
+</style>
diff --git a/Web/src/views/BudgetView.vue b/Web/src/views/BudgetView.vue
index 822901c..5935bbe 100644
--- a/Web/src/views/BudgetView.vue
+++ b/Web/src/views/BudgetView.vue
@@ -2,7 +2,7 @@
   <div class="page-container-flex">
     <van-nav-bar title="预算管理" placeholder>
       <template #right>
-        <van-icon name="plus" size="20" @click="showAddPopup = true" />
+        <van-icon name="plus" size="20" @click="budgetEditRef.open()" />
       </template>
     </van-nav-bar>
 
@@ -10,88 +10,40 @@
       <div class="page-content">
         <van-tabs v-model:active="activeTab" sticky offset-top="0" type="card">
         <van-tab title="支出" :name="BudgetCategory.Expense">
-          <div class="summary-card common-card">
-            <div class="summary-item">
-              <div class="label">本周{{ activeTabTitle }}率</div>
-              <div class="value" :class="getValueClass(overallStats.week.rate)">
-                {{ overallStats.week.rate }}<span class="unit">%</span>
-              </div>
-              <div class="sub-label">{{ overallStats.week.count }}个预算</div>
-            </div>
-            <div class="divider"></div>
-            <div class="summary-item">
-              <div class="label">本月{{ activeTabTitle }}率</div>
-              <div class="value" :class="getValueClass(overallStats.month.rate)">
-                {{ overallStats.month.rate }}<span class="unit">%</span>
-              </div>
-              <div class="sub-label">{{ overallStats.month.count }}个预算</div>
-            </div>
-            <div class="divider"></div>
-            <div class="summary-item">
-              <div class="label">年度{{ activeTabTitle }}率</div>
-              <div class="value" :class="getValueClass(overallStats.year.rate)">
-                {{ overallStats.year.rate }}<span class="unit">%</span>
-              </div>
-              <div class="sub-label">{{ overallStats.year.count }}个预算</div>
-            </div>
-          </div>
+          <BudgetSummary 
+            :stats="overallStats" 
+            :title="activeTabTitle" 
+            :get-value-class="getValueClass" 
+          />
           <div class="budget-list">
             <template v-if="expenseBudgets?.length > 0">
               <van-swipe-cell v-for="budget in expenseBudgets" :key="budget.id">
-                <div class="common-card budget-card">
-                  <div class="card-header">
-                    <div class="budget-info">
-                      <h3 class="card-title">{{ budget.name }}</h3>
-                      <van-tag v-if="budget.isStopped" type="danger" size="small" plain>已停止</van-tag>
-                      <van-tag v-else type="success" size="small" plain>进行中</van-tag>
+                <BudgetCard 
+                  :budget="budget"
+                  :progress-color="getProgressColor(budget)"
+                  :percent-class="{ 'warning': (budget.current / budget.limit) > 0.8 }"
+                  :period-label="getPeriodLabel(budget.type)"
+                  @toggle-stop="handleToggleStop"
+                  @switch-period="(dir) => handleSwitchPeriod(budget, dir)"
+                  @click="budgetEditRef.open(budget)"
+                >
+                  <template #amount-info>
+                    <div class="info-item">
+                      <div class="label">当前</div>
+                      <div class="value expense">¥{{ formatMoney(budget.current) }}</div>
                     </div>
-                    <div class="header-actions">
-                      <van-button :icon="budget.isStopped ? 'play' : 'pause'" size="mini" plain @click="handleToggleStop(budget)" />
+                    <div class="info-item">
+                      <div class="label">预算</div>
+                      <div class="value">¥{{ formatMoney(budget.limit) }}</div>
                     </div>
-                  </div>
-                  
-                  <div class="budget-body">
-                    <div class="amount-info">
-                      <div class="info-item">
-                        <div class="label">当前</div>
-                        <div class="value expense">¥{{ formatMoney(budget.current) }}</div>
-                      </div>
-                      <div class="info-item">
-                        <div class="label">预算</div>
-                        <div class="value">¥{{ formatMoney(budget.limit) }}</div>
-                      </div>
-                      <div class="info-item">
-                        <div class="label">结余</div>
-                        <div class="value" :class="budget.limit - budget.current >= 0 ? 'income' : 'expense'">
-                          ¥{{ formatMoney(budget.limit - budget.current) }}
-                        </div>
+                    <div class="info-item">
+                      <div class="label">结余</div>
+                      <div class="value" :class="budget.limit - budget.current >= 0 ? 'income' : 'expense'">
+                        ¥{{ formatMoney(budget.limit - budget.current) }}
                       </div>
                     </div>
-
-                    <div class="progress-section">
-                      <div class="progress-info">
-                        <span class="period-type">{{ getPeriodLabel(budget.type) }}进度</span>
-                        <span class="percent" :class="{ 'warning': (budget.current / budget.limit) > 0.8 }">
-                          {{ Math.round((budget.current / budget.limit) * 100) }}%
-                        </span>
-                      </div>
-                      <van-progress 
-                        :percentage="Math.min(Math.round((budget.current / budget.limit) * 100), 100)" 
-                        stroke-width="8"
-                        :color="getProgressColor(budget)"
-                        :show-pivot="false"
-                      />
-                    </div>
-                  </div>
-
-                  <div class="card-footer">
-                    <div class="period-navigation">
-                      <van-icon name="arrow-left" class="nav-icon" @click="handleSwitchPeriod(budget, -1)" />
-                      <span class="period-text">{{ budget.period }}</span>
-                      <van-icon name="arrow" class="nav-icon" @click="handleSwitchPeriod(budget, 1)" />
-                    </div>
-                  </div>
-                </div>
+                  </template>
+                </BudgetCard>
                 <template #right>
                   <van-button square text="删除" type="danger" class="delete-button" @click="handleDelete(budget)" />
                 </template>
@@ -102,88 +54,47 @@
         </van-tab>
 
         <van-tab title="收入" :name="BudgetCategory.Income">
-          <div class="summary-card common-card">
-            <div class="summary-item">
-              <div class="label">本周{{ activeTabTitle }}率</div>
-              <div class="value" :class="getValueClass(overallStats.week.rate)">
-                {{ overallStats.week.rate }}<span class="unit">%</span>
-              </div>
-              <div class="sub-label">{{ overallStats.week.count }}个预算</div>
-            </div>
-            <div class="divider"></div>
-            <div class="summary-item">
-              <div class="label">本月{{ activeTabTitle }}率</div>
-              <div class="value" :class="getValueClass(overallStats.month.rate)">
-                {{ overallStats.month.rate }}<span class="unit">%</span>
-              </div>
-              <div class="sub-label">{{ overallStats.month.count }}个预算</div>
-            </div>
-            <div class="divider"></div>
-            <div class="summary-item">
-              <div class="label">年度{{ activeTabTitle }}率</div>
-              <div class="value" :class="getValueClass(overallStats.year.rate)">
-                {{ overallStats.year.rate }}<span class="unit">%</span>
-              </div>
-              <div class="sub-label">{{ overallStats.year.count }}个预算</div>
-            </div>
-          </div>
+          <BudgetSummary 
+            :stats="overallStats" 
+            :title="activeTabTitle" 
+            :get-value-class="getValueClass" 
+          />
           <div class="budget-list">
             <template v-if="incomeBudgets?.length > 0">
               <van-swipe-cell v-for="budget in incomeBudgets" :key="budget.id">
-                <div class="common-card budget-card">
-                  <div class="card-header">
-                    <div class="budget-info">
-                      <h3 class="card-title">{{ budget.name }}</h3>
-                      <van-tag v-if="budget.isStopped" type="danger" size="small" plain>已停止</van-tag>
-                      <van-tag v-else type="success" size="small" plain>进行中</van-tag>
+                <BudgetCard 
+                  :budget="budget"
+                  :progress-color="getIncomeProgressColor(budget)"
+                  :percent-class="{ 'income': (budget.current / budget.limit) >= 1 }"
+                  :period-label="getPeriodLabel(budget.type)"
+                  status-tag-text="进行中"
+                  @toggle-stop="handleToggleStop"
+                  @switch-period="(dir) => handleSwitchPeriod(budget, dir)"
+                  @click="budgetEditRef.open(budget)"
+                >
+                  <template #amount-info>
+                    <div class="info-item">
+                      <div class="label">当前已收</div>
+                      <div class="value income">¥{{ formatMoney(budget.current) }}</div>
                     </div>
-                    <div class="header-actions">
-                      <van-button :icon="budget.isStopped ? 'play' : 'pause'" size="mini" plain round @click="handleToggleStop(budget)" />
+                    <div class="info-item">
+                      <div class="label">目标收入</div>
+                      <div class="value">¥{{ formatMoney(budget.limit) }}</div>
                     </div>
-                  </div>
-                  
-                  <div class="budget-body">
-                    <div class="amount-info">
-                      <div class="info-item">
-                        <div class="label">当前已收</div>
-                        <div class="value income">¥{{ formatMoney(budget.current) }}</div>
-                      </div>
-                      <div class="info-item">
-                        <div class="label">目标收入</div>
-                        <div class="value">¥{{ formatMoney(budget.limit) }}</div>
-                      </div>
-                      <div class="info-item">
-                        <div class="label">差额</div>
-                        <div class="value" :class="budget.current >= budget.limit ? 'income' : 'expense'">
-                          ¥{{ formatMoney(Math.abs(budget.limit - budget.current)) }}
-                        </div>
+                    <div class="info-item">
+                      <div class="label">差额</div>
+                      <div class="value" :class="budget.current >= budget.limit ? 'income' : 'expense'">
+                        ¥{{ formatMoney(Math.abs(budget.limit - budget.current)) }}
                       </div>
                     </div>
-
-                    <div class="progress-section">
-                      <div class="progress-info">
-                        <span class="period-type">{{ getPeriodLabel(budget.type) }}达成度</span>
-                        <span class="percent" :class="{ 'income': (budget.current / budget.limit) >= 1 }">
-                          {{ Math.round((budget.current / budget.limit) * 100) }}%
-                        </span>
-                      </div>
-                      <van-progress 
-                        :percentage="Math.min(Math.round((budget.current / budget.limit) * 100), 100)" 
-                        stroke-width="8"
-                        :color="getIncomeProgressColor(budget)"
-                        :show-pivot="false"
-                      />
-                    </div>
-                  </div>
-
-                  <div class="card-footer">
-                    <div class="period-navigation">
-                      <van-icon name="arrow-left" class="nav-icon" @click="handleSwitchPeriod(budget, -1)" />
-                      <span class="period-text">{{ budget.period }}</span>
-                      <van-icon name="arrow" class="nav-icon" @click="handleSwitchPeriod(budget, 1)" />
-                    </div>
-                  </div>
-                </div>
+                  </template>
+                  <template #progress-info>
+                    <span class="period-type">{{ getPeriodLabel(budget.type) }}达成度</span>
+                    <span class="percent" :class="{ 'income': (budget.current / budget.limit) >= 1 }">
+                      {{ Math.round((budget.current / budget.limit) * 100) }}%
+                    </span>
+                  </template>
+                </BudgetCard>
                 <template #right>
                   <van-button square text="删除" type="danger" class="delete-button" @click="handleDelete(budget)" />
                 </template>
@@ -194,90 +105,46 @@
         </van-tab>
 
         <van-tab title="存款" :name="BudgetCategory.Savings">
-          <div class="summary-card common-card">
-            <div class="summary-item">
-              <div class="label">本周{{ activeTabTitle }}率</div>
-              <div class="value" :class="getValueClass(overallStats.week.rate)">
-                {{ overallStats.week.rate }}<span class="unit">%</span>
-              </div>
-              <div class="sub-label">{{ overallStats.week.count }}个预算</div>
-            </div>
-            <div class="divider"></div>
-            <div class="summary-item">
-              <div class="label">本月{{ activeTabTitle }}率</div>
-              <div class="value" :class="getValueClass(overallStats.month.rate)">
-                {{ overallStats.month.rate }}<span class="unit">%</span>
-              </div>
-              <div class="sub-label">{{ overallStats.month.count }}个预算</div>
-            </div>
-            <div class="divider"></div>
-            <div class="summary-item">
-              <div class="label">年度{{ activeTabTitle }}率</div>
-              <div class="value" :class="getValueClass(overallStats.year.rate)">
-                {{ overallStats.year.rate }}<span class="unit">%</span>
-              </div>
-              <div class="sub-label">{{ overallStats.year.count }}个预算</div>
-            </div>
-          </div>
+          <BudgetSummary 
+            :stats="overallStats" 
+            :title="activeTabTitle" 
+            :get-value-class="getValueClass" 
+          />
           <div class="budget-list">
             <template v-if="savingsBudgets?.length > 0">
               <van-swipe-cell v-for="budget in savingsBudgets" :key="budget.id">
-                <div class="common-card budget-card">
-                  <div class="card-header">
-                    <div class="budget-info">
-                      <h3 class="card-title">{{ budget.name }}</h3>
-                      <van-tag v-if="budget.isStopped" type="danger" size="small" plain>已停止</van-tag>
-                      <van-tag v-else type="success" size="small" plain>积累中</van-tag>
+                <BudgetCard 
+                  :budget="budget"
+                  progress-color="#07c160"
+                  :percent-class="{ 'income': (budget.current / budget.limit) >= 1 }"
+                  status-tag-text="积累中"
+                  @toggle-stop="handleToggleStop"
+                  @switch-period="(dir) => handleSwitchPeriod(budget, dir)"
+                  @click="budgetEditRef.open(budget)"
+                >
+                  <template #amount-info>
+                    <div class="info-item">
+                      <div class="label">已存</div>
+                      <div class="value income">¥{{ formatMoney(budget.current) }}</div>
                     </div>
-                    <div class="header-actions">
-                      <van-button :icon="budget.isStopped ? 'play' : 'pause'" size="mini" plain round @click="handleToggleStop(budget)" />
+                    <div class="info-item">
+                      <div class="label">目标</div>
+                      <div class="value">¥{{ formatMoney(budget.limit) }}</div>
                     </div>
-                  </div>
-                  
-                  <div class="budget-body">
-                    <div class="amount-info">
-                      <div class="info-item">
-                        <div class="label">已存</div>
-                        <div class="value income">¥{{ formatMoney(budget.current) }}</div>
-                      </div>
-                      <div class="info-item">
-                        <div class="label">目标</div>
-                        <div class="value">¥{{ formatMoney(budget.limit) }}</div>
-                      </div>
-                      <div class="info-item">
-                        <div class="label">还差</div>
-                        <div class="value expense">
-                          ¥{{ formatMoney(Math.max(0, budget.limit - budget.current)) }}
-                        </div>
+                    <div class="info-item">
+                      <div class="label">还差</div>
+                      <div class="value expense">
+                        ¥{{ formatMoney(Math.max(0, budget.limit - budget.current)) }}
                       </div>
                     </div>
-
-                    <div class="progress-section">
-                      <div class="progress-info">
-                        <span class="period-type">储蓄进度</span>
-                        <span class="percent" :class="{ 'income': (budget.current / budget.limit) >= 1 }">
-                          {{ Math.round((budget.current / budget.limit) * 100) }}%
-                        </span>
-                      </div>
-                      <van-progress 
-                        :percentage="Math.min(Math.round((budget.current / budget.limit) * 100), 100)" 
-                        stroke-width="8"
-                        color="#07c160"
-                        :show-pivot="false"
-                      />
-                    </div>
-                  </div>
-
-                  <div class="card-footer">
-                    <div class="period-navigation">
-                      <van-icon name="arrow-left" class="nav-icon" @click="handleSwitchPeriod(budget, -1)" />
-                      <span class="period-text">
-                        {{ budget.period }}
-                      </span>
-                      <van-icon name="arrow" class="nav-icon" @click="handleSwitchPeriod(budget, 1)" />
-                    </div>
-                  </div>
-                </div>
+                  </template>
+                  <template #progress-info>
+                    <span class="period-type">储蓄进度</span>
+                    <span class="percent" :class="{ 'income': (budget.current / budget.limit) >= 1 }">
+                      {{ Math.round((budget.current / budget.limit) * 100) }}%
+                    </span>
+                  </template>
+                </BudgetCard>
                 <template #right>
                   <van-button square text="删除" type="danger" class="delete-button" @click="handleDelete(budget)" />
                 </template>
@@ -290,105 +157,27 @@
       <!-- 底部安全距离 -->
       <div style="height: calc(50px + env(safe-area-inset-bottom, 0px))"></div>
     </div>
-  </div>
 
-    <!-- 添加预算弹窗 -->
-    <PopupContainer v-model="showAddPopup" title="新增预算" height="70%">
-      <div class="add-budget-form">
-        <van-form>
-          <van-cell-group inset>
-            <van-field
-              v-model="form.name"
-              name="name"
-              label="预算名称"
-              placeholder="例如：每月餐饮、年度奖金"
-              :rules="[{ required: true, message: '请填写预算名称' }]"
-            />
-            <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 :name="BudgetPeriodType.Longterm">长期</van-radio>
-                </van-radio-group>
-              </template>
-            </van-field>
-            <van-field
-              v-model="form.limit"
-              type="number"
-              name="limit"
-              label="预算金额"
-              placeholder="0.00"
-              :rules="[{ required: true, message: '请填写预算金额' }]"
-            >
-              <template #extra>
-                <span>元</span>
-              </template>
-            </van-field>
-            <van-field name="category" label="类型">
-              <template #input>
-                <van-radio-group v-model="form.category" direction="horizontal">
-                  <van-radio :name="BudgetCategory.Expense">支出</van-radio>
-                  <van-radio :name="BudgetCategory.Income">收入</van-radio>
-                  <van-radio :name="BudgetCategory.Savings">存款</van-radio>
-                </van-radio-group>
-              </template>
-            </van-field>
-            <van-field label="相关分类">
-              <template #input>
-                <div v-if="form.selectedCategories.length === 0" style="color: #c8c9cc;">可多选分类</div>
-                <div v-else class="selected-categories">
-                  <span class="ellipsis-text">
-                    {{ form.selectedCategories.join('、') }}
-                  </span>
-                </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>
-            
-          </van-cell-group>
-        </van-form>
-      </div>
-      <template #footer>
-          <van-button block type="primary" @click="onSubmit">保存预算</van-button>
-      </template>
-    </PopupContainer>
+    <!-- 添加/编辑预算弹窗 -->
+    <BudgetEditPopup 
+      ref="budgetEditRef"
+      @success="fetchBudgetList" 
+    />
+    </div>
   </div>
 </template>
 
 <script setup>
 import { ref, reactive, computed, onMounted, watch } from 'vue'
 import { showToast, showConfirmDialog } from 'vant'
-import { getCategoryList } from '@/api/transactionCategory'
-import { getBudgetList, createBudget, deleteBudget, toggleStopBudget, getBudgetStatistics } from '@/api/budget'
+import { getBudgetList, deleteBudget, toggleStopBudget, getBudgetStatistics } from '@/api/budget'
 import { BudgetPeriodType, BudgetCategory } from '@/constants/enums'
-import PopupContainer from '@/components/PopupContainer.vue'
+import BudgetCard from '@/components/Budget/BudgetCard.vue'
+import BudgetSummary from '@/components/Budget/BudgetSummary.vue'
+import BudgetEditPopup from '@/components/Budget/BudgetEditPopup.vue'
 
 const activeTab = ref(BudgetCategory.Expense)
-const showAddPopup = ref(false)
-const categories = ref([])
+const budgetEditRef = ref(null)
 
 const expenseBudgets = ref([])
 const incomeBudgets = ref([])
@@ -441,41 +230,6 @@ const getValueClass = (rate) => {
   }
 }
 
-const form = reactive({
-  name: '',
-  type: BudgetPeriodType.Month,
-  category: BudgetCategory.Expense,
-  limit: '',
-  selectedCategories: []
-})
-
-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 toggleCategory = (name) => {
-  const index = form.selectedCategories.indexOf(name)
-  if (index > -1) {
-    form.selectedCategories.splice(index, 1)
-  } else {
-    form.selectedCategories.push(name)
-  }
-}
-
-const isAllSelected = computed(() => {
-  return filteredCategories.value.length > 0 && 
-         filteredCategories.value.every(c => form.selectedCategories.includes(c.name))
-})
-
-const toggleAll = () => {
-  if (isAllSelected.value) {
-    form.selectedCategories = []
-  } else {
-    form.selectedCategories = filteredCategories.value.map(c => c.name)
-  }
-}
-
 const fetchBudgetList = async () => {
   try {
     const res = await getBudgetList()
@@ -492,22 +246,12 @@ const fetchBudgetList = async () => {
 
 onMounted(async () => {
   try {
-    const [catRes] = await Promise.all([
-      getCategoryList(),
-      fetchBudgetList()
-    ])
-    if (catRes.success) {
-      categories.value = catRes.data || []
-    }
+    await fetchBudgetList()
   } catch (err) {
     console.error('获取初始化数据失败', err)
   }
 })
 
-watch(() => form.category, () => {
-  form.selectedCategories = []
-})
-
 const formatMoney = (val) => {
   return parseFloat(val || 0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
 }
@@ -599,28 +343,6 @@ const handleToggleStop = async (budget) => {
     console.error('切换预算状态失败', err)
   }
 }
-
-const onSubmit = async () => {
-  try {
-    const res = await createBudget({
-      ...form,
-      limit: parseFloat(form.limit),
-      categoryNames: form.selectedCategories
-    })
-    if (res.success) {
-      showToast('保存成功')
-      showAddPopup.value = false
-      fetchBudgetList()
-      // 重置表单
-      form.name = ''
-      form.limit = ''
-      form.selectedCategories = []
-    }
-  } catch (err) {
-    showToast('保存失败')
-    console.error('保存预算失败', err)
-  }
-}
 </script>
 
 <style scoped>
@@ -633,223 +355,11 @@ const onSubmit = async () => {
   margin: 0 12px 12px;
 }
 
-.budget-card {
-  margin-left: 0;
-  margin-right: 0;
-  margin-bottom: 0;
-}
-
-.budget-info {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.header-actions {
-  display: flex;
-  gap: 8px;
-}
-
-.amount-info {
-  display: flex;
-  justify-content: space-between;
-  margin: 16px 0;
-  text-align: center;
-}
-
-.info-item .label {
-  font-size: 12px;
-  color: #969799;
-  margin-bottom: 4px;
-}
-
-.info-item .value {
-  font-size: 15px;
-  font-weight: 600;
-}
-
-.value.expense {
-  color: #ee0a24;
-}
-
-.value.income {
-  color: #07c160;
-}
-
-.progress-section {
-  margin-bottom: 16px;
-}
-
-.progress-info {
-  display: flex;
-  justify-content: space-between;
-  font-size: 13px;
-  margin-bottom: 6px;
-  color: #646566;
-}
-
-.percent.warning {
-  color: #ff976a;
-  font-weight: bold;
-}
-
-.percent.income {
-  color: #07c160;
-  font-weight: bold;
-}
-
-.card-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 11px;
-  color: #969799;
-  padding-top: 12px;
-  border-top: 1px solid #ebedf0;
-}
-
-.period-navigation {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.nav-icon {
-  padding: 4px;
-  font-size: 12px;
-  color: #1989fa;
-  cursor: pointer;
-}
-
-.nav-icon:active {
-  opacity: 0.6;
-}
-
 .delete-button {
   height: 100%;
 }
 
-@media (prefers-color-scheme: dark) {
-  .card-footer {
-    border-top-color: #2c2c2c;
-  }
-}
-
-.add-budget-form {
-  padding: 20px 0;
-}
-
-.selected-categories {
-  display: flex;
-  align-items: center;
-  padding: 4px 0;
-  width: 100%;
-  overflow: hidden;
-}
-
-.ellipsis-text {
-  font-size: 14px;
-  color: #323233;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 100%;
-}
-
-.classify-buttons {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  padding: 12px 16px;
-  max-height: 200px;
-  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;
-}
-
 :deep(.van-tabs__nav--card) {
   margin: 0 12px;
 }
-
-.summary-card {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  text-align: center;
-  padding: 12px 16px;
-  margin-top: 12px;
-  margin-bottom: 4px;
-}
-
-.summary-item {
-  flex: 1;
-}
-
-.summary-item .label {
-  font-size: 12px;
-  color: #969799;
-  margin-bottom: 6px;
-}
-
-.summary-item .value {
-  font-size: 20px;
-  font-weight: bold;
-  margin-bottom: 2px;
-  color: #323233;
-}
-
-.summary-item .value.expense {
-  color: #ee0a24;
-}
-
-.summary-item .value.income {
-  color: #07c160;
-}
-
-.summary-item .value.warning {
-  color: #ff976a;
-}
-
-.summary-item .unit {
-  font-size: 11px;
-  margin-left: 1px;
-  font-weight: normal;
-}
-
-.summary-item .sub-label {
-  font-size: 11px;
-  color: #c8c9cc;
-}
-
-.divider {
-  width: 1px;
-  height: 24px;
-  background-color: #ebedf0;
-  margin: 0 4px;
-}
-
-@media (prefers-color-scheme: dark) {
-  .summary-item .value {
-    color: #f5f5f5;
-  }
-  .divider {
-    background-color: #2c2c2c;
-  }
-}
 </style>
diff --git a/WebApi/Controllers/BudgetController.cs b/WebApi/Controllers/BudgetController.cs
index ce07311..6c8c161 100644
--- a/WebApi/Controllers/BudgetController.cs
+++ b/WebApi/Controllers/BudgetController.cs
@@ -103,6 +103,38 @@ public class BudgetController(
         }
     }
 
+    /// <summary>
+    /// 更新预算
+    /// </summary>
+    [HttpPost]
+    public async Task<BaseResponse> UpdateAsync([FromBody] UpdateBudgetDto dto)
+    {
+        try
+        {
+            var budget = await budgetService.GetByIdAsync(dto.Id);
+            if (budget == null) return "预算不存在".Fail();
+
+            budget.Name = dto.Name;
+            budget.Type = dto.Type;
+            budget.Limit = dto.Limit;
+            budget.Category = dto.Category;
+            budget.SelectedCategories = dto.SelectedCategories != null ? string.Join(",", dto.SelectedCategories) : string.Empty;
+            budget.IsStopped = dto.IsStopped;
+            if (dto.StartDate.HasValue)
+            {
+                budget.StartDate = dto.StartDate.Value;
+            }
+
+            var success = await budgetService.UpdateAsync(budget);
+            return success ? BaseResponse.Done() : "更新预算失败".Fail();
+        }
+        catch (Exception ex)
+        {
+            logger.LogError(ex, "更新预算失败, Id: {Id}", dto.Id);
+            return $"更新预算失败: {ex.Message}".Fail();
+        }
+    }
+
     /// <summary>
     /// 切换预算暂停状态
     /// </summary>
diff --git a/WebApi/Controllers/Dto/BudgetDto.cs b/WebApi/Controllers/Dto/BudgetDto.cs
index e7dc8fb..73083bd 100644
--- a/WebApi/Controllers/Dto/BudgetDto.cs
+++ b/WebApi/Controllers/Dto/BudgetDto.cs
@@ -31,7 +31,14 @@ public class BudgetDto
                 : entity.SelectedCategories.Split(','),
             IsStopped = entity.IsStopped,
             StartDate = entity.StartDate.ToString("yyyy-MM-dd"),
-            Period = entity.Type == BudgetPeriodType.Longterm ? "长期" : $"{start:yyyy-MM-dd} ~ {end:yyyy-MM-dd}"
+            Period = entity.Type switch
+            {
+                BudgetPeriodType.Longterm => "长期",
+                BudgetPeriodType.Year => $"{start:yy}年",
+                BudgetPeriodType.Month => $"{start:yy}年第{start.Month}月",
+                BudgetPeriodType.Week => $"{start:yy}年第{System.Globalization.CultureInfo.CurrentCulture.Calendar.GetWeekOfYear(start, System.Globalization.CalendarWeekRule.FirstDay, DayOfWeek.Monday)}周",
+                _ => $"{start:yyyy-MM-dd} ~ {end:yyyy-MM-dd}"
+            }
         };
     }
 }
@@ -45,3 +52,10 @@ public class CreateBudgetDto
     public string[] SelectedCategories { get; set; } = Array.Empty<string>();
     public DateTime? StartDate { get; set; }
 }
+
+public class UpdateBudgetDto : CreateBudgetDto
+{
+    public long Id { get; set; }
+    public bool IsStopped { get; set; }
+}
+