添加blockly游戏列表

src/components/LeftPanel.vue

@@ -48,6 +48,7 @@ import image2image from '@/assets/icon/image2image.png'
 import video from '@/assets/icon/video.png'
 import labImage from '@/assets/icon/labImage.png'
 import en from '@/assets/icon/en.png'
+import blockly from '@/assets/icon/blockly.png'
 // 黑色
 import question02 from '@/assets/icon/question02.png'
 import painting02 from '@/assets/icon/painting02.png'
@@ -56,6 +57,7 @@ import image2image02 from '@/assets/icon/image2image02.png'
 import video02 from '@/assets/icon/video02.png'
 import labImage02 from '@/assets/icon/labImage02.png'
 import en02 from '@/assets/icon/en02.png'
+import blockly02 from '@/assets/icon/blockly02.png'
 
 
  
@@ -104,7 +106,11 @@ const groupList = ref([
     hoverIcon: labImage02,
     title: '虚拟实验室'
   },
-
+   {
+    icon: blockly,
+    hoverIcon: blockly02,
+    title: 'blockly游戏'
+  },
 ])
 
 
@@ -121,7 +127,8 @@ const updateActiveIndex = () => {
     'ai-ennumerals': '3', // 英文数字人老师
     'ai-image': '4' ,     // 图生图
     'ai-video': '5' ,     // 图生视频
-    'virtual-laboratory':"6"// 虚拟实验室
+    'virtual-laboratory':"6",// 虚拟实验室
+    'gamepage':"7"// 虚拟实验室
     
   };
   // 从数字人老师页面进入智能问答页面
@@ -207,6 +214,9 @@ const navigateToAI = async (group) => {
   if (group.title === '虚拟实验室') {
     router.push('/virtual-laboratory')
   }
+  if (group.title === 'blockly游戏') {
+    router.push('/gamepage')
+  }
 }
 
 // 处理菜单展开和关闭

src/views/gamepage/GameIndex.vue

@@ -2,56 +2,26 @@
   <!-- 游戏页面 -->
   <div class="home-container">
     <!-- 展开收起侧边栏 -->
-    <div class="sidebar-container">
-      <div class="sidebar-layout">
-        <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>
-      </div>
-
-      <transition name="drawer-slide">
-        <div class="main-content" v-if="drawerVisible">
-          <!-- 菜单栏 -->
-          <div class="drawer-box">
-            <el-row class="tac">
-              <el-col :span="12">
-                <span class="mb-2">
-                  <img :src="teachingImg" alt="游戏" />
-                  游戏列表
-                </span>
-                <el-menu
-                  default-active="1"
-                  :class="{ 'el-menu-vertical-demo': true }"
-                >
-                  <el-menu-item
-                    v-for="(title, index) in gameTitles"
-                    :key="index + 1"
-                    :index="(index + 1).toString()"
-                    @click="goToGame(gameData[index])"
-                  >
-                   {{ title }}
-                  </el-menu-item>
-                </el-menu>
-              </el-col>
-            </el-row>
-          </div>
-        </div>
-      </transition>
+    <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="content-box">
       <div class="box-1">
         <div class="inner-box left-box">
@@ -115,15 +85,18 @@
 import { ref, onMounted, computed } from 'vue'
 // Element Plus 组件引入
 import { ArrowDown, Search, ArrowLeftBold } from '@element-plus/icons-vue'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import teachingImg from '@/assets/icon/teaching.png'
 // 引入游戏列表接口
 import { GameList } from '@/api/game/game.js'
+import LeftPanel from '@/components/LeftPanel.vue'
+const leftPanelRef = ref(null)
+const route = useRoute()
 
 // 获取当前路由对象
 const router = useRouter() 
 // 页面标题
-const pageTitle = ref('返回虚拟实验室')
+const pageTitle = ref('blockly游戏')
 // 抽屉显示状态
 const drawerVisible = ref(true)
 // 游戏数据
@@ -186,7 +159,7 @@ const handleSearchSelect = item => {
 }
 // 返回上一页
 const goBack = () => {
-  router.go(-1)
+  router.push('/home')
 }
 // 跳转到游戏页面
 const goToGame = game => {