From 90e09e52317fb2626c1dadd7a4b3d6bff7e0be61 Mon Sep 17 00:00:00 2001
From: vben <ann.vben@gmail.com>
Date: Sat, 28 Sep 2024 15:36:18 +0800
Subject: [PATCH] chore: update docs

---
 .vitepress/theme-default/Layout.vue | 239 ++++++++++++++--------------
 .vitepress/theme-default/V5.vue     |  23 +++
 2 files changed, 142 insertions(+), 120 deletions(-)
 create mode 100644 .vitepress/theme-default/V5.vue

diff --git a/.vitepress/theme-default/Layout.vue b/.vitepress/theme-default/Layout.vue
index 0421c4b2..dff91156 100644
--- a/.vitepress/theme-default/Layout.vue
+++ b/.vitepress/theme-default/Layout.vue
@@ -1,6 +1,19 @@
 <template>
-  <div class="theme" :class="pageClasses">
-    <NavBar v-if="showNavbar" @toggle="toggleSidebar">
+  <V5 />
+  <div
+    class="theme"
+    :class="pageClasses"
+    :style="{
+      paddingTop: '60px',
+    }"
+  >
+    <NavBar
+      v-if="showNavbar"
+      @toggle="toggleSidebar"
+      :style="{
+        top: '60px',
+      }"
+    >
       <template #search>
         <slot name="navbar-search">
           <AlgoliaSearchBox
@@ -41,10 +54,7 @@
     <Page v-else>
       <template #top>
         <slot name="page-top-ads">
-          <div
-            id="ads-container"
-            v-if="theme.carbonAds && theme.carbonAds.carbon"
-          >
+          <div id="ads-container" v-if="theme.carbonAds && theme.carbonAds.carbon">
             <CarbonAds
               :key="'carbon' + page.relativePath"
               :code="theme.carbonAds.carbon"
@@ -72,129 +82,118 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, defineAsyncComponent } from 'vue'
-import {
-  useRoute,
-  useSiteData,
-  usePageData,
-  useSiteDataByRoute
-} from 'vitepress'
-import { isSideBarEmpty, getSideBarConfig } from './support/sideBar'
-import type { DefaultTheme } from './config'
-
-// components
-import NavBar from './components/NavBar.vue'
-import SideBar from './components/SideBar.vue'
-import Page from './components/Page.vue'
-
-const Home = defineAsyncComponent(() => import('./components/Home.vue'))
-
-const NoopComponent = () => null
-
-const CarbonAds = __CARBON__
-  ? defineAsyncComponent(() => import('./components/CarbonAds.vue'))
-  : NoopComponent
-const BuySellAds = __BSA__
-  ? defineAsyncComponent(() => import('./components/BuySellAds.vue'))
-  : NoopComponent
-const AlgoliaSearchBox = __ALGOLIA__
-  ? defineAsyncComponent(() => import('./components/AlgoliaSearchBox.vue'))
-  : NoopComponent
-
-// generic state
-const route = useRoute()
-const siteData = useSiteData<DefaultTheme.Config>()
-const siteRouteData = useSiteDataByRoute()
-const theme = computed(() => siteData.value.themeConfig)
-const page = usePageData()
-
-// custom layout
-const isCustomLayout = computed(() => !!route.data.frontmatter.customLayout)
-// home
-const enableHome = computed(() => !!route.data.frontmatter.home)
-
-// navbar
-const showNavbar = computed(() => {
-  const { themeConfig } = siteRouteData.value
-  const { frontmatter } = route.data
-  if (frontmatter.navbar === false || themeConfig.navbar === false) {
-    return false
-  }
-  return (
-    siteData.value.title ||
-    themeConfig.logo ||
-    themeConfig.repo ||
-    themeConfig.nav
-  )
-})
-
-// sidebar
-const openSideBar = ref(false)
-
-const showSidebar = computed(() => {
-  const { frontmatter } = route.data
-
-  if (frontmatter.home || frontmatter.sidebar === false) {
-    return false
-  }
+  import V5 from './V5.vue';
+  import { ref, computed, watch, defineAsyncComponent } from 'vue';
+  import { useRoute, useSiteData, usePageData, useSiteDataByRoute } from 'vitepress';
+  import { isSideBarEmpty, getSideBarConfig } from './support/sideBar';
+  import type { DefaultTheme } from './config';
+
+  // components
+  import NavBar from './components/NavBar.vue';
+  import SideBar from './components/SideBar.vue';
+  import Page from './components/Page.vue';
+
+  const Home = defineAsyncComponent(() => import('./components/Home.vue'));
+
+  const NoopComponent = () => null;
+
+  const CarbonAds = __CARBON__
+    ? defineAsyncComponent(() => import('./components/CarbonAds.vue'))
+    : NoopComponent;
+  const BuySellAds = __BSA__
+    ? defineAsyncComponent(() => import('./components/BuySellAds.vue'))
+    : NoopComponent;
+  const AlgoliaSearchBox = __ALGOLIA__
+    ? defineAsyncComponent(() => import('./components/AlgoliaSearchBox.vue'))
+    : NoopComponent;
+
+  // generic state
+  const route = useRoute();
+  const siteData = useSiteData<DefaultTheme.Config>();
+  const siteRouteData = useSiteDataByRoute();
+  const theme = computed(() => siteData.value.themeConfig);
+  const page = usePageData();
+
+  // custom layout
+  const isCustomLayout = computed(() => !!route.data.frontmatter.customLayout);
+  // home
+  const enableHome = computed(() => !!route.data.frontmatter.home);
+
+  // navbar
+  const showNavbar = computed(() => {
+    const { themeConfig } = siteRouteData.value;
+    const { frontmatter } = route.data;
+    if (frontmatter.navbar === false || themeConfig.navbar === false) {
+      return false;
+    }
+    return siteData.value.title || themeConfig.logo || themeConfig.repo || themeConfig.nav;
+  });
+
+  // sidebar
+  const openSideBar = ref(false);
 
-  const { themeConfig } = siteRouteData.value
-
-  return !isSideBarEmpty(
-    getSideBarConfig(themeConfig.sidebar, route.data.relativePath)
-  )
-})
-
-const toggleSidebar = (to?: boolean) => {
-  openSideBar.value = typeof to === 'boolean' ? to : !openSideBar.value
-}
-
-const hideSidebar = toggleSidebar.bind(null, false)
-// close the sidebar when navigating to a different location
-watch(route, hideSidebar)
-// TODO: route only changes when the pathname changes
-// listening to hashchange does nothing because it's prevented in router
-
-// page classes
-const pageClasses = computed(() => {
-  return [
-    {
-      'no-navbar': !showNavbar.value,
-      'sidebar-open': openSideBar.value,
-      'no-sidebar': !showSidebar.value
+  const showSidebar = computed(() => {
+    const { frontmatter } = route.data;
+
+    if (frontmatter.home || frontmatter.sidebar === false) {
+      return false;
     }
-  ]
-})
+
+    const { themeConfig } = siteRouteData.value;
+
+    return !isSideBarEmpty(getSideBarConfig(themeConfig.sidebar, route.data.relativePath));
+  });
+
+  const toggleSidebar = (to?: boolean) => {
+    openSideBar.value = typeof to === 'boolean' ? to : !openSideBar.value;
+  };
+
+  const hideSidebar = toggleSidebar.bind(null, false);
+  // close the sidebar when navigating to a different location
+  watch(route, hideSidebar);
+  // TODO: route only changes when the pathname changes
+  // listening to hashchange does nothing because it's prevented in router
+
+  // page classes
+  const pageClasses = computed(() => {
+    return [
+      {
+        'no-navbar': !showNavbar.value,
+        'sidebar-open': openSideBar.value,
+        'no-sidebar': !showSidebar.value,
+      },
+    ];
+  });
 </script>
 
 <style>
-#ads-container {
-  margin: 0 auto;
-}
-
-@media (min-width: 420px) {
   #ads-container {
-    position: relative;
-    right: 0;
-    float: right;
-    margin: -8px -8px 24px 24px;
-    width: 146px;
+    margin: 0 auto;
   }
-}
 
-@media (max-width: 420px) {
-  #ads-container {
-    /* Avoid layout shift */
-    height: 105px;
-    margin: 1.75rem 0;
+  @media (min-width: 420px) {
+    #ads-container {
+      position: relative;
+      right: 0;
+      float: right;
+      margin: -8px -8px 24px 24px;
+      width: 146px;
+    }
   }
-}
 
-@media (min-width: 1400px) {
-  #ads-container {
-    position: fixed;
-    right: 8px;
-    bottom: 8px;
+  @media (max-width: 420px) {
+    #ads-container {
+      /* Avoid layout shift */
+      height: 105px;
+      margin: 1.75rem 0;
+    }
+  }
+
+  @media (min-width: 1400px) {
+    #ads-container {
+      position: fixed;
+      right: 8px;
+      bottom: 8px;
+    }
   }
-}
 </style>
diff --git a/.vitepress/theme-default/V5.vue b/.vitepress/theme-default/V5.vue
new file mode 100644
index 00000000..dbb72532
--- /dev/null
+++ b/.vitepress/theme-default/V5.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="vben-v5">
+    你正在查看的是 2.0 版本文档,当前最新版本为 v5.0，预览地址为
+    <a href="https://vben.pro" target="_blank">预览地址</a>。 如果你想要查看新版本文档，请点击
+    <a href="https://doc.vben.pro/" target="_blank"> V5 文档 </a> 查看最新文档。
+  </div>
+</template>
+
+<style scoped>
+  .vben-v5 {
+    position: fixed;
+    height: 60px;
+    z-index: 1000;
+    top: 0;
+    left: 0;
+    background: rgb(246, 197, 20);
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #333;
+  }
+</style>