下载

main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow, screen, Tray, nativeImage, Menu, ipcMain, clipboard } = require('electron');
+const { app, BrowserWindow, screen, Tray, nativeImage, Menu, ipcMain, clipboard, dialog } = require('electron');
 const path = require('node:path')
 app.allowRendererProcessReuse = false;
 let mainWindow = null;
@@ -97,7 +97,6 @@ function createWindow() {
 app.on('ready', () => {
   createWindow()
   createTray()
-
   // 监听f12打开控制台
   mainWindow.webContents.on('before-input-event', (event, input) => {
     if (input.key === 'F12') {
@@ -137,6 +136,24 @@ app.on('ready', () => {
         break;
     }
   });
+  // 下载文件并放置选择的文件夹
+  ipcMain.handle('dwFile', (event, url) => {
+    // dialog.showOpenDialog(mainWindow, {
+    //   properties: ['openDirectory']
+    // }).then(result => {
+    //   if (!result.canceled) {
+    //     const selectedPath = result.filePaths[0];
+    //     win.webContents.on('will-download', (event, item, webContents) => {
+    //       console.log('Selected download folder:', selectedPath);
+    //       console.log(url);
+    //       item.setSavePath(`${selectedPath}/${url}`);
+    //       item.resume();
+    //     });
+    //   }
+    // }).catch(err => {
+
+    // });
+  });
   // 导出是否全屏
   ipcMain.handle('getIsMaximized', () => {
     return mainWindow.isMaximized();

preload.js

@@ -27,7 +27,7 @@ let videoID = '';
 let iMediaRecorder = '';
 
 const getDom = () => {
-  return document.getElementById(videoID);
+  return document.getElementById('video-1');
 }
 // 离开频道
 const leaveChannel = () => {
@@ -39,7 +39,6 @@ const leaveChannel = () => {
 }
 // 离开频道
 const joinChannel = (bool) => {
-  console.log(option);
   if (bool) {
     rtcEngine.joinChannel(option.token, option.channelId, option.userid, {
       channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting, //设置频道场景为直播场景
@@ -75,8 +74,8 @@ rtcEngine.registerEventHandler({
     // 本地用户加入频道后，设置本地视频窗口
     rtcEngine.setupLocalVideo({
       renderMode: RenderModeType.RenderModeFit,
-      sourceType: VideoSourceType.VideoSourceScreen,
+      // sourceType: VideoSourceType.VideoSourceScreen,
-      // sourceType: VideoSourceType.VideoSourceCameraPrimary,
+      sourceType: VideoSourceType.VideoSourceCameraPrimary,
       uid: localUid,
       view: getDom(),
       setupMode: VideoViewSetupMode.VideoViewSetupAdd,
@@ -178,6 +177,7 @@ contextBridge.exposeInMainWorld(
       option.token = data.token;
       option.channelId = data.channelId;
       option.userid = Number(data.userid);
+      rtcEngine.startCameraCapture(VideoSourceType.VideoSourceCamera, {})
       joinChannel(false)
     },
     // 离开频道
@@ -311,7 +311,11 @@ contextBridge.exposeInMainWorld(
     // 复制文字
     setWriteText: (text) => {
       return ipcRenderer.invoke('setWriteText', text)
-    }
+    },
+    // 下载文件并放置选择的文件夹
+    dwFile: (url) => {
+      ipcRenderer.invoke('dwFile', url)
+    },
   }
 )
 

src/api/Meeting/index.ts

@@ -0,0 +1,34 @@
+import { request } from '@/utils'
+
+export const GetRoomFile = (data: any) =>
+  request({
+    url: `/room/file`,
+    method: 'get',
+    data
+  })
+export const DeleteRoomFile = (data: any) =>
+  request({
+    url: `/room/file`,
+    method: 'delete',
+    data
+  })
+
+export const PostRoomFile = (data: any) =>
+  request({
+    url: `/room/file`,
+    method: 'post',
+    data
+  })
+
+export const GetRoomUpFileurl = (roomNum: string, fileSuffix: string) =>
+  request({
+    url: `/room/up-fileurl?roomNum=${roomNum}&fileSuffix=${fileSuffix}`,
+    method: 'get'
+  })
+
+export const GetRoomFileDwUrl = (fileUrl: string) =>
+  request({
+    url: `/room/file-dw-url?fileUrl=${fileUrl}`,
+    method: 'get'
+  })
+

src/page/Home/User/index.tsx

@@ -213,7 +213,10 @@ const User: React.FC = () => {
             <div>
               <span>账号：</span>
               <Input
+                style={{ flexGrow: 1 }}
                 placeholder="请输入账号"
+                maxLength={11}
+                showCount={true}
                 value={addUserFrom.Account}
                 onChange={(e) => {
                   setAddUserFrom({

src/page/Meeting/index.module.scss

@@ -662,4 +662,33 @@
     justify-content: flex-end;
     margin-top: 20px;
   }
+}
+
+// 共享文件
+.sharedFilesModel {
+  >div:nth-child(1) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    >span {
+      color: #EEEEEE;
+      font-size: 20px;
+    }
+
+    >div {
+      display: flex;
+      align-items: center;
+
+      >span {
+        margin-right: 20px;
+        cursor: pointer;
+        font-size: 26px;
+      }
+    }
+  }
+
+  >div:nth-child(2) {
+    margin: 20px 0;
+  }
 }

src/page/Meeting/index.tsx

@@ -6,11 +6,14 @@ import { Swiper, SwiperSlide } from 'swiper/react';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
-import { Button, Input, Popover, Modal, Checkbox, message, Select, Slider } from "antd";
+import { Button, Input, Popover, Modal, Checkbox, message, Select, Slider, Table, Pagination as AntdPagination } from "antd";
-import { SearchOutlined } from '@ant-design/icons';
+import { DeleteOutlined, FolderOutlined, ProfileOutlined, ReloadOutlined, SearchOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { thumbImageBufferToBase64 } from '@/utils/package/base64'
 import { storage } from '@/utils';
+import { GetRoomFile, PostRoomFile, DeleteRoomFile, GetRoomUpFileurl, GetRoomFileDwUrl } from '@/api/Meeting';
+import axios from 'axios';
+const { Column } = Table
 const Meeting: React.FC = () => {
   const navigate = useNavigate();
   const { state } = useLocation();
@@ -18,8 +21,13 @@ const Meeting: React.FC = () => {
     userList: false,
     userChatList: false,
   })
+  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
   const [isSharedScreenModal, setIsSharedScreenModal] = useState(false);
+  const [isInit, setIsInit] = useState(true);
+  const [user, setUser] = useState<any>({});
   const [isStupWizard, setIsStupWizard] = useState(false);
+  const [showRowSelection, setShowRowSelection] = useState(false);
+  const [isSharedFilesModel, setIsSharedFilesModel] = useState(false);
   const [sharedScreenList, setSharedScreenList] = useState<any>([]);
   const [sharedScreenItem, setSharedScreenItem] = useState<any>('');
   const [footerList, setFooterList] = useState([
@@ -89,6 +97,14 @@ const Meeting: React.FC = () => {
     currentDevice: {},
     currentVolume: 0,
   });
+  const [fileList, setFileList] = useState({
+    data: [],
+    keyword: '',
+    total: 0,
+    pageIndex: 1,
+    pageSize: 10,
+  })
+
   const [stepsStatus, setStepsStatus] = useState<boolean>(true);
   const [isVideoLoad, setIsVideoLoad] = useState<boolean>(false);
   const [list] = useState<number[]>([1, 2, 3, 4, 5, 6, 7])
@@ -96,15 +112,20 @@ const Meeting: React.FC = () => {
   const [videoID, setVideoID] = useState('')
 
   useEffect(() => {
-    const user = JSON.parse(storage.getItem('user') as string);
+    if (isInit) {
-    // window.electron.setJoinChannel({
+      setUser(JSON.parse(storage.getItem('user') as string))
-    //   channelId: state.channelId,
+      // window.electron.setJoinChannel({
-    //   userid: user.userName,
+      //   channelId: state.channelId,
-    //   token: state.token,
+      //   userid: user.userName,
-    // })
+      //   token: state.token,
-  }, []);
+      // })
+      setIsInit(false)
+    } else {
+      getRoomFile()
+    }
+  }, [fileList.pageIndex]);
 
-  const changeStatusList = (row: any, itemIndex: number, rowIndex: number): void => {
+  const changeStatusList = async (row: any, itemIndex: number, rowIndex: number): Promise<void> => {
     const footerListTemplate = [...footerList]
     setFooterListIndex({
       itemIndex,
@@ -172,6 +193,10 @@ const Meeting: React.FC = () => {
         setFooterList(footerListTemplate)
         window.electron.stopRecording()
         break;
+      case '共享文件':
+        await getRoomFile()
+        setIsSharedFilesModel(true)
+        break;
     }
   }
 
@@ -222,6 +247,28 @@ const Meeting: React.FC = () => {
     })
   }
 
+  const getRoomFile = async (): Promise<void> => {
+    await GetRoomFile({
+      pageIndex: fileList.pageIndex,
+      pageSize: fileList.pageSize,
+      keyword: fileList.keyword,
+      roomId: state.channelId
+    }).then(res => {
+      if (res.code === 200) {
+        setFileList({
+          ...fileList,
+          data: res.data.items.map((item: any) => {
+            return {
+              ...item,
+              key: item.id,
+            }
+          }),
+          total: res.data.total
+        })
+      }
+    })
+  }
+
   return (
     <>
       <div className={styles.meeting}>
@@ -261,10 +308,10 @@ const Meeting: React.FC = () => {
                   }}
                   onSlideChange={() => { }}
                 >
-                  {list.map((item) =>
+                  {list.map((item, index) =>
                     <SwiperSlide key={item}>
                       <div className={styles.meetingContentSwiperCard}>
-                        <div className={styles.meetingContentSwiperCardVdeio} id={videoID}></div>
+                        <div className={styles.meetingContentSwiperCardVdeio} id={`video-${index}`}></div>
                         {meetingContentUser()}
                       </div>
                     </SwiperSlide>
@@ -519,6 +566,161 @@ const Meeting: React.FC = () => {
           </div>
         </div>
       </Modal>
+      <Modal
+        title="共享文件"
+        open={isSharedFilesModel}
+        footer={null}
+        centered
+        width={'60vw'}
+        onCancel={() => setIsSharedFilesModel(false)}
+        maskClosable
+      >
+        <div>
+          <div className={styles.sharedFilesModel}>
+            <div>
+              <span>共{fileList.total}个文件</span>
+              <div style={{ color: 'white' }}>
+                <Input
+                  placeholder="搜索"
+                  style={{ width: '200px' }}
+                  prefix={<SearchOutlined style={{ color: 'white' }} />}
+                  onChange={(e) => {
+                    setFileList({
+                      ...fileList,
+                      keyword: e.target.value
+                    })
+                  }}
+                  onBlur={() => {
+                    if (fileList.pageIndex === 1) {
+                      getRoomFile()
+                    } else {
+                      setFileList({
+                        ...fileList,
+                        pageIndex: 1
+                      })
+                    }
+                  }}
+                />
+                <ReloadOutlined title='刷新' onClick={() => {
+                  if (fileList.pageIndex === 1) {
+                    getRoomFile()
+                  } else {
+                    setFileList({
+                      ...fileList,
+                      pageIndex: 1
+                    })
+                  }
+                }} />
+                <ProfileOutlined title={showRowSelection ? '取消框选' : '显示框选'} onClick={() => {
+                  setShowRowSelection(!showRowSelection)
+                }} style={{ color: showRowSelection ? '#5575F2' : 'white' }} />
+                {showRowSelection ? <DeleteOutlined title='删除' onClick={() => {
+                  if (selectedRowKeys.length) {
+                    DeleteRoomFile(selectedRowKeys).then(res => {
+                      if (res.code === 200) {
+                        message.success('删除成功！')
+                        getRoomFile()
+                      }
+                    })
+                  } else {
+                    message.error('请选择文件！')
+                  }
+                }} /> : null}
+                <Button type="primary" style={{ backgroundColor: '#31353A' }}
+                  onClick={() => {
+                    const file = document.createElement("input") as any;
+                    file.type = "file";
+                    file.onchange = async () => {
+                      const fileInfo = file.files[0];
+                      const fileType = fileInfo.name.split('.');
+                      const fileTypeName = fileType[fileType.length - 1];
+                      await GetRoomUpFileurl(state.channelId, fileTypeName).then(async res => {
+                        const formData = new FormData();
+                        formData.append("name", fileInfo.name);
+                        formData.append("OSSAccessKeyId", res.data.ossAccessKeyId);
+                        formData.append("key", res.data.key);
+                        formData.append("policy", res.data.policy);
+                        formData.append("signature", res.data.signature);
+                        formData.append("success_action_status", res.data.success_action_status);
+                        formData.append("file", fileInfo);
+                        await axios.post(res.data.host, formData, {
+                          headers: {
+                            "Content-Type": "multipart/form-data",
+                            "Authorization": `Bearer ${user.token}`
+                          },
+                          withCredentials: false
+                        })
+                        await PostRoomFile({
+                          fileUrl: res.data.key,
+                          size: fileInfo.size,
+                          fileName: fileInfo.name,
+                          roomId: state.channelId
+                        })
+                        getRoomFile()
+                      })
+                    };
+                    file.click();
+                  }}
+                >上传</Button>
+              </div>
+            </div>
+            <div>
+              <Table
+                size={'small'}
+                rowSelection={showRowSelection ? {
+                  selectedRowKeys,
+                  onChange: (newSelectedRowKeys: React.Key[]) => {
+                    setSelectedRowKeys(newSelectedRowKeys);
+                  }
+                } : undefined}
+                dataSource={fileList.data}
+                pagination={false}
+                scroll={{ y: '40vh' }}
+                style={{ width: '100%' }}
+              >
+                <Column title="文件" dataIndex="fileName" key="fileName" width={140} />
+                <Column title="更新时间" dataIndex="modifyTime" key="modifyTime" width={200} />
+                <Column title="大小" render={(item) => (
+                  <>
+                    <span>{item.size / 1024 > 1000 ? (item.size / (1024 * 1024)).toFixed(2) + 'MB' : (item.size / 1024).toFixed(2) + 'KB'}</span>
+                  </>
+                )} />
+                <Column title="上传者" dataIndex="userName" key="userName" />
+                <Column title="下载次数"
+                  render={(item) => (
+                    <>
+                      <span>{item.downloadCount}次</span>
+                    </>
+                  )}
+                />
+                <Column title="操作" render={(item) => (
+                  <>
+                    <VerticalAlignBottomOutlined title='下载' style={{ color: '#5575F2', cursor: 'pointer' }} onClick={() => {
+                      GetRoomFileDwUrl(item.fileUrl).then(res => {
+                        if (res.code === 200) {
+                          window.electron.dwFile(res.data)
+                        }
+                      })
+                    }} />
+                    {/* <FolderOutlined title='文件' style={{ color: '#FFA000', cursor: 'pointer' }} /> */}
+                  </>
+                )} />
+              </Table>
+              <div style={{ display: 'flex', justifyContent: 'center', marginTop: '10px' }}>
+                <AntdPagination size="small" total={fileList.total} onChange={(e) => {
+                  setFileList({
+                    ...fileList,
+                    pageIndex: e
+                  })
+                }} pageSize={fileList.pageSize} current={fileList.pageIndex} hideOnSinglePage={true} />
+              </div>
+            </div>
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
+
+          </div>
+        </div>
+      </Modal>
     </>
   )
 }

src/render.d.ts

@@ -21,6 +21,7 @@ export interface IElectronAPI {
   muteLocalAudioStream: (mute: boolean) => void;
   muteLocalVideoStream: (mute: boolean) => void;
   setWriteText: (text: string) => void;
+  dwFile: (url: string) => void;
 }
 
 declare global {

src/utils/styles/App.css

@@ -1,239 +0,0 @@
-.ant-select .ant-select-selector {
-  background-color: #28282C !important;
-  border: 1px solid #404145 !important;
-  box-sizing: border-box;
-}
-
-.ant-select .ant-select-selector .ant-select-selection-item {
-  color: white;
-}
-
-.ant-select .ant-select-selector .ant-select-selection-placeholder {
-  color: #EEEEEE;
-}
-
-.ant-select .ant-select-suffix {
-  color: white !important;
-}
-
-.ant-input {
-  background-color: #28282C !important;
-  border: 1px solid #404145;
-  color: white !important;
-  box-sizing: border-box;
-}
-
-.ant-input::placeholder {
-  color: #E6E6E6;
-}
-
-.ant-input-affix-wrapper {
-  background-color: #28282C !important;
-  border: 1px solid #404145;
-  box-sizing: border-box;
-}
-
-.ant-input-affix-wrapper .ant-input {
-  color: white !important;
-}
-
-.ant-input-affix-wrapper .ant-input-password-icon {
-  color: white !important;
-}
-
-.ant-input-affix-wrapper .ant-input-show-count-suffix {
-  color: white;
-}
-
-.m-ant-btn.ant-btn {
-  background-color: #3F51B5;
-  box-shadow: none;
-}
-
-.m-ant-btn.ant-btn:hover {
-  background-color: #606fc7 !important;
-}
-
-.m-ant-btn.ant-btn:active {
-  background-color: #32408f !important;
-}
-
-.m-border-ant-button.ant-btn {
-  border: 1px solid #5575F2 !important;
-  color: #5575F2 !important;
-  background-color: #1E1E1F !important;
-}
-
-.ant-checkbox-wrapper {
-  color: #848484;
-}
-
-.ant-checkbox-wrapper .ant-checkbox .ant-checkbox-inner {
-  background-color: #28282C !important;
-  border: 1px solid #404145;
-}
-
-.ant-checkbox-wrapper .ant-checkbox .ant-checkbox-inner::after {
-  background-color: #3F51B5 !important;
-}
-
-.ant-checkbox-wrapper .ant-checkbox-checked .ant-checkbox-inner {
-  background-color: #3F51B5 !important;
-  border: 1px solid #404145;
-}
-
-.ant-table {
-  background-color: #1B1E24 !important;
-  border-radius: 0px !important;
-}
-
-.ant-table .ant-table-header .ant-table-cell {
-  background-color: #1B1E24;
-  color: #808080;
-  box-shadow: none;
-  border-bottom: 1px solid transparent;
-}
-
-.ant-table .ant-table-header .ant-table-cell::before {
-  visibility: hidden;
-}
-
-.ant-table .ant-table-body .ant-table-row {
-  background-color: #16191e;
-  color: white;
-}
-
-.ant-table .ant-table-body .ant-table-row .ant-table-cell {
-  border-bottom: 1px solid #292F3A;
-}
-
-.ant-table .ant-table-body .ant-table-row-selected .ant-table-cell {
-  background-color: #0d0f12 !important;
-  color: white;
-}
-
-.ant-table .ant-table-body .ant-table-cell-row-hover {
-  background-color: #0d0f12 !important;
-}
-
-.ant-table .ant-table-body .ant-table-placeholder {
-  background: transparent !important;
-}
-
-.ant-table .ant-table-body .ant-table-placeholder .ant-table-cell {
-  border: none;
-}
-
-.ant-pagination {
-  -webkit-app-region: no-drag;
-}
-
-.ant-pagination .ant-pagination-prev {
-  margin-right: 10px !important;
-}
-
-.ant-pagination .ant-pagination-prev,
-.ant-pagination .ant-pagination-next {
-  width: 30px !important;
-  height: 30px !important;
-  border-radius: 50%;
-  background: #20242C;
-}
-
-.ant-pagination .ant-pagination-prev .anticon,
-.ant-pagination .ant-pagination-next .anticon {
-  color: #808080;
-}
-
-.ant-pagination .ant-pagination-item {
-  width: 30px !important;
-  height: 30px !important;
-  line-height: 30px !important;
-  border-radius: 50%;
-  background: #20242C !important;
-  margin-right: 10px !important;
-}
-
-.ant-pagination .ant-pagination-item > a {
-  color: #878787 !important;
-}
-
-.ant-pagination .ant-pagination-item:hover {
-  background: #5575F2 !important;
-  border: none;
-  box-shadow: 0px 0px 10px 0px #66C8FF;
-}
-
-.ant-pagination .ant-pagination-item:hover a {
-  color: black !important;
-}
-
-.ant-pagination .ant-pagination-item-active {
-  background: #5575F2 !important;
-  border: none;
-  box-shadow: 0px 0px 10px 0px #66C8FF;
-}
-
-.ant-pagination .ant-pagination-item-active a {
-  color: black !important;
-}
-
-.ant-popover {
-  -webkit-app-region: no-drag;
-}
-
-.ant-popover:not(.ant-popconfirm) .ant-popover-arrow::before {
-  background-color: #07090B !important;
-}
-
-.ant-popover:not(.ant-popconfirm) .ant-popover-content .ant-popover-inner {
-  background-color: #07090B;
-}
-
-.ant-modal-mask {
-  background-color: rgba(0, 0, 0, 0.25) !important;
-}
-
-.ant-modal {
-  -webkit-app-region: no-drag;
-}
-
-.ant-modal .ant-modal-content {
-  background-color: #07090B;
-}
-
-.ant-modal .ant-modal-content .ant-modal-header {
-  background-color: #07090B;
-}
-
-.ant-modal .ant-modal-content .ant-modal-header .ant-modal-title {
-  text-align: center;
-  color: #EEEEEE;
-  font-weight: bold;
-}
-
-.ant-modal .ant-modal-content .ant-modal-body {
-  max-height: 70vh;
-  overflow-y: auto;
-}
-
-.ant-slider:hover .ant-slider-rail {
-  background-color: white;
-}
-
-.ant-slider .ant-slider-rail {
-  background-color: #D9D9D9;
-}
-
-.ant-slider .ant-slider-track {
-  background-color: #3672E9;
-}
-
-.ant-slider .ant-slider-handle::after {
-  background-color: #3672E9;
-  box-shadow: 0 0 0 2px #3672E9;
-}
-
-.ant-empty .ant-empty-description {
-  color: #808080;
-}

src/utils/styles/App.min.css

@@ -1 +0,0 @@
-.ant-select .ant-select-selector{background-color:#28282C !important;border:1px solid #404145 !important;box-sizing:border-box}.ant-select .ant-select-selector .ant-select-selection-item{color:white}.ant-select .ant-select-selector .ant-select-selection-placeholder{color:#EEEEEE}.ant-select .ant-select-suffix{color:white !important}.ant-input{background-color:#28282C !important;border:1px solid #404145;color:white !important;box-sizing:border-box}.ant-input::placeholder{color:#E6E6E6}.ant-input-affix-wrapper{background-color:#28282C !important;border:1px solid #404145;box-sizing:border-box}.ant-input-affix-wrapper .ant-input{color:white !important}.ant-input-affix-wrapper .ant-input-password-icon{color:white !important}.ant-input-affix-wrapper .ant-input-show-count-suffix{color:white}.m-ant-btn.ant-btn{background-color:#3F51B5;box-shadow:none}.m-ant-btn.ant-btn:hover{background-color:#606fc7 !important}.m-ant-btn.ant-btn:active{background-color:#32408f !important}.m-border-ant-button.ant-btn{border:1px solid #5575F2 !important;color:#5575F2 !important;background-color:#1E1E1F !important}.ant-checkbox-wrapper{color:#848484}.ant-checkbox-wrapper .ant-checkbox .ant-checkbox-inner{background-color:#28282C !important;border:1px solid #404145}.ant-checkbox-wrapper .ant-checkbox .ant-checkbox-inner::after{background-color:#3F51B5 !important}.ant-checkbox-wrapper .ant-checkbox-checked .ant-checkbox-inner{background-color:#3F51B5 !important;border:1px solid #404145}.ant-table{background-color:#1B1E24 !important;border-radius:0px !important}.ant-table .ant-table-header .ant-table-cell{background-color:#1B1E24;color:#808080;box-shadow:none;border-bottom:1px solid transparent}.ant-table .ant-table-header .ant-table-cell::before{visibility:hidden}.ant-table .ant-table-body .ant-table-row{background-color:#16191e;color:white}.ant-table .ant-table-body .ant-table-row .ant-table-cell{border-bottom:1px solid #292F3A}.ant-table .ant-table-body .ant-table-row-selected .ant-table-cell{background-color:#0d0f12 !important;color:white}.ant-table .ant-table-body .ant-table-cell-row-hover{background-color:#0d0f12 !important}.ant-table .ant-table-body .ant-table-placeholder{background:transparent !important}.ant-table .ant-table-body .ant-table-placeholder .ant-table-cell{border:none}.ant-pagination{-webkit-app-region:no-drag}.ant-pagination .ant-pagination-prev{margin-right:10px !important}.ant-pagination .ant-pagination-prev,.ant-pagination .ant-pagination-next{width:30px !important;height:30px !important;border-radius:50%;background:#20242C}.ant-pagination .ant-pagination-prev .anticon,.ant-pagination .ant-pagination-next .anticon{color:#808080}.ant-pagination .ant-pagination-item{width:30px !important;height:30px !important;line-height:30px !important;border-radius:50%;background:#20242C !important;margin-right:10px !important}.ant-pagination .ant-pagination-item>a{color:#878787 !important}.ant-pagination .ant-pagination-item:hover{background:#5575F2 !important;border:none;box-shadow:0px 0px 10px 0px #66C8FF}.ant-pagination .ant-pagination-item:hover a{color:black !important}.ant-pagination .ant-pagination-item-active{background:#5575F2 !important;border:none;box-shadow:0px 0px 10px 0px #66C8FF}.ant-pagination .ant-pagination-item-active a{color:black !important}.ant-popover{-webkit-app-region:no-drag}.ant-popover:not(.ant-popconfirm) .ant-popover-arrow::before{background-color:#07090B !important}.ant-popover:not(.ant-popconfirm) .ant-popover-content .ant-popover-inner{background-color:#07090B}.ant-modal-mask{background-color:rgba(0,0,0,0.25) !important}.ant-modal{-webkit-app-region:no-drag}.ant-modal .ant-modal-content{background-color:#07090B}.ant-modal .ant-modal-content .ant-modal-header{background-color:#07090B}.ant-modal .ant-modal-content .ant-modal-header .ant-modal-title{text-align:center;color:#EEEEEE;font-weight:bold}.ant-modal .ant-modal-content .ant-modal-body{max-height:70vh;overflow-y:auto}.ant-slider:hover .ant-slider-rail{background-color:#fff}.ant-slider .ant-slider-rail{background-color:#D9D9D9}.ant-slider .ant-slider-track{background-color:#3672E9}.ant-slider .ant-slider-handle::after{background-color:#3672E9;box-shadow:0 0 0 2px #3672E9}.ant-empty .ant-empty-description{color:#808080}

src/utils/styles/App.scss

@@ -150,6 +150,12 @@ $pagination-hover-background-color: #5575F2;
   }
 }
 
+:where(.css-dev-only-do-not-override-98ntnt).ant-table-wrapper .ant-table-tbody>tr.ant-table-placeholder:hover>th,
+:where(.css-dev-only-do-not-override-98ntnt).ant-table-wrapper .ant-table-tbody>tr.ant-table-placeholder:hover>td,
+:where(.css-dev-only-do-not-override-98ntnt).ant-table-wrapper .ant-table-tbody>tr.ant-table-placeholder {
+  background: transparent;
+}
+
 // pagination
 .ant-pagination {
   -webkit-app-region: no-drag;
@@ -231,6 +237,10 @@ $pagination-hover-background-color: #5575F2;
 .ant-modal {
   -webkit-app-region: no-drag;
 
+  .ant-modal-close-icon {
+    color: white;
+  }
+
   .ant-modal-content {
     background-color: #07090B;