shudao-main/shudao-vue-frontend/src/components/Sidebar.vue

<template>
  <div class="nav-sidebar">
    <!-- Logo区域 -->
    <div class="logo-section" @click="goToHome">
      <img src="@/assets/index/2.jpg" alt="logo" class="logo-image">
    </div>

    <!-- 导航菜单 -->
    <div class="nav-menu">
      <div class="nav-item" :class="{ active: currentRoute === 'Chat' }" @click="handleNavItem('ai-chat')">
        <img src="@/assets/Chat/17.png" alt="AI问答" class="nav-icon">
        <span class="nav-text">AI问答</span>
      </div>
      <div class="nav-item" :class="{ active: currentRoute === 'HazardDetection' }" @click="handleNavItem('hazard-detection')">
        <img src="@/assets/Chat/8.png" alt="隐患识别" class="nav-icon">
        <span class="nav-text">隐患提示</span>
      </div>
      <div class="nav-item" :class="{ active: currentRoute === 'SafetyHazard' }" @click="handleNavItem('safety-hazard')">
        <img src="@/assets/Chat/14.png" alt="安全隐患" class="nav-icon">
        <span class="nav-text">安全培训</span>
      </div>
      <div class="nav-item" :class="{ active: currentRoute === 'AIWriting' }" @click="handleNavItem('ai-writing')">
        <img src="@/assets/Chat/13.png" alt="AI写作" class="nav-icon">
        <span class="nav-text">AI写作</span>
      </div>
      <div class="nav-item" :class="{ active: currentRoute === 'ExamWorkshop' }" @click="handleNavItem('exam-workshop')">
        <img src="@/assets/Chat/19.png" alt="考试工坊" class="nav-icon">
        <span class="nav-text">考试工坊</span>
      </div>
    </div>

    <!-- 退出按钮 -->
    <!-- <div class="logout-section">
      <div class="nav-item logout-item" @click="handleLogout">
        <img src="@/assets/out.png" alt="退出" class="out-icon">
        <span class="nav-text">退出</span>
      </div>
    </div> -->
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { performLogout } from '../utils/auth.js'

const router = useRouter()
const route = useRoute()

// 当前路由
const currentRoute = computed(() => {
  console.log('当前路由名称:', route.name, '当前路径:', route.path)
  return route.name
})

// 切换导航项
const handleNavItem = (navType) => {
  console.log('切换导航:', navType)
  switch (navType) {
    case 'ai-chat':
      router.push('/chat')
      break
    case 'safety-hazard':
      router.push('/safety-hazard')
      break
    case 'hazard-detection':
      router.push('/hazard-detection')
      break
    case 'ai-writing':
      router.push('/ai-writing')
      break
    case 'exam-workshop':
      router.push('/exam-workshop')
      break
  }
}

// 回到首页
const goToHome = () => {
  router.push('/')
}

// 退出登录
const handleLogout = () => {
  console.log('退出登录')
  performLogout()
}
</script>

<style lang="less" scoped>
/* 最左侧导航栏 */
.nav-sidebar {
  width: 80px;
  min-width: 80px;
  flex-shrink: 0;
  background: url('@/assets/Chat/1.png') no-repeat center center;
  background-size: cover;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 8px;
}

/* 最左侧导航栏样式 */
.nav-sidebar {
  .logo-section {
    margin-bottom: 30px;
    cursor: pointer;
    transition: opacity 0.3s ease;
    
    &:hover {
      opacity: 0.8;
    }
    
    .logo-image {
      width: 44px;
      height: 44px;
      object-fit: contain;
      // border-radius: 50%;
    }
  }
  
  .nav-menu {
    display: flex;
    flex-direction: column;
    gap: 15px;
    
    .nav-item {
      width: 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      
      .nav-icon {
        width: 44px;
        height: 44px;
        object-fit: contain;
        margin-bottom: 4px;
        padding: 8px;
        border-radius: 50%;
        transition: background 0.3s ease;
      }
      
      &:hover .nav-icon {
        background: rgba(255, 255, 255, 0.1);
      }
      
      &.active .nav-icon {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.1);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
        filter: brightness(1.2);
      }
      
      &.active .nav-text {
        color: #FFFFFF;
        font-weight: 600;
      }
      
      .nav-text {
        font-size: 12px;
        color: #CACACA;
        text-align: center;
        line-height: 1.2;
        white-space: nowrap;
        transition: all 0.3s ease;
      }
    }
  }
  
  /* 退出按钮区域 */
  .logout-section {
    margin-top: auto;
    padding-top: 20px;
   
    
    .logout-item {
      &:hover .nav-icon {
        background: rgba(255, 0, 0, 0.1);
      }
      
      .out-icon {
        // filter: brightness(0.8);
        width: 44px;
        height: 44px;
        object-fit: contain;
        margin-bottom: 4px;
        padding: 8px;
        // border-radius: 50%;
        transition: background 0.3s ease;
      }
      
      .nav-text {
        color: #FF6B6B;
      }
    }
  }
}


</style>