src/components/Code/index.tsx

@@ -0,0 +1,48 @@
+import ImageUrl from '@/utils/package/imageUrl';
+import { Empty, Popover } from 'antd';
+import { GetQrcode } from '@/api/Home/Index';
+import { memo, useImperativeHandle, forwardRef, useState } from "react";
+const Code = forwardRef((props: any, ref: any) => {
+  console.log(props);
+  useImperativeHandle(ref, () => ({
+    getData: () => {
+
+    }
+  }))
+  const [baseImage, setBaseImage] = useState('');
+  const [roomNum, setRoomNum] = useState(props.roomNum);
+  return (
+    <>
+      <Popover
+        placement="bottom"
+        onOpenChange={(e: boolean) => {
+          setBaseImage('')
+          if (e) {
+            GetQrcode(roomNum, import.meta.env.VITE_ENV === 'development' ? 'trial' : 'release').then(res => {
+              if (res.code === 200) {
+                setBaseImage(res.data)
+              }
+            })
+          }
+        }}
+        content={
+          baseImage ? <div>
+            <img style={{ width: '200px', margin: '0 auto' }} src={`data:image/png;base64,${baseImage}`} alt="" />
+            <div style={{ color: 'white', textAlign: 'center', fontSize: '16px', marginTop: '10px' }}>
+              <span>微信中长按图片识别小程序码</span><br />
+              <span>加入会议</span>
+            </div>
+          </div> : <div>
+            <Empty description={'二维码加载中，请稍后'} />
+          </div>
+        }
+      >
+        <div title='小程序'>
+          <img src={ImageUrl.icon55} alt="" style={{ width: '16px' }} />
+        </div>
+      </Popover>
+    </>
+  )
+})
+
+export default memo(Code)

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

@@ -121,14 +121,6 @@
                 font-size: 14px;
               }
             }
-
-            >div:nth-child(2) {
-              cursor: pointer;
-
-              >img {
-                width: 16px;
-              }
-            }
           }
 
           >div:nth-child(2) {

src/page/Home/Index/index.tsx

@@ -2,7 +2,7 @@ import styles from '@/page/Home/Index/index.module.scss'
 import { useEffect, useState, useRef } from "react";
 import Operation from '@/components/Operation';
 import { Button, Input, Modal, Pagination, Empty, message, Popover, Popconfirm, DatePicker, Select, Radio } from "antd";
-import { GetRoom, PostRoom, GetCheckoutRoomNum, GetRoomRtcToken, DeleteRoom, GetRecord, PostRoomInfo, GetQrcode } from '@/api/Home/Index';
+import { GetRoom, PostRoom, GetCheckoutRoomNum, GetRoomRtcToken, DeleteRoom, GetRecord, PostRoomInfo } from '@/api/Home/Index';
 import ImageUrl from '@/utils/package/imageUrl'
 import { ExclamationCircleFilled, ReloadOutlined } from '@ant-design/icons';
 import JoinSetting from '@/components/JoinSetting';
@@ -15,6 +15,7 @@ import StupWizard from '@/components/StupWizard';
 import { GetSubDpList } from '@/api/Home/User';
 import FeedBackModel from '@/components/FeedBackModel';
 import { PostHomeVerLog } from '@/api/Meeting';
+import Code from '@/components/Code';
 const { setInterval, clearInterval } = require('timers');
 const fs = require('fs').promises;
 const { exec } = require('child_process');
@@ -47,7 +48,6 @@ const Index: React.FC = () => {
   const [timeData, setTimeData] = useState<any>([]);
   const [isCreateRoom, setIsCreateRoom] = useState<boolean>(false);
   const [allowAnonymous, setAllowAnonymous] = useState(true);
-  const [baseImage, setBaseImage] = useState('');
   const userInfo = JSON.parse(storage.getItem('user') as string)
   useEffect(() => {
     setUser(userInfo)
@@ -246,35 +246,7 @@ const Index: React.FC = () => {
                         <span>{item.roomNum}</span>
                         <img src={ImageUrl.icon10} alt="" />
                       </div>
-                      <Popover
-                        placement="bottom"
-                        onOpenChange={(e: boolean) => {
-                          setBaseImage('')
-                          if (e) {
-                            GetQrcode(item.roomNum, import.meta.env.VITE_ENV === 'development' ? 'trial' : 'release').then(res => {
-                              if (res.code === 200) {
-                                setBaseImage(res.data)
-                              }
-                            })
-                          }
-                        }}
-                        content={
-                          baseImage ? <div>
-                            <img style={{ width: '200px', margin: '0 auto' }} src={`data:image/png;base64,${baseImage}`} alt="" />
-                            <div style={{ color: 'white', textAlign: 'center', fontSize: '16px', marginTop: '10px' }}>
-                              <span>微信中长按图片识别小程序码</span><br />
-                              <span>加入会议</span>
-                            </div>
-                          </div> : <div>
-                            <Empty description={'二维码加载中，请稍后'} />
-                          </div>
-                        }
-                      >
-                        <div title='小程序'>
-                          <img src={ImageUrl.icon55} alt="" />
-                        </div>
-                      </Popover>
-
+                      <Code roomNum={item.roomNum}></Code>
                     </div>
                     <div>
                       {role.ID.includes(userInfo.roleId) ? <Popover

src/page/Meeting/index.module.scss

@@ -444,8 +444,8 @@
           color: white;
           border: 1px white solid;
           font-size: 20px;
-          width: 30px;
-          height: 30px;
+          width: 25px;
+          height: 25px;
           display: flex;
           justify-content: center;
           align-items: center;

src/page/Meeting/index.tsx

@@ -26,6 +26,7 @@ import MeetingDisconnected from '@/components/MeetingDisconnected';
 import SingIn from '@/components/SingIn';
 import UserName from '@/components/UserName';
 import { GetRoomRtcToken } from '@/api/Home/Index';
+import Code from '@/components/Code';
 const { setTimeout, setInterval, clearTimeout, clearInterval } = require('timers');
 const { confirm } = Modal;
 const { exec } = require('child_process');
@@ -2644,7 +2645,9 @@ const Meeting: React.FC = () => {
             </Popover>}
             <div>{changeCurrentSeconds()}</div>
           </div>
-          <div>会议号：{state.channelId} 会议名称：{state.roomName}</div>
+          <div style={{ display: 'flex', alignItems: 'center' }}>会议号：{state.channelId} 会议名称：{state.roomName}
+            <span className='drag' style={{ marginTop: '2px', marginLeft: '4px' }}><Code roomNum={state.channelId}></Code></span>
+          </div>
           <div className='drag'>
             <Popover
               content={
@@ -2943,7 +2946,7 @@ const Meeting: React.FC = () => {
                               <div>
                                 <div><Avatar name={item.userName} /></div>
                                 <span>
-                                  <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '80px' }} title={item.userName}>{item.userName}</span>{item.uid === user.uid ? '(我)' : ''}
+                                  <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: role.ID.includes(item.roleId) || item.isRoomManager ? '50px' : '80px' }} title={item.userName}>{item.userName}</span>{item.uid === user.uid ? '(我)' : ''}
                                   {role.ID.includes(item.roleId) || item.isRoomManager ?
                                     <span style={{ color: '#02B188', marginLeft: '4px' }}>
                                       {role.ID.includes(item.roleId) ? '管理员' : '发言人'}