H5兼容不同浏览器高度问题

components/SmartChatBox/SmartChatBox.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useCallback, useState, useEffect } from "react";
+import React, { useRef, useCallback, useState, useEffect, useMemo } from "react";
 import { ChevronsRight, ChevronDown, X } from 'lucide-react';
 import { Switch } from 'antd';
 import { MessageRenderer } from "./MessageRenderer";
@@ -8,6 +8,7 @@ import { DateDivider } from "./DateDivider";
 import { LoadMoreButton } from "./LoadMoreButton";
 import { ChatMessage } from "./types";
 import { useDeviceType } from '@/hooks/useDeviceType';
+import { useBrowserType } from '@/hooks/useBrowserType';
 
 interface SmartChatBoxProps {
   isSmartChatBoxOpen: boolean;
@@ -168,15 +169,28 @@ export default function SmartChatBox({
     return groups.sort((a, b) => a.date - b.date);
   }, [messages]);
 
+  const browserType = useBrowserType();
+  /** 根据浏览器类型获取最大高度值 */
+  const maxHeight = useMemo(() => {
+      switch (browserType) {
+          case 'Edge':
+              return 'calc(100vh - 5.5rem)';
+          case 'Chrome':
+              return 'calc(100vh - 7rem)';
+          default:
+              return 'calc(100vh - 5.5rem)';
+      }
+  }, [browserType]);
+
   return (
     <div className={`${isMobile ? '' : 'h-full'} w-full text-gray-100 flex flex-col backdrop-blur-lg bg-black/30 border border-white/20 shadow-xl relative`} data-alt="smart-chat-box"
     style={{
-      maxHeight: isMobile ? 'calc(100vh - 5.5rem)' : '',
+      maxHeight: isMobile ? maxHeight : '',
     }}>
       {/* Header */}
       <div className={`px-4 py-3 border-b border-white/10 flex items-center justify-between ${isMobile ? 'sticky top-0 bg-[#141414] z-[1]' : ''}`} data-alt="chat-header">
         <div className="font-semibold flex items-center gap-2">
-          <span>Chat</span>
+          <span>Chat {browserType}-{maxHeight}</span>
           {/* System push toggle */}
           <Switch 
             checkedChildren="On"

components/pages/work-flow/H5MediaViewer.tsx

@@ -15,6 +15,7 @@ import { useSearchParams } from 'next/navigation';
 import error_image from '@/public/assets/error.webp';
 import { showDownloadOptionsModal } from './download-options-modal';
 import RenderLoading from './RenderLoading';
+import { useBrowserType } from '@/hooks/useBrowserType';
 
 interface H5MediaViewerProps {
     /** 任务对象，包含各阶段数据 */
@@ -86,7 +87,7 @@ export function H5MediaViewer({
     const [activeIndex, setActiveIndex] = useState<number>(0);
     const [isPlaying, setIsPlaying] = useState<boolean>(false);
     const [isCatalogOpen, setIsCatalogOpen] = useState<boolean>(false);
-    const [isEdgeBrowser, setIsEdgeBrowser] = useState<boolean>(false);
+    const browserType = useBrowserType();
     const searchParams = useSearchParams();
     const episodeId = searchParams.get('episodeId') || '';
     /** 解析形如 "16:9" 的比例字符串 */
@@ -100,16 +101,17 @@ export function H5MediaViewer({
         };
     };
 
-    /** 检测是否为 Edge 浏览器（客户端挂载后执行） */
-    useEffect(() => {
-        const isEdge = navigator.userAgent.indexOf('Edg') !== -1;
-        setIsEdgeBrowser(isEdge);
-    }, []);
-
     /** 根据浏览器类型获取最大高度值 */
     const maxHeight = useMemo(() => {
-        return isEdgeBrowser ? 'calc(100vh - 10.5rem)' : 'calc(100vh - 15rem)';
-    }, [isEdgeBrowser]);
+        switch (browserType) {
+            case 'Edge':
+                return 'calc(100vh - 10.5rem)';
+            case 'Chrome':
+                return 'calc(100vh - 17rem)';
+            default:
+                return 'calc(100vh - 15rem)';
+        }
+    }, [browserType]);
 
     /** 视频轮播容器高度：按 aspectRatio 计算（基于视口宽度） */
     const videoWrapperHeight = useMemo(() => {

hooks/useBrowserType.ts

@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react';
+
+type BrowserType = 'Edge' | 'Chrome' | 'Safari';
+
+/**
+ * Detects the browser type on client side
+ * @returns {BrowserType} - The detected browser type
+ */
+export const useBrowserType = (): BrowserType => {
+    const [browserType, setBrowserType] = useState<BrowserType>('Safari');
+
+    useEffect(() => {
+        const userAgent = navigator.userAgent;
+        
+        if (userAgent.indexOf('EdgA') !== -1 || userAgent.indexOf('EdgiOS') !== -1) {
+            setBrowserType('Edge');
+        } else if (userAgent.indexOf('Chrome') !== -1 || userAgent.indexOf('CriOS') !== -1) {
+            setBrowserType('Chrome');
+        } else {
+            setBrowserType('Safari');
+        }
+    }, []);
+
+    return browserType;
+};