fix live detail loading

src/components/DanmakuContainer.vue

@@ -34,6 +34,7 @@ import {
   NSwitch,
   NTag,
   NTooltip,
+  NVirtualList,
 } from 'naive-ui'
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import LiveInfoContainer from './LiveInfoContainer.vue'
@@ -326,16 +327,6 @@ onMounted(() => {
     <NModal v-model:show="showModal" @after-leave="userDanmakus = undefined" preset="card" :style="'width: 600px;max-width: 90vw;max-height: 90vh;'" content-style="overflow-y: auto">
       <template #header>
         {{ userDanmakus?.[0].uName }}
-        <NPopover>
-          <template #trigger>
-            <NButton text @click="ToUserSpace(userDanmakus?.[0].uId ?? 0)">
-              <template #icon>
-                <NIcon :component="Search24Filled" />
-              </template>
-            </NButton>
-          </template>
-          查询发言记录
-        </NPopover>
       </template>
       <template #header-extra>
         <NSwitch v-model:value="modalShowTools" size="small">

src/components/LiveInfoContainer.vue

@@ -118,7 +118,7 @@ watch(
                 <NNumberAnimation :from="0" :to="live.totalIncomeWithGuard" show-separator />
               </span>
             </template>
-            <NNumberAnimation :from="0" :to="live.totalIncome" show-separator />
+            {{ live.totalIncome }}
           </NTooltip>
         </NStatistic>
       </transition>

src/data/DanmakuClient.ts

@@ -1,9 +1,9 @@
 import { EventDataTypes, EventModel, OpenLiveInfo } from '@/api/api-models'
 import { QueryGetAPI, QueryPostAPI } from '@/api/query'
 import ChatClientDirectOpenLive from '@/data/chat/ChatClientDirectOpenLive.js'
+import { ref } from 'vue'
+import { clearInterval, setInterval } from 'worker-timers'
 import { OPEN_LIVE_API_URL } from './constants'
-import { ref, toRef } from 'vue'
-import { setInterval, clearInterval } from 'worker-timers'
 
 export interface DanmakuInfo {
   room_id: number
@@ -268,7 +268,7 @@ export default class DanmakuClient {
           emoji: data.dm_type == 1 ? data.emoji_img_url : undefined,
           avatar: data.uface,
         },
-        command
+        command,
       )
     })
   }
@@ -294,7 +294,7 @@ export default class DanmakuClient {
           fans_medal_wearing_status: data.fans_medal_wearing_status,
           avatar: data.uface,
         },
-        command
+        command,
       )
     })
   }
@@ -319,7 +319,7 @@ export default class DanmakuClient {
           fans_medal_wearing_status: data.fans_medal_wearing_status,
           avatar: data.uface,
         },
-        command
+        command,
       )
     })
   }
@@ -344,7 +344,7 @@ export default class DanmakuClient {
           fans_medal_wearing_status: data.fans_medal_wearing_status,
           avatar: data.user_info.uface,
         },
-        command
+        command,
       )
     })
   }

src/data/chat/ChatClientDirectOpenLive.js

@@ -1,6 +1,4 @@
-import * as base from './ChatClientOfficialBase'
-import ChatClientOfficialBase from './ChatClientOfficialBase'
-
+import ChatClientOfficialBase, * as base from './ChatClientOfficialBase'
 
 export default class ChatClientDirectOpenLive extends ChatClientOfficialBase {
   constructor(authInfo) {

src/router/index.ts

@@ -235,7 +235,6 @@ const routes: Array<RouteRecordRaw> = [
         component: () => import('@/views/manage/LiveDetailManage.vue'),
         meta: {
           title: '直播详情',
-          keepAlive: true,
         },
       },
       {

src/views/manage/DashboardView.vue

@@ -264,8 +264,8 @@ async function ChangeBili() {
       </NSpace>
       <NDivider />
       <NSpace justify="center">
+        <NButton type="info" @click="resetNameModalVisiable = true"> 修改用户名 </NButton>
         <NButton type="warning" @click="resetPasswordModalVisiable = true"> 修改密码 </NButton>
-        <NButton type="warning" @click="resetNameModalVisiable = true"> 修改用户名 </NButton>
         <NPopconfirm @positive-click="logout">
           <template #trigger>
             <NButton type="error"> 登出 </NButton>

src/views/manage/LiveDetailManage.vue

@@ -4,8 +4,8 @@ import { DanmakuModel, ResponseLiveInfoModel } from '@/api/api-models'
 import { QueryGetAPI } from '@/api/query'
 import DanmakuContainer from '@/components/DanmakuContainer.vue'
 import { LIVE_API_URL } from '@/data/constants'
-import { NButton, useMessage } from 'naive-ui'
-import { ref } from 'vue'
+import { NButton, NEmpty, NSpin, useMessage } from 'naive-ui'
+import { onActivated, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 interface ResponseLiveDetail {
@@ -18,9 +18,12 @@ const message = useMessage()
 const route = useRoute()
 const router = useRouter()
 
+const isLoading = ref(true)
+
 const liveInfo = ref<ResponseLiveDetail | undefined>(await get())
 
 async function get() {
+  isLoading.value = true
   try {
     const data = await QueryGetAPI<ResponseLiveDetail>(LIVE_API_URL + 'get', {
       id: route.params.id,
@@ -34,28 +37,40 @@ async function get() {
     }
   } catch (err) {
     message.error('无法获取数据')
+  } finally {
+    isLoading.value = false
   }
   return undefined
 }
+
+onActivated(async () => {
+  if (liveInfo.value?.live.liveId != route.params.id) {
+    liveInfo.value = await get()
+  }
+})
 </script>
 
 <template>
-  <NButton @click="router.go(-1)" text>
-    {{ '< 返回' }}
-  </NButton>
-  <DanmakuContainer
-    v-if="liveInfo"
-    ref="danmakuContainerRef"
-    :current-live="liveInfo.live"
-    :current-danmakus="liveInfo.danmakus"
-    :height="750"
-    show-rank
-    show-liver
-    show-live-info
-    show-tools
-    show-name
-    to="userDanmakus"
-    :item-range="100"
-    :item-height="25"
-  />
+  <NSpin v-if="isLoading" show />
+  <template v-else>
+    <NButton @click="router.go(-1)" text>
+      {{ '< 返回' }}
+    </NButton>
+    <DanmakuContainer
+      v-if="liveInfo"
+      ref="danmakuContainerRef"
+      :current-live="liveInfo.live"
+      :current-danmakus="liveInfo.danmakus"
+      :height="750"
+      show-rank
+      show-liver
+      show-live-info
+      show-tools
+      show-name
+      to="userDanmakus"
+      :item-range="100"
+      :item-height="25"
+    />
+    <NEmpty v-else description="无数据" />
+  </template>
 </template>

src/views/manage/LiveManager.vue

@@ -39,6 +39,7 @@ function OnClickCover(live: ResponseLiveInfoModel) {
     params: { id: live.liveId },
   })
 }
+
 </script>
 
 <template>
@@ -54,7 +55,7 @@ function OnClickCover(live: ResponseLiveInfoModel) {
     <NDivider />
     <NList bordered hoverable clickable>
       <NListItem @click="OnClickCover(live)" v-for="live in lives" v-bind:key="live.liveId">
-        <LiveInfoContainer :live="live" />
+        <LiveInfoContainer :live="live" :key="live.liveId"/>
       </NListItem>
     </NList>
   </template>

src/views/open_live/ReadDanmaku.vue

@@ -546,7 +546,15 @@ onUnmounted(() => {
         <NSlider style="min-width: 200px" v-model:value="settings.speechInfo.rate" :min="0" :max="2" :step="0.01" />
       </span>
     </NSpace>
-    <NDivider> 自定义内容 </NDivider>
+    <NDivider>
+      自定义内容
+      <NTooltip>
+        <template #trigger>
+          <NIcon :component="Info24Filled" />
+        </template>
+        留空则不念
+      </NTooltip>
+    </NDivider>
     <NSpace vertical>
       <NSpace>
         支持的变量: