# Pika 导航组件规划
> 基于 Pika 设计规范的导航组件设计
> 设计原则：以 Apple HIG 为准，AI-First，三级别尺寸体系
---
## 一、组件体系概览
Pika 导航组件采用三大类设计：
| 类别 | 组件 | 说明 | 优先级 |
|------|------|------|-------|
| **导航菜单** | Menu | 导航菜单 | P0 |
| **标签页** | Tabs | 标签页切换 | P1 |
| **面包屑** | Breadcrumb | 路径导航 | P1 |
| **步骤条** | Steps | 分步流程 | P2 |
| **下拉菜单** | Dropdown | 下拉操作 | P2 |
| **分页** | Pagination | 分页导航 | P2 |
---
## 二、核心设计原则
### 2.1 AI-First 设计原则（与根规范一致）
| 原则 | 说明 |
|-----|------|
| **零歧义** | Props 名称自解释，无简称、无隐式行为 |
| **零默认假设** | 所有视觉行为显式声明 |
| **一致性** | 相同概念用相同 prop 名 |
| **扁平化** | 最多一层嵌套 |
| **确定性** | 相同输入始终产生相同输出 |
### 2.2 统一尺寸体系（三级别）
所有导航组件使用统一的三级别尺寸体系：
| 级别 | 尺寸 | 用途 |
|-----|------|------|
| **small** | 小尺寸 | 紧凑列表、表格内 |
| **middle** | 中尺寸 | 默认使用 |
| **large** | 大尺寸 | 突出显示、重点导航 |
### 2.3 Design Token
```css
/* 导航组件尺寸 */
--nv-nav-item-height-small: 32px;
--nv-nav-item-height-middle: 40px;
--nv-nav-item-height-large: 48px;
--nv-nav-item-padding-small: 8px 12px;
--nv-nav-item-padding-middle: 12px 16px;
--nv-nav-item-padding-large: 16px 24px;
```
---
## 三、组件详细设计
### 3.1 Menu 导航菜单
#### 功能说明
Menu 是应用的主要导航组件，支持水平模式和垂直模式。
#### Props 定义（AI-First）
```tsx
export interface MenuProps {
/** 菜单模式 */
mode?: 'horizontal' | 'vertical' | 'inline'
/** 主题色 */
theme?: 'light' | 'dark'
/** 选中菜单项 */
selectedKey?: string
/** 展开的子菜单 */
openKeys?: string[]
/** 默认展开的子菜单 */
defaultOpenKeys?: string[]
/** 触发方式 */
triggerSubMenuAction?: 'hover' | 'click'
/** 动画时长 */
duration?: number
/** 菜单元数据 */
items?: MenuItem[]
/** 选中回调 */
onSelect?: (key: string) => void
/** 展开回调 */
onOpenChange?: (keys: string[]) => void
/** 子元素 */
children?: React.ReactNode
className?: string
style?: React.CSSProperties
}
export interface MenuItem {
/** 唯一标识 */
key: string
/** 显示文本 */
label: React.ReactNode
/** 图标 */
icon?: React.ReactNode
/** 是否禁用 */
disabled?: boolean
/** 子菜单 */
children?: MenuItem[]
}
export interface SubMenuProps {
/** 唯一标识 */
key: string
/** 显示文本 */
label: React.ReactNode
/** 图标 */
icon?: React.ReactNode
/** 子菜单项 */
items?: MenuItem[]
/** 子元素 */
children?: React.ReactNode
}
```
#### 使用示例
```tsx
// 水平菜单
// 垂直菜单