feat: 优化-2024/12/26 21:13:09

index.html

@@ -12,9 +12,6 @@
       content="width=device-width, initial-scale=1.0"
     />
     <title><%- title %></title>
-    <script src="https://res.hsslive.cn/npm/video.js@8.21.0/video.min.js"></script>
-    <script src="https://res.hsslive.cn/npm/mpegts.js@1.7.3/mpegts.min.js"></script>
-    <script src="https://res.hsslive.cn/npm/cos-js-sdk-v5@1.8.6/cos-js-sdk-v5.min.js"></script>
     <!-- <script src="https://res.hsslive.cn/npm/fabric@5.4.2/index.min.js"></script> -->
     <!-- <script src="https://res.hsslive.cn/npm/@vue/runtime-core@3.5.13/index.min.js"></script> -->
     <!-- <script src="https://res.hsslive.cn/npm/vue-demi@0.14.6/index.iife.min.js"></script> -->

src/App.vue

@@ -23,7 +23,7 @@ import { isMobile } from 'billd-utils';
 import { GlobalThemeOverrides, NConfigProvider } from 'naive-ui';
 import { onMounted } from 'vue';
 
-import { fetchAreaList } from '@/api/area';
+import { fetchAreaGetTreeArea } from '@/api/area';
 import { fetchGlobalMsgMyList } from '@/api/globalMsg';
 import NaiveMessage from '@/components/NaiveMessage/index.vue';
 import NaiveModal from '@/components/NaiveModal/index.vue';
@@ -99,9 +99,13 @@ async function handleGlobalMsgMyList() {
 }
 
 async function getAreaList() {
-  const res = await fetchAreaList({ orderName: 'priority', orderBy: 'desc' });
-  if (res.code === 200) {
-    appStore.areaList = res.data.rows;
+  const res = await fetchAreaGetTreeArea({
+    orderName: 'priority',
+    orderBy: 'desc',
+    id: 0,
+  });
+  if (res.code === 200 && res.data) {
+    appStore.areaList = res.data;
   }
 }
 

src/api/area.ts

@@ -2,6 +2,10 @@ import { IPaging } from '@/interface';
 import { ILiveRoom } from '@/types/ILiveRoom';
 import request from '@/utils/request';
 
+export function fetchAreaGetTreeArea(params) {
+  return request.get('/area/get_tree_area', { params });
+}
+
 export function fetchAreaList(params) {
   return request.get('/area/list', { params });
 }

src/interface.ts

@@ -1,4 +1,4 @@
-import { ILiveRoom, LiveRoomStatusEnum } from '@/types/ILiveRoom';
+import { ILiveRoom } from '@/types/ILiveRoom';
 import { IUser } from '@/types/IUser';
 
 export interface IBilibiliLiveUserRecommend {
@@ -642,15 +642,20 @@ export interface IRole {
 
 export interface IArea {
   id?: number;
+  p_id?: number;
   name?: string;
+  status?: SwitchEnum;
+  hot_status?: SwitchEnum;
   /** 备注 */
   remark?: string;
   /** 权重 */
   priority?: number;
-  area_live_rooms?: IAreaLiveRoom[];
+
+  children?: IArea[];
+
   live_rooms?: ILiveRoom[];
-  live_room_is_show?: SwitchEnum;
-  live_room_status?: LiveRoomStatusEnum;
+  area_live_rooms?: IAreaLiveRoom[];
+
   created_at?: string;
   updated_at?: string;
   deleted_at?: string;

src/layout/mobile/head/index.vue

@@ -77,9 +77,9 @@ const options = [
 
 onMounted(() => {
   githubStar.value =
-    'https://img.shields.io/github/stars/galaxy-s10/billd-live?label=Star&logo=GitHub&labelColor=white&logoColor=black&style=social';
+    'https://img.shields.io/github/stars/galaxy-s10/billd-live.svg?label=Star&logo=GitHub&labelColor=white&logoColor=black&style=social&maxAge=86400';
   githubFork.value =
-    'https://img.shields.io/github/forks/galaxy-s10/billd-live?label=Fork&logo=GitHub&labelColor=white&logoColor=black&style=social';
+    'https://img.shields.io/github/forks/galaxy-s10/billd-live.svg?label=Fork&logo=GitHub&labelColor=white&logoColor=black&style=social&maxAge=86400';
 });
 
 function handleSelect(key) {

src/layout/pc/head/index.vue

@@ -22,70 +22,18 @@
           </a>
 
           <a
+            v-for="(item, index) in appStore.areaList"
+            :key="index"
             class="item"
             :class="{
-              active: router.currentRoute.value.name === routerName.area,
+              active: Number(route.params.id) === item.id,
             }"
-            @click.prevent="router.push({ name: routerName.area })"
+            @click.prevent="
+              router.push({ name: routerName.area, params: { id: item.id } })
+            "
           >
-            {{ t('layout.area') }}
+            {{ item.name }}
           </a>
-
-          <a
-            v-if="!isMobile()"
-            class="item"
-            :href="COMMON_URL.admin"
-            @click.prevent="openToTarget(COMMON_URL.admin)"
-          >
-            {{ t('layout.liveAdmin') }}
-          </a>
-
-          <a
-            v-if="!isMobile()"
-            class="item"
-            @click.prevent="router.push({ name: routerName.downloadLive })"
-          >
-            {{ t('layout.download') }}
-          </a>
-
-          <!-- <Dropdown
-            class="item"
-            v-if="!isMobile()"
-          >
-            <template #btn>
-              <div class="btn">
-                <span>{{ t('layout.download') }}</span>
-                <VPIconChevronDown class="icon"></VPIconChevronDown>
-              </div>
-            </template>
-            <template #list>
-              <div class="list">
-                <a
-                  class="item"
-                  @click.prevent="
-                    router.push({ name: routerName.downloadLive })
-                  "
-                >
-                  <div class="txt">{{ t('layout.liveClient') }}</div>
-                </a>
-                <a
-                  class="item"
-                  @click.prevent="
-                    router.push({ name: routerName.downloadRemoteDesktop })
-                  "
-                >
-                  <div class="txt">{{ t('layout.remoteDesktopClient') }}</div>
-                </a>
-              </div>
-            </template>
-          </Dropdown> -->
-
-          <!-- <a
-            class="item"
-            @click.prevent="openToTarget(COMMON_URL.desk)"
-          >
-            {{ t('layout.remoteDesktop') }}
-          </a> -->
         </div>
       </div>
 
@@ -472,7 +420,7 @@
 import { isMobile, openToTarget, windowReload } from 'billd-utils';
 import { onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 import { fetchCreateSignin, fetchTodayIsSignin } from '@/api/signin';
 import Dropdown from '@/components/Dropdown/index.vue';
@@ -489,6 +437,7 @@ import { LiveRoomTypeEnum } from '@/types/ILiveRoom';
 import { formatMoney, getLiveRoomPageUrl } from '@/utils';
 
 const { t, locale } = useI18n();
+const route = useRoute();
 const router = useRouter();
 const userStore = useUserStore();
 const appStore = useAppStore();

src/router/index.ts

@@ -151,15 +151,8 @@ export const defaultRoutes: RouteRecordRaw[] = [
       },
       {
         name: routerName.area,
-        path: '/area',
+        path: '/area/:id',
         component: () => import('@/views/area/index.vue'),
-        children: [
-          {
-            name: routerName.areaDetail,
-            path: '/area/:id',
-            component: () => import('@/views/area/id/index.vue'),
-          },
-        ],
       },
       {
         name: routerName.rank,

src/spec-config.ts

@@ -62,3 +62,5 @@ export enum REDIS_DATABASE {
   blog,
   live,
 }
+
+export const KONGKONG_SERVER_IP = '8.218.5.78';

src/views/area/id/index.vue

@@ -1,250 +0,0 @@
-<template>
-  <div
-    ref="topRef"
-    class="area-wrap"
-    :style="{ height: height + 'px' }"
-  >
-    <LongList
-      v-if="height > 0"
-      ref="longListRef"
-      class="list"
-      :rootMargin="{
-        top: 0,
-        bottom: 100,
-        left: 0,
-        right: 0,
-      }"
-      :status="status"
-      @get-list-data="getListData"
-    >
-      <div
-        v-for="(item, index) in liveRoomList"
-        :key="index"
-        class="item"
-        @click="goRoom(item)"
-      >
-        <div
-          v-lazy:background-image="item?.cover_img || item?.users?.[0]?.avatar"
-          class="cover"
-        >
-          <div
-            v-if="item?.live"
-            class="living-ico"
-          >
-            直播中
-          </div>
-          <div
-            v-if="
-              item?.cdn === SwitchEnum.yes ||
-              [
-                LiveRoomTypeEnum.tencent_css,
-                LiveRoomTypeEnum.tencent_css_pk,
-              ].includes(item.type!)
-            "
-            class="cdn-ico"
-          >
-            <div class="txt">CDN</div>
-          </div>
-          <div class="txt">{{ item?.users?.[0]?.username }}</div>
-        </div>
-        <div class="desc">{{ item?.name }}</div>
-      </div>
-    </LongList>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { openToTarget } from 'billd-utils';
-import { onMounted, reactive, ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
-
-import { fetchLiveRoomList } from '@/api/area';
-import LongList from '@/components/LongList/index.vue';
-import { SwitchEnum } from '@/interface';
-import router, { routerName } from '@/router';
-import { ILiveRoom, LiveRoomTypeEnum } from '@/types/ILiveRoom';
-
-const liveRoomList = ref<ILiveRoom[]>([]);
-const route = useRoute();
-const status = ref<'loading' | 'nonedata' | 'allLoaded' | 'normal'>('loading');
-
-const longListRef = ref<InstanceType<typeof LongList>>();
-const topRef = ref<HTMLDivElement>();
-const height = ref(-1);
-const loading = ref(false);
-const hasMore = ref(true);
-const pageParams = reactive({
-  nowPage: 0,
-  pageSize: 50,
-});
-
-watch(
-  () => route.params.id,
-  (newVal) => {
-    if (!newVal) return;
-    liveRoomList.value = [];
-    pageParams.nowPage = 0;
-    getData();
-  }
-);
-
-function handleStatus() {
-  if (loading.value) {
-    status.value = 'loading';
-  } else if (hasMore.value) {
-    status.value = 'normal';
-  } else {
-    status.value = 'allLoaded';
-  }
-  if (!liveRoomList.value?.length) {
-    status.value = 'nonedata';
-  }
-}
-
-function goRoom(item: ILiveRoom) {
-  if (!item.live) {
-    window.$message.info('该直播间没在直播~');
-    return;
-  }
-  const url = router.resolve({
-    name: routerName.pull,
-    params: { roomId: item.id },
-  });
-  openToTarget(url.href);
-}
-
-onMounted(() => {
-  if (topRef.value) {
-    height.value =
-      document.documentElement.clientHeight -
-      topRef.value.getBoundingClientRect().top;
-  }
-  getData();
-});
-
-function getListData() {
-  if (!hasMore.value) return;
-  getData();
-}
-
-async function getData() {
-  try {
-    if (loading.value) return;
-    loading.value = true;
-    status.value = 'loading';
-    pageParams.nowPage += 1;
-    const res = await fetchLiveRoomList({
-      id: Number(route.params.id),
-      live_room_is_show: SwitchEnum.yes,
-      nowPage: pageParams.nowPage,
-      pageSize: pageParams.pageSize,
-    });
-    if (res.code === 200) {
-      liveRoomList.value.push(...res.data.rows);
-      hasMore.value = res.data.hasMore;
-    }
-  } catch (error) {
-    pageParams.nowPage -= 1;
-    console.log(error);
-  }
-  loading.value = false;
-  status.value = 'normal';
-  handleStatus();
-}
-</script>
-
-<style lang="scss" scoped>
-.area-wrap {
-  padding: 0 20px;
-
-  .list {
-    display: flex;
-    align-content: flex-start;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    .item {
-      display: inline-block;
-      margin-right: 25px;
-      margin-bottom: 12px;
-      width: 300px;
-      cursor: pointer;
-      .cover {
-        position: relative;
-        overflow: hidden;
-        width: 100%;
-        height: 150px;
-        border-radius: 8px;
-
-        @extend %containBg;
-        .living-ico {
-          position: absolute;
-          top: 0px;
-          left: 0px;
-          z-index: 10;
-          padding: 0 10px;
-          height: 20px;
-          border-radius: 8px 0 10px;
-          background-color: $theme-color-gold;
-          color: white;
-          text-align: center;
-          font-size: 12px;
-          line-height: 20px;
-        }
-        .cdn-ico {
-          position: absolute;
-          top: -10px;
-          right: -10px;
-          z-index: 2;
-          width: 70px;
-          height: 28px;
-          background-color: #f87c48;
-          color: white;
-          transform: rotate(45deg);
-          transform-origin: bottom;
-          .txt {
-            margin-left: 18px;
-            background-image: initial !important;
-            font-size: 13px;
-          }
-        }
-
-        .txt {
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          box-sizing: border-box;
-          padding: 4px 8px;
-          width: 100%;
-          border-radius: 0 0 4px 4px;
-          background-image: linear-gradient(
-            -180deg,
-            rgba(0, 0, 0, 0),
-            rgba(0, 0, 0, 0.6)
-          );
-          color: white;
-          text-align: initial;
-          font-size: 13px;
-
-          @extend %singleEllipsis;
-        }
-      }
-      .desc {
-        margin-top: 4px;
-        font-size: 14px;
-
-        @extend %singleEllipsis;
-      }
-    }
-    .null {
-      width: 100%;
-      text-align: center;
-    }
-  }
-  .paging-wrap {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 20px;
-  }
-}
-</style>

src/views/area/index.vue

@@ -1,80 +1,282 @@
 <template>
-  <div class="tab-list">
+  <div
+    ref="topRef"
+    class="area-wrap"
+    :style="{ height: height + 'px' }"
+  >
     <div
-      v-for="(item, index) in appStore.areaList"
-      :key="index"
-      class="tab"
-      :class="{ active: router.currentRoute.value.params.id === item.id + '' }"
-      @click.prevent="changeArea(item)"
+      v-if="0"
+      class="tag-wrap"
     >
-      {{ item.name }}
+      <span
+        v-for="(item, index) in appStore.areaList.find(
+          (v) => v.id === Number(route.params.id)
+        )?.children"
+        :key="index"
+        class="tag"
+      >
+        {{ item.name }}
+      </span>
     </div>
-    <div v-if="!appStore.areaList.length">暂无分区</div>
-  </div>
 
-  <router-view></router-view>
+    <LongList
+      v-if="height > 0"
+      ref="longListRef"
+      class="list"
+      :rootMargin="{
+        top: 0,
+        bottom: 100,
+        left: 0,
+        right: 0,
+      }"
+      :status="status"
+      @get-list-data="getListData"
+    >
+      <div
+        v-for="(item, index) in liveRoomList"
+        :key="index"
+        class="item"
+        @click="goRoom(item)"
+      >
+        <div
+          v-lazy:background-image="item?.cover_img || item?.users?.[0]?.avatar"
+          class="cover"
+        >
+          <div
+            v-if="item?.live"
+            class="living-ico"
+          >
+            直播中
+          </div>
+          <div
+            v-if="
+              item?.cdn === SwitchEnum.yes ||
+              [
+                LiveRoomTypeEnum.tencent_css,
+                LiveRoomTypeEnum.tencent_css_pk,
+              ].includes(item.type!)
+            "
+            class="cdn-ico"
+          >
+            <div class="txt">CDN</div>
+          </div>
+          <div class="txt">{{ item?.users?.[0]?.username }}</div>
+        </div>
+        <div class="desc">{{ item?.name }}</div>
+      </div>
+    </LongList>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { watch } from 'vue';
+import { openToTarget } from 'billd-utils';
+import { onMounted, reactive, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
 
-import { IArea } from '@/interface';
+import { fetchLiveRoomList } from '@/api/area';
+import LongList from '@/components/LongList/index.vue';
+import { SwitchEnum } from '@/interface';
 import router, { routerName } from '@/router';
 import { useAppStore } from '@/store/app';
+import { ILiveRoom, LiveRoomTypeEnum } from '@/types/ILiveRoom';
 
+const liveRoomList = ref<ILiveRoom[]>([]);
 const appStore = useAppStore();
+const route = useRoute();
+const status = ref<'loading' | 'nonedata' | 'allLoaded' | 'normal'>('loading');
 
-function changeArea(item: IArea) {
-  router.push({ name: routerName.areaDetail, params: { id: item.id } });
-}
+const longListRef = ref<InstanceType<typeof LongList>>();
+const topRef = ref<HTMLDivElement>();
+const height = ref(-1);
+const loading = ref(false);
+const hasMore = ref(true);
+const pageParams = reactive({
+  nowPage: 0,
+  pageSize: 50,
+});
 
 watch(
-  () => appStore.areaList,
-  (newval) => {
-    if (newval.length) {
-      router.push({
-        name: routerName.areaDetail,
-        params: { id: appStore.areaList[0].id },
-      });
-    }
-  },
-  {
-    immediate: true,
-    deep: true,
+  () => route.params.id,
+  (newVal) => {
+    if (!newVal) return;
+    liveRoomList.value = [];
+    pageParams.nowPage = 0;
+    getData();
   }
 );
+
+function handleStatus() {
+  if (loading.value) {
+    status.value = 'loading';
+  } else if (hasMore.value) {
+    status.value = 'normal';
+  } else {
+    status.value = 'allLoaded';
+  }
+  if (!liveRoomList.value?.length) {
+    status.value = 'nonedata';
+  }
+}
+
+function goRoom(item: ILiveRoom) {
+  if (!item.live) {
+    window.$message.info('该直播间没在直播~');
+    return;
+  }
+  const url = router.resolve({
+    name: routerName.pull,
+    params: { roomId: item.id },
+  });
+  openToTarget(url.href);
+}
+
+onMounted(() => {
+  if (topRef.value) {
+    height.value =
+      document.documentElement.clientHeight -
+      topRef.value.getBoundingClientRect().top;
+  }
+  getData();
+});
+
+function getListData() {
+  if (!hasMore.value) return;
+  getData();
+}
+
+async function getData() {
+  try {
+    if (loading.value) return;
+    loading.value = true;
+    status.value = 'loading';
+    pageParams.nowPage += 1;
+    const res = await fetchLiveRoomList({
+      id: Number(route.params.id),
+      live_room_is_show: SwitchEnum.yes,
+      nowPage: pageParams.nowPage,
+      pageSize: pageParams.pageSize,
+    });
+    if (res.code === 200) {
+      liveRoomList.value.push(...res.data.rows);
+      hasMore.value = res.data.hasMore;
+    }
+  } catch (error) {
+    pageParams.nowPage -= 1;
+    console.log(error);
+  }
+  loading.value = false;
+  status.value = 'normal';
+  handleStatus();
+}
 </script>
 
 <style lang="scss" scoped>
-.tab-list {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-  height: 40px;
-  font-size: 14px;
-  padding-top: calc($header-height + 10px);
-  padding-left: 20px;
-  padding-right: 20px;
-  user-select: none;
-  .tab {
-    position: relative;
-    margin-right: 20px;
-    cursor: pointer;
-    &.active {
+.area-wrap {
+  box-sizing: border-box;
+  padding-top: $header-height;
+  width: 100vw;
+  background-color: #f1f2f3;
+  .tag-wrap {
+    .tag {
+      display: inline-block;
+      margin-right: 10px;
+      padding: 2px 10px;
+      font-size: 12px;
+      border-radius: 10px;
       color: $theme-color-gold;
+      border: 1px solid rgba($color: #999, $alpha: 0.3);
+    }
+  }
 
-      &::after {
-        position: absolute;
-        bottom: -6px;
-        left: 50%;
-        width: 20px;
-        height: 2px;
-        border-radius: 10px;
-        background-color: $theme-color-gold;
-        content: '';
-        transform: translateX(-50%);
+  .list {
+    padding-top: 20px;
+    display: flex;
+    align-content: flex-start;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    .item {
+      display: inline-block;
+      margin-right: 25px;
+      margin-bottom: 12px;
+      width: 300px;
+      cursor: pointer;
+      .cover {
+        position: relative;
+        overflow: hidden;
+        width: 100%;
+        height: 150px;
+        border-radius: 8px;
+
+        @extend %containBg;
+        .living-ico {
+          position: absolute;
+          top: 0px;
+          left: 0px;
+          z-index: 10;
+          padding: 0 10px;
+          height: 20px;
+          border-radius: 8px 0 10px;
+          background-color: $theme-color-gold;
+          color: white;
+          text-align: center;
+          font-size: 12px;
+          line-height: 20px;
+        }
+        .cdn-ico {
+          position: absolute;
+          top: -10px;
+          right: -10px;
+          z-index: 2;
+          width: 70px;
+          height: 28px;
+          background-color: #f87c48;
+          color: white;
+          transform: rotate(45deg);
+          transform-origin: bottom;
+          .txt {
+            margin-left: 18px;
+            background-image: initial !important;
+            font-size: 13px;
+          }
+        }
+
+        .txt {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          box-sizing: border-box;
+          padding: 4px 8px;
+          width: 100%;
+          border-radius: 0 0 4px 4px;
+          background-image: linear-gradient(
+            -180deg,
+            rgba(0, 0, 0, 0),
+            rgba(0, 0, 0, 0.6)
+          );
+          color: white;
+          text-align: initial;
+          font-size: 13px;
+
+          @extend %singleEllipsis;
+        }
       }
+      .desc {
+        margin-top: 4px;
+        font-size: 14px;
+
+        @extend %singleEllipsis;
+      }
+    }
+    .null {
+      width: 100%;
+      text-align: center;
     }
   }
+  .paging-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+  }
 }
 </style>

vite.config.ts

@@ -15,7 +15,7 @@ import { createHtmlPlugin } from 'vite-plugin-html';
 
 import pkg from './package.json';
 
-const globals = externalGlobals({
+const globals: any = externalGlobals({
   // 'runtime-core': 'runtime-core',
   // vue: 'Vue',
   // 'vue-demi': 'VueDemi',
@@ -113,6 +113,52 @@ export default defineConfig(({ mode }) => {
             title: 'billd直播',
             // injectScript: `<script src="${outputStaticUrl()}worker.js"></script>`,
           },
+          tags: isProduction
+            ? [
+                {
+                  injectTo: 'head',
+                  tag: 'script',
+                  attrs: {
+                    src: 'https://res.hsslive.cn/npm/video.js@8.21.0/video.min.js',
+                  },
+                },
+                {
+                  injectTo: 'head',
+                  tag: 'script',
+                  attrs: {
+                    src: 'https://res.hsslive.cn/npm/mpegts.js@1.7.3/mpegts.min.js',
+                  },
+                },
+                {
+                  injectTo: 'head',
+                  tag: 'script',
+                  attrs: {
+                    src: 'https://res.hsslive.cn/npm/cos-js-sdk-v5@1.8.6/cos-js-sdk-v5.min.js',
+                  },
+                },
+                // {
+                //   injectTo: 'head',
+                //   tag: 'script',
+                //   attrs: {
+                //     src: 'https://res.hsslive.cn/npm/vue@3.5.13/vue.global.min.js',
+                //   },
+                // },
+                // {
+                //   injectTo: 'head',
+                //   tag: 'script',
+                //   attrs: {
+                //     src: 'https://res.hsslive.cn/npm/vue-demi@0.14.6/index.iife.min.js',
+                //   },
+                // },
+                // {
+                //   injectTo: 'head',
+                //   tag: 'script',
+                //   attrs: {
+                //     src: 'https://res.hsslive.cn/npm/vue-router@4.2.4/vue-router.global.min.js',
+                //   },
+                // },
+              ]
+            : [],
         },
       }),
       checker({