标签页切换必须同步修改地址栏，使用history.pushState实现语义化路径如/settings而非哈希；需前置判断避免重复记录；popstate回调中调用activateTab更新UI；currentTab为唯一数据源，首次加载及SSR时须与DOM和URL严格一致。
标签页切换必须同步修改地址栏，否则用户无法收藏、分享或用浏览器后退按钮回到上一个 Tab——这不是“可选功能”，而是基础可用性要求。
history.pushState 是唯一可靠方式
不能靠 location.href = "#tab2" 或 location.hash 模拟，因为哈希变化不会触发 popstate 事件，且无法与 History API 状态管理联动。真正可控的路径变更只能用 history.pushState()。
- 每次点击 Tab 时，调用
history.pushState({ tabId: "settings" }, "", "/settings")，确保 URL 变为可路由的路径（不是哈希） - URL 路径应语义化，比如
/dashboard、/profile，而非/#2或/?tab=3 - 避免重复调用：如果当前 URL 已是
/settings，再 push 一次会多一条历史记录，可用location.pathname === "/settings"做前置判断
popstate 回调里必须反向激活 Tab
用户点浏览器后退/前进时，仅 URL 改变，DOM 不会自动响应——你得主动读取状态并更新 UI，否则出现“地址栏显示 /profile，但页面还停在 /dashboard”这种错位。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 监听
window.addEventListener("popstate", (e) => { ... })，从e.state?.tabId或location.pathname提取目标 Tab ID - 不要直接操作 DOM（比如
document.querySelector(".tab-profile").click()），而应调用统一的activateTab("profile")函数 - 首次加载页面时，也要手动执行一次
activateTab(getTabFromPathname())，否则初始 Tab 不亮
currentTab 必须是单一数据源
Tab 激活状态不能分散在 class、data-active、URL、localStorage 多处维护——只要有一处没同步，就会出 bug。
立即学习“前端免费学习笔记（深入）”；
- 定义一个
let currentTab = "dashboard"（或用 React 的useState），所有操作都以它为准 -
activateTab(id)内部三件事必须原子执行：更新currentTab、切换 DOM 的activeclass、调用history.pushState() - 禁止在别处直接改
document.body.className或el.classList.add("active")，绕过状态管理
最容易被忽略的是：服务端渲染（SSR）或静态 HTML 首屏时，currentTab 初始值必须和服务器返回的 active class、以及 location.pathname 严格一致，否则 hydration 阶段会因状态不匹配导致闪烁或错乱。
