1

Web/src/views/BudgetView.vue

@@ -104,7 +104,7 @@
               <van-swipe-cell v-for="budget in incomeBudgets" :key="budget.id">
                 <BudgetCard 
                   :budget="budget"
-                  :progress-color="getIncomeProgressColor(budget)"
+                  :progress-color="getProgressColor(budget)"
                   :percent-class="{ 'income': (budget.current / budget.limit) >= 1 }"
                   :period-label="getPeriodLabel(budget.type)"
                   @click="budgetEditRef.open({
@@ -149,7 +149,7 @@
                 v-for="budget in savingsBudgets" 
                 :key="budget.id"
                 :budget="budget"
-                progress-color="var(--van-success-color)"
+                :progress-color="getProgressColor(budget)"
                 :percent-class="{ 'income': (budget.current / budget.limit) >= 1 }"
                 :period-label="getPeriodLabel(budget.type)"
                 style="margin: 0 12px 12px;"
@@ -417,34 +417,20 @@ const getPeriodLabel = (type) => {
 }
 
 const getProgressColor = (budget) => {
-  const ratio = budget.current / budget.limit
-  if (ratio >= 1) return 'var(--van-danger-color)'
-  if (ratio > 0.8) return 'var(--van-warning-color)'
-  return 'var(--van-primary-color)'
-}
-
-const getIncomeProgressColor = (budget) => {
-  const ratio = budget.current / budget.limit
-  if (ratio >= 1) return 'var(--van-success-color)'
-  return 'var(--van-primary-color)'
-}
-
-const handleDelete = (budget) => {
-  showConfirmDialog({
-    title: '确认删除',
-    message: `确定要删除预算 "${budget.name}" 吗？`,
-  }).then(async () => {
-    try {
-      const res = await deleteBudget(budget.id)
-      if (res.success) {
-        showToast('已删除')
-        fetchBudgetList()
-      }
-    } catch (err) {
-      showToast('删除失败')
-      console.error('删除预算失败', err)
-    }
-  }).catch(() => {})
+  if (!budget.limit || budget.limit === 0) return 'var(--van-primary-color)'
+  
+  const ratio = Math.min(Math.max(budget.current / budget.limit, 0), 1)
+  
+  // Start color (Blue): #1989fa -> rgb(25, 137, 250)
+  // End color (Red): #ee0a24 -> rgb(238, 10, 36)
+  const startColor = { r: 25, g: 137, b: 250 }
+  const endColor = { r: 238, g: 10, b: 36 }
+  
+  const r = Math.round(startColor.r + (endColor.r - startColor.r) * ratio)
+  const g = Math.round(startColor.g + (endColor.g - startColor.g) * ratio)
+  const b = Math.round(startColor.b + (endColor.b - startColor.b) * ratio)
+  
+  return `linear-gradient(to right, var(--van-primary-color), rgb(${r}, ${g}, ${b}))`
 }
 
 const showArchiveSummary = async () => {

Web/src/views/PeriodicRecord.vue

@@ -596,4 +596,8 @@ const onMonthDaysConfirm = ({ selectedValues, selectedOptions }) => {
   height: 100%;
 }
 
+:deep(.van-nav-bar) {
+  background: transparent !important;
+}
+
 </style>