feat: 🚀 新增 Banner 3 个风格切换，优化部分代码和样式，修复部分问题

Author: Kele-Bingtang

docs/.vitepress/config.mts

@@ -20,6 +20,10 @@ const tkConfig = themeConfig({
     siteIteration: 2500,
     pageIteration: 2500,
   },
+  banner: {
+    bgStyle: "bigImg",
+    bigImgSrc: "/img/girl.png",
+  },
 });
 
 // https://vitepress.dev/reference/site-config

docs/index.md

@@ -3,6 +3,19 @@
 layout: home
 
 tk:
+  features:
+    - title: 指南
+      description: Hd Security 使用指南说明
+      link: /01.指南/
+      imgUrl: /img/web.png
+    - title: 设计
+      description: Hd Security 设计思路说明
+      link: /design/
+      imgUrl: /img/ui.png
+    - title: API
+      description: Hd Security 所有的 API 介绍
+      link: /07.API/01.登录 API/
+      imgUrl: /img/other.png
   description:
     - 故事由我书写，旅程由你见证，传奇由她聆听 —— 来自 Young Kbt
     - 积跬步以至千里，致敬每个爱学习的你 —— 来自 Evan Xu

docs/public/img/girl.png

@@ -8,7 +8,7 @@ export const log = (message: string, type = "yellow") => {
 };
 
 // 默认忽略的文件夹列表
-export const DEFAULT_IGNORE_DIR = [".vitepress", "node_modules"];
+export const DEFAULT_IGNORE_DIR = [".vitepress", "node_modules", "public"];
 
 export default (option: SiteInfoOption = {}) => {
   const { base = process.cwd() } = option;

docs/public/img/logo.png

@@ -4,7 +4,7 @@ import matter from "gray-matter";
 import type { PermalinkOption } from "./types";
 
 // 默认忽略的文件夹列表
-export const DEFAULT_IGNORE_DIR = ["scripts", "components", "assets", ".vitepress", "node_modules", "package.json"];
+export const DEFAULT_IGNORE_DIR = ["scripts", "components", "assets", ".vitepress", "node_modules", "package.json", "public"];
 
 // key 为文件路径，value 为永久链接
 let permalinks: Record<string, string> = {};

docs/public/img/more.png

@@ -11,7 +11,7 @@ export const log = (message: string, type = "yellow") => {
 };
 
 // 默认忽略的文件夹列表
-export const DEFAULT_IGNORE_DIR = ["scripts", "components", "assets", ".vitepress", "node_modules", "package.json"];
+export const DEFAULT_IGNORE_DIR = ["scripts", "components", "assets", ".vitepress", "node_modules", "package.json", "public"];
 
 /**
  * 生成侧边栏数据

docs/public/img/other.png

@@ -1,14 +1,13 @@
 <script setup lang="ts" name="ArchivesPage">
 import { useDesign } from "../hooks";
-import { useData } from "vitepress";
-import { postsSymbol } from "../configProvider";
+import { postsSymbol, useUnrefData } from "../configProvider";
 import { inject } from "vue";
 import { KtContentData } from "../data/types";
 
 const { getPrefixClass } = useDesign();
 const prefixClass = getPrefixClass("archives");
 
-const { frontmatter } = useData();
+const { frontmatter } = useUnrefData();
 
 const posts = inject(postsSymbol);
 

docs/public/img/ui.png

@@ -1,26 +1,25 @@
 <script setup lang="ts" name="ArticleAnalyze">
-import { useData, useRoute } from "vitepress";
+import { useRoute } from "vitepress";
 import { useDesign, useBuSunZi } from "../hooks";
 import { ElBreadcrumb, ElBreadcrumbItem, ElIcon } from "element-plus";
 import { computed, ref, unref } from "vue";
 import { formatDate } from "../helper";
 import { House, User, Calendar, FolderOpened, CollectionTag, Reading, Clock, View } from "@element-plus/icons-vue";
-import { useThemeConfig } from "../configProvider";
+import { useUnrefData } from "../configProvider";
 import { FileWords } from "vitepress-plugin-doc-analysis";
 
 const { getPrefixClass } = useDesign();
 const prefixClass = getPrefixClass("articleAnalyze");
 
-const { page, frontmatter } = useData();
-const themeConfig = useThemeConfig();
+const { theme, frontmatter, page } = useUnrefData();
 
-const author = unref(frontmatter).author || themeConfig.author;
-const date = formatDate(unref(frontmatter).date || new Date(), "yyyy-MM-dd");
-const categories = unref(frontmatter).categories || [];
-const tags = unref(frontmatter).tags || [];
+const author = frontmatter.author || theme.author;
+const date = formatDate(frontmatter.date || new Date(), "yyyy-MM-dd");
+const categories = frontmatter.categories || [];
+const tags = frontmatter.tags || [];
 // 文章阅读量
-const { eachFileWords } = themeConfig.docAnalysisInfo || {};
-const { pageView = true, wordsCount = true, readingTime = true, pageIteration } = themeConfig.docAnalysis || {};
+const { eachFileWords } = theme.docAnalysisInfo || {};
+const { pageView = true, wordsCount = true, readingTime = true, pageIteration } = theme.docAnalysis || {};
 
 const pageViewInfo = computed(() => {
   let pageViewInfo: Partial<FileWords> = {};
@@ -32,8 +31,8 @@ const pageViewInfo = computed(() => {
 });
 
 // 面包屑
-const breadcrumb = unref(frontmatter).breadcrumb || themeConfig.breadcrumb || { enabled: true, showCurrentName: false };
-const relativePathArr = unref(page).relativePath.split("/") as string[];
+const breadcrumb = frontmatter.breadcrumb || theme.breadcrumb || { enabled: true, showCurrentName: false };
+const relativePathArr = page.relativePath.split("/") as string[];
 const classifyList = ref<string[]>([]);
 
 relativePathArr.forEach((item, index) => {
@@ -46,7 +45,7 @@ relativePathArr.forEach((item, index) => {
 });
 
 const getFilePath = (index: number) => {
-  return themeConfig.catalogues?.inv[relativePathArr[index]];
+  return theme.catalogues?.inv[relativePathArr[index]];
 };
 
 const { pagePv, isGet } = useBuSunZi(pageIteration);

docs/public/img/web.png

@@ -20,7 +20,7 @@ defineProps<{ item: DefaultTheme.SidebarMulti; index: number | string }>();
         <span>{{ `${index}. ${item.text}` }}</span>
       </div>
 
-      <ul v-if="item.items" :class="`${prefixClass}__inline`">
+      <ul v-if="item.items" :class="`${prefixClass}__inline flx-wrap-between`">
         <!-- 递归 -->
         <CatalogueItem v-for="(item, i) in item.items" :key="i" :item :index="`${index}-${i + 1}`" />
       </ul>

plugins/vitepress-plugin-doc-analysis/src/helper.ts

@@ -1,18 +1,15 @@
 <script setup lang="ts" name="Catalogue">
 import { useDesign } from "../hooks";
-import { useThemeConfig } from "../configProvider";
-import { unref } from "vue";
-import { useData } from "vitepress";
+import { useUnrefData } from "../configProvider";
 import CatalogueItem from "./CatalogueItem.vue";
 
 const { getPrefixClass } = useDesign();
 const prefixClass = getPrefixClass("catalogue");
 
-const themeConfig = useThemeConfig();
-const { frontmatter } = useData();
+const { theme, frontmatter } = useUnrefData();
 
 const getPath = () => {
-  const { path } = unref(frontmatter);
+  const { path } = frontmatter;
 
   if (!path) return "";
   if (path.startsWith("/") && path.endsWith("/")) return path;
@@ -21,7 +18,7 @@ const getPath = () => {
   return `/${path}/`;
 };
 
-const catalogueList = themeConfig.sidebar[getPath()];
+const catalogueList = theme.sidebar[getPath()];
 </script>
 
 <template>

plugins/vitepress-plugin-permalink/src/helper.ts

@@ -1,77 +1,141 @@
 <script setup lang="ts" name="HomeBanner">
 import { useDesign } from "../hooks";
-import { useData } from "vitepress";
-import { onMounted, onUnmounted, unref } from "vue";
+import { withBase } from "vitepress";
+import { onMounted, onUnmounted, unref, ref, nextTick } from "vue";
 import { useTypes } from "../hooks";
+import { useUnrefData } from "../configProvider";
+import { isNumber } from "../helper";
+import HomeBannerWaves from "./HomeBannerWaves.vue";
 
 const { getPrefixClass } = useDesign();
 const prefixClass = getPrefixClass("banner");
 
-const { site, frontmatter } = useData();
-
-const title = unref(frontmatter).name || unref(site).title || "";
-const descArray = [...new Set(unref(frontmatter).tk?.description?.filter((v: string) => !!v))] as string[];
-
-const { text, shouldAnimate, startTypes, stopTypes } = useTypes(descArray, {
-  typesInTime: unref(frontmatter).tk?.typesInTime,
-  typesOutTime: unref(frontmatter).tk?.typesOutTime,
-  typesNextTime: unref(frontmatter).tk?.typesNextTime,
-});
+const { site, theme, frontmatter } = useUnrefData();
+
+const title = frontmatter.name || site.title || "";
+const descArray = [...new Set(frontmatter.tk?.description?.filter((v: string) => !!v))] as string[];
+const {
+  bgStyle = "default",
+  bigImgSrc,
+  maskBg = "rgba(0,0,0,0.4)",
+  defaultBgColor = "#e5e5e5",
+  defaultTextColor = "#000000",
+  features = [],
+  typesInTime = 200,
+  typesOutTime = 100,
+  typesNextTime = 800,
+  titleFontSize = "3.2rem",
+  descFontSize = "1.4rem",
+} = { ...theme.banner, ...frontmatter.tk };
+
+const isDefaultStyle = bgStyle === "default";
+const isBigImgStyle = bgStyle === "bigImg";
+const isGridStyle = bgStyle === "grid";
+
+const getStyle = () => {
+  let baseStyle = { "--banner-title-text": titleFontSize, "--banner-desc-text": descFontSize };
+
+  if (isDefaultStyle) return { ...baseStyle, backgroundColor: defaultBgColor, "--banner-text-color": defaultTextColor };
+  if (isGridStyle) {
+    return {
+      ...baseStyle,
+      background:
+        "rgb(40,40,45) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABOSURBVFhH7c6xCQAgDAVRR9A6E4hLu4uLiWJ7tSnuQcIvr2TRYsw3/zOGGEOMIcYQY4gxxBhiDDGGGEOMIcYQY4gxxBhiDLkx52W4Gn1tuslCtHJvL54AAAAASUVORK5CYII=)",
+      "--banner-text-color": "#ffffff",
+    };
+  }
+  if (isBigImgStyle) {
+    return {
+      ...baseStyle,
+      backgroundImage: bigImgSrc ? `url(${bigImgSrc})` : "",
+      "--banner-text-color": "#ffffff",
+      "--banner-mask-bg-color": isNumber(maskBg) ? `rgba(0, 0, 0, ${maskBg})` : maskBg,
+    };
+  }
+};
 
 const bannerRef = ref<HTMLElement | null>(null);
 
 const watchScroll = () => {
   const vPNavDom = document.querySelector(".VPNavBar");
   // 获取窗口高度
   const windowH = unref(bannerRef)?.clientHeight;
+
   if (!vPNavDom || !windowH) return;
   const toggleClass = () => {
-    if (document.documentElement.scrollTop < windowH) vPNavDom.classList.add("big-img-nav-bar");
-    else vPNavDom.classList.remove("big-img-nav-bar");
+    if (unref(bannerRef) && document.documentElement.scrollTop + 100 < windowH) {
+      vPNavDom.classList.add("big-img-nav-bar");
+    } else vPNavDom.classList.remove("big-img-nav-bar");
   };
 
   toggleClass();
-
   window.onscroll = () => {
     toggleClass();
   };
 };
 
+// 打字效果
+const { text, shouldAnimate, startTypes, stopTypes } = useTypes(descArray, {
+  typesInTime,
+  typesOutTime,
+  typesNextTime,
+});
+
 onMounted(() => {
   startTypes();
+  if (isBigImgStyle) nextTick(() => watchScroll());
 });
 
 onUnmounted(() => {
   stopTypes();
+  window.onscroll = null;
 });
 </script>
 
 <template>
-  <div ref="bannerRef" :class="`${prefixClass} big-img`" :style="{ backgroundImage: bigImg ? `url(${bigImg})` : '' }">
-    <div class="mask" />
-
-    <div :class="`${prefixClass}-content`">
+  <div
+    ref="bannerRef"
+    :class="[prefixClass, { default: isDefaultStyle, 'big-img': isBigImgStyle, grid: isGridStyle }]"
+    :style="getStyle()"
+  >
+    <div v-if="isBigImgStyle" class="mask" />
+
+    <div :class="[`${prefixClass}-content`, { center: isBigImgStyle || !features.length }]">
       <h1 :class="`${prefixClass}-content__title`">{{ title }}</h1>
       <p v-if="descArray.length" :class="`${prefixClass}-content__desc`">
         <span>{{ text }}</span>
         <span :class="['typed', { 'is-animation': shouldAnimate }]">|</span>
       </p>
     </div>
+
+    <div v-if="features.length && !isBigImgStyle" :class="`${prefixClass}-feature flx-wrap-between`">
+      <div :class="`${prefixClass}-feature__item`" v-for="(feature, index) in features" :key="index">
+        <a v-if="feature.link" :href="feature.link" class="flx-column-center">
+          <img v-if="feature.imgUrl" class="feature-img" :src="withBase(feature.imgUrl)" :alt="feature.title" />
+          <p class="feature-title">{{ feature.title }}</p>
+          <p class="feature-description">{{ feature.description }}</p>
+        </a>
+      </div>
+    </div>
   </div>
+  <HomeBannerWaves v-if="isBigImgStyle" />
 </template>
 
 <style lang="scss" scoped>
 @use "../styles/components/homeBanner.scss";
 </style>
 
 <style lang="scss">
+// 大图风格时，指定顶部导航栏样式
 .VPNavBar.home.big-img-nav-bar {
   background-color: transparent !important;
 
   .VPNavBarTitle .title,
   .VPNavBarMenuLink,
-  .VPNavBarMenuGroup .text {
+  .VPNavBarMenuGroup .text,
+  .VPSocialLink {
     color: #ffffff;
+
     &.active,
     &:hover {
       color: var(--tk-theme-color);