ppa-frontEnd/src/components/Sidebar.vue

<template>
  <div class="sidebar">
    <div class="logo-wrapper" v-show="!isCollapse">
      <div class="logo-container">
        <div class="logo-icon-bg">
          <el-icon class="logo-icon-main"><Reading /></el-icon>
        </div>
        <span class="logo-text">资讯管理系统</span>
      </div>
    </div>

    <div class="logo-collapsed" v-show="isCollapse">
      <el-icon class="logo-collapsed-icon"><Reading /></el-icon>
    </div>

    <el-menu
      :default-active="activeMenu"
      class="el-menu-vertical"
      :collapse="isCollapse"
      router
      background-color="#ffffff"
      text-color="#606266"
      active-text-color="#409eff"
      :collapse-transition="false"
    >
      <el-menu-item index="/news" class="menu-item">
        <el-icon><Document /></el-icon>
        <template #title>
          <div class="menu-title">资讯管理</div>
        </template>
      </el-menu-item>

      <el-menu-item index="/reports" class="menu-item">
        <el-icon><Folder /></el-icon>
        <template #title>
          <div class="menu-title">报告管理</div>
        </template>
      </el-menu-item>

      <el-menu-item index="/sources" class="menu-item">
        <el-icon><Link /></el-icon>
        <template #title>
          <div class="menu-title">来源管理</div>
        </template>
      </el-menu-item>

      <el-menu-item index="/categories" class="menu-item">
        <el-icon><Collection /></el-icon>
        <template #title>
          <div class="menu-title">分类管理</div>
        </template>
      </el-menu-item>
    </el-menu>

    <div class="collapse-toggle" @click="toggleCollapse">
      <el-icon><component :is="isCollapse ? Expand : Fold" /></el-icon>
      <span v-show="!isCollapse" class="collapse-text">收起菜单</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { Document, Folder, Link, Collection, Fold, Expand, Reading } from '@element-plus/icons-vue'

const route = useRoute()
const activeMenu = ref(route.path)
const isCollapse = defineModel('collapse', { type: Boolean, default: false })

// Watch for route changes
watch(
  () => route.path,
  (newPath) => {
    activeMenu.value = newPath
  }
)

const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}
</script>

<style>
.sidebar .el-menu--collapse {
  .el-menu-item {
    .el-menu-tooltip__trigger {
      justify-content: center;
    }
  }
}
</style>
<style scoped>
.sidebar {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #ebeef5;
  overflow-x: hidden; /* 防止横向滚动条 */
}

/* 展开状态的logo容器 */
.logo-wrapper {
  padding: 20px 0;
  text-align: center;
  border-bottom: 1px solid #ebeef5;
}

.logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.logo-icon-bg {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #409eff, #66b1ff);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(64, 158, 255, 0.2);
}

.logo-icon-main {
  font-size: 20px;
  color: white;
}

.logo-text {
  color: #303133;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* 折叠状态的logo */
.logo-collapsed {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #ebeef5;
}

.logo-collapsed-icon {
  font-size: 24px;
  color: #409eff;
}

.el-menu-vertical {
  border: none;
  flex: 1;
  padding: 10px 0;
  overflow-x: hidden; /* 防止横向滚动条 */
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 220px;
}

.collapse-toggle {
  padding: 15px 0;
  text-align: center;
  color: #606266;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-top: 1px solid #ebeef5;
}

.collapse-toggle:hover {
  background-color: #f5f7fa;
  color: #409eff;
}

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

/* 菜单项通用样式 */
.menu-item {
  margin: 2px 10px;
  border-radius: 6px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  height: 46px;
}

.menu-item:hover {
  background-color: #f5f7fa !important;
  transform: translateX(3px);
}

.menu-item.is-active {
  background-color: #ecf5ff !important;
  color: #409eff !important;
}

.menu-item.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background-color: #409eff;
}

/* 菜单项内容容器 */
:deep(.el-menu-item > .el-menu-item-content) {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 20px;
}

/* 菜单项标题 */
.menu-title {
  font-size: 14px;
  font-weight: 500;
  margin-left: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* 图标样式 */
.el-menu-item .el-icon {
  font-size: 16px;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.menu-item:hover .el-icon {
  transform: scale(1.1);
}

/* 折叠状态样式 */
.el-menu--collapse {
  :deep(.el-menu-item) {
    margin: 2px 5px;
    height: 46px;
    padding: 0;

    &:hover {
      background-color: #f5f7fa !important;
    }
  }

  /* 菜单项文字在折叠时隐藏 */
  :deep(.menu-title) {
    display: none;
  }

  /* 激活项的特殊样式 */
  :deep(.menu-item.is-active) {
    border-right: 3px solid #409eff;
  }

  /* 图标居中 - 最终修复 */
  :deep(.el-menu-item > .el-menu-item-content) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 !important;
  }

  /* 确保图标本身居中 */
  :deep(.el-menu-item > .el-menu-item-content > .el-icon) {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  /* 特别处理SVG图标居中 */
  :deep(.el-menu-item > .el-menu-item-content > .el-icon svg) {
    margin: 0 auto;
  }
}

/* 展开状态样式 */
:not(.el-menu--collapse) {
  :deep(.menu-item.is-active) {
    border-right: 3px solid #409eff;
  }
}

/* 响应式优化 */
@media (max-width: 768px) {
  .el-menu-vertical:not(.el-menu--collapse) {
    width: 180px;
  }

  .logo-text {
    font-size: 16px;
  }
}
</style>