|
|
@@ -0,0 +1,185 @@
|
|
|
+<template>
|
|
|
+ <!-- 左侧折叠面板 -->
|
|
|
+ <transition name="drawer-slide">
|
|
|
+ <div class="left-group" >
|
|
|
+ <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)"
|
|
|
+ >
|
|
|
+ <img :src="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 } 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 { teacherList } from '@/api/teachers.js'
|
|
|
+
|
|
|
+
|
|
|
+const router = useRouter()
|
|
|
+const route = useRoute()
|
|
|
+
|
|
|
+// 添加抽屉显示状态
|
|
|
+const drawerVisible = ref(true)
|
|
|
+// 渲染侧边栏
|
|
|
+const groupList = ref([
|
|
|
+ {
|
|
|
+ icon: question,
|
|
|
+ title: '智能问答'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: painting,
|
|
|
+ title: '智能绘画'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: human,
|
|
|
+ title: '数字人老师'
|
|
|
+ }
|
|
|
+])
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// 存储小智数据
|
|
|
+const personData = ref([])
|
|
|
+// 跳转智能问答
|
|
|
+const navigateToAI = async (group) => {
|
|
|
+ if (group.title === '智能问答') {
|
|
|
+ try {
|
|
|
+ const grade = route.query.grade || localStorage.getItem('selectedGrade')
|
|
|
+ console.log(grade);
|
|
|
+ // 获取小学低年级AI数据
|
|
|
+ const juniorAIRes = await teacherList({ category: grade + 'AI' })
|
|
|
+ console.log(juniorAIRes);
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ console.log(personData.value);
|
|
|
+ router.push({
|
|
|
+ path: '/ai-questions',
|
|
|
+ query: personData.value
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ console.warn('未找到名为小智的数据');
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取小学低年级AI数据失败:', error)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (group.title === '智能绘画') {
|
|
|
+ router.push('/ai-painting')
|
|
|
+ }
|
|
|
+ if (group.title === '数字人老师') {
|
|
|
+ router.push('/ai-laboratory')
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// 处理菜单展开和关闭
|
|
|
+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;
|
|
|
+}
|
|
|
+/* 添加过渡样式 */
|
|
|
+.drawer-slide-enter-active,
|
|
|
+.drawer-slide-leave-active {
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+.drawer-slide-enter-from,
|
|
|
+.drawer-slide-leave-to {
|
|
|
+ transform: translateX(-100%);
|
|
|
+}
|
|
|
+
|
|
|
+// 侧边栏
|
|
|
+.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);
|
|
|
+}
|
|
|
+.menu-icon {
|
|
|
+ width: rpx(11);
|
|
|
+ height: rpx(11);
|
|
|
+ margin-right: rpx(2);
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
丸子