X-Financial/document/development/风险与数字员工看板视觉优化/CONCEPT.md

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

功能一句话

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

背景与问题

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

• 风险看板仍会把 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，需要前端映射表继续补充。