AI对话应用的左侧菜单栏的自适应隐藏和展示功能

 

 ＋ 薇： llike620

1. 响应式布局控制​​

   • ​​CSS媒体查询​​：当屏幕宽度 ≤ 1020px 时，通过 @media 规则强制隐藏菜单栏（初始状态为 transform: translateX(-100%)），并调整右侧内容区域占满全屏（margin-left: 0）。
   • ​​默认状态​​：屏幕宽度 > 1020px 时，菜单栏默认显示（transform: translateX(0)），右侧内容区域保留左侧边距（margin-left: 220px）。

2. ​​Vue 数据驱动​​

   • ​​showPannel 变量​​：控制菜单栏的显示/隐藏状态，通过动态绑定 :class 切换 hidden 和 visible 类。
   • ​​showMask 变量​​：在移动端点击菜单按钮时显示半透明遮罩层，点击遮罩层会关闭菜单。

3. ​​事件监听与处理​​

   • ​​handleResize 方法​​：监听窗口大小变化，自动调整菜单栏的显示状态（大屏显示/小屏隐藏）。
   • ​​showHidePannel 方法​​：点击菜单按钮时切换 showPannel 和 showMask 状态，触发菜单的滑入/滑出动画。

4. ​​动画效果​​

   • ​​CSS Transition​​：通过 transition: transform 0.3s ease 实现菜单栏平滑滑入滑出的动画效果。