From f46b9d4bd63947a05c81304697af495bd4028b04 Mon Sep 17 00:00:00 2001 From: SunCheng Date: Fri, 20 Feb 2026 17:10:33 +0800 Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E6=B7=BB=E5=8A=A0=E5=AD=98?= =?UTF-8?q?=E6=AC=BE=E6=98=8E=E7=BB=86=E5=B1=95=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在存款计划弹窗中添加详细明细表格 - 收入明细列表（显示预算/实际/计算用金额） - 支出明细列表（显示超支标记） - 计算说明标签（使用预算/使用实际/超支/按天折算） - 支持新旧版本兼容 - 有 details 字段时显示详细明细 - 无 details 字段时显示旧版汇总 - UI 优化 - 超支项目红色边框高亮 - 月度/年度标签区分 - 计算汇总和公式展示 - 移动端响应式布局 --- .../budgetV2/modules/SavingsBudgetContent.vue | 419 +++++++++++++++--- 1 file changed, 350 insertions(+), 69 deletions(-) diff --git a/Web/src/views/budgetV2/modules/SavingsBudgetContent.vue b/Web/src/views/budgetV2/modules/SavingsBudgetContent.vue index 15d4f0d..949b09c 100644 --- a/Web/src/views/budgetV2/modules/SavingsBudgetContent.vue +++ b/Web/src/views/budgetV2/modules/SavingsBudgetContent.vue @@ -74,96 +74,253 @@
-
-
- - 收入预算 -
-
-
- 预算限额 - ¥{{ formatMoney(incomeLimit) }} + +
+ +
+
+ + 收入明细
-
- 实际收入 - ¥{{ formatMoney(incomeCurrent) }} +
+
+
+ {{ item.name }} + + {{ item.type === 1 ? '月度' : '年度' }} + +
+
+
+ 预算 + ¥{{ formatMoney(item.budgetLimit) }} +
+
+ 实际 + + ¥{{ formatMoney(item.actualAmount) }} + +
+
+ 计算用 + ¥{{ formatMoney(item.effectiveAmount) }} +
+
+
+ + {{ item.calculationNote }} + +
+
+
+
+ + +
+
+ + 支出明细 +
+
+
+
+ {{ item.name }} + + {{ item.type === 1 ? '月度' : '年度' }} + +
+
+
+ 预算 + ¥{{ formatMoney(item.budgetLimit) }} +
+
+ 实际 + + ¥{{ formatMoney(item.actualAmount) }} + +
+
+ 计算用 + ¥{{ formatMoney(item.effectiveAmount) }} +
+
+
+ + {{ item.calculationNote }} + + + 超支 + +
+
+
+
+ + +
+
+ + 计算汇总 +
+
+
+ 收入合计 + + ¥{{ formatMoney(currentBudget.details.summary.totalIncomeBudget) }} + +
+
+ 支出合计 + + ¥{{ formatMoney(currentBudget.details.summary.totalExpenseBudget) }} + +
+
+ 计划存款 + + ¥{{ formatMoney(currentBudget.details.summary.plannedSavings) }} + +
+
+
+ {{ currentBudget.details.summary.calculationFormula }}
-
-
- - 支出预算 -
-
-
- 预算限额 - ¥{{ formatMoney(expenseLimit) }} + +
+
+
+ + 收入预算
-
- 实际支出 - ¥{{ formatMoney(expenseCurrent) }} +
+
+ 预算限额 + ¥{{ formatMoney(incomeLimit) }} +
+
+ 实际收入 + ¥{{ formatMoney(incomeCurrent) }} +
-
-
-
- - 计划存款公式 -
-
-
- 收入预算 - ¥{{ formatMoney(incomeLimit) }} +
+
+ + 支出预算
-
- - -
-
- 支出预算 - ¥{{ formatMoney(expenseLimit) }} -
-
- = -
-
- 计划存款 - ¥{{ formatMoney(currentBudget.limit) }} +
+
+ 预算限额 + ¥{{ formatMoney(expenseLimit) }} +
+
+ 实际支出 + ¥{{ formatMoney(expenseCurrent) }} +
-
-
-
- - 存款结果 +
+
+ + 计划存款公式 +
+
+
+ 收入预算 + ¥{{ formatMoney(incomeLimit) }} +
+
+ - +
+
+ 支出预算 + ¥{{ formatMoney(expenseLimit) }} +
+
+ = +
+
+ 计划存款 + ¥{{ formatMoney(currentBudget.limit) }} +
+
-
-
- 计划存款 - ¥{{ formatMoney(currentBudget.limit) }} + +
+
+ + 存款结果
-
- 实际存款 - ¥{{ formatMoney(currentBudget.current) }} -
-
- 还差 - ¥{{ - formatMoney(Math.max(0, currentBudget.limit - currentBudget.current)) - }} +
+
+ 计划存款 + ¥{{ formatMoney(currentBudget.limit) }} +
+
+ 实际存款 + ¥{{ formatMoney(currentBudget.current) }} +
+
+ 还差 + ¥{{ + formatMoney(Math.max(0, currentBudget.limit - currentBudget.current)) + }} +
@@ -477,4 +634,128 @@ const getProgressColor = (budget) => { color: var(--van-text-color-2); padding: 0 8px; } + +/* 明细表格样式 */ +.detail-tables { + display: flex; + flex-direction: column; + gap: 16px; +} + +.detail-table { + display: flex; + flex-direction: column; + gap: 12px; +} + +.detail-item { + background-color: var(--van-light-gray); + border-radius: 8px; + padding: 12px; + border-left: 3px solid var(--van-gray-4); +} + +.detail-item.overbudget { + border-left-color: var(--van-danger-color); + background-color: rgba(245, 34, 45, 0.05); +} + +.item-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 10px; +} + +.item-name { + font-size: 15px; + font-weight: 600; + color: var(--van-text-color); +} + +.item-amounts { + display: flex; + flex-direction: column; + gap: 6px; + margin-bottom: 8px; +} + +.amount-row { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 13px; +} + +.amount-row.highlight { + padding-top: 6px; + margin-top: 4px; + border-top: 1px dashed var(--van-border-color); + font-weight: 600; +} + +.amount-label { + color: var(--van-text-color-2); +} + +.amount-value { + font-family: DIN Alternate, system-ui; + font-weight: 600; + color: var(--van-text-color); +} + +.amount-value.income { + color: var(--van-success-color); +} + +.amount-value.expense { + color: var(--van-danger-color); +} + +.amount-value.warning { + color: var(--van-warning-color); +} + +.amount-value.danger { + color: var(--van-danger-color); +} + +.item-note { + display: flex; + align-items: center; + gap: 6px; + flex-wrap: wrap; +} + +.formula-row { + display: flex; + justify-content: space-between; + align-items: center; + padding: 8px 0; + font-size: 14px; +} + +.formula-row.highlight { + margin-top: 8px; + padding-top: 12px; + border-top: 2px solid var(--van-border-color); + font-size: 16px; + font-weight: 600; +} + +.formula-value.primary { + color: var(--van-primary-color); + font-size: 18px; +} + +.formula-text { + margin-top: 12px; + padding: 10px; + background-color: var(--van-light-gray); + border-radius: 6px; + font-size: 13px; + color: var(--van-text-color-2); + text-align: center; + font-family: DIN Alternate, system-ui; +}