必须用data-level属性标记层级并配合CSS计算缩进，禁用固定margin-left硬编码；推荐rem单位（如1.5rem），需配合html根字号稳定；图标与文字须用flex align-items: center对齐。
层级缩进靠 data-level 还是 CSS margin-left？
必须用 data-level（或类似语义属性）标记层级，再配合 CSS 计算缩进，不能只靠固定 margin-left: 20px 硬写。否则折叠/展开时子节点位置会错乱，动态加载新层级也难以对齐。
-
data-level="0"表示根级，data-level="1"是一级子节点，依此类推 - CSS 中用属性选择器匹配：
[data-level="1"] { margin-left: 24px; }，逐级递增 - 若用 Bootstrap Treegrid 类插件，它内部依赖
data-level做 DOM 渲染和事件委托，删掉就失灵
缩进单位该用 px、em 还是 rem？
推荐用 rem，前提是根字体大小稳定（如 html { font-size: 16px; }）。这样缩进能随用户系统字号缩放，对可访问性友好；而 px 固定死，em 又容易被父元素干扰。
- 每级缩进建议设为
1.5rem（即 24px），视觉上清晰区分又不挤 - 避免用
text-indent实现缩进——它只缩首行，且无法配合图标对齐 - 如果导航含图标（如文件夹、箭头），图标宽度需纳入缩进计算，否则文字会“悬空”
折叠状态下的缩进要不要重置？
不用重置，但要确保隐藏逻辑不破坏 DOM 层级结构。常见错误是把子节点从 DOM 移除或用 display: none 父容器包裹整个子树——这会导致 data-level 失效、键盘导航跳过、焦点管理混乱。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 正确做法：保留所有
元素，仅对子节点加class="tree-hidden"并用visibility: hidden或height: 0; overflow: hidden - 缩进样式仍需作用于隐藏节点，否则展开瞬间会“闪动位移”
- 用
aria-expanded和aria-hidden同步控制可访问性状态
多级嵌套下，CSS 选择器性能怎么扛住？
别写 li[data-level="3"] > ul > li[data-level="4"] > ul > li[data-level="5"] 这种长链。浏览器匹配越深越慢，尤其在 IE 或低端移动端。
- 改用单层属性选择器：
li[data-level]+li[data-level="0"]、li[data-level="1"]分开定义 - 层级超过 5 级时，建议用 JS 动态加 class（如
level-0、level-1），CSS 只匹配 class 而非属性 - 注意：Bootstrap Treegrid 默认不支持 >6 级嵌套，渲染会变卡，得提前限制数据深度或做虚拟滚动
实际缩进最易被忽略的点是：图标与文字的基线对齐。很多团队用 vertical-align: middle 搞不定，结果每级缩进后图标“浮高”或“下沉”，视觉上层级感反而被削弱。用 display: flex; align-items: center 包一层更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
