From 94c26c35a68359b288f48969827630e78829cc69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A6=96=E5=A7=90?= <2981176548@qq.com>
Date: Mon, 11 Mar 2024 01:46:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HomeComponents/NavBar.vue     |  87 ++++++------
 src/components/WorkLoadComponents/Header.vue | 132 ++++++++++---------
 2 files changed, 114 insertions(+), 105 deletions(-)

diff --git a/src/components/HomeComponents/NavBar.vue b/src/components/HomeComponents/NavBar.vue
index 7dcc039..2c752de 100644
--- a/src/components/HomeComponents/NavBar.vue
+++ b/src/components/HomeComponents/NavBar.vue
@@ -18,8 +18,6 @@
                   <span class="text-gray-900 mr-6 ">{{ username }}</span>
                   <img :src="avatar" alt="User Avatar" class="w-10 h-10 rounded-full "  @click="showDrawer">
               </div>
-
-
               <a-drawer
                       v-model:open="open"
                       class="custom-class"
@@ -40,28 +38,24 @@
                       </div>
                   </template>
                   <div class="flex flex-col space-y-4 mb-4 ">
-                  <span class="lg:hover:text-blue-700" ><UserOutlined />我的项目</span>
-                  <span class="lg:hover:text-blue-700" ><MailOutlined />消息</span>
-                  <span class="lg:hover:text-blue-700"><BellOutlined />日报</span>
+                  <span class="lg:hover:text-blue-700" @click="JumpPersonalBelonging"><UserOutlined class="mr-1.5"/>我的项目</span>
+                  <span class="lg:hover:text-blue-700" @click="JumpMessage" ><MailOutlined  class="mr-1.5"/>消息</span>
+                  <span class="lg:hover:text-blue-700" @click="JumpDailyPaper"><BellOutlined  class="mr-1.5"/>日报</span>
                   </div>
 
                   <div class="flex flex-col space-y-4">
                       <hr class="mb-2">
-                      <span class="lg:hover:text-blue-700"><ToolOutlined />我管理的</span>
+                      <span class="lg:hover:text-blue-700" @click="JumpMyManage"><ToolOutlined  class="mr-1.5"/>我管理的</span>
                       <hr>
-                      <span class=" lg:hover:text-blue-700"><MessageOutlined />个人信息管理</span>
+                      <span class=" lg:hover:text-blue-700" @click="JumpPersonalInformation"><MessageOutlined  class="mr-1.5" />个人信息管理</span>
 
                       <div  v-if="role === true" class="flex flex-col space-y-4">
                           <hr>
-                          <span class=" lg:hover:text-blue-700" ><UserOutlined />我负责的</span>
+                          <span class=" lg:hover:text-blue-700" @click="JumpMyResponsible" ><UserOutlined  class="mr-1.5" />我负责的</span>
                       </div>
 
                   </div>
-                  <div class="fixed bottom-0  right-0 bg-white w-[24.5vw] h-[10vh] items-center ">
-
-                      <span @click="exitLogin" class="bg-gray-50 lg:hover:text-blue-400  text-lg bottom-2 fixed ">退出登录</span>
-                  </div>
-<!--                  <a-button type="primary" ghost>退出登录</a-button>-->
+                      <span @click="exitLogin" class="bg-gray-50 lg:hover:text-blue-400  text-lg bottom-2 fixed right-2">退出登录</span>
               </a-drawer>
 
           </div>
@@ -124,14 +118,13 @@
 
 </template>
 <script setup>
-import {onMounted, reactive, ref} from "vue";
+import {onMounted, 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 router = useRouter()
-
 const closable = ref(false)
 const isDropdownOpen  = ref(false);
 const textColor = ref("black");
@@ -139,22 +132,35 @@ const isLoggedIn = ref(false);
 const username =ref('') ;
 const avatar  =ref('')
 const token = window.localStorage.getItem('token')
-const states = reactive({
-    data:[],
-})
-
 const role =ref(false)
-
+// 侧边栏
+const open = ref(false);
+const afterOpenChange = bool => {
+    console.log('open', bool);
+};
+const showDrawer = () => {
+    open.value = true;
+};
 function  toggleDropdown(){
     isDropdownOpen.value = !isDropdownOpen.value;
 
 }
+
 function changeColor() {
     // 当按钮被点击时，将文字颜色改为蓝色
     textColor.value = 'blue';
 }
 function exitLogin(){
-    router.push("/login")
+    requests.logout(token).then((res) => {
+        if(res.data.code === 200){
+            router.push("/login")
+            console.log(res)
+            message.success("退出成功！")
+        }else{
+            message.error("退出失败！")
+        }
+    })
+
 }
 onMounted(() => {
     requests.userGetProfile(token).then((res)=>{
@@ -173,27 +179,26 @@ onMounted(() => {
             router.push("/login")
         }
     })
+  })
 
-
-
-
-
-// if(token !=null){
-//     isLoggedIn.value = true;
-//     username.value = window.localStorage.getItem('username');
+// 跳转
+function JumpPersonalBelonging (){
+    router.push("/WorkLoad/PersonalBelongings")
+}
+function  JumpMessage (){
+    router.push("WorkLoad/Message")
+}
+function  JumpDailyPaper (){
+    router.push("/WorkLoad/DailyPaper")
+}
+function  JumpMyManage (){
+    router.push("/WorkLoad/I_Manage")
+}
+function  JumpPersonalInformation (){
+    router.push("/WorkLoad/PersonalInformation")
+}
+// function  MyResponsible(){
+//     router.push("")
 // }
-    // 假设在登录成功后，从服务器获取用户信息
-    // 然后更新data中的相关数据
-})
-
-// 侧边栏
-const open = ref(false);
-const afterOpenChange = bool => {
-    console.log('open', bool);
-};
-const showDrawer = () => {
-    open.value = true;
-};
-
 
 </script>
diff --git a/src/components/WorkLoadComponents/Header.vue b/src/components/WorkLoadComponents/Header.vue
index daa90dd..0c545c0 100644
--- a/src/components/WorkLoadComponents/Header.vue
+++ b/src/components/WorkLoadComponents/Header.vue
@@ -1,69 +1,70 @@
 <template>
   <div class="flex flex-col">
-    <nav class="text-base z-50 sticky top-0 bg-white border-gray-200">
-      <!-- <div class="text-sky-600">000</div> -->
-      <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
-        <a class="flex items-center space-x-3 rtl:space-x-reverse" href="/src/js">
-          <span class="self-center text-2xl font-semibold whitespace-nowrap">LOGO</span>
-        </a>
-        <button aria-controls="navbar-dropdown" aria-expanded="false" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200" data-collapse-toggle="navbar-dropdown" type="button">
-          <span class="sr-only">Open main menu</span>
-          <svg aria-hidden="true" class="w-5 h-5" fill="none" viewBox="0 0 17 14" xmlns="http://www.w3.org/2000/svg">
-            <path d="M1 1h15M1 7h15M1 13h15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-          </svg>
-        </button>
-        <div class="flex md:order-2 md:space-x-0 rtl:space-x-reverse">
-          <a class="text-black focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-center" href="/login">
-            登录 |
-          </a>
-          <a class="text-black  focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg pl-2 text-center" href="/register">
-            注册
-          </a>
-        </div>
-        <div id="navbar-dropdown" class="w-full md:block md:w-auto">
-          <ul class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white">
-            <li>
-              <a aria-current="page" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-500 md:p-0" href="/src/js">
-                首页
-              </a>
-            </li>
-            <li>
-              <a class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0" href="/Project" @click="changeColor">
-                项目
-              </a>
-            </li>
-            <li class="relative">
-              <button id="dropdownNavbarLink" class="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto" data-dropdown-toggle="dropdownNavbar" @click="toggleDropdown()">
-                关于
-                <svg aria-hidden="true" class="w-2.5 h-2.5 ms-2.5" fill="none" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">
-                  <path d="m1 1 4 4 4-4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-                </svg>
-              </button>
-              <!-- Dropdown menu -->
-              <div v-if="isDropdownOpen" id="dropdownNavbar" class="absolute font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44">
-                <ul aria-labelledby="dropdownLargeButton" class="py-2 text-sm text-gray-700 dark:text-gray-400">
-                  <li>
-                    <a class="block px-4 py-2 hover:bg-gray-100" href="#">关于我们</a>
-                  </li>
-                  <li>
-                    <a class="block px-4 py-2 hover:bg-gray-100" href="#">加入我们</a>
-                  </li>
-                  <li>
-                    <a class="block px-4 py-2 hover:bg-gray-100" href="#">项目合作</a>
-                  </li>
-                </ul>
-              </div>
-            </li>
-            <li>
-              <a class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0" href="#">团队</a>
-            </li>
-            <li>
-              <a class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0" href="/New">新闻</a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </nav>
+<!--    <nav class="text-base z-50 sticky top-0 bg-white border-gray-200">-->
+<!--      &lt;!&ndash; <div class="text-sky-600">000</div> &ndash;&gt;-->
+<!--      <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">-->
+<!--        <a class="flex items-center space-x-3 rtl:space-x-reverse" href="/src/js">-->
+<!--          <span class="self-center text-2xl font-semibold whitespace-nowrap">LOGO</span>-->
+<!--        </a>-->
+<!--        <button aria-controls="navbar-dropdown" aria-expanded="false" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200" data-collapse-toggle="navbar-dropdown" type="button">-->
+<!--          <span class="sr-only">Open main menu</span>-->
+<!--          <svg aria-hidden="true" class="w-5 h-5" fill="none" viewBox="0 0 17 14" xmlns="http://www.w3.org/2000/svg">-->
+<!--            <path d="M1 1h15M1 7h15M1 13h15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>-->
+<!--          </svg>-->
+<!--        </button>-->
+<!--        <div class="flex md:order-2 md:space-x-0 rtl:space-x-reverse">-->
+<!--          <a class="text-black focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-center" href="/login">-->
+<!--            登录 |-->
+<!--          </a>-->
+<!--          <a class="text-black  focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg pl-2 text-center" href="/register">-->
+<!--            注册-->
+<!--          </a>-->
+<!--        </div>-->
+<!--        <div id="navbar-dropdown" class="w-full md:block md:w-auto">-->
+<!--          <ul class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white">-->
+<!--            <li>-->
+<!--              <a aria-current="page" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-500 md:p-0" href="/src/js">-->
+<!--                首页-->
+<!--              </a>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              <a class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0" href="/Project" @click="changeColor">-->
+<!--                项目-->
+<!--              </a>-->
+<!--            </li>-->
+<!--            <li class="relative">-->
+<!--              <button id="dropdownNavbarLink" class="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto" data-dropdown-toggle="dropdownNavbar" @click="toggleDropdown()">-->
+<!--                关于-->
+<!--                <svg aria-hidden="true" class="w-2.5 h-2.5 ms-2.5" fill="none" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">-->
+<!--                  <path d="m1 1 4 4 4-4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>-->
+<!--                </svg>-->
+<!--              </button>-->
+<!--              &lt;!&ndash; Dropdown menu &ndash;&gt;-->
+<!--              <div v-if="isDropdownOpen" id="dropdownNavbar" class="absolute font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44">-->
+<!--                <ul aria-labelledby="dropdownLargeButton" class="py-2 text-sm text-gray-700 dark:text-gray-400">-->
+<!--                  <li>-->
+<!--                    <a class="block px-4 py-2 hover:bg-gray-100" href="#">关于我们</a>-->
+<!--                  </li>-->
+<!--                  <li>-->
+<!--                    <a class="block px-4 py-2 hover:bg-gray-100" href="#">加入我们</a>-->
+<!--                  </li>-->
+<!--                  <li>-->
+<!--                    <a class="block px-4 py-2 hover:bg-gray-100" href="#">项目合作</a>-->
+<!--                  </li>-->
+<!--                </ul>-->
+<!--              </div>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              <a class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0" href="#">团队</a>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              <a class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0" href="/New">新闻</a>-->
+<!--            </li>-->
+<!--          </ul>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--    </nav>-->
+      <NavBar></NavBar>
     <nav class="bg-gray-50">
       <div class="max-w-screen-xl px-4 py-3 ml-6">
         <div class="flex items-center">
@@ -141,7 +142,10 @@
 }
 </style>
 <script>
+import NavBar from "@/components/HomeComponents/NavBar.vue";
+
 export default {
+    components: {NavBar},
   data() {
     return {
       isDropdownOpen: false,