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

@@ -51,7 +51,7 @@
 	padding: 8px;
 }
 
-.home-preview .items .item img{
+.home-preview .items .item img {
 	width: 100%;
 	height: 100%;
 	cursor: pointer;

.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() {
-		return h(Theme.Layout, null, {
-			"home-features-after": () => h(HomePreview),
-		});
-	},
+	Layout,
+	enhanceApp({ app }: EnhanceAppContext) {},
 };

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"
+	]
+}