更新

src/components/live-broadcast/event.ts

@@ -8,9 +8,11 @@ export const LIVE_EVENT_MESSAGE = {
   'RC:Chatroom:SeatsCtrl': 'SeatsCtrl',
   'RC:Chatroom:ChatBan': 'ChatBan',
   'RC:Chatroom:SeatApply': 'SeatApply',
+  'RC:Chatroom:SeatResponse': 'SeatResponse',
   'RM:RTC:TrackUnpublish': 'TrackUnpublish',
   'RM:RTC:SwitchRole': 'SwitchRole',
   'RM:RTC:UserLeave': 'UserLeave',
+  'RC:Chatroom:Leave': 'Leave',
 }
 
 export default mitt()

src/components/live-broadcast/runtime.ts

@@ -371,6 +371,7 @@ export const loopSyncLike = async () => {
     try {
       await request.get('/api-web/imLiveBroadcastRoom/syncLike', {
         hideLoading: true,
+        hideMessage: true,
         params: {
           likeNum: runtime.likeCount,
           roomUid: runtime.roomUid,
@@ -424,7 +425,7 @@ export const sendMessage = async (msg: any, type: SendMessageType = 'text') => {
   }
   if (!message) return
   console.log(message)
-  await RongIMLib.sendMessage(conversation, message)
+  return await RongIMLib.sendMessage(conversation, message)
 }
 
 export const openDevice = async (trackType: TrackType, needPublish = true) => {

src/components/live-message/index.tsx

@@ -2,6 +2,7 @@ import { defineComponent } from "vue"
 import { ElTabs, ElTabPane } from "element-plus"
 import styles from './index.module.less'
 import Message from './message'
+import { state} from '/src/state'
 import runtime from '../live-broadcast/runtime'
 import SendMessage from './send-message';
 import ItemList from './item-list'
@@ -9,6 +10,7 @@ import JoinModel from './model/join-model';
 import LookModel from './model/look-model';
 import MessageModel from './model/message-model';
 
+
 type tabStatus = 'message' | 'join' | 'look'
 
 export default defineComponent({
@@ -18,8 +20,8 @@ export default defineComponent({
       modelIndex: 'message' as tabStatus,
     }
   },
-  setup(props, { emit }) {
-
+  mounted() {
+    runtime.likeCount = state.user?.likeNum || 0
   },
   methods: {
     tabChange(val: any) {
@@ -31,7 +33,7 @@ export default defineComponent({
       <div class={styles.container}>
         <div class={styles.dataCount}>
           <div>
-            <p class={styles.num}>1361</p>
+            <p class={styles.num}>{state.user?.likeNum}</p>
             <p class={styles.text}><SvgIcon name="message-look" color="#fff" class={styles.dataIcon} />当前观看</p>
           </div>
           <div>
@@ -59,7 +61,7 @@ export default defineComponent({
         </ElTabs>
         <div class={styles.tabContent}>
           <Message />
-          <div class={styles.tabList}>
+          <div class={styles.tabList} id="tabList">
             <MessageModel v-show={this.modelIndex === 'message'} />
             <JoinModel v-show={this.modelIndex === 'join'} />
             <LookModel v-show={this.modelIndex === 'look'} />

src/components/live-message/message.module.less

@@ -5,22 +5,32 @@
     background: rgba(99, 108, 132, 0.1);
     padding: 15px 16px;
   }
-  .btn {
-    height: 30px;
-    line-height: 30px;
-    font-size: 14px;
-    font-weight: 600;
-    padding: 0 15px;
-    background: var(--message-color);
-    border-radius: 2px;
-    color: var(--live-color);
-    text-align: center;
-    cursor: pointer;
-    & + .btn {
-      margin-left: 12px;
+  // .btn {
+  //   height: 30px;
+  //   line-height: 30px;
+  //   font-size: 14px;
+  //   font-weight: 600;
+  //   padding: 0 15px;
+  //   background: var(--message-color);
+  //   border-color: var(--message-color);
+  //   border-radius: 2px;
+  //   color: var(--live-color);
+  //   text-align: center;
+  //   cursor: pointer;
+  //   & + .btn {
+  //     margin-left: 12px;
+  //   }
+  // }
+  // .active {
+  //   background: var(--live-light-color);
+  // }
+  :global {
+    .el-button--info {
+      --el-button-text-color: var(--live-color);
+      --el-button-hover-text-color: var(--live-light-color);
+      --el-button-disabled-text-color: var(--el-text-color-placeholder);
+      background-color: var(--message-color);
+      border-color: var(--message-color);
     }
   }
-  .active {
-    background: var(--live-light-color);
-  }
 }

src/components/live-message/message.tsx

@@ -1,4 +1,5 @@
 import { defineComponent } from "vue";
+import { ElButton } from "element-plus";
 import runtime, * as RuntimeUtils from '/src/components/live-broadcast/runtime'
 import styles from './message.module.less';
 
@@ -25,8 +26,10 @@ export default defineComponent({
     return (
       <div class={styles.message}>
         <div class={styles.buttonGroup}>
-          <div onClick={this.ChatBan} class={[!runtime.allowChatCtrl ? styles.active : null, styles.btn]}>{runtime.allowChatCtrl ? '全体禁言' : '关闭全体禁言'}</div>
-          <div onClick={this.SeatsCtrl} class={[!runtime.allowSeatsCtrl ? styles.active : null, styles.btn]}>{runtime.allowSeatsCtrl ? '禁止连麦' : '关闭禁止连麦'}</div>
+        {/* class={[!runtime.allowChatCtrl ? styles.active : null, styles.btn]} */}
+          <ElButton type={!runtime.allowChatCtrl ? 'primary' : 'info'} onClick={this.ChatBan} >{runtime.allowChatCtrl ? '全体禁言' : '关闭全体禁言'}</ElButton>
+          {/* class={[!runtime.allowSeatsCtrl ? styles.active : null, styles.btn]} */}
+          <ElButton type={!runtime.allowSeatsCtrl ? 'primary' : 'info'} onClick={this.SeatsCtrl}>{runtime.allowSeatsCtrl ? '禁止连麦' : '关闭禁止连麦'}</ElButton>
         </div>
       </div>
     )

src/components/live-message/model/index.module.less

@@ -1,5 +1,5 @@
 .itemContent {
-  padding: 16px;
+  padding: 16px 16px 5px;
   display: flex;
   color: var(--live-color);
   & > img {
@@ -25,6 +25,14 @@
     line-height: 22px;
     display: flex;
     align-items: center;
+    font-weight: 500;
+  }
+  .name-style {
+    line-height: 24px;
+    background: #575B61;
+    border-radius: 12px;
+    color: #fff;
+    padding: 0 8px;
   }
   .rightTime {
     font-size: 12px;
@@ -33,12 +41,12 @@
     .el-tag--default {
       border-radius: 20px;
       margin-left: 8px;
-      padding: 0 12px;
-      height: 20px;
-      line-height: 20px;
-      color: var(--live-color);
-      background: var(--message-color);
-      border-color: var(--message-color);
+      // padding: 0 12px;
+      // height: 20px;
+      // line-height: 20px;
+      // color: var(--live-color);
+      // background: var(--message-color);
+      // border-color: var(--message-color);
     }
   }
 }

src/components/live-message/model/join-model.tsx

@@ -1,31 +1,26 @@
 import { defineComponent } from "vue";
 import styles from './index.module.less'
-import { ElButton } from'element-plus'
+import { ElButton } from 'element-plus'
 import event, { LIVE_EVENT_MESSAGE } from '/src/components/live-broadcast/event';
 import { state } from '/src/state'
 import dayjs from 'dayjs';
 import Empty from "/src/components/empty";
 import runtime, * as RuntimeUtils from '/src/components/live-broadcast/runtime'
+import runtimeModel, * as RuntimeModelUtils from '/src/components/live-message/model/runtime'
 
 export default defineComponent({
-  props: {
-    data: {
-      type: Array,
-      default: () => ([])
-    }
-  },
   data() {
     return {
-      joinList: {} as {[key: string]: any}, // 连麦学生列表
+      joinList: {} as { [key: string]: any }, // 连麦学生列表
       loadingJoin: false, // 连麦列表状态
     }
   },
   computed: {
     count() {
       let count = 0
-      for (const key in this.joinList) {
-        if (Object.prototype.hasOwnProperty.call(this.joinList, key)) {
-          const item = this.joinList[key];
+      for (const key in runtimeModel.joinList) {
+        if (Object.prototype.hasOwnProperty.call(runtimeModel.joinList, key)) {
+          const item = runtimeModel.joinList[key];
           if (item.type === 3) {
             count += 1
           }
@@ -46,22 +41,23 @@ export default defineComponent({
     onSeatApply(evt: any) {
       if (Array.isArray(evt)) {
         for (const id of evt) {
-          delete this.joinList[id]
+          console.log('onSeatApply', id)
+          RuntimeModelUtils.removeJoin(id)
         }
         return
       }
       // 申请连麦
       if (evt.type === 3) {
-        this.joinList[evt.audienceId] = {
+        RuntimeModelUtils.addJoin(evt.audienceId, {
           name: evt.audienceName,
           id: evt.audienceId,
           type: evt.type,
-        }
+        })
       }
       // 取消连麦
       if (evt.type === 4) {
-        if (this.joinList[evt.audienceId]) {
-          delete this.joinList[evt.audienceId]
+        if (runtimeModel.joinList[evt.audienceId]) {
+          RuntimeModelUtils.removeJoin(evt.audienceId)
         }
       }
     },
@@ -74,10 +70,10 @@ export default defineComponent({
         audienceName: item.name,
         audienceId: item.id,
         teacherId: state.user?.id,
-        teacherName: state.user?.realName,
+        teacherName: state.user?.speakerName,
         type: 1,
       }
-      this.joinList[item.id] = data
+      RuntimeModelUtils.addJoin(item.id, data)
       RuntimeUtils.sendMessage(data, 'SeatResponse')
     },
     refuse(item: any) {
@@ -86,44 +82,47 @@ export default defineComponent({
         audienceName: item.name,
         audienceId: item.id,
         teacherId: state.user?.id,
-        teacherName: state.user?.realName,
+        teacherName: state.user?.speakerName,
         type: 5,
       }
-      this.joinList[item.id] = data
+      RuntimeModelUtils.addJoin(item.id, data)
       RuntimeUtils.sendMessage(data, 'SeatApply')
     },
     onSwitchRole(evt: any) {
-      if (this.joinList[evt.userId] && evt.role === 2) {
-        delete this.joinList[evt.userId]
+      if (runtimeModel.joinList[evt.userId] && evt.role === 2) {
+        RuntimeModelUtils.removeJoin(evt.userId)
       }
     }
   },
   render() {
-    const list = Object.values(this.joinList)
+    const list = Object.values(runtimeModel.joinList)
     return (
       <div style={{ minHeight: '100%', position: 'relative' }}>
-        {list.length > 0 ? list.map((item : any) => (
+        {list.length > 0 ? list.map((item: any) => (
           <div class={styles.itemContent}>
             {/* <img src="/src/assets/home/placehorder-icon.png" alt="" /> */}
             <div class={styles.itemInfo}>
               <div class={styles.itemName}>
-                <p class={styles.userName}>{item.name}</p>
+                <p class={styles.userName}>
+                  <span class={styles['name-style']}>{item.name}</span>
+                  {item.type === 3 ? <p style={{ paddingLeft: '10px' }}>申请连麦</p> : <p style={{ paddingLeft: '10px', color: 'var(--live-text-color)' }}>正在连麦</p>}
+                </p>
+                {item.type === 3 ? (
+                    <div class={styles.joinText}>
+                      <div class={styles.join}>
+                        {/* 申请连麦 */}
+                      </div>
+                      <ElButton size="small" type="primary" disabled={this.count > 3} class={styles.btn} onClick={() => this.agree(item)}>上麦</ElButton>
+                    </div>
+                  ) : (
+                    <div class={styles.joinText}>
+                      <div class={styles.join}>
+                        {/* 正在连麦 */}
+                      </div>
+                      <ElButton size="small" plain class={[styles.btn, styles.downBtn]} onClick={() => this.refuse(item)}>下麦</ElButton>
+                    </div>
+                  )}
               </div>
-              {item.type === 3 ? (
-                <div class={styles.joinText}>
-                  <div class={styles.join}>
-                    申请连麦
-                  </div>
-                  <ElButton size="small" type="primary" disabled={this.count > 3} class={styles.btn} onClick={() => this.agree(item)}>上麦</ElButton>
-                </div>
-              ) : (
-                <div class={styles.joinText}>
-                  <div class={styles.join}>
-                    正在连麦
-                  </div>
-                  <ElButton size="small" plain class={[styles.btn, styles.downBtn]} onClick={() => this.refuse(item)}>下麦</ElButton>
-                </div>
-              )}
             </div>
           </div>
         )) : this.loadingJoin ? <div class={styles.loadingStyle} v-loading={this.loadingJoin} element-loading-background="rgba(0, 0, 0, 0.8)"></div> : <Empty style={{ paddingTop: '120px' }} text="暂无学员发起连麦！" icon="noData-no-join" />}

src/components/live-message/model/look-model.tsx

@@ -1,18 +1,15 @@
 import { defineComponent } from "vue";
+import { ElButton } from 'element-plus'
 import * as RuntimeUtils from '/src/components/live-broadcast/runtime'
 import styles from './index.module.less'
 import event, { LIVE_EVENT_MESSAGE } from '/src/components/live-broadcast/event';
 import { state } from '/src/state'
 import dayjs from 'dayjs';
 import Empty from "/src/components/empty";
+import runtimeModel, * as RuntimeModelUtils from '/src/components/live-message/model/runtime'
+import request from "/src/helpers/request";
 
 export default defineComponent({
-  props: {
-    data: {
-      type: Array,
-      default: () => ([])
-    }
-  },
   data() {
     return {
       lookList: [] as any[], // 观看学生列表
@@ -20,13 +17,54 @@ export default defineComponent({
     }
   },
   mounted() {
+    // this._init()
     this.loadingLook = true
     event.on(LIVE_EVENT_MESSAGE["RC:Chatroom:Welcome"], this.onWelcome);
+    event.on(LIVE_EVENT_MESSAGE["RC:Chatroom:SeatResponse"], this.onSeatResponse);
+    event.on(LIVE_EVENT_MESSAGE['RM:RTC:UserLeave'], this.onSeatApply);
     setTimeout(() => {
       this.loadingLook = false;
-    }, 2000);
+    })
   },
   methods: {
+    async _init() {
+      try {
+        const roomUid = sessionStorage.getItem('roomUid')
+        const res = await request.get(`/api-web/imLiveBroadcastRoom/queryRoomUserInfo`, {
+          params: {
+            roomUid: roomUid,
+          }
+        })
+        console.log('_init', res)
+      } catch {
+        //
+      }
+    },
+    onSeatResponse(value: any) {
+      if(value.type == 3) {
+        runtimeModel.lookList.forEach((item: any) => {
+          if(item.id == value.audienceId) {
+            item.type = 1
+          }
+        })
+        // 判断是否是同一个人
+        let isExist = runtimeModel.joinList[value.audienceId]
+        console.log(runtimeModel.joinList)
+        if (!isExist) {
+          RuntimeModelUtils.addJoin(value.audienceId, {
+            id: value.audienceId,
+            name: value.audienceName,
+            audienceId: value.audienceId,
+            audienceName: value.audienceName,
+            teacherId: state.user?.id,
+            teacherName: state.user?.speakerName,
+            type: 1
+          })
+        } else {
+          runtimeModel.joinList[value.audienceId].type = 1
+        }
+      }
+    },
     onWelcome(value: any) {
       console.log(value)
       if (value && value.user) {
@@ -38,32 +76,84 @@ export default defineComponent({
         }
         // 判断是否有同一个人
         let isExist = false;
-        this.lookList.forEach((item: any) => {
+        runtimeModel.lookList.forEach((item: any) => {
           if (item.id === tempObj.id) {
             isExist = true
           }
         })
         if (!isExist) {
-          this.lookList.push(tempObj);
+          RuntimeModelUtils.addLook(tempObj);
         }
 
         this.loadingLook = false
       }
-    }
+    },
+    async onUpLook(item: any) {
+      try {
+        // RC:Chatroom:SeatResponse type teacherName teacherId audienceName audienceId
+        // 操作类型 1 主讲人同意 2 主讲人拒绝 3 观众同意 4 观众拒绝
+        // RC:Chatroom:SeatApply type teacherName teacherId audienceName audienceId
+        // 操作类型 1 主讲人邀请 2 主讲人取消邀请 3 观众申请 4 观众取消申请 5将麦上观众踢下麦
+        const data = {
+          audienceName: item.name,
+          audienceId: item.id,
+          teacherId: state.user?.id,
+          teacherName: state.user?.speakerName,
+          type: 1
+        }
+        await RuntimeUtils.sendMessage(data, 'SeatApply')
+      } catch {
+        //
+      }
+    },
+    async onDownLook(item: any) {
+      try {
+        const data = {
+          ...item,
+          audienceName: item.name,
+          audienceId: item.id,
+          teacherId: state.user?.id,
+          teacherName: state.user?.speakerName,
+          type: 5,
+        }
+        RuntimeModelUtils.addJoin(item.id, data)
+        RuntimeUtils.sendMessage(data, 'SeatApply')
+      } catch {
+      }
+    },
+    onSeatApply(evt: any) {
+      if (Array.isArray(evt)) {
+        for (const id of evt) {
+          RuntimeModelUtils.removeJoin(id)
+        }
+        return
+      }
+      // 取消连麦
+      console.log(evt)
+      if (evt.type === 4) {
+        if (runtimeModel.joinList[evt.audienceId]) {
+          RuntimeModelUtils.removeJoin(evt.audienceId)
+
+          runtimeModel.lookList.forEach((item: any) => {
+            if(item.id == evt.audienceId) {
+              item.type = 3
+            }
+          })
+        }
+      }
+    },
   },
   render() {
     return (
       <div>
-        {this.lookList.length > 0 ? this.lookList.map((item : any) => (
+        {runtimeModel.lookList.length > 0 ? runtimeModel.lookList.map((item : any) => (
           <div class={styles.itemContent}>
             {/* <img src="/src/assets/home/placehorder-icon.png" alt="" /> */}
             <div class={styles.itemInfo} >
               <div class={styles.itemName}>
                 <p class={styles.userName}>{item.name}</p>
-                <a href="javascript:;" class={styles.btn} onClick={() => RuntimeUtils.sendMessage(
-                  {seatBan:false, ...RuntimeUtils.getSendMessageUser()},
-                  'SeatsCtrl'
-                )}>上麦</a>
+                {item.type == 1 ? <ElButton size="small" type="primary" class={styles.btn} onClick={() => this.onUpLook(item)}>上麦</ElButton> : <ElButton size="small" plain class={[styles.btn, styles.downBtn]} onClick={() => this.onDownLook(item)}>下麦</ElButton>}
+                {/* {item.type == 1 ? <a href="javascript:;" class={[styles.btn, styles.downBtn]} onClick={() => this.onDownLook(item)}>下麦</a> : <a href="javascript:;" class={styles.btn} onClick={() => this.onUpLook(item)}>上麦</a>} */}
               </div>
             </div>
           </div>

src/components/live-message/model/message-model.tsx

@@ -8,6 +8,7 @@ import event, { LIVE_EVENT_MESSAGE } from '/src/components/live-broadcast/event'
 import { state } from '/src/state'
 import dayjs from 'dayjs';
 import Empty from "/src/components/empty";
+import runtime, * as RuntimeUtils from '/src/components/live-message/model/runtime'
 
 export default defineComponent({
   props: {
@@ -25,19 +26,37 @@ export default defineComponent({
   mounted() {
     this.loadingMessage = true
     event.on(LIVE_EVENT_MESSAGE["RC:TxtMsg"], this.onMessage);
+    event.on(LIVE_EVENT_MESSAGE["RC:Chatroom:Like"], this.onLike)
 
     setTimeout(() => {
       this.loadingMessage = false;
     }, 2000);
+    this.scrollToBottom()
   },
   beforeUnmount() {
     event.off(LIVE_EVENT_MESSAGE["RC:TxtMsg"], this.onMessage);
+    event.off(LIVE_EVENT_MESSAGE["RC:Chatroom:Like"], this.onLike);
   },
   methods: {
+    onLike(value: any) {
+      if (value && value.user) {
+        const sendTime = dayjs(value.$EventMessage.sentTime || new Date()).format('HH:mm:ss')
+        console.log(value, 'like')
+        let tempObj = {
+          name: value.user?.name,
+          id: value.user.id,
+          isSelf: false,
+          content: '给您点了' + value.counts + '个赞',
+          sendTime
+        }
+        // this.messageList.push(tempObj);
+        RuntimeUtils.addMessage(tempObj);
+        this.loadingMessage = false
+      }
+      this.scrollToBottom()
+    },
     onMessage(value: any) {
       if (value && value.user) {
-        console.log(state.user)
-        console.log(value)
         const sendTime = dayjs(value.$EventMessage.sentTime || new Date()).format('HH:mm:ss')
 
         let tempObj = {
@@ -48,13 +67,20 @@ export default defineComponent({
           sendTime
         }
         // 判断是否是主播
-        if (value.user.id === state.user.id) {
+        if (value.user.id === state.user.speakerId) {
           tempObj.isSelf = true
         }
-        this.messageList.push(tempObj);
+        // this.messageList.push(tempObj);
+        RuntimeUtils.addMessage(tempObj);
         this.loadingMessage = false
       }
-      console.log(this.messageList)
+      this.scrollToBottom()
+    },
+    scrollToBottom() {
+      // 默认滚动到底部
+      this.$nextTick(() => {
+        document.querySelector('#tabList')?.scrollTo(0, document.querySelector('#messageList')?.scrollHeight || 0)
+      })
     }
   },
   render() {
@@ -97,17 +123,19 @@ export default defineComponent({
       //     </template>
       // </VirtualList>
 
-      <div style={{ minHeight: '100%', position: 'relative' }}>
-        {this.messageList.length > 0 ? this.messageList.map((item : any) => (
+      <div style={{ minHeight: '100%', position: 'relative' }} id="messageList">
+        {runtime.messageList.length > 0 ? runtime.messageList.map((item: any) => (
           <div class={styles.itemContent}>
             {/* <img src="/src/assets/home/placeholder-icon.png" alt="" /> */}
             <div class={styles.itemInfo}>
               <div class={styles.itemName}>
-                <p class={styles.userName}>{item.name} {item.isSelf ? <ElTag>主播</ElTag> : null}</p>
-                <p class={styles.rightTime}>{ item.sendTime }</p>
+                <p class={styles.userName}>
+                  <span class={styles['name-style']}>{item.name}</span>
+                  {item.isSelf ? <ElTag effect="dark" color="#01A79E">主讲人</ElTag> : null}</p>
+                <p class={styles.rightTime}>{item.sendTime}</p>
               </div>
               <div class={[styles.itemText, item.isSelf ? styles.active : null]}>
-                { item.content }
+                {item.content}
               </div>
             </div>
           </div>

src/components/live-message/model/runtime.ts

@@ -0,0 +1,44 @@
+import { reactive, ref } from 'vue'
+
+const runtime = reactive({
+  messageList: [] as Array<any>,
+  joinList: {} as { [key: string]: any },
+  lookList: [] as Array<any>,
+})
+
+export default runtime
+
+// 添加消息
+type Message = {
+  name: string,
+  id: number,
+  isSelf?: boolean,
+  content?: string,
+  sendTime?: string
+  type?: string | number,
+  audienceName?: string,
+  audienceId?: string | number,
+  teacherId?: string | number,
+  teacherName?: string,
+}
+/**
+ * 添加消息
+ * @param message 消息对象
+ */
+export const addMessage = (message: Message) => {
+  runtime.messageList.push(message)
+}
+/**
+ * 添加上麦消息
+ */
+export const addJoin = (key: string, message: Message) => {
+  runtime.joinList[key] = message
+}
+
+export const removeJoin = (key: string) => {
+  delete runtime.joinList[key]
+}
+
+export const addLook = (message: Message) => {
+  runtime.lookList.push(message)
+}

src/components/live-message/send-message.module.less

@@ -17,7 +17,7 @@
     .el-input {
       border-radius: 60px;
       overflow: hidden;
-      font-size: 18px;
+      font-size: 16px;
       // background-color: transparent;
     }
     .el-input__inner {
@@ -37,7 +37,11 @@
       color: var(--live-color);
       font-weight: 600;
       padding: 0 23px;
-      font-size: 18px;
+      font-size: 16px;
+      &.is-disabled {
+        background-color: var(--el-button-disabled-bg-color);
+        border-color: var(--el-button-disabled-border-color);
+      }
     }
   }
 }

src/components/live-message/send-message.tsx

@@ -2,6 +2,9 @@ import { defineComponent } from "vue";
 import { ElInput, ElButton } from "element-plus";
 import runtime, * as RuntimeUtils from "/src/components/live-broadcast/runtime";
 import styles from "./send-message.module.less";
+import runtimeModel, * as RuntimeModel from './model/runtime'
+import dayjs from "dayjs";
+
 
 export default defineComponent({
   data() {
@@ -9,12 +12,30 @@ export default defineComponent({
       message: ''
     }
   },
+  methods: {
+    async sendMessage() {
+      try {
+        await RuntimeUtils.sendMessage(this.message);
+        const userInfo = RuntimeUtils.getSendMessageUser();
+        // 添加一条消息记录
+        RuntimeModel.addMessage({
+          id: userInfo.id,
+          name: userInfo.name,
+          content: this.message,
+          isSelf: true,
+          sendTime: dayjs(new Date()).format('HH:mm:ss')
+        })
+        this.message = '';
+      } catch (error) {
+      }
+    }
+  },
   render() {
     return (
       <div class={styles.sendMessage}>
         <div class={styles.form}>
           <ElInput modelValue={this.message} onInput={val => this.message = val} placeholder="请输入消息" />
-          <ElButton onClick={() => RuntimeUtils.sendMessage(this.message)} round type="primary">发送</ElButton>
+          <ElButton disabled={!this.message} onClick={this.sendMessage} round type="primary">发送</ElButton>
         </div>
       </div>
     )

src/helpers/request.ts

@@ -60,26 +60,35 @@ request.interceptors.response.use(async (res, options) => {
   setTimeout(() => {
     hideLoading()
   }, 200)
+  let hideMessage = options.hideMessage || false
   const url = new URL(res.url)
   if (res.status > 299 || res.status < 200) {
     const msg = '服务器错误，状态码' + res.status
-    ElMessage.error(msg)
+    if (!hideMessage) {
+      ElMessage.error(msg)
+    }
     throw new Error(msg)
   }
   const data = await res.clone().json()
   if (data.code !== 200 && data.errCode !== 0) {
     const msg = data.msg || '处理失败，请重试'
     if(data.code === 401 || data.code === 403) {
-      ElMessage.error(`登录过期，请重新登录！`)
+      if(!hideMessage) {
+        ElMessage.error(`登录过期，请重新登录！`)
+      }
       const url = window.location.href.split('#')[0]
       router.push(`/login?redirect=${url}`)
     }
     if(data.code === 404) {
-      ElMessage.error(`请求资源不存在！`)
+      if(!hideMessage) {
+        ElMessage.error(`请求资源不存在！`)
+      }
       router.push('/404')
     }
     if (!(data.code === 403 || data.code === 401)) {
-      ElMessage.error(msg)
+      if (!hideMessage) {
+        ElMessage.error(msg)
+      }
     }
     throw new Error(msg)
   }

src/pages/login/index.tsx

@@ -113,7 +113,7 @@ export default defineComponent({
             setToken(token)
 
             const roomUid = sessionStorage.getItem('roomUid')
-            const roomDetail = await request.get('/api-web/imLiveBroadcastRoom/queryRoom', {
+            await request.get('/api-web/imLiveBroadcastRoom/queryRoom', {
               params: {
                 roomUid: roomUid
               }

src/permission.ts

@@ -31,10 +31,6 @@ router.beforeEach(async (to, from, next) => {
       } else {
         try {
           // 异步获取用户信息
-          // await request.get('/api-web/employee/queryUserInfo').then(res => {
-          //   console.log(res)
-          //   state.user = res.data
-          // })
           const roomUid = sessionStorage.getItem('roomUid')
           const roomDetail = await request.get('/api-web/imLiveBroadcastRoom/queryRoom', {
             params: {

vite.config.ts

@@ -19,14 +19,14 @@ export default defineConfig({
   },
   css: {
     preprocessorOptions: {
-      less: {
-        lessOptions: {
-          modifyVars: {
-            '@blue': '#01A79E',
-            '@nav-bar-icon-color': '#01A79E'
-          }
-        }
-      }
+      // less: {
+      //   lessOptions: {
+      //     modifyVars: {
+      //       '@blue': '#01A79E',
+      //       '@nav-bar-icon-color': '#01A79E'
+      //     }
+      //   }
+      // }
     }
   },
   plugins: [