AI 辅助的交互一致性检测：跨页面相同组件的 UI 差异分析

AI 辅助的交互一致性检测跨页面相同组件的 UI 差异分析一、同一张表格三个页面三种排序箭头——交互分裂的症状产品经理在需求评审会上说我们的表格组件排序按钮的样式有三个版本——向上箭头、向下箭头、双箭头。三个页面引用了同一个Table组件但因为不同的 Props 配置和包裹 CSS用户在每个页面上看到的是三个不同的表格。这是交互一致性的恶性分裂而且不是个例同一个Modal组件在 A 页面有遮罩关闭、在 B 页面没有同一个DatePicker在表单 A 是disabledDate限制 30 天、在表单 B 是 90 天——当差异是无意的而非故意的就是 Bug。AI 的任务自动扫描所有页面识别应该是相同但实际不同的组件实例标注差异区分有意的差异化使用和无意的样式/行为漂移。二、交互一致性检测引擎三、一致性检测工具实现// consistency-checker/component-consistency.ts // 跨页面组件一致性检测引擎 import { Page } from playwright; import crypto from crypto; interface ComponentInstance { /** 页面路由 */ pageRoute: string; /** 组件名称 */ componentName: string; /** 组件在 DOM 中的选择器 */ selector: string; /** 该实例传入的 Props */ props: Recordstring, any; /** 关键 CSS 属性的 computed value */ styles: Recordstring, string; /** 组件内部的文本内容用于场景推断 */ context: string; /** Props Styles 的哈希用于快速分组 */ fingerprint: string; } interface ConsistencyIssue { componentName: string; /** 差异类型 */ type: props-drift | style-drift | behavior-drift; /** 严重程度 */ severity: high | medium | low; /** 差异涉及的页面 */ affectedPages: Array{ route: string; diff: Recordstring, { a: any; b: any }; }; /** 分析是有意差异化还是无意的漂移 */ intentionality: intentional | unintentional | uncertain; /** 推理依据 */ reasoning: string; } /** * 采集单个页面中所有标记组件的快照 * * 前置条件每个组件实例需要有>