diff --git a/package-lock.json b/package-lock.json
index 20e27fc..8fb97b4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -817,49 +817,49 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.4.15",
-      "resolved": "https://mirrors.cloud.tencent.com/npm/@vue/compiler-core/-/compiler-core-3.4.15.tgz",
-      "integrity": "sha512-XcJQVOaxTKCnth1vCxEChteGuwG6wqnUHxAm1DO3gCz0+uXKaJNx8/digSz4dLALCy8n2lKq24jSUs8segoqIw==",
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.11.tgz",
+      "integrity": "sha512-h97/TGWBilnLuRaj58sxNrsUU66fwdRKLOLQ9N/5iNDfp+DZhYH9Obhe0bXxhedl8fjAgpRANpiZfbgWyruQ0w==",
       "dependencies": {
-        "@babel/parser": "^7.23.6",
-        "@vue/shared": "3.4.15",
-        "entities": "^4.5.0",
+        "@babel/parser": "^7.23.5",
+        "@vue/shared": "3.3.11",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.0.2"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.4.15",
-      "resolved": "https://mirrors.cloud.tencent.com/npm/@vue/compiler-dom/-/compiler-dom-3.4.15.tgz",
-      "integrity": "sha512-wox0aasVV74zoXyblarOM3AZQz/Z+OunYcIHe1OsGclCHt8RsRm04DObjefaI82u6XDzv+qGWZ24tIsRAIi5MQ==",
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.11.tgz",
+      "integrity": "sha512-zoAiUIqSKqAJ81WhfPXYmFGwDRuO+loqLxvXmfUdR5fOitPoUiIeFI9cTTyv9MU5O1+ZZglJVTusWzy+wfk5hw==",
       "dependencies": {
-        "@vue/compiler-core": "3.4.15",
-        "@vue/shared": "3.4.15"
+        "@vue/compiler-core": "3.3.11",
+        "@vue/shared": "3.3.11"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.4.15",
-      "resolved": "https://mirrors.cloud.tencent.com/npm/@vue/compiler-sfc/-/compiler-sfc-3.4.15.tgz",
-      "integrity": "sha512-LCn5M6QpkpFsh3GQvs2mJUOAlBQcCco8D60Bcqmf3O3w5a+KWS5GvYbrrJBkgvL1BDnTp+e8q0lXCLgHhKguBA==",
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.11.tgz",
+      "integrity": "sha512-U4iqPlHO0KQeK1mrsxCN0vZzw43/lL8POxgpzcJweopmqtoYy9nljJzWDIQS3EfjiYhfdtdk9Gtgz7MRXnz3GA==",
       "dependencies": {
-        "@babel/parser": "^7.23.6",
-        "@vue/compiler-core": "3.4.15",
-        "@vue/compiler-dom": "3.4.15",
-        "@vue/compiler-ssr": "3.4.15",
-        "@vue/shared": "3.4.15",
+        "@babel/parser": "^7.23.5",
+        "@vue/compiler-core": "3.3.11",
+        "@vue/compiler-dom": "3.3.11",
+        "@vue/compiler-ssr": "3.3.11",
+        "@vue/reactivity-transform": "3.3.11",
+        "@vue/shared": "3.3.11",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.30.5",
-        "postcss": "^8.4.33",
+        "postcss": "^8.4.32",
         "source-map-js": "^1.0.2"
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.4.15",
-      "resolved": "https://mirrors.cloud.tencent.com/npm/@vue/compiler-ssr/-/compiler-ssr-3.4.15.tgz",
-      "integrity": "sha512-1jdeQyiGznr8gjFDadVmOJqZiLNSsMa5ZgqavkPZ8O2wjHv0tVuAEsw5hTdUoUW4232vpBbL/wJhzVW/JwY1Uw==",
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.11.tgz",
+      "integrity": "sha512-Zd66ZwMvndxRTgVPdo+muV4Rv9n9DwQ4SSgWWKWkPFebHQfVYRrVjeygmmDmPewsHyznCNvJ2P2d6iOOhdv8Qg==",
       "dependencies": {
-        "@vue/compiler-dom": "3.4.15",
-        "@vue/shared": "3.4.15"
+        "@vue/compiler-dom": "3.3.11",
+        "@vue/shared": "3.3.11"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -868,48 +868,60 @@
       "integrity": "sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA=="
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.4.15",
-      "resolved": "https://mirrors.cloud.tencent.com/npm/@vue/reactivity/-/reactivity-3.4.15.tgz",
-      "integrity": "sha512-55yJh2bsff20K5O84MxSvXKPHHt17I2EomHznvFiJCAZpJTNW8IuLj1xZWMLELRhBK3kkFV/1ErZGHJfah7i7w==",
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.11.tgz",
+      "integrity": "sha512-D5tcw091f0nuu+hXq5XANofD0OXnBmaRqMYl5B3fCR+mX+cXJIGNw/VNawBqkjLNWETrFW0i+xH9NvDbTPVh7g==",
       "dependencies": {
-        "@vue/shared": "3.4.15"
+        "@vue/shared": "3.3.11"
+      }
+    },
+    "node_modules/@vue/reactivity-transform": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.11.tgz",
+      "integrity": "sha512-fPGjH0wqJo68A0wQ1k158utDq/cRyZNlFoxGwNScE28aUFOKFEnCBsvyD8jHn+0kd0UKVpuGuaZEQ6r9FJRqCg==",
+      "dependencies": {
+        "@babel/parser": "^7.23.5",
+        "@vue/compiler-core": "3.3.11",
+        "@vue/shared": "3.3.11",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.5"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.4.15",
-      "resolved": "https://mirrors.cloud.tencent.com/npm/@vue/runtime-core/-/runtime-core-3.4.15.tgz",
-      "integrity": "sha512-6E3by5m6v1AkW0McCeAyhHTw+3y17YCOKG0U0HDKDscV4Hs0kgNT5G+GCHak16jKgcCDHpI9xe5NKb8sdLCLdw==",
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.11.tgz",
+      "integrity": "sha512-g9ztHGwEbS5RyWaOpXuyIVFTschclnwhqEbdy5AwGhYOgc7m/q3NFwr50MirZwTTzX55JY8pSkeib9BX04NIpw==",
       "dependencies": {
-        "@vue/reactivity": "3.4.15",
-        "@vue/shared": "3.4.15"
+        "@vue/reactivity": "3.3.11",
+        "@vue/shared": "3.3.11"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.4.15",
-      "resolved": "https://mirrors.cloud.tencent.com/npm/@vue/runtime-dom/-/runtime-dom-3.4.15.tgz",
-      "integrity": "sha512-EVW8D6vfFVq3V/yDKNPBFkZKGMFSvZrUQmx196o/v2tHKdwWdiZjYUBS+0Ez3+ohRyF8Njwy/6FH5gYJ75liUw==",
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.11.tgz",
+      "integrity": "sha512-OlhtV1PVpbgk+I2zl+Y5rQtDNcCDs12rsRg71XwaA2/Rbllw6mBLMi57VOn8G0AjOJ4Mdb4k56V37+g8ukShpQ==",
       "dependencies": {
-        "@vue/runtime-core": "3.4.15",
-        "@vue/shared": "3.4.15",
-        "csstype": "^3.1.3"
+        "@vue/runtime-core": "3.3.11",
+        "@vue/shared": "3.3.11",
+        "csstype": "^3.1.2"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.4.15",
-      "resolved": "https://mirrors.cloud.tencent.com/npm/@vue/server-renderer/-/server-renderer-3.4.15.tgz",
-      "integrity": "sha512-3HYzaidu9cHjrT+qGUuDhFYvF/j643bHC6uUN9BgM11DVy+pM6ATsG6uPBLnkwOgs7BpJABReLmpL3ZPAsUaqw==",
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.11.tgz",
+      "integrity": "sha512-AIWk0VwwxCAm4wqtJyxBylRTXSy1wCLOKbWxHaHiu14wjsNYtiRCSgVuqEPVuDpErOlRdNnuRgipQfXRLjLN5A==",
       "dependencies": {
-        "@vue/compiler-ssr": "3.4.15",
-        "@vue/shared": "3.4.15"
+        "@vue/compiler-ssr": "3.3.11",
+        "@vue/shared": "3.3.11"
       },
       "peerDependencies": {
-        "vue": "3.4.15"
+        "vue": "3.3.11"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.4.15",
-      "resolved": "https://mirrors.cloud.tencent.com/npm/@vue/shared/-/shared-3.4.15.tgz",
-      "integrity": "sha512-KzfPTxVaWfB+eGcGdbSf4CWdaXcGDqckoeXUh7SB3fZdEtzPCK2Vq9B/lRRL3yutax/LWITz+SwvgyOxz5V75g=="
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.11.tgz",
+      "integrity": "sha512-u2G8ZQ9IhMWTMXaWqZycnK4UthG1fA238CD+DP4Dm4WJi5hdUKKLg0RMRaRpDPNMdkTwIDkp7WtD0Rd9BH9fLw=="
     },
     "node_modules/acorn": {
       "version": "8.11.3",
@@ -1351,17 +1363,6 @@
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
       "dev": true
     },
-    "node_modules/entities": {
-      "version": "4.5.0",
-      "resolved": "https://mirrors.cloud.tencent.com/npm/entities/-/entities-4.5.0.tgz",
-      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "engines": {
-        "node": ">=0.12"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
-      }
-    },
     "node_modules/esbuild": {
       "version": "0.19.12",
       "resolved": "https://mirrors.cloud.tencent.com/npm/esbuild/-/esbuild-0.19.12.tgz",
@@ -2699,15 +2700,15 @@
       }
     },
     "node_modules/vue": {
-      "version": "3.4.15",
-      "resolved": "https://mirrors.cloud.tencent.com/npm/vue/-/vue-3.4.15.tgz",
-      "integrity": "sha512-jC0GH4KkWLWJOEQjOpkqU1bQsBwf4R1rsFtw5GQJbjHVKWDzO6P0nWWBTmjp1xSemAioDFj1jdaK1qa3DnMQoQ==",
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.11.tgz",
+      "integrity": "sha512-d4oBctG92CRO1cQfVBZp6WJAs0n8AK4Xf5fNjQCBeKCvMI1efGQ5E3Alt1slFJS9fZuPcFoiAiqFvQlv1X7t/w==",
       "dependencies": {
-        "@vue/compiler-dom": "3.4.15",
-        "@vue/compiler-sfc": "3.4.15",
-        "@vue/runtime-dom": "3.4.15",
-        "@vue/server-renderer": "3.4.15",
-        "@vue/shared": "3.4.15"
+        "@vue/compiler-dom": "3.3.11",
+        "@vue/compiler-sfc": "3.3.11",
+        "@vue/runtime-dom": "3.3.11",
+        "@vue/server-renderer": "3.3.11",
+        "@vue/shared": "3.3.11"
       },
       "peerDependencies": {
         "typescript": "*"
diff --git a/src/components/HomeComponents/NavBar.vue b/src/components/HomeComponents/NavBar.vue
index 54f9b6c..6e0d495 100644
--- a/src/components/HomeComponents/NavBar.vue
+++ b/src/components/HomeComponents/NavBar.vue
@@ -12,13 +12,61 @@
         </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">
+
+          <div v-if="isLoggedIn" class="flex items-center space-x-3">
+              <div class="flex items-center">
+                  <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"
+                      root-class-name="root-class-name"
+                      :root-style="{ color: 'blue' }"
+                      style="color: black"
+                      placement="right"
+                      @after-open-change="afterOpenChange"
+              >
+                  <template #extra>
+                      <div class="flex items-center space-x-2">
+                          <img :src="avatar" alt="User Avatar" class="w-10 h-10 rounded-full">
+                          <span class="text-gray-900">{{ username }}</span>
+                      </div>
+                  </template>
+                  <div class="flex flex-col space-y-4 mb-4 ">
+                  <span class="lg:hover:text-blue-700">我的项目</span>
+                  <span class="lg:hover:text-blue-700" >消息</span>
+                  <span class="lg:hover:text-blue-700">日报</span>
+                  </div>
+
+                  <div class="flex flex-col space-y-4">
+                      <hr class="mb-2">
+                      <span class="lg:hover:text-blue-700">我管理的</span>
+                      <hr>
+                      <span class=" lg:hover:text-blue-700">个人信息管理</span>
+
+                      <div  v-if="role === true" class="flex flex-col space-y-4">
+                          <hr>
+                          <span class=" lg:hover:text-blue-700" >我负责的</span>
+                      </div>
+
+                  </div>
+
+              </a-drawer>
+
+          </div>
+
+        <div v-else>
+        <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>
       <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>
@@ -63,23 +111,50 @@
       </div>
     </div>
   </nav>
+
+
+
 </template>
-<script>
-export default {
-  data() {
-    return {
-      isDropdownOpen: false,
-      textColor: 'black',
-    };
-  },
-  methods: {
-    toggleDropdown() {
-      this.isDropdownOpen = !this.isDropdownOpen;
-    },
-    changeColor() {
-      // 当按钮被点击时，将文字颜色改为蓝色
-      this.textColor = 'blue';
-    },
-  },
+<script setup>
+import {onMounted, reactive, ref} from "vue";
+
+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 states = reactive({
+    data:[],
+
+})
+const role =ref(false)
+function  toggleDropdown(){
+    isDropdownOpen.value = !isDropdownOpen.value;
+
+}
+function changeColor() {
+    // 当按钮被点击时，将文字颜色改为蓝色
+    textColor.value = 'blue';
+}
+
+onMounted(() => {
+
+    // 假设在登录成功后，从服务器获取用户信息
+    // 然后更新data中的相关数据
+    isLoggedIn.value = false;
+    username.value = 'John Doe';
+     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';
+})
+
+// 侧边栏
+const open = ref(false);
+const afterOpenChange = bool => {
+    console.log('open', bool);
 };
+const showDrawer = () => {
+    open.value = true;
+};
+
+
 </script>
diff --git a/src/js/methods.js b/src/js/methods.js
index 03ec836..936d401 100644
--- a/src/js/methods.js
+++ b/src/js/methods.js
@@ -1,4 +1,3 @@
     export default function getCurrentTimestamp() {
-      const timestamp = new Date().getTime();
-      return timestamp;
+        return new Date().getTime();
     }
\ No newline at end of file