main.js

@@ -181,6 +181,7 @@ app.on('ready', () => {
                 connection.off('DriverList');
                 connection.off('SetDriver');
                 connection.off('ShowDriverList');
+                connection.off('ModifyNickName');
             }
         });
         ipcMain.handle('onStop', (event) => {
@@ -370,6 +371,14 @@ app.on('ready', () => {
                         driversJsonString
                     })
                 });
+                // 修改用户名称
+                connection.on("ModifyNickName", (uid, nickName) => {
+                    mainWindow.webContents.send('onSignalr', {
+                        key: 'ModifyNickName',
+                        uid,
+                        nickName
+                    })
+                });
             }
         });
         // 放大缩小退出窗口

src/api/Meeting/index.ts

@@ -148,3 +148,10 @@ export const PostRoomSingnIn = (data: any) =>
     method: 'post',
     data
   })
+
+export const PutAlterUname = (data: any) =>
+  request({
+    url: `/room/alter-uname`,
+    method: 'put',
+    data
+  })

src/components/UserName/index.module.scss

@@ -0,0 +1,8 @@
+.userNameModal {
+
+  .userNameModalFooter {
+    margin-top: 10px;
+    display: flex;
+    justify-content: center;
+  }
+}

src/components/UserName/index.tsx

@@ -0,0 +1,69 @@
+import { PutAlterUname } from '@/api/Meeting';
+import styles from '@/components/UserName/index.module.scss'
+import { storage } from '@/utils';
+import { Button, Input, message, Modal } from 'antd';
+import { useState, useImperativeHandle, forwardRef } from "react";
+const UserName = forwardRef((props: any, ref: any) => {
+  useImperativeHandle(ref, () => ({
+    changeModal: (str: string) => {
+      setUserName(str)
+      setUserNameModal(true)
+    }
+  }))
+  const [userNameModal, setUserNameModal] = useState(false);
+  const [userName, setUserName] = useState('');
+  return (
+    <>
+      <Modal
+        title="修改用户名"
+        open={userNameModal}
+        footer={null}
+        destroyOnClose={true}
+        onCancel={() => setUserNameModal(false)}
+        centered
+        width={'300px'}
+      >
+        <div className={styles.userNameModal}>
+          <div className={styles.userNameModalContent}>
+            <Input
+              placeholder="请输入用户名称"
+              style={{ width: '100%' }}
+              value={userName}
+              onChange={(e) => {
+                setUserName(e.target.value)
+              }}
+            />
+          </div>
+          <div className={styles.userNameModalFooter}>
+            <Button type="primary" style={{ backgroundColor: 'rgb(16,20,24)', marginRight: '14px' }}
+              onClick={() => setUserNameModal(false)}>关闭</Button>
+            <Button type="primary"
+              onClick={async () => {
+                const stateInfo = await JSON.parse(storage.getItem('stateInfo') as string);
+                const userInfo = await JSON.parse(storage.getItem('user') as string);
+                if (userName) {
+                  PutAlterUname({
+                    nickName: userName,
+                    roomNum: stateInfo.channelId,
+                    uid: userInfo.uid,
+                  }).then((res) => {
+                    if (res.code === 200) {
+                      message.success('修改成功')
+                      setUserNameModal(false)
+                    }
+                  })
+                } else {
+                  message.error('请输入用户名')
+                }
+              }}
+              className='m-ant-btn'>
+              修改
+            </Button>
+          </div>
+        </div>
+      </Modal>
+    </>
+  )
+})
+
+export default UserName

src/page/Meeting/index.tsx

@@ -24,6 +24,7 @@ import { fixWebmDuration } from "webm-duration-fix-buffer";
 import { getKeyOpenChildWindow, setKeyOpenChildWindow } from '@/utils/package/public';
 import MeetingDisconnected from '@/components/MeetingDisconnected';
 import SingIn from '@/components/SingIn';
+import UserName from '@/components/UserName';
 const { setTimeout, setInterval, clearTimeout, clearInterval } = require('timers');
 const { confirm } = Modal;
 const { exec } = require('child_process');
@@ -39,6 +40,7 @@ const Meeting: React.FC = () => {
   const equipmentManagementRef = useRef<any>();
   const meetingDisconnectedRef = useRef<any>();
   const singInRef = useRef<any>();
+  const userNameRef = useRef<any>();
   const [isClicked, setIsClicked] = useState(false);
   const [statusList, setStatusList] = useState({
     userList: false,
@@ -855,6 +857,10 @@ const Meeting: React.FC = () => {
             }
           }
           break;
+        // 修改用户名称
+        case 'ModifyNickName':
+          setAllUserListData('ModifyNickName', item)
+          break;
       }
     })
     return () => {
@@ -1276,6 +1282,15 @@ const Meeting: React.FC = () => {
           return res
         })
         break;
+      case 'ModifyNickName':
+        setRoomUserList((res: any) => {
+          let userItem = res.find((row: any) => row.uid === item.uid)
+          if (userItem) {
+            userItem.userName = item.nickName
+          }
+          return res
+        })
+        break;
     }
     changeAgoraDevice()
   }
@@ -2487,6 +2502,14 @@ const Meeting: React.FC = () => {
                                           getRoomKickout(state.channelId, item.uid, item.userName)
                                         }}
                                       >移出会议</Button>
+                                      <Button
+                                        type="primary"
+                                        className='m-ant-btn'
+                                        style={{ width: '100%' }}
+                                        onClick={() => {
+                                          userNameRef.current.changeModal(item.userName)
+                                        }}
+                                      >修改用户名</Button>
                                     </div>
                                   }>
                                     <EllipsisOutlined style={{ color: '#fff', fontSize: '20px' }} />
@@ -2995,6 +3018,7 @@ const Meeting: React.FC = () => {
       <EquipmentManagement ref={equipmentManagementRef} />
       <MeetingDisconnected ref={meetingDisconnectedRef} />
       <SingIn ref={singInRef} />
+      <UserName ref={userNameRef} />
     </>
   )
 }