fix: 修复已知问题

src/components/FullLoading/index.ts

@@ -60,10 +60,10 @@ export const fullLoading = function (option: IOption): IOption {
 };
 
 // 不推荐。
-// export const useFullLoading = {
+// export const usefullLoading = {
 //   install: (app: App) => {
 //     console.log('kkkkkk', app);
 //     // 挂载在根实例的全局配置上
-//     app.config.globalProperties['$fullLoading'] = FullLoading;
+//     app.config.globalProperties['$fullLoading'] = fullLoading;
 //   },
 // };

src/components/FullLoading/main.vue

@@ -49,9 +49,9 @@ export default defineComponent({
     @include loadingSizeChange(30px, rgba($theme-color-gold, 0.5));
   }
   .txt {
+    position: relative;
     margin-top: 10px;
     font-size: 14px;
-    position: relative;
   }
 }
 </style>

src/components/QrPay/index.vue

@@ -23,7 +23,9 @@
     <div v-if="aliPayBase64 !== ''">
       <div class="bottom">
         <div class="sao">打开支付宝扫一扫</div>
-        <div class="expr">有效期5分钟（{{ formatDownTime(downTime) }}）</div>
+        <div class="expr">
+          有效期5分钟（{{ formatDownTime(downTimeEnd, downTimeStart) }}）
+        </div>
       </div>
     </div>
 
@@ -55,7 +57,7 @@ const payOk = ref(false);
 const aliPayBase64 = ref('');
 const payStatusTimer = ref();
 const downTimer = ref();
-const downTime = ref();
+const downTimeStart = ref();
 const downTimeEnd = ref();
 
 const currentPayStatus = ref(PayStatusEnum.error);
@@ -78,25 +80,22 @@ onMounted(() => {
   });
 });
 
-function formatDownTime(startTime: number) {
-  const time2 = downTimeEnd.value - startTime;
-  const ms = 1;
-  const second = ms * 1000;
-  const minute = second * 60;
-  const hour = minute * 60;
-  const day = hour * 24;
-  if (time2 > day) {
-    const res = (time2 / day).toFixed(4).split('.');
-    return `${res[0]}天${Math.ceil(Number(`0.${res[1]}`) * 24)}时`;
-  } else if (time2 > hour) {
-    const res = (time2 / hour).toFixed(4).split('.');
-    return `${res[0]}时${Math.ceil(Number(`0.${res[1]}`) * 60)}分`;
-  } else if (time2 > minute) {
-    const res = (time2 / minute).toFixed(4).split('.');
-    return `${res[0]}分${Math.ceil(Number(`0.${res[1]}`) * 60)}秒`;
+function formatDownTime(endTime: number, startTime: number) {
+  const times = (endTime - startTime) / 1000;
+  // js获取剩余天数
+  const d = parseInt(String(times / 60 / 60 / 24));
+  // js获取剩余小时
+  const h = parseInt(String((times / 60 / 60) % 24));
+  // js获取剩余分钟
+  const m = parseInt(String((times / 60) % 60));
+  // js获取剩余秒
+  const s = parseInt(String(times % 60));
+  if (d > 0) {
+    return `${d}天${h}时`;
+  } else if (h > 0) {
+    return `${h}时${m}分`;
   } else {
-    const res = (time2 / second).toFixed(4).split('.');
-    return `${res[0]}秒`;
+    return `${m}分${s}秒`;
   }
 }
 
@@ -115,9 +114,9 @@ async function generateQR(text) {
 function handleDownTime() {
   clearInterval(downTimer.value);
   downTimeEnd.value = +new Date() + 1000 * 60 * 5;
-  downTime.value = +new Date();
+  downTimeStart.value = +new Date();
   downTimer.value = setInterval(() => {
-    downTime.value = +new Date();
+    downTimeStart.value = +new Date();
   }, 1000);
 }
 

src/directives/loading/index.ts

@@ -3,7 +3,7 @@ import { App, ComponentPublicInstance, Directive, createApp } from 'vue';
 import main from '@/components/FullLoading/main.vue';
 
 const map = new Map<
-  string,
+  HTMLElement,
   {
     app: App<Element>;
     instance: ComponentPublicInstance<InstanceType<typeof main>>;
@@ -27,7 +27,7 @@ export default <Directive>{
       app.mount(container);
     el.appendChild(container);
     instance.loading = value;
-    vnode.scopeId && map.set(vnode.scopeId, { app, instance });
+    map.set(el, { app, instance });
     return instance;
   },
   // 绑定元素的父组件更新前调用
@@ -35,17 +35,15 @@ export default <Directive>{
   // 在绑定元素的父组件及他自己的所有子节点都更新后调用
   updated(el, binding, vnode) {
     const { value } = binding;
-    if (vnode.scopeId) {
-      const res = map.get(vnode.scopeId);
-      if (res) {
-        res.instance.loading = value;
-      }
+    const res = map.get(el);
+    if (res) {
+      res.instance.loading = value;
     }
   },
   // 绑定元素的父组件卸载前调用
   beforeUnmount() {},
   // 绑定元素的父组件卸载后调用
   unmounted(el, binding, vnode) {
-    vnode.scopeId && map.get(vnode.scopeId)?.app.unmount();
+    map.get(el)?.app.unmount();
   },
 };

src/hooks/use-pull.ts

@@ -9,6 +9,7 @@ import {
   IAdminIn,
   ICandidate,
   IDanmu,
+  ILive,
   ILiveUser,
   IOffer,
   MediaTypeEnum,
@@ -42,6 +43,8 @@ export function usePull({
   const heartbeatTimer = ref();
   const roomId = ref(route.params.roomId as string);
   const roomName = ref('');
+  const userName = ref('');
+  const userAvatar = ref('');
   const streamurl = ref('');
   const flvurl = ref('');
   const danmuStr = ref('');
@@ -547,13 +550,15 @@ export function usePull({
     });
 
     // 用户加入房间
-    instance.socketIo.on(WsMsgTypeEnum.joined, (data) => {
+    instance.socketIo.on(WsMsgTypeEnum.joined, (data: { data: ILive }) => {
       prettierReceiveWebsocket(WsMsgTypeEnum.joined, data);
-      roomName.value = data.data.roomName;
-      track.audio = data.data.track_audio;
-      track.video = data.data.track_video;
-      streamurl.value = data.data.streamurl;
-      flvurl.value = data.data.flvurl;
+      roomName.value = data.data.live_room?.roomName!;
+      userName.value = data.data.user?.username!;
+      userAvatar.value = data.data.user?.avatar!;
+      track.audio = data.data.track_audio!;
+      track.video = data.data.track_video!;
+      streamurl.value = data.data.streamurl!;
+      flvurl.value = data.data.flvurl!;
       if (isFlv) {
         useFlvPlay(flvurl.value, remoteVideoRef.value!);
       }
@@ -615,6 +620,8 @@ export function usePull({
     addVideo,
     balance,
     roomName,
+    userName,
+    userAvatar,
     roomNoLive,
     damuList,
     giftList,

src/layout/head/index.vue

@@ -63,6 +63,24 @@
       </div>
     </div>
     <div class="right">
+      <Dropdown class="doc">
+        <template #btn>
+          <div class="btn">
+            文档<VPIconChevronDown class="icon"></VPIconChevronDown>
+          </div>
+        </template>
+        <template #list>
+          <div class="list">
+            <a
+              class="item"
+              @click="quickStart"
+            >
+              <div class="txt">快速上手</div>
+            </a>
+          </div>
+        </template>
+      </Dropdown>
+
       <Dropdown class="ecosystem">
         <template #btn>
           <div class="btn">
@@ -294,6 +312,10 @@ onMounted(() => {
     'https://img.shields.io/github/stars/galaxy-s10/billd-live?label=Star&logo=GitHub&labelColor=white&logoColor=black&style=social&cacheSeconds=3600';
 });
 
+function quickStart() {
+  window.$message.info('敬请期待！');
+}
+
 function handleStartLive(key) {
   if (!loginTip()) {
     return;
@@ -396,6 +418,7 @@ function handleStartLive(key) {
     align-items: center;
     height: 100%;
 
+    .doc,
     .about,
     .ecosystem {
       margin-right: 20px;

src/views/faq/index.vue

@@ -7,9 +7,13 @@
         <div class="item">
           <h2>billd-live是什么？</h2>
           <p>
-            billd-live 是一个web端的直播平台，目前支持使用WebRTC或SRS进行直播。
+            billd-live 是一个web端的直播平台，目前支持使用WebRTC或SRS进行直播：
           </p>
+          <p>- 原生webrtc一对多直播（DONE）</p>
+          <p>- srs-webrtc一对多直播（DONE）</p>
+          <p>- 原生webrtc多对多直播（DONE）</p>
         </div>
+        <div class="hr"></div>
         <div class="item">
           <h2>谁在维护billd-live？</h2>
           <p>
@@ -118,6 +122,9 @@ const list = ref([]);
       color: rgba(60, 60, 60, 0.7);
       font-size: 13px;
       cursor: pointer;
+      &:hover {
+        color: #213547;
+      }
     }
   }
 }

src/views/pull/index.vue

@@ -8,11 +8,14 @@
           class="head"
         >
           <div class="info">
-            <div class="avatar"></div>
+            <div
+              class="avatar"
+              :style="{ backgroundImage: `url(${userAvatar})` }"
+            ></div>
             <div class="detail">
-              <div class="top">房间名：{{ roomName }}</div>
+              <div class="top">{{ userName || '-' }}</div>
               <div class="bottom">
-                <span>你的socketId：{{ getSocketId() }}</span>
+                <span>{{ roomName }}</span>
               </div>
             </div>
           </div>
@@ -232,6 +235,8 @@ const {
   addVideo,
   balance,
   roomName,
+  userName,
+  userAvatar,
   roomNoLive,
   damuList,
   giftList,
@@ -324,15 +329,6 @@ onMounted(() => {
       display: flex;
       justify-content: space-between;
       padding: 10px 20px;
-      .tag {
-        display: inline-block;
-        margin-right: 5px;
-        padding: 1px 4px;
-        border: 1px solid;
-        border-radius: 2px;
-        color: #9499a0;
-        font-size: 12px;
-      }
 
       .info {
         display: flex;
@@ -344,7 +340,7 @@ onMounted(() => {
           width: 64px;
           height: 64px;
           border-radius: 50%;
-          background-color: $theme-color-gold;
+          @extend %containBg;
         }
         .detail {
           .top {
@@ -518,7 +514,7 @@ onMounted(() => {
             width: 25px;
             height: 25px;
             border-radius: 50%;
-            background-color: $theme-color-gold;
+            @extend %containBg;
           }
           .username {
             color: black;

src/views/sponsors/index.vue

@@ -20,6 +20,18 @@
           </p>
         </div>
         <div class="hr"></div>
+        <div class="item">
+          <h2>赞助等级</h2>
+          <ul>
+            <li>铂金赞助商（2500元/月）</li>
+            <li>金牌赞助商（1500元/月）</li>
+            <li>银牌赞助商（1000元/月）</li>
+            <li>铜牌赞助商（500元/月）</li>
+            <li>慷慨支持者（100元/月）</li>
+            <li>个人支持者（10元/月）</li>
+          </ul>
+        </div>
+        <div class="hr"></div>
         <div class="item sponsors">
           <h2>当前赞助商</h2>
           <h3>铂金赞助商</h3>
@@ -77,6 +89,7 @@
       <div class="title">本页目录</div>
       <div class="item">以个人名义赞助billd-live</div>
       <div class="item">以企业名义赞助billd-live</div>
+      <div class="item">赞助等级</div>
       <div class="item">当前赞助商</div>
     </div>
   </div>
@@ -250,6 +263,9 @@ const silverList = ref([
       color: rgba(60, 60, 60, 0.7);
       font-size: 13px;
       cursor: pointer;
+      &:hover {
+        color: #213547;
+      }
     }
   }
 }