点击按钮后需用 JavaScript 动态显示绝对定位的排序弹窗（推荐 dialog 元素），绑定点击事件监听选项并回调 { key, order } 对象，禁用背景滚动，点击遮罩或外部区域关闭弹窗，排序函数须做类型归一化处理。
点击按钮后弹出排序选项，怎么用原生 HTML + JS 实现
纯 HTML 无法触发弹窗或响应点击，必须配合 JavaScript。所谓“排序弹窗”，本质是用户点击后显示一个带选项的浮动层（div），选中后通知主逻辑执行对应排序。不依赖框架时，核心就三步：准备 DOM 结构、绑定点击事件、处理选项回调。
常见错误是把 select 下拉框直接当弹窗用——它样式受限、无法自由布局、移动端体验差。真正可用的“弹窗”得是 position: absolute 或 fixed 的 div，再加遮罩层防误点。
- 弹窗容器建议用
dialog元素（现代浏览器支持），但注意 Safari 15.4+ 才稳定支持showModal()；兼容旧版需手动控制display和z-index - 选项推荐用
button而非radio，语义清晰、点击反馈明确、无需额外处理表单提交 - 务必在弹窗打开时禁用背景滚动（
document.body.style.overflow = 'hidden'），关闭时恢复
排序选项怎么传给表格或列表渲染逻辑
弹窗本身不管数据怎么排，只负责把用户选择的字段和方向告诉业务代码。关键在于定义好约定接口，比如返回形如 { key: 'price', order: 'desc' } 的对象。
不要在弹窗里写排序函数——那会耦合 UI 和逻辑。应该让调用方预先注册一个回调，例如：openSortDialog(onConfirm)，点击“价格降序”按钮时执行 onConfirm({ key: 'price', order: 'desc' })。
立即学习“前端免费学习笔记（深入）”；
- 字段名（
key）必须和数据项属性名严格一致，比如数据是{ name: 'iPhone', stock: 5 }，就不能传'productName' -
order建议统一用'asc'/'desc'字符串，避免布尔值导致后续判断歧义 - 如果表格支持多列排序，弹窗选项需区分“主排序”和“添加排序”，此时回调应返回数组，如
[{ key: 'status', order: 'asc' }, { key: 'updated', order: 'desc' }]
为什么点击弹窗外区域不能自动关闭？
因为原生 dialog 默认不拦截外部点击，而手写的 div 弹窗没绑定 click 事件监听器。这是最常被忽略的交互细节。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
正确做法是在遮罩层（div.overlay）上监听 click，并确保事件目标不是弹窗内容区。别用 e.target === overlay 粗暴判断——子元素点击也会触发冒泡，要用 e.target.closest('.sort-dialog') 检查是否点在弹窗内部。
- 如果用了
dialog元素，可通过监听close事件 + 检查dialog.returnValue判断是否为外部点击关闭（Chrome/Firefox 支持，Safari 不支持该属性） - 禁止在弹窗内用
event.stopPropagation()阻止所有冒泡，否则按钮点击可能失效 - 移动端要额外监听
touchstart，且防止click延迟 300ms 导致响应滞后
排序函数实际怎么写才不出错
前端排序最容易翻车的是类型混淆：字符串 '10' 排在 '2' 前面，数字 10 却排在 2 后面。所以 Array.prototype.sort() 的比较函数必须做类型归一化。
别写 a[key] > b[key] ? 1 : -1 ——这会把 undefined、null、NaN 全搅在一起。稳妥做法是先取值、转基础类型、再比较。
function sortByKey(arr, { key, order }) {
return [...arr].sort((a, b) => {
let av = a[key];
let bv = b[key];
// 处理 null/undefined
if (av == null && bv == null) return 0;
if (av == null) return order === 'asc' ? -1 : 1;
if (bv == null) return order === 'asc' ? 1 : -1;
// 字符串统一转小写比较，数字直接减
if (typeof av === 'string' && typeof bv === 'string') {
av = av.toLowerCase();
bv = bv.toLowerCase();
}
const diff = av > bv ? 1 : av < bv ? -1 : 0;
return order === 'desc' ? -diff : diff;
});
}
注意：这个函数返回新数组，不修改原数组；如果数据含日期字符串（如 '2023-05-20'），需先用 new Date() 解析，否则字典序会错乱。
复杂点在于国际化场景——中文按拼音排序、阿拉伯文从右向左，这些没法靠 localeCompare 一键解决，得引入 Intl.Collator 并指定 locale。普通项目先保证英文数字正确，别一上来就堆 locale 配置。
