# 财务与风险看板卡片重组

## 功能一句话

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

## 背景与问题

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

- 财务看板底部同时有“预算指标”和“预算执行率（本月）”两个预算卡片，信息相近但占用两块空间。
- 风险看板中“算法闭环效果”和“近期高风险观察”对当前看板判断价值较低；“来源分布”展示 `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`

## 指标与验收

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

## 风险与开放问题

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