Nav
站点导航菜单（对齐 Semi Navigation）。支持垂直/水平模式、子导航（内联/浮层）、logo 头部、折叠按钮、多选。独立渲染，字段/回调对齐 Semi（itemKey/text/icon/items）。
如何引入
import { Nav, Nav.Header, Nav.Footer, Nav.Item, Nav.Sub } from '@chenzy-design/svelte';基本使用
传入 items 快速得到导航栏：header 定义 logo 头部、footer.collapseButton 开启底部收起按钮。子导航用 string[] 简写。
导航样式定义
style 定外层高度、bodyStyle 定列表区高度：头部/底部固定，中间列表可滚动。
JSX 写法
声明式 <Nav.Item> / <Nav.Sub> 子组件定义导航树，替代 items 数据驱动。
配合路由
renderWrapper 在每个导航项外包一层自定义组件（如路由库的 Link），点击触发路由跳转。
垂直布局
默认 mode="vertical"：侧边导航，子导航内联展开，底部可收起。
水平布局
mode="horizontal"：顶部导航，子导航 hover 弹出浮层。
展开收起箭头位置
toggleIconPosition="left" 将子导航展开箭头置于文案前（默认 "right"）。
导航缩进
默认仅一级导航缩进；limitIndent=false 时多级导航按层级逐级缩进（仅垂直生效）。
非受控属性
defaultSelectedKeys / defaultOpenKeys 仅设初值，之后由组件内部维护状态。
受控属性
selectedKeys / openKeys / isCollapsed 全受控，配合 onSelect / onOpenChange / onCollapseChange 回写。
API 参考
Nav
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
items | 导航项列表，字段对齐 Semi：itemKey/text/icon/items（含 items 即子导航）。string 项取值作 text 与 itemKey | NavItemInput[] | [] |
mode | 导航方向：侧边/顶部 | 'vertical'|'horizontal' | 'vertical' |
selectedKeys | 受控选中项 key 数组 | NavKey[] | undefined |
defaultSelectedKeys | 默认选中项 key 数组 | NavKey[] | undefined |
openKeys | 受控展开子导航 key（vertical 且未折叠有效） | NavKey[] | undefined |
defaultOpenKeys | 默认展开子导航 key | NavKey[] | undefined |
multiple | 多选模式（叠加选中，配合 onDeselect） | boolean | false |
isCollapsed | 受控折叠态（仅 vertical 有效） | boolean | undefined |
defaultIsCollapsed | 默认折叠态（仅 vertical 有效） | boolean | false |
header | 头部配置（logo + 文案） | { logo?: Snippet; text?: string } | undefined |
footer | 底部配置（收起按钮，仅 vertical） | { collapseButton?: boolean } | undefined |
limitIndent | 仅一级缩进；false 时逐级缩进（依赖 level+indent） | boolean | true |
toggleIconPosition | 子导航展开箭头位置 | 'left'|'right' | 'right' |
expandIcon | 自定义展开箭头图标 | Snippet | undefined |
subNavMotion | 子导航展开动画开关 | boolean | true |
subNavOpenDelay | 浮层子导航展开延迟 ms（透传 Dropdown mouseEnterDelay） | number | 0 |
subNavCloseDelay | 浮层子导航关闭延迟 ms（透传 Dropdown mouseLeaveDelay） | number | 100 |
subDropdownProps | Nav 级：透传给所有子导航浮层 Dropdown 的默认属性 | NavDropdownProps | undefined |
tooltipShowDelay | 折叠态 tooltip 显示延迟 ms | number | undefined |
tooltipHideDelay | 折叠态 tooltip 隐藏延迟 ms | number | undefined |
getPopupContainer | 浮层挂载容器 | () => HTMLElement | undefined |
renderWrapper | 自定义导航项外层包裹 | Snippet | undefined |
class | 根元素自定义类名 | string | undefined |
style | 根元素自定义内联样式 | string | undefined |
bodyStyle | 导航项列表容器样式（对齐 Semi bodyStyle） | string | undefined |
Events
| 事件 | 载荷 | 说明 |
|---|---|---|
onSelect | NavSelectData | 选中导航项时触发（{itemKey,selectedKeys,selectedItems,domEvent,isOpen}） |
onDeselect | NavSelectData | 多选下取消选中时触发 |
onClick | NavClickData | 点击任意导航项时触发（{itemKey,domEvent,isOpen}） |
onOpenChange | NavOpenChangeData | 展开/收起子导航时触发（{itemKey,openKeys,domEvent,isOpen}） |
onCollapseChange | boolean | 折叠态变化时触发 |
Slots
| 名称 | 说明 |
|---|---|
headerSlot | 自定义头部（覆盖 header 配置对象） |
footerSlot | 自定义底部（覆盖 footer 配置对象） |
children | 声明式子项（<Nav.Item>/<Nav.Sub>），与 items 二选一 |
Nav.Header <div>
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
logo | Logo 节点 | Snippet | undefined |
text | Logo 文案 | string | Snippet | undefined |
link | 链接地址（整体包裹 <a>） | string | undefined |
linkOptions | 透传给 <a> 的属性 | Record<string,string> | undefined |
class | 自定义类名 | string | undefined |
style | 自定义内联样式 | string | undefined |
Nav.Footer <div>
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
collapseButton | 收起按钮（或自定义节点，仅 vertical 生效） | boolean | Snippet | false |
collapseText | 收起按钮文案（默认用 locale） | (collapsed: boolean) => string | undefined |
onClick | 点击事件回调 | (e: MouseEvent) => void | undefined |
class | 自定义类名 | string | undefined |
style | 自定义内联样式 | string | undefined |
Nav.Item <li[role=menuitem]>
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
itemKey | 导航项唯一标识（必填） | NavKey | — |
text | 导航项文案 | string | Snippet | — |
icon | 项前置图标 | Snippet | undefined |
disabled | 是否禁用 | boolean | false |
indent | 保留左侧图标占位（对齐 Semi indent） | boolean | undefined |
level | 嵌套层级（limitIndent=false 时自定义缩进，对齐 Semi level） | number | undefined |
link | 链接地址（渲染原生 <a>） | string | undefined |
linkOptions | 透传给 <a> 的属性（target/rel/download） | Record<string,string> | undefined |
onClick | 项级点击回调（富载荷 {itemKey,domEvent,isOpen}） | (data: NavClickData) => void | undefined |
onMouseEnter | 鼠标移入 | (e: MouseEvent) => void | undefined |
onMouseLeave | 鼠标移出 | (e: MouseEvent) => void | undefined |
Nav.Sub <li[role=menuitem]（浮层态用 Dropdown）>
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
itemKey | 子导航唯一标识（必填） | NavKey | — |
text | 子导航标题文案 | string | Snippet | — |
icon | 标题前置图标 | Snippet | undefined |
disabled | 是否禁用 | boolean | false |
indent | 保留左侧图标占位（对齐 Semi indent） | boolean | undefined |
level | 嵌套层级（limitIndent=false 时自定义缩进，对齐 Semi level） | number | 0 |
maxHeight | 子导航最大高度（内联展开动画） | number | 999 |
isOpen | 子导航是否展开（对齐 Semi isOpen） | boolean | undefined |
dropdownProps | 透传给该子导航浮层 Dropdown 的属性 | NavDropdownProps | undefined |
dropdownStyle | 透传给该子导航浮层 Dropdown 的内联样式 | string | undefined |
onMouseEnter | 标题鼠标移入 | (e: MouseEvent) => void | undefined |
onMouseLeave | 标题鼠标移出 | (e: MouseEvent) => void | undefined |
children | 内嵌 Nav.Item / Nav.Sub | Snippet | undefined |
Accessibility
| ARIA role | menu |
| 键盘交互 | TabShift+TabEnterSpaceArrowLeftArrowRight |
- 对齐 Semi：根为纯 <div>（无 nav landmark），列表 ul[role=menu][aria-orientation=mode]
- 叶子/子导航标题均为 role=menuitem；选中靠 -selected class（无 aria-current）
- 含 link 的叶子内含原生 <a>；子导航标题 aria-expanded 反映展开态
- 折叠态浮层子导航复用 Dropdown（role=menu + menuitem）；折叠收起按钮为 icon-only Button + aria-label（Tooltip 提示）