✨feat: 正式添加彩虹动画效果

将首页样式更新逻辑中的路径判断从根路径修改为'/vitepress/'，以适应新的路由结构。同时，在样式文件中添加了`vars.scss`的导入，确保样式变量的使用，提升样式的可维护性和一致性。

Author: 1411430556

docs/.vitepress/theme/index.ts

@@ -61,7 +61,7 @@ export default {
     if (typeof window !== 'undefined') {
       watch(
         () => router.route.data.relativePath,
-        () => updateHomePageStyle(location.pathname === '/'),
+        () => updateHomePageStyle(location.pathname === '/vitepress/'),
         { immediate: true },
       )
     }

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

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

docs/.vitepress/theme/style/vars.scss

@@ -0,0 +1,133 @@
+/**
+ * Customize default theme styling by overriding CSS variables:
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+ */
+
+/**
+ * Colors
+ * -------------------------------------------------------------------------- */
+ :root {
+  --vp-c-gutter: var(--vp-c-divider);
+  --vp-code-block-bg: rgba(125, 125, 125, 0.04);
+  --vp-code-tab-divider: var(--vp-c-divider);
+  --vp-code-copy-code-bg: rgba(125, 125, 125, 0.1);
+  --vp-code-copy-code-hover-bg: rgba(125, 125, 125, 0.2);
+  --vp-c-disabled-bg: rgba(125, 125, 125, 0.2);
+  --vp-code-tab-text-color: var(--vp-c-text-2);
+  --vp-code-tab-active-text-color: var(--vp-c-text-1);
+  --vp-code-tab-hover-text-color: var(--vp-c-text-1);
+  --vp-code-copy-code-active-text: var(--vp-c-text-2);
+  --vp-c-text-dark-3: rgba(56, 56, 56, 0.8);
+  --vp-c-brand-lightest: var(--vp-c-brand-1);
+
+  --vp-c-highlight-bg: var(--vp-c-brand-light);
+  --vp-c-highlight-text: var(--vp-c-bg);
+}
+
+.dark {
+  --vp-code-block-bg: rgba(0, 0, 0, 0.2);
+  --vp-c-text-code: #c0cec0;
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+:root {
+  --vp-button-brand-border: var(--vp-c-brand-light);
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-bg: var(--vp-c-brand-1);
+  --vp-button-brand-hover-border: var(--vp-c-brand-light);
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-light);
+  --vp-button-brand-active-border: var(--vp-c-brand-light);
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-button-brand-bg);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(
+    120deg,
+    var(--vp-c-brand-1) 30%,
+    var(--vp-c-brand-next)
+  );
+  --vp-home-hero-image-background-image: linear-gradient(
+    -45deg,
+    var(--vp-c-brand-1) 30%,
+    var(--vp-c-brand-next)
+  );
+  --vp-home-hero-image-filter: blur(80px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(120px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(120px);
+  }
+}
+
+/* Safari has a very bad performance on gradient and filter */
+.browser-safari,
+.browser-firefox {
+  --vp-home-hero-image-background-image: transparent;
+  --vp-home-hero-image-filter: "";
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+// :root {
+//   --vp-custom-block-tip-border: var(--vp-c-brand-1);
+//   --vp-custom-block-tip-text: var(--vp-c-brand-darker);
+//   --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
+// }
+// .dark {
+//   --vp-custom-block-tip-border: var(--vp-c-brand-1);
+//   --vp-custom-block-tip-text: var(--vp-c-brand-lightest);
+//   --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
+// }
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand-1) !important;
+}
+
+/* 去掉横线 */
+.vp-doc a {
+  text-decoration: none;
+}
+
+
+.VPFeature {
+    display: block;
+    border: 1px solid var(--vp-c-bg-soft);
+    border-radius: 12px;
+    height: 100%;
+    background-color: var(--vp-c-bg-soft);
+    transition: border-color .25s,background-color .25s,transform 0.4s;
+}
+
+.VPFeature.link:hover {
+    border-color: var(--vp-c-brand-1);
+
+}
+
+/* 卡片悬浮效果 */
+.VPFeatures .items .item {
+  transition: transform 0.3s;
+}
+
+.VPFeatures .items .item:hover {
+  border-color: var(--vp-c-brand-1) !important;
+  transform: translateY(-5px);
+}