优化预算进度颜色计算逻辑,支持不同类别的渐变色显示
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
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:
@@ -421,16 +421,42 @@ const getProgressColor = (budget) => {
|
||||
|
||||
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 }
|
||||
let startColor, midColor, endColor
|
||||
|
||||
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)
|
||||
if (budget.category === BudgetCategory.Expense) {
|
||||
// 支出: 绿 -> 蓝 -> 红
|
||||
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 () => {
|
||||
|
||||
Reference in New Issue
Block a user