feat: ✨美化布局组件

.vitepress/theme/Layout.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { useData } from "vitepress";
+import DefaultTheme from "vitepress/theme";
+import { nextTick, provide } from "vue";
+import HomePreview from "./components/HomePreview.vue";
+
+const { isDark } = useData();
+
+const enableTransitions = () =>
+	"startViewTransition" in document && window.matchMedia("(prefers-reduced-motion: no-preference)").matches;
+
+provide("toggle-appearance", async ({ clientX: x, clientY: y }: MouseEvent) => {
+	if (!enableTransitions()) {
+		isDark.value = !isDark.value;
+		return;
+	}
+
+	const clipPath = [
+		`circle(0px at ${x}px ${y}px)`,
+		`circle(${Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y))}px at ${x}px ${y}px)`,
+	];
+
+	// @ts-expect-error
+	await document.startViewTransition(async () => {
+		isDark.value = !isDark.value;
+		await nextTick();
+	}).ready;
+
+	document.documentElement.animate(
+		{ clipPath: isDark.value ? clipPath.reverse() : clipPath },
+		{
+			duration: 300,
+			easing: "ease-in",
+			pseudoElement: `::view-transition-${isDark.value ? "old" : "new"}(root)`,
+		}
+	);
+});
+</script>
+
+<template>
+	<DefaultTheme.Layout>
+		<template #home-features-after>
+			<HomePreview />
+		</template>
+	</DefaultTheme.Layout>
+</template>
+
+<style>
+::view-transition-old(root),
+::view-transition-new(root) {
+	animation: none;
+	mix-blend-mode: normal;
+}
+
+::view-transition-old(root),
+.dark::view-transition-new(root) {
+	z-index: 1;
+}
+
+::view-transition-new(root),
+.dark::view-transition-old(root) {
+	z-index: 9999;
+}
+
+.VPSwitchAppearance {
+	width: 22px !important;
+}
+
+.VPSwitchAppearance .check {
+	transform: none !important;
+}
+</style>

.vitepress/theme/components/HomePreview.vue

@@ -1,89 +1,89 @@
 <template>
-  <div class="home-preview-block">
+	<div class="home-preview-block">
-    <div class="home-preview">
+		<div class="home-preview">
-      <h2>截图预览</h2>
+			<h2>截图预览</h2>
-      <div class="items">
+			<div class="items">
-        <div class="item">
+				<div class="item">
-          <img data-fancybox="gallery" src="/imgs/screen1.png" />
+					<img data-fancybox="gallery" src="/imgs/screen1.png" />
-        </div>
+				</div>
-        <div class="item">
+				<div class="item">
-          <img data-fancybox="gallery" src="/imgs/screen2.png" />
+					<img data-fancybox="gallery" src="/imgs/screen2.png" />
-        </div>
+				</div>
-        <div class="item">
+				<div class="item">
-          <img data-fancybox="gallery" src="/imgs/screen3.png" />
+					<img data-fancybox="gallery" src="/imgs/screen3.png" />
-        </div>
+				</div>
-        <div class="item">
+				<div class="item">
-          <img data-fancybox="gallery" src="/imgs/screen4.png" />
+					<img data-fancybox="gallery" src="/imgs/screen4.png" />
-        </div>
+				</div>
-        <div class="item">
+				<div class="item">
-          <img data-fancybox="gallery" src="/imgs/screen5.png" />
+					<img data-fancybox="gallery" src="/imgs/screen5.png" />
-        </div>
+				</div>
-      </div>
+			</div>
-    </div>
+		</div>
-  </div>
+	</div>
 </template>
 
 <style scoped>
 .home-preview-block {
-  padding: 0 24px;
+	padding: 0 24px;
 }
 
 .home-preview {
-  max-width: 1152px;
+	max-width: 1152px;
-  margin: 50px auto 0;
+	margin: 50px auto 0;
 }
 
 .home-preview h2 {
-  font-size: 24px;
+	font-size: 24px;
-  font-weight: bold;
+	font-weight: bold;
-  margin-bottom: 20px;
+	margin-bottom: 20px;
-  text-align: center;
+	text-align: center;
 }
 
 .home-preview .items {
-  display: flex;
+	display: flex;
-  flex-wrap: wrap;
+	flex-wrap: wrap;
-  margin: -8px;
+	margin: -8px;
 }
 
 .home-preview .items .item {
-  width: 100%;
+	width: 100%;
-  padding: 8px;
+	padding: 8px;
 }
 
-.home-preview .items .item img{
+.home-preview .items .item img {
 	width: 100%;
 	height: 100%;
 	cursor: pointer;
 }
 
 .home-preview .items .item p {
-  padding: 24px;
+	padding: 24px;
-  border-radius: 12px;
+	border-radius: 12px;
-  background-color: var(--vp-c-bg-soft);
+	background-color: var(--vp-c-bg-soft);
 }
 
 .home-preview .items .item p :deep(img) {
-  border: 1px solid var(--vp-c-divider);
+	border: 1px solid var(--vp-c-divider);
 }
 
 @media (min-width: 640px) {
-  .home-preview-block {
+	.home-preview-block {
-    padding: 0 48px;
+		padding: 0 48px;
-  }
+	}
 
-  .home-preview .items .item {
+	.home-preview .items .item {
-    width: calc(100% / 2);
+		width: calc(100% / 2);
-  }
+	}
 }
 
 @media (min-width: 960px) {
-  .home-preview-block {
+	.home-preview-block {
-    padding: 0 64px;
+		padding: 0 64px;
-  }
+	}
 
-  .home-preview .items .item {
+	.home-preview .items .item {
-    width: calc(100% / 3);
+		width: calc(100% / 3);
-  }
+	}
 }
 </style>

.vitepress/theme/index.ts

@@ -1,16 +1,15 @@
-import { h } from "vue";
 import Theme from "vitepress/theme";
+import type { EnhanceAppContext } from "vitepress";
+import Layout from "./Layout.vue";
+
 import "./styles/var.css";
 import "./styles/custom.css";
-import 'uno.css';
+import "uno.css";
 
 import HomePreview from "./components/HomePreview.vue";
 
 export default {
 	...Theme,
-	Layout() {
+	Layout,
-		return h(Theme.Layout, null, {
+	enhanceApp({ app }: EnhanceAppContext) {},
-			"home-features-after": () => h(HomePreview),
-		});
-	},
 };

README.md

@@ -17,3 +17,4 @@ pnpm run build
 ``` sh
 pnpm run serve
 ```
+

tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "rootDir": ".",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "types": [
+      "vite/client",
+			"vitepress"
+    ],
+  },
+  "include": [
+    ".vitepress/**/*.ts",
+		".vitepress/**/*.vue",
+		"src/**/*.ts",
+  ],
+	"exclude": [
+		"node_modules",
+		".vitepress/dist"
+	]
+}