更新

package.json

@@ -19,6 +19,7 @@
     "umi-request": "^1.4.0",
     "vue": "^3.2.25",
     "vue-router": "^4.0.12",
+    "vue-virtual-list-v3": "^1.3.6",
     "vue-virtual-scroll-list": "^2.3.3"
   },
   "devDependencies": {

src/components/live-broadcast/index.tsx

@@ -40,7 +40,8 @@ export default defineComponent({
         runtime.videoStatus = 'stream'
         // runtime.mediaStreamTrack = mediaStreams.getTracks()
         // await RuntimeUtils.setTrack([microphoneAudioTrack], 'microphone')
-        const join = await RuntimeUtils.joinRoom('w_3fi4PXQcooe5_VUseReE', RTC.RCLivingType.VIDEO, {
+        // w_3fi4PXQcooe5_VUseReE
+        const join = await RuntimeUtils.joinRoom('w_3fi4PXQcooe5_VUseReA', RTC.RCLivingType.VIDEO, {
           onMessageReceive(name, content) {
             console.log(name, content)
           },

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

@@ -7,7 +7,7 @@
 
 .dataCount {
   text-align: center;
-  margin: 16px;
+  margin: 16px 16px 0;
   border-radius: 2px;
   background-color: var(--message-color);
   display: flex;
@@ -55,6 +55,7 @@
     .el-tabs__item {
       color: var(--live-color);
       font-size: 16px;
+      padding: 0 31px;
       &.is-active {
         color: #00FFF0;
       }

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

@@ -72,7 +72,7 @@ export default defineComponent({
               )}
             </div>
           </div>
-        )) : this.loadingJoin ? <div class={styles.loadingStyle} v-loading={this.loadingJoin} element-loading-background="rgba(0, 0, 0, 0.8)"></div> : <Empty text="暂无学员发起连麦！" icon="noData-no-join" />}
+        )) : 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" />}
       </div>
     )
   }

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

@@ -60,14 +60,14 @@ export default defineComponent({
             <div class={styles.itemInfo} >
               <div class={styles.itemName}>
                 <p class={styles.userName}>{item.name}</p>
-                <a href="javascript:;" onClick={() => RuntimeUtils.sendMessage(
+                <a href="javascript:;" class={styles.btn} onClick={() => RuntimeUtils.sendMessage(
                   {seatBan:false, ...RuntimeUtils.getSendMessageUser()},
                   'SeatsCtrl'
                 )}>上麦</a>
               </div>
             </div>
           </div>
-        )) : this.loadingLook ? <div class={styles.loadingStyle} v-loading={this.loadingLook} element-loading-background="rgba(0, 0, 0, 0.8)"></div> : <Empty text="暂无学员观看！" icon="noData-no-user" />}
+        )) : this.loadingLook ? <div class={styles.loadingStyle} v-loading={this.loadingLook} element-loading-background="rgba(0, 0, 0, 0.8)"></div> : <Empty style={{ paddingTop: '120px' }} text="暂无学员观看！" icon="noData-no-user" />}
       </div>
     )
   }

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

@@ -1,5 +1,6 @@
 import { defineComponent } from "vue";
 import { ElTag } from "element-plus";
+import VirtualList from 'vue-virtual-scroll-v3'
 import styles from './index.module.less'
 import event, { LIVE_EVENT_MESSAGE } from '/src/components/live-broadcast/event';
 import { state } from '/src/state'
@@ -56,10 +57,40 @@ export default defineComponent({
   },
   render() {
     return (
+      //     <VirtualList class="list-dynamic scroll-touch"
+      //     :data-key="'id'"
+      //     :data-sources="items"
+      //     :estimate-size="80"
+      //     :item-class="'list-item-dynamic'"
+      //     ref="virtualList"
+      //   >
+      //   <template #={source}>
+      //       <div class="item-inner">
+      //           <div class="head">
+      //               <span># {{ source.index }}</span>
+      //               <span>{{ source.name }}</span>
+      //           </div>
+      //           <div class="desc">{{ source.desc }}</div>
+      //       </div>
+      //   </template>
+      // </VirtualList>
+
+      // <VirtualList class={styles.itemContent}
+      // dataKey="id"
+      // dataSources={this.messageList}
+      // estimateSize="85"
+      // itemClass="'itemInfo'"
+      // ref="virtualList">
+      //   <template #default={source}>
+      //     <div class="item-inner">
+      //       111
+      //     </div>
+      //   </template>
+      // </VirtualList>
       <div style={{ minHeight: '100%', position: 'relative' }}>
         {this.messageList.length > 0 ? this.messageList.map((item : any) => (
           <div class={styles.itemContent}>
-            <img src="/src/assets/home/placehorder-icon.png" alt="" />
+            <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>
@@ -70,7 +101,7 @@ export default defineComponent({
               </div>
             </div>
           </div>
-        )) : this.loadingMessage ? <div class={styles.loadingStyle} v-loading={this.loadingMessage} element-loading-background="rgba(0, 0, 0, 0.8)"></div> : <Empty text="暂无学员互动！" icon="noData-no-message" />}
+        )) : this.loadingMessage ? <div class={styles.loadingStyle} v-loading={this.loadingMessage} element-loading-background="rgba(0, 0, 0, 0.8)"></div> : <Empty style={{ paddingTop: '120px' }} text="暂无学员互动！" icon="noData-no-message" />}
       </div>
     )
   }

src/pages/login/index.tsx

@@ -76,8 +76,8 @@ export default defineComponent({
               data: {
                 username: loginForm.username,
                 password: loginForm.password,
-                clientId: "system",
-                clientSecret: "system"
+                clientId: "teacher",
+                clientSecret: "teacher"
               }
             })
             console.log(res, 'res');

yarn.lock

@@ -4337,6 +4337,16 @@ vue-tsc@^0.29.8:
     "@volar/shared" "0.29.8"
     vscode-vue-languageservice "0.29.8"
 
+vue-virtual-list-v3@^1.3.6:
+  version "1.3.6"
+  resolved "https://registry.npmmirror.com/vue-virtual-list-v3/-/vue-virtual-list-v3-1.3.6.tgz#ed02ac6cc52327181c7c11ab06daa67a2aa33de3"
+  integrity sha512-vH+IDifHAxDUKc832SNtLYpY6bhy/zkKxlyHsneTC3Aw9SkKHD6IbVYz/nQYnedHLVulazG7c17neG/R13KbLQ==
+
+vue-virtual-scroll-list@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.npmmirror.com/vue-virtual-scroll-list/-/vue-virtual-scroll-list-2.3.3.tgz#290f0d04be814b93585f2ef232097b671141e5b1"
+  integrity sha512-heuwlZ+lEdcVSp66CpVXnyNdsiHl/XU1cvqJb0yUHGlLv6DGK8OX16FH8I3w/wKNXtHSPF9itdBBGJFrXkyHeg==
+
 vue@^3.2.25:
   version "3.2.31"
   resolved "https://registry.npmmirror.com/vue/-/vue-3.2.31.tgz#e0c49924335e9f188352816788a4cca10f817ce6"