初始化页面导航

src/api/courseCenter.ts → src/api/demo.ts

@@ -1,4 +1,4 @@
-import request from '../utils/request.ts'
+import request from '../utils/request.js'
 
 let teacherPrefix = import.meta.env.VITE_API_TEACHER_PRE 
 

src/layout/components/header.vue

@@ -5,6 +5,14 @@
       <span class="big_head">教师智能工作平台</span>
       <!-- <div class="small_head">大数据精准教学平台</div> -->
     </div>
+
+    <ul class="horizontal_nav" v-if="horizontalNavList?.length > 0">
+      <li v-for="navItm in horizontalNavList" @click="router.push(navItm.route)" :class="{active:route.path == navItm.route}" >
+        {{ navItm.title }}
+      </li>
+    </ul>
+
+
     <div class="head_content_right">
       <!-- <span class="schoolName"> -->
         <!-- {{userInfo.schoolName}} -->
@@ -60,6 +68,7 @@ export default {
 </script>
 <script lang="ts" setup>
 import router from '@/router'
+import { useRoute } from 'vue-router'
 import { ArrowDown } from '@element-plus/icons-vue'
 import { ref, reactive, computed } from 'vue'
 import {loginOut} from '@/api/login.ts'
@@ -67,6 +76,21 @@ import { ElMessage } from 'element-plus'
 import type { FormInstance, FormRules } from 'element-plus'
 import defaultIcon from '@/assets/school/default_logo.svg'
 
+const route = useRoute()
+
+
+interface NavItm {
+  title:String,
+  route:String,
+}
+
+const props = defineProps({
+  horizontalNavList:{
+    type:Array<NavItm>,
+    default:()=>[]
+  }
+})
+
 // 跳转登录页
 const GoToLogin = ()=>{
   // router.push('/login')
@@ -205,4 +229,25 @@ const confirmPassWord = async (formEl: FormInstance | undefined) => {
     }
   }
 }
+
+.horizontal_nav{
+  height: 100%;
+  display: flex;
+  align-items: center;
+  li{
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    padding:10px;
+    font-size: 18px;
+    color: #FFFFFF;
+    cursor: pointer;
+    &.active{
+      background-color: #2550C8;
+    }
+  }
+
+}
 </style>

src/layout/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="layout">
-    <Header/>
+    <Header :horizontalNavList="horizontalNavList"/>
     <AppMain :menuItems="menuList" />
   </div>
 </template>
 
 <!-- vue3 setup -->
 <script setup lang="ts">
-import {computed,} from 'vue'
+import {computed,ref} from 'vue'
 import Header from './components/header.vue'
 import AppMain from './components/AppMain.vue'
 import { useStore } from 'vuex'
@@ -17,17 +17,14 @@ const route = useRoute()
 
 // 此处要根据登录用户的权限 分条件展示 不同的内容
 const menuList =  computed(()=>{
-  let user= JSON.parse(localStorage.getItem('userInfo') || '{}')
-  console.log('用户信息',user)
-  //  user.roleNames
-  // if(route.path.startsWith('/main/learningRoom') ||  route.path.startsWith('/main/learningMonitorDetail') ){
-  //   return []
-  // }else{
-      return store.state.managerMenuItems
-  // }
+  return []
 })
 
 
+const horizontalNavList = computed(()=>{
+  return store.state.horizontalMenuItems
+})
+
 </script>
 
 <style>

src/router/index.ts

@@ -23,11 +23,24 @@ const routes: Array<RouteRecordRaw> = [
     children: [
       {
         path: '',
-        name: 'courseCenter',
-        component: () => import('@/views/courseCenter/CourseCenter.vue')
+        name: 'surveyManagement',
+        component: () => import('@/views/surveyManagement/SurveyManagement.vue')
+      },
+      {
+        path: 'reviewManagement',
+        name: 'reviewManagement',
+        component: () => import('@/views/reviewManagement/ReviewManagement.vue')
+      },
+      {
+        path: 'reviewAnalysis',
+        name: 'reviewAnalysis',
+        component: () => import('@/views/reviewAnalysis/ReviewAnalysis.vue')
+      },
+      {
+        path: 'personalCenter',
+        name: 'personalCenter',
+        component: () => import('@/views/personalCenter/personalCenter.vue')
       },
-
-     
     ]
 
   },

src/store/index.ts

@@ -13,14 +13,25 @@ interface RootState {
 const store = createStore<RootState>({
   state: () => ({
     count: 0,
-    managerMenuItems:[
+    horizontalMenuItems:[
       {
-        title:'课程中心',
-        icon:'hjx-kechengzhongxin',
+        title:'问卷管理',
         route:`/main`
       },
+      {
+        title:'评价管理',
+        route:`/main/reviewManagement`
+      },
+      {
+        title:'评价分析',
+        route:`/main/reviewAnalysis`
+      },
+      {
+        title:'个人中心',
+        route:`/main/personalCenter`
+      },
+    ]
 
-    ],
   }),
   mutations: {
     increment(state: RootState) {
@@ -34,9 +45,8 @@ const store = createStore<RootState>({
   },
   getters: {
     count: (state: RootState) => state.count,
-
-    getDemoManagerMenuItems:(state)=>()=>{
-      return  state.managerMenuItems.map(item=>{
+    getDemo:(state)=>()=>{
+      return  state.horizontalMenuItems.map(item=>{
           return item
       })
     },

src/views/courseCenter/CourseCenter.vue

@@ -1,38 +0,0 @@
-<template>
-    <div  ref="courseDom" class="main_container">
-        <div  class="page_item end_item">
-            <div class="scroll_page">
-            </div>
-            
-            <div class="page_jg_20"></div>
-           
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import {onMounted, ref} from 'vue'
-
-
-
-
-
-
-onMounted(async ()=>{
-})
-</script>
-
-<style lang="scss" scoped>
-.main_container{
-    overflow: auto;
-    flex-direction: column;
-    gap: 20px;
-    .end_item{
-        > div:last-child{
-        flex-grow: 0 !important;
-        }
-    }
-}
-
-
-</style>

src/views/login/login.vue

@@ -97,7 +97,6 @@ import { ref, onMounted, computed, watch } from 'vue'
 // import particles from 'particles.js'
 import { login,getUserInfo} from '@/api/login.ts'
 
-// import { studentLogin,getStudentUserInfo } from '@/api/studentLogin.ts'
 import { ElMessage } from 'element-plus' // 
 import { useRouter } from 'vue-router'
 import { encrypt } from "@/utils/jsencrypt";
@@ -249,26 +248,6 @@ onMounted(() => {
   }
 })
 
-const apiMsg =  computed(()=>{
-  /*
-  if(isStudentLogin.value){
-    return {
-      login:studentLogin,
-      getUserInfo:getStudentUserInfo
-    }
-  }else{
-    return {
-      login:teacherLogin,
-      getUserInfo:getTeacherUserInfo
-    }
-  }
-  */
-  return {
-    login,
-    getUserInfo
-  }
-})
-
 const HandleLoginChange = (val)=>{
   isStudentLogin.value = val
 }
@@ -303,7 +282,7 @@ const SubmitLogin = async () => {
 
 
   try{
-    res  = await apiMsg.value.login(params)
+    res  = await login(params)
     loadingLogin.value = false
     if (res.code === 200) {
       console.log("登录成功返回",res)
@@ -314,7 +293,7 @@ const SubmitLogin = async () => {
       
       // 登录成功后调用获取用户信息接口  
       let userInfoRes = undefined
-      userInfoRes = await apiMsg.value.getUserInfo(res.data.token)
+      userInfoRes = await getUserInfo(res.data.token)
       console.log("获取用户信息返回",userInfoRes)
       if (userInfoRes?.code === 200) {
         // 存储用户信息到 localStorage 或 Pinia

src/views/personalCenter/PersonalCenter.vue

@@ -0,0 +1,19 @@
+<template>
+    <div  ref="courseDom" class="main_container">
+        <div  class="page_item end_item">
+           
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import {onMounted, ref} from 'vue'
+
+
+
+onMounted(async ()=>{
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/reviewAnalysis/ReviewAnalysis.vue

@@ -0,0 +1,19 @@
+<template>
+    <div  ref="courseDom" class="main_container">
+        <div  class="page_item end_item">
+           
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import {onMounted, ref} from 'vue'
+
+
+
+onMounted(async ()=>{
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/reviewManagement/ReviewManagement.vue

@@ -0,0 +1,19 @@
+<template>
+    <div  ref="courseDom" class="main_container">
+        <div  class="page_item end_item">
+           
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import {onMounted, ref} from 'vue'
+
+
+
+onMounted(async ()=>{
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/surveyManagement/SurveyManagement.vue

@@ -0,0 +1,19 @@
+<template>
+    <div  ref="courseDom" class="main_container">
+        <div  class="page_item end_item">
+           
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import {onMounted, ref} from 'vue'
+
+
+
+onMounted(async ()=>{
+})
+</script>
+
+<style lang="scss" scoped>
+</style>