AI 驱动的金融界面异常检测：自动识别数据展示错误与风险提示缺失
一、引言：一个金额单位错误，比任何 Bug 都更致命
金融前端有一个让人睡不着的风险：数据显示错误。
一个真实的案例：某金融 App 在一次发布后，将"万元"误显示为"元"，导致一位用户以为自己的资产翻了 1 万倍，狂喜之下做出了不理性的投资决策。虽然最终没有造成实质损失，但这个事件让团队整整紧张了一周。
金融界面中，数据显示错误的主要来源有三类：
传统的解决方案是——依靠人工 Code Review 和测试。但在一个有着数百个数据展示点的金融应用中，一个人不可能检查到每一个可能出错的地方。AI 可以在这个场景中发挥独特价值：它可以像个永不疲倦的"最后一道防线"，自动扫描页面上每一个数据展示点，检查数据的类型、格式、单位和上下文一致性。
二、底层机制与原理深度剖析
三、生产级代码实现
/**
* AI 金融界面异常检测引擎
*
* 在 CI/CD 流程中运行，扫描构建产物中每个页面的 DOM 快照，
* 检测数据展示异常和合规缺失问题
*/
/** 数据展示规则（配置化，可由非技术人员维护） */
interface DisplayRule {
id: string;
pattern: RegExp; // DOM 内容匹配模式
expectedUnit?: string; // 期望的单位（元、%、万等）
expectedFormat?: string; // 期望的格式
requiredSibling?: RegExp; // 必须同时出现的伴随文本（如免责声明）
}
/** 检测到的异常 */
interface Anomaly {
ruleId: string;
severity: 'critical' | 'high' | 'medium' | 'low';
message: string;
location: { selector: string; textContent: string };
suggestion: string;
}
/**
* 金融界面异常检测器
*/
class FinanceUIAnomalyDetector {
/** 预定义的检测规则集 */
private rules: DisplayRule[] = [
{
id: 'AMOUNT_UNIT_CHECK',
// 匹配金额显示模式
pattern: /[¥￥]\\s*[\\d,]+\\.?\\d*/,
expectedFormat: 'currency',
requiredSibling: /金额|元|万元|CNY/i,
},
{
id: 'PERCENTAGE_FORMAT_CHECK',
// 匹配百分比显示模式
pattern: /[\\d.]+%/,
expectedFormat: 'percentage',
// 百分比前必须有 '+' 或 '-' 符号
requiredSibling: /[+\\-]/,
},
{
id: 'RISK_DISCLAIMER_CHECK',
pattern: /收益率|涨幅|回报/i,
// 每次出现"收益率"等词时，附近必须有免责声明
requiredSibling: /历史业绩|不代表未来|不构成|风险/i,
},
{
id: 'NEGATIVE_AMOUNT_CHECK',
pattern: /[¥￥]\\s*-\\s*[\\d,]+/,
// 负金额在金融场景中需要特殊处理
severity: undefined
},
];
/**
* 扫描页面并返回所有检测到的异常
*/
scan(rootElement: HTMLElement): Anomaly[] {
const anomalies: Anomaly[] = [];
// 遍历所有文本节点
const walker = document.createTreeWalker(
rootElement,
NodeFilter.SHOW_TEXT,
{
acceptNode: (node) => {
const text = node.textContent?.trim();
return text && text.length > 0
? NodeFilter.FILTER_ACCEPT
: NodeFilter.FILTER_SKIP;
}
}
);
let node: Node | null;
while ((node = walker.nextNode())) {
const text = node.textContent || '';
for (const rule of this.rules) {
if (!rule.pattern.test(text)) continue;
// 检查规则匹配后的额外约束
const violation = this.checkRule(text, node as Text, rule);
if (violation) {
anomalies.push(violation);
}
}
}
return anomalies;
}
/**
* 检查单条规则
*/
private checkRule(
text: string,
node: Text,
rule: DisplayRule
): Anomaly | null {
// 检查是否缺少必需的伴随文本
if (rule.requiredSibling) {
const parentText = node.parentElement?.textContent || '';
// 在父元素范围内查找伴随文本
if (!rule.requiredSibling.test(parentText)) {
return {
ruleId: rule.id,
severity: 'high',
message: `元素 "${text.substring(0, 30)}" 缺少必需的伴随信息`,
location: {
selector: this.getCSSPath(node.parentElement!),
textContent: text
},
suggestion: `请确保在包含"${rule.pattern.source}"的位置附近展示必需的声明文本`
};
}
}
// 检查数值范围是否合理（利用后端的预期范围对比）
if (rule.expectedFormat === 'currency') {
const amount = parseFloat(text.replace(/[^0-9.]/g, ''));
// 异常值检测：单个元素的金额不应超过 1 万亿
if (amount > 1e12) {
return {
ruleId: 'AMOUNT_BOUNDARY_CHECK',
severity: 'critical',
message: `金额 ${text} 超过合理范围上限（1万亿），可能存在单位或类型错误`,
location: {
selector: this.getCSSPath(node.parentElement!),
textContent: text
},
suggestion: '请确认金额单位是否正确（分/元/万元），以及数值本身是否合理'
};
}
}
// 检查百分比是否在合理范围
if (rule.expectedFormat === 'percentage') {
const pctValue = parseFloat(text);
if (Math.abs(pctValue) > 10000) {
return {
ruleId: 'PERCENTAGE_BOUNDARY_CHECK',
severity: 'high',
message: `百分比 ${text} 超过合理范围（10000%），可能缺少小数点`,
location: {
selector: this.getCSSPath(node.parentElement!),
textContent: text
},
suggestion: '确认百分比值是否应该是当前值的 1/100'
};
}
}
return null;
}
/**
* 获取元素的 CSS 选择器路径（用于错误报告定位）
*/
private getCSSPath(element: HTMLElement): string {
const parts: string[] = [];
let current: HTMLElement | null = element;
while (current && current !== document.body) {
let selector = current.tagName.toLowerCase();
if (current.id) selector += `#${current.id}`;
if (current.className) {
selector += `.${current.className.split(' ').filter(c => c).join('.')}`;
}
parts.unshift(selector);
current = current.parentElement;
}
return parts.join(' > ');
}
}
/**
* CI/CD 集成: 在构建后自动运行异常检测
*/
async function runPreReleaseScan() {
const detector = new FinanceUIAnomalyDetector();
// 获取所有需要检查的页面（从构建清单或路由配置中获取）
const pagesToCheck = [
'/trade/dashboard',
'/trade/position',
'/product/detail',
'/account/risk-assessment'
];
let criticalAnomalies = 0;
for (const page of pagesToCheck) {
// 使用 Puppeteer 或 Playwright 渲染页面并获取 DOM
// 此处为示例代码
// const pageContent = await browser.open(page);
const pageContent = document.body; // 示例
const anomalies = detector.scan(pageContent);
for (const anomaly of anomalies) {
console.error(`[${anomaly.severity.toUpperCase()}] ${anomaly.message}`);
console.error(` 位置: ${anomaly.location.selector}`);
console.error(` 文本: ${anomaly.location.textContent.substring(0, 50)}`);
console.error(` 建议: ${anomaly.suggestion}`);
if (anomaly.severity === 'critical') {
criticalAnomalies++;
}
}
}
// 存在 critical 异常时阻断构建
if (criticalAnomalies > 0) {
console.error(`检测到 ${criticalAnomalies} 个严重异常，构建已阻断`);
process.exit(1);
}
}
四、边界分析与架构权衡
关键缺点：
误报问题。正则匹配和规则检测无法理解业务上下文，可能对合理的展示产生误报。误报率过高会导致团队"报警疲劳"。
无法检测语义错误。AI 可以检测"格式对不对"，但无法判断"数字对不对"。如果后端返回了错误的数据（比如错误的汇率转换），前端展示是正确的，AI 检测不到。
多语言挑战。金融应用可能支持多语言，正则规则需要覆盖每种语言的金额格式、百分比格式和风险声明措辞。
适用边界：
| CI/CD 自动化检查 | 运行时生产环境检查 |
| 标准化数据展示 | 高度动态的用户生成内容 |
| 格式和单位错误 | 业务逻辑错误 |
五、总结
AI 驱动的金融界面异常检测像一面"最后的安全网"。它挡不住所有的错误（业务逻辑错误和 API 数据错误依然需要人工审查），但它可以抓住那些"显而易见但又容易被忽略的"展示问题——单位错误、格式偏差、合规缺失——这些问题的共同特点是：它们对用户的影响巨大，但在人工审查时很容易被忽略。
我最大的感悟是：金融前端的质量保障不该只依赖个人的"细心"。在一个有 50+ 前端工程师的团队中，你不能假设每个人都知道"金额必须标注单位"、"收益率旁边必须有免责声明"。把这些规则编码为自动化检查，让 AI 成为团队的知识沉淀工具，这才是长远之计。
作者：李慕杰（Leo / 8limujie）一个对每一个小数点都充满敬畏的前端匠人
