优化

src/App.tsx

@@ -9,8 +9,8 @@ import Login from '@/page/Login/index'
 import Meeting from '@/page/Meeting/index'
 import NotFound from '@/page/NotFound/index'
 import { storage } from '@/utils'
-import { Spin } from "antd";
-import { onInvitation, onInvoke, onReconnected } from "@/utils/package/signalr";
+import { Spin, message } from "antd";
+import { onInvitation, onInvoke, onReconnected, onStart } from "@/utils/package/signalr";
 import JoinMeetingModal from "./components/JoinMeetingModal";
 import * as CryptoJS from 'crypto-js';
 import { PostLogin } from "@/api/Login";
@@ -75,6 +75,8 @@ const App: React.FC = () => {
       });
     }
     window.addEventListener('resize', handleResize);
+    window.addEventListener('online', handleNetworkChange);
+    window.addEventListener('offline', handleNetworkChange);
     const originalSetItem = window.localStorage.setItem;
     window.localStorage.setItem = function (key, value) {
       originalSetItem.call(this, key, value);
@@ -88,6 +90,8 @@ const App: React.FC = () => {
     return () => {
       window.removeEventListener('resize', handleResize);
       window.removeEventListener('customStorageChange', handleCustomStorageChange);
+      window.removeEventListener('online', handleNetworkChange);
+      window.removeEventListener('offline', handleNetworkChange);
     };
   }, []);
   useEffect(() => {
@@ -126,7 +130,18 @@ const App: React.FC = () => {
     }
   };
 
-
+  const handleNetworkChange = (): void => {
+    if (location.hash.indexOf('/meeting') !== -1) {
+      if (navigator.onLine) {
+        message.success('网络已恢复。')
+        setTimeout(async () => {
+          await onStart()
+        }, 1000)
+      } else {
+        message.error('网络已断开!')
+      }
+    }
+  }
   return (
     <>
       <Routes>

src/page/Home/Index/index.module.scss

@@ -137,4 +137,14 @@
       justify-content: center;
     }
   }
+}
+
+.letterSpacing {
+  >input {
+    letter-spacing: 10px;
+
+    &::placeholder {
+      letter-spacing: 0;
+    }
+  }
 }

src/page/Home/Index/index.tsx

@@ -175,6 +175,7 @@ const Index: React.FC = () => {
             <Input
               placeholder="请输入房间号"
               style={{ marginBottom: '14px' }}
+              className={styles.letterSpacing}
               showCount
               maxLength={8}
               value={createRoomFrom.roomNum}

src/page/Meeting/index.module.scss

@@ -55,9 +55,11 @@
     height: calc(100% - 20px);
     z-index: 1;
     background-color: black;
-    color: white;
-    font-size: 16px;
     cursor: pointer;
+
+    >div {
+      transform: scale(2);
+    }
   }
 }
 
@@ -271,9 +273,7 @@
               position: absolute;
               left: 50%;
               top: 50%;
-              transform: translate(-50%, -50%);
-              font-size: 16px;
-              color: white;
+              transform: translate(-50%, -50%) scale(2);
             }
           }
         }
@@ -504,16 +504,6 @@
 
                 >div {
                   margin-left: 4px;
-                  width: 30px;
-                  height: 30px;
-                  overflow: hidden;
-                  border-radius: 50%;
-
-                  >img {
-                    width: 100%;
-                    height: 100%;
-                    object-fit: cover;
-                  }
                 }
               }
 

src/page/Meeting/index.tsx

@@ -590,7 +590,7 @@ const Meeting: React.FC = () => {
                       >
                         <div className={`${styles.meetingContentSwiperCardVdeio} ${currentVideoId === item.account ? styles.active : ''}`} id={`video-${item.account}`}>
                           <div className={styles.meetingContentSwiperCardVdeioLoading}>
-                            暂无视频
+                            <Avatar name={item.userName}/>
                           </div>
                         </div>
                         {meetingContentUser(item)}
@@ -1018,7 +1018,7 @@ const meetingContentError = (currentVideoId: any, item: any) => {
   return (
     <>
       <div className={`${styles.meetingContentError} ${currentVideoId === item.account ? styles.active : ''}`}>
-        暂无视频
+        <Avatar name={item.userName} />
       </div>
     </>
   )