From 68ba3b7844148a70bd7efed58e5a6ec686186966 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8C=97=E6=9E=B3?=
 <7854742+wang_rumeng@user.noreply.gitee.com>
Date: Tue, 14 Oct 2025 14:37:49 +0800
Subject: [PATCH] =?UTF-8?q?H5=E5=85=BC=E5=AE=B9=E4=B8=8D=E5=90=8C=E6=B5=8F?=
 =?UTF-8?q?=E8=A7=88=E5=99=A8=E9=AB=98=E5=BA=A6=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/SmartChatBox/SmartChatBox.tsx     | 20 +++++++++++++---
 components/pages/work-flow/H5MediaViewer.tsx | 20 +++++++++-------
 hooks/useBrowserType.ts                      | 25 ++++++++++++++++++++
 3 files changed, 53 insertions(+), 12 deletions(-)
 create mode 100644 hooks/useBrowserType.ts

diff --git a/components/SmartChatBox/SmartChatBox.tsx b/components/SmartChatBox/SmartChatBox.tsx
index ac48e8d..b446f6d 100644
--- a/components/SmartChatBox/SmartChatBox.tsx
+++ b/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"
diff --git a/components/pages/work-flow/H5MediaViewer.tsx b/components/pages/work-flow/H5MediaViewer.tsx
index 3ce95a7..c50e88d 100644
--- a/components/pages/work-flow/H5MediaViewer.tsx
+++ b/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(() => {
diff --git a/hooks/useBrowserType.ts b/hooks/useBrowserType.ts
new file mode 100644
index 0000000..83ebf64
--- /dev/null
+++ b/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;
+};
\ No newline at end of file