96 lines
4.2 KiB
Markdown
96 lines
4.2 KiB
Markdown
|
# 风险与数字员工看板视觉优化
|
|||
|
|
|
|||
|
|
## 功能一句话
|
|||
|
|
|
|||
|
|
修正分析看板中风险看板的英文指标展示，将异常排行改成图表化表达，并优化数字员工看板的卡片布局和图表填充。
|
|||
|
|
|
|||
|
|
## 背景与问题
|
|||
|
|
|
|||
|
|
当前分析看板已经接入风险观察和数字员工数据，但存在三个影响个人操作体验的问题：
|
|||
|
|
|
|||
|
|
- 风险看板仍会把 `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，需要前端映射表继续补充。
|