From 30ace87da6851b62f059b6b14695688723c02136 Mon Sep 17 00:00:00 2001
From: LiuJiaNan <15703339975@163.com>
Date: Sat, 8 Aug 2026 15:44:54 +0800
Subject: [PATCH] =?UTF-8?q?feat(branchOffice):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=91=84=E5=83=8F=E5=A4=B4=E8=A7=86=E9=A2=91=E6=92=AD=E6=94=BE?=
 =?UTF-8?q?=E5=AE=B9=E5=99=A8=E9=AB=98=E5=BA=A6=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 为视频播放容器添加ref和尺寸监听，解决百分比高度适配问题
- 通过 useSize 实时获取视频容器像素高度，传递给 Video 组件
- 调整样式，设置视频内容区域超出隐藏，确保加载动画和容器高度一致
- 优化 loading 状态下的 Spin 组件样式，提升用户体验
- 维护无视频时的空状态样式显示方案
---
 .../Content/branchOffice/Camera/VideoItem.js   | 18 ++++++++++++------
 .../branchOffice/Camera/index.module.less      | 15 ++++++++++-----
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/pages/Container/Map/components/Content/branchOffice/Camera/VideoItem.js b/src/pages/Container/Map/components/Content/branchOffice/Camera/VideoItem.js
index 693e291..5125207 100644
--- a/src/pages/Container/Map/components/Content/branchOffice/Camera/VideoItem.js
+++ b/src/pages/Container/Map/components/Content/branchOffice/Camera/VideoItem.js
@@ -1,9 +1,13 @@
+import { useSize } from "ahooks";
 import { Spin } from "antd";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import Video from "zy-react-library/components/Video";
 import styles from "./index.module.less";
 
 function VideoItem({ cameraNumber, videoName, getFixedCameraPlayUrl }) {
+  // Video 组件需要明确的像素高度，直接传百分比时无法从 Grid/Flex 容器解析出高度。
+  const videoContainerRef = useRef(null);
+  const videoContainerSize = useSize(videoContainerRef);
   const [loading, setLoading] = useState(true);
   const [playUrl, setPlayUrl] = useState("");
 
@@ -30,11 +34,13 @@ function VideoItem({ cameraNumber, videoName, getFixedCameraPlayUrl }) {
   return (
     <div className={styles.branchOfficeCameraModal__video}>
       <div className={styles.branchOfficeCameraModal__videoName}>{videoName}</div>
-      <Spin spinning={loading}>
-        {playUrl
-          ? <Video inline height="100%" width="100%" source={playUrl} isLive aliPlayerProps={{ extraInfo: { crossOrigin: "anonymous" } }} />
-          : <div className={styles.branchOfficeCameraModal__empty}>暂无视频</div>}
-      </Spin>
+      <div ref={videoContainerRef} className={styles.branchOfficeCameraModal__videoContent}>
+        <Spin spinning={loading}>
+          {playUrl
+            ? <Video inline height={`${videoContainerSize?.height || 1}px`} width="100%" source={playUrl} isLive aliPlayerProps={{ extraInfo: { crossOrigin: "anonymous" } }} />
+            : <div className={styles.branchOfficeCameraModal__empty}>暂无视频</div>}
+        </Spin>
+      </div>
     </div>
   );
 }
diff --git a/src/pages/Container/Map/components/Content/branchOffice/Camera/index.module.less b/src/pages/Container/Map/components/Content/branchOffice/Camera/index.module.less
index 6547f32..594c223 100644
--- a/src/pages/Container/Map/components/Content/branchOffice/Camera/index.module.less
+++ b/src/pages/Container/Map/components/Content/branchOffice/Camera/index.module.less
@@ -92,13 +92,18 @@
             white-space: nowrap;
           }
 
-          :global {
-            .@{ant-prefix}-spin-nested-loading {
-              flex: 1;
-              min-height: 0;
+          .branchOfficeCameraModal__videoContent {
+            flex: 1;
+            min-height: 0;
+            overflow: hidden;
 
-              .@{ant-prefix}-spin-container {
+            :global {
+              .@{ant-prefix}-spin-nested-loading {
                 height: 100%;
+
+                .@{ant-prefix}-spin-container {
+                  height: 100%;
+                }
               }
             }
           }