feat(branchOffice): 优化摄像头视频播放容器高度适配

- 为视频播放容器添加ref和尺寸监听，解决百分比高度适配问题
- 通过 useSize 实时获取视频容器像素高度，传递给 Video 组件
- 调整样式，设置视频内容区域超出隐藏，确保加载动画和容器高度一致
- 优化 loading 状态下的 Spin 组件样式，提升用户体验
- 维护无视频时的空状态样式显示方案

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}>
+      <div ref={videoContainerRef} className={styles.branchOfficeCameraModal__videoContent}>
-        {playUrl
+        <Spin spinning={loading}>
-          ? <Video inline height="100%" width="100%" source={playUrl} isLive aliPlayerProps={{ extraInfo: { crossOrigin: "anonymous" } }} />
+          {playUrl
-          : <div className={styles.branchOfficeCameraModal__empty}>暂无视频</div>}
+            ? <Video inline height={`${videoContainerSize?.height || 1}px`} width="100%" source={playUrl} isLive aliPlayerProps={{ extraInfo: { crossOrigin: "anonymous" } }} />
-      </Spin>
+            : <div className={styles.branchOfficeCameraModal__empty}>暂无视频</div>}
+        </Spin>
+      </div>
     </div>
   );
 }

src/pages/Container/Map/components/Content/branchOffice/Camera/index.module.less

@@ -92,13 +92,18 @@
             white-space: nowrap;
           }
 
-          :global {
+          .branchOfficeCameraModal__videoContent {
-            .@{ant-prefix}-spin-nested-loading {
+            flex: 1;
-              flex: 1;
+            min-height: 0;
-              min-height: 0;
+            overflow: hidden;
 
-              .@{ant-prefix}-spin-container {
+            :global {
+              .@{ant-prefix}-spin-nested-loading {
                 height: 100%;
+
+                .@{ant-prefix}-spin-container {
+                  height: 100%;
+                }
               }
             }
           }