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)"
              v-model="currentActiveIndex"
              @mouseover="item.isHover = true"
              @mouseout="item.isHover = false"
            >
              <!-- 根据状态切换图片currentActiveIndex === index.toString() || item.isHover ? item.hoverIcon :  -->
               <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 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 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 { teacherList } from '@/api/teachers.js'

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

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

// 渲染侧边栏
const groupList = ref([
  {
    icon: question, // 默认图片
    hoverIcon: question02, // 交互图片
    title: '智能问答'
  },
  {
    icon: painting, 
    hoverIcon: painting02,
    title: '智能绘画'
  },
  {
    icon: Human,
    hoverIcon: Human02,
    title: '数字人老师'
  },
  {
    icon: image2image,
    hoverIcon: image2image02,
    title: '图生图'
  },
  {
    icon: video,
    hoverIcon: video02,
    title: '图生视频'
  }
])


// 提取更新选中状态的逻辑为单独函数
// 优化后的更新选中状态的方法
const updateActiveIndex = () => {
  const path = route.path;
  const from = route.query.from;
  // 使用映射表存储路径和索引的对应关系
  const pathIndexMap = {
    'ai-questions': '0', // 智能问答
    'ai-painting': '1',  // 智能绘画
    'ai-laboratory': '2', // 数字人老师
    'ai-image': '3' ,     // 图生图
    'ai-video': '4' ,     // 图生视频
  };
  // 从数字人老师页面进入智能问答页面
  if (path.includes('ai-questions') && from === 'ai-laboratory') {
    currentActiveIndex.value = '2'; // 保持选中数字人老师
    return;
  }
  // 查找路径对应的索引
  for (const [key, index] of Object.entries(pathIndexMap)) {
    if (path.includes(key)) {
      currentActiveIndex.value = index;
      return;
    }
  }
};

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

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

// 存储小智数据
const personData = ref([])
// 跳转智能问答
const navigateToAI = async (group) => {
  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
        }
        console.log(personData.value)
        router
          .push({
            path: '/ai-questions',
            query: {
              ...personData.value,
              category: grade + 'AI'
            }
          })
      } else {
        console.warn('未找到名为小智的数据')
      }
    } catch (error) {
      console.error('获取小学低年级AI数据失败:', error)
    }
  }
  if (group.title === '智能绘画') {
    router.push('/ai-painting')
  }
  if (group.title === '数字人老师') {
    router.push('/ai-laboratory')
  }
  if (group.title === '图生图') {
    router.push('/ai-image')
  }
  if (group.title === '图生视频') {
    router.push('/ai-video')
  }
}

// 处理菜单展开和关闭
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);
}
.mb-2 {
  color: black;
  margin-top: rpx(1);
}
.tac ::v-deep(.el-menu) {
  background-color: transparent;
  border: none;
  width: 100%;
  margin-top: rpx(55);
  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>