init: 初始化 VitePress 官网项目

docs/.vitepress/theme/components/BookMockup.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+interface Props {
+  imageSrc?: string
+  title: string
+  color?: string
+  className?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: 'bg-blue-600',
+  className: '',
+})
+</script>
+
+<template>
+  <div :class="['relative group perspective-1000', props.className]">
+    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[120%] h-[120%] bg-gradient-to-tr from-orange-100/40 to-blue-100/40 blur-[60px] rounded-full pointer-events-none"></div>
+
+    <div class="relative z-10 transition-transform duration-500 hover:scale-105 hover:-translate-y-2">
+      <img
+        v-if="props.imageSrc"
+        :src="props.imageSrc"
+        :alt="props.title"
+        class="w-full h-auto object-contain drop-shadow-2xl"
+        style="filter: drop-shadow(0 20px 30px rgba(0,0,0,0.15));"
+        loading="lazy"
+      />
+      <div
+        v-else
+        :class="[
+          'w-[220px] h-[300px] mx-auto rounded-r-xl rounded-l-sm shadow-2xl flex flex-col p-6 relative overflow-hidden',
+          props.color
+        ]"
+      >
+        <div class="absolute left-0 top-0 bottom-0 w-[4px] bg-black/10"></div>
+        <div class="absolute inset-0 bg-gradient-to-tr from-black/10 to-transparent pointer-events-none"></div>
+        <div class="text-white/60 text-xs font-bold tracking-[0.2em] mb-auto uppercase">Gongxue</div>
+        <div class="text-white font-serif text-3xl font-bold leading-tight">{{ props.title }}</div>
+        <div class="mt-4 w-12 h-1 bg-white/50"></div>
+      </div>
+    </div>
+
+    <div class="absolute -bottom-6 left-1/2 -translate-x-1/2 w-[80%] h-4 bg-black/20 blur-xl rounded-[100%] opacity-0 group-hover:opacity-40 transition-opacity duration-500"></div>
+  </div>
+</template>