fix

Web/src/components/Budget/BudgetChartAnalysis.vue

@@ -14,6 +14,7 @@
         <div
           ref="monthGaugeRef"
           class="chart-body gauge-chart"
+          :style="{ transform: activeTab === BudgetCategory.Expense ? 'scaleX(-1)' : '' }"
         />
         <div class="gauge-footer compact">
           <div class="gauge-item">
@@ -42,6 +43,7 @@
         <div
           ref="yearGaugeRef"
           class="chart-body gauge-chart"
+          :style="{ transform: activeTab === BudgetCategory.Expense ? 'scaleX(-1)' : '' }"
         />
         <div class="gauge-footer compact">
           <div class="gauge-item">
@@ -215,15 +217,28 @@ const updateSingleGauge = (chart, data, isExpense) => {
   if (!chart) { return }
 
   const rate = parseFloat(data.rate || 0)
-  // 颜色逻辑
+  // 展示逻辑：支出显示剩余，收入显示已积累
-  let color = getCssVar('--chart-success') // 绿色
+  let displayRate
   if (isExpense) {
-    if (rate >= 100) { color = getCssVar('--chart-danger') } // 红色
+    // 支出：显示剩余容量 (100% - 已消耗%)，随支出增大逐渐消耗
-    else if (rate >= 80) { color = getCssVar('--chart-warning') } // 橙色
+    displayRate = Math.max(0, 100 - rate)
   } else {
-    if (rate >= 100) { color = getCssVar('--chart-success') } // 绿色
+    // 收入：显示已积累 (%)，随收入增多逐渐增多
-    else if (rate >= 80) { color = getCssVar('--chart-warning') } // 橙色
+    displayRate = Math.min(100, rate)
-    else { color = getCssVar('--chart-danger') } // 红色
+  }
+
+  // 颜色逻辑：支出从绿色消耗到红色，收入从红色积累到绿色
+  let color
+  if (isExpense) {
+    // 支出：满格绿色，随消耗逐渐变红 (根据剩余容量)
+    if (displayRate <= 30) { color = getCssVar('--chart-danger') } // 红色
+    else if (displayRate <= 65) { color = getCssVar('--chart-warning') } // 橙色
+    else { color = getCssVar('--chart-success') } // 绿色
+  } else {
+    // 收入：空红色，随积累逐渐变绿 (根据已积累)
+    if (displayRate <= 30) { color = getCssVar('--chart-danger') } // 红色
+    else if (displayRate <= 65) { color = getCssVar('--chart-warning') } // 橙色
+    else { color = getCssVar('--chart-success') } // 绿色
   }
 
   const option = {
@@ -233,7 +248,7 @@ const updateSingleGauge = (chart, data, isExpense) => {
         startAngle: 180,
         endAngle: 0,
         min: 0,
-        max: Math.max(100, rate * 1.2),
+        max: 100,
         splitNumber: 5,
         radius: '110%', // 放大一点以适应小卡片
         center: ['50%', '75%'],
@@ -269,7 +284,7 @@ const updateSingleGauge = (chart, data, isExpense) => {
           fontWeight: 'bold',
           fontFamily: 'DIN Alternate, system-ui'
         },
-        data: [{ value: rate }]
+        data: [{ value: displayRate }]
       }
     ]
   }
@@ -517,8 +532,6 @@ const updateBurndownChart = () => {
     }
   }
 
-  const textColor = getCssVar('--van-text-color')
-  const textColor2 = getCssVar('--van-text-color-2')
   const splitLineColor = getCssVar('--chart-split')
   const axisLabelColor = getCssVar('--chart-text-muted')
 

Web/src/views/BudgetView.vue

@@ -511,7 +511,6 @@ import {
 } from '@/api/budget'
 import { BudgetPeriodType, BudgetCategory } from '@/constants/enums'
 import BudgetCard from '@/components/Budget/BudgetCard.vue'
-import BudgetSummary from '@/components/Budget/BudgetSummary.vue'
 import BudgetEditPopup from '@/components/Budget/BudgetEditPopup.vue'
 import SavingsConfigPopup from '@/components/Budget/SavingsConfigPopup.vue'
 import BudgetChartAnalysis from '@/components/Budget/BudgetChartAnalysis.vue'