修改页面布局大修改

app/app.vue

@@ -2,6 +2,7 @@
 const { seo } = useAppConfig()
 
 const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'))
+const { data: blogNavigation } = await useAsyncData('blogNavigation', () => queryCollectionNavigation('blog'))
 const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs'), {
   server: false
 })
@@ -45,6 +46,7 @@ useSeoMeta({
 })
 
 provide('navigation', navigation)
+provide('blogNavigation', blogNavigation)
 </script>
 
 <template>

app/components/blog/BlogSidebar.vue

@@ -0,0 +1,85 @@
+<template>
+  <UPage>
+    <div
+      class="w-64 bg-white dark:bg-gray-900
+      flex flex-col h-screen border-r border-gray-200 dark:border-gray-700
+      overflow-hidden"
+    >
+      <div class="flex-shrink-0 p-4 border-gray-200 dark:border-gray-700">
+        <!-- Logo -->
+        <LogoPro />
+      </div>
+
+      <!-- Search Box -->
+      <div class="p-4 border-gray-200 dark:border-gray-700">
+        <ClientOnly>
+          <UContentSearchButton
+            :collapsed="false"
+            label="搜索文档"
+            class="w-full"
+            color="primary"
+          />
+        </ClientOnly>
+      </div>
+
+      <!-- 可滚动的导航区域 -->
+      <div class=" h-full overflow-y-auto ">
+        <!-- 导航 Section -->
+
+        <div>
+          <NuxtLink
+            to="/"
+            class="flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:shadow-sm transition-all duration-200"
+            :class="{
+              ' text-blue-600 dark:text-blue-400 ':
+                useRoute().path === '/'
+            }"
+          >
+            <Icon
+              name="lucide-home"
+              class="text-primary mr-2"
+              size="20"
+            />
+            站点首页
+          </NuxtLink>
+          <div class="px-2">
+            <DocsAsideLeftTop />
+          </div>
+        </div>
+
+        <!-- 分隔线 -->
+        <div class="mt-4 uppercase tracking-wider border-t border-gray-200 dark:border-gray-700 w-7/9 mx-5" />
+
+        <!-- 文档目录导航 -->
+        <div class="mt-6 flex items-center justify-start pl-4 w-full pb-3">
+          <UContentNavigation
+            highlight
+            :navigation="docsNavigation"
+            color="primary"
+            type="single"
+            variant="pill"
+            trailing-icon="lucide:chevron-right"
+          />
+        </div>
+      </div>
+    </div>
+  </UPage>
+</template>
+
+<script setup lang="ts">
+import type { ContentNavigationItem } from '@nuxt/content'
+
+const navigation = inject<Ref<ContentNavigationItem[]>>('blogNavigation')
+
+// 提取 docs 目录下的子目录作为顶级导航
+const docsNavigation = computed(() => {
+  if (!navigation?.value) return []
+  // 查找 docs 目录
+  const docsItem = navigation.value.find(item => item.title === 'blog' || item.path === '/blog')
+
+  if (!docsItem?.children) return []
+
+  // 返回 docs 目录下的子目录
+  return docsItem.children
+})
+</script>

app/components/blog/indexBlog.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+// 获取 blog 集合的所有文章
+const { data: articles } = await useAsyncData('blog-articles', () => {
+  return queryCollection('blog')
+    .select('path', 'title', 'description', 'img', 'date')
+    .where('path', 'NOT LIKE', '%navigation%')
+    .all()
+})
+
+// 格式化日期
+const formatDate = (date: any) => {
+  if (!date) return '未知时间'
+  try {
+    const d = new Date(date)
+    return d.toLocaleDateString('zh-CN', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    })
+  } catch {
+    return '未知时间'
+  }
+}
+
+// 计算阅读时间（基于文章内容长度估算）
+const getReadingTime = (content: any) => {
+  if (!content) return 1
+  try {
+    const wordsPerMinute = 200
+    const wordCount = String(content).split(/\s+/).length
+    return Math.max(1, Math.ceil(wordCount / wordsPerMinute))
+  } catch {
+    return 1
+  }
+}
+</script>
+
+<template>
+  <div class="w-full bg-gray-50 dark:bg-gray-900 min-h-screen mt-4">
+    <div class="max-w-4xl mx-auto px-4 py-8">
+      <!-- 页面标题 -->
+      <div class="mb-8">
+        <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
+          博客文章
+        </h1>
+        <p class="text-gray-600 dark:text-gray-400">
+          分享技术见解和心得体会
+        </p>
+      </div>
+
+      <!-- 文章列表 -->
+      <div class="space-y-6">
+        <NuxtLink
+          v-for="item in articles"
+          :key="item.path"
+          :to="item.path"
+          class="block"
+        >
+          <article
+            class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 hover:shadow-md transition-all duration-200 cursor-pointer group"
+          >
+            <!-- 文章头部 -->
+            <div class="flex items-start justify-between mb-4">
+              <div class="flex-1">
+                <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+                  {{ item.title }}
+                </h2>
+
+                <!-- 文章描述 -->
+                <p
+                  v-if="item.description"
+                  class="text-gray-600 dark:text-gray-300 text-sm mb-3 line-clamp-2"
+                >
+                  {{ item.description }}
+                </p>
+              </div>
+
+            </div>
+
+            <!-- 文章元信息 -->
+            <div class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
+              <div class="flex items-center gap-4">
+                <!-- 文章时间 -->
+                <div class="flex items-center gap-1">
+                  <UIcon
+                    name="lucide-clock"
+                    size="14"
+                  />
+                  <span>{{ formatDate(item.date) }}</span>
+                </div>
+              </div>
+            </div>
+          </article>
+        </NuxtLink>
+      </div>
+
+      <!-- 空状态 -->
+      <div
+        v-if="!articles || articles.length === 0"
+        class="text-center py-12"
+      >
+        <UIcon
+          name="lucide-file-text"
+          class="mx-auto text-4xl text-gray-400 mb-4"
+        />
+        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">
+          暂无文章
+        </h3>
+        <p class="text-gray-500 dark:text-gray-400">
+          还没有发布任何博客文章
+        </p>
+      </div>
+    </div>
+  </div>
+</template>

app/components/docs/DocsAsideLeftTop.vue

@@ -10,10 +10,23 @@ const items = ref<NavigationMenuItem[][]>([
       target: '_blank'
 
     },
+
+    {
+      label: '博客',
+      icon: 'lucide-pen-line',
+      to: '/blog'
+    },
+
+    {
+      label: '简单文档',
+      icon: 'lucide-book',
+      to: '/docs'
+    },
+
     {
       label: '组件速查',
       icon: 'lucide-box',
-      to: '/简单文档/components/api'
+      to: '/docs/简单文档/components/api'
     },
     {
       label: '关于',

app/components/docs/DocsSidebar.vue

@@ -32,7 +32,7 @@
             class="flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:shadow-sm transition-all duration-200"
             :class="{
               ' text-blue-600 dark:text-blue-400 ':
-                $route.path === '/'
+                useRoute().path === '/'
             }"
           >
             <Icon
@@ -54,7 +54,7 @@
         <div class="mt-6 flex items-center justify-start pl-4 w-full pb-3">
           <UContentNavigation
             highlight
-            :navigation="navigation"
+            :navigation="docsNavigation"
             color="primary"
             type="single"
             variant="pill"
@@ -70,4 +70,16 @@
 import type { ContentNavigationItem } from '@nuxt/content'
 
 const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
+
+// 提取 docs 目录下的子目录作为顶级导航
+const docsNavigation = computed(() => {
+  if (!navigation?.value) return []
+  // 查找 docs 目录
+  const docsItem = navigation.value.find(item => item.title === 'docs' || item.path === '/docs')
+
+  if (!docsItem?.children) return []
+
+  // 返回 docs 目录下的子目录
+  return docsItem.children
+})
 </script>

app/layouts/blog.vue

@@ -8,7 +8,7 @@
     />
 
     <!-- 侧边栏 -->
-    <AppSidebar
+    <BlogSidebar
       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'"
     />

app/layouts/docs.vue

@@ -1,22 +1,46 @@
-<script setup lang="ts">
-import type { ContentNavigationItem } from '@nuxt/content'
-
-const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
-</script>
-
 <template>
-  <UContainer>
-    <UPage>
-      <template #left>
-        <UPageAside>
-          <UContentNavigation
-            highlight
-            :navigation="navigation"
-          />
-        </UPageAside>
-      </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"
+    />
 
-      <slot />
-    </UPage>
-  </UContainer>
+    <!-- 侧边栏 -->
+    <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 -->
+      <AppHeader
+        :is-sidebar-open="isSidebarOpen"
+        :toggle-sidebar="toggleSidebar"
+      />
+
+      <!-- Main Content -->
+      <UMain class="flex-1 overflow-y-auto">
+        <div class="mx-auto px-4 sm:px-6 lg:px-8 py-6">
+          <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>

app/pages/blog/[...slug].vue

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import type { ContentNavigationItem } from '@nuxt/content'
+import { findPageHeadline } from '#ui-pro/utils/content'
+
+definePageMeta({
+  layout: 'blog'
+})
+
+const route = useRoute()
+const appConfig = useAppConfig()
+const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
+
+// 获取主题系统的字号设置
+const { selectedFontSize } = useTheme()
+
+// 计算页面内容的字号类
+const pageFontSizeClass = computed(() => {
+  return `text-${selectedFontSize.value}`
+})
+
+// 根据路由参数构建内容路径
+const path = computed(() => route.path)
+
+// URL 解码并验证路径
+const queryPath = computed(() => {
+  try {
+    return decodeURIComponent(path.value)
+  } catch (error) {
+    console.error('URL decode error:', error)
+    return path.value // 如果解码失败，返回原始路径
+  }
+})
+
+const { data: page } = await useAsyncData(
+  `page-${route.path}`, // 使用更具体的 key
+  () => queryCollection('blog').path(decodeURIComponent(path.value)).first(),
+  {
+    default: () => null // 提供默认值
+  }
+)
+
+if (!page.value) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: '文档不存在',
+    message: `当前页面不存在，请您检查路径是否正确: ${queryPath.value}`,
+    fatal: true
+  })
+}
+
+const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
+  return queryCollectionItemSurroundings('docs', route.path, {
+    fields: ['description']
+  })
+})
+
+const title = page.value.seo?.title || page.value.title
+const description = page.value.seo?.description || page.value.description
+
+useSeoMeta({
+  title,
+  ogTitle: title,
+  description,
+  ogDescription: description
+})
+
+const headline = computed(() => findPageHeadline(navigation?.value, page.value))
+
+defineOgImageComponent('Docs', {
+  headline: headline.value
+})
+
+const editLink = computed(() => {
+  if (!appConfig.github) {
+    return
+  }
+
+  return [
+    appConfig.github.url,
+    'edit',
+    appConfig.github.branch,
+    appConfig.github.rootDir,
+    'content',
+    `${page.value?.stem}.${page.value?.extension}`
+  ].filter(Boolean).join('/')
+})
+
+const links = computed(() => {
+  const links = []
+  if (appConfig.toc?.bottom?.edit) {
+    links.push({
+      icon: 'lucide-external-link',
+      label: '编辑页面',
+      to: `${appConfig.toc.bottom.edit}/${page?.value?.stem}.${page?.value?.extension}`,
+      target: '_blank'
+    })
+  }
+
+  return [...links, ...(appConfig.toc?.bottom?.links || [])].filter(Boolean)
+})
+</script>
+
+<template>
+  <UPage
+    v-if="page"
+    :class="pageFontSizeClass"
+  >
+    <UPageHeader
+      :title="page.title"
+      :description="page.description"
+      :headline="headline"
+      :ui="{
+        wrapper: 'flex-row items-center flex-wrap justify-between '
+      }"
+    >
+      <template #links>
+        <UButton
+          v-for="(link, index) in page.links"
+          :key="index"
+          size="sm"
+          v-bind="link"
+        />
+
+        <DocsPageHeaderLinks />
+      </template>
+    </UPageHeader>
+
+    <UPageBody>
+      <ContentRenderer
+        v-if="page"
+        :value="page"
+      />
+
+      <USeparator>
+        <div
+          v-if="editLink"
+          class="flex items-center gap-2 text-sm text-muted"
+        >
+          <UButton
+            variant="link"
+            color="neutral"
+            :to="editLink"
+            target="_blank"
+            icon="lucide-pen"
+            :ui="{ leadingIcon: 'size-4' }"
+          >
+            编辑页面
+          </UButton>
+          or
+          <UButton
+            variant="link"
+            color="neutral"
+            :to="`${appConfig.github.url}/issues/new/choose`"
+            target="_blank"
+            icon="lucide-alert-circle"
+            :ui="{ leadingIcon: 'size-4' }"
+          >
+            提交问题
+          </UButton>
+        </div>
+      </USeparator>
+      <UContentSurround :surround="surround" />
+    </UPageBody>
+
+    <template
+      v-if="page?.body?.toc?.links?.length"
+      #right
+    >
+      <div class="fixed top-24 right-15 w-auto">
+        <UContentToc
+          :title="appConfig.toc?.title"
+          :links="page.body?.toc?.links"
+        >
+          <template
+            v-if="appConfig.toc?.bottom"
+            #bottom
+          >
+            <div
+              class="hidden lg:block space-y-6 "
+              :class="{ '!mt-5': page.body?.toc?.links?.length }"
+            >
+              <USeparator
+                v-if="page.body?.toc?.links?.length"
+                type="dashed"
+              />
+
+              <UPageLinks
+                :title="appConfig.toc.bottom.title"
+                :links="links"
+              />
+            </div>
+          </template>
+        </UContentToc>
+      </div>
+    </template>
+  </UPage>
+</template>

app/pages/blog/index.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'blog'
+})
+
+const title = 'Estel Blog'
+const description = 'Estel Blog'
+
+useSeoMeta({
+  titleTemplate: '',
+  title,
+  ogTitle: title,
+  description,
+  ogDescription: description,
+  ogImage: 'https://assets.hub.nuxt.com/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RvY3MtdGVtcGxhdGUubnV4dC5kZXYiLCJpYXQiOjE3Mzk0NjM0MTd9.ltVAqPgKG38O01X1zl6MXfrJc55nf9OewXNFjpZ_2JY.jpg?theme=light',
+  twitterImage: 'https://assets.hub.nuxt.com/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RvY3MtdGVtcGxhdGUubnV4dC5kZXYiLCJpYXQiOjE3Mzk0NjM0MTd9.ltVAqPgKG38O01X1zl6MXfrJc55nf9OewXNFjpZ_2JY.jpg?theme=light'
+})
+</script>
+
+<template>
+  <div>
+    <BlogIndexBlog />
+  </div>
+</template>

app/pages/docs/[...slug].vue

@@ -2,9 +2,9 @@
 import type { ContentNavigationItem } from '@nuxt/content'
 import { findPageHeadline } from '#ui-pro/utils/content'
 
-// definePageMeta({
-//   layout: 'docs'
-// })
+definePageMeta({
+  layout: 'docs'
+})
 
 const route = useRoute()
 const appConfig = useAppConfig()

app/pages/docs/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 definePageMeta({
-  layout: 'default'
+  layout: 'docs'
 })
 
 const title = 'Estel Docs'
@@ -19,7 +19,7 @@ useSeoMeta({
 
 <template>
   <div>
-    <IndexHero />
-    <IndexCard />
+    <DocsIndexHero />
+    <DocsIndexCard />
   </div>
 </template>

app/pages/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>首页</h1>
+  </div>
+</template>

app/pages/raw/[...slug].vue

@@ -2,9 +2,6 @@
 import type { ContentNavigationItem } from '@nuxt/content'
 import { findPageHeadline } from '#ui-pro/utils/content'
 
-// definePageMeta({
-//   layout: 'docs'
-// })
 
 const route = useRoute()
 const appConfig = useAppConfig()
@@ -47,9 +44,15 @@ const queryPath = computed(() => {
   }
 })
 
+// 根据路径判断查询的集合
+const collection = computed(() => {
+  return queryPath.value.startsWith('/blog') ? 'blog' : 'docs'
+})
+
+
 const { data: page } = await useAsyncData(
   `page-${route.path}`, // 使用更具体的 key
-  () => queryCollection('docs').path(queryPath.value).first(),
+  () => queryCollection(collection.value).path(queryPath.value).first(),
   {
     default: () => null // 提供默认值
   }