# 顶部菜单动态宽度检测测试指南

## 功能说明
顶部菜单现在会根据可用空间动态调整显示的菜单项数量，超出部分会自动放入"更多"菜单中。

## 测试场景

### 1. 窗口大小调整
- **操作**: 拖动浏览器窗口调整大小
- **预期**: 菜单项数量会实时调整，确保不与右侧"Select Company"输入框重叠
- **间隔**: 20px 安全边距

### 2. 侧边栏展开/收起
- **操作**: 点击汉堡菜单图标切换侧边栏状态
- **预期**: 
  - 侧边栏收起时，顶部菜单可用空间增加，显示更多菜单项
  - 侧边栏展开时，顶部菜单可用空间减少，部分菜单项移入"更多"
- **延迟**: 300ms（等待动画完成）

### 3. 语言切换
- **操作**: 切换系统语言（中文/英文）
- **预期**: 
  - 菜单文本长度改变
  - 自动重新计算可显示的菜单项数量
  - 保持不与右侧元素重叠

### 4. 路由切换
- **操作**: 点击不同的菜单项切换页面
- **预期**: 
  - 切换页面时重新计算可用宽度
  - 确保布局稳定
- **延迟**: 150ms（防抖）

### 5. 顶部导航模式切换
- **操作**: 在设置中切换"顶部导航"开关
- **预期**: 切换到顶部导航模式时，立即计算并正确显示菜单

## 调试模式

如果需要查看详细的计算过程，可以在代码中启用调试模式：

```typescript
// 在 TopNav/index.vue 中
const DEBUG_MODE = true; // 改为 true
```

启用后，浏览器控制台会显示：
- 可用宽度计算详情
- 每个菜单项的宽度
- 最终显示的菜单数量

## 关键参数

| 参数 | 值 | 说明 |
|------|-----|------|
| 安全边距 | 20px | 顶部菜单与右侧元素之间的间隔 |
| "更多"按钮预留宽度 | 100px | 用于判断是否需要显示"更多"按钮 |
| 侧边栏动画延迟 | 300ms | 等待侧边栏展开/收起动画完成 |
| 路由切换防抖 | 150ms | 避免频繁计算 |
| 窗口调整防抖 | 200ms | 优化性能 |

## 已监听的变化

✅ 窗口大小调整 (resize)  
✅ 侧边栏展开/收起状态 (sidebar.opened)  
✅ 侧边栏显示/隐藏 (sidebar.hide)  
✅ 顶部导航模式切换 (topNav)  
✅ 语言切换 (locale)  
✅ 菜单内容变化 (topMenus)  
✅ 路由变化 (route.path)  

## 边界条件处理

1. **最小宽度保护**: 可用宽度至少 100px
2. **至少显示一项**: 即使空间不足，也会显示至少一个菜单项
3. **右侧菜单未就绪**: 首次渲染时会延迟 100ms 重试
4. **动画未完成**: 侧边栏动画完成后再计算

## 注意事项

- 所有计算都在 `nextTick()` 中执行，确保 DOM 已更新
- 使用防抖机制避免过度计算
- 支持动态菜单数量变化
- 自适应不同分辨率和设备