init: 初始化 VitePress 官网项目

docs/.vitepress/theme/components/PhoneMockup.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+interface Props {
+  imageSrc: string
+  className?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div 
+    :class="[
+      'relative mx-auto w-full max-w-[280px] z-10 transition-transform duration-300 hover:scale-[1.02]',
+      props.className || ''
+    ]"
+    style="aspect-ratio: 1290 / 2796;"
+  >
+    <div 
+      class="relative w-full h-full bg-black overflow-hidden"
+      style="border-radius: 16% / 7.38%; box-shadow: 0 0 0 1px #444, 0 0 0 3px #d1d1d1, 0 0 0 4px #999, 0 20px 50px -10px rgba(0,0,0,0.3); padding: 3px;"
+    >
+      <div 
+        class="relative w-full h-full bg-[#111] overflow-hidden"
+        style="border-radius: calc(16% - 1%) / calc(7.38% - 0.5%); box-shadow: inset 0 0 20px rgba(255,255,255,0.08);"
+      >
+        <div class="absolute top-[3.5%] left-1/2 -translate-x-1/2 w-[30%] h-[3.5%] bg-black rounded-[20px] z-50 pointer-events-none flex items-center justify-center">
+          <div class="w-[40%] h-[40%] bg-white/10 rounded-full blur-[2px]"></div>
+        </div>
+
+        <img 
+          :src="props.imageSrc" 
+          alt="App Screen" 
+          class="w-full h-full object-cover object-top opacity-100 relative z-10"
+          loading="lazy"
+        />
+        
+        <div class="absolute bottom-[2%] left-1/2 -translate-x-1/2 w-[35%] h-[0.5%] bg-white/80 rounded-full z-20 backdrop-blur-sm"></div>
+      </div>
+    </div>
+  </div>
+</template>