更新

dist/index.html

@@ -5,7 +5,7 @@
     <link rel="icon" href="./favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>管乐迷</title>
-    <script type="module" crossorigin src="./assets/index.a7b37b82.js"></script>
+    <script type="module" crossorigin src="./assets/index.17cfe568.js"></script>
     <link rel="modulepreload" href="./assets/vendor.9de3b924.js">
     <link rel="stylesheet" href="./assets/index.fb6968e4.css">
     <script type="module">!function(){try{new Function("m","return import(m)")}catch(o){console.warn("vite: loading legacy build because dynamic import is unsupported, syntax error above should be ignored");var e=document.getElementById("vite-legacy-polyfill"),n=document.createElement("script");n.src=e.src,n.onload=function(){System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))},document.body.appendChild(n)}}();</script>
@@ -15,6 +15,6 @@
     
     <script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
     <script nomodule id="vite-legacy-polyfill" src="./assets/polyfills-legacy.68541211.js"></script>
-    <script nomodule id="vite-legacy-entry" data-src="./assets/index-legacy.c828a38f.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
+    <script nomodule id="vite-legacy-entry" data-src="./assets/index-legacy.423827c4.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
   </body>
 </html>

src/components/live-broadcast/header.tsx

@@ -38,11 +38,12 @@ export default defineComponent({
         // })
         await RuntimeUtils.closeLive()
         ElMessage.success('关闭成功')
-      } catch (error) {}
+      } catch (error) {
+      }
     },
     async closeRoom() {
       try {
-        await ElMessageBox.confirm('关闭后将切断视频，学生不可观', '提示', {
+        await ElMessageBox.confirm('结束后将无法进入直播间', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning',
@@ -54,7 +55,7 @@ export default defineComponent({
         RuntimeUtils.closeDevice('microphone')
         state.user = null
         removeToken();
-        ElMessage.success('关闭成功');
+        ElMessage.success('结束');
         (this as any).$router.push({
           path: '/login',
           query: {
@@ -75,7 +76,7 @@ export default defineComponent({
             <ElButton type="primary" color="#01A79E" onClick={this.startLive}>开启视频</ElButton>
           )}
 
-          <ElButton type="primary" color="#EA4132" onClick={this.closeRoom}>关闭直播间</ElButton>
+          <ElButton type="primary" color="#EA4132" onClick={this.closeRoom}>结束直播</ElButton>
         </div>
       </div>
     )

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

@@ -27,25 +27,26 @@
     right: 0;
     left: 0;
     z-index: 999;
-    .headerAnimation {
+    .headerContent{
       transform: translateY(0);
+      transition: all ease .3s;
     }
-    .headerContent{
-      opacity: 0;
-      animation-name: header-down;
-      animation-duration: 0.5s;
-      animation-fill-mode: forwards;
-      animation-delay: 0.1s;
+    .header-top {
+      transform: translateY(var(--header-height-down));
+      transition: all ease .3s;
+    }
+    &:hover .header-top {
+      transform: translateY(0);
+      transition: all ease .3s;
+      // opacity: 0;
+      // animation-name: header-down;
+      // animation-duration: 0.5s;
+      // animation-fill-mode: forwards;
+      // animation-delay: 0.1s;
     }
   }
 
-  .header-top {
-    opacity: 0;
-    animation-name: header-up;
-    animation-duration: 0.5s;
-    animation-fill-mode: forwards;
-    animation-delay: 0.1s;
-  }
+  
   @keyframes header-up {
     0% {
       transform: translateY(0);

src/components/live-broadcast/index.tsx

@@ -26,7 +26,11 @@ export default defineComponent({
     isLive() {
       console.log(runtime.videoStatus)
       if(runtime.videoStatus === 'liveing') {
-        this.toggleHeaderStatus(true)
+        setTimeout(() => {
+          this.headerStatus = true
+        }, 3000);
+      } else {
+        this.headerStatus = false
       }
       return runtime.videoStatus === 'liveing'
     }
@@ -149,26 +153,14 @@ export default defineComponent({
     closeLive() {
       // removeMedia(runtime.mediaStreams, runtime.mediaStreamTrack)
       runtime.videoStatus = 'stream'
-    },
-    toggleHeaderStatus(status: boolean, time?: number) {
-      setTimeout(() => {
-        this.headerStatus = status
-      }, time || 3000);
-    },
-    onMousemove() {
-      
-    },
-    onMouseleave() {
-
     }
   },
   render() {
     return (
       <div class={styles.main}>
         {this.isLive ? null : null}
-        {/* , this.headerStatus ? styles['header-top'] : null */}
-        <div class={[styles.headerSection]} onMousemove={this.onMousemove} onMouseleave={this.onMouseleave}>
-          <Header class={[this.headerStatus ? styles.headerContent : styles.headerAnimation]} />
+        <div class={[styles.headerSection]}>
+          <Header class={[styles.headerContent, this.headerStatus ? styles["header-top"] : null]} />
         </div>
         <div class={styles.video}>
           <video ref={videoRef}></video>