feat(dashboard): reorganize budget and risk cards
This commit is contained in:
caoxiaozhu
115
document/development/财务与风险看板卡片重组/CONCEPT.md
Normal file
115
document/development/财务与风险看板卡片重组/CONCEPT.md
Normal file
@@ -0,0 +1,115 @@
|
||||
# 财务与风险看板卡片重组
|
||||
|
||||
## 功能一句话
|
||||
|
||||
将财务看板的预算执行率合并进预算指标卡片，并重组风险看板尾部卡片，让异常排行和风险占比成为主要分析信息。
|
||||
|
||||
## 背景与问题
|
||||
|
||||
当前分析看板存在两个体验问题：
|
||||
|
||||
- 财务看板底部同时有“预算指标”和“预算执行率（本月）”两个预算卡片，信息相近但占用两块空间。
|
||||
- 风险看板中“算法闭环效果”和“近期高风险观察”对当前看板判断价值较低；“来源分布”展示 `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`
|
||||
|
||||
## 指标与验收
|
||||
|
||||
- 财务看板底部不再多出单独“预算执行率（本月）”卡片。
|
||||
- 预算指标卡片内部能看到预算执行率和预算指标，并在桌面端填充“高额单据”右侧空白位。
|
||||
- 风险看板不再显示“算法闭环效果”和“近期高风险观察”。
|
||||
- 风险占比不再显示来源未知，而是展示具体风险占比。
|
||||
- 异常排行卡片占满整行，图表区域明显成为主内容。
|
||||
|
||||
## 风险与开放问题
|
||||
|
||||
- 当前工作区已有未提交改动，提交时必须只纳入本次相关文件。
|
||||
- 本次只改前端展示，如果后端风险信号为空，则仍需要显示“暂无数据”兜底。
|
||||
30
document/development/财务与风险看板卡片重组/TODO.md
Normal file
30
document/development/财务与风险看板卡片重组/TODO.md
Normal file
@@ -0,0 +1,30 @@
|
||||
# 财务与风险看板卡片重组 TODO
|
||||
|
||||
## 调研
|
||||
|
||||
- [x] 盘点财务预算卡片和风险看板卡片现状。[CONCEPT: 背景与问题] 证据：已检查 `OverviewView.vue`、`overview-view.css`、`RiskObservationDashboard.vue`、`useOverviewView.js` 和风险看板测试。
|
||||
|
||||
## 契约
|
||||
|
||||
- [x] 确认本次不改后端接口，只调整前端展示和数据映射。[CONCEPT: 目标与非目标] 证据：现有 `budgetSummary`、`budgetMetrics`、`signalDistribution` 和 `topRiskSignals` 足够支撑改动。
|
||||
|
||||
## 前端
|
||||
|
||||
- [x] 将预算执行率整合到预算指标卡片，移除独立预算执行率卡片。[CONCEPT: 财务看板] 证据：`OverviewView.vue` 中预算指标卡片内新增 `GaugeChart`，并保留在“高额单据”右侧的底部栅格位置；独立 `budget-panel` 已移除。
|
||||
- [x] 将风险“来源分布”改成“风险占比”，使用风险信号分布数据。[CONCEPT: 风险看板] 证据：`riskCompositionLegend` 优先读取 `signalDistribution`，标题显示“风险占比”。
|
||||
- [x] 移除风险看板“算法闭环效果”和“近期高风险观察”卡片。[CONCEPT: 风险看板] 证据：模板、计算属性和样式中的 `risk-effect-*`、`risk-recent-*` 已删除。
|
||||
- [x] 重设异常排行卡片为整行大图表布局。[CONCEPT: 风险看板] 证据：`.risk-ranking-panel` 改为 `grid-column: span 12`，并新增 `risk-ranking-chart-block`。
|
||||
|
||||
## 测试
|
||||
|
||||
- [x] 更新风险看板源码测试。[CONCEPT: 测试方案] 证据：`risk-observation-dashboard.test.mjs` 覆盖删卡、异常排行图表化、风险映射中文化和顶部时间范围驱动。
|
||||
- [x] 补充或更新财务看板源码测试。[CONCEPT: 测试方案] 证据：新增 `finance-dashboard-budget-card.test.mjs`，校验预算指标卡位于高额单据之后且桌面端 `grid-column: span 6`。
|
||||
- [x] 运行定向前端测试。[CONCEPT: 测试方案] 证据：`node web/tests/risk-observation-dashboard.test.mjs`、`node web/tests/finance-dashboard-ranking.test.mjs`、`node web/tests/finance-dashboard-budget-card.test.mjs` 通过。
|
||||
- [x] 运行前端构建验证。[CONCEPT: 测试方案] 证据：`npm.cmd --prefix web run build` 通过，仅保留 Vite 大 chunk 与第三方 PURE 注释警告。
|
||||
|
||||
## 验收
|
||||
|
||||
- [x] 确认财务看板只有一个预算卡片且含预算执行率。[CONCEPT: 指标与验收] 证据：源码测试确认 `budget-metrics-panel` 包含 `GaugeChart`、没有旧 `budget-panel`，并在桌面端填充“高额单据”右侧空白位。
|
||||
- [x] 确认风险占比展示具体风险类型，不再展示来源未知。[CONCEPT: 指标与验收] 证据：源码测试确认使用 `riskCompositionLegend` 和 `signalDistribution`，并补充 `budget_pressure`、`missing_material`、`simulation` 中文映射。
|
||||
- [x] 确认风险看板尾部仅保留重设计后的异常排行核心信息。[CONCEPT: 指标与验收] 证据：源码测试确认 `risk-ranking-visual`、`rankingChartItems` 生效，且 `risk-effect-panel`、`risk-recent-panel` 不再渲染。
|
||||
- [x] 提交并推送本次改动，避免纳入无关脏工作区文件。[CONCEPT: 风险与开放问题] 证据：本次看板相关文件将随 `feat(dashboard): reorganize budget and risk cards` 提交并推送到当前分支。
|
||||
Reference in New Issue
Block a user