修改大运河界面接口

src/components/LeftPanel.vue

@@ -161,6 +161,11 @@ const updateActiveIndex = () => {
     currentActiveIndex.value = '3' // 保持选中英文数字人老师
     return
   }
+   // 从大运河页面进入智能问答页面
+  if (path.includes('ai-questions') && from === 'ai-grandcanal') {
+    currentActiveIndex.value = '6' // 保持选中大运河
+    return
+  }
   
   // 查找路径对应的索引
   for (const [key, index] of Object.entries(pathIndexMap)) {

src/views/AIPage/AIQuestions.vue

@@ -28,7 +28,7 @@
         <div class="title-box">
           <div class="box-icon" @click="goBack">
             <el-icon class="left-icon"><ArrowLeftBold /></el-icon>
-            返回数字人 | {{ personName }}
+            {{ backText }} | {{ personName }}
           </div>
         </div>
       </div>
@@ -67,6 +67,8 @@ const goBack = () => {
   const fromPage = window.history.state?.from;
   if (fromPage === 'ai-ennumerals') {
     router.push("/ai-ennumerals");
+  } else if (fromPage === 'ai-grandcanal') {
+    router.push("/ai-grandcanal");
   } else if (fromPage === 'ai-laboratory' || !fromPage) {
     // 默认返回ai-laboratory
     router.push("/ai-laboratory");
@@ -75,6 +77,22 @@ const goBack = () => {
   }
 };
 
+// 计算返回按钮文本
+const backText = ref('返回数字人');
+
+// 监听history.state变化，更新返回文本
+watch(
+  () => window.history.state,
+  (newState) => {
+    if (newState?.from === 'ai-grandcanal') {
+      backText.value = '返回大运河';
+    } else {
+      backText.value = '返回数字人';
+    }
+  },
+  { immediate: true }
+);
+
 const router = useRouter();
 const route = useRoute();
 

src/views/AIPage/GrandCanal.vue

@@ -1,103 +1,150 @@
 <template>
-  <!-- 数字人智能问答 -->
+  <!-- 大运河|智能问答 -->
   <div class="home-container">
     <!-- 展开收起侧边栏 -->
     <div
       class="icon-expand"
       :style="{
         backgroundColor: drawerVisible ? '#44449c' : '#7F70C840',
-        left: drawerVisible ? '18%' : '0',
+        left: drawerVisible ? '18%' : '0'
       }"
       @click="toggleDrawer"
     >
       <span
         class="vertical-lines"
         :style="{
-          color: drawerVisible ? '#8a78d0' : 'white',
+          color: drawerVisible ? '#8a78d0' : 'white'
         }"
         >||</span
       >
     </div>
 
-    <!-- 左侧折叠面板 -->
-    <LeftPanel ref="leftPanelRef" v-if="drawerVisible" />
+    <!-- 侧边栏组件 -->
+    <LeftPanel ref="leftPanelRef" v-show="drawerVisible" />
 
-    <!-- 原左侧折叠面板和右侧AI问答 --> 
-    <div class="content-wrapper">
-      <div class="left-group2">
-        <div class="title-box">
-          <div class="box-icon" @click="goBack">
-            <el-icon class="left-icon"><ArrowLeftBold /></el-icon>
-            返回首页 | 大运河
+    <!-- 右侧数字人 -->
+    <div class="number-people">
+      <div class="title-box">
+        <div class="box-icon" @click="goBack">
+          <el-icon class="left-icon"><ArrowLeftBold /></el-icon>
+          返回首页｜大运河
+        </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>
       
-      <TextToText
-        :personId="personId"
-        :personName="personName"
-        :personImage="personImage"
-        :personIntroduce="personIntroduce"
-      />
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, watch } from "vue";
-import { useRouter, useRoute } from "vue-router";
-import LeftPanel from "@/components/LeftPanel.vue";
-import { ArrowLeftBold } from "@element-plus/icons-vue";
-import TextToText from "@/components/ai/text/TextToText.vue";
-import {homeRoutes} from "@/router/index.js";
-
-const leftPanelRef = ref(null);
+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'
 
-// 抽屉显示状态
-const drawerVisible = ref(true);
+import LeftPanel from '@/components/LeftPanel.vue'
+const leftPanelRef = ref(null)
+ 
+// 数字人接口
+import { teacherList } from '@/api/teachers.js'
 
+// 添加抽屉显示状态
+const drawerVisible = ref(true)
 // 添加切换抽屉显示状态的函数
 const toggleDrawer = () => {
-  drawerVisible.value = !drawerVisible.value;
-};
+  drawerVisible.value = !drawerVisible.value
+}
+const router = useRouter()
+const route = useRoute()
 
-// 返回首页
+// 返回上一页
 const goBack = () => {
-    router.push(homeRoutes.home);
-};
-
-const router = useRouter();
-const route = useRoute();
-
-// 从history.state获取参数
-const personId = ref(window.history.state?.id || '');
-const personName = ref(window.history.state?.name || '');
-const personIntroduce = ref(window.history.state?.message || '');
-const personImage = ref(window.history.state?.image || '');
-
-// 监听history.state变化
-watch(
-  () => window.history.state,
-  (newState, oldState) => {
-    // 只有当id变化时才更新数据，避免不必要的刷新
-    if (newState?.id && newState.id !== oldState?.id) {
-      // 更新相关数据
-      personId.value = newState.id;
-      personName.value = newState.name;
-      personIntroduce.value = newState.message;
-      personImage.value = newState.image;
+   router.push(homeRoutes.home)
+}
+
+// 导入图片
+import question from '@/assets/icon/question.png'
+import painting from '@/assets/icon/painting.png'
+import human from '@/assets/icon/human.png'
+import {homeRoutes} from "@/router/index.js";
+
+// 数字人接口
+const grade = ref('')
+const peopleList = ref([])
+
+onMounted(async () => {
+  try {
+    // 使用history.state接收参数，如果没有则从localStorage获取
+    grade.value = history.state?.grade || localStorage.getItem('selectedGrade')
+    // 获取小学低年级数据
+    const juniorRes = await teacherList({ category: grade.value + 'Tool' })
+    peopleList.value = juniorRes.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-grandcanal', 
+      category: grade.value
     }
-  },
-  { immediate: true, deep: true }
-);
+  })
+}
+
 </script>
 
 <style scoped lang="scss">
-@use "sass:math";
+@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;
@@ -122,51 +169,166 @@ watch(
   left: 18%;
   transform: translateY(-50%);
   background-color: #44449c;
-  cursor: pointer;
+  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);
 }
-
-.content-wrapper {
-  display: flex;
-  flex: 1;
+.menu-icon {
+  width: rpx(11);
+  height: rpx(11);
+  margin-right: rpx(2);
 }
 
 // 侧边栏
-.left-group2 {
-  // width: rpx(150);
+.left-group {
+  width: rpx(135);
   height: 100%;
-  display: flex;
-  background-color: #ece9fd;
+  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(50);
-  position: absolute;
+  height: rpx(35);
 }
-
 .box-icon {
   width: 100%;
   height: 100%;
   flex: 1;
-  display: flex;
-  align-items: center;
-  color: black;
+  display: flex; // 添加 flex 布局
+  align-items: center; // 垂直居中
+  color: black; // 设置图标颜色为白色
   padding-left: rpx(15);
-  font-size: rpx(10);
-  cursor: pointer;
+  font-size: rpx(10); // 设置图标大小，可按需调整
+  cursor: pointer; // 添加鼠标指针样式
 }
-
 // .box-icon .left-icon {
-//   margin-left: rpx(5);
-//   margin-right: rpx(5);
+//   margin-left: rpx(10);
+//   margin-right: rpx(5); // 设置图标和文字之间的间距 ;
 // }
-</style>
+// 内容样式
+.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>