面包屑必须用 包裹 ，通过路由元信息显式声明层级，aria-current="page" 仅限当前页 且值为"page"，分隔符用 ::after 伪元素实现。
面包屑必须用 <nav aria-label="Breadcrumb"></nav> 包裹 <ol></ol>
仪表盘页面通常有明确的层级归属（比如「首页 > 监控 > 实时流量 > CPU 使用率」），但不能靠 window.location.pathname 硬切来生成。很多仪表盘路由是前端动态拼的（如 /dashboard/metrics/cpu?time=1h），直接 split('/') 会得到 ["", "dashboard", "metrics", "cpu"]，漏掉参数语义、多出空段、还把 metrics 当成业务名词——实际它可能对应「监控指标」这个中文名。
正确做法是：在仪表盘组件初始化时，由路由元信息或页面配置显式声明面包屑结构。例如 React Router v6 中，在路由定义里写：
{
path: "/dashboard/metrics/cpu",
element: <CpuMetricPage />,
handle: { breadcrumb: "CPU 使用率" }
}
然后在面包屑组件中递归 useMatches() 取每层 handle?.breadcrumb，首项补「首页」，末项加 aria-current="page"。
- 绝对不要用
<ul></ul>或<div class="breadcrumb"> —— 屏幕阅读器读不出顺序，Lighthouse 直接标“语义缺失” <li>所有链接 href 必须是绝对路径（<code>/dashboard，不是./dashboard），否则嵌套路由下会错位到/dashboard/metrics/./dashboard - 如果当前页是聚合页（如
/dashboard/overview），它仍应是可点击链接；只有真正不可跳转的终节点（如「CPU 使用率」详情页）才用<li aria-current="page">CPU 使用率</li> - 错误：
<a aria-current="page">CPU 使用率</a>（语义错位，当前页容器是<li>） - 错误：
<ol aria-current="page">...</ol>（属性位置错，读屏器无法定位具体项） - 错误：
<li aria-current="true">CPU 使用率</li>（值非法，JAWS/NVDA 不识别） - 正确：
<li aria-current="page">CPU 使用率</li>（无<a></a>，纯文本，语义终点）
当前页怎么加 aria-current="page" 才不翻车
这是仪表盘最容易出问题的地方：很多人把 aria-current="page" 加在 <a></a> 上，或者加在 <ol></ol> 根元素上，甚至写成 aria-current="true"。这些全无效。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
它只能加在当前页对应的 <li> 标签上，且值必须是字符串 "page"。当前页若本身是链接（比如「概览」页允许刷新），就保留 <a href="/dashboard/overview"></a>；若已是终态（如某个图表页只展示不跳转），则 <li> 内部不放 <a></a>，只放纯文本。
分隔符必须用 CSS 伪元素，不能写死 / 或 >
仪表盘 UI 常用 › 或 / 作视觉分隔，但写进 HTML 会破坏可访问性——屏幕阅读器会把「首页/监控/指标」读成「首页斜杠监控斜杠指标」，中间插入无意义音节。
正确方式是用 ::after 伪元素，仅对非末项生效，并加 aria-hidden="true" 隐藏其可访问性：
nav[aria-label="Breadcrumb"] ol li:not(:last-child)::after {
content: "›";
margin: 0 0.5em;
aria-hidden: true;
}
- 别用
content: ">"—— RTL 场景下会被镜像，›（U+203A）更稳定 - 别给第一个
<li>加伪元素，用:not(:first-child)也不够准，:not(:last-child)是唯一可靠判断 - 如果仪表盘支持多语言（如中/英/日），分隔符不用改文案，但需确保
<nav></nav>上有dir="ltr"，防止符号方向异常
静态仪表盘（如纯 HTML + Chart.js）怎么手写才不出错
很多内部仪表盘是单 HTML 文件配本地 JS 渲染，没有路由系统。这时候不能依赖 URL 解析，必须手写结构，但得避开常见坑：
- 「首页」必须指向
href="/"，不能是href="#"或href="./index.html"—— 键盘用户按 Enter 会触发锚点跳转或相对路径错误 - 路径层级要和真实信息架构对齐，不是 URL 路径。比如物理路径是
/static/dashboard/cpu.html，但业务上属于「监控 > 主机性能 > CPU」，就得写三段，而不是硬凑出static > dashboard > cpu - 如果仪表盘含时间范围筛选（如
?from=2026-10-26&to=2026-10-27），面包屑不体现参数，但跳转链接要保留查询参数，否则返回上级页会丢掉筛选条件 - 移动端窄屏下，别用
text-overflow: ellipsis截断 —— 它常把末项（当前页名）截掉。更稳妥的是用 JS 动态隐藏中间项，留首项、省略号、末项
最易被忽略的一点：仪表盘的「当前页」往往不是 URL 最后一段，而是由图表类型、数据源、筛选状态共同决定的逻辑终点。这意味着即使 URL 没变，面包屑也可能需要响应式更新 —— 这种场景下，硬编码 HTML 就不够用了，必须接入状态管理或路由监听。
