# 风险与数字员工看板视觉优化

## 功能一句话

修正分析看板中风险看板的英文指标展示，将异常排行改成图表化表达，并优化数字员工看板的卡片布局和图表填充。

## 背景与问题

当前分析看板已经接入风险观察和数字员工数据，但存在三个影响个人操作体验的问题：

- 风险看板仍会把 `duplicate_invoice`、`rule_center`、`unknown` 等后端 key 直接展示给用户。
- 异常排行以多列文字列表呈现，分类多、层级碎，难以快速判断哪个异常维度最突出。
- 数字员工看板部分卡片高度没有被内容充分利用，图表固定高度偏小，视觉上留下较多空白。

## 目标与非目标

目标：

- 风险看板可见指标全部中文化，常见风险信号、来源、状态、规则名和未知占位都不再直接显示英文 key。
- 异常排行聚合成一张图表化总览，保留部门、员工、供应商、规则和费用类型五个维度，并展示数量与金额。
- 数字员工看板减少无效空白，让趋势图、技能分布、模块排行和业务产出更充分占满卡片。
- 保持企业 SaaS 风格，继续复用现有 ECharts 封装组件和直角低饱和视觉体系。

非目标：

- 不新增接口，不改变后端数据契约。
- 不引入新的图表库。
- 不重做分析看板顶部导航、财务看板、系统看板和页面路由。

## 用户与场景

用户：

- 财务人员、风险复核人员、管理员。

场景：

- 用户进入风险看板，快速识别最近周期的风险来源、风险等级和主要异常维度。
- 用户查看异常排行时，优先通过图形长度和金额标签判断高发异常。
- 用户进入数字员工看板，查看后台任务趋势、技能类型、工作模块和产出，不需要在大面积空白里寻找信息。

## 功能能力

风险看板：

- 对风险信号 key、风险来源 key、状态 key、英文规则名和未知值做前端中文化。
- 异常排行从五列小列表改为组合图表：
  - 每个维度取排名第一项作为主条形图。
  - 展示维度名称、异常项名称、数量和金额。
  - 保留各维度的次级排行，作为图表下方的紧凑明细。

数字员工看板：

- 主趋势卡片与每日摘要组成同一行，趋势图高度随卡片拉伸。
- 技能分布、工作模块排行和业务产出统一为等高卡片。
- 最近工作记录独占整行，减少右侧空白和表格压缩。

## 前端方案

- `RiskObservationDashboard.vue`
  - 扩展 `formatSignal`、`formatDimensionName`、`formatRiskLevel` 等映射。
  - 新增异常排行图表数据 `rankingChartItems`，复用 `BarChart` 展示五个维度的头部异常。
  - 将原 `risk-ranking-grid` 改成图表 + 紧凑明细布局。

- `DigitalEmployeeDashboard.vue`
  - 给卡片设置 flex 纵向结构，让图表区和列表区可拉伸。
  - 调整栅格跨度：趋势 7、每日摘要 5；技能分布、模块排行、业务产出各 4；最近记录 12。
  - 为图表容器增加可填充高度，减少固定高度导致的空白。

- `DigitalEmployeeDailyWorkChart.vue`
  - 将固定高度改为跟随父容器的 `100%`，用最小高度保证可读性。

## 测试方案

- 前端源码测试：
  - 风险看板不再暴露常见英文风险 key。
  - 异常排行包含 `rankingChartItems` 并复用 `BarChart`。
  - 数字员工看板包含布局填充类名和可拉伸图表区域。
- 构建验证：
  - `node web/tests/risk-observation-dashboard.test.mjs`
  - `node web/tests/digital-employee-dashboard.test.mjs`
  - `npm.cmd --prefix web run build`

## 验收标准

- 风险看板常见英文 key 在用户可见位置被中文文案替代。
- 异常排行以图表作为主视觉，不再只是五列文字列表。
- 数字员工看板主要图表能够跟随卡片高度填充，卡片间高度更均衡。
- 定向测试和前端构建通过。

## 风险与开放问题

- 当前工作区有大量既有未提交和未跟踪文件，本次提交需要严格隔离目标文件。
- 若现有测试文件中保留了旧版乱码断言，需要同步更新为 UTF-8 中文断言。
- 本次不改后端，如果后端后续新增新的风险 key，需要前端映射表继续补充。