From 1d2f1072ef24c4e5668b5dc1e5d69fb0f1b53ce3 Mon Sep 17 00:00:00 2001
From: yj <1336058017@qq.com>
Date: Wed, 22 Jan 2025 09:41:57 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=8F=E8=A7=86=E9=A2=91=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E6=9D=A1=E5=8A=A0=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Meeting/index.module.scss | 25 +++++++++++++++++
 src/page/Meeting/index.tsx         | 43 +++++++++++++++++++++++++-----
 2 files changed, 61 insertions(+), 7 deletions(-)

diff --git a/src/page/Meeting/index.module.scss b/src/page/Meeting/index.module.scss
index 7a75217..f3a07c0 100644
--- a/src/page/Meeting/index.module.scss
+++ b/src/page/Meeting/index.module.scss
@@ -232,6 +232,11 @@
         position: relative;
         overflow: hidden;
 
+        #videoView {
+          position: relative;
+          border: 1px red solid;
+        }
+
         .standardModeIcon {
           position: absolute;
           left: 50%;
@@ -305,6 +310,10 @@
           .meetingContentSwiperCard {
             width: 100%;
           }
+
+          .meetingContentSwiperCard {
+            height: calc(100% / 6);
+          }
         }
 
         // 单画面模式
@@ -427,6 +436,22 @@
           }
         }
 
+        .meetingContentSwiperCaret {
+          position: absolute;
+          z-index: 2;
+          cursor: pointer;
+          background-color: rgba(0, 0, 0, 0.5);
+          color: white;
+          border: 1px white solid;
+          font-size: 20px;
+          width: 30px;
+          height: 30px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+
         .meetingContentBodyLeftBlock {
           position: absolute;
           background-color: #1F2022;
diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx
index 8aeb57a..a0a501e 100644
--- a/src/page/Meeting/index.tsx
+++ b/src/page/Meeting/index.tsx
@@ -4,7 +4,7 @@ import Operation from '@/components/Operation';
 import SpeakerModeModal from '@/components/SpeakerModeModal';
 import InvitingPersonnelModal from '@/components/InvitingPersonnelModal';
 import { Button, Input, Popover, Modal, Checkbox, message, Popconfirm, notification } from "antd";
-import { SearchOutlined, EllipsisOutlined, ExclamationCircleFilled, FullscreenExitOutlined, FullscreenOutlined, QuestionCircleOutlined } from '@ant-design/icons';
+import { SearchOutlined, EllipsisOutlined, ExclamationCircleFilled, FullscreenExitOutlined, FullscreenOutlined, QuestionCircleOutlined, CaretLeftOutlined, CaretRightOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { thumbImageBufferToBase64 } from '@/utils/package/base64'
 import { storage } from '@/utils';
@@ -1443,12 +1443,17 @@ const Meeting: React.FC = () => {
   }
   // 滚动
   const handleWheelChange = (e: any): void => {
-    const container = document.getElementById('videoView') as HTMLElement;
-    if (e.wheelDeltaY > 0) {
-      container.scrollLeft -= 100
-    } else {
-      container.scrollLeft += 100
-    }
+    setMeetingMode(res => {
+      if (res === 'StandardMode') {
+        const container = document.getElementById('videoView') as HTMLElement;
+        if (e.wheelDeltaY > 0) {
+          container.scrollLeft -= 100
+        } else {
+          container.scrollLeft += 100
+        }
+      }
+      return res
+    })
   }
   // 渲染视频
   const renderVideo = async (uid: string = ''): Promise<void> => {
@@ -2595,6 +2600,30 @@ const Meeting: React.FC = () => {
                   </div> : null)
                 }
                 )}
+                {roomUserList.length > 6 ? <div>
+                  {meetingMode === "StandardMode" ? <div className={`${styles.meetingContentSwiperCaret}`} style={{ left: '20px', top: '66px' }} onClick={() => {
+                    const container = document.getElementById('videoView') as HTMLElement;
+                    container.scrollLeft -= 100
+                  }}>
+                    <CaretLeftOutlined />
+                  </div> : <div className={`${styles.meetingContentSwiperCaret}`} style={{ left: '8.2%', top: '20px' }} onClick={() => {
+                    const container = document.getElementById('videoView') as HTMLElement;
+                    container.scrollTop -= 100
+                  }}>
+                    <CaretUpOutlined />
+                  </div>}
+                  {meetingMode === "StandardMode" ? <div className={`${styles.meetingContentSwiperCaret}`} style={{ right: '20px', top: '66px' }} onClick={() => {
+                    const container = document.getElementById('videoView') as HTMLElement;
+                    container.scrollLeft += 100
+                  }}>
+                    <CaretRightOutlined />
+                  </div> : <div className={`${styles.meetingContentSwiperCaret}`} style={{ left: '8.2%', bottom: '20px' }} onClick={() => {
+                    const container = document.getElementById('videoView') as HTMLElement;
+                    container.scrollTop += 100
+                  }}>
+                    <CaretDownOutlined />
+                  </div>}
+                </div> : null}
                 {currentLookUserStatus === 0 ?
                   <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass()} ${setMeetingContentSwiperCardFullScreenClass()}`}>
                     <div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-camera-primary'>