feat: 修复布局异常

Author: 石石

packages/docs/.vitepress/theme/components/TryIt/Content.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="lg:pl-[var(--vp-sidebar-width)] lg:pt-[var(--vp-nav-height)]">
-    <div class="px-6 pb-6 rounded-2xl lg:mx-12 lg:mt-4">
+  <div>
+    <div class="pb-6 rounded-2xl mx-8 lg:mt-4">
       <!-- Header -->
       <div class="py-6">
         <div class="flex items-center justify-between">

packages/docs/.vitepress/theme/composables/useBreadcrumb.ts

@@ -1,6 +1,8 @@
 import { computed } from 'vue'
 import { useRoute } from 'vitepress'
 import { useLayout } from 'vitepress/theme'
+import { useI18n } from 'vue-i18n'
+import { localePath } from '../utils/i18n'
 import type { DefaultTheme } from 'vitepress'
 
 export interface BreadcrumbItem {
@@ -11,6 +13,15 @@ export interface BreadcrumbItem {
 export function useBreadcrumb() {
   const route = useRoute()
   const { sidebar } = useLayout()
+  const { t } = useI18n()
+
+  // 获取主页链接
+  const getHomeItem = (): BreadcrumbItem => {
+    return {
+      text: t('breadcrumb.home'),
+      link: localePath('/'),
+    }
+  }
 
   // 递归查找匹配的面包屑路径
   const findBreadcrumbPath = (
@@ -59,11 +70,22 @@ export function useBreadcrumb() {
 
   // 计算面包屑导航
   const breadcrumbItems = computed(() => {
+    // 首先获取主页项
+    const homeItem = getHomeItem()
+
+    // 如果当前就是主页，只显示主页
+    const currentPath = route.path
+    const normalizedCurrentPath = normalizePath(currentPath)
+    const normalizedHomePath = normalizePath(homeItem.link || '/')
+
+    if (normalizedCurrentPath === normalizedHomePath || currentPath === homeItem.link) {
+      return [homeItem]
+    }
+
     if (!sidebar.value || !route.path) {
-      return []
+      return [homeItem]
     }
 
-    const currentPath = route.path
     let sidebarItems: DefaultTheme.SidebarItem[] = []
 
     // 处理不同的 sidebar 格式
@@ -87,11 +109,17 @@ export function useBreadcrumb() {
     }
 
     if (sidebarItems.length === 0) {
-      return []
+      return [homeItem]
     }
 
     const breadcrumbPath = findBreadcrumbPath(sidebarItems, currentPath)
-    return breadcrumbPath || []
+
+    // 始终在面包屑路径前添加主页链接
+    if (breadcrumbPath && breadcrumbPath.length > 0) {
+      return [homeItem, ...breadcrumbPath]
+    }
+
+    return [homeItem]
   })
 
   return {

packages/docs/.vitepress/theme/layouts/Content.vue

@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import { useLayout } from 'vitepress/theme'
+
+const { isHome, hasSidebar } = useLayout()
+</script>
+
+<template>
+  <div class="VPContent" :class="{ 'has-sidebar': hasSidebar, 'is-home': isHome }">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.VPContent {
+  flex-grow: 1;
+  flex-shrink: 0;
+  margin: var(--vp-layout-top-height, 0px) auto 0;
+  width: 100%;
+}
+
+.VPContent.is-home {
+  width: 100%;
+  max-width: 100%;
+}
+
+.VPContent.has-sidebar {
+  margin: 0;
+}
+
+@media (min-width: 960px) {
+  .VPContent {
+    padding-top: var(--vp-nav-height);
+  }
+
+  .VPContent.has-sidebar {
+    margin: var(--vp-layout-top-height, 0px) 0 0;
+    padding-left: var(--vp-sidebar-width);
+  }
+}
+
+@media (min-width: 1440px) {
+  .VPContent.has-sidebar {
+    padding-right: calc((100vw - var(--vp-layout-max-width)) / 2);
+    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
+  }
+}
+</style>

packages/docs/.vitepress/theme/layouts/LayoutInner.vue

@@ -13,6 +13,7 @@ import { registerWatchers } from 'vitepress/dist/client/theme-default/composable
 import { useSidebarControl } from 'vitepress/dist/client/theme-default/composables/sidebar.js'
 import { useTryItMode } from '../composables'
 import TryItContent from '../components/TryIt/Content.vue'
+import Content from './Content.vue'
 import 'vitepress/theme'
 
 const { isOpen: isSidebarOpen, open: openSidebar, close: closeSidebar } = useSidebarControl()
@@ -78,9 +79,11 @@ provide('hero-image-slot-exists', heroImageSlotExists)
       <template #aside-ads-before><slot name="aside-ads-before" /></template>
       <template #aside-ads-after><slot name="aside-ads-after" /></template>
     </VPContent>
-    <ClientOnly v-else>
-      <TryItContent />
-    </ClientOnly>
+    <Content v-else>
+      <ClientOnly>
+        <TryItContent />
+      </ClientOnly>
+    </Content>
 
     <VPFooter />
     <slot name="layout-bottom" />

packages/docs/.vitepress/theme/locales/en.json

@@ -34,5 +34,6 @@
   "gymqj97uGGjyXSp99hh-o": "Product",
   "u7PCsvYbglQ4mhmnQhK3N": "Trade",
   "pABA78lHD--FSi39tpzwf": "Quotes",
-  "tryIt.backToDoc": "Back to Docs"
+  "tryIt.backToDoc": "Back to Docs",
+  "breadcrumb.home": "Home"
 }

packages/docs/.vitepress/theme/locales/zh-CN.json

@@ -34,5 +34,6 @@
   "gymqj97uGGjyXSp99hh-o": "品类",
   "u7PCsvYbglQ4mhmnQhK3N": "交易",
   "pABA78lHD--FSi39tpzwf": "行情",
-  "tryIt.backToDoc": "返回文档"
+  "tryIt.backToDoc": "返回文档",
+  "breadcrumb.home": "主页"
 }

packages/docs/.vitepress/theme/locales/zh-HK.json

@@ -34,5 +34,6 @@
   "gymqj97uGGjyXSp99hh-o": "品類",
   "u7PCsvYbglQ4mhmnQhK3N": "交易",
   "pABA78lHD--FSi39tpzwf": "行情",
-  "tryIt.backToDoc": "返回文檔"
+  "tryIt.backToDoc": "返回文檔",
+  "breadcrumb.home": "主頁"
 }