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,12 +34,14 @@ function VideoItem({ cameraNumber, videoName, getFixedCameraPlayUrl }) {
   return (
     <div className={styles.branchOfficeCameraModal__video}>
       <div className={styles.branchOfficeCameraModal__videoName}>{videoName}</div>
+      <div ref={videoContainerRef} className={styles.branchOfficeCameraModal__videoContent}>
         <Spin spinning={loading}>
           {playUrl
-          ? <Video inline height="100%" width="100%" source={playUrl} isLive aliPlayerProps={{ extraInfo: { crossOrigin: "anonymous" } }} />
+            ? <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>
   );
 }
 

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

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