Merge branch 'develoop' of http://182.92.169.222:3000/dlsx/Teaching_integration_platform_template into develoop

src/Layout/footer/index.vue

@@ -1,23 +1,81 @@
 <template>
   <div class="footer">
-    <h1>FOOTER</h1>
+    <ul>
+      <li>
+        系统标题：
+        {{ adminInfoStore.info.title }}
+
+      </li><el-divider direction="vertical" border-style="dashed" />
+      <li>
+        版权信息：
+        {{ adminInfoStore.info.copyrightInformation }}
+
+      </li> <el-divider direction="vertical" border-style="dashed" />
+      <li>
+        备案号：
+        {{ adminInfoStore.info.recordNumber }}
+
+      </li> <el-divider direction="vertical" border-style="dashed" />
+      <li>
+        qq:
+        {{ adminInfoStore.info.qqNumber }}
+
+      </li><el-divider direction="vertical" border-style="dashed" />
+      <li>
+        邮箱:
+        {{ adminInfoStore.info.mailbox }}
+
+      </li> <el-divider direction="vertical" border-style="dashed" />
+      <li>
+        电话:
+        {{ adminInfoStore.info.phone }}
+
+      </li>
+      <li>
+        地址:
+        {{ adminInfoStore.info.address }}
+      </li>
+      <el-divider direction="vertical" border-style="dashed" />
+      <li>
+        <el-image style="width: 50px; height: 50px" :src="adminInfoStore.info.qrCode" fit="cover" />
+      </li>
+      <el-divider direction="vertical" border-style="dashed" />
+      <li>
+        备案信息:
+        {{ adminInfoStore.info.recordInformation }}
+      </li>
+    </ul>
   </div>
 </template>
 
 <script lang="ts" setup>
-import {} from 'vue'
+import useAdminInfoStore from '@/store/module/adminInfo'
+const adminInfoStore = useAdminInfoStore()
+console.log(adminInfoStore);
+
 </script>
 
 <style lang="scss" scoped>
 .footer {
-  // position: fixed;
-  // bottom: 0;
-  height: 300px;
-  width: 100%;
   background-color: #252527;
+  height: 300px;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #fff;
+
+  ul {
+    width: 600px;
+    height: 200px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    color: #ccc;
+    font-family:'Courier New', Courier, monospace;
+    // background: linear-gradient(white,#38495a);
+    // background-clip: text;
+    // color: transparent;
+  }
+
 }
 </style>

src/Layout/main/index.vue

@@ -6,10 +6,10 @@
   </section> -->
   <div class="view-container">
     <div class="banner">
-      <img src="../../assets/images/banner4.jpg" alt="">
+      <img :src="adminInfoStore.info.promotionalImages" alt="" style="max-height: 409px;">
       <div class="source-box">
         <div class="source">
-          开源智慧教程管理系统
+          {{ adminInfoStore.info.name }}
         </div>
         <div class="describe">首次开源</div>
       </div>
@@ -20,6 +20,8 @@
 </template>
 
 <script lang="ts" setup>
+import useAdminInfoStore from '@/store/module/adminInfo'
+const adminInfoStore = useAdminInfoStore()
 import { } from 'vue'
 import { useRoute } from 'vue-router'
 const $route = useRoute()

src/Layout/tabbar/index.vue

@@ -1,24 +1,41 @@
 <template>
-  <div :class="!flog&&false ? 'tabbar' : 'tabbar-active'">
+  <div :class="!flog && false ? 'tabbar' : 'tabbar-active'">
     <div class="container">
       <div class="logo-box">
-        <div class="logo"><img src="../../assets/images/LOGO.png"></div>
+        <div class="logo"><img :src="adminInfoStore.info.logo"></div>
         <div class="lesson">课图</div>
       </div>
 
       <div class="menu">
         <ul>
-          <li :class="{ active: settingStore.useIndex === index }" v-for="(item, index) in constRouter[0].children"
+          <li v-for="(item, index) in constRouter[0].children" :class="{ active: settingStore.useIndex === index }"
-            v-show="!item.meta.hidden" :key="item.path" @click="goToRouter(item, index)">
+            v-show="!item.meta.hidden" @click="goToRouter(item, index)" :key="item.path">
             <div>{{ item.meta.title }}</div>
           </li>
-          <li v-if="$route.path != '/home'" @click="$router.push('/')">回到首页</li>
+          <div v-if="isLogin">
+            <img :src="data.icon" alt="" style="width: 24px; height: 24px; margin: 0 10px; border-radius: 50%" />
+            <el-dropdown @command="handleCommand">
+              <span class="el-dropdown-link" style="color: #fff;">
+                {{ data.username }}
+                <el-icon class="el-icon--right">
+                  <arrow-down />
+                </el-icon>
+              </span>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item command="A">退出登录</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
+          <li v-else @click="skip('http://localhost:5173/#/login?redirect=/configurationPage')">登录注册</li>
+          <!-- <li v-if="$route.path != '/home'" @click="$router.push('/')">回到首页</li> -->
         </ul>
         <div class="entry">
           <!-- <div>企业入口</div>
           <div>教师入口</div>
           <div>学生入口</div> -->
-          <div>登录注册入口</div>
+          <!-- <div>登录注册</div> -->
         </div>
       </div>
     </div>
@@ -26,8 +43,13 @@
 </template>
 
 <script lang="ts" setup>
+import useAdminInfoStore from '@/store/module/adminInfo'
+const adminInfoStore = useAdminInfoStore()
+import { userGetInfoService } from '@/api/configuration';
+import useUserStore from '@/store/module/user';
+const userStore = useUserStore()
 import { constRouter } from '@/router/module/constRouter'
-import { useRouter,useRoute } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import { onMounted, ref } from 'vue'
 import useSettingStore from '@/store/module/setting'
 const $router = useRouter()
@@ -35,7 +57,7 @@ const $route = useRoute()
 
 const settingStore = useSettingStore()
 const goToRouter = (item: any, index: number) => {
-console.log( $route);
+  console.log($route);
 
   settingStore.setuseIndex(index)
   $router.push({ path: `${item.path}` })
@@ -50,6 +72,31 @@ onMounted(() => {
     }
   })
 })
+const isLogin = ref(false)
+const data = ref<any>({})
+userGetInfoService(userStore.token).then(res => {
+  // @ts-ignore
+  if (res.code === 200) {
+    isLogin.value = true
+    data.value = res.data
+  }
+})
+function skip(url: string) {
+  location.assign(url)
+}
+
+
+// 退出登录
+function logout() {
+  isLogin.value = false
+}
+const handleCommand = (command: string) => {
+  switch (command) {
+    case 'A':
+      logout()
+      break
+  }
+}
 </script>
 
 <style lang="scss" scoped>

src/api/configuration.ts

@@ -0,0 +1,71 @@
+import request from '@/utils/requset'
+import { ElLoading, ElMessage } from 'element-plus'
+
+
+enum Api {
+    get系统配置 = '/api/systemSettings/save',
+
+}
+// 提示批量处理
+const initOptions = { text: '加载中', success: '成功', error: '失败' }
+function proxrequest(request, options: any = initOptions) {
+    return async (...arg) => {
+        if (!options) return request(...arg)
+
+        const loadingInstance = ElLoading.service({ text: options.text })
+
+        try {
+            await request(...arg)
+            ElMessage.success(options.success)
+        } catch (error) {
+            ElMessage.error(options.error)
+        } finally {
+            loadingInstance.close()
+        }
+
+        return request
+    }
+}
+
+
+export function getSysSettingApi() {
+    return request.get(Api.get系统配置)
+}
+export const proxGetSysSettingApi = proxrequest(getSysSettingApi)
+
+
+export const userGetInfoService = (token: any) =>
+    request.get('/api/user/info', {
+        headers: { Authorization: `Bearer ${token}` },
+    })
+
+
+//获取学生列表
+export const userStudentListService = (id) => {
+    return request.post('/api/coursesteacher/studentList?userId=' + id)
+}
+
+
+// 获取课程列表
+type CourseListParams = {
+    'assessmenttype': string,
+    'category'?: string,
+    'isAsc'?: boolean,
+    'name'?: string,
+    'nature'?: string,
+    'pageNo'?: number,
+    'pageSize'?: number,
+    'sortBy'?: string,
+    'teacher'?: string,
+    'username'?: string,
+}
+export const getCourseListApi = (params: CourseListParams) => {
+    return request.get('/api/coursesteacher/page', {
+        params,
+    })
+}
+
+// 根据id获取课程详情
+export const getCourseDetailApi = (id: string) => {
+    return request.get(`/api/coursesteacher/${id}`)
+}

src/router/module/constRouter/index.ts

@@ -32,10 +32,20 @@ export const constRouter: any = [
           },
         ],
       },
+      // {
+      //   path: '/professionalProfile', // 课程
+      //   component: () => import('@/views/professionalProfile/index.vue'),
+      //   name: 'ProfessionalProfile',
+      //   meta: {
+      //     icon: '',
+      //     title: '课程',
+      //     hidden: false,
+      //   },
+      // },
       {
-        path: '/professionalProfile', // 课程
+        path: '/professionalListProfile', // 课程
-        component: () => import('@/views/professionalProfile/index.vue'),
+        component: () => import('@/views/professionalListProfile/index.vue'),
-        name: 'ProfessionalProfile',
+        name: 'professionalListProfile',
         meta: {
           icon: '',
           title: '课程',
@@ -43,12 +53,11 @@ export const constRouter: any = [
         },
       },
       {
-        path: '/professionalListProfile', // 课程
+        path: '/roadbedRecommendation',
-        component: () => import('@/views/professionalListProfile/index.vue'),
+        component: () => import('@/views/roadbedRecommendation/index.vue'),
-        name: 'professionalListProfile',
+        name: 'RoadbedRecommendation',
         meta: {
-          icon: '',
+          title: '学习路径',
-          title: '课程列表',
           hidden: false,
         },
       },
@@ -90,15 +99,6 @@ export const constRouter: any = [
           hidden: true,
         },
       },
-      {
-        path:'/roadbedRecommendation',
-        component:() => import('@/views/roadbedRecommendation/index.vue'),
-        name:'RoadbedRecommendation',
-        meta: {
-          title: '学习推荐',
-          hidden: false,
-        },
-      },
       // {
       //   path: '/talentDevelopment', // 人才培养
       //   component: () => import('@/views/talentDevelopment/index.vue'),

src/store/module/adminInfo.ts

@@ -0,0 +1,33 @@
+import { defineStore } from 'pinia'
+import { reactive } from 'vue';
+import { getSysSettingApi } from '@/api/configuration';
+
+
+const useAdminInfoStore = defineStore('adminInfo', () => {
+  const info = reactive({
+    address: '',
+    copyrightInformation: '',
+    id: '',
+    loginAddress: '',
+    logo: 'http://teaching-edu123.oss-cn-beijing.aliyuncs.com/eVAnKnTrHVMTVyr_2up5S.png',
+    name: '',
+    phone: '',
+    promotionalImages: 'http://teaching-edu123.oss-cn-beijing.aliyuncs.com/eEnQCDAMwwAm66pgZJh6K.jpg',
+    qqNumber: '',
+    qrCode: '',
+    recordNumber: '',
+    title: '',
+    mailbox: '',
+    home: '',
+    recordInformation: ''
+  })
+  function upAdminInfo() {
+    getSysSettingApi().then(res => {
+      if (res.code === 200) Object.assign(info, res.data)
+    })
+  }
+  upAdminInfo()
+
+  return { info }
+})
+export default useAdminInfoStore

src/store/module/learnPath.ts

@@ -0,0 +1,24 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue';
+import { getCourseDetailApi } from '@/api/configuration';
+
+
+
+const useLearnPathStore = defineStore('learnPath', () => {
+    let item = sessionStorage.getItem('learnPath:itemData')
+    let course = sessionStorage.getItem('learnPath:courseData')
+    if (item) item = JSON.parse(item)
+    if (course) course = JSON.parse(course)
+    const itemData = ref<Record<string, any>>(item as {} || {})
+    const courseData = ref<Record<string, any>>(course as {} || {})
+    function setCourseData(item: any) {
+        courseData.value = item
+        sessionStorage.setItem('learnPath:itemData', JSON.stringify(item))
+        getCourseDetailApi(item.id).then(res => {
+            courseData.value = res.data
+            sessionStorage.setItem('learnPath:courseData', JSON.stringify(res.data))
+        })
+    }
+    return { setCourseData, itemData, courseData }
+})
+export default useLearnPathStore

src/store/module/user.ts

@@ -1,19 +1,40 @@
 import { defineStore } from 'pinia'
-const userStore = defineStore('userStore', {
+import { userGetInfoService } from '@/api/configuration'
-  state() {
+import { ref, reactive } from 'vue'
-    return {
+const userStore = defineStore('userStore', () => {
-      token: '',
+  const userInfo = reactive<any>({})
-    }
+  const isLogin = ref(false)
-  },
+  const token = ref('eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJ4aWFvMTExMSIsImNyZWF0ZWQiOjE3MjQ2NTQxNjMxMjIsImV4cCI6MTcyNTI1ODk2M30.uIEZhGG6-XGomV0aqpamOn54VxP4ItfM_ip9EgI0ohcYPyEnln6dXBoG8eVBNlbigglIjw5V1N5bHPdIAifeaA')
-  actions: {
+
-   async verifyToken(token:string){
+  userGetInfoService(token.value).then(res => {
-        const res = await verifyTokenApi({token})
+    // @ts-ignore
-        if(res){
+    if (res.code === 200) {
-            this.token = token
+      Object.assign(userInfo, res.data)
-        }else{
+      isLogin.value = true
-        return false
     }
+  })
+  return {
+    token,
+    userInfo,
+    isLogin
   }
-  },
 })
 export default userStore
+// const userStore = defineStore('userStore', {
+//   state() {
+//     return {
+//       token: 'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJ4aWFvMTExMSIsImNyZWF0ZWQiOjE3MjQ2NTQxNjMxMjIsImV4cCI6MTcyNTI1ODk2M30.uIEZhGG6-XGomV0aqpamOn54VxP4ItfM_ip9EgI0ohcYPyEnln6dXBoG8eVBNlbigglIjw5V1N5bHPdIAifeaA',
+//     }
+//   },
+//   actions: {
+//    async verifyToken(token:string){
+//         const res = await verifyTokenApi({token})
+//         if(res){
+//             this.token = token
+//         }else{
+//         return false
+//         }
+//     }
+//   },
+// })
+// export default userStore

src/views/course/components/StuList.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import defImg from '@/assets/images/default.png'
+import useUserStore from '@/store/module/user';
+const userStore = useUserStore()
+import { ref, watch } from 'vue';
+import { userStudentListService } from '@/api/configuration';
+const loading = ref(false)
+const stuList: any = ref([])
+const getStuList = async () => {
+    loading.value = true
+    const res = await userStudentListService(userStore.userInfo.id)
+    stuList.value = res.data
+    loading.value = false
+}
+
+watch(() => userStore.userInfo.id, () => {
+    getStuList()
+})
+if(userStore.userInfo.id) getStuList()
+</script>
+
+<template>
+    <div class="stu-list">
+        <div class="stu_content" v-loading="loading">
+            <ul>
+                <li class="stu-item" v-for="(item, index) in stuList" :key="index">
+                    <img :src="item.icon || defImg" class="stu-item-img" />
+                    <div class="stu-item-info">
+                        <h4 style="font-weight: bold">{{ item.name }}</h4>
+                        <h4 style="color: #666">{{ item.number }}</h4>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.stu_content {
+    height: 86%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-family: 'Microsoft YaHei';
+
+    /* background-color: rgb(100, 100, 64); */
+    .stu-item {
+        margin-top: 20px;
+        /* height: 100%; */
+        /* border-radius: 10px; */
+        /* background-color: #0080ff; */
+        border-bottom: 1px solid #ededed;
+        /* border-radius: 10px; */
+        /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
+        box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.07);
+        display: flex;
+        padding: 5px;
+        /* margin: 10px; */
+        justify-content: space-between;
+    }
+
+    .stu-item-img {
+        background-color: yellow;
+        border-radius: 50%;
+        width: 40px;
+        height: 40px;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .stu-item-info {
+        /* margin-left: 15px; */
+        width: 80%;
+        height: 40px;
+        background-color: #ffffff;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+}
+</style>

src/views/course/index.vue

@@ -175,12 +175,15 @@
       <div class="chapter">
         <courseTree :chapterList="chapterList" />
       </div>
-      <div class="student-list"></div>
+      <div class="student-list">
+        <stu-list></stu-list>
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import StuList from './components/StuList.vue'
 import { ref, nextTick } from 'vue'
 import Graph from '../home/components/Graph.vue'
 import courseTree from './components/courseTree.vue'

src/views/professionalListProfile/index.vue

@@ -1,85 +1,102 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { onMounted, ref, watch } from 'vue';
-
+import { useRouter } from 'vue-router';
-const paginationData = ref({
+import useLearnPathStore from '@/store/module/learnPath';
+import { userGetInfoService, getCourseListApi } from '@/api/configuration';
+import useUserStore from '@/store/module/user';
+const userStore = useUserStore()
+const $router = useRouter()
+const learnPathStore = useLearnPathStore()
+function paginationChange(currentPage: number, pageSize: number) {
+    params.value.pageNo = currentPage
+    params.value.pageSize = pageSize
+    getCourseList()
+}
+const params = ref({
     pageNo: 1,
-    pageSize: 8,
+    pageSize: 7,
-    total: 8
+    // username: 'qiuqiu',
+    userId: userStore.userInfo.id,
+    assessmenttype: '',
+    category: '',
+    nature: '',
+    teacher: '',
 })
-function paginationChange(currentPage: number, pageSize: number) {
+const getCourseList = async () => {
+    loading.value = true
+    const res = await getCourseListApi(params.value)
+    courseList.value = res.data.list
+    total.value = res.data.total
+    loading.value = false
+    // console.log(userStore.userName, '1111')
+}
+watch(() => userStore.userInfo.id, (newVal) => {
+    params.value.userId = newVal
+    getCourseList()
+})
+
+
+
+onMounted(() => {
+    if (userStore.userInfo.id) getCourseList()
+})
+const total = ref(0)
+const loading = ref(false)
+const courseList = ref()
+
 
+const isLogin = ref(false)
+userGetInfoService(userStore.token).then(res => {
+    // @ts-ignore
+    if (res.code === 200) {
+        isLogin.value = true
+    }
+})
+function skip(url: string) {
+    location.assign(url)
+}
+function handlePraise(item: any) {
+    if (isLogin.value) item.isPraise = !item.isPraise
+    else skip('http://localhost:5173/#/login?redirect=/configurationPage')
 }
+function handleStar(item: any) {
+    if (isLogin.value) item.isStar = !item.isStar
+    else skip('http://localhost:5173/#/login?redirect=/configurationPage')
+}
+
+
+// 点击查看课程详情，把课程id传过去
+const onGetCourseObject = async (id: any) => {
+
+    skip(`http://localhost:5173/#/curriculumCenter/courseDetails?id=${id}`)
 
-// 临时的，有接口后使用接口数据
-const dataList = ref([
-    {
-        id: '1',
-        isPraise: false,
-        isStar: false
-    },
-    {
-        id: '2',
-        isPraise: false,
-        isStar: false
-    },
-    {
-        id: '3',
-        isPraise: false,
-        isStar: false
-    },
-    {
-        id: '4',
-        isPraise: false,
-        isStar: false
-    },
-    {
-        id: '5',
-        isPraise: false,
-        isStar: false
-    },
-    {
-        id: '6',
-        isPraise: false,
-        isStar: false
-    },
-    {
-        id: '7',
-        isPraise: false,
-        isStar: false
-    },
-    {
-        id: '8',
-        isPraise: false,
-        isStar: false
-    },
-])
-function handlePraise(item:any) {
-    item.isPraise = !item.isPraise
 }
-function handleStar(item:any) {
+
-    item.isStar = !item.isStar
+function toPath(item: any) {
+    $router.push('/roadbedRecommendation?isCourse=true')
+    learnPathStore.setCourseData(item)
 }
 </script>
 
 <template>
-    <div class="view-container">
+    <div class="view-container" v-loading="loading">
         <div class="container" style="padding-bottom: 20px;">
 
-            <div class="main-content" v-loading="0">
+            <div class="main-content">
                 <div class="header">
                     <div class="btn">
                         <div class="course">
                             <ul class="course_list">
-                                <li v-for="item in dataList" :key="item.id">
+                                <li v-for="item in courseList" :key="item.id">
-                                    <img title="点击查看课程详情" :src="''" alt="" @click="" />
+                                    <img title="点击查看课程详情" :src="item.img" alt="" @click="onGetCourseObject(item.id)" />
-                                    <h2 title="点击查看课程基本信息" class="course_name" @click="">
+                                    <h2 title="点击查看课程基本信息" class="course_name">
-                                        软件项目管理
+                                        {{ item.name }}
                                     </h2>
-                                    <p class="teacher_name">讲师：肖海南</p>
+                                    <p class="teacher_name">讲师：{{ item.teacher }}</p>
                                     <p class="credit">
-                                        <span>4</span>
+                                        <span>{{ item.classhours }}</span>
                                         学时 |
-                                        <span>4</span>
+                                        <span>{{ item.credit }}</span>
                                         学分
                                     </p>
 
@@ -98,19 +115,24 @@ function handleStar(item:any) {
                                         </div>
 
                                     </div>
-                                    <el-button class="object" round plain @click="">
+                                    <div class="object">
-                                        查看课程详情
+                                        <el-button round plain @click="onGetCourseObject(item.id)">
+                                            详情
+                                        </el-button>
+                                        <el-button round plain @click="toPath(item)">
+                                            路径规划
                                         </el-button>
+                                    </div>
+
                                 </li>
                             </ul>
                         </div>
                     </div>
                 </div>
             </div>
-            <el-pagination v-model:current-page="paginationData.pageNo" v-model:page-size="paginationData.pageSize"
+            <el-pagination v-model:current-page="params.pageNo" v-model:page-size="params.pageSize"
-                :page-sizes="[2, 5, 8, 10]" :background="true" layout="jumper,total, sizes, prev, pager, next "
+                :page-sizes="[2, 5, 7, 10]" :background="true" layout="jumper,total, sizes, prev, pager, next "
-                :total="paginationData.total" @change="paginationChange"
+                :total="total" @change="paginationChange" style="margin-top: 10px; justify-content: center" />
-                style="margin-top: 10px; justify-content: center" />
 
         </div>
     </div>

src/views/roadbedRecommendation/index.vue

@@ -2,25 +2,11 @@
   <div class="path-title">
     <div class="title">前端课程学习路径推荐</div>
     <div class="setting">
-      <el-select
+      <el-select v-model="courseName" placeholder="请选择课程" size="large" style="width: 200px">
-        v-model="courseName"
+        <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id" />
-        placeholder="请选择课程"
-        size="large"
-        style="width: 200px"
-      >
-        <el-option
-          v-for="item in options"
-          :key="item.id"
-          :label="item.label"
-          :value="item.id"
-        />
       </el-select>
       <el-button type="primary" style="margin-left: 20px">切换</el-button>
-      <el-button
+      <el-button type="primary" style="margin-left: 20px" @click="Router.push('/')">
-        type="primary"
-        style="margin-left: 20px"
-        @click="Router.push('/')"
-      >
         返回课程首页
       </el-button>
     </div>
@@ -37,12 +23,7 @@
         <el-table-column prop="content" label="学习路径">
           <template v-slot="{ row }">
             <div>
-              <el-tag
+              <el-tag style="margin-right: 10px" type="primary" v-for="(item, index) in row.content" :key="index">
-                style="margin-right: 10px"
-                type="primary"
-                v-for="(item, index) in row.content"
-                :key="index"
-              >
                 {{ item }}
               </el-tag>
             </div>
@@ -55,17 +36,28 @@
         前端课程主要分为四个分支，每个分支包含很多知识点，其中分为三个阶段在每个阶段有不同的知识点，在学习后继知识点需要学习前置知识点
       </div>
     </el-card>
+    <el-card v-if="$route.query.isCourse === 'true'" style="margin-top: 20px;">
+      <h1 style="text-align: center;font-size: 20px;font-weight: bolder;">相关信息</h1>
+      <div style="color: #ccc;">{{ learnPathStore.courseData.name }}</div>
+      <div style="font-size: 16px;line-height: 1.5;">{{ learnPathStore.courseData.description }}</div>
+    </el-card>
+    <el-card v-else style="margin-top: 20px;" >
+      <h1 style="text-align: center;font-size: 20px;font-weight: bolder;">最新的课程</h1>
+    </el-card>
 
   </div>
 
 </template>
 
 <script lang="ts" setup>
+import useLearnPathStore from '@/store/module/learnPath';
+const learnPathStore = useLearnPathStore()
 import { ref } from 'vue'
 import mountNode from './components/mountNode.vue'
 import { useRouter } from 'vue-router'
 const Router = useRouter()
 const courseName = ref('')
+
 const options = [
   {
     id: 1,
@@ -107,6 +99,7 @@ const tableData = [
   height: 600px;
   background-color: #f5f6fd;
 }
+
 .path-title {
   position: relative;
   width: 100%;
@@ -114,12 +107,14 @@ const tableData = [
   //   background-color: skyblue;
   display: flex;
   justify-content: center;
+
   .title {
     font-size: 18px;
     height: 100%;
     line-height: 50px;
     font-weight: 600;
   }
+
   .setting {
     position: absolute;
     left: 50%;
@@ -130,10 +125,12 @@ const tableData = [
     align-items: center;
   }
 }
+
 .statistics {
   width: 100%;
   margin-top: 50px;
   padding: 0 30px 30px 30px;
+
   .title {
     font-size: 32px;
     font-weight: 600;
@@ -141,7 +138,8 @@ const tableData = [
     // margin: 30px 0;
   }
 }
-.path-description{
+
+.path-description {
   // padding: 20px 30px;
   margin: 30px 0;
   font-size: 14px;