优化预算进度颜色计算逻辑,支持不同类别的渐变色显示
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 20s
Docker Build & Deploy / Deploy to Production (push) Successful in 10s
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s
Docker Build & Deploy / WeChat Notification (push) Successful in 2s

This commit is contained in:
孙诚
2026-01-15 11:08:52 +08:00
parent 65f7316c82
commit 82e5c79868

View File

@@ -421,16 +421,42 @@ const getProgressColor = (budget) => {
const ratio = Math.min(Math.max(budget.current / budget.limit, 0), 1) const ratio = Math.min(Math.max(budget.current / budget.limit, 0), 1)
// Start color (Blue): #1989fa -> rgb(25, 137, 250) let startColor, midColor, endColor
// 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) if (budget.category === BudgetCategory.Expense) {
const g = Math.round(startColor.g + (endColor.g - startColor.g) * ratio) // 支出: 绿 -> 蓝 -> 红
const b = Math.round(startColor.b + (endColor.b - startColor.b) * ratio) startColor = { r: 82, g: 196, b: 26 } // 绿
midColor = { r: 25, g: 137, b: 250 } // 蓝
endColor = { r: 238, g: 10, b: 36 } // 红
} else if (budget.category === BudgetCategory.Income) {
// 收入: 红 -> 蓝 -> 绿
startColor = { r: 238, g: 10, b: 36 } // 红
midColor = { r: 25, g: 137, b: 250 } // 蓝
endColor = { r: 82, g: 196, b: 26 } // 绿
} else {
// 存款: 红 -> 蓝 -> 绿
startColor = { r: 238, g: 10, b: 36 } // 红
midColor = { r: 25, g: 137, b: 250 } // 蓝
endColor = { r: 82, g: 196, b: 26 } // 绿
}
return `linear-gradient(to right, var(--van-primary-color), rgb(${r}, ${g}, ${b}))` let r, g, b
if (ratio < 0.5) {
// 从start到mid
const t = ratio * 2
r = Math.round(startColor.r + (midColor.r - startColor.r) * t)
g = Math.round(startColor.g + (midColor.g - startColor.g) * t)
b = Math.round(startColor.b + (midColor.b - startColor.b) * t)
} else {
// 从mid到end
const t = (ratio - 0.5) * 2
r = Math.round(midColor.r + (endColor.r - midColor.r) * t)
g = Math.round(midColor.g + (endColor.g - midColor.g) * t)
b = Math.round(midColor.b + (endColor.b - midColor.b) * t)
}
return `rgb(${r}, ${g}, ${b})`
} }
const showArchiveSummary = async () => { const showArchiveSummary = async () => {