iter(g28): 浮层 Esc 逐层关闭，阻止冒泡连带关外层
This commit is contained in:
HIsheR
@@ -580,6 +580,14 @@
|
||||
"acceptance": "modal/drawer 共用 overlay.ts 的 Esc 栈，后开先关；栈空自动摘全局监听；npm run check 全绿",
|
||||
"status": "done",
|
||||
"notes": "自补：既有组件可用性细节；去掉两处各自挂的 document keydown"
|
||||
},
|
||||
{
|
||||
"id": "g28",
|
||||
"title": "Esc 逐层关闭：浮层阻止冒泡",
|
||||
"motivation": "弹窗内的 select/menu/popover 展开时按 Esc，会先收下拉再冒泡到 document 的 Esc 栈，导致弹窗一起被关——一次 Esc 关两层",
|
||||
"acceptance": "menu/select/popover/tooltip/image 的 Esc 处理各自 stopPropagation，只关本层；演示页在弹窗内放下拉可复现逐层关闭；npm run check 全绿",
|
||||
"status": "open",
|
||||
"notes": "自补：既有组件可用性细节"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
+7
-4
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"$schema": "ui-arch-registry-index/0.1",
|
||||
"generatedAt": "2026-10-26T03:37:32.721Z",
|
||||
"generatedAt": "2026-10-26T03:38:39.607Z",
|
||||
"repoRoot": ".",
|
||||
"packages": [
|
||||
{
|
||||
@@ -627,7 +627,8 @@
|
||||
"准备 options 数组，value 是提交用值、label 是展示文案",
|
||||
"创建信号并传入 value；未传时组件内部自持状态",
|
||||
"点击触发器展开弹层，点选项写回信号并收起；点外部或按 Esc 也会收起",
|
||||
"选中项在弹层中用淡色弱化标记，不抢视觉焦点"
|
||||
"选中项在弹层中用淡色弱化标记，不抢视觉焦点",
|
||||
"弹层展开时按 Esc 只收起下拉并回焦触发器；若下拉在弹窗/抽屉内，再按一次 Esc 才关外层（逐层关闭）"
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -673,7 +674,8 @@
|
||||
"点触发器展开弹层，点条目收起并触发 onSelect；点外部或按 Esc 也会收起（Esc 后焦点回到触发器）",
|
||||
"条目要给快捷键提示时传 shortcut（如 '⌘K'）：右侧灰字展示，组件不绑定按键，实际快捷键由调用方在全局监听",
|
||||
"键盘：Tab 聚焦触发器，↑↓ 展开并在可用条目间环形移动，Enter / Space 选中；disabled 项自动跳过",
|
||||
"靠右对齐避免溢出时传 align: 'end'；危险操作给条目加 danger: true"
|
||||
"靠右对齐避免溢出时传 align: 'end'；危险操作给条目加 danger: true",
|
||||
"展开时按 Esc 只收起菜单并回焦触发器，不会连带关闭所在弹窗（逐层关闭）"
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -1108,7 +1110,8 @@
|
||||
"点击触发器开合；点弹层外部或按 Esc 收起（Esc 后焦点回触发器）",
|
||||
"content 里可以放 button / checkbox 等交互元素（tooltip 只能纯文本），点击弹层内部不会误关",
|
||||
"hover 场景传 trigger: 'hover' + delay 控制多快出场；placement: 'top' 让弹层往上翻",
|
||||
"需要感知开合做副作用（如懒加载数据）时用 onOpenChange"
|
||||
"需要感知开合做副作用（如懒加载数据）时用 onOpenChange",
|
||||
"展开时按 Esc 只收起气泡并回焦触发器，不会连带关闭所在弹窗（逐层关闭）"
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
+3
-1
@@ -132,6 +132,7 @@ setInterval(() => percent((percent() + 5) % 105), 400); // 自动推进演示进
|
||||
// —— 标签页 / 弹窗状态 ——
|
||||
const activeTab = signal('a');
|
||||
const modalOpen = signal(false);
|
||||
const modalPick = signal('a'); // 弹窗内下拉的取值，用于演示 Esc 逐层关闭
|
||||
|
||||
// —— 表单校验状态集中声明 ——
|
||||
const username = signal('');
|
||||
@@ -384,7 +385,7 @@ const content = h(
|
||||
section(
|
||||
'sec-tabs-modal',
|
||||
'标签页与弹窗',
|
||||
'tabs 滑动指示条 + 方向键切换（←→），禁用页签置灰；modal 支持 Esc / 遮罩 / × 关闭。',
|
||||
'tabs 滑动指示条 + 方向键切换（←→），禁用页签置灰；modal 支持 Esc / 遮罩 / × 关闭，弹窗内的下拉展开时 Esc 先收下拉、再按才关弹窗（逐层关闭）。',
|
||||
tabs({ tabs: [{ value: 'a', label: '概览' }, { value: 'b', label: '明细' }, { value: 'c', label: '设置' }, { value: 'd', label: '已停用', disabled: true }], active: activeTab }),
|
||||
h('span', { class: 'out' }, () => `当前页签：${activeTab()}`),
|
||||
button({ label: '打开弹窗', onClick: () => modalOpen(true) }),
|
||||
@@ -403,6 +404,7 @@ const content = h(
|
||||
},
|
||||
h('p', null, '这是一个由信号驱动的弹窗组件（size: lg + footer 操作区）。'),
|
||||
h('div', { class: 'row' }, badge({ label: 'modal', variant: 'success' }), badge({ label: 'footer', variant: 'default' })),
|
||||
select({ options: [{ value: 'a', label: '优先处理' }, { value: 'b', label: '排队等待' }, { value: 'c', label: '转交他人' }], value: modalPick }),
|
||||
),
|
||||
),
|
||||
section(
|
||||
|
||||
+4
-1
@@ -1,6 +1,6 @@
|
||||
# @ui-arch 组件库 Agent 文档（无图形版）
|
||||
|
||||
> 自动生成于 2026-10-26T03:37:32.721Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
|
||||
> 自动生成于 2026-10-26T03:38:39.607Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
|
||||
> 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。
|
||||
|
||||
## 快速上手
|
||||
@@ -274,6 +274,7 @@ const city = signal(''); select({ options: [{ value: 'bj', label: '北京' }], v
|
||||
2. 创建信号并传入 value；未传时组件内部自持状态
|
||||
3. 点击触发器展开弹层，点选项写回信号并收起；点外部或按 Esc 也会收起
|
||||
4. 选中项在弹层中用淡色弱化标记，不抢视觉焦点
|
||||
5. 弹层展开时按 Esc 只收起下拉并回焦触发器；若下拉在弹窗/抽屉内，再按一次 Esc 才关外层（逐层关闭）
|
||||
|
||||
现场演示：apps/docs/demo.html#sec-form
|
||||
|
||||
@@ -301,6 +302,7 @@ menu({ label: '操作', items: [{ value: 'edit', label: '编辑' }, { value: 'de
|
||||
4. 条目要给快捷键提示时传 shortcut（如 '⌘K'）：右侧灰字展示，组件不绑定按键，实际快捷键由调用方在全局监听
|
||||
5. 键盘：Tab 聚焦触发器，↑↓ 展开并在可用条目间环形移动，Enter / Space 选中；disabled 项自动跳过
|
||||
6. 靠右对齐避免溢出时传 align: 'end'；危险操作给条目加 danger: true
|
||||
7. 展开时按 Esc 只收起菜单并回焦触发器，不会连带关闭所在弹窗（逐层关闭）
|
||||
|
||||
现场演示：apps/docs/demo.html#sec-menu
|
||||
|
||||
@@ -591,6 +593,7 @@ popover({ title: '筛选条件', content: h('div', null, '任意可交互内容'
|
||||
3. content 里可以放 button / checkbox 等交互元素（tooltip 只能纯文本），点击弹层内部不会误关
|
||||
4. hover 场景传 trigger: 'hover' + delay 控制多快出场；placement: 'top' 让弹层往上翻
|
||||
5. 需要感知开合做副作用（如懒加载数据）时用 onOpenChange
|
||||
6. 展开时按 Esc 只收起气泡并回焦触发器，不会连带关闭所在弹窗（逐层关闭）
|
||||
|
||||
现场演示：apps/docs/demo.html#sec-popover
|
||||
|
||||
|
||||
@@ -35,7 +35,7 @@ function openViewer(src: string, alt?: string): void {
|
||||
document.removeEventListener('keydown', onKey);
|
||||
prev?.focus?.();
|
||||
};
|
||||
const onKey = (e: KeyboardEvent) => e.key === 'Escape' && close();
|
||||
const onKey = (e: KeyboardEvent) => { if (e.key !== 'Escape') return; e.stopPropagation(); close(); }; // 预览层 Esc 自关，不连带关外层
|
||||
mask.addEventListener('click', close);
|
||||
document.addEventListener('keydown', onKey);
|
||||
document.body.appendChild(mask);
|
||||
|
||||
@@ -73,6 +73,7 @@ export function menu(props: MenuProps): HTMLElement {
|
||||
|
||||
root.addEventListener('keydown', (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
e.stopPropagation(); // 只关本层：不再冒泡去关外层的弹窗/抽屉
|
||||
open(false);
|
||||
trigger.focus(); // 收起后焦点回到触发器，键盘流不断
|
||||
return;
|
||||
|
||||
@@ -53,6 +53,7 @@ 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(); // 收起后焦点回触发器
|
||||
});
|
||||
|
||||
@@ -65,7 +65,7 @@ export function select(props: SelectProps): HTMLElement {
|
||||
};
|
||||
|
||||
root.addEventListener('keydown', (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') { open(false); trigger.focus(); return; } // Esc 关闭并回焦触发器
|
||||
if (e.key === 'Escape') { e.stopPropagation(); open(false); trigger.focus(); return; } // Esc 只关本层并回焦触发器
|
||||
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
|
||||
e.preventDefault(); // 阻止页面滚动
|
||||
if (!open()) { open(true); options[0]?.focus(); return; } // 未展开：展开并聚焦首个选项
|
||||
|
||||
@@ -49,7 +49,7 @@ export function tooltip(props: TooltipProps, trigger: HTMLElement): HTMLElement
|
||||
root.addEventListener('focusout', hide); // 失焦
|
||||
effect(() => { if (open()) place(flip(trigger, bubble, props.placement ?? 'top')); }); // 每次出场重算方位：空间不足自动翻转
|
||||
root.addEventListener('keydown', (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') hide(); // Esc 立即收起，不必等延迟
|
||||
if (e.key === 'Escape') { e.stopPropagation(); hide(); } // Esc 立即收起且不影响外层弹层
|
||||
});
|
||||
return root;
|
||||
}
|
||||
|
||||
@@ -498,7 +498,8 @@
|
||||
"准备 options 数组，value 是提交用值、label 是展示文案",
|
||||
"创建信号并传入 value；未传时组件内部自持状态",
|
||||
"点击触发器展开弹层，点选项写回信号并收起；点外部或按 Esc 也会收起",
|
||||
"选中项在弹层中用淡色弱化标记，不抢视觉焦点"
|
||||
"选中项在弹层中用淡色弱化标记，不抢视觉焦点",
|
||||
"弹层展开时按 Esc 只收起下拉并回焦触发器；若下拉在弹窗/抽屉内，再按一次 Esc 才关外层（逐层关闭）"
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -544,7 +545,8 @@
|
||||
"点触发器展开弹层，点条目收起并触发 onSelect；点外部或按 Esc 也会收起（Esc 后焦点回到触发器）",
|
||||
"条目要给快捷键提示时传 shortcut（如 '⌘K'）：右侧灰字展示，组件不绑定按键，实际快捷键由调用方在全局监听",
|
||||
"键盘：Tab 聚焦触发器，↑↓ 展开并在可用条目间环形移动，Enter / Space 选中；disabled 项自动跳过",
|
||||
"靠右对齐避免溢出时传 align: 'end'；危险操作给条目加 danger: true"
|
||||
"靠右对齐避免溢出时传 align: 'end'；危险操作给条目加 danger: true",
|
||||
"展开时按 Esc 只收起菜单并回焦触发器，不会连带关闭所在弹窗（逐层关闭）"
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -979,7 +981,8 @@
|
||||
"点击触发器开合；点弹层外部或按 Esc 收起（Esc 后焦点回触发器）",
|
||||
"content 里可以放 button / checkbox 等交互元素（tooltip 只能纯文本），点击弹层内部不会误关",
|
||||
"hover 场景传 trigger: 'hover' + delay 控制多快出场；placement: 'top' 让弹层往上翻",
|
||||
"需要感知开合做副作用（如懒加载数据）时用 onOpenChange"
|
||||
"需要感知开合做副作用（如懒加载数据）时用 onOpenChange",
|
||||
"展开时按 Esc 只收起气泡并回焦触发器，不会连带关闭所在弹窗（逐层关闭）"
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user