diff --git a/.ua/backlog.json b/.ua/backlog.json index 7aa48e9..30a7dee 100644 --- a/.ua/backlog.json +++ b/.ua/backlog.json @@ -701,5 +701,7 @@ "status": "done", "notes": "自补:组件补充;新增 sec-pagination 演示区块" } + , + { "id": "g43", "title": "select/menu/popover/image 的 Esc 接入统一弹层栈", "motivation": "四个弹层组件各自监听 document 的 Esc:多层叠加(如 popover 内再开 image 预览)时一次 Esc 全部关闭,与 modal/drawer 的 pushOverlay 栈行为不一致", "acceptance": "四个组件展开期入 Esc 栈、收起即释放;多层叠加时 Esc 后进先出逐层关闭;焦点归还触发器;npm run check 全绿", "status": "done", "notes": "自补:一致性修复;复用 overlay.ts 的 pushOverlay 栈" } ] } diff --git a/packages/skin/ui/src/image.ts b/packages/skin/ui/src/image.ts index a6a0f97..4c0e650 100644 --- a/packages/skin/ui/src/image.ts +++ b/packages/skin/ui/src/image.ts @@ -1,4 +1,5 @@ import { h } from '@ui-arch/frame'; +import { pushOverlay } from './overlay.js'; import type { ImageProps } from './types.js'; /*** 图片:缩略图展示,点击 / 回车打开遮罩大图预览(Esc 或点击遮罩关闭),加载失败自动落占位;样式只消费 --ua-* 令牌 ***/ @@ -24,6 +25,7 @@ export function image(props: ImageProps): HTMLElement { /*** 打开全屏遮罩预览层;关闭时自清理、解绑键盘并归还焦点 ***/ function openViewer(src: string, alt?: string): void { + let releaseEsc: (() => void) | null = null; // Esc 栈注销函数:预览层占一层,关闭即释放 const prev = document.activeElement as HTMLElement | null; // 焦点归还目标 const mask = h( 'div', @@ -31,12 +33,11 @@ function openViewer(src: string, alt?: string): void { h('img', { class: 'ua-image-full', src, alt: alt ?? '' }), ); const close = () => { - mask.remove(); // 卫语句式自清理:遮罩移除 + 键盘解绑 + 焦点归还 - document.removeEventListener('keydown', onKey); + mask.remove(); // 自清理:遮罩移除 + 出 Esc 栈 + 焦点归还 + releaseEsc?.(); prev?.focus?.(); }; - const onKey = (e: KeyboardEvent) => { if (e.key !== 'Escape') return; e.stopPropagation(); close(); }; // 预览层 Esc 自关,不连带关外层 mask.addEventListener('click', close); - document.addEventListener('keydown', onKey); + releaseEsc = pushOverlay(close); // 入 Esc 栈:预览层压在最上面,Esc 先关它 document.body.appendChild(mask); } diff --git a/packages/skin/ui/src/menu.ts b/packages/skin/ui/src/menu.ts index 0618b37..6d72a15 100644 --- a/packages/skin/ui/src/menu.ts +++ b/packages/skin/ui/src/menu.ts @@ -1,11 +1,13 @@ import { effect, h, signal } from '@ui-arch/frame'; import type { MenuItem, MenuProps } from './types.js'; import { flip } from './position.js'; +import { pushOverlay } from './overlay.js'; /*** 下拉菜单:触发器 + 自绘弹层,项支持禁用 / 危险 / 分隔线;点项 / 点外部 / Esc 关闭,↑↓ 环形导航 + Home/End 跳转 + 键入快跳 ***/ export function menu(props: MenuProps): HTMLElement { // —— 状态集中声明 —— const open = signal(false); // 弹层开合 + let releaseEsc: (() => void) | null = null; // Esc 栈注销函数:展开期间占一层,收起即释放 const place = signal<'top' | 'bottom'>('bottom'); // 实际生效方位:打开时按视口空间自动翻转 const focusables: HTMLButtonElement[] = []; // 可聚焦项(跳过分隔线与禁用项),供键盘导航 const labels: string[] = []; // 与 focusables 平行的条目文案,供键入快跳 @@ -72,12 +74,6 @@ export function menu(props: MenuProps): HTMLElement { }; root.addEventListener('keydown', (e: KeyboardEvent) => { - if (e.key === 'Escape') { - e.stopPropagation(); // 只关本层:不再冒泡去关外层的弹窗/抽屉 - open(false); - trigger.focus(); // 收起后焦点回到触发器,键盘流不断 - return; - } if (e.key === 'Home' && open()) { e.preventDefault(); focusables[0]?.focus(); return; } // Home 跳首项 if (e.key === 'End' && open()) { e.preventDefault(); focusables[focusables.length - 1]?.focus(); return; } // End 跳末项 if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') { @@ -100,7 +96,14 @@ export function menu(props: MenuProps): HTMLElement { open(false); // 点外部收起 }); - effect(() => open()); // 建立依赖,保证开合信号生效 + effect(() => { + if (open()) { + releaseEsc ??= pushOverlay(() => { open(false); trigger.focus(); }); // 入 Esc 栈:与弹窗/抽屉共用同一套逐层关闭 + } else { + releaseEsc?.(); + releaseEsc = null; + } + }); effect(() => { if (open()) place(flip(trigger, pop, 'bottom')); }); // 每次打开重算方位:空间不足自动翻转 return root; } diff --git a/packages/skin/ui/src/popover.ts b/packages/skin/ui/src/popover.ts index fa52529..8554ec2 100644 --- a/packages/skin/ui/src/popover.ts +++ b/packages/skin/ui/src/popover.ts @@ -1,6 +1,7 @@ import { effect, h, signal } from '@ui-arch/frame'; import type { PopoverProps } from './types.js'; import { flip } from './position.js'; +import { pushOverlay } from './overlay.js'; let seq = 0; // 全局自增序号:保证每个弹层 id 唯一,供 aria-controls 关联 @@ -8,6 +9,7 @@ let seq = 0; // 全局自增序号:保证每个弹层 id 唯一,供 aria-con export function popover(props: PopoverProps, trigger: HTMLElement): HTMLElement { // —— 状态集中声明 —— const open = signal(false); // 弹层显隐 + let releaseEsc: (() => void) | null = null; // Esc 栈注销函数:展开期间占一层,收起即释放 const place = signal(props.placement ?? 'bottom'); // 实际生效方位:打开时按视口空间自动翻转 const id = `ua-pop-${++seq}`; // 弹层唯一 id let timer: number | null = null; // hover 模式下的出入场计时器 @@ -52,13 +54,16 @@ export function popover(props: PopoverProps, trigger: HTMLElement): HTMLElement }); } root.addEventListener('keydown', (e: KeyboardEvent) => { - if (e.key !== 'Escape' || !open()) return; // 卫语句:未展开时 Esc 不处理 - e.stopPropagation(); // 只关本层,避免连带关闭外层弹窗 - setOpen(false); - trigger.focus(); // 收起后焦点回触发器 }); document.addEventListener('click', () => setOpen(false)); // 点外部收起(弹层内已阻止冒泡) - effect(() => { if (open()) place(flip(trigger, panel, props.placement ?? 'bottom')); }); // 每次打开重算方位:空间不足自动翻转 + effect(() => { + if (open()) { + releaseEsc ??= pushOverlay(() => { setOpen(false); trigger.focus(); }); // 入 Esc 栈:与弹窗/抽屉共用同一套逐层关闭 + } else { + releaseEsc?.(); + releaseEsc = null; + } + }); return root; } diff --git a/packages/skin/ui/src/select.ts b/packages/skin/ui/src/select.ts index 07e61fe..941b9fd 100644 --- a/packages/skin/ui/src/select.ts +++ b/packages/skin/ui/src/select.ts @@ -1,6 +1,7 @@ import { effect, h, signal } from '@ui-arch/frame'; import type { SelectProps } from './types.js'; import { flip } from './position.js'; +import { pushOverlay } from './overlay.js'; /*** 下拉选择:自绘弹层替代原生 select,value 信号双向绑定;searchable 时弹层顶部带搜索框,支持 ↑↓/Home/End 导航与 Esc 关闭 ***/ export function select(props: SelectProps): HTMLElement { @@ -10,6 +11,7 @@ export function select(props: SelectProps): HTMLElement { const query = signal(''); // 搜索关键字(仅 searchable 时使用) const value = props.value ?? signal(''); // 选中值;未传信号则内部持有 + let releaseEsc: (() => void) | null = null; // Esc 栈注销函数:展开期间占一层,收起即释放 const labels = props.options.map((o) => o.label); // 文案缓存,供搜索与键入快跳共用 const labelOf = (v: string) => props.options.find((o) => o.value === v)?.label ?? ''; const current = () => labelOf(value()); // 触发器显示文案(响应式) @@ -87,7 +89,6 @@ export function select(props: SelectProps): HTMLElement { }; root.addEventListener('keydown', (e: KeyboardEvent) => { - if (e.key === 'Escape') { e.stopPropagation(); open(false); trigger.focus(); return; } // Esc 只关本层并回焦触发器 const list = visibleIdx(); if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault(); // 阻止页面滚动 @@ -122,6 +123,14 @@ export function select(props: SelectProps): HTMLElement { requestAnimationFrame(() => search.focus()); // 搜索模式:打开即聚焦输入框 } }); + effect(() => { + if (open()) { + releaseEsc ??= pushOverlay(() => { open(false); trigger.focus(); }); // 入 Esc 栈:与弹窗/抽屉共用同一套逐层关闭 + } else { + releaseEsc?.(); + releaseEsc = null; + } + }); effect(() => { if (open()) place(flip(trigger, pop, 'bottom')); }); // 每次打开重算方位:空间不足自动翻转 return root; }