AIClass/src/components/LeftPanel.vue

<template>
  <!-- 左侧折叠面板 -->
  <transition name="drawer-slide">
    <div class="left-group">
      <el-row class="tac">
        <el-col :span="12">
          <el-menu
            :default-active="currentActiveIndex"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-menu-item
              v-for="(item, index) in groupList"
              :key="index"
              :index="index.toString()"
              @click="navigateToAI(item)"
              @mouseover="item.isHover = true"
              @mouseout="item.isHover = false"
            >
              <!-- 根据状态切换图片-->
              <img
                :src="currentActiveIndex === index.toString() || item.isHover ? item.hoverIcon : item.icon"
                alt=""
                class="menu-icon"
              />
              {{ item.title }}
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
    </div>
  </transition>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { teacherList } from '@/api/teachers.js'

// 导入图片
// 白色图标
import question from '@/assets/icon/question.png'
import painting from '@/assets/icon/painting.png'
import Human from '@/assets/icon/human.png'
import image2image from '@/assets/icon/image2image.png'
import video from '@/assets/icon/video.png'
import labImage from '@/assets/icon/labImage.png'
import en from '@/assets/icon/en.png'
import canal from '@/assets/icon/canal.png'
import plant from '@/assets/icon/plant.png'
import poetry from '@/assets/icon/poetry.png'


// 黑色图标
import question02 from '@/assets/icon/question02.png'
import painting02 from '@/assets/icon/painting02.png'
import Human02 from '@/assets/icon/Human02.png'
import image2image02 from '@/assets/icon/image2image02.png'
import video02 from '@/assets/icon/video02.png'
import labImage02 from '@/assets/icon/labImage02.png'
import en02 from '@/assets/icon/en02.png'
import canal02 from '@/assets/icon/canal02.png'
import plant02 from '@/assets/icon/plant02.png'
import poetry02 from '@/assets/icon/poetry02.png'

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

// 添加抽屉显示状态
const drawerVisible = ref(true)
// 当前选中索引状态
const currentActiveIndex = ref('2')

// 路由路径到索引的映射
const pathIndexMap = {
  'ai-questions': '0',      // 智能问答
  'ai-painting': '1',       // 智能绘画
  'ai-laboratory': '2',     // 数字人老师
  'ai-poetry': '3' ,         // AI 古诗
  'ai-ennumerals': '4',     // 英文数字人老师
  'ai-image': '5',          // 图生图
  'ai-video': '6',          // 图生视频
  'ai-grandcanal': '7',     // 大运河
  'ai-plantexperts': '8',   // 植物专家
  'virtual-laboratory': '9', // 虚拟实验室
}

// 菜单项到路由的映射
const menuRouteMap = {
  '智能问答': '/ai-questions',
  '智能绘画': '/ai-painting',
  '数字人老师': '/ai-laboratory',
  'AI+古诗人': '/ai-poetry',
  '英文数字人老师': '/ai-ennumerals',
  '图生图': '/ai-image',
  '图生视频': '/ai-video',
  '大运河': '/ai-grandcanal',
  '植物专家': '/ai-plantexperts',
  '虚拟实验室': '/virtual-laboratory',
}

// 渲染侧边栏
const groupList = ref([
  {
    icon: question, // 默认图片
    hoverIcon: question02, // 交互图片
    title: '智能问答'
  },
  {
    icon: painting, 
    hoverIcon: painting02,
    title: '智能绘画'
  },
  {
    icon: Human,
    hoverIcon: Human02,
    title: '数字人老师'
  },
  {
    icon: poetry,
    hoverIcon: poetry02,
    title: 'AI+古诗人'
  },
  {
    icon: en,
    hoverIcon: en02,
    title: '英文数字人老师'
  },
  {
    icon: image2image,
    hoverIcon: image2image02,
    title: '图生图'
  },
  {
    icon: video,
    hoverIcon: video02,
    title: '图生视频'
  },
  {
    icon: canal,
    hoverIcon: canal02,
    title: '大运河'
  },
  {
    icon: plant,
    hoverIcon: plant02,
    title: '植物专家'
  },
  {
    icon: labImage,
    hoverIcon: labImage02,
    title: '虚拟实验室'
  }
])

// 更新选中状态的方法
const updateActiveIndex = () => {
  const path = route.path
  const from = window.history.state?.from // 从history.state获取来源信息
  
  // 从数字人老师页面进入智能问答页面
  if (path.includes('ai-questions') && from === 'ai-laboratory') {
    currentActiveIndex.value = '2' // 保持选中数字人老师
    return
  }
  
  // 从英文数字人老师页面进入智能问答页面
  if (path.includes('ai-questions') && from === 'ai-ennumerals') {
    currentActiveIndex.value = '4' // 保持选中英文数字人老师
    return
  }
   // 从大运河页面进入智能问答页面
  if (path.includes('ai-questions') && from === 'ai-grandcanal') {
    currentActiveIndex.value = '6' // 保持选中大运河
    return
  }
     // 从AI+古诗页面进入智能问答页面
  if (path.includes('ai-questions') && from === 'ai-poetry') {
    currentActiveIndex.value = '3' // 保持选中AI+古诗
    return
  }
  
  // 查找路径对应的索引
  for (const [key, index] of Object.entries(pathIndexMap)) {
    if (path.includes(key)) {
      currentActiveIndex.value = index
      return
    }
  }
}

// 组件挂载时确保默认选中状态
onMounted(() => {
  updateActiveIndex()
})

// 添加路由变化监听，更新选中状态
watch(() => route.path, () => {
  updateActiveIndex()
}, { immediate: true })

// 存储小智数据
const personData = ref([])

// 跳转智能问答
const navigateToAI = async (group) => {
  const routePath = menuRouteMap[group.title]
  
  if (group.title === '智能问答') {
    try {
      const grade = route.query.grade || localStorage.getItem('selectedGrade')
      // 获取小学低年级AI数据
      const juniorAIRes = await teacherList({ category: grade + 'AI' })
      const aiPerson = juniorAIRes.data.list.find(
        person => person.name === '小智'
      )
      
      if (aiPerson) {
        personData.value = {
          id: aiPerson.id,
          name: aiPerson.name,
          image: aiPerson.model2dPath,
          message: aiPerson.systemMessage,
          default: aiPerson.questTip
        }
        
        const newState = {
          ...personData.value,
          category: grade + 'AI'
        }
        
        // 先 push 再手动更新 history.state（确保原生 state 同步）
        router
          .push({
            path: routePath,
            state: newState
          })
          .then(() => {
            // 手动替换当前历史记录的 state 为最新值
            window.history.replaceState(newState, '', window.location.href)
            window.location.reload()
          })
      } else {
        console.warn('未找到名为小智的数据')
      }
    } catch (error) {
      console.error('获取小学低年级AI数据失败:', error)
    }
  } else {
    // 其他菜单项直接跳转
    router.push(routePath)
  }
}

// 处理菜单展开和关闭
const handleOpen = () => {}
const handleClose = () => {}

// 导出状态和方法供父组件使用
defineExpose({
  drawerVisible,
  toggleDrawer: () => {
    drawerVisible.value = !drawerVisible.value
  }
})
</script>

<style scoped lang="scss">
@use 'sass:math';

// 定义rpx转换函数
@function rpx($px) {
  @return math.div($px, 750) * 100vw;
}

/* 添加过渡样式 */
::v-deep .drawer-slide-enter-active,
::v-deep .drawer-slide-leave-active {
  transition: all 0.3s ease;
}

::v-deep .drawer-slide-enter-from,
::v-deep .drawer-slide-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}

// 侧边栏
.left-group {
  width: rpx(135);
  height: 100%;
  background: linear-gradient(to bottom, #001169, #8a78d0);
  overflow-y: auto;
  
  // 自定义滚动条样式
  &::-webkit-scrollbar {
    width: rpx(0); // 滚动条宽度
  }
  
  &::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 0.1); // 滚动条轨道背景色
    border-radius: rpx(2); // 滚动条轨道圆角
  }
  
  &::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3); // 滚动条滑块颜色
    border-radius: rpx(2); // 滚动条滑块圆角
    transition: background-color 0.3s ease; // 滑块颜色过渡效果
  }
  
  &::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.5); // 鼠标悬停时的滑块颜色
  }
}

.mb-2 {
  color: black;
  margin-top: rpx(1);
}

.tac ::v-deep(.el-menu) {
  background-color: transparent;
  border: none;
  width: 100%;
  margin-top: rpx(25);
  margin-left: rpx(10);
}

.el-menu-item {
  width: rpx(115);
  height: rpx(25);
  margin-bottom: rpx(5);
  border-radius: rpx(6);
  color: white;
  font-size: rpx(8);
}

.el-menu-item .el-icon svg {
  font-size: rpx(15);
  color: white;
}

.el-menu .el-menu-item:hover {
  background: linear-gradient(to bottom, #ffefb0, #ffcc00);
  box-shadow: 0 8px 8px rgb(0, 0, 0, 0.3);
  color: black;
  font-size: rpx(8);
}

:deep(.el-menu .el-menu-item.is-active) {
  background: linear-gradient(to bottom, #fee78a, #ffce1b);
  color: black;
  font-size: rpx(8);
  box-shadow: 0 4px 8px rgba(3, 3, 3, 0.3);
}

.menu-icon {
  width: rpx(11);
  height: rpx(11);
  margin-right: rpx(2);
}
</style>