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
+1 -54
View File
@@ -1662,66 +1662,13 @@ html.theme-transition .site-background {
} }
} }
/* ---------- 小屏分组导航抽屉 ---------- */ /* ---------- 小屏分组导航(抽屉用组件库的 Drawer) ---------- */
/* 桌面不显示菜单按钮(抽屉只能从小屏页头打开) */ /* 桌面不显示菜单按钮(抽屉只能从小屏页头打开) */
.header-nav-toggle { .header-nav-toggle {
display: none; display: none;
} }
.nav-drawer {
position: fixed;
inset: 0;
z-index: calc(var(--su-z-header) + 10);
display: flex;
}
.nav-drawer-backdrop {
position: absolute;
inset: 0;
border: none;
background: rgba(0, 0, 0, 0.45);
cursor: pointer;
}
.nav-drawer-panel {
position: relative;
display: flex;
flex-direction: column;
gap: var(--su-space-3);
width: min(86vw, 340px);
height: 100%;
margin-right: auto;
padding: var(--su-space-4);
background-color: var(--su-bg-card);
box-shadow: var(--su-shadow-pop);
overflow-y: auto;
animation: nav-drawer-in 180ms var(--su-ease-out);
}
.nav-drawer-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--su-space-2);
}
@keyframes nav-drawer-in {
from {
transform: translateX(-100%);
}
to {
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.nav-drawer-panel {
animation: none;
}
}
@media (max-width: 640px) { @media (max-width: 640px) {
/* 手机页头才显示菜单按钮(必须写在上面的 display: none 之后) */ /* 手机页头才显示菜单按钮(必须写在上面的 display: none 之后) */
.header-nav-toggle { .header-nav-toggle {
+10 -26
View File
@@ -1,16 +1,14 @@
import { import {
Breadcrumb, Breadcrumb,
Card, Card,
Drawer,
Empty, Empty,
EngineIcon, EngineIcon,
Icon,
IconButton,
Layout, Layout,
Menu, Menu,
Notice, Notice,
SearchField, SearchField,
Space, Space,
Title,
Toaster, Toaster,
type EngineIconName, type EngineIconName,
type MenuItem, type MenuItem,
@@ -1042,29 +1040,15 @@ export default function AppNext() {
<BackToTop visible={scrolled} targetId="page-scroll" /> <BackToTop visible={scrolled} targetId="page-scroll" />
{navOpen && ( <Drawer
<div className="nav-drawer"> open={navOpen}
<button onClose={() => setNavOpen(false)}
type="button" title="分组导航"
className="nav-drawer-backdrop" placement="left"
aria-label="关闭分组导航" width={300}
onClick={() => setNavOpen(false)} >
/> <Menu items={sidebarItems} activeKey={activeKey} itemHeight={44} onSelect={selectNav} />
<div className="nav-drawer-panel" role="dialog" aria-modal="true" aria-label="分组导航"> </Drawer>
<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>
)}
</> </>
) )
} }