c6651b74b9
P1-6 useStyleLearn/useKimiOauth 修 stale-closure 依赖。 P1-7 CommandPalette/Drawer 加 focus trap（新 lib/a11y/focusTrap）。 P1-8 SSE 解析与 server.ts 去 as 强转改类型守卫/运行时校验。 P2 删冗余强转、开 noUncheckedIndexedAccess、Toast 清理+稳定 key、列表 key 稳定化、 rel=noopener、useMemo 大文本、ConflictCard role=group、useInjection 加锁、 client.test 真断言。 codegen 重生成 schema.d.ts + 消费 DimensionEntry/ReviewConflictView 强类型。
65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useRef, type ReactNode } from "react";
|
||
|
||
import { handleTabTrap } from "@/lib/a11y/focusTrap";
|
||
|
||
interface DrawerProps {
|
||
open: boolean;
|
||
onClose: () => void;
|
||
// 滑出方向：导航在左、本章助手在右。
|
||
side?: "left" | "right";
|
||
// 无障碍标签（role=dialog）。
|
||
label: string;
|
||
children: ReactNode;
|
||
}
|
||
|
||
// 移动端侧滑抽屉（<lg；遮罩点击 / Esc 关闭 + 打开聚焦面板）。
|
||
// 复用命令面板的 a11y 模式（CommandPalette）；桌面用静态布局，不渲染本抽屉。
|
||
export function Drawer({
|
||
open,
|
||
onClose,
|
||
side = "left",
|
||
label,
|
||
children,
|
||
}: DrawerProps) {
|
||
const panelRef = useRef<HTMLDivElement>(null);
|
||
|
||
useEffect(() => {
|
||
if (!open) return;
|
||
const onKey = (e: KeyboardEvent): void => {
|
||
if (e.key === "Escape") {
|
||
e.preventDefault();
|
||
onClose();
|
||
}
|
||
};
|
||
window.addEventListener("keydown", onKey);
|
||
panelRef.current?.focus();
|
||
return () => window.removeEventListener("keydown", onKey);
|
||
}, [open, onClose]);
|
||
|
||
if (!open) return null;
|
||
|
||
const sideClass = side === "left" ? "left-0 border-r" : "right-0 border-l";
|
||
|
||
return (
|
||
<div className="fixed inset-0 z-50 bg-black/30 lg:hidden" onClick={onClose}>
|
||
<div
|
||
ref={panelRef}
|
||
tabIndex={-1}
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-label={label}
|
||
onClick={(e) => e.stopPropagation()}
|
||
onKeyDown={(e) => {
|
||
// focus trap：Tab/Shift+Tab 在抽屉内循环，不逃逸到背景（WCAG 2.1.2）。
|
||
if (panelRef.current) handleTabTrap(panelRef.current, e);
|
||
}}
|
||
className={`absolute top-0 h-full w-64 max-w-[80vw] overflow-auto border-line bg-panel py-4 shadow-paper outline-none ${sideClass}`}
|
||
>
|
||
{children}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|