feat: 更新预算卡片组件，添加预算描述功能并优化状态标签显示

Web/src/components/Budget/BudgetCard.vue

@@ -7,13 +7,29 @@
             <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>
+                <van-tag 
+                  :type="budget.type ===  BudgetPeriodType.Year ? 'warning' : 'primary'"
+                  plain
+                  class="status-tag"
+                >
+                  {{ budget.type ===  BudgetPeriodType.Year ? '年度预算' : '月度预算' }}
+                </van-tag>
               </slot>
             </div>
             <div class="header-actions">
               <slot name="actions">
                 <van-button 
+                  v-if="budget.description"
+                  :icon="showDescription ? 'info' : 'info-o'" 
+                  size="mini" 
+                  :type="showDescription ? 'primary' : 'default'"
+                  plain 
+                  round
+                  style="margin-right: 4px;"
+                  @click.stop="showDescription = !showDescription" 
+                />
+                <van-button 
+                  v-if="budget.category !== 2"
                   :icon="budget.isStopped ? 'play' : 'pause'" 
                   size="mini" 
                   plain 
@@ -51,6 +67,12 @@
               />
               <span class="percent">{{ timePercentage }}%</span>
             </div>
+
+            <van-collapse-transition>
+              <div v-if="budget.description && showDescription" class="budget-description">
+                <div class="description-content" v-html="budget.description"></div>
+              </div>
+            </van-collapse-transition>
           </div>
 
           <div class="card-footer">
@@ -89,14 +111,6 @@ const props = defineProps({
     type: Object,
     required: true
   },
-  statusTagType: {
-    type: String,
-    default: 'success'
-  },
-  statusTagText: {
-    type: String,
-    default: '进行中'
-  },
   progressColor: {
     type: String,
     default: '#1989fa'
@@ -114,6 +128,7 @@ const props = defineProps({
 const emit = defineEmits(['toggle-stop', 'switch-period', 'click'])
 
 const transitionName = ref('slide-left')
+const showDescription = ref(false)
 
 const handleSwitch = (direction) => {
   transitionName.value = direction > 0 ? 'slide-left' : 'slide-right'
@@ -278,6 +293,91 @@ const timePercentage = computed(() => {
   font-size: 11px;
 }
 
+.budget-description {
+  margin-top: 8px;
+  background-color: #f7f8fa;
+  border-radius: 4px;
+  padding: 8px;
+}
+
+.description-content {
+  font-size: 11px;
+  color: #646566;
+  line-height: 1.4;
+}
+
+.description-content :deep(h3) {
+  margin: 12px 0 6px;
+  font-size: 13px;
+  color: #323233;
+  border-left: 3px solid #1989fa;
+  padding-left: 8px;
+}
+
+.description-content :deep(table) {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 8px 0;
+  background: #fff;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.description-content :deep(th),
+.description-content :deep(td) {
+  text-align: left;
+  padding: 6px 4px;
+  border-bottom: 1px solid #f2f3f5;
+}
+
+.description-content :deep(th) {
+  background-color: #f7f8fa;
+  color: #969799;
+  font-weight: normal;
+  font-size: 10px;
+}
+
+.description-content :deep(p) {
+  margin: 4px 0;
+}
+
+.description-content :deep(.income-value) {
+  color: #07c160;
+}
+
+.description-content :deep(.expense-value) {
+  color: #ee0a24;
+}
+
+.description-content :deep(.highlight) {
+  background-color: #fffbe6;
+  color: #ed6a0c;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-weight: bold;
+  border: 1px solid #ffe58f;
+}
+
+@media (prefers-color-scheme: dark) {
+  .description-content :deep(h3) {
+    color: #f5f5f5;
+  }
+  .description-content :deep(table) {
+    background: #1a1a1a;
+  }
+  .description-content :deep(th) {
+    background-color: #242424;
+  }
+  .description-content :deep(td) {
+    border-bottom-color: #2c2c2c;
+  }
+  .description-content :deep(.highlight) {
+    background-color: #3e371a;
+    color: #ff976a;
+    border-color: #594a1a;
+  }
+}
+
 .card-footer {
   display: flex;
   justify-content: space-between;
@@ -314,5 +414,11 @@ const timePercentage = computed(() => {
   .period-text {
     color: #f5f5f5;
   }
+  .budget-description {
+    background-color: #2c2c2c;
+  }
+  .description-content {
+    color: #969799;
+  }
 }
 </style>

Web/src/views/BudgetView.vue

@@ -89,7 +89,6 @@
                   :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({
@@ -138,19 +137,9 @@
                   progress-color="#07c160"
                   :percent-class="{ 'income': (budget.current / budget.limit) >= 1 }"
                   :period-label="getPeriodLabel(budget.type)"
-                  status-tag-text="积累中"
                   style="margin: 0 12px 12px;"
-                  @toggle-stop="handleToggleStop"
                   @switch-period="(dir) => handleSwitchPeriod(budget, dir)"
                 >
-                  <template #tag>
-                    <!-- 占位，避免显示停止/恢复按钮 -->
-                    <span />
-                  </template>
-                  <template #actions>
-                    <!-- 占位，避免显示停止/恢复按钮 -->
-                    <span />
-                  </template>
                   <template #amount-info>
                     <div class="info-item">
                       <div class="label">已存</div>

WebApi/Controllers/BudgetController.cs

@@ -16,7 +16,7 @@ public class BudgetController(
         try
         {
             var budgets = await budgetService.GetAllAsync();
-            var dtos = new List<BudgetDto>();
+            var dtos = new List<BudgetDto?>();
 
             foreach (var budget in budgets)
             {
@@ -25,10 +25,16 @@ public class BudgetController(
             }
 
             // 创造虚拟的存款预算
-            dtos.Add(await GetVirtualSavingsDtoAsync(BudgetPeriodType.Month, referenceDate));
-            dtos.Add(await GetVirtualSavingsDtoAsync(BudgetPeriodType.Year, referenceDate));
+            dtos.Add(await GetVirtualSavingsDtoAsync(
+                BudgetPeriodType.Month, 
+                referenceDate,
+                budgets));
+            dtos.Add(await GetVirtualSavingsDtoAsync(
+                BudgetPeriodType.Year, 
+                referenceDate,
+                budgets));
 
-            return dtos.Ok();
+            return dtos.Where(dto => dto != null).Cast<BudgetDto>().ToList().Ok();
         }
         catch (Exception ex)
         {
@@ -47,11 +53,11 @@ public class BudgetController(
         {
             if (id == -1)
             {
-                return (await GetVirtualSavingsDtoAsync(BudgetPeriodType.Year, referenceDate)).Ok();
+                return (await GetVirtualSavingsDtoAsync(BudgetPeriodType.Year, referenceDate))!.Ok();
             }
             if (id == -2)
             {
-                return (await GetVirtualSavingsDtoAsync(BudgetPeriodType.Month, referenceDate)).Ok();
+                return (await GetVirtualSavingsDtoAsync(BudgetPeriodType.Month, referenceDate))!.Ok();
             }
 
             var budget = await budgetService.GetByIdAsync(id);
@@ -161,14 +167,31 @@ public class BudgetController(
         }
     }
 
-    private async Task<BudgetDto> GetVirtualSavingsDtoAsync(BudgetPeriodType periodType, DateTime? referenceDate = null)
+    private async Task<BudgetDto?> GetVirtualSavingsDtoAsync(
+        BudgetPeriodType periodType, 
+        DateTime? referenceDate = null,
+        List<BudgetRecord>? existingBudgets = null)
     {
-        var allBudgets = await budgetService.GetAllAsync();
+        var allBudgets = existingBudgets;
+
+        if(existingBudgets == null)
+        {
+            allBudgets = await budgetService.GetAllAsync();
+        }
+
+        if(allBudgets == null)
+        {
+            return null;
+        }
+
         var date = referenceDate ?? DateTime.Now;
 
         decimal incomeLimitAtPeriod = 0;
         decimal expenseLimitAtPeriod = 0;
         
+        var incomeItems = new List<(string Name, decimal Limit, decimal Factor, decimal Total)>();
+        var expenseItems = new List<(string Name, decimal Limit, decimal Factor, decimal Total)>();
+
         foreach (var b in allBudgets)
         {
             if (b.IsStopped || b.Category == BudgetCategory.Savings) continue;
@@ -190,7 +213,7 @@ public class BudgetController(
                 factor = b.Type switch
                 {
                     BudgetPeriodType.Month => 1,
-                    BudgetPeriodType.Year => 1m / 12m,
+                    BudgetPeriodType.Year => 0,
                     _ => 0
                 };
             }
@@ -199,9 +222,51 @@ public class BudgetController(
                 factor = 0; // 其他周期暂不计算虚拟存款
             }
 
-            if (b.Category == BudgetCategory.Income) incomeLimitAtPeriod += b.Limit * factor;
-            else if (b.Category == BudgetCategory.Expense) expenseLimitAtPeriod += b.Limit * factor;
+            if (factor <= 0) continue;
+
+            var subtotal = b.Limit * factor;
+            if (b.Category == BudgetCategory.Income)
+            {
+                incomeLimitAtPeriod += subtotal;
+                incomeItems.Add((b.Name, b.Limit, factor, subtotal));
             }
+            else if (b.Category == BudgetCategory.Expense)
+            {
+                expenseLimitAtPeriod += subtotal;
+                expenseItems.Add((b.Name, b.Limit, factor, subtotal));
+            }
+        }
+
+        var description = new StringBuilder();
+        description.Append("<h3>预算收入明细</h3>");
+        if (incomeItems.Count == 0) description.Append("<p>无收入预算</p>");
+        else
+        {
+            description.Append("<table><thead><tr><th>名称</th><th>金额</th><th>折算</th><th>合计</th></tr></thead><tbody>");
+            foreach (var item in incomeItems)
+            {
+                description.Append($"<tr><td>{item.Name}</td><td>{item.Limit:N0}</td><td>x{item.Factor:0.##}</td><td><span class='income-value'>{item.Total:N0}</span></td></tr>");
+            }
+            description.Append("</tbody></table>");
+        }
+        description.Append($"<p>收入合计: <span class='income-value'><strong>{incomeLimitAtPeriod:N0}</strong></span></p>");
+
+        description.Append("<h3>预算支出明细</h3>");
+        if (expenseItems.Count == 0) description.Append("<p>无支出预算</p>");
+        else
+        {
+            description.Append("<table><thead><tr><th>名称</th><th>金额</th><th>折算</th><th>合计</th></tr></thead><tbody>");
+            foreach (var item in expenseItems)
+            {
+                description.Append($"<tr><td>{item.Name}</td><td>{item.Limit:N0}</td><td>x{item.Factor:0.##}</td><td><span class='expense-value'>{item.Total:N0}</span></td></tr>");
+            }
+            description.Append("</tbody></table>");
+        }
+        description.Append($"<p>支出合计: <span class='expense-value'><strong>{expenseLimitAtPeriod:N0}</strong></span></p>");
+
+        description.Append("<h3>存款计划结论</h3>");
+        description.Append($"<p>计划存款 = 收入 <span class='income-value'>{incomeLimitAtPeriod:N0}</span> - 支出 <span class='expense-value'>{expenseLimitAtPeriod:N0}</span></p>");
+        description.Append($"<p>最终目标：<span class='highlight'><strong>{incomeLimitAtPeriod - expenseLimitAtPeriod:N0}</strong></span></p>");
 
         var savingsCategories = await configService.GetConfigByKeyAsync<string>("SavingsCategories") ?? string.Empty;
         var virtualBudget = new BudgetRecord
@@ -222,7 +287,7 @@ public class BudgetController(
         var actualIncome = await budgetService.CalculateCurrentAmountAsync(incomeHelper, date);
         var actualExpense = await budgetService.CalculateCurrentAmountAsync(expenseHelper, date);
 
-        return BudgetDto.FromEntity(virtualBudget, actualIncome - actualExpense, date);
+        return BudgetDto.FromEntity(virtualBudget, actualIncome - actualExpense, date, description.ToString());
     }
 
     private async Task<string> ValidateBudgetSelectedCategoriesAsync(BudgetRecord record)

WebApi/Controllers/Dto/BudgetDto.cs

@@ -15,7 +15,13 @@ public class BudgetDto
     public DateTime? PeriodStart { get; set; }
     public DateTime? PeriodEnd { get; set; }
 
-    public static BudgetDto FromEntity(BudgetRecord entity, decimal currentAmount = 0, DateTime? referenceDate = null)
+    public string Description { get; set; } = string.Empty;
+
+    public static BudgetDto FromEntity(
+        BudgetRecord entity,
+        decimal currentAmount = 0,
+        DateTime? referenceDate = null,
+        string description = "")
     {
         var date = referenceDate ?? DateTime.Now;
         var (start, end) = BudgetService.GetPeriodRange(entity.StartDate, entity.Type, date);
@@ -40,7 +46,8 @@ public class BudgetDto
                 _ => $"{start:yyyy-MM-dd} ~ {end:yyyy-MM-dd}"
             },
             PeriodStart = start,
-            PeriodEnd = end
+            PeriodEnd = end,
+            Description = description
         };
     }
 }