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

功能说明

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

测试场景

1. 窗口大小调整

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

2. 侧边栏展开/收起

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

3. 语言切换

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

4. 路由切换

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

5. 顶部导航模式切换

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

调试模式

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

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

启用后，浏览器控制台会显示：

可用宽度计算详情
每个菜单项的宽度
最终显示的菜单数量

关键参数

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

已监听的变化

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

边界条件处理

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

注意事项

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