feat:更新首页视频为本地并添加自动播放

.vitepress/theme/components/VideoSection.vue

@@ -1,17 +1,36 @@
 <script setup lang="ts">
-defineProps<{
+import { computed } from 'vue';
+
+const props = defineProps<{
   title: string;
   description: string;
   videoSrc: string;
 }>();
+
+const isLocalVideo = computed(() => {
+  return props.videoSrc.endsWith('.mp4') || props.videoSrc.endsWith('.webm');
+});
 </script>
 
 <template>
   <div class="video-section">
     <h2>{{ title }}</h2>
     <p>{{ description }}</p>
     <div class="video-container">
+      <video
+        v-if="isLocalVideo"
+        :src="videoSrc"
+        autoplay
+        loop
+        muted
+        playsinline
+        controls
+        controlslist="nofullscreen nodownload"
+        disablepictureinpicture
+        @dblclick.prevent
+      ></video>
       <iframe
+        v-else
         :src="videoSrc"
         frameborder="0"
         allow="autoplay; fullscreen"
@@ -45,21 +64,23 @@ defineProps<{
 .video-container {
   position: relative;
   width: 100%;
-  max-width: 900px;
+  max-width: 1200px;
   margin: 0 auto;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
   aspect-ratio: 16 / 9;
 }
 
-.video-container iframe {
+.video-container iframe,
+.video-container video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border: none;
+  object-fit: cover;
 }
 
 @media (max-width: 768px) {
@@ -76,4 +97,4 @@ defineProps<{
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
   }
 }
-</style>
+</style>

.vitepress/theme/index.ts

@@ -1,8 +1,8 @@
 // https://vitepress.dev/guide/custom-theme
 import type { EnhanceAppContext, Theme } from 'vitepress';
-import { useData } from 'vitepress';
+import { useData, useRouter } from 'vitepress';
 import DefaultTheme from 'vitepress/theme';
-import { h } from 'vue';
+import { h, onMounted, watch } from 'vue';
 import '@theojs/lumen/style';
 import { BoxCube, Card, CopyText, Links, Pill } from '@theojs/lumen';
 import { getFooterData, getMessages, type Lang } from '../data/i18n';
@@ -27,7 +27,7 @@ export default {
       },
     });
   },
-  enhanceApp: ({ app }: EnhanceAppContext) => {
+  enhanceApp: ({ app, router }: EnhanceAppContext) => {
     // 注册 lumen 组件
     app.component('BoxCube', BoxCube);
     app.component('Card', Card);
@@ -41,5 +41,19 @@ export default {
     app.component('VideoSection', VideoSection);
     app.component('HomeUnderline', HomeUnderline);
     app.component('ImageGallery', ImageGallery);
+
+    if (typeof window !== 'undefined') {
+      router.onAfterRouteChanged = (to: string) => {
+        setTimeout(() => {
+          if ((window as any).umami) {
+            (window as any).umami.track((props: any) => ({
+              ...props,
+              url: to,
+              referrer: document.referrer,
+            }));
+          }
+        }, 100);
+      };
+    }
   },
 } satisfies Theme;

src/en/index.md

@@ -13,7 +13,7 @@ hero:
     alt: PCL CE
   actions:
     - theme: brand
-      text: Download
+      text: Download Now
       link: /en/download
     - theme: alt
       text: Learn More
@@ -44,8 +44,8 @@ features:
 
 <VideoSection
   title="Demo Video"
-  description="Watch to explore PCL CE features"
-  videoSrc="https://player.bilibili.com/player.html?aid=113865304048458&bvid=BV1w5wheQEAy&cid=28195815657&p=1&autoplay=0&high_quality=3&danmaku=0"
+  description="Watch to explore PCL CE's powerful features"
+  videoSrc="/video/hero.mp4"
 />
 
 <ImageGallery :images="[

src/index.md

@@ -13,7 +13,7 @@ hero:
     alt: PCL CE
   actions:
     - theme: brand
-      text: 下载  
+      text: 立即下载  
       link: /download
     - theme: alt
       text: 了解更多
@@ -44,8 +44,8 @@ features:
 
 <VideoSection
   title="演示视频"
-  description="观看视频，了解 PCL CE 的功能"
-  videoSrc="https://player.bilibili.com/player.html?aid=113865304048458&bvid=BV1w5wheQEAy&cid=28195815657&p=1&autoplay=0&high_quality=3&danmaku=0"
+  description="观看视频，了解 PCL CE 的强大功能"
+  videoSrc="/video/hero.mp4"
 />
 
 <ImageGallery :images="[