From d5d719f168f5853f6971c286ee1b1e51a6587014 Mon Sep 17 00:00:00 2001
From: Megghy <megghy@qq.com>
Date: Sun, 22 Oct 2023 10:14:27 +0800
Subject: [PATCH] update domain

---
 src/components/RegisterAndLogin.vue        |  6 +--
 src/components/ScheduleList.vue            |  2 +-
 src/data/notifactions.ts                   |  3 +-
 src/views/IndexView.vue                    |  4 ++
 src/views/ManageLayout.vue                 |  5 +-
 src/views/manage/HistoryView.vue           | 10 ++--
 src/views/manage/QuestionBoxManageView.vue | 14 ++++--
 src/views/manage/ScheduleManageView.vue    | 58 ++++++++++++----------
 src/views/manage/SongListManageView.vue    | 30 ++++++-----
 9 files changed, 80 insertions(+), 52 deletions(-)

diff --git a/src/components/RegisterAndLogin.vue b/src/components/RegisterAndLogin.vue
index 60354bb..54e0f1c 100644
--- a/src/components/RegisterAndLogin.vue
+++ b/src/components/RegisterAndLogin.vue
@@ -95,9 +95,7 @@ function onPasswordInput() {
     rPasswordFormItemRef.value?.validate({ trigger: 'password-input' })
   }
 }
-function onregisterButtonClick(e: MouseEvent) {
-  e.preventDefault()
-
+function onregisterButtonClick() {
   formRef.value?.validate().then(async () => {
     isLoading.value = true
     await QueryPostAPI<string>(
@@ -200,7 +198,7 @@ function onLoginButtonClick() {
               <NInput v-model:value="registerModel.password" type="password" @input="onPasswordInput" @keydown.enter.prevent />
             </NFormItem>
             <NFormItem ref="rPasswordFormItemRef" first path="reenteredPassword" label="重复密码">
-              <NInput v-model:value="registerModel.reenteredPassword" :disabled="!registerModel.password" type="password" @keydown.enter.prevent />
+              <NInput v-model:value="registerModel.reenteredPassword" :disabled="!registerModel.password" type="password" @keydown.enter="onregisterButtonClick"/>
             </NFormItem>
           </NForm>
           <NSpace vertical justify="center" align="center">
diff --git a/src/components/ScheduleList.vue b/src/components/ScheduleList.vue
index ff7ade7..ea46151 100644
--- a/src/components/ScheduleList.vue
+++ b/src/components/ScheduleList.vue
@@ -52,7 +52,7 @@ const emit = defineEmits<{
             </NPopconfirm>
           </NSpace>
         </template>
-        <NGrid x-gap="8" cols="1 1000:7">
+        <NGrid x-gap="8" cols="1 1200:7">
           <NGridItem v-for="(day, index) in item.days" v-bind:key="index">
             <NCard
               size="small"
diff --git a/src/data/notifactions.ts b/src/data/notifactions.ts
index c11482e..4f36b45 100644
--- a/src/data/notifactions.ts
+++ b/src/data/notifactions.ts
@@ -28,6 +28,7 @@ function get() {
 export const notifactions = () => n
 export const GetNotifactions = () => {
   if (account) {
-    setInterval(get, 5000)
+    //setInterval(get, 5000)
+    //暂时不用
   }
 }
diff --git a/src/views/IndexView.vue b/src/views/IndexView.vue
index 8c19696..a0af331 100644
--- a/src/views/IndexView.vue
+++ b/src/views/IndexView.vue
@@ -85,6 +85,10 @@ const iconColor = 'white'
         BY
         <NButton tag="a" href="https://space.bilibili.com/10021741" target="_blank" text style="color: rgb(161, 236, 199)"> Megghy </NButton>
       </span>
+      <NDivider vertical/>
+      <span>
+        <NButton @click="$router.push('/about')" text> 关于 </NButton>
+      </span>
     </NSpace>
   </div>
 </template>
diff --git a/src/views/ManageLayout.vue b/src/views/ManageLayout.vue
index 1797409..914b4d5 100644
--- a/src/views/ManageLayout.vue
+++ b/src/views/ManageLayout.vue
@@ -201,7 +201,10 @@ onMounted(() => {
         <div style="box-sizing: border-box; padding: 20px">
           <RouterView v-slot="{ Component }" v-if="accountInfo?.isEmailVerified">
             <KeepAlive>
-              <component :is="Component" />
+              <Suspense>
+                <component :is="Component" />
+                <template #fallback> Loading... </template>
+              </Suspense>
             </KeepAlive>
           </RouterView>
           <template v-else>
diff --git a/src/views/manage/HistoryView.vue b/src/views/manage/HistoryView.vue
index 5fb9ead..f65107d 100644
--- a/src/views/manage/HistoryView.vue
+++ b/src/views/manage/HistoryView.vue
@@ -2,13 +2,13 @@
 import { useAccount } from '@/api/account'
 import { QueryGetAPI } from '@/api/query'
 import { HISTORY_API_URL } from '@/data/constants'
-import { NAlert, NCard, NSpace, useMessage } from 'naive-ui'
+import { NAlert, NCard, NSpace, NSpin, useMessage } from 'naive-ui'
 import { onMounted, ref } from 'vue'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
 import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, DataZoomComponent } from 'echarts/components'
-import VChart, { THEME_KEY } from 'vue-echarts'
+import VChart from 'vue-echarts'
 import { format } from 'date-fns'
 
 use([CanvasRenderer, LineChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, LineChart])
@@ -24,6 +24,8 @@ const guardsOption = ref()
 const upstatViewOption = ref()
 const upstatLikeOption = ref()
 
+const isLoading = ref(true)
+
 async function getFansHistory() {
   await QueryGetAPI<
     {
@@ -405,13 +407,15 @@ onMounted(async () => {
     await getGuardsHistory()
     await getUpstatHistory()
     getOptions()
+    isLoading.value = false
   }
 })
 </script>
 
 <template>
   <NAlert v-if="accountInfo?.isBiliVerified != true" type="info"> 尚未进行Bilibili认证 </NAlert>
-  <NCard size="small">
+  <NSpin v-else-if="isLoading" show/>
+  <NCard v-else size="small">
     <NSpace vertical>
       <VChart :option="fansOption" style="height: 200px" />
       <VChart :option="guardsOption" style="height: 200px" />
diff --git a/src/views/manage/QuestionBoxManageView.vue b/src/views/manage/QuestionBoxManageView.vue
index b621ffc..41b1be2 100644
--- a/src/views/manage/QuestionBoxManageView.vue
+++ b/src/views/manage/QuestionBoxManageView.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { QAInfo } from '@/api/api-models'
 import { QueryGetAPI, QueryPostAPI } from '@/api/query'
-import { ACCOUNT_API_URL, BASE_API, QUESTION_API_URL } from '@/data/constants'
+import { ACCOUNT_API_URL, QUESTION_API_URL } from '@/data/constants'
 import { Heart, HeartOutline } from '@vicons/ionicons5'
-import { NButton, NCard, NDivider, NIcon, NImage, NInput, NList, NListItem, NModal, NSpace, NSwitch, NTabPane, NTabs, NTag, NText, NTime, NTooltip, useMessage } from 'naive-ui'
+import { NButton, NCard, NDivider, NIcon, NImage, NInput, NList, NListItem, NModal, NSpace, NSpin, NSwitch, NTabPane, NTabs, NTag, NText, NTime, NTooltip, useMessage } from 'naive-ui'
 import { computed, onMounted, ref } from 'vue'
 import { List } from 'linqts'
 import router from '@/router'
@@ -18,12 +18,14 @@ const message = useMessage()
 const selectedTabItem = ref('0')
 const isRepling = ref(false)
 const onlyFavorite = ref(false)
+const isLoading = ref(true)
 
 const replyModalVisiable = ref(false)
 const currentQuestion = ref<QAInfo>()
 const replyMessage = ref()
 
 async function GetRecieveQAInfo() {
+  isLoading.value = true
   await QueryGetAPI<QAInfo[]>(QUESTION_API_URL + 'get-recieve')
     .then((data) => {
       if (data.code == 200) {
@@ -44,6 +46,9 @@ async function GetRecieveQAInfo() {
       message.error('发生错误')
       console.error(err)
     })
+    .finally(() => {
+      isLoading.value = false
+    })
 }
 async function GetSendQAInfo() {
   await QueryGetAPI<QAInfo[]>(QUESTION_API_URL + 'get-send')
@@ -179,7 +184,8 @@ onMounted(() => {
 <template>
   <NButton type="primary" @click="refresh"> 刷新 </NButton>
   <NDivider style="margin: 10px 0 10px 0" />
-  <NTabs animated @update:value="onTabChange" v-model:value="selectedTabItem">
+  <NSpin v-if="isLoading" show/>
+  <NTabs v-else animated @update:value="onTabChange" v-model:value="selectedTabItem">
     <NTabPane tab="我收到的" name="0">
       只显示收藏 <NSwitch v-model:value="onlyFavorite" />
       <NList :bordered="false">
@@ -287,7 +293,7 @@ onMounted(() => {
 </template>
 
 <style>
-.n-list{
+.n-list {
   background-color: transparent;
 }
 </style>
diff --git a/src/views/manage/ScheduleManageView.vue b/src/views/manage/ScheduleManageView.vue
index 66ea4fb..a299608 100644
--- a/src/views/manage/ScheduleManageView.vue
+++ b/src/views/manage/ScheduleManageView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useAccount } from '@/api/account'
-import { ScheduleDayInfo, ScheduleWeekInfo } from '@/api/api-models'
+import {  ScheduleWeekInfo } from '@/api/api-models'
 import { QueryGetAPI, QueryPostAPI } from '@/api/query'
 import ScheduleList from '@/components/ScheduleList.vue'
 import { SCHEDULE_API_URL } from '@/data/constants'
@@ -11,17 +11,13 @@ import {
   NButton,
   NColorPicker,
   NDivider,
-  NForm,
-  NFormItem,
   NInput,
   NInputGroup,
   NInputGroupLabel,
   NModal,
   NSelect,
   NSpace,
-  NTabPane,
-  NTabs,
-  NText,
+  NSpin,
   NTimePicker,
   useMessage,
 } from 'naive-ui'
@@ -124,6 +120,8 @@ const accountInfo = useAccount()
 const schedules = ref<ScheduleWeekInfo[]>()
 const message = useMessage()
 
+const isLoading = ref(true)
+
 const showUpdateModal = ref(false)
 const showAddModal = ref(false)
 const showCopyModal = ref(false)
@@ -135,6 +133,7 @@ const selectedScheduleYear = ref(new Date().getFullYear())
 const selectedScheduleWeek = ref(Number(format(Date.now(), 'w')) + 1)
 
 async function get() {
+  isLoading.value = true
   await QueryGetAPI<ScheduleWeekInfo[]>(SCHEDULE_API_URL + 'get', {
     id: accountInfo.value?.id ?? -1,
   })
@@ -149,10 +148,11 @@ async function get() {
       console.error(err)
       message.error('加载失败')
     })
+    .finally(() => (isLoading.value = false))
 }
-const isLoading = ref(false)
+const isFetching = ref(false)
 async function addSchedule() {
-  isLoading.value = true
+  isFetching.value = true
   await QueryPostAPI(SCHEDULE_API_URL + 'update', {
     year: selectedScheduleYear.value,
     week: selectedScheduleWeek.value,
@@ -167,7 +167,7 @@ async function addSchedule() {
       }
     })
     .finally(() => {
-      isLoading.value = false
+      isFetching.value = false
     })
 }
 async function onCopySchedule() {
@@ -181,25 +181,30 @@ async function onCopySchedule() {
   }
 }
 async function onUpdateSchedule() {
+  isFetching.value = true
   await QueryPostAPI(SCHEDULE_API_URL + 'update', {
     year: updateScheduleModel.value.year,
     week: updateScheduleModel.value.week,
     day: selectedDay.value,
     days: updateScheduleModel.value?.days,
-  }).then((data) => {
-    if (data.code == 200) {
-      message.success('成功')
-      const s = schedules.value?.find((s) => s.year == selectedScheduleYear.value && s.week == selectedScheduleWeek.value)
-      if (s) {
-        s.days[selectedDay.value] = updateScheduleModel.value.days[selectedDay.value]
-      } else {
-        schedules.value?.push(updateScheduleModel.value)
-      }
-      //updateScheduleModel.value = {} as ScheduleWeekInfo
-    } else {
-      message.error('修改失败: ' + data.message)
-    }
   })
+    .then((data) => {
+      if (data.code == 200) {
+        message.success('成功')
+        const s = schedules.value?.find((s) => s.year == selectedScheduleYear.value && s.week == selectedScheduleWeek.value)
+        if (s) {
+          s.days[selectedDay.value] = updateScheduleModel.value.days[selectedDay.value]
+        } else {
+          schedules.value?.push(updateScheduleModel.value)
+        }
+        //updateScheduleModel.value = {} as ScheduleWeekInfo
+      } else {
+        message.error('修改失败: ' + data.message)
+      }
+    })
+    .finally(() => {
+      isFetching.value = false
+    })
 }
 async function onDeleteSchedule(schedule: ScheduleWeekInfo) {
   await QueryGetAPI(SCHEDULE_API_URL + 'del', {
@@ -247,7 +252,7 @@ onMounted(() => {
       <NSelect :options="weekOptions" v-model:value="selectedScheduleWeek" />
     </NSpace>
     <NDivider />
-    <NButton @click="addSchedule" :loading="isLoading"> 添加 </NButton>
+    <NButton @click="addSchedule" :loading="isFetching"> 添加 </NButton>
   </NModal>
   <NModal v-model:show="showCopyModal" style="width: 600px; max-width: 90vw" preset="card" title="复制周程">
     <NAlert type="info"> 复制为 </NAlert>
@@ -258,7 +263,7 @@ onMounted(() => {
       <NSelect :options="weekOptions" v-model:value="selectedScheduleWeek" />
     </NSpace>
     <NDivider />
-    <NButton @click="onCopySchedule" :loading="isLoading"> 复制 </NButton>
+    <NButton @click="onCopySchedule" :loading="isFetching"> 复制 </NButton>
   </NModal>
   <NModal v-model:show="showUpdateModal" style="width: 600px; max-width: 90vw" preset="card" title="编辑周程">
     <NSelect :options="dayOptions" v-model:value="selectedDay" />
@@ -293,9 +298,10 @@ onMounted(() => {
           :show-alpha="false"
           :modes="['hex']"
         />
-        <NButton @click="onUpdateSchedule()"> 保存 </NButton>
+        <NButton @click="onUpdateSchedule()" :loading="isFetching"> 保存 </NButton>
       </NSpace>
     </template>
   </NModal>
-  <ScheduleList :schedules="schedules ?? []" @on-update="onOpenUpdateModal" @on-delete="onDeleteSchedule" @on-copy="onOpenCopyModal" is-self />
+  <NSpin v-if="isLoading" show />
+  <ScheduleList v-else :schedules="schedules ?? []" @on-update="onOpenUpdateModal" @on-delete="onDeleteSchedule" @on-copy="onOpenCopyModal" is-self />
 </template>
diff --git a/src/views/manage/SongListManageView.vue b/src/views/manage/SongListManageView.vue
index a245fdc..54269d9 100644
--- a/src/views/manage/SongListManageView.vue
+++ b/src/views/manage/SongListManageView.vue
@@ -3,8 +3,7 @@ import { useAccount } from '@/api/account'
 import { SongFrom, SongLanguage, SongsInfo } from '@/api/api-models'
 import { QueryGetAPI, QueryPostAPI } from '@/api/query'
 import SongList from '@/components/SongList.vue'
-import { FETCH_API, FIVESING_SEARCH_API, SONG_API_URL } from '@/data/constants'
-import { ca } from 'date-fns/locale'
+import { FETCH_API, SONG_API_URL } from '@/data/constants'
 import {
   FormInst,
   FormRules,
@@ -13,10 +12,6 @@ import {
   NForm,
   NFormItem,
   NInput,
-  NInputGroup,
-  NInputGroupLabel,
-  NList,
-  NListItem,
   NModal,
   NPagination,
   NSelect,
@@ -306,15 +301,24 @@ async function getFivesingSongUrl(song: SongsInfo): Promise<string> {
   }
   return ''
 }
-
+const isLoading = ref(true)
 async function getSongs() {
+  isLoading.value = true
   await QueryGetAPI<any>(SONG_API_URL + 'get', {
     id: accountInfo.value?.id,
-  }).then((data) => {
-    if (data.code == 200) {
-      songs.value = data.data
-    }
   })
+    .then((data) => {
+      if (data.code == 200) {
+        songs.value = data.data
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+      message.error('获取歌曲失败: ' + err)
+    })
+    .finally(() => {
+      isLoading.value = false
+    })
 }
 
 onMounted(async () => {
@@ -326,6 +330,7 @@ onMounted(async () => {
   <NSpace>
     <NButton @click="showModal = true" type="primary"> 添加歌曲 </NButton>
     <NButton
+      :loading="isLoading"
       @click="
         () => {
           getSongs()
@@ -423,6 +428,7 @@ onMounted(async () => {
       </NTabs>
     </NSpin>
   </NModal>
-  <SongList :songs="songs" is-self />
+  <NSpin v-if="isLoading" show />
+  <SongList v-else :songs="songs" is-self />
   <NDivider />
 </template>