列表页应据数据行列关系选或：有固定行列结构（如用户列表）用并规范/；无固定列数（如标签云）则用配合display: flex/grid，确保语义正确、响应式适配与可访问性。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
列表页不是“把数据塞进表格就行”，而是要兼顾可读性、操作密度、响应式适配和语义正确性——错用 管理系统列表页的核心判断点：字段之间是否存在「行-列」对应关系（比如“用户ID｜姓名｜状态｜操作”这种固定字段对齐结构）。 常见现象：设置了 移动端隐藏部分列（如“创建时间”“操作人”），不是简单 立即学习“前端免费学习笔记（深入）”； 典型错误：给 最常被忽略的一点：管理系统列表页的「空状态」不是加个 <table> 或非法嵌套 <code><ul></ul>，会导致筛选/排序交互失效、屏幕阅读器跳过关键字段、移动端列挤成一团。
用
<table> 还是 <code><ul></ul>？看数据有没有行列关系
<table>：<code><thead> 定义表头，<code><tbody> 包数据，<code><th> 和 <code><td> 严格区分；否则排序按钮、列宽拖拽、导出 CSV 等功能会因 DOM 结构错乱而失灵
<li>无固定列数或字段动态增减（如“标签云”“权限项勾选组”）→ 用 <code><ul></ul> + display: flex 或 display: grid，但必须确保每个 <li> 是独立语义单元，不能在 <ul></ul> 里直接塞 <div class="row">
<li>别用 <code><div> 模拟表格：虽然能画出格子，但缺失 <code>scope、aria-label 等可访问性属性，键盘导航无法按列移动，视障用户根本不知道当前在哪一列
display: grid 布局等宽列时，为什么列宽总不一致？grid-template-columns: repeat(4, 1fr)，但第四列被内容撑开，前三列变窄。这不是 bug，是 min-content 优先级高于 1fr 的正常行为。
minmax(0, 1fr) 替代 1fr：grid-template-columns: repeat(4, minmax(0, 1fr))，强制忽略内容最小宽度overflow: hidden; text-overflow: ellipsis; white-space: nowrap，否则 grid 会重新计算轨道尺寸grid-column 必须对齐：如果某行少一个字段，用空 <div></div> 占位，别靠 colspan —— <table> 才支持 <code>colspan，grid 需显式声明跨列
minmax()，需降级为 grid-template-columns: 25% 25% 25% 25% 并配合 word-break: break-all
响应式折叠列，CSS 怎么写才不破坏排序功能？
display: none，否则 JavaScript 排序插件会找不到对应 DOM 节点，导致点击表头无反应。visibility: collapse 替代 display: none：<th> 和 <code><td> 仍保留在 DOM 中，仅视觉隐藏，排序逻辑可正常定位
<li>给要隐藏的列加 data 属性：<code><th data-mobile-hide>，然后媒体查询中统一控制：<code>@media (max-width: 768px) { [data-mobile-hide] { visibility: collapse; } }
visibility: visible 强制显示，避免用户在手机上无法执行关键动作transform: scale(0) 或 opacity: 0 隐藏列：元素仍在文档流中占位，会撑高行高，且焦点仍可进入，影响键盘操作为什么
<ul></ul> 列表页改用 flex 后，鼠标悬停效果失效？<ul></ul> 加 display: flex; flex-wrap: wrap，再给 <li> 设 :hover，结果只有第一行能触发，换行后的项 hover 无反应。
flex-wrap: wrap 后，换行项的 z-index 默认为 auto，被上一行内容遮挡；加 position: relative 和 z-index: 1 到 <li> 上即可修复<li> 内部若含按钮，确保 padding 足够（至少 8px），否则触摸设备点击区域太小，iOS Safari 会忽略点击flex-wrap，改用 white-space: nowrap + overflow-x: auto，否则 flex 换行会破坏时间线连续性<ul></ul> 设 height 限制高度：flex 项高度由内容决定，硬设 height 会导致内容被裁切，且 :hover 区域不完整<p>暂无数据</p> 就完事——它必须和真实数据行保持相同的 DOM 结构层级（比如同为 <tr> 或同为 <code><li>），否则 Vue/React 渲染时 key 失效，或 CSS 选择器（如 tbody tr:last-child）意外漏掉空状态样式。
