核心是仅对新用户显示引导页：用 localStorage.setItem('seenIntro', 'true') 标记已查看，加载时通过 getItem 检查是否为 'true' 来决定是否隐藏引导层，并注意 null 判断、z-index 层级、动态定位及异常处理。
HTML 引导页不需要 JavaScript 也能做，但纯 HTML + CSS 的引导页只能静态展示；真要“引导用户操作”，必须用 localStorage 或 sessionStorage 记住是否已看过，否则每次刷新都重来。
怎么用 localStorage 判断用户是否首次访问
引导页的核心不是“怎么画箭头”或“怎么加动画”，而是“只对新用户显示”。浏览器不记你上次干了啥，得自己存个标记。
-
localStorage.setItem('seenIntro', 'true')在用户点“跳过”或“下一步”到最后时执行 - 页面加载时先查
localStorage.getItem('seenIntro')，如果值是'true'，直接隐藏整个引导层（比如给.intro-overlay加display: none） - 注意：不能只靠
if (!localStorage.seenIntro)，因为未设置时返回null，不是undefined或false，建议显式比较=== null
用 position: fixed 叠在页面最上层，但别挡住关键按钮
引导页本质是遮罩层 + 高亮框 + 文字提示。CSS 层级控制不好，会盖住下拉菜单、弹窗、甚至 input 聚焦光标。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 给遮罩层设
z-index: 9999，高亮区域（比如用box-shadow或outline包围目标元素）设z-index: 10000 - 目标元素本身不要设
z-index，否则可能被遮罩层压住；改用isolation: isolate或临时提升其父容器的层级 - 移动端记得加
pointer-events: none到遮罩层，再给高亮区域单独设pointer-events: auto，否则点不动按钮
怎么让高亮区域“抠”出目标元素（不是简单加边框）
真实场景中，目标可能是 button、nav 里的某个 a、或者动态渲染的 div。硬写 CSS 定位会随布局崩，得靠 JS 动态算位置。
- 用
element.getBoundingClientRect()拿到目标元素相对于视口的top/left/width/height - 把高亮层（比如一个
div.intro-highlight）的style.top、style.left等设为对应值，并加上position: fixed - 别忘了监听
window.resize和scroll，重新计算——否则滚动后高亮就偏了 - 如果目标元素被
overflow: hidden截断，高亮层也会被裁，此时需把高亮层挂到document.body下，绕过父级裁剪
引导页最难的从来不是样式，而是状态同步：用户关掉页面再进来、切标签页、清缓存……这些边界情况会让 localStorage 失效或错乱。别省略 try...catch 包裹存储逻辑，也别假设用户一定按顺序点下一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
