网页应用引导浮层需精准判断新用户状态：仅首次加载时读取localStorage中guideShown值，严格比对是否为"true"字符串；CSS控制淡入上浮动画，z-index≥9999；用户主动关闭后才写入标记；兼顾移动端滚动禁用与无障碍聚焦。
网页应用通过 localStorage 记录功能引导浮层的状态，核心是“只对新用户展示、用户主动关闭后永久不显示、动画自然不突兀”。关键不在存数据本身，而在判断逻辑是否严谨、触发时机是否合理、交互反馈是否明确。
准确判断是否首次进入
页面加载时立即读取 localStorage 中的标记（如 guideShown），必须显式比对值是否等于字符串 "true"：
- 若
localStorage.getItem('guideShown') === 'true'→ 引导层直接隐藏（例如移除 active 类或设display: none） - 若返回
null、undefined或其他非"true"值 → 保持可见，准备触发动画 - 避免使用
!localStorage.getItem('guideShown')，因为null == false是false，容易误判为“已看过”
用 CSS 控制入场与退出动效
引导浮层（如 .guide-overlay）初始状态应为不可见但可动画，靠 class 切换驱动过渡：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 默认样式设
opacity: 0; transform: translateY(20px); pointer-events: none;，并配transition: all 0.3s ease - 页面就绪后添加 active 类，触发淡入+上浮动画
- 用户点击“跳过”或“×”时，先加 fade-out 类，动画结束后再移除元素或隐藏
- z-index 至少设为 9999，防止被弹窗、导航栏等遮挡
在用户明确操作后才写入标记
localStorage 的写入必须滞后于用户真实交互，不能在页面加载完成时就存：
- 推荐写入时机：点击“不再提示”、点击右上角关闭按钮、滑到最后一步并点“开始使用”
- 错误做法：在
DOMContentLoaded或window.onload中直接setItem，会导致用户还没看到就失效 - 建议封装统一函数，例如：
function markGuideAsShown() { localStorage.setItem('guideShown', 'true'); }
兼顾移动端与焦点管理
引导层不是桌面专属，需适配触控场景和辅助访问：
- 禁用背后页面滚动：给
body加overflow: hidden，关闭时恢复 - 聚焦引导层首个可操作元素（如“下一步”按钮），支持键盘 Tab 导航
- 关闭按钮添加
aria-label="关闭引导"，提升屏幕阅读器体验 - 动画避免使用
will-change: transform过度优化，防止 iOS Safari 渲染异常
