refactor(nav): 手机导航抽屉改用组件库 Drawer

- 删掉手写的抽屉(遮罩 / Esc / 标题 / 关闭按钮 / 动画)与对应 CSS
- 直接用 @stash/ui 的 Drawer(原生 dialog,自带焦点陷阱、Esc、backdrop 与滚动锁)
- 保留原来自定义的分组选择逻辑
This commit is contained in:
2026-11-05 20:33:03 +08:00
parent ff5c6f05a2
commit a0be02b4f4
2 changed files with 11 additions and 80 deletions
+10 -26
View File
@@ -1,16 +1,14 @@
import {
Breadcrumb,
Card,
Drawer,
Empty,
EngineIcon,
Icon,
IconButton,
Layout,
Menu,
Notice,
SearchField,
Space,
Title,
Toaster,
type EngineIconName,
type MenuItem,
@@ -1042,29 +1040,15 @@ export default function AppNext() {
<BackToTop visible={scrolled} targetId="page-scroll" />
{navOpen && (
<div className="nav-drawer">
<button
type="button"
className="nav-drawer-backdrop"
aria-label="关闭分组导航"
onClick={() => setNavOpen(false)}
/>
<div className="nav-drawer-panel" role="dialog" aria-modal="true" aria-label="分组导航">
<div className="nav-drawer-head">
<Title level={4} as="h2" weight="semibold">
分组导航
</Title>
<IconButton
label="关闭分组导航"
icon={<Icon name="close_line" />}
onClick={() => setNavOpen(false)}
/>
</div>
<Menu items={sidebarItems} activeKey={activeKey} itemHeight={44} onSelect={selectNav} />
</div>
</div>
)}
<Drawer
open={navOpen}
onClose={() => setNavOpen(false)}
title="分组导航"
placement="left"
width={300}
>
<Menu items={sidebarItems} activeKey={activeKey} itemHeight={44} onSelect={selectNav} />
</Drawer>
</>
)
}