feat: 优化细节

src/api/other.ts

@@ -0,0 +1,11 @@
+import request from '@/utils/request';
+
+/**
+ * 获取后端信息
+ */
+export function fetchServerInfo() {
+  return request.instance({
+    url: '/other/server_info',
+    method: 'get',
+  });
+}

src/constant.ts

@@ -5,6 +5,9 @@ export const QQ_REDIRECT_URI = 'https://live.hsslive.cn/oauth/qq_login';
 export const AUTHOR_GITHUB = 'https://github.com/galaxy-s10';
 export const LIVE_CLIENT_URL = 'https://live.hsslive.cn';
 
+export const APIFOX_URL =
+  'https://apifox.com/apidoc/shared-c7556b54-17b2-494e-a039-572d83f103ed/';
+
 // 全局的cookie的key
 export const COOKIE_KEY = {
   loginInfo: 'loginInfo',

src/hooks/use-pull.ts

@@ -47,6 +47,7 @@ export function usePull({
   const userAvatar = ref('');
   const streamurl = ref('');
   const flvurl = ref('');
+  const coverImg = ref('');
   const danmuStr = ref('');
   const balance = ref('0.00');
   const damuList = ref<IDanmu[]>([]);
@@ -558,6 +559,7 @@ export function usePull({
         track.video = data.data.track_video!;
         streamurl.value = data.data.streamurl!;
         flvurl.value = data.data.flvurl!;
+        coverImg.value = data.data.coverImg!;
         if (isFlv) {
           await startPlay({
             flvurl: flvurl.value,
@@ -625,6 +627,7 @@ export function usePull({
     roomName,
     userName,
     userAvatar,
+    coverImg,
     roomNoLive,
     damuList,
     giftList,

src/interface.ts

@@ -6,12 +6,43 @@ export enum PayStatusEnum {
   TRADE_SUCCESS = 'TRADE_SUCCESS',
 }
 
+export interface IServerInfo {
+  project_name: string;
+  project_env: string;
+  updated_at: string;
+  server: {
+    uname: string;
+    redisVersion: string;
+    mysqlVersion: string;
+    nginxVersion: string;
+    dockerVersion: string;
+    pm2Version: string;
+    nodeVersion: string;
+    npmVersion: string;
+    pnpmVersion: string;
+  };
+  billd: {
+    pkgName: string;
+    pkgVersion: string;
+    pkgRepository: string;
+    commitSubject: string;
+    commitBranch: string;
+    committerDate: string;
+    commitHash: string;
+    committerName: string;
+    committerEmail: string;
+    lastBuildDate: string;
+    nodeVersion: string;
+  };
+}
+
 export enum RankTypeEnum {
   liveRoom = 'liveRoom',
   user = 'user',
   sponsors = 'sponsors',
   wallet = 'wallet',
 }
+
 export interface IWallet {
   id?: number;
   user_id?: number;

src/layout/head/index.vue

@@ -77,6 +77,13 @@
             >
               <div class="txt">快速上手</div>
             </a>
+            <a
+              class="item"
+              @click="openToTarget(APIFOX_URL)"
+            >
+              <div class="txt">接口文档</div>
+              <VPIconExternalLink class="icon"></VPIconExternalLink>
+            </a>
           </div>
         </template>
       </Dropdown>
@@ -236,6 +243,7 @@ import { useRouter } from 'vue-router';
 import Dropdown from '@/components/Dropdown/index.vue';
 import VPIconChevronDown from '@/components/icons/VPIconChevronDown.vue';
 import VPIconExternalLink from '@/components/icons/VPIconExternalLink.vue';
+import { APIFOX_URL } from '@/constant';
 import { loginTip, useQQLogin } from '@/hooks/use-login';
 import { liveTypeEnum } from '@/interface';
 import { routerName } from '@/router';

src/views/faq/index.vue

@@ -4,6 +4,32 @@
       <h1 class="title">常见问题</h1>
       <div class="hr"></div>
       <div class="list">
+        <div class="item">
+          <h2>如何本地运行billd-live？</h2>
+          <p>
+            1. 仔细阅读
+            <span
+              class="link"
+              @click="
+                openToTarget('https://github.com/galaxy-s10/billd-live#readme')
+              "
+              >billd-live的readme
+            </span>
+          </p>
+          <p>
+            2. 仔细阅读
+            <span
+              class="link"
+              @click="
+                openToTarget(
+                  'https://github.com/galaxy-s10/billd-live-server#readme'
+                )
+              "
+              >billd-live-server的readme
+            </span>
+          </p>
+        </div>
+        <div class="hr"></div>
         <div class="item">
           <h2>billd-live是什么？</h2>
           <p>
@@ -49,12 +75,13 @@
         <div class="hr"></div>
         <div class="item">
           <h2>如何参与贡献？</h2>
-          <p>非常欢迎！具体TODO</p>
+          <p>非常欢迎！欢迎提Issue 或 PR！</p>
         </div>
       </div>
     </div>
     <div class="aside">
       <div class="title">本页目录</div>
+      <div class="item">如何本地运行billd-live？</div>
       <div class="item">billd-live是什么？</div>
       <div class="item">谁在维护billd-live？</div>
       <div class="item">billd-live使用了什么技术栈？</div>
@@ -64,6 +91,7 @@
 </template>
 
 <script lang="ts" setup>
+import { openToTarget } from 'billd-utils';
 import { ref } from 'vue';
 
 import { AUTHOR_GITHUB } from '@/constant';
@@ -99,6 +127,7 @@ const list = ref([]);
       color: $theme-color-gold;
       text-decoration: none;
       font-weight: 500;
+      cursor: pointer;
     }
     .list {
       h2 {

src/views/home/index.vue

@@ -24,12 +24,23 @@
           x5-video-player-fullscreen="true"
           x5-video-orientation="portraint"
           :muted="appStore.muted"
+          @click="showControls = !showControls"
         ></video>
         <template v-if="currentLiveRoom">
-          <div class="controls">
+          <div
+            class="controls"
+            :style="{
+              display: !isMobile() ? 'none' : showControls ? 'block' : 'none',
+            }"
+          >
             <VideoControls></VideoControls>
           </div>
-          <div class="join-btn">
+          <div
+            class="join-btn"
+            :style="{
+              display: !isMobile() ? 'none' : showControls ? 'block' : 'none',
+            }"
+          >
             <div
               v-if="currentLiveRoom.system === 2"
               class="btn webrtc"
@@ -85,14 +96,12 @@
       </div>
     </div>
 
-    <div class="foot">
-      <h1>billd-live当前是beta状态，欢迎测试~</h1>
-      <h2>billd-live目前只有作者一人维护，期待有志者参与~</h2>
-    </div>
+    <div class="foot"></div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { isMobile } from 'billd-utils';
 import { nextTick, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
@@ -104,6 +113,7 @@ import { useAppStore } from '@/store/app';
 
 const appStore = useAppStore();
 const router = useRouter();
+const showControls = ref(false);
 const liveRoomList = ref<ILive[]>([]);
 const currentLiveRoom = ref<ILive>();
 const localVideoRef = ref<HTMLVideoElement>();
@@ -223,10 +233,10 @@ function joinFlvRoom() {
 
       &:hover {
         .join-btn {
-          display: inline-flex;
+          display: inline-flex !important;
         }
         .controls {
-          display: block;
+          display: block !important;
         }
       }
       .join-btn {

src/views/pull/index.vue

@@ -25,6 +25,10 @@
           class="container"
         >
           <div class="video-wrap">
+            <div
+              class="cover"
+              :style="{ backgroundImage: `url(${coverImg})` }"
+            ></div>
             <video
               id="remoteVideo"
               ref="remoteVideoRef"
@@ -36,8 +40,12 @@
               x5-video-player-fullscreen="true"
               x5-video-orientation="portraint"
               :muted="appStore.muted"
+              @click="showControls = !showControls"
             ></video>
-            <div class="controls">
+            <div
+              class="controls"
+              :style="{ display: showControls ? 'block' : 'none' }"
+            >
               <VideoControls></VideoControls>
             </div>
           </div>
@@ -211,6 +219,7 @@ const userStore = useUserStore();
 const appStore = useAppStore();
 
 const giftGoodsList = ref<IGoods[]>([]);
+const showControls = ref(false);
 const giftLoading = ref(false);
 const showRecharge = ref(false);
 const showJoin = ref(true);
@@ -237,6 +246,7 @@ const {
   roomName,
   userName,
   userAvatar,
+  coverImg,
   roomNoLive,
   damuList,
   giftList,
@@ -340,6 +350,7 @@ onMounted(() => {
           width: 64px;
           height: 64px;
           border-radius: 50%;
+
           @extend %containBg;
         }
         .detail {
@@ -384,10 +395,20 @@ onMounted(() => {
       justify-content: space-between;
       .video-wrap {
         position: relative;
+        overflow: hidden;
         flex: 1;
         height: 100%;
         background-color: rgba($color: #000000, $alpha: 0.5);
+        .cover {
+          position: absolute;
+          background-position: center center;
+          background-size: cover;
+          filter: blur(30px);
+
+          inset: 0;
+        }
         #remoteVideo {
+          position: relative;
           width: 100%;
           height: 100%;
         }
@@ -514,6 +535,7 @@ onMounted(() => {
             width: 25px;
             height: 25px;
             border-radius: 50%;
+
             @extend %containBg;
           }
           .username {

src/views/release/index.vue

@@ -2,21 +2,62 @@
   <div class="release-wrap">
     <div class="content">
       <h1 class="title">版本发布</h1>
-      <p>最近更新：{{ billd.lastBuildDate }}</p>
-      <p>提交哈希：{{ billd.commitHash }}</p>
+      <div class="hr"></div>
+      <div class="list">
+        <div class="item">
+          <h2>前端版本</h2>
+          <p>提交日期：{{ billd.committerDate }}</p>
+          <p>提交哈希：{{ billd.commitHash }}</p>
+          <p>最后构建：{{ billd.lastBuildDate }}</p>
+        </div>
+        <div class="hr"></div>
+        <div
+          v-loading="loading"
+          class="item"
+        >
+          <h2>后端版本</h2>
+          <p>提交日期：{{ serverInfo?.billd.committerDate }}</p>
+          <p>提交哈希：{{ serverInfo?.billd.commitHash }}</p>
+          <p>最后构建：{{ serverInfo?.billd.lastBuildDate }}</p>
+        </div>
+      </div>
     </div>
     <div class="aside">
       <div class="title">本页目录</div>
-      <div class="item">TODO</div>
+      <div class="item">前端版本</div>
+      <div class="item">后端版本</div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { BilldHtmlWebpackPluginLog } from '@/interface';
+import { onMounted, ref } from 'vue';
 
+import { fetchServerInfo } from '@/api/other';
+import { BilldHtmlWebpackPluginLog, IServerInfo } from '@/interface';
 // @ts-ignore
 const billd: BilldHtmlWebpackPluginLog = process.env.BilldHtmlWebpackPlugin;
+
+const serverInfo = ref<IServerInfo>();
+const loading = ref(false);
+
+async function handleFetchServerInfo() {
+  try {
+    loading.value = true;
+    const res = await fetchServerInfo();
+    if (res.code === 200) {
+      serverInfo.value = res.data;
+    }
+  } catch (error) {
+    console.log(error);
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => {
+  handleFetchServerInfo();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -42,7 +83,17 @@ const billd: BilldHtmlWebpackPluginLog = process.env.BilldHtmlWebpackPlugin;
       height: 1px;
       background-color: #e7e7e7;
     }
+    .list {
+      h2 {
+        font-weight: 600;
+      }
+      .item {
+        position: relative;
+        font-size: 16px;
+      }
+    }
   }
+
   .aside {
     padding-left: 90px;
     .title {
@@ -56,6 +107,9 @@ const billd: BilldHtmlWebpackPluginLog = process.env.BilldHtmlWebpackPlugin;
       color: rgba(60, 60, 60, 0.7);
       font-size: 13px;
       cursor: pointer;
+      &:hover {
+        color: #213547;
+      }
     }
   }
 }

tsconfig.json

@@ -38,6 +38,7 @@
     "./.eslintrc.js",
     "./babel.config.js",
     "./postcss.config.js",
+    "./components.d.ts",
     "windi.config.ts"
   ],
   // https://github.com/microsoft/TypeScript/wiki/Performance