loan-pricing/doc/2026-04-15-Breadcrumb重复key修复前端实施记录.md

Breadcrumb 重复 key 修复前端实施记录

1. 实际改动内容

1.1 修复 Breadcrumb 重复 key 告警

修改文件：

• ruoyi-ui/src/components/Breadcrumb/index.vue
• ruoyi-ui/src/components/Breadcrumb/utils.js

改动内容：

• 将 Breadcrumb 列表项的 key 生成逻辑从直接使用 item.path 调整为统一调用 buildBreadcrumbItemKey
• 新增 buildBreadcrumbItemKey(item, index) 工具方法，使用 path + title + index 组合生成稳定且唯一的 key
• 保持现有面包屑展示逻辑不变，不调整路由结构、不修改首页与当前页的展示顺序

根因说明：

• 当前项目的 Breadcrumb 会在非首页场景外额外插入一个 首页 面包屑，路径固定为 '/index'
• 当当前页面本身也对应 '/index' 时，原逻辑使用 item.path 作为 transition-group 的 key，会同时生成两个 '/index'
• Vue 因此抛出 Duplicate keys detected: '/index'

1.2 增加最小回归测试

修改文件：

• ruoyi-ui/tests/breadcrumb-duplicate-key.test.js

改动内容：

• 新增最小 Node 断言脚本
• 校验当两个 Breadcrumb 条目 path 同为 '/index' 时，生成的 key 仍然唯一
• 锁定本次问题，避免后续调整 Breadcrumb 时再次引入相同告警

2. 验证结果

2.1 Node 版本

项目中未提供 .nvmrc，因此未能直接执行 nvm use 自动切换。

实际使用版本：

• nvm use 14.21.3

2.2 测试命令

已执行：

• cd ruoyi-ui && source ~/.nvm/nvm.sh && nvm use 14.21.3 >/dev/null && node tests/breadcrumb-duplicate-key.test.js

结果：

• 测试通过
• 输出 breadcrumb duplicate key assertions passed

2.3 构建命令

已执行：

• cd ruoyi-ui && source ~/.nvm/nvm.sh && nvm use 14.21.3 >/dev/null && npm run build:prod

结果：

• 构建成功
• 输出 DONE Build complete. The dist directory is ready to be deployed.

2.4 构建告警

存在 webpack 资源体积告警：

• asset size limit
• entrypoint size limit

说明：

• 这些是现有项目静态资源体积告警
• 本次 Breadcrumb 修复未引入新的构建错误或新的语法告警

3. 影响范围

• 仅涉及前端 Breadcrumb 组件
• 未修改后端代码
• 未修改贷款定价业务字段逻辑

4. 当前结论

• Duplicate keys detected: '/index' 的 Breadcrumb 告警已修复
• 修复方式限定在组件 key 生成逻辑，属于最短路径处理
• 前端回归测试与生产构建均已通过