🐛 fix: 修复视频模式下 resize 体验问题

lobehub · May 3, 2024 · 5ee68be · 5ee68be
1 parent 1097c40
commit 5ee68be
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 14 deletions.
diff --git a/src/features/AgentViewer/ToolBar/index.tsx b/src/features/AgentViewer/ToolBar/index.tsx
@@ -16,19 +16,19 @@ interface ToolBarProps {
   className?: string;
   setOpen?: (open: boolean) => void;
   style?: React.CSSProperties;
+  viewerRef?: React.RefObject<HTMLDivElement>;
 }
 
-const toggleFullScreen = () => {
-  if (!document.fullscreenElement) {
-    document.body.requestFullscreen();
-  } else if (document.exitFullscreen) {
-    document.exitFullscreen();
-  }
-};
-
 const ToolBar = (props: ToolBarProps) => {
-  const { style, className, setOpen } = props;
+  const { style, className, setOpen, viewerRef } = props;
   const viewer = useViewerStore((s) => s.viewer);
+  const toggleFullScreen = () => {
+    if (!document.fullscreenElement) {
+      viewerRef?.current?.requestFullscreen();
+    } else {
+      document.exitFullscreen();
+    }
+  };
 
   const dropdownMenu = [
     {

diff --git a/src/features/AgentViewer/index.tsx b/src/features/AgentViewer/index.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useEffect, useState } from 'react';
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
 
 import PageLoading from '@/components/PageLoading';
 import ToolBar from '@/features/AgentViewer/ToolBar';
@@ -13,6 +13,7 @@ function AgentViewer() {
   const { styles } = useStyles();
   const [loading, setLoading] = useState(false);
   const [open, setOpen] = useState(true);
+  const ref = useRef<HTMLDivElement>(null);
   const currentAgentModel = useSessionStore((s) => sessionSelectors.currentAgentModel(s));
 
   useEffect(() => {
@@ -34,11 +35,11 @@ function AgentViewer() {
   );
 
   return (
-    <div className={styles.viewer}>
+    <div ref={ref} className={styles.viewer}>
       {open ? <ChatDialog className={styles.dialog} setOpen={setOpen} /> : null}
-      <ToolBar className={styles.toolbar} setOpen={setOpen} />
+      <ToolBar className={styles.toolbar} setOpen={setOpen} viewerRef={ref} />
       {loading ? <PageLoading title={'模型加载中，请稍后...'} /> : null}
-      <canvas ref={canvasRef} height={'100%'} width={'100%'}></canvas>
+      <canvas ref={canvasRef} className={styles.canvas}></canvas>
     </div>
   );
 }

diff --git a/src/features/AgentViewer/style.ts b/src/features/AgentViewer/style.ts
@@ -25,7 +25,14 @@ export const useStyles = createStyles(({ css, token }) => ({
     max-width: ${CHAT_INPUT_WIDTH};
   `,
   viewer: css`
+    min-height: 0;
+  `,
+  canvas: css`
+    display: block;
+
     width: 100%;
+    max-width: 100%;
     height: calc(100vh - ${HEADER_HEIGHT}px - ${CHAT_HEADER_HEIGHT}px - ${CHAT_INPUT_MIN_HEIGHT}px);
+    max-height: 100%;
   `,
 }));
diff --git a/src/features/ChatInput/MessageInput/index.tsx b/src/features/ChatInput/MessageInput/index.tsx
@@ -56,7 +56,7 @@ const InputArea = memo((props: InputAreaProps) => {
         }}
         placeholder="请输入内容开始聊天"
         ref={ref}
-        autoSize={{ minRows: 1, maxRows: 4 }}
+        autoSize={{ minRows: 1, maxRows: 3 }}
         type={'block'}
         value={messageInput}
       />