fix: 优化

src/hooks/use-pull.ts

@@ -405,11 +405,11 @@ export function usePull() {
     }
   );
 
-  function initPull(data: {
-    roomId: string;
-    autolay?: boolean;
-    isRemoteDesk?: boolean;
-  }) {
+  function initRoomId(id: string) {
+    roomId.value = id;
+  }
+
+  function initPull(data: { autolay?: boolean; isRemoteDesk?: boolean }) {
     if (data.autolay === undefined) {
       autoplayVal.value = true;
     } else {
@@ -418,7 +418,7 @@ export function usePull() {
     isRemoteDesk.value = !!data.isRemoteDesk;
     initWs({
       isRemoteDesk: data.isRemoteDesk,
-      roomId: data.roomId,
+      roomId: roomId.value,
       isAnchor: false,
     });
   }
@@ -454,13 +454,13 @@ export function usePull() {
       window.$message.warning('请输入弹幕内容！');
       return;
     }
-    const instance = networkStore.wsMap.get(roomId);
+    const instance = networkStore.wsMap.get(roomId.value);
     if (!instance) return;
     const messageData: WsMessageType['data'] = {
       content: txt,
       content_type: WsMessageContentTypeEnum.txt,
       msg_type: DanmuMsgTypeEnum.reward,
-      live_room_id: Number(roomId),
+      live_room_id: Number(roomId.value),
       isBilibili: false,
     };
     instance.send({
@@ -481,14 +481,13 @@ export function usePull() {
       window.$message.warning('请输入弹幕内容！');
       return;
     }
-    console.log('sendDanmuTxt', roomId, txt);
-    const instance = networkStore.wsMap.get(roomId);
+    const instance = networkStore.wsMap.get(roomId.value);
     if (!instance) return;
     const messageData: WsMessageType['data'] = {
       content: txt,
       content_type: WsMessageContentTypeEnum.txt,
       msg_type: DanmuMsgTypeEnum.danmu,
-      live_room_id: Number(roomId),
+      live_room_id: Number(roomId.value),
       isBilibili: false,
     };
     instance.send({
@@ -510,14 +509,14 @@ export function usePull() {
       window.$message.warning('图片不能为空！');
       return;
     }
-    const instance = networkStore.wsMap.get(roomId);
+    const instance = networkStore.wsMap.get(roomId.value);
     if (!instance) return;
     const requestId = getRandomString(8);
     const messageData: WsMessageType['data'] = {
       content: url,
       content_type: WsMessageContentTypeEnum.img,
       msg_type: DanmuMsgTypeEnum.danmu,
-      live_room_id: Number(roomId),
+      live_room_id: Number(roomId.value),
       isBilibili: false,
     };
     instance.send({
@@ -554,5 +553,6 @@ export function usePull() {
     danmuStr,
     liveRoomInfo,
     anchorInfo,
+    initRoomId,
   };
 }

src/hooks/use-push.ts

@@ -14,7 +14,6 @@ import {
 import { useAppStore } from '@/store/app';
 import { useNetworkStore } from '@/store/network';
 import { useUserStore } from '@/store/user';
-import { ILiveRoom } from '@/types/ILiveRoom';
 import {
   WsConnectStatusEnum,
   WsMessageType,
@@ -39,7 +38,6 @@ export function usePush() {
   const roomId = ref('');
   const roomName = ref('');
   const danmuStr = ref('');
-  const liveRoomInfo = ref<ILiveRoom>();
   const localStream = ref<MediaStream>();
   const videoElArr = ref<HTMLVideoElement[]>([]);
   const msgIsFile = ref<WsMessageMsgIsFileEnum>(WsMessageMsgIsFileEnum.no);
@@ -168,8 +166,8 @@ export function usePush() {
           });
           await handleCreateUserLiveRoom();
         } else {
-          roomName.value = liveRoomInfo.value?.name || '';
-          roomId.value = `${liveRoomInfo.value?.id || ''}`;
+          roomName.value = appStore.liveRoomInfo?.name || '';
+          roomId.value = `${appStore.liveRoomInfo?.id || ''}`;
           connectWs();
         }
       }
@@ -180,9 +178,9 @@ export function usePush() {
   async function handleUserHasLiveRoom() {
     const res = await fetchUserHasLiveRoom(userStore.userInfo!.id!);
     if (res.code === 200 && res.data) {
-      liveRoomInfo.value = res.data.live_room;
+      appStore.liveRoomInfo = res.data.live_room;
       router.push({
-        query: { ...route.query, roomId: liveRoomInfo.value?.id },
+        query: { ...route.query, roomId: appStore.liveRoomInfo?.id },
       });
       return true;
     }
@@ -376,6 +374,5 @@ export function usePush() {
     roomName,
     damuList,
     liveUserList,
-    liveRoomInfo,
   };
 }

src/hooks/use-websocket.ts

@@ -611,6 +611,9 @@ export const useWebsocket = () => {
     ws.socketIo.on(WsMsgTypeEnum.message, (data: WsMessageType) => {
       prettierReceiveWsMsg(WsMsgTypeEnum.message, data);
       damuList.value.push({
+        send_msg_time: data.time,
+        user: data.user_info,
+        username: data.user_info?.username,
         /** 消息类型 */
         msg_type: data.data.msg_type,
         /** 消息内容类型 */
@@ -795,8 +798,9 @@ export const useWebsocket = () => {
     ws.socketIo.on(WsMsgTypeEnum.otherJoin, (data: WsOtherJoinType['data']) => {
       prettierReceiveWsMsg(WsMsgTypeEnum.otherJoin, data);
       const danmu: IWsMessage = {
+        username: data.join_user_info?.username,
         send_msg_time: +new Date(),
-        live_room_id: data.live_room.id!,
+        live_room_id: data.live_room_id!,
         id: -1,
         content: '',
         content_type: WsMessageContentTypeEnum.txt,
@@ -822,11 +826,11 @@ export const useWebsocket = () => {
             LiveRoomTypeEnum.system,
             LiveRoomTypeEnum.srs,
             LiveRoomTypeEnum.obs,
-          ].includes(data.live_room.type!)
+          ].includes(appStore.liveRoomInfo?.type!)
         ) {
           return;
         }
-        if (data.live_room.type === LiveRoomTypeEnum.wertc_live) {
+        if (appStore.liveRoomInfo?.type === LiveRoomTypeEnum.wertc_live) {
           updateWebRtcLiveConfig({
             roomId: roomId.value,
             canvasVideoStream: canvasVideoStream.value,
@@ -847,7 +851,9 @@ export const useWebsocket = () => {
               });
             }
           });
-        } else if (data.live_room.type === LiveRoomTypeEnum.wertc_meeting_one) {
+        } else if (
+          appStore.liveRoomInfo?.type === LiveRoomTypeEnum.wertc_meeting_one
+        ) {
           updateWebRtcMeetingOneConfig({
             roomId: roomId.value,
             anchorStream: canvasVideoStream.value,
@@ -868,7 +874,7 @@ export const useWebsocket = () => {
           //     });
           //   }
           // });
-        } else if (data.live_room.type === LiveRoomTypeEnum.pk) {
+        } else if (appStore.liveRoomInfo?.type === LiveRoomTypeEnum.pk) {
           updateWebRtcMeetingPkConfig({
             roomId: roomId.value,
             anchorStream: canvasVideoStream.value,
@@ -889,7 +895,9 @@ export const useWebsocket = () => {
           //     });
           //   }
           // });
-        } else if (data.live_room.type === LiveRoomTypeEnum.tencent_css_pk) {
+        } else if (
+          appStore.liveRoomInfo?.type === LiveRoomTypeEnum.tencent_css_pk
+        ) {
           updateWebRtcMeetingPkConfig({
             roomId: roomId.value,
             anchorStream: canvasVideoStream.value,
@@ -927,6 +935,7 @@ export const useWebsocket = () => {
       console.log('用户离开房间完成', data);
       networkStore.removeRtc(data.socket_id);
       damuList.value.push({
+        ...data,
         send_msg_time: +new Date(),
         live_room_id: Number(roomId.value),
         id: -1,

src/types/websocket.ts

@@ -202,8 +202,7 @@ export type WsDisableSpeakingType = IWsFormat<{
 
 /** 其他用户加入直播间 */
 export type WsOtherJoinType = IWsFormat<{
-  live_room: ILiveRoom;
-  live_room_user_info: IUser;
+  live_room_id: number;
   join_user_info?: IUser;
   join_socket_id: string;
   socket_list: string[];

src/views/h5/room/index.vue

@@ -86,18 +86,12 @@
                     [{{ formatTimeHour(item.send_msg_time!) }}]
                   </span>
                   <span class="name">
-                    <span v-if="item.user">
-                      <span>{{ item.user.username }}</span>
-                      <span>
-                        [{{ item.user.roles?.map((v) => v.role_name).join() }}]
-                      </span>
+                    <span>{{ item.username }}</span>
+                    <span>
+                      [{{ item.user?.roles?.map((v) => v.role_name).join() }}]
                     </span>
-                    <span v-else>
-                      <span>{{ item.socket_id }}</span>
-                      <span>[游客]</span>
-                    </span>
-                    <span>：</span>
                   </span>
+                  <span>：</span>
                   <span
                     class="msg"
                     v-if="item.content_type === WsMessageContentTypeEnum.txt"
@@ -119,37 +113,28 @@
                   v-else-if="item.msg_type === DanmuMsgTypeEnum.otherJoin"
                 >
                   <span class="name system">系统通知：</span>
-                  <span class="msg">
-                    {{ item.user?.username || item.socket_id }}进入直播！
-                  </span>
+                  <span class="msg">{{ item.username }}进入直播！</span>
                 </template>
                 <template
                   v-else-if="item.msg_type === DanmuMsgTypeEnum.userLeaved"
                 >
                   <span class="name system">系统通知：</span>
-                  <span class="msg">
-                    {{ item.user?.username || item.socket_id }}离开直播！
-                  </span>
+                  <span class="msg">{{ item.username }}离开直播！</span>
                 </template>
-                <template v-else-if="item.msg_type === DanmuMsgTypeEnum.reward">
-                  <span class="time">
-                    [{{ formatTimeHour(item.send_msg_time!) }}]
-                  </span>
-                  <span class="name">
-                    <span v-if="item.user">
-                      <span>{{ item.user.username }}</span>
-                      <span>
-                        [{{ item.user.roles?.map((v) => v.role_name).join() }}]
-                      </span>
-                    </span>
-                    <span v-else>
-                      <span>{{ item.socket_id }}</span>
-                      <span>[游客]</span>
+                <div
+                  class="reward"
+                  v-else-if="item.msg_type === DanmuMsgTypeEnum.reward"
+                >
+                  <span> [{{ formatTimeHour(item.send_msg_time!) }}] </span>
+                  <span>
+                    <span>{{ item.username }}</span>
+                    <span>
+                      [{{ item.user?.roles?.map((v) => v.role_name).join() }}]
                     </span>
                     <span>：</span>
                   </span>
-                  <span class="msg"> 打赏了：{{ item.content }} </span>
-                </template>
+                  <span>打赏了{{ item.content }}！</span>
+                </div>
               </div>
             </div>
           </div>
@@ -315,6 +300,7 @@ import { useAppStore } from '@/store/app';
 import { usePiniaCacheStore } from '@/store/cache';
 import { useUserStore } from '@/store/user';
 import { LiveRoomTypeEnum } from '@/types/ILiveRoom';
+import { IUser } from '@/types/IUser';
 import { formatTimeHour } from '@/utils';
 
 const route = useRoute();
@@ -326,6 +312,7 @@ const bottomRef = ref<HTMLDivElement>();
 const danmuListRef = ref<HTMLDivElement>();
 const showEmoji = ref(false);
 
+const anchorInfo = ref<IUser>();
 const containerHeight = ref(0);
 const videoWrapHeight = ref(0);
 const remoteVideoRef = ref<HTMLDivElement>();
@@ -347,9 +334,9 @@ const {
   damuList,
   danmuStr,
   roomLiving,
-  anchorInfo,
   videoResolution,
-} = usePull(roomId.value);
+  initRoomId,
+} = usePull();
 
 onUnmounted(() => {
   closeWs();
@@ -359,6 +346,7 @@ onUnmounted(() => {
 });
 
 onMounted(() => {
+  initRoomId(roomId.value);
   showPlayBtn.value = true;
   videoWrapRef.value = remoteVideoRef.value;
   setTimeout(() => {
@@ -403,16 +391,7 @@ async function handleHistoryMsg() {
     });
     if (res.code === 200) {
       res.data.rows.forEach((v) => {
-        damuList.value.unshift({
-          send_msg_time: v.send_msg_time!,
-          user: v.user,
-          live_room_id: v.live_room_id!,
-          id: v.id!,
-          content: v.content!,
-          content_type: v.content_type!,
-          msg_type: v.msg_type!,
-          redbag_send_id: v.redbag_send_id,
-        });
+        damuList.value.unshift(v);
       });
       if (
         appStore.liveRoomInfo?.system_msg &&
@@ -495,13 +474,22 @@ async function getLiveRoomInfo() {
     videoLoading.value = true;
     const res = await fetchFindLiveRoom(Number(roomId.value));
     if (res.code === 200) {
-      if (res.data?.type === LiveRoomTypeEnum.wertc_live) {
-        autoplayVal.value = true;
-        showPlayBtn.value = false;
-      } else {
-        showPlayBtn.value = true;
+      if (res.data) {
+        appStore.liveRoomInfo = res.data;
+        anchorInfo.value = res.data.user_live_room?.user;
+        if (res.data.live) {
+          roomLiving.value = true;
+        } else {
+          videoLoading.value = false;
+        }
+        if (res.data?.type === LiveRoomTypeEnum.wertc_live) {
+          autoplayVal.value = true;
+          showPlayBtn.value = false;
+        } else {
+          showPlayBtn.value = true;
+        }
+        initPull({ autolay: autoplayVal.value });
       }
-      initPull({ roomId: roomId.value, autolay: autoplayVal.value });
     }
   } catch (error) {
     console.error(error);
@@ -692,6 +680,11 @@ function startPull() {
       word-wrap: break-word;
       font-size: 13px;
 
+      .reward {
+        color: $theme-color-gold;
+        font-weight: bold;
+      }
+
       .name,
       .time {
         color: white;

src/views/home/index.vue

@@ -44,11 +44,11 @@
         >
           <div
             v-if="
-              currentLiveRoom?.live_room?.cdn === LiveRoomUseCDNEnum.yes &&
+              appStore.liveRoomInfo?.cdn === LiveRoomUseCDNEnum.yes &&
               [
                 LiveRoomTypeEnum.tencent_css,
                 LiveRoomTypeEnum.tencent_css_pk,
-              ].includes(currentLiveRoom?.live_room!.type!)
+              ].includes(appStore.liveRoomInfo!.type!)
             "
             class="cdn-ico"
           >
@@ -59,16 +59,16 @@
             class="cover"
             :style="{
               backgroundImage: `url(${
-                currentLiveRoom?.live_room?.cover_img ||
-                currentLiveRoom?.user?.avatar
+                appStore.liveRoomInfo?.cover_img ||
+                appStore.liveRoomInfo?.user?.avatar
               })`,
             }"
           ></div>
           <div
-            v-if="currentLiveRoom?.live_room?.flv_url"
+            v-if="appStore.liveRoomInfo?.flv_url"
             ref="remoteVideoRef"
           ></div>
-          <template v-if="currentLiveRoom">
+          <template v-if="appStore.liveRoomInfo">
             <div class="video-controls">
               <VideoControls
                 :resolution="videoResolution"
@@ -87,7 +87,7 @@
             >
               <div
                 class="btn"
-                @click="joinRoom(currentLiveRoom.live_room)"
+                @click="joinRoom(appStore.liveRoomInfo)"
               >
                 进入直播
               </div>
@@ -104,7 +104,7 @@
               :key="index"
               :class="{
                 item: 1,
-                active: item.live_room_id === currentLiveRoom?.live_room_id,
+                active: item.live_room_id === appStore.liveRoomInfo?.id,
               }"
               :style="{
                 backgroundImage: `url(${
@@ -137,11 +137,11 @@
                 class="border"
                 :style="{
                   opacity:
-                    item.live_room_id === currentLiveRoom?.live_room_id ? 1 : 0,
+                    item.live_room_id === appStore.liveRoomInfo?.id ? 1 : 0,
                 }"
               ></div>
               <div
-                v-if="item.live_room_id === currentLiveRoom?.live_room_id"
+                v-if="item.live_room_id === appStore.liveRoomInfo?.id"
                 class="triangle"
               ></div>
               <div class="txt">{{ item.live_room?.name }}</div>
@@ -281,7 +281,7 @@
 import { openToTarget } from 'billd-utils';
 import { onMounted, reactive, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
+import { useRouter } from 'vue-router';
 
 import { fetchLiveBilibiliGetUserRecommend } from '@/api/bilibili';
 import { fetchLiveList } from '@/api/live';
@@ -292,6 +292,7 @@ import { ILive, LiveLineEnum } from '@/interface';
 import { routerName } from '@/router';
 import { useAppStore } from '@/store/app';
 import {
+  ILiveRoom,
   LiveRoomIsShowEnum,
   LiveRoomPullIsShouldAuthEnum,
   LiveRoomTypeEnum,
@@ -299,7 +300,6 @@ import {
 } from '@/types/ILiveRoom';
 import { initAdsbygoogle } from '@/utils/google-ad';
 
-const route = useRoute();
 const router = useRouter();
 const appStore = useAppStore();
 const canvasRef = ref<Element>();
@@ -314,7 +314,6 @@ const configVideo = ref();
 const topLiveRoomList = ref<ILive[]>([]);
 const otherLiveRoomList = ref<ILive[]>([]);
 const bilibiliLiveRoomList = ref<ILive[]>([]);
-const currentLiveRoom = ref<ILive>();
 const interactionList = ref<any[]>([]);
 const videoWrapTmpRef = ref<HTMLDivElement>();
 const remoteVideoRef = ref<HTMLDivElement>();
@@ -330,7 +329,7 @@ const {
   videoResolution,
   handleStopDrawing,
   handlePlay,
-} = usePull(route.params.roomId as string);
+} = usePull();
 const isBottom = ref(false);
 const rootMargin = {
   bottom: 600,
@@ -436,21 +435,21 @@ async function getBg() {
 }
 
 function handleRefresh() {
-  playLive(currentLiveRoom.value!);
+  playLive(appStore.liveRoomInfo!);
 }
 
-function playLive(item: ILive) {
+function playLive(item: ILiveRoom) {
   handleStopDrawing();
-  currentLiveRoom.value = item;
   canvasRef.value?.childNodes?.forEach((item) => {
     item.remove();
   });
-  roomLiving.value = true;
-  handlePlay(item.live_room!);
+  // roomLiving.value = true;
+  appStore.liveRoomInfo = item;
+  handlePlay(item);
 }
 
 function changeLiveRoom(item: ILive) {
-  if (item.id === currentLiveRoom.value?.id) return;
+  if (item.id === appStore.liveRoomInfo?.id) return;
   if (
     ![
       LiveRoomTypeEnum.wertc_live,
@@ -460,7 +459,7 @@ function changeLiveRoom(item: ILive) {
   ) {
     appStore.setLiveLine(LiveLineEnum.hls);
   }
-  playLive(item);
+  playLive(item.live_room!);
 }
 
 async function getLiveRoomList() {
@@ -478,8 +477,8 @@ async function getLiveRoomList() {
       topLiveRoomList.value = res.data.rows.slice(0, topNums.value);
       otherLiveRoomList.value = res.data.rows.slice(topNums.value);
       if (res.data.total) {
-        currentLiveRoom.value = topLiveRoomList.value[0];
         roomLiving.value = true;
+        appStore.liveRoomInfo = topLiveRoomList.value[0].live_room;
       }
     }
   } catch (error) {

src/views/pull/index.vue

@@ -270,9 +270,7 @@
           <template v-if="item.msg_type === DanmuMsgTypeEnum.reward">
             <div class="reward">
               <span>[{{ formatTimeHour(item.send_msg_time!) }}]</span>
-              <span>
-                {{ item.user?.username }} 打赏了{{ item.content }}！
-              </span>
+              <span> {{ item.user?.username }}打赏了{{ item.content }}！</span>
             </div>
           </template>
           <template v-if="item.msg_type === DanmuMsgTypeEnum.danmu">
@@ -280,31 +278,21 @@
               >[{{ formatTimeHour(item.send_msg_time!) }}]</span
             >
             <span class="name">
-              <span v-if="item.user && userStore.userInfo?.id === item.user.id">
-                <span>{{ item.user.username }}</span>
-                <span>
-                  [{{ item.user.roles?.map((v) => v.role_name).join() }}]
-                </span>
-              </span>
               <Dropdown
-                trigger="click"
+                trigger="hover"
                 positon="left"
-                v-else-if="item.user"
               >
                 <template #btn>
-                  <span>{{ item.user.username }}</span>
-                  <span>
-                    [{{ item.user.roles?.map((v) => v.role_name).join() }}]
-                  </span>
+                  <span>{{ item.username }}</span>
                 </template>
                 <template #list>
                   <div class="list">
-                    <div class="item">{{ item.user.username }}</div>
+                    <div class="item">{{ item.username }}</div>
                     <div
                       class="item operator"
                       @click="
                         handleDisableSpeakingUser({
-                          userId: item.user.id,
+                          userId: item.user?.id,
                         })
                       "
                     >
@@ -314,7 +302,7 @@
                       class="item operator"
                       @click="
                         handleRestoreSpeakingUser({
-                          userId: item.user.id,
+                          userId: item.user?.id,
                         })
                       "
                     >
@@ -329,9 +317,8 @@
                   </div>
                 </template>
               </Dropdown>
-              <span v-else>
-                <span>{{ item }}</span>
-                <span>[游客]</span>
+              <span>
+                [{{ item.user?.roles?.map((v) => v.role_name).join() }}]
               </span>
             </span>
             <span>：</span>
@@ -354,11 +341,11 @@
           </template>
           <template v-else-if="item.msg_type === DanmuMsgTypeEnum.otherJoin">
             <span class="name system">系统通知：</span>
-            <span class="msg">{{ item.user?.username }}进入直播！ </span>
+            <span class="msg">{{ item.username }}进入直播！ </span>
           </template>
           <template v-else-if="item.msg_type === DanmuMsgTypeEnum.userLeaved">
             <span class="name system">系统通知：</span>
-            <span class="msg">{{ item.user?.username }}离开直播！ </span>
+            <span class="msg">{{ item.username }}离开直播！ </span>
           </template>
         </div>
       </div>
@@ -502,7 +489,7 @@ const appStore = useAppStore();
 const networkStore = useNetworkStore();
 const { t } = useI18n();
 
-const roomId = ref('-1');
+const roomId = ref('');
 const anchorInfo = ref<IUser>();
 const configBg = ref();
 const configVideo = ref();
@@ -542,7 +529,8 @@ const {
   damuList,
   liveUserList,
   danmuStr,
-} = usePull(roomId.value);
+  initRoomId,
+} = usePull();
 
 const rtcRtt = computed(() => {
   const arr: any[] = [];
@@ -584,6 +572,7 @@ const rtcBytesReceived = computed(() => {
 
 onMounted(async () => {
   roomId.value = route.params.roomId as string;
+  initRoomId(roomId.value);
   initAdsbygoogle();
   await handleFindLiveRoomInfo();
   if (!appStore.liveRoomInfo) return;
@@ -611,10 +600,9 @@ onMounted(async () => {
         topRef.value.getBoundingClientRect().height);
     height.value = res;
   }
-  getBg();
   if (route.query.is_bilibili !== '1') {
     isBilibili.value = false;
-    initPull({ roomId: roomId.value });
+    initPull({});
   } else {
     initWs({
       roomId: roomId.value,
@@ -746,16 +734,7 @@ async function handleHistoryMsg() {
     });
     if (res.code === 200) {
       res.data.rows.forEach((v) => {
-        damuList.value.unshift({
-          send_msg_time: v.send_msg_time!,
-          user: v.user,
-          live_room_id: v.live_room_id!,
-          id: v.id!,
-          content: v.content!,
-          content_type: v.content_type!,
-          msg_type: v.msg_type!,
-          redbag_send_id: v.redbag_send_id,
-        });
+        damuList.value.unshift(v);
       });
       if (
         appStore.liveRoomInfo?.system_msg &&
@@ -787,11 +766,14 @@ watch(
 
 watch(
   () => appStore.liveRoomInfo,
-  () => {
-    getBg();
+  (newval) => {
+    if (newval) {
+      getBg();
+    }
   },
   {
     deep: true,
+    immediate: true,
   }
 );
 

src/views/push/index.vue

@@ -318,12 +318,9 @@
                   [{{ formatTimeHour(item.send_msg_time!) }}]
                 </span>
                 <span class="name">
-                  <span v-if="item.user">
-                    {{ item.user.username }}[{{
-                      item.user.roles?.map((v) => v.role_name).join()
-                    }}]
-                  </span>
-                  <span v-else>{{ item }}[游客]</span>
+                  {{ item.username }}[{{
+                    item.user?.roles?.map((v) => v.role_name).join()
+                  }}]
                 </span>
                 <span>：</span>
                 <span
@@ -347,19 +344,13 @@
                 v-else-if="item.msg_type === DanmuMsgTypeEnum.otherJoin"
               >
                 <span class="name system">系统通知：</span>
-                <span class="msg">
-                  <span>{{ item.user?.username }}</span>
-                  <span>进入直播！</span>
-                </span>
+                <span class="msg">{{ item.username }}进入直播！</span>
               </template>
               <template
                 v-else-if="item.msg_type === DanmuMsgTypeEnum.userLeaved"
               >
                 <span class="name system">系统通知：</span>
-                <span class="msg">
-                  <span>{{ item.user?.username }}</span>
-                  <span>离开直播！</span>
-                </span>
+                <span class="msg">{{ item.username }}离开直播！</span>
               </template>
             </div>
           </div>
@@ -1143,16 +1134,7 @@ async function handleHistoryMsg() {
     });
     if (res.code === 200) {
       res.data.rows.forEach((v) => {
-        damuList.value.unshift({
-          send_msg_time: v.send_msg_time!,
-          user: v.user,
-          live_room_id: v.live_room_id!,
-          id: v.id!,
-          content: v.content!,
-          content_type: v.content_type!,
-          msg_type: v.msg_type!,
-          redbag_send_id: v.redbag_send_id,
-        });
+        damuList.value.unshift(v);
       });
       if (
         appStore.liveRoomInfo?.system_msg &&