AIClass/src/views/AILaboratory.vue

<template>
  <!-- AI实验室 -->
  <div class="home-container">
    <!-- 展开收起侧边栏 -->
    <div class="icon-expand">
      <el-icon
        @click="toggleDrawer"
        :style="{ color: drawerVisible ? 'white' : '#B6B0D8' }"
      >
        <component :is="drawerVisible ? Fold : Expand" />
      </el-icon>
    </div>

    <!-- 左侧折叠面板 -->
    <transition name="drawer-slide">
      <div class="left-group" v-if="drawerVisible">
        <el-row class="tac">
          <el-col :span="12">
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
            >
              <el-menu-item
                v-for="(item, index) in groupList"
                :key="index"
                @click="navigateToAI(item)"
              >
                <el-icon><component :is="item.icon" /></el-icon>
                {{ item.title }}
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </div>
    </transition>

    <!-- 右侧数字人 -->
    <div class="number-people">
      <div class="title-box">
        <div class="box-icon" @click="goBack">
          <el-icon class="left-icon"><ArrowLeftBold /></el-icon>
          AI实验室 | {{ groupList[2].title }}
        </div>
      </div>

      <!-- 动态渲染数字人 -->
      <div class="content-box">
        <div
          v-for="(person, index) in peopleList"
          :key="index"
          @click="navigateToAIQuestions(person)"
          class="small-box"
        >
          <div class="people-box">
            <img :src="person.image" alt="{{ person.name }}" />
          </div>
          <div class="people-title">{{ person.name }}</div>
        </div>
      </div>
      
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  Document,
  Menu as IconMenu,
  Setting,
  ArrowLeftBold,
  Fold,
  Expand,
  ChatLineRound,
  Picture,
  MagicStick,
  Avatar
} from '@element-plus/icons-vue'
const router = useRouter()

// 添加抽屉显示状态
const drawerVisible = ref(true)
// 添加切换抽屉显示状态的函数
const toggleDrawer = () => {
  drawerVisible.value = !drawerVisible.value
}


// 返回上一页
const goBack = () => {
  router.push('/home')
}
// 引入
import NumberPeople00 from '@/assets/images/xiaozhi.png'
import NumberPeople01 from '@/assets/images/number-people01.png'
import NumberPeople02 from '@/assets/images/number-people02.png'
import NumberPeople03 from '@/assets/images/number-people03.png'
import NumberPeople04 from '@/assets/images/number-people04.png'
import NumberPeople05 from '@/assets/images/number-people05.png'

// 渲染数字人老师及图片
const peopleList = ref([
  { id: 21, name: '鲁迅', image: NumberPeople01 , message: '您好，我叫鲁迅，著名的文学家、思想家、革命家、教育家、民主战士，新文化运动的重要参与者，中国现代文学的奠基人之一' },
  { id: 22, name: '门捷列夫', image: NumberPeople02 , message: '您好，我是门捷列夫，俄国科学家，发现并归纳元素周期律，依照原子量，制作出世界上第一张元素周期表。你需要问我什么问题呢？' },
  { id: 19, name: '牛顿', image: NumberPeople03 , message: '您好，我是牛顿爵士，生于英格兰林肯郡伍尔索普村，英国物理学家、数学家、哲学家。欢迎向我询问物理学、数学、哲学问题。' },
  { id: 23, name: '特斯拉', image: NumberPeople04 , message: '您好，我是特斯拉，是塞尔维亚裔美籍发明家 、物理学家、机械工程师、电气工程师。有什么需要帮助的？' },
  { id: 18, name: '李白', image: NumberPeople05 , message: '您好，我叫李白，出生于蜀郡绵州昌隆县（一说出生于西域碎叶）。我是伟大的浪漫主义诗人，经我创造书写诗文千余篇，有《李太白集》传世。欢迎向我提问诗文。' }
])

// 跳转页面携带名字和人物形象
const navigateToAIQuestions = person => {
  router.push({
    // 跳转问答页面
    path: '/ai-questions', 
    query: {  id: person.id, name: person.name, image: person.image, message: person.message }
  }); 
}; 

// 跳转智能问答
const navigateToAI = (group) => { 
  if (group.title === "智能问答") {
    let person = { id: 10, name: '小智', image: NumberPeople00, message: '您好，我是您的AI智能助手小智，我会尽力回答您的问题或提供有用的建议！！！！'  };
    router.push({ 
      // 跳转问答页面
      path: '/ai-questions',
      query: {  id: person.id, name: person.name, image: person.image, message: person.message }
    });
  }
  if (group.title === "智能绘画") {
    router.push('/ai-painting')
  }
  if (group.title === '数字人老师') {
    router.push('/ai-laboratory') // 添加跳转到AI实验室的逻辑
  }
}

// 渲染侧边栏
const groupList = ref([
  {
    icon: ChatLineRound,
    title: '智能问答'
  },
  {
    icon: MagicStick,
    title: '智能绘画'
  },
  {
    icon: Avatar,
    title: '数字人老师'
  }
])
</script>

<style scoped lang="scss">
@use 'sass:math';
// 定义rpx转换函数
@function rpx($px) {
  @return math.div($px, 750) * 100vw;
}
/* 添加过渡样式 */
.drawer-slide-enter-active,
.drawer-slide-leave-active {
  transition: all 0.3s ease;
}
.drawer-slide-enter-from,
.drawer-slide-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}

.home-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  gap: rpx(0);
  background: linear-gradient(
    to bottom,
    #e2ddfc,
    #f1effd
  );
}

.icon-expand {
  width: rpx(30);
  height: rpx(30);
  z-index: 9999;
  position: absolute;
  cursor: pointer;
}
.icon-expand .el-icon {
  font-size: rpx(15);
  position: absolute;
  color: white;
  left: rpx(9);
  margin-top: rpx(17);
}
.icon-expand .el-icon:active {
  color: black;
}

// 侧边栏
.left-group {
  width: rpx(135);
  height: 100%;
  background: linear-gradient(to bottom, #001169, #b4a8e1);
}
.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 ::v-deep(.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);
}
.el-menu-vertical-demo .el-menu-item.is-active {
   background: linear-gradient(
    to bottom,
    #ffefb0,
    #ffcc00
  );
  box-shadow: 0 8px 8px rgb(0, 0, 0, 0.3);
  color: black;
  font-size: rpx(8);
}
// 右侧数字人内容
.number-people {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column; 
  background: linear-gradient(
    to bottom,
    #e2ddfc,
    #f1effd
  );
}
// 标题样式
.title-box {
  height: rpx(50);
}
.box-icon {
  width: 100%;
  height: 100%;
  flex: 1;
  display: flex; // 添加 flex 布局
  align-items: center; // 垂直居中
  color: black; // 设置图标颜色为白色
  padding-left: rpx(15);
  font-size: rpx(10); // 设置图标大小，可按需调整
  cursor: pointer; // 添加鼠标指针样式
}
.box-icon .left-icon {
  margin-left: rpx(10);
  margin-right: rpx(5); // 设置图标和文字之间的间距 ;
}
// 内容样式
.content-box {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}
.small-box {
  flex: 0 0 calc(30% - rpx(10)); // 每个小盒子占三分之一宽度，减去间距
  width: rpx(180);
  height: rpx(110);
  margin-top: rpx(10);
  margin-left: rpx(20);
  border-radius: rpx(6);
  border: 1px solid white;
  background: rgba($color: #ffffff, $alpha: 0.5);
  position: relative;
  cursor: pointer; // 添加鼠标指针样式
}
.people-box {
  position: absolute;
  top: rpx(-30);
  overflow: hidden;
  width: rpx(180);
  height: rpx(140);
  border-radius: rpx(6);
  margin-bottom: rpx(5);
  // background-color: pink;
  display: flex;
  justify-content: center;
  align-items: center;
}
.people-box img {
  width: rpx(100);
  margin-top: rpx(75);
  // margin-left: rpx(50) auto;
}
.people-title {
  font-size: rpx(8);
  margin-top: rpx(110);
}
.small-box span {
  color: black;
  font-size: rpx(8);
}
</style>