Wx_WxCheck_Prod/admin-web/src/components/Layout/Sidebar.vue

<template>
  <!-- 桌面/平板：固定侧边栏（不做展开/收起动画） -->
  <aside v-if="!isMobile" class="sidebar-desktop">
    <el-menu router :default-active="activePath" class="sidebar-menu" @select="handleSelect">
      <el-menu-item index="/">
        <el-icon><HomeFilled /></el-icon>
        <span>首页</span>
      </el-menu-item>
      <el-menu-item index="/conversations">
        <el-icon><Message /></el-icon>
        <span>会话记录管理</span>
      </el-menu-item>
      <el-menu-item index="/users">
        <el-icon><User /></el-icon>
        <span>用户管理</span>
      </el-menu-item>
    </el-menu>
  </aside>

  <!-- 手机端：抽屉菜单（Element Plus 自带隐藏/遮罩/动画） -->
  <el-drawer
    v-else
    v-model="drawerOpen"
    direction="ltr"
    size="250px"
    :with-header="false"
  >
    <el-menu router :default-active="activePath" class="drawer-menu" @select="handleSelect">
      <el-menu-item index="/">
        <el-icon><HomeFilled /></el-icon>
        <span>首页</span>
      </el-menu-item>
      <el-menu-item index="/conversations">
        <el-icon><Message /></el-icon>
        <span>会话记录管理</span>
      </el-menu-item>
      <el-menu-item index="/users">
        <el-icon><User /></el-icon>
        <span>用户管理</span>
      </el-menu-item>
    </el-menu>
  </el-drawer>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
import { HomeFilled, Message, User } from '@element-plus/icons-vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue'])

const route = useRoute()

// 响应式布局：判断是否为手机端
const isMobile = ref(false)

const handleResize = () => {
  isMobile.value = window.innerWidth < 768
  // 切回非手机端时，确保抽屉关闭
  if (!isMobile.value && props.modelValue) {
    emit('update:modelValue', false)
  }
}

onMounted(() => {
  handleResize()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})

const activePath = computed(() => route.path)

// el-drawer v-model 适配
const drawerOpen = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val)
  }
})

const handleSelect = () => {
  // 手机端点击菜单项后自动关闭抽屉
  if (isMobile.value) {
    emit('update:modelValue', false)
  }
}
</script>

<style scoped lang="scss">
.sidebar-desktop {
  position: fixed;
  top: 64px;
  left: 0;
  bottom: 0;
  width: 250px;
  background-color: var(--background-color);
  border-right: 1px solid var(--border-color);
  z-index: 99;
  overflow-y: auto;

  @media (max-width: 1023px) {
    width: 200px;
  }
}

.sidebar-menu,
.drawer-menu {
  border-right: none;
}

:deep(.el-drawer__body) {
  padding: 0;
}
</style>