From 12cf1b632303b71a2c5a09c8113fa53521ebcb60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E8=AF=9A?= <cheng2.sun@ly.com>
Date: Wed, 14 Jan 2026 20:24:32 +0800
Subject: [PATCH] 1

---
 Web/src/views/BudgetView.vue     | 46 +++++++++++---------------------
 Web/src/views/PeriodicRecord.vue |  4 +++
 2 files changed, 20 insertions(+), 30 deletions(-)

diff --git a/Web/src/views/BudgetView.vue b/Web/src/views/BudgetView.vue
index d7ced5a..b8f9c47 100644
--- a/Web/src/views/BudgetView.vue
+++ b/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 () => {
diff --git a/Web/src/views/PeriodicRecord.vue b/Web/src/views/PeriodicRecord.vue
index ca32815..6a9111d 100644
--- a/Web/src/views/PeriodicRecord.vue
+++ b/Web/src/views/PeriodicRecord.vue
@@ -596,4 +596,8 @@ const onMonthDaysConfirm = ({ selectedValues, selectedOptions }) => {
   height: 100%;
 }
 
+:deep(.van-nav-bar) {
+  background: transparent !important;
+}
+
 </style>