增加个人中心点击其他地方关闭的功能

增加个人中心点击其他地方关闭的功能

.nuxt/imports.d.ts

@@ -33,4 +33,5 @@ export { getTime, getTitleLength } from '../composables/publicFunction';
 export { seoSetup } from '../composables/useSeo';
 export { default as proxy } from '../utils/proxy';
 export { apiUse, asyncFetchData, fGET, fPOST, fPUT, fDELETE, GET, POST, PUT, DELETE } from '../utils/request';
+export { useNuxtDevTools } from '../node_modules/@nuxt/devtools/dist/runtime/use-nuxt-devtools';
 export { definePageMeta } from '../node_modules/nuxt/dist/pages/runtime/composables';

.nuxt/manifest/latest.json

@@ -1 +1 @@
-{"id":"c3ae605c-dce1-419d-8ba4-8cc4debc8b3e","timestamp":1744247766255}
+{"id":"dev","timestamp":1744283277782}

.nuxt/manifest/meta/dev.json

@@ -0,0 +1 @@
+{"id":"dev","timestamp":1744283277782,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":[]}

.nuxt/nitro.json

@@ -0,0 +1,17 @@
+{
+  "date": "2025-04-10T11:08:09.379Z",
+  "preset": "nitro-dev",
+  "framework": {
+    "name": "nuxt",
+    "version": "3.15.2"
+  },
+  "versions": {
+    "nitro": "2.10.4"
+  },
+  "dev": {
+    "pid": 15064,
+    "workerAddress": {
+      "socketPath": "\\\\.\\pipe\\nitro\\worker-15064-1.sock"
+    }
+  }
+}

.nuxt/nuxt.json

@@ -0,0 +1,9 @@
+{
+  "_hash": "1rNbmyQyEO",
+  "project": {
+    "rootDir": "D:/MyProject/gogs/sannongzixunwang_web_ssr/sannongzixunwang_web"
+  },
+  "versions": {
+    "nuxt": "3.15.2"
+  }
+}

.nuxt/tsconfig.json

@@ -102,7 +102,7 @@
         "./imports"
       ],
       "#app-manifest": [
-        "./manifest/meta/c3ae605c-dce1-419d-8ba4-8cc4debc8b3e.json"
+        "./manifest/meta/dev.json"
       ],
       "#components": [
         "./components"

.nuxt/types/build.d.ts

@@ -11,6 +11,7 @@ declare module "#build/paths.mjs";
 declare module "#build/root-component.mjs";
 declare module "#build/plugins.server.mjs";
 declare module "#build/test-component-wrapper.mjs";
+declare module "#build/devtools/settings.mjs";
 declare module "#build/routes.mjs";
 declare module "#build/pages.mjs";
 declare module "#build/router.options.mjs";

.nuxt/types/imports.d.ts

@@ -130,6 +130,7 @@ declare global {
   const useModel: typeof import('vue')['useModel']
   const useNuxtApp: typeof import('../../node_modules/nuxt/dist/app/nuxt')['useNuxtApp']
   const useNuxtData: typeof import('../../node_modules/nuxt/dist/app/composables/asyncData')['useNuxtData']
+  const useNuxtDevTools: typeof import('../../node_modules/@nuxt/devtools/dist/runtime/use-nuxt-devtools')['useNuxtDevTools']
   const usePreviewMode: typeof import('../../node_modules/nuxt/dist/app/composables/preview')['usePreviewMode']
   const useRequestEvent: typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['useRequestEvent']
   const useRequestFetch: typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['useRequestFetch']
@@ -325,6 +326,7 @@ declare module 'vue' {
     readonly useModel: UnwrapRef<typeof import('vue')['useModel']>
     readonly useNuxtApp: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/nuxt')['useNuxtApp']>
     readonly useNuxtData: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/asyncData')['useNuxtData']>
+    readonly useNuxtDevTools: UnwrapRef<typeof import('../../node_modules/@nuxt/devtools/dist/runtime/use-nuxt-devtools')['useNuxtDevTools']>
     readonly usePreviewMode: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/preview')['usePreviewMode']>
     readonly useRequestEvent: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['useRequestEvent']>
     readonly useRequestFetch: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['useRequestFetch']>

.nuxt/types/plugins.d.ts

@@ -9,12 +9,17 @@ type NuxtAppInjections =
   InjectionType<typeof import("../../node_modules/nuxt/dist/app/plugins/revive-payload.client.js")> &
   InjectionType<typeof import("../../node_modules/nuxt/dist/head/runtime/plugins/unhead.js")> &
   InjectionType<typeof import("../../node_modules/nuxt/dist/pages/runtime/plugins/router.js")> &
-  InjectionType<typeof import("../../node_modules/nuxt/dist/app/plugins/payload.client.js")> &
+  InjectionType<typeof import("../../node_modules/nuxt/dist/app/plugins/browser-devtools-timing.client.js")> &
   InjectionType<typeof import("../../node_modules/nuxt/dist/app/plugins/navigation-repaint.client.js")> &
   InjectionType<typeof import("../../node_modules/nuxt/dist/app/plugins/check-outdated-build.client.js")> &
   InjectionType<typeof import("../../node_modules/nuxt/dist/app/plugins/revive-payload.server.js")> &
   InjectionType<typeof import("../../node_modules/nuxt/dist/app/plugins/chunk-reload.client.js")> &
   InjectionType<typeof import("../../node_modules/nuxt/dist/pages/runtime/plugins/prefetch.client.js")> &
+  InjectionType<typeof import("../../node_modules/nuxt/dist/pages/runtime/plugins/check-if-page-unused.js")> &
+  InjectionType<typeof import("../../node_modules/@nuxt/devtools/dist/runtime/plugins/devtools.server.js")> &
+  InjectionType<typeof import("../../node_modules/@nuxt/devtools/dist/runtime/plugins/devtools.client.js")> &
+  InjectionType<typeof import("../../node_modules/nuxt/dist/app/plugins/dev-server-logs.js")> &
+  InjectionType<typeof import("../../node_modules/nuxt/dist/app/plugins/check-if-layout-used.js")> &
   InjectionType<typeof import("../../plugins/element-plus.js")> &
   InjectionType<typeof import("../../plugins/request.js")> &
   InjectionType<typeof import("../../plugins/globals.js")> &
@@ -24,7 +29,7 @@ declare module '#app' {
   interface NuxtApp extends NuxtAppInjections { }
 
   interface NuxtAppLiterals {
-    pluginName: 'nuxt:revive-payload:client' | 'nuxt:head' | 'nuxt:router' | 'nuxt:payload' | 'nuxt:revive-payload:server' | 'nuxt:chunk-reload' | 'nuxt:global-components' | 'nuxt:prefetch'
+    pluginName: 'nuxt:revive-payload:client' | 'nuxt:head' | 'nuxt:router' | 'nuxt:browser-devtools-timing' | 'nuxt:revive-payload:server' | 'nuxt:chunk-reload' | 'nuxt:global-components' | 'nuxt:prefetch' | 'nuxt:checkIfPageUnused' | 'nuxt:checkIfLayoutUsed'
   }
 }
 

components/home/pageHead.vue

@@ -106,8 +106,6 @@ let showToken = useState("showToken", () => '')
 token1.value = getToken()
 
 
-
-
 //检测登录状态
 let tokenStatus = ref('');
 tokenStatus.value = getToken()
@@ -153,6 +151,21 @@ let userCenter = () => {
         return
     }
 }
+
+// 添加点击事件处理函数
+const handleClickOutside = (event) => {
+  // 获取用户信息菜单元素
+  const userInfoMenu = document.querySelector('.userInfo11');
+  // 获取用户按钮元素
+  const userButton = document.querySelector('.reg img[alt="用户信息"]')?.parentElement;
+  
+  // 如果点击的不是菜单本身且不是用户按钮，则隐藏菜单
+  if (userInfoMenu && 
+      !userInfoMenu.contains(event.target) && 
+      !userButton?.contains(event.target)) {
+    isShow.value = false;
+  }
+}
 //2.登录逻辑 end ---------------------------------------->
 
 //3.跳转菜单逻辑 start ---------------------------------------->
@@ -240,7 +253,14 @@ let adImg = ref({})
 //4.获取广告 end ---------------------------------------->
 
 //5.获取登录状态 start ---------------------------------------->
+// 在组件卸载时移除事件监听
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+})
+
 onMounted(async () => {
+    //添加监听关闭个人中心菜单
+    document.addEventListener('click', handleClickOutside);
 
     //从客户端获取登录状态
     //从客户端阶段开始 持续查询登录状态