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

<template>
  <aside
    class="sidebar"
    :class="{ 'sidebar--open': isOpen }"
  >
    <nav class="sidebar-nav">
      <ul class="nav-list">
        <li class="nav-item" v-for="menu in menuList" :key="menu.path">
          <router-link
            :to="menu.path"
            class="nav-link"
            :class="{ 'is-active': $route.path === menu.path }"
            @click="handleMenuClick"
          >
            <el-icon class="nav-icon"><component :is="menu.icon" /></el-icon>
            <span class="nav-text">{{ menu.title }}</span>
          </router-link>
        </li>
      </ul>
    </nav>
    
    <!-- 遮罩层（手机端） -->
    <div
      v-if="isOpen && isMobile"
      class="sidebar-mask"
      @click="handleMaskClick"
    ></div>
  </aside>
</template>

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

// 菜单数据
const menuList = [
  {
    path: '/',
    title: '首页',
    icon: HomeFilled
  },
  {
    path: '/conversations',
    title: '会话记录管理',
    icon: Message
  },
  {
    path: '/users',
    title: '用户管理',
    icon: User
  }
]

// 侧边栏显示状态（手机端）
const props = defineProps({
  isOpen: {
    type: Boolean,
    default: false
  }
})

// 定义事件
const emit = defineEmits(['closeSidebar'])

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

// 监听窗口大小变化
const handleResize = () => {
  isMobile.value = window.innerWidth < 768
  // 如果不是手机端，关闭侧边栏
  if (!isMobile.value) {
    emit('closeSidebar')
  }
}

// 初始化响应式状态
onMounted(() => {
  handleResize()
  window.addEventListener('resize', handleResize)
})

// 清理事件监听
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})

// 菜单点击处理（手机端）
const handleMenuClick = () => {
  if (isMobile.value) {
    emit('closeSidebar')
  }
}

// 遮罩层点击处理（手机端）
const handleMaskClick = () => {
  emit('closeSidebar')
}
</script>

<style scoped>
.sidebar {
  position: fixed;
  top: 64px;
  left: 0;
  bottom: 0;
  width: 250px;
  background-color: var(--background-color);
  border-right: 1px solid var(--border-color);
  transition: all 0.3s ease;
  z-index: 99;
  overflow-y: auto;
  
  /* 桌面端默认显示，手机端默认隐藏 */
  @media (max-width: 767px) {
    transform: translateX(-100%);
  }
}

/* 侧边栏打开状态（手机端） */
.sidebar--open {
  @media (max-width: 767px) {
    transform: translateX(0);
  }
}

.sidebar-nav {
  padding: 20px 0;
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-item {
  margin-bottom: 4px;
}

.nav-link {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  color: var(--text-color);
  text-decoration: none;
  transition: all 0.3s;
  
  &:hover {
    background-color: var(--border-color-lighter);
    color: var(--primary-color);
  }
  
  &.is-active {
    background-color: rgba(64, 158, 255, 0.1);
    color: var(--primary-color);
    border-right: 3px solid var(--primary-color);
  }
}

.nav-icon {
  font-size: 18px;
  margin-right: 12px;
  width: 20px;
  text-align: center;
}

.nav-text {
  font-size: 14px;
}

/* 遮罩层（手机端） */
.sidebar-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 98;
  @media (min-width: 768px) {
    display: none;
  }
}

/* 平板端侧边栏宽度调整 */
@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar {
    width: 200px;
  }
}
</style>