✨feat: 添加导航毛玻璃效果

路由切换不再使用废弃的‘router.onAfterRouteChanged’，改为‘router.onAfterRouteChange’

Author: 1411430556

docs/.vitepress/theme/index.ts

@@ -51,7 +51,7 @@ export default {
       router.onBeforeRouteChange = () => {
         NProgress.start() // 开始进度条
       }
-      router.onAfterRouteChanged = () => {
+      router.onAfterRouteChange = () => {
          NProgress.done() // 停止进度条
       }
     }

docs/.vitepress/theme/style/blur.css

@@ -0,0 +1,41 @@
+/* .vitepress\theme\style\blur.css */
+:root {
+  /* 首页下滑后导航透明 */
+  .VPNavBar:not(.has-sidebar):not(.home.top) {
+    background-color: rgba(255, 255, 255, 0);
+    backdrop-filter: blur(10px);
+  }
+
+  /* 搜索框透明 */
+  .DocSearch-Button {
+    background-color: rgba(255, 255, 255, 0);
+    backdrop-filter: blur(10px);
+  }
+
+  /* Feature透明 */
+  .VPFeature {
+    border: none;
+    box-shadow: 0 10px 30px 0 rgb(0 0 0 / 15%);
+    background-color: transparent;
+  }
+
+  /* 文档页侧边栏顶部透明 */
+  .curtain {
+    background-color: rgba(255, 255, 255, 0);
+    backdrop-filter: blur(10px);
+  }
+
+  @media (min-width: 960px) {
+    /* 文档页导航中间透明 */
+    .VPNavBar:not(.home.top) .content-body {
+      background-color: rgba(255, 255, 255, 0);
+      backdrop-filter: blur(10px);
+    }
+  }
+
+  /* 移动端大纲栏透明 */
+  .VPLocalNav {
+    background-color: rgba(255, 255, 255, 0);
+    backdrop-filter: blur(10px);
+  }
+}

docs/.vitepress/theme/style/index.scss

@@ -2,3 +2,4 @@
 @import "./vp-code.css";
 @import "./vp-code-group.css";
 @import "./rainbow.scss";
+@import "./blur.css";