优化预算进度颜色计算逻辑,支持不同类别的渐变色显示
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)
|
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 () => {
|
||||||
|
|||||||
Reference in New Issue
Block a user