From c557e6980cd7d06ce97398d2fe0306bed22ee860 Mon Sep 17 00:00:00 2001
From: estel <690930@qq.com>
Date: Sun, 10 Aug 2025 16:01:03 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=88=86=E4=BA=AB=E5=88=B0?=
 =?UTF-8?q?=E5=BE=AE=E4=BF=A1=E6=8C=89=E9=92=AE=E8=87=B3HeaderLinks=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6.=20=20=E5=B9=B6=E4=BF=AE=E6=94=B9=E5=8D=9A?=
 =?UTF-8?q?=E5=AE=A2=E6=96=87=E7=AB=A0=E5=A4=B4=E6=A0=B7=E5=BC=8F,?=
 =?UTF-8?q?=E5=8A=A0=E5=85=A5=E6=97=A5=E6=9C=9F=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/docs/DocsPageHeaderLinks.vue | 29 ++++++++++++
 app/layouts/default.vue                     | 46 +++++++++++++++++++
 app/layouts/docs.vue                        |  2 +-
 app/pages/blog/[...slug].vue                | 50 +++++++++++----------
 app/pages/index.vue                         | 30 ++++++-------
 5 files changed, 117 insertions(+), 40 deletions(-)
 create mode 100644 app/layouts/default.vue

diff --git a/app/components/docs/DocsPageHeaderLinks.vue b/app/components/docs/DocsPageHeaderLinks.vue
index 30d3567..f00d475 100644
--- a/app/components/docs/DocsPageHeaderLinks.vue
+++ b/app/components/docs/DocsPageHeaderLinks.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useClipboard } from '@vueuse/core'
+import WxShare from '~/components/shared/wxShare.vue'
 
 const route = useRoute()
 const toast = useToast()
@@ -12,6 +13,11 @@ const origin = computed(() => requestURL.origin)
 const mdcLink = computed(() => `${origin.value}${decodeURIComponent(route.path)}`)
 const markdownLink = computed(() => `${origin.value}/raw${decodeURIComponent(route.path)}.md`)
 
+const enableWxShare = ref(false)
+
+const shareTitle = computed(() => (import.meta.client ? (document.title || 'Estel Docs') : ''))
+const shareDesc = computed(() => (import.meta.client ? (document.title || 'Estel Docs') : ''))
+
 const items = [
   {
     label: '复制链接',
@@ -26,6 +32,19 @@ const items = [
       })
     }
   },
+  {
+    label: '分享到微信',
+    icon: 'simple-icons:wechat',
+    onSelect() {
+      enableWxShare.value = true
+      toast.add({
+        title: '已为本页配置微信分享，请在微信内点击右上角分享',
+        icon: 'lucide-check-circle',
+        color: 'success'
+      })
+    }
+  },
+
   {
     label: '查看 Markdown',
     icon: 'simple-icons:markdown',
@@ -79,4 +98,14 @@ const items = [
       />
     </UDropdownMenu>
   </UButtonGroup>
+
+  <!-- 懒加载式挂载微信分享逻辑，避免在非微信环境造成无谓请求 -->
+  <ClientOnly>
+    <WxShare
+      v-if="enableWxShare"
+      :url="mdcLink"
+      :title="shareTitle"
+      :desc="shareDesc"
+    />
+  </ClientOnly>
 </template>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
new file mode 100644
index 0000000..0208c78
--- /dev/null
+++ b/app/layouts/default.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="min-h-screen bg-gray-50 dark:bg-gray-900 flex">
+    <!-- 移动端遮罩层 -->
+    <div
+      v-if="isSidebarOpen"
+      class="fixed inset-0 bg-gray-900/50 z-40 lg:hidden"
+      @click="isSidebarOpen = false"
+    />
+
+    <!-- 侧边栏 -->
+    <DocsSidebar
+      class="fixed top-0 bottom-0 z-50 transition-transform duration-300 ease-in-out"
+      :class="isSidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'"
+    />
+
+    <!-- Right Content Area -->
+    <div class="flex-1 lg:ml-64 flex flex-col min-w-0">
+      <!-- Fixed Header -->
+      <DocsHeader
+        :is-sidebar-open="isSidebarOpen"
+        :toggle-sidebar="toggleSidebar"
+      />
+
+      <!-- Main Content -->
+      <UMain class="flex-1 overflow-y-auto">
+        <div class="">
+          <slot />
+        </div>
+      </UMain>
+
+      <!-- Footer -->
+      <AppFooter />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const isSidebarOpen = ref(false)
+
+// 切换侧边栏
+const toggleSidebar = () => {
+  isSidebarOpen.value = !isSidebarOpen.value
+}
+</script>
diff --git a/app/layouts/docs.vue b/app/layouts/docs.vue
index a94c42e..19c828d 100644
--- a/app/layouts/docs.vue
+++ b/app/layouts/docs.vue
@@ -23,7 +23,7 @@
 
       <!-- Main Content -->
       <UMain class="flex-1 overflow-y-auto">
-        <div class="mx-auto px-4 sm:px-6 lg:px-8 py-6">
+        <div class="mx-auto px-4 sm:px-6 lg:px-8">
           <slot />
         </div>
       </UMain>
diff --git a/app/pages/blog/[...slug].vue b/app/pages/blog/[...slug].vue
index 190472c..1511235 100644
--- a/app/pages/blog/[...slug].vue
+++ b/app/pages/blog/[...slug].vue
@@ -70,6 +70,7 @@ defineOgImageComponent('Docs', {
   headline: headline.value
 })
 
+
 const editLink = computed(() => {
   if (!appConfig.github) {
     return
@@ -99,14 +100,14 @@ const links = computed(() => {
   return [...links, ...(appConfig.toc?.bottom?.links || [])].filter(Boolean)
 })
 
-// ===== 微信分享（测试按钮用）=====
-const wxShareActive = ref(false)
-// const contentRoot = ref<HTMLElement | null>(null)
+// // ===== 微信分享（测试按钮用）=====
+// const wxShareActive = ref(false)
+// // const contentRoot = ref<HTMLElement | null>(null)
 
-const shareLink = computed(() => 'https://lijue.me' + decodeURIComponent(path.value))
-const shareTitle = computed(() => title)
-const shareDesc = computed(() => description || title)
-const shareImg = page?.value?.img
+// const shareLink = computed(() => 'https://lijue.me' + decodeURIComponent(path.value))
+// const shareTitle = computed(() => title)
+// const shareDesc = computed(() => description || title)
+// const shareImg = page?.value?.img
 // const shareImg = ref<string>('/images/default-blog.jpg')
 
 // onMounted(() => {
@@ -118,17 +119,17 @@ const shareImg = page?.value?.img
 //   }
 // })
 
-// Toast：点击测试分享后给出指引
-const toast = useToast()
-function handleShareClick() {
-  wxShareActive.value = true
-  toast.add({
-    title: '已获取分享接口',
-    description: '点击右上角分享吧',
-    duration: 3000,
-    icon: 'i-lucide-share-2'
-  })
-}
+// // Toast：点击测试分享后给出指引
+// const toast = useToast()
+// function handleShareClick() {
+//   wxShareActive.value = true
+//   toast.add({
+//     title: '已获取分享接口',
+//     description: '点击右上角分享吧',
+//     duration: 3000,
+//     icon: 'i-lucide-share-2'
+//   })
+// }
 </script>
 
 <template>
@@ -144,6 +145,7 @@ function handleShareClick() {
         wrapper: 'flex-row items-center flex-wrap justify-between '
       }"
     >
+    <span v-if="page" class="text-sm text-pretty text-muted mt-4"> {{ page.date }} </span>
       <template #links>
         <UButton
           v-for="(link, index) in page.links"
@@ -178,7 +180,7 @@ function handleShareClick() {
             编辑页面
           </UButton>
           or
-          <!-- <UButton
+          <UButton
             variant="link"
             color="neutral"
             :to="`${appConfig.github.url}/issues/new/choose`"
@@ -187,9 +189,9 @@ function handleShareClick() {
             :ui="{ leadingIcon: 'size-4' }"
           >
             提交问题
-          </UButton> -->
+          </UButton>
 
-          <UButton
+          <!-- <UButton
             variant="link"
             color="neutral"
             icon="lucide-share-2"
@@ -197,19 +199,19 @@ function handleShareClick() {
             @click="handleShareClick()"
           >
             微信分享
-          </UButton>
+          </UButton> -->
         </div>
       </USeparator>
       <UContentSurround :surround="surround" />
 
-      <!-- 激活后挂载分享组件（无可视内容） -->
+      <!-- 激活后挂载分享组件（无可视内容）
       <SharedWxShare
         v-if="wxShareActive"
         :url="shareLink"
         :title="shareTitle"
         :desc="shareDesc"
         :img-url="shareImg"
-      />
+      /> -->
     </UPageBody>
 
     <template
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 9df67bf..8ece108 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -2,7 +2,7 @@
 import { useSeoMeta } from '#imports'
 
 definePageMeta({
-  layout: 'docs'
+  layout: 'default'
 })
 
 useSeoMeta({
@@ -14,18 +14,18 @@ useSeoMeta({
 </script>
 
 <template>
-  <div class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
+  <div class="px-4 py-3 md:py-6 bg-gradient-to-b from-blue-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
     <!-- Hero 区域 -->
-    <div class="max-w-6xl mx-auto px-4 py-20">
+    <div class="max-w-6xl mx-auto py-1">
       <!-- 主要内容 -->
-      <div class="text-center mb-16">
-        <h1 class="text-5xl md:text-7xl font-bold text-gray-900 dark:text-white mb-6">
+      <div class="text-center mb-8 md:mb-16">
+        <h1 class="text-4xl md:text-7xl font-bold text-gray-900 dark:text-white mb-3 md:mb-6">
           Estel Hub
         </h1>
-        <p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-8 max-w-3xl mx-auto">
+        <p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-4 md:mb-8 max-w-3xl mx-auto">
           简约而强大的文档系统,衍生而出Blog系统,为技术分享而生
         </p>
-        <p class="text-lg text-gray-500 dark:text-gray-400 mb-12 max-w-2xl mx-auto">
+        <p class="md:text-lg text-sm text-gray-500 dark:text-gray-400 max-w-2xl mx-auto">
           基于 Nuxt 4 构建，支持 Markdown 文档管理和博客发布，提供完整的现代化内容管理解决方案
         </p>
       </div>
@@ -35,10 +35,10 @@ useSeoMeta({
         <!-- 文档系统 -->
         <NuxtLink
           to="/docs"
-          class="group bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700"
+          class="group bg-white dark:bg-gray-800 rounded-2xl p-3 md:p-8 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700"
         >
           <div class="text-center">
-            <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300">
+            <div class="w-12 h-12 md:w-16 md:h-16 bg-blue-100 dark:bg-blue-900 rounded-xl flex items-center justify-center mx-auto mb-3 md:mb-6 group-hover:scale-110 transition-transform duration-300">
               <UIcon
                 name="lucide-book-open"
                 class="text-3xl text-blue-600 dark:text-blue-400"
@@ -47,8 +47,8 @@ useSeoMeta({
             <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
               文档系统
             </h2>
-            <p class="text-gray-600 dark:text-gray-300 mb-6">
-              技术文档、API 文档、使用指南，一切尽在掌握
+            <p class="text-gray-600 dark:text-gray-300 mb-3 md:mb-6">
+              技术文档、API 文档、使用指南
             </p>
             <div class="flex items-center justify-center text-blue-600 dark:text-blue-400 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors">
               <span class="mr-2">开始阅读</span>
@@ -63,10 +63,10 @@ useSeoMeta({
         <!-- 博客系统 -->
         <NuxtLink
           to="/blog"
-          class="group bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700"
+          class="group bg-white dark:bg-gray-800 rounded-2xl p-3 md:p-8 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700"
         >
           <div class="text-center">
-            <div class="w-16 h-16 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300">
+            <div class="w-12 md:w-16 h-12 md:h-16 bg-green-100 dark:bg-green-900 rounded-xl flex items-center justify-center mx-auto mb-3 md:mb-6 group-hover:scale-110 transition-transform duration-300">
               <UIcon
                 name="lucide-pen-tool"
                 class="text-3xl text-green-600 dark:text-green-400"
@@ -75,8 +75,8 @@ useSeoMeta({
             <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
               博客系统
             </h2>
-            <p class="text-gray-600 dark:text-gray-300 mb-6">
-              技术分享、心得体会、生活感悟，记录每一个精彩瞬间
+            <p class="text-gray-600 dark:text-gray-300 mb-3 md:mb-6">
+              技术分享、心得体会、生活感悟
             </p>
             <div class="flex items-center justify-center text-green-600 dark:text-green-400 group-hover:text-green-700 dark:group-hover:text-green-300 transition-colors">
               <span class="mr-2">开始阅读</span>