optimize layout

src/App.vue

@@ -7,15 +7,15 @@
           <NLoadingBarProvider>
             <Suspense>
               <TempComponent>
-                <NElement>
+                <NLayoutContent>
                   <ViewerLayout v-if="layout == 'viewer'" />
                   <ManageLayout v-else-if="layout == 'manage'" />
                   <OpenLiveLayout v-else-if="layout == 'open-live'" />
                   <OBSLayout v-else-if="layout == 'obs'" />
-                  <template v-else-if="layout == ''">
+                  <template v-else>
                     <RouterView />
                   </template>
-                </NElement>
+                </NLayoutContent>
               </TempComponent>
               <template #fallback>
                 <NSpin size="large" show />

src/data/constants.ts

@@ -16,15 +16,13 @@ export const IMGUR_URL = FILE_BASE_URL + '/imgur/'
 export const THINGS_URL = FILE_BASE_URL + '/things/'
 export const apiFail = ref(false)
 
-export const BASE_URL = {
+export const BASE_URL =
-  toString: () =>
+  process.env.NODE_ENV === 'development'
-    process.env.NODE_ENV === 'development'
+    ? debugAPI
-      ? debugAPI
+    : apiFail.value
-      : apiFail.value
+      ? failoverAPI
-        ? failoverAPI
+      : releseAPI
-        : releseAPI
+export const BASE_API_URL = BASE_URL + 'api/'
-}
-export const BASE_API_URL = BASE_URL.toString() + 'api/'
 export const FETCH_API = 'https://fetch.vtsuru.live/'
 export const BASE_HUB_URL =
   (process.env.NODE_ENV === 'development'

src/main.ts

@@ -116,7 +116,7 @@ QueryGetAPI<string>(BASE_API_URL + 'vtsuru/version')
       }
       HyperDX.setGlobalAttributes({
         userId: account.value.id.toString(),
-        userName: account.value.name
+        userName: account.value.name,
       })
     }
     useAuth.getAuthInfo()

src/store/useNotificationStore.ts

@@ -16,6 +16,7 @@ export const useNotificationStore = defineStore('notification', () => {
   const isInited = ref(false)
 
   async function updateUnread() {
+    return // 暂时没写这部分相关逻辑
     try {
       const result = await QueryGetAPI<NotificationData[]>(
         NOTIFACTION_API_URL + 'get-unread'

src/views/ManageLayout.vue

@@ -30,6 +30,7 @@ import {
   NButton,
   NCountdown,
   NDivider,
+  NElement,
   NFlex,
   NIcon,
   NLayout,
@@ -483,7 +484,7 @@ onMounted(() => {
         <template #extra>
           <NSpace align="center" justify="center">
             <NSwitch :default-value="!isDarkMode" @update:value="(value: string & number & boolean) => (themeType = value ? ThemeType.Light : ThemeType.Dark)
-              ">
+            ">
               <template #checked>
                 <NIcon :component="Sunny" />
               </template>
@@ -550,39 +551,40 @@ onMounted(() => {
       </NLayoutSider>
       <NLayout>
         <NScrollbar :style="`height: calc(100vh - 50px - ${aplayerHeight}px)`">
-          <NLayoutContent
+          <NLayoutContent content-style="margin: 12px">
-            :style="`box-sizing: border-box; padding: 20px; min-width: 300px; height: calc(100vh - 50px - ${aplayerHeight}px);`">
+            <NElement>
-            <RouterView v-if="accountInfo?.isEmailVerified" v-slot="{ Component, route }">
+              <RouterView v-if="accountInfo?.isEmailVerified" v-slot="{ Component, route }">
-              <KeepAlive>
+                <KeepAlive>
-                <Suspense>
+                  <Suspense>
-                  <component :is="Component" />
+                    <component :is="Component" />
-                  <template #fallback>
+                    <template #fallback>
-                    <NSpin show />
+                      <NSpin show />
-                  </template>
-                </Suspense>
-              </KeepAlive>
-            </RouterView>
-            <template v-else>
-              <NAlert type="info">
-                请进行邮箱验证
-                <br /><br />
-                <NSpace>
-                  <NButton size="small" type="info" :disabled="!canResendEmail" @click="resendEmail">
-                    重新发送验证邮件
-                  </NButton>
-                  <NCountdown v-if="!canResendEmail" :duration="(accountInfo?.nextSendEmailTime ?? 0) - Date.now()"
-                    @finish="canResendEmail = true" />
-
-                  <NPopconfirm @positive-click="logout" size="small">
-                    <template #trigger>
-                      <NButton type="error"> 登出 </NButton>
                     </template>
-                    确定登出?
+                  </Suspense>
-                  </NPopconfirm>
+                </KeepAlive>
-                </NSpace>
+              </RouterView>
-              </NAlert>
+              <template v-else>
-            </template>
+                <NAlert type="info">
-            <NBackTop />
+                  请进行邮箱验证
+                  <br /><br />
+                  <NSpace>
+                    <NButton size="small" type="info" :disabled="!canResendEmail" @click="resendEmail">
+                      重新发送验证邮件
+                    </NButton>
+                    <NCountdown v-if="!canResendEmail" :duration="(accountInfo?.nextSendEmailTime ?? 0) - Date.now()"
+                      @finish="canResendEmail = true" />
+
+                    <NPopconfirm @positive-click="logout" size="small">
+                      <template #trigger>
+                        <NButton type="error"> 登出 </NButton>
+                      </template>
+                      确定登出?
+                    </NPopconfirm>
+                  </NSpace>
+                </NAlert>
+              </template>
+              <NBackTop />
+            </NElement>
           </NLayoutContent>
         </NScrollbar>
         <NLayoutFooter :style="`height: ${aplayerHeight}px;overflow: auto`">

src/views/ViewerLayout.vue

@@ -273,10 +273,10 @@ onMounted(async () => {
         style="height: 100%"
       >
         <Transition>
-          <div v-if="biliUserInfo" style="margin-top: 8px">
+          <div v-if="accountInfo.streamerInfo" style="margin-top: 8px">
             <NSpace vertical justify="center" align="center">
               <NAvatar
-                :src="biliUserInfo.face"
+                :src="accountInfo.streamerInfo.faceUrl"
                 :img-props="{ referrerpolicy: 'no-referrer' }"
                 round
                 bordered
@@ -286,7 +286,7 @@ onMounted(async () => {
               />
               <NEllipsis v-if="width > 100" style="max-width: 100%">
                 <NText strong>
-                  {{ biliUserInfo.name }}
+                  {{ accountInfo.streamerInfo.name }}
                 </NText>
               </NEllipsis>
             </NSpace>

src/views/client/ClientLayout.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  1
+</template>

src/views/manage/QuestionBoxManageView.vue

@@ -284,7 +284,7 @@ onMounted(() => {
         <QuestionItems :questions="pagedQuestions">
           <template #footer="{ item }">
             <NSpace>
-              <NButton v-if="!item.isReaded" size="small" @click="useQB.read(item, true)" type="success">
+              <NButton v-if="!item.isReaded" size="small" @click="useQB.read(item, true)" type="info">
                 设为已读
               </NButton>
               <NButton v-else size="small" @click="useQB.read(item, false)" type="warning">重设为未读</NButton>

src/views/view/SongListView.vue

@@ -80,11 +80,11 @@ async function getSongs() {
         currentData.value = data.data
       } else {
         errMessage.value = data.message
-        message.error('加载失败: ' + data.message)
+        message.error('加载歌单失败: ' + data.message)
       }
     })
     .catch((err) => {
-      message.error('加载失败')
+      message.error('加载失败: ' + err)
     })
     .finally(() => {
       isLoading.value = false
@@ -102,7 +102,7 @@ async function getConfig() {
       }
     })
     .catch((err) => {
-      message.error('加载失败')
+      message.error('加载失败: ' + err)
     })
     .finally(() => {
       isLoading.value = false
@@ -154,9 +154,11 @@ onMounted(async () => {
           songsActive.value = r.songs
           settings.value = r.setting
         }
-      }, 1000)
+        await getConfig()
+      }, 300)
     } catch (err) {
-      message.error('加载失败')
+      message.error('加载失败: ' + err)
+      console.error(err)
     }
   } else {
     currentData.value = props.fakeData

src/views/view/songListTemplate/TraditionalSongListTemplate.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { Setting_LiveRequest, SongRequestInfo, SongsInfo, UserInfo } from '@/api/api-models';
+import { SongListConfigTypeWithConfig } from '@/data/TemplateTypes';
-import { SongListConfigType, SongListConfigTypeWithConfig } from '@/data/TemplateTypes';
 import { TemplateConfig } from '@/data/VTsuruTypes';
 import { FILE_BASE_URL } from '@/data/constants';