From bb0536c7e4266a0483022ffaa85e50d69548740c Mon Sep 17 00:00:00 2001
From: 17792275749 <812100002@qq.com>
Date: Mon, 29 Dec 2025 13:34:44 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E5=B1=8F=E6=B7=BB=E5=8A=A0=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91=E6=92=AD=E6=94=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/components/videoComponent.vue | 108 ++++++++++++++++++++++++
 src/views/homePage.vue                  |   6 ++
 src/views/sys/login.vue                 |  22 +++++
 3 files changed, 136 insertions(+)
 create mode 100644 src/views/components/videoComponent.vue

diff --git a/src/views/components/videoComponent.vue b/src/views/components/videoComponent.vue
new file mode 100644
index 0000000..973a6ef
--- /dev/null
+++ b/src/views/components/videoComponent.vue
@@ -0,0 +1,108 @@
+<template>
+    <transition name="video-fade">
+        <div v-if="isVisible" id="videoComponent">
+            <video
+                ref="videoRef"
+                class="video"
+                :src="src"
+                muted
+                autoplay
+                preload="auto"
+                playsinline
+                :controls="false"
+                @ended="handleEnded"
+                @error="handleError"
+            ></video>
+        </div>
+    </transition>
+</template>
+
+<script setup lang="ts">
+    import { ref, onMounted, onUnmounted } from 'vue';
+
+    interface Props {
+        src: string;
+    }
+
+    defineProps<Props>();
+    const emit = defineEmits<{
+        (e: 'complete'): void;
+    }>();
+
+    const videoRef = ref<HTMLVideoElement | null>(null);
+    const isVisible = ref<boolean>(true);
+
+    // 视频结束处理
+    const handleEnded = (): void => {
+        isVisible.value = false;
+        // 延迟发射完成事件，等待淡出动画结束（800ms）
+        setTimeout(() => {
+            emit('complete');
+        }, 800);
+    };
+
+    // 异常处理：大屏如果视频加载失败，直接隐藏，避免遮挡看板
+    const handleError = (): void => {
+        console.error('视频资源加载失败');
+        isVisible.value = false;
+        emit('complete');
+    };
+
+    onMounted(() => {
+        if (videoRef.value) {
+            // 显式静音
+            videoRef.value.muted = true;
+            // 尝试播放
+            const playPromise = videoRef.value.play();
+            if (playPromise !== undefined) {
+                playPromise.catch((error) => {
+                    console.warn('自动播放尝试失败，请检查视频源:', error);
+                    // 如果依然无法播放，直接销毁遮罩
+                    isVisible.value = false;
+                });
+            }
+        }
+    });
+
+    onUnmounted(() => {
+        // 组件卸载时确保释放资源
+        if (videoRef.value) {
+            videoRef.value.pause();
+            videoRef.value.src = '';
+            videoRef.value.load();
+        }
+    });
+</script>
+
+<style scoped lang="less">
+    #videoComponent {
+        position: fixed;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        width: 100vw;
+        height: 100vh;
+        overflow: hidden;
+        pointer-events: none;
+        z-index: 99999;
+        background-color: #000;
+
+        .video {
+            width: 100%;
+            height: 100%;
+            /* 关键：确保大屏视频拉伸填充，不留黑边 */
+            object-fit: cover;
+            /* 某些超宽大屏可能需要 fill，视具体视频比例而定 */
+            /* object-fit: fill; */
+        }
+
+        /* 淡出动画 */
+        .video-fade-leave-active {
+            transition: opacity 0.8s ease-in-out;
+        }
+        .video-fade-leave-to {
+            opacity: 0;
+        }
+    }
+</style>
diff --git a/src/views/homePage.vue b/src/views/homePage.vue
index 7fdff09..925a25d 100644
--- a/src/views/homePage.vue
+++ b/src/views/homePage.vue
@@ -33,10 +33,13 @@
                 <a-spin size="large" />
             </div>
         </div>
+
+        <VideoComponent :src="videoUrl" />
     </div>
 </template>
 <script setup lang="ts">
     import LoginOutButton from '/@/views/components/loginOutButton.vue';
+    import VideoComponent from '/@/views/components/videoComponent.vue';
     import { useUserStore } from '/@/store/modules/user.ts';
     import { onMounted, ref, watch } from 'vue';
     import dayjs from 'dayjs';
@@ -86,6 +89,9 @@
         document.title = centerInfo.screenTitle || '健康服务中心';
     });
 
+    // 定义网络视频地址
+    const videoUrl = 'https://api-xj.tri.icdat.cn/file/show/temp/20251229/20251229_1766980290812.mp4';
+
     const getTime = () => {
         dateInfo.value = {
             day: dayjs().format('YYYY年MM月DD日'),
diff --git a/src/views/sys/login.vue b/src/views/sys/login.vue
index af14bc0..c3e852f 100644
--- a/src/views/sys/login.vue
+++ b/src/views/sys/login.vue
@@ -170,6 +170,21 @@
         return true;
     }
 
+    const requestFull = () => {
+        const docElm = document.documentElement as any;
+        const requestMethod =
+            docElm.requestFullscreen ||
+            docElm.mozRequestFullScreen ||
+            docElm.webkitRequestFullScreen ||
+            docElm.msRequestFullscreen;
+
+        if (requestMethod) {
+            // 返回 promise 以便捕获可能的拒绝
+            return requestMethod.call(docElm);
+        }
+        return Promise.reject('浏览器不支持全屏API');
+    };
+
     async function accountLogin() {
         if (!checkFormField(formData, 'username', 'login.accountPlaceholder')) return;
         if (!checkFormField(formData, 'password', 'login.passwordPlaceholder')) return;
@@ -213,6 +228,13 @@
                         }
                         goPath = PageEnum.BASE_HOME;
                     }
+
+                    try {
+                        await requestFull();
+                    } catch (screenError) {
+                        console.warn('自动进入全屏失败，请手动按 F11:', screenError);
+                    }
+
                     notification.success({
                         message: t('login.loginSuccessTitle'),
                         description: `${t('login.loginSuccessDesc')}: ${userInfo.realname}`,