# 侧边菜单

## 📋 业务与功能

### 1.1 核心目标

该组件提供后台场景常见的侧边导航能力，支持分级菜单与折叠交互。

该元素强调结构清晰、信息密度适中，适配后台场景。

### 1.2 功能清单

- **顶部标题区域**：显示应用或系统名称
- **菜单项区域**：支持一级/二级菜单项、图标与禁用状态
- **折叠按钮**：控制侧边栏折叠/展开

### 1.3 交互要点

- 点击菜单项：选中菜单项并触发 `onMenuSelect`
- 点击折叠按钮：切换折叠状态并触发 `onCollapseChange`
- 子菜单展开/收起：点击父级菜单项控制
- 悬停菜单项：高亮反馈

---

## 📊 内容规划

### 2.1 信息架构

```
侧边菜单
├── 顶部标题
│   └── 折叠按钮
└── 菜单列表
    ├── 一级菜单
    └── 二级子菜单（可选）
```

### 2.2 数据来源

- **数据类型**：菜单项列表（`items`）
- **数据源**：用户提供（props）/ 内置默认菜单
- **关键字段**：
  - `key`: 唯一标识
  - `label`: 显示文本
  - `icon`: 图标名称（dashboard / shop / user / setting）
  - `disabled`: 是否禁用
  - `children`: 子菜单数组

### 2.3 内容示例

**默认菜单示例**：

- 仪表盘 / 订单管理（含订单列表、退款管理）/ 用户管理 / 系统设置

---

## 🎨 布局与结构

### 3.1 整体布局

- **布局模式**：垂直侧边栏
- **容器宽度**：固定
- **关键尺寸**：
  - 展开宽度：`240px`
  - 折叠宽度：`64px`
  - 顶部标题区高度：`48px`

### 3.2 响应式适配

- **桌面端（≥1200px）**：默认展开显示
- **平板端（768-1199px）**：建议默认折叠或在主区保留更大空间
- **移动端（<768px）**：建议折叠或使用抽屉式替代

---

## 🎨 视觉规范

### 4.1 设计规范来源

**设计依据**：

- [x] 用户提供的设计规范：`/docs/设计规范.UIGuidelines.md`
- [x] 主题设计系统：`/src/themes/antd-new/`（DESIGN-SPEC.md + designToken.json + globals.css）

### 4.2 自定义设计要点

**自定义色彩**（如有）：

- 无

**自定义尺寸**（如有）：

- 无

**其他自定义规范**（如有）：
- 无

### 4.3 组件状态

- **默认态（default）**：菜单项正常显示
- **悬停态（hover）**：菜单项高亮背景
- **选中态（selected）**：当前菜单项高亮
- **禁用态（disabled）**：菜单项灰化不可点击
- **折叠态（collapsed）**：仅展示图标，标题隐藏

---

## ⚙️ Axure API 说明

### 5.1 事件列表（eventList）

### 5.2 动作列表（actionList）

### 5.3 变量列表（varList）

### 5.4 配置项列表（configList）

### 5.5 数据项列表（dataList）

**数据结构**：

```typescript
{
  items: Array<{
    key: string;        // 菜单项唯一标识
    label: string;      // 显示文本
    icon?: string;      // 图标名称
    disabled?: boolean; // 是否禁用
    children?: Array<{  // 子菜单项
      key: string;
      label: string;
      icon?: string;
      disabled?: boolean;
    }>;
  }>;
}
```