X-Financial/document/development/财务与风险看板卡片重组/CONCEPT.md

财务与风险看板卡片重组

功能一句话

将财务看板的预算执行率合并进预算指标卡片，并重组风险看板尾部卡片，让异常排行和风险占比成为主要分析信息。

背景与问题

当前分析看板存在两个体验问题：

• 财务看板底部同时有“预算指标”和“预算执行率（本月）”两个预算卡片，信息相近但占用两块空间。
• 风险看板中“算法闭环效果”和“近期高风险观察”对当前看板判断价值较低；“来源分布”展示 unknown 时会让用户误以为数据异常，实际用户想看每类风险占比。

目标与非目标

目标：

• 将预算执行率仪表图整合进“预算指标”卡片，取消单独的预算执行率卡片，并把整合后的预算指标卡放在“高额单据”右侧空白位。
• 风险看板把“来源分布”改为“风险占比”，展示风险信号或风险类型占比。
• 风险看板移除“算法闭环效果”和“近期高风险观察”卡片。
• 异常排行重新设计为占满整张卡片的图表化内容，减少碎片列表感。

非目标：

• 不改后端接口，不新增风险或预算接口。
• 不改顶部 KPI 和风险趋势图数据口径。
• 不引入新的图表库，继续复用现有 DonutChart、BarChart 和 GaugeChart。

用户与场景

用户：

• 财务分析人员、风险复核人员、管理员。

场景：

• 财务人员查看预算指标时，一眼看到预算执行率、预算总额、已用和剩余额度。
• 风险人员查看风险看板时，优先看到风险类型占比和异常维度排行，而不是来源未知或低价值尾部卡片。

功能能力

财务看板：

• “预算指标”卡片包含预算执行率仪表图和预算指标列表，桌面端与“高额单据”同处底部半宽行，避免预算信息独占新行造成留白。
• budgetSummary 仍作为仪表图数据源。
• budgetMetrics 仍作为指标列表数据源。
• 单独 budget-panel 不再渲染。

风险看板：

• “来源分布”改为“风险占比”，数据来自 signalDistribution 或 topRiskSignals。
• 异常排行卡片横跨整行，主图表填满卡片，下面只保留紧凑排行明细。
• 删除算法闭环效果和近期高风险观察两个卡片。

方案设计

前端：

• OverviewView.vue

  • 删除独立预算执行率卡片。
  • 在预算指标卡片内部增加 GaugeChart 区域，与指标列表左右布局。

• overview-view.css

  • 调整 budget-metrics-panel 的布局宽度和内部栅格，桌面端占 6 栅格贴合“高额单据”右侧。
  • 新增预算整合布局样式，移动端自动单列。

• useOverviewView.js

  • 将 riskSourceLegend 改为风险占比 legend，优先使用风险信号分布。

• RiskObservationDashboard.vue

  • 风险占比卡片标题改为“风险占比”。
  • 异常排行卡片改为整行大卡。
  • 移除算法闭环效果和近期高风险观察模板与样式。

算法与公式

本次不改变后端算法，只改变前端展示。

风险占比：

share_i = \frac{count_i}{\sum_{j=1}^{n} count_j}

预算执行率沿用已有 budgetSummary.ratio：

budgetUsageRate = \frac{usedBudget}{totalBudget}

测试方案

• 前端源码测试：
  • 财务看板不再渲染独立 budget-panel。
  • 预算指标卡片包含 GaugeChart。
  • 风险看板标题为“风险占比”，不再使用“来源分布”。
  • 风险看板不再渲染算法闭环效果和近期高风险观察。
  • 异常排行卡片使用整行样式和图表填充样式。
• 构建验证：
  • node web/tests/risk-observation-dashboard.test.mjs
  • 如有财务看板测试则补充运行。
  • npm.cmd --prefix web run build

指标与验收

• 财务看板底部不再多出单独“预算执行率（本月）”卡片。
• 预算指标卡片内部能看到预算执行率和预算指标，并在桌面端填充“高额单据”右侧空白位。
• 风险看板不再显示“算法闭环效果”和“近期高风险观察”。
• 风险占比不再显示来源未知，而是展示具体风险占比。
• 异常排行卡片占满整行，图表区域明显成为主内容。

风险与开放问题

• 当前工作区已有未提交改动，提交时必须只纳入本次相关文件。
• 本次只改前端展示，如果后端风险信号为空，则仍需要显示“暂无数据”兜底。