修复bug

src/components/HomeComponents/NavBar.vue

@@ -13,9 +13,9 @@
       </button>
       <div class="flex md:order-2 md:space-x-0 rtl:space-x-reverse">
 
-          <div v-if="isLoggedIn" class="flex items-center space-x-3 right-2 fixed top-3">
+          <div v-if="user.isLoggedIn" class="flex items-center space-x-3 right-2 fixed top-3">
               <div class="flex items-center">
-                  <span class="text-gray-900 mr-6 ">{{ username }}</span>
+                  <span class="text-gray-900 mr-6 ">{{ user.username }}</span>
                   <img :src="avatar" alt="User Avatar" class="w-10 h-10 rounded-full "  @click="showDrawer">
               </div>
               <a-drawer
@@ -28,13 +28,11 @@
                       @after-open-change="afterOpenChange"
                       title="个人信息"
                       :closable="false"
-
-
               >
                   <template #extra>
                       <div class="flex items-center space-x-2">
-                          <img :src="avatar" alt="User Avatar" class="w-10 h-10 rounded-full">
+                          <img :src="user.avatar" alt="User Avatar" class="w-10 h-10 rounded-full">
-                          <span class="text-gray-900">{{ username }}</span>
+                          <span class="text-gray-900">{{ user.username }}</span>
                       </div>
                   </template>
                   <div class="flex flex-col space-y-4 mb-4 ">
@@ -47,7 +45,7 @@
                       <hr class="mb-2">
                       <span class="lg:hover:text-blue-700" @click="JumpPersonalProject"><UserOutlined class="mr-1.5"/>我的项目</span>
                       <span class="lg:hover:text-blue-700" @click="JumpMyManage"><ToolOutlined  class="mr-1.5"/>我管理的</span>
-                      <span v-if="role === true" class=" lg:hover:text-blue-700" @click="JumpMyResponsible" ><UserOutlined  class="mr-1.5" />我负责的</span>
+                      <span v-if="user.role === true" class=" lg:hover:text-blue-700" @click="JumpMyResponsible" ><UserOutlined  class="mr-1.5" />我负责的</span>
                       <hr>
                       <span class=" lg:hover:text-blue-700" @click="JumpPersonalInformation"><MessageOutlined  class="mr-1.5" />个人信息管理</span>
 
@@ -80,12 +78,13 @@
 </template>
 
 <script setup>
-import {h, onMounted, ref} from "vue";
+import {h, ref} from "vue";
 import requests from "../../js/request.js";
 import {message} from "ant-design-vue";
 import {useRouter} from "vue-router";
 import {BellOutlined, MailOutlined, MessageOutlined, ToolOutlined, UserOutlined} from '@ant-design/icons-vue';
 
+ const user = defineProps(['username','role', 'isLoggedIn', 'avatar'])
 
 const items = ref([
     {
@@ -155,18 +154,9 @@ const current = ref(['mail']);
 function updateCurrent(key) {
   console.log("key",key)
     current.value = [key];
-    console.log('6666',current)
-
 }
 const router = useRouter()
-const closable = ref(false)
-const isDropdownOpen  = ref(false);
-const textColor = ref("black");
-const isLoggedIn = ref(false);
-const username =ref('') ;
-const avatar  =ref('')
 const token = window.localStorage.getItem('token')
-const role =ref(false)
 // 侧边栏
 const open = ref(false);
 const afterOpenChange = bool => {
@@ -175,84 +165,19 @@ const afterOpenChange = bool => {
 const showDrawer = () => {
     open.value = true;
 };
-function  toggleDropdown(){
-    isDropdownOpen.value = !isDropdownOpen.value;
-
-}
-// function  changeColor(item){
-//     const homeLink = document.getElementById('homeLink');
-//     const projectsLink = document.getElementById('projectsLink');
-//
-//     homeLink.classList.remove('text-blue-500');
-//     projectsLink.classList.remove('text-blue-500');
-//
-//     if (item === 'home') {
-//         homeLink.classList.add('text-blue-500');
-//     } else if (item === 'projects') {
-//         projectsLink.classList.add('text-blue-500');
-//     }
-//     // textColor.value = 'blue';
-// }
-
-function changeColor(id) {
-    const links = document.getElementsByClassName('nav-link');
-    for (let i = 0; i < links.length; i++) {
-        if (links[i].id === id + '-link') {
-            links[i].classList.add('text-blue-500');
-        } else {
-            links[i].classList.remove('text-blue-500');
-        }
-    }
-}
-// function backMain() {
-//     // 当按钮被点击时，将文字颜色改为蓝色
-//     // textColor.value = 'blue';
-//     router.push("/")
-// }
-
 function exitLogin(){
     requests.logout(token).then((res) => {
         if(res.data.code === 200){
-            router.push("/login")
+            router.push("/")
             console.log(res)
-            isLoggedIn.value = false; //头像展示
+            user.isLoggedIn = false; //头像展示
             message.success("退出成功！")
         }else{
             message.error("退出失败！")
         }
     })
 }
-onMounted(() => {
+
-    requests.userGetProfile(token).then((res)=>{
-        console.log(res)
-        // if(token ===null){
-        //  router.push('/')
-        // }
-        // else{
-            if (res.data.code === 200) {
-                //登录成功
-                isLoggedIn.value = true; //头像展示
-                username.value = res.data.data.username
-                // avatar.value = res.data.data.avatar   数据库无头像，暂时用下面的头像
-                avatar.value = 'https://img1.baidu.com/it/u=2005056479,139681251&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1710176400&t=4f32b862465c709f79c8fb80d3c0444b';
-                console.log(username.value, avatar.value)
-                if (res.data.data.role === '老师') {
-                    console.log('这是老师');
-                    // 执行老师相关的逻辑
-                    role.value =true
-                } else {
-                    console.log('这不是老师');
-                    // 执行非老师相关的逻辑
-                    role.value= false
-                }
-            }else {
-                //用户过期，重新登录
-            //     message.error("用户过期，请重新登录！")
-            //     router.push("/login")
-            }
-        // }
-    })
-  })
 
 // 跳转
 function JumpPersonalProject (){

src/components/WorkLoadComponents/Header.vue

@@ -157,29 +157,20 @@
   color: #4299e1 !important; /* 鼠标悬浮时的SVG颜色 */
 }
 </style>
-<script>
+<script setup>
-import NavBar from "@/components/HomeComponents/NavBar.vue";
 import colors from "tailwindcss/colors.js";
+import {ref} from "vue";
 
-export default {
+      const isDropdownOpen = ref(false)
-    components: {NavBar},
+const textColor = ref('black')
-  data() {
+  // function colors() {
-    return {
+  //   return colors
-      isDropdownOpen: false,
+  // }
-      textColor: 'black',
+  // function toggleDropdown() {
-    };
+  //   this.isDropdownOpen = !this.isDropdownOpen;
-  },
+  // }
-  methods: {
+  // function changeColor() {
-    colors() {
+  //   // 当按钮被点击时，将文字颜色改为蓝色
-      return colors
+  //   textColor.value = 'blue';
-    },
+  // }
-    toggleDropdown() {
-      this.isDropdownOpen = !this.isDropdownOpen;
-    },
-    changeColor() {
-      // 当按钮被点击时，将文字颜色改为蓝色
-      this.textColor = 'blue';
-    },
-  },
-};
 </script>

src/router/index.js

@@ -7,10 +7,11 @@ const router = createRouter({
       path:'/',
       name:'app',
       component:()=>import('../views/HomePage/IndexView.vue'),
-      children:[{
+      children:[
+          {
         path: "/",
         component:() => import ('../views/HomePage/Main.vue')
-      },{
+          },{
         path:'/Project',
         name:'Project',
         component:()=>import('@/views/ProjectPage/ProjectCard.vue')

src/views/HomePage/IndexView.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="w-[100%] h-auto">
     <div class="flex flex-col">
-      <NavBar/>
+      <NavBar v-bind="user" />
       <router-view></router-view>
       <More/>
       <Icp/>
@@ -10,11 +10,49 @@
 </template>
 
 <script setup>
-import {onMounted} from 'vue'
+import {onMounted, reactive, ref} from 'vue'
 import {initFlowbite} from 'flowbite'
+import requests from "@/js/request.js";
+
+const token = window.localStorage.getItem('token')
+
+const user = reactive({
+  role:false,
+  avatar:'',
+  username:'',
+  isLoggedIn:false
+})
 
 onMounted(() => {
-initFlowbite();
+  initFlowbite();
+  requests.userGetProfile(token).then((res)=>{
+    console.log(res)
+    // if(token ===null){
+    //  router.push('/')
+    // }
+    // else{
+    if (res.data.code === 200) {
+      //登录成功
+      user.isLoggedIn = true; //头像展示
+      user.username = res.data.data.username
+      // avatar.value = res.data.data.avatar   数据库无头像，暂时用下面的头像
+      user.avatar = 'https://img1.baidu.com/it/u=2005056479,139681251&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1710176400&t=4f32b862465c709f79c8fb80d3c0444b';
+      // console.log(username.value, avatar.value)
+      if (res.data.data.role === '老师') {
+        // 执行老师相关的逻辑
+        user.role =true
+      } else {
+        console.log('这不是老师');
+        // 执行非老师相关的逻辑
+        user.role= false
+      }
+    }else {
+      //用户过期，重新登录
+      //     message.error("用户过期，请重新登录！")
+      //     router.push("/login")
+    }
+    // }
+  })
 })
 import NavBar from "@/components/HomeComponents/NavBar.vue";
 

src/views/WorkLoadPage/WorkLoad.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col h-screen">
     <Header></Header>
-    <MainSection></MainSection>
+  <router-view></router-view>
   </div>
 </template>
 <script setup>