添加AI+古诗部分

src/components/LeftPanel.vue

@@ -49,6 +49,7 @@ 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'
 
 
 // 黑色图标
@@ -61,6 +62,7 @@ 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()
@@ -75,12 +77,13 @@ const pathIndexMap = {
   'ai-questions': '0',      // 智能问答
   'ai-painting': '1',       // 智能绘画
   'ai-laboratory': '2',     // 数字人老师
-  'ai-ennumerals': '3',     // 英文数字人老师
-  'ai-image': '4',          // 图生图
-  'ai-video': '5',          // 图生视频
-  'ai-grandcanal': '6',     // 大运河
-  'ai-plantexperts': '7',   // 植物专家
-  'virtual-laboratory': '8' // 虚拟实验室
+  'ai-poetry': '3' ,         // AI 古诗
+  'ai-ennumerals': '4',     // 英文数字人老师
+  'ai-image': '5',          // 图生图
+  'ai-video': '6',          // 图生视频
+  'ai-grandcanal': '7',     // 大运河
+  'ai-plantexperts': '8',   // 植物专家
+  'virtual-laboratory': '9', // 虚拟实验室
 }
 
 // 菜单项到路由的映射
@@ -88,12 +91,13 @@ const menuRouteMap = {
   '智能问答': '/ai-questions',
   '智能绘画': '/ai-painting',
   '数字人老师': '/ai-laboratory',
+  'AI+古诗人': '/ai-poetry',
   '英文数字人老师': '/ai-ennumerals',
   '图生图': '/ai-image',
   '图生视频': '/ai-video',
   '大运河': '/ai-grandcanal',
   '植物专家': '/ai-plantexperts',
-  '虚拟实验室': '/virtual-laboratory'
+  '虚拟实验室': '/virtual-laboratory',
 }
 
 // 渲染侧边栏
@@ -113,6 +117,11 @@ const groupList = ref([
     hoverIcon: Human02,
     title: '数字人老师'
   },
+  {
+    icon: poetry,
+    hoverIcon: poetry02,
+    title: 'AI+古诗人'
+  },
   {
     icon: en,
     hoverIcon: en02,
@@ -158,7 +167,7 @@ const updateActiveIndex = () => {
   
   // 从英文数字人老师页面进入智能问答页面
   if (path.includes('ai-questions') && from === 'ai-ennumerals') {
-    currentActiveIndex.value = '3' // 保持选中英文数字人老师
+    currentActiveIndex.value = '4' // 保持选中英文数字人老师
     return
   }
    // 从大运河页面进入智能问答页面
@@ -166,6 +175,11 @@ const updateActiveIndex = () => {
     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)) {

src/router/index.js

@@ -104,6 +104,11 @@ const routes = [
     path: '/virtual-laboratory',
     component: () => import('../views/virtuallaboratory/index.vue')
   },
+  // AI 古诗
+  {
+    path: '/ai-poetry',
+    component: () => import('../views/AIPage/AIPoetry.vue')
+  },
 
   // 【blockly编程课】首页
   {
@@ -178,6 +183,7 @@ const homeRoutes = {
     '/ai-grandcanal',
     '/ai-plantexperts',
     '/virtual-laboratory',
+    '/ai-poetry',
   ]
 }
 

src/views/AIPage/AIPoetry.vue

@@ -0,0 +1,327 @@
+<template>
+  <!-- AI古诗 -->
+  <div class="home-container">
+    <!-- 展开收起侧边栏 -->
+    <div
+      class="icon-expand"
+      :style="{
+        backgroundColor: drawerVisible ? '#44449c' : '#7F70C840',
+        left: drawerVisible ? '18%' : '0',
+      }"
+      @click="toggleDrawer"
+    >
+      <span
+        class="vertical-lines"
+        :style="{
+          color: drawerVisible ? '#8a78d0' : 'white',
+        }"
+        >||</span
+      >
+    </div>
+
+    <!-- 侧边栏组件 -->
+    <LeftPanel ref="leftPanelRef" v-show="drawerVisible" />
+
+    <!-- 右侧古诗内容 -->
+    <div class="number-people">
+      <div class="title-box">
+        <div class="box-icon" @click="goBack">
+          <el-icon class="left-icon"><ArrowLeftBold /></el-icon>
+          返回首页｜AI+古诗人
+        </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="" />
+          </div>
+          <div class="people-title">{{ person.name }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import {
+  Document,
+  Menu as IconMenu,
+  Setting,
+  ArrowLeftBold,
+  Fold,
+  Expand,
+  ChatLineRound,
+  Picture,
+  MagicStick,
+  User,
+} from "@element-plus/icons-vue";
+
+import LeftPanel from "@/components/LeftPanel.vue";
+const leftPanelRef = ref(null);
+
+// 古诗接口
+import { teacherList } from "@/api/teachers.js";
+import {homeRoutes} from "@/router/index.js";
+
+// 抽屉显示状态
+const drawerVisible = ref(true);
+// 切换抽屉显示状态的函数
+const toggleDrawer = () => {
+  drawerVisible.value = !drawerVisible.value;
+};
+const router = useRouter();
+const route = useRoute();
+
+// 返回上一页
+const goBack = () => {
+   router.push(homeRoutes.home);
+};
+
+// 古诗接口
+const grade = ref("");
+const peopleList = ref([]);
+
+onMounted(async () => {
+  try {
+    grade.value = route.query.grade || localStorage.getItem("selectedGrade");
+    // 获取古诗数据
+    const poemRes = await teacherList({ category: grade.value + 'Poet' });
+    peopleList.value = poemRes.data.list.map((person) => ({
+      id: person.id,
+      name: person.name,
+      image: person.model2dPath,
+      message: person.systemMessage,
+      default: person.questTip,
+    }));
+  } catch (error) {
+    console.error("获取古诗数据失败:", error);
+  }
+});
+
+// 跳转页面携带名字和形象
+const navigateToAIQuestions = (person) => {
+  router.push({
+    path: "/ai-questions",
+    state: {
+      ...person,
+      from: "ai-poetry",
+      category: grade.value + 'Poet',
+    }
+  });
+};
+
+</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;
+  transition: all 0.3s ease;
+}
+
+.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(8);
+  height: rpx(35);
+  border-top-right-radius: rpx(5);
+  border-bottom-right-radius: rpx(5);
+  z-index: 9999;
+  position: absolute;
+  top: 50%;
+  left: 18%;
+  transform: translateY(-50%);
+  background-color: #44449c;
+  cursor: pointer; // 添加鼠标指针样式
+  clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.3s ease;
+}
+.icon-expand .vertical-lines {
+  color: #8a78d0;
+  font-size: rpx(10);
+}
+.menu-icon {
+  width: rpx(11);
+  height: rpx(11);
+  margin-right: rpx(2);
+}
+
+// 侧边栏
+.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 ::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);
+}
+.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);
+}
+// 右侧古诗内容
+.number-people {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(to bottom, #e2ddfc, #f1effd);
+}
+// 标题样式
+.title-box {
+  height: rpx(35);
+}
+.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 {
+  // width: 100%;
+  box-sizing: border-box;
+  cursor: pointer; // 鼠标指针样式
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  overflow-y: auto;
+  // justify-content: center;
+}
+.content-box::-webkit-scrollbar {
+  width: rpx(2);
+}
+.content-box::-webkit-scrollbar-track {
+  background: transparent; // 设置滚动条轨道背景
+  border-radius: rpx(3); // 设置滚动条轨道圆角
+}
+.content-box::-webkit-scrollbar-thumb {
+  background: linear-gradient(to bottom, hsl(230, 100%, 21%), #8a78d0);
+  border-radius: rpx(3); // 设置滚动条滑块圆角
+}
+.content-box::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(to bottom, hsl(230, 100%, 21%), #8a78d0);
+}
+.small-box {
+  flex: 0 0 calc(30% - rpx(10)); // 每个小盒子占三分之一宽度，减去间距
+  // width: rpx(180);
+  height: rpx(110);
+  margin-top: rpx(30);
+  margin-left: rpx(25);
+  border-radius: rpx(6);
+  border: 1px solid white;
+  background: rgba($color: #ffffff, $alpha: 0.5);
+  position: relative;
+  cursor: pointer; // 鼠标指针样式
+  display: flex; // 此行，启用flex布局
+  flex-direction: column; // 此行，垂直排列子元素
+  align-items: center;
+}
+.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;
+  transition: transform 0.3s ease; // 过渡效果
+}
+.people-box img:hover {
+  transform: scale(1.1); // 鼠标经过时放大1.1倍
+}
+.people-title {
+  font-size: rpx(8);
+  margin-top: rpx(110);
+}
+.small-box span {
+  color: black;
+  font-size: rpx(8);
+}
+</style>

src/views/AIPage/AIQuestions.vue

@@ -69,6 +69,8 @@ const goBack = () => {
     router.push("/ai-ennumerals");
   } else if (fromPage === 'ai-grandcanal') {
     router.push("/ai-grandcanal");
+  } else if (fromPage === 'ai-poetry') {
+    router.push("/ai-poetry");
   } else if (fromPage === 'ai-laboratory' || !fromPage) {
     // 默认返回ai-laboratory
     router.push("/ai-laboratory");
@@ -86,6 +88,8 @@ watch(
   (newState) => {
     if (newState?.from === 'ai-grandcanal') {
       backText.value = '返回大运河';
+    } else if (newState?.from === 'ai-poetry') {
+      backText.value = '返回古诗人';
     } else {
       backText.value = '返回数字人';
     }