|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<!-- AI实验室 -->
|
|
|
<div class="home-container">
|
|
|
- <!-- 展开收起侧边栏 -->
|
|
|
+ <!-- 展开收起侧边栏 -->
|
|
|
<div
|
|
|
class="icon-expand"
|
|
|
:style="{
|
|
|
@@ -35,7 +35,7 @@
|
|
|
:key="index"
|
|
|
@click="navigateToAI(item)"
|
|
|
>
|
|
|
- <img :src="item.icon" alt="" class="menu-icon" />
|
|
|
+ <img :src="item.icon" alt="" class="menu-icon" />
|
|
|
{{ item.title }}
|
|
|
</el-menu-item>
|
|
|
</el-menu>
|
|
|
@@ -62,12 +62,11 @@
|
|
|
class="small-box"
|
|
|
>
|
|
|
<div class="people-box">
|
|
|
- <img :src="person.image" alt="{{ person.name }}" />
|
|
|
+ <img :src="person.image" alt="" />
|
|
|
</div>
|
|
|
<div class="people-title">{{ person.name }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -88,6 +87,8 @@ import {
|
|
|
User
|
|
|
} from '@element-plus/icons-vue'
|
|
|
|
|
|
+// 数字人接口
|
|
|
+import { teacherList } from '@/api/teachers.js'
|
|
|
|
|
|
// 添加抽屉显示状态
|
|
|
const drawerVisible = ref(true)
|
|
|
@@ -101,52 +102,70 @@ const router = useRouter()
|
|
|
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'
|
|
|
|
|
|
// 导入图片
|
|
|
import question from '@/assets/icon/question.png'
|
|
|
import painting from '@/assets/icon/painting.png'
|
|
|
import human from '@/assets/icon/human.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 peopleList = ref([])
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ try {
|
|
|
+ // 获取小学低年级数据
|
|
|
+ const juniorRes = await teacherList({ category: '小学低年级' })
|
|
|
+ peopleList.value = juniorRes.data.list.map(person => ({
|
|
|
+ id: person.id,
|
|
|
+ name: person.name,
|
|
|
+ image: person.model2dPath,
|
|
|
+ message: person.systemMessage
|
|
|
+ }))
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取小学低年级数据失败:', error)
|
|
|
+ }
|
|
|
+})
|
|
|
|
|
|
// 跳转页面携带名字和人物形象
|
|
|
-const navigateToAIQuestions = person => {
|
|
|
+const navigateToAIQuestions = (person) => {
|
|
|
router.push({
|
|
|
- // 跳转问答页面
|
|
|
- path: '/ai-questions',
|
|
|
- query: { id: person.id, name: person.name, image: person.image, message: person.message }
|
|
|
- });
|
|
|
-};
|
|
|
+ path: '/ai-questions',
|
|
|
+ query: person
|
|
|
+ })
|
|
|
+}
|
|
|
|
|
|
+// 存储 id 为 10 的小智数据
|
|
|
+const personId10 = ref([])
|
|
|
// 跳转智能问答
|
|
|
-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 }
|
|
|
- });
|
|
|
+const navigateToAI = async (group) => {
|
|
|
+ if (group.title === '智能问答') {
|
|
|
+ try {
|
|
|
+ // 获取小学低年级AI数据
|
|
|
+ const juniorAIRes = await teacherList({ category: '小学低年级AI' })
|
|
|
+ const aiPerson = juniorAIRes.data.list.find(person => person.id === 10)
|
|
|
+ if (aiPerson) {
|
|
|
+ personId10.value = {
|
|
|
+ id: aiPerson.id,
|
|
|
+ name: aiPerson.name,
|
|
|
+ image: aiPerson.model2dPath,
|
|
|
+ message: aiPerson.systemMessage
|
|
|
+ }
|
|
|
+ router.push({
|
|
|
+ path: '/ai-questions',
|
|
|
+ query: personId10.value
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ console.warn('未找到 ID 为 10 的数据');
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取小学低年级AI数据失败:', error)
|
|
|
+ }
|
|
|
}
|
|
|
- if (group.title === "智能绘画") {
|
|
|
+ if (group.title === '智能绘画') {
|
|
|
router.push('/ai-painting')
|
|
|
}
|
|
|
if (group.title === '数字人老师') {
|
|
|
- router.push('/ai-laboratory') // 添加跳转到AI实验室的逻辑
|
|
|
+ router.push('/ai-laboratory')
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -193,11 +212,7 @@ const groupList = ref([
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
gap: rpx(0);
|
|
|
- background: linear-gradient(
|
|
|
- to bottom,
|
|
|
- #e2ddfc,
|
|
|
- #f1effd
|
|
|
- );
|
|
|
+ background: linear-gradient(to bottom, #e2ddfc, #f1effd);
|
|
|
}
|
|
|
|
|
|
.icon-expand {
|
|
|
@@ -223,7 +238,7 @@ const groupList = ref([
|
|
|
font-size: rpx(10);
|
|
|
}
|
|
|
.menu-icon {
|
|
|
- width:rpx(11);
|
|
|
+ width: rpx(11);
|
|
|
height: rpx(11);
|
|
|
margin-right: rpx(2);
|
|
|
}
|
|
|
@@ -232,7 +247,7 @@ const groupList = ref([
|
|
|
.left-group {
|
|
|
width: rpx(135);
|
|
|
height: 100%;
|
|
|
- background: linear-gradient(to bottom, #001169, #8a78d0);
|
|
|
+ background: linear-gradient(to bottom, #001169, #8a78d0);
|
|
|
}
|
|
|
.mb-2 {
|
|
|
color: black;
|
|
|
@@ -258,28 +273,20 @@ const groupList = ref([
|
|
|
color: white;
|
|
|
}
|
|
|
|
|
|
-.el-menu ::v-deep(.el-menu-item:hover){
|
|
|
- background: linear-gradient(
|
|
|
- to bottom,
|
|
|
- #ffefb0,
|
|
|
- #ffcc00
|
|
|
- );
|
|
|
+.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
|
|
|
- );
|
|
|
+ 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);
|
|
|
+ background: linear-gradient(to bottom, #fee78a, #ffce1b);
|
|
|
color: black;
|
|
|
font-size: rpx(8);
|
|
|
box-shadow: 0 4px 8px rgba(3, 3, 3, 0.3);
|
|
|
@@ -289,12 +296,8 @@ const groupList = ref([
|
|
|
flex: 1;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- background: linear-gradient(
|
|
|
- to bottom,
|
|
|
- #e2ddfc,
|
|
|
- #f1effd
|
|
|
- );
|
|
|
+ flex-direction: column;
|
|
|
+ background: linear-gradient(to bottom, #e2ddfc, #f1effd);
|
|
|
}
|
|
|
// 标题样式
|
|
|
.title-box {
|