From 0e380b34a3fbb5c1723e608b9dc0399d821d41d0 Mon Sep 17 00:00:00 2001
From: estel <690930@qq.com>
Date: Sat, 9 Aug 2025 22:28:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F=E4=B8=8Eli?=
 =?UTF-8?q?nt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/AppHeader.vue       | 144 -----------------------------
 app/components/blog/BlogHeader.vue |   9 ++
 app/components/docs/DocsHeader.vue |   9 ++
 app/components/shared/wxShare.vue  |   2 -
 app/composables/useTheme.ts        |  32 +++++--
 5 files changed, 42 insertions(+), 154 deletions(-)
 delete mode 100644 app/components/AppHeader.vue

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
deleted file mode 100644
index d8f647d..0000000
--- a/app/components/AppHeader.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<script setup lang="ts">
-// import type { NavigationMenuItem } from '@nuxt/ui'
-import type { ContentNavigationItem } from '@nuxt/content'
-
-const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
-
-const isSettingsOpen = ref(false)
-const isLoginModalOpen = ref(false)
-const isRegisterModalOpen = ref(false)
-
-// const { header } = useAppConfig();
-
-// 定义 props 来接收侧边栏状态和切换函数
-interface Props {
-  isSidebarOpen?: boolean
-  toggleSidebar?: () => void
-}
-
-const Props = withDefaults(defineProps<Props>(), {
-  isSidebarOpen: false,
-  toggleSidebar: () => { }
-})
-
-// 登录注册函数
-const handleLoginRegister = (type: 'login' | 'register') => {
-  if (type === 'login') {
-    isLoginModalOpen.value = true
-  } else if (type === 'register') {
-    isRegisterModalOpen.value = true
-  }
-}
-</script>
-
-<template>
-  <UHeader
-    toggle-side="left"
-    title="Estel Docs"
-    mode="modal"
-    class="bg-gray-50 dark:bg-gray-900"
-  >
-    <template #title>
-      <h6 />
-    </template>
-
-    <template #body>
-      <LogoPro class="h-5 w-auto mb-4" />
-      <DocsAsideLeftTop />
-      <div class="mt-4 mb-4 border-t border-gray-200 dark:border-gray-700 w-9/10 mx-5" />
-      <UContentNavigation
-        highlight
-        :navigation="navigation"
-        color="primary"
-        type="single"
-        variant="pill"
-      />
-    </template>
-
-    <template #right>
-      <UContentSearchButton class="lg:hidden" />
-      <UColorModeButton />
-      <button
-        class=" p-2 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
-        title="页面设置"
-        @click="isSettingsOpen = !isSettingsOpen"
-      >
-        <svg
-          class="w-5 h-5"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
-          />
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-          />
-        </svg>
-      </button>
-
-      <UTooltip
-        text="Open on GitHub"
-        :kbds="['meta', 'G']"
-      >
-        <UButton
-          color="neutral"
-          variant="ghost"
-          to="https://github.com/estel-li"
-          target="_blank"
-          icon="simple-icons-github"
-          aria-label="GitHub"
-        />
-      </UTooltip>
-      <div class="flex items-center space-x-2">
-        <button
-          class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
-          @click="handleLoginRegister('login')"
-        >
-          登录
-        </button>
-        <button
-          class="text-sm font-medium text-white bg-primary rounded-md px-3 py-2 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-colors"
-          @click="handleLoginRegister('register')"
-        >
-          注册
-        </button>
-      </div>
-    </template>
-  </UHeader>
-
-  <!-- Theme Settings Panel -->
-  <ThemeSettings
-    :is-open="isSettingsOpen"
-    @close="isSettingsOpen = false"
-  />
-
-  <!-- 登录模态框 -->
-  <UModal
-    v-model:open="isLoginModalOpen"
-    title="登录"
-    :dismissible="false"
-  >
-    <template #body>
-      <authLogin />
-    </template>
-  </UModal>
-
-  <!-- 注册模态框 -->
-  <UModal
-    v-model:open="isRegisterModalOpen"
-    title="注册"
-    :dismissible="false"
-  >
-    <template #body>
-      <authRegister />
-    </template>
-  </UModal>
-</template>
diff --git a/app/components/blog/BlogHeader.vue b/app/components/blog/BlogHeader.vue
index 3c0b0ce..d77c219 100644
--- a/app/components/blog/BlogHeader.vue
+++ b/app/components/blog/BlogHeader.vue
@@ -49,6 +49,15 @@ const handleLoginRegister = (type: 'login' | 'register') => {
     mode="modal"
     class="bg-gray-50 dark:bg-gray-900"
   >
+    <template #toggle="{ open, toggle }">
+      <UButton
+        color="neutral"
+        variant="ghost"
+        :icon="open ? 'lucide-x' : 'simple-icons-microsoft'"
+        aria-label="切换菜单"
+        @click="toggle"
+      />
+    </template>
     <template #title>
       <h6 />
     </template>
diff --git a/app/components/docs/DocsHeader.vue b/app/components/docs/DocsHeader.vue
index 2cbdeb9..aced9d9 100644
--- a/app/components/docs/DocsHeader.vue
+++ b/app/components/docs/DocsHeader.vue
@@ -49,6 +49,15 @@ const handleLoginRegister = (type: 'login' | 'register') => {
     mode="modal"
     class="bg-gray-50 dark:bg-gray-900"
   >
+    <template #toggle="{ open, toggle }">
+      <UButton
+        color="neutral"
+        variant="ghost"
+        :icon="open ? 'lucide-x' : 'simple-icons-microsoft'"
+        aria-label="切换菜单"
+        @click="toggle"
+      />
+    </template>
     <template #title>
       <h6 />
     </template>
diff --git a/app/components/shared/wxShare.vue b/app/components/shared/wxShare.vue
index 9e4daa4..a1e7b1a 100644
--- a/app/components/shared/wxShare.vue
+++ b/app/components/shared/wxShare.vue
@@ -98,8 +98,6 @@ function setupShare(appId: string, timestamp: number, nonceStr: string, signatur
     console.error('[WxShare] wx.error:', e)
   })
 }
-
-
 </script>
 
 <template>
diff --git a/app/composables/useTheme.ts b/app/composables/useTheme.ts
index 123e9ca..d79b3df 100644
--- a/app/composables/useTheme.ts
+++ b/app/composables/useTheme.ts
@@ -41,7 +41,7 @@
  * </template>
  * ```
  */
-import { ref, watch } from 'vue'
+import { ref, watch, getCurrentInstance, onMounted } from 'vue'
 
 // 定义各种选项
 const themes = [
@@ -224,18 +224,34 @@ export function useTheme() {
     }
   }
 
-  // 确保在客户端时立即初始化
+  // 确保在客户端时初始化
   if (import.meta.client) {
     // 立即初始化，避免闪烁
     initializeTheme()
 
-    // 确保在DOM准备好后再次应用
-    onMounted(() => {
-      applyThemeVariables()
-      if (selectedThemeColor.value === 'custom') {
-        applyCustomColor()
+    const instance = getCurrentInstance()
+    if (instance) {
+      // 在组件 setup 上下文中，安全使用 onMounted
+      onMounted(() => {
+        applyThemeVariables()
+        if (selectedThemeColor.value === 'custom') {
+          applyCustomColor()
+        }
+      })
+    } else {
+      // 非组件上下文（如插件）中，等待文档就绪后应用
+      const run = () => {
+        applyThemeVariables()
+        if (selectedThemeColor.value === 'custom') {
+          applyCustomColor()
+        }
       }
-    })
+      if (document.readyState === 'loading') {
+        window.addEventListener('DOMContentLoaded', () => run(), { once: true })
+      } else {
+        run()
+      }
+    }
   }
 
   const resetSettings = () => {