fix live detail loading

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>