fix: 优化

src/App.vue

@@ -32,10 +32,14 @@ import { getHostnameUrl } from '@/utils';
 import { getLastBuildDate, setLastBuildDate } from '@/utils/localStorage/app';
 import { getToken } from '@/utils/localStorage/user';
 
+import { fetchAreaList } from './api/area';
 import { fetchGlobalMsgMyList } from './api/globalMsg';
 import { useTip } from './hooks/use-tip';
+import { useAppStore } from './store/app';
+import { initAdsbygoogle } from './utils/google-ad';
 
 const { checkUpdate } = useCheckUpdate();
+const appStore = useAppStore();
 const cacheStore = usePiniaCacheStore();
 const userStore = useUserStore();
 const route = useRoute();
@@ -63,7 +67,8 @@ watch(
 );
 
 onMounted(() => {
-  initSettings();
+  initAdsbygoogle();
+  initGlobalData();
   checkUpdate({
     htmlUrl: getHostnameUrl(),
   });
@@ -127,6 +132,18 @@ function initSettings() {
   }, 500);
 }
 
+async function getAreaList() {
+  const res = await fetchAreaList({ orderName: 'priority', orderBy: 'desc' });
+  if (res.code === 200) {
+    appStore.areaList = res.data.rows;
+  }
+}
+
+function initGlobalData() {
+  getAreaList();
+  initSettings();
+}
+
 function handleUpdate() {
   const old = getLastBuildDate();
   if (appBuildInfo.lastBuildDate !== old) {

src/hooks/use-push.ts

@@ -36,7 +36,6 @@ export function usePush() {
   const networkStore = useNetworkStore();
 
   const roomId = ref('');
-  const roomName = ref('');
   const danmuStr = ref('');
   const localStream = ref<MediaStream>();
   const videoElArr = ref<HTMLVideoElement[]>([]);
@@ -166,7 +165,6 @@ export function usePush() {
           });
           await handleCreateUserLiveRoom();
         } else {
-          roomName.value = appStore.liveRoomInfo?.name || '';
           roomId.value = `${appStore.liveRoomInfo?.id || ''}`;
           connectWs();
         }
@@ -223,9 +221,6 @@ export function usePush() {
       await handleCreateUserLiveRoom();
       return;
     }
-    if (!roomNameIsOk()) {
-      return;
-    }
     if (connectStatus.value !== WsConnectStatusEnum.connect) {
       window.$message.warning('websocket未连接');
       return;
@@ -256,7 +251,6 @@ export function usePush() {
       });
     }
     handleStartLive({
-      name: roomName.value,
       type,
       msrDelay,
       msrMaxDelay,
@@ -297,18 +291,6 @@ export function usePush() {
     }
   }
 
-  function roomNameIsOk() {
-    if (!roomName.value.length) {
-      window.$message.warning('请输入房间名！');
-      return false;
-    }
-    if (roomName.value.length < 3 || roomName.value.length > 20) {
-      window.$message.warning('房间名要求3-20个字符！');
-      return false;
-    }
-    return true;
-  }
-
   function keydownDanmu(event: KeyboardEvent) {
     const key = event.key.toLowerCase();
     if (key === 'enter') {
@@ -317,10 +299,6 @@ export function usePush() {
     }
   }
 
-  function confirmRoomName() {
-    if (!roomNameIsOk()) return;
-  }
-
   function sendDanmu() {
     if (!loginTip()) {
       return;
@@ -352,7 +330,6 @@ export function usePush() {
   }
 
   return {
-    confirmRoomName,
     startLive,
     endLive,
     sendDanmu,
@@ -371,7 +348,6 @@ export function usePush() {
     currentAudioContentHint,
     currentVideoContentHint,
     danmuStr,
-    roomName,
     damuList,
     liveUserList,
   };

src/store/app/index.ts

@@ -1,11 +1,17 @@
 import { UploadFileInfo } from 'naive-ui';
 import { defineStore } from 'pinia';
 
-import { LiveLineEnum, LiveRenderEnum, MediaTypeEnum } from '@/interface';
+import {
+  IArea,
+  LiveLineEnum,
+  LiveRenderEnum,
+  MediaTypeEnum,
+} from '@/interface';
 import { mobileRouterName } from '@/router';
 import { ILiveRoom } from '@/types/ILiveRoom';
 
 export type AppRootState = {
+  areaList: IArea[];
   remoteDesk: {
     sender: string;
     startRemoteDesk: boolean;
@@ -72,6 +78,7 @@ export type AppRootState = {
 export const useAppStore = defineStore('app', {
   state: (): AppRootState => {
     return {
+      areaList: [],
       remoteDesk: {
         startRemoteDesk: false,
         sender: '',

src/utils/google-ad.ts

@@ -1,9 +1,14 @@
 export const initAdsbygoogle = () => {
-  // @ts-ignore
-  if (!window.adsbygoogle) {
+  try {
     // @ts-ignore
-    window.adsbygoogle = [];
+    if (!window.adsbygoogle) {
+      // @ts-ignore
+      window.adsbygoogle = [];
+    }
+    // @ts-ignore
+    window.adsbygoogle.push({});
+  } catch (error) {
+    console.error('initAdsbygoogle错误');
+    console.log(error);
   }
-  // @ts-ignore
-  window.adsbygoogle.push({});
 };

src/views/area/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tab-list">
     <div
-      v-for="(item, index) in areaList"
+      v-for="(item, index) in appStore.areaList"
       :key="index"
       class="tab"
       :class="{ active: router.currentRoute.value.params.id === item.id + '' }"
@@ -9,38 +9,40 @@
     >
       {{ item.name }}
     </div>
+    <div v-if="!appStore.areaList.length">暂无分区</div>
   </div>
 
   <router-view></router-view>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
+import { watch } from 'vue';
 
-import { fetchAreaList } from '@/api/area';
 import { IArea } from '@/interface';
 import router, { routerName } from '@/router';
+import { useAppStore } from '@/store/app';
 
-const areaList = ref<IArea[]>([]);
+const appStore = useAppStore();
 
 function changeArea(item: IArea) {
   router.push({ name: routerName.areaDetail, params: { id: item.id } });
 }
 
-async function getAreaList() {
-  const res = await fetchAreaList({ orderName: 'priority', orderBy: 'desc' });
-  if (res.code === 200) {
-    areaList.value = res.data.rows;
-    router.push({
-      name: routerName.areaDetail,
-      params: { id: areaList.value[0].id },
-    });
+watch(
+  () => appStore.areaList,
+  (newval) => {
+    if (newval.length) {
+      router.push({
+        name: routerName.areaDetail,
+        params: { id: appStore.areaList[0].id },
+      });
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
   }
-}
-
-onMounted(() => {
-  getAreaList();
-});
+);
 </script>
 
 <style lang="scss" scoped>

src/views/home/index.vue

@@ -298,7 +298,6 @@ import {
   LiveRoomTypeEnum,
   LiveRoomUseCDNEnum,
 } from '@/types/ILiveRoom';
-import { initAdsbygoogle } from '@/utils/google-ad';
 
 const router = useRouter();
 const appStore = useAppStore();
@@ -339,7 +338,6 @@ const rootMargin = {
 };
 
 onMounted(() => {
-  initAdsbygoogle();
   const intersectionObserver = new IntersectionObserver(
     (entries) => {
       entries.forEach((item) => {

src/views/pull/index.vue

@@ -478,7 +478,6 @@ import { LiveRoomTypeEnum } from '@/types/ILiveRoom';
 import { IUser } from '@/types/IUser';
 import { WsDisableSpeakingType, WsMsgTypeEnum } from '@/types/websocket';
 import { formatMoney, formatTimeHour } from '@/utils';
-import { initAdsbygoogle } from '@/utils/google-ad';
 import { NODE_ENV } from 'script/constant';
 
 import RechargeCpt from './recharge/index.vue';
@@ -578,7 +577,6 @@ onMounted(async () => {
     roomId.value = `${res.data.id!}`;
   }
   initRoomId(roomId.value);
-  initAdsbygoogle();
   await handleFindLiveRoomInfo();
   if (!appStore.liveRoomInfo) return;
   appStore.videoControls.fps = true;

src/views/push/index.vue

@@ -97,23 +97,50 @@
           ></div>
           <div class="detail">
             <div class="top">
-              <div class="name">
-                <div class="ipt">
+              <div
+                class="name"
+                v-if="appStore.liveRoomInfo"
+              >
+                名称：
+                <div class="val">
                   <n-input-group>
                     <n-input
-                      v-model:value="roomName"
+                      v-model:value="appStore.liveRoomInfo.name"
+                      size="small"
+                      placeholder="请输入房间名"
+                    />
+                    <n-button
+                      size="small"
+                      type="primary"
+                      @click="changeLiveRoomName"
+                    >
+                      确定
+                    </n-button>
+                  </n-input-group>
+                </div>
+              </div>
+              <div class="area">
+                分区：
+                <div class="val">
+                  <n-input-group>
+                    <n-select
+                      v-model:value="currentArea"
+                      :options="areaList"
                       size="small"
-                      placeholder="输入房间名"
+                      placeholder="请选择分区"
                     />
+
                     <n-button
                       size="small"
                       type="primary"
-                      @click="confirmRoomName"
+                      @click="changeLiveRoomArea"
                     >
                       确定
                     </n-button>
                   </n-input-group>
                 </div>
+              </div>
+              <div class="rtc-info">
                 <div class="item">延迟：{{ rtcRtt || '-' }}</div>
                 <div class="item">丢包：{{ rtcLoss || '-' }}</div>
                 <div class="item">帧率：{{ rtcFps || '-' }}</div>
@@ -460,6 +487,7 @@ import {
 import { useRoute } from 'vue-router';
 
 import { fetchLiveRoomOnlineUser } from '@/api/live';
+import { fetchUpdateMyLiveRoom } from '@/api/liveRoom';
 import { fetchGetWsMessageList } from '@/api/wsMessage';
 import {
   QINIU_RESOURCE,
@@ -522,7 +550,6 @@ const {
 } = useRTCParams();
 
 const {
-  confirmRoomName,
   startLive,
   endLive,
   sendDanmu,
@@ -539,7 +566,6 @@ const {
   currentAudioContentHint,
   currentVideoContentHint,
   danmuStr,
-  roomName,
   damuList,
   liveUserList,
 } = usePush();
@@ -582,6 +608,8 @@ const msrDelay = ref(1000 * 1);
 const msrMaxDelay = ref(1000 * 5);
 const suggestedName = ref('');
 const recordVideoTimer = ref();
+const areaList = ref<{ label: string; value: number }[]>([]);
+const currentArea = ref(-1);
 const recordVideoTime = ref('00:00:00');
 let avRecorder: AVRecorder | null = null;
 const loopGetLiveUserTimer = ref();
@@ -755,6 +783,45 @@ watch(
   }
 );
 
+function roomNameIsOk() {
+  if (!appStore.liveRoomInfo) return;
+  if (!appStore.liveRoomInfo.name!.length) {
+    window.$message.warning('请输入房间名！');
+    return false;
+  }
+  if (
+    appStore.liveRoomInfo.name!.length < 3 ||
+    appStore.liveRoomInfo.name!.length > 20
+  ) {
+    window.$message.warning('房间名要求3-20个字符！');
+    return false;
+  }
+  return true;
+}
+
+async function changeLiveRoomName() {
+  if (!roomNameIsOk()) return;
+  if (appStore.liveRoomInfo) {
+    const res = await fetchUpdateMyLiveRoom(appStore.liveRoomInfo);
+    if (res.code === 200) {
+      window.$message.success('修改成功！');
+    }
+  }
+}
+
+async function changeLiveRoomArea() {
+  if (appStore.liveRoomInfo) {
+    appStore.liveRoomInfo.areas = appStore.areaList.filter(
+      (v) => v.id === currentArea.value
+    );
+    // @ts-ignore
+    const res = await fetchUpdateMyLiveRoom({ areas: [currentArea.value] });
+    if (res.code === 200) {
+      window.$message.success('修改成功！');
+    }
+  }
+}
+
 function handleSendDanmu() {
   sendDanmu();
 }
@@ -906,6 +973,39 @@ watch(
   }
 );
 
+watch(
+  () => appStore.areaList,
+  (newval) => {
+    if (newval) {
+      const res: any[] = [];
+      appStore.areaList.forEach((v) => {
+        res.push({ label: v.name, value: v.id });
+      });
+      areaList.value = res;
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+);
+
+watch(
+  () => appStore.liveRoomInfo,
+  (newval) => {
+    if (newval) {
+      const area = newval.areas?.[0];
+      if (area) {
+        currentArea.value = area.id!;
+      }
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+);
+
 onMounted(() => {
   worker.value = new Worker('worker.js');
   setTimeout(() => {
@@ -2619,12 +2719,21 @@ function handleStartMedia(item: { type: MediaTypeEnum; txt: string }) {
             .name {
               display: flex;
               align-items: center;
-              .ipt {
-                margin-right: 15px;
-                width: 200px;
+              margin-right: 15px;
+              .val {
+                width: 180px;
               }
-              .item {
-                padding-right: 10px;
+            }
+            .rtc-info {
+              display: flex;
+              flex: 1;
+            }
+            .area {
+              display: flex;
+              align-items: center;
+              margin-right: 15px;
+              .val {
+                width: 130px;
               }
             }
             .other {