feat(login): 添加视频背景组件并更新登录页面

在登录页面中新增VideoBackground组件，提供视频背景功能
当视频不可用时自动降级为图片背景
同时更新页面标题为'登陆'

@@ -93,6 +93,7 @@ declare module 'vue' {
     VanTag: typeof import('vant/es')['Tag']
     VanTimePicker: typeof import('vant/es')['TimePicker']
     VanUploader: typeof import('vant/es')['Uploader']
+    VideoBackground: typeof import('./components/ui/VideoBackground.vue')['default']
     VideoPlayer: typeof import('./components/ui/VideoPlayer.vue')['default']
     WechatPayment: typeof import('./components/payment/WechatPayment.vue')['default']
   }

+<!--
+ * @Date: 2025-12-26 14:15:46
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-12-26 14:35:49
+ * @FilePath: /mlaj/src/components/ui/VideoBackground.vue
+ * @Description: 文件描述
+-->
+<template>
+    <div class="video-background fixed top-0 left-0 w-full h-full -z-10 overflow-hidden">
+        <!-- 优先显示传入的静态图片背景 -->
+        <div v-if="backgroundImage" class="w-full h-full bg-cover bg-center bg-no-repeat"
+            :style="{ backgroundImage: `url(${backgroundImage})` }">
+        </div>
+
+        <template v-else>
+            <video v-show="!use_image_bg" ref="videoPlayer" autoplay muted loop playsinline webkit-playsinline
+                preload="auto" @error="on_video_error" @stalled="on_video_error" @abort="on_video_error"
+                @emptied="on_video_error" @loadeddata="on_video_loaded" class="w-full h-full object-cover">
+                <source :src="videoUrl" type="video/mp4" />
+                Your browser does not support the video tag.
+            </video>
+
+            <!-- 图片降级背景（视频不可用时显示） -->
+            <StarryBackground v-if="use_image_bg" />
+        </template>
+
+        <!-- 遮罩层，确保内容可读性 -->
+        <div class="absolute inset-0 bg-black/30"></div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+/**
+ * 视频背景组件
+ * @description 循环播放指定的视频作为背景
+ */
+const props = defineProps({
+    videoUrl: {
+        type: String,
+        default: 'https://cdn.ipadbiz.cn/mlaj/recall/video/jimeng-2025-12-26-3484.mp4'
+    },
+    backgroundImage: {
+        type: String,
+        // TODO: 图片是假的, 如果是真实情况需要重新弄一张正式图片
+        default: 'https://cdn.ipadbiz.cn/stdj/images/%E5%90%AF%E5%8A%A8%E9%A1%B5%E6%B5%B7%E6%8A%A5%E8%83%8C%E6%99%AF@2x.png?imageMogr2/thumbnail/400x/strip/quality/70'
+    }
+})
+
+const videoPlayer = ref(null)
+const use_image_bg = ref(false)
+const is_video_ready = ref(false)
+
+onMounted(() => {
+    // 如果有传入背景图，则不执行视频逻辑
+    if (props.backgroundImage) return
+
+    const video = videoPlayer.value
+    if (video) {
+        // 尝试播放视频
+        const playPromise = video.play()
+
+        if (playPromise !== undefined) {
+            playPromise.catch(error => {
+                // 自动播放被阻止：在微信环境下尝试通过 WeixinJSBridge 播放
+                // 说明：避免控制台输出引起诊断问题
+                void error
+                const ua = navigator.userAgent.toLowerCase()
+                if (ua.match(/MicroMessenger/i) && typeof window.WeixinJSBridge !== 'undefined') {
+                    window.WeixinJSBridge.invoke('getNetworkType', {}, () => {
+                        video.play()
+                    })
+                }
+                // 若短时间内仍无法播放，降级为图片背景，避免黑屏
+                setTimeout(() => {
+                    if (!is_video_ready.value) {
+                        enable_image_fallback()
+                    }
+                }, 1200)
+            })
+        }
+
+        // 监听微信JSBridgeReady事件
+        document.addEventListener('WeixinJSBridgeReady', () => {
+            video.play()
+        }, false)
+    }
+
+    // 兜底：在一定时间内仍未加载完成则切换到图片背景
+    // setTimeout(() => {
+    //     if (!is_video_ready.value) {
+    //         enable_image_fallback()
+    //     }
+    // }, 5000)
+})
+
+/**
+ * 视频加载成功回调
+ * 说明：标记视频已可播放，用于取消降级处理
+ */
+const on_video_loaded = () => {
+    is_video_ready.value = true
+}
+
+/**
+ * 视频错误回调
+ * 说明：视频加载/播放失败时触发图片降级，避免黑屏
+ * @param {Event} e 事件对象
+ */
+const on_video_error = (e) => {
+    void e
+    enable_image_fallback()
+}
+
+/**
+ * 启用图片降级背景
+ * 说明：切换到全屏图片背景，保证用户视觉不出现黑屏
+ */
+const enable_image_fallback = () => {
+    use_image_bg.value = true
+}
+</script>
+
+<style scoped>
+.video-background {
+    /* 确保在所有内容之下 */
+    z-index: -1;
+}
+</style>

 <template>
   <div class="recall-login w-full min-h-screen relative overflow-hidden flex flex-col items-center">
-    <!-- Starry Background Effect -->
+    <!-- <VideoBackground /> -->
     <StarryBackground />
 
-    <!-- Title Section -->
+    <!-- 标题区域 -->
     <div class="mt-10 flex flex-col items-center z-10 w-full px-8">
       <img :src="titleImg" class="w-full max-w-[300px] mb-4 object-contain" alt="title" />
 
@@ -89,6 +89,7 @@ import { useRouter, useRoute } from 'vue-router'
 import { showToast } from 'vant'
 import { useTitle } from '@vueuse/core'
 import { setAuthHeaders } from "@/utils/axios";
+import VideoBackground from '@/components/ui/VideoBackground.vue'
 
 // 导入接口
 import { smsAPI } from '@/api/common'
@@ -100,7 +101,7 @@ const titleImg = 'https://cdn.ipadbiz.cn/mlaj/recall/img/title01@2x.png'
 // 路由相关
 const $route = useRoute()
 const $router = useRouter()
-useTitle($route.meta.title)
+useTitle('登陆')
 
 // TAG: 埋点
 const { trackPageView, trackClick } = useTracking()