update

src/views/view/QuestionBoxView.vue

@@ -50,6 +50,7 @@ async function SendQuestion() {
       if (data.code == 200) {
         message.success('成功发送棉花糖')
         questionMessage.value = ''
+        fileList.value = []
       } else {
         message.error(data.message)
       }

src/views/view/SongListView.vue

@@ -1,40 +1,70 @@
-<script setup lang="ts">
-import { SongsInfo } from '@/api/api-models'
-import { QueryGetAPI, QueryGetPaginationAPI } from '@/api/query'
-import SongList from '@/components/SongList.vue'
-import { SONG_API_URL, USER_API_URL } from '@/data/constants'
-import { onMounted, ref } from 'vue'
-import { useRouteParams } from '@vueuse/router'
-import { useAccount } from '@/api/account'
-import { NAlert } from 'naive-ui'
+<template>
+  <NSpin v-if="isLoading" show />
+  <component v-else :is="songListType" :user-info="userInfo" :songs="songs" />
+</template>
 
-const accountInfo = useAccount()
+<script lang="ts" setup>
+import { useUser } from '@/api/user'
+import { SongListTypes, SongsInfo } from '@/api/api-models'
+import DefaultSongListTemplate from '@/views/view/songListTemplate/DefaultSongListTemplate.vue'
+import { computed, onMounted, ref } from 'vue'
+import { UserInfo } from '@/api/api-models'
+import { useRouteParams } from '@vueuse/router'
+import { QueryGetAPI } from '@/api/query'
+import { SONG_API_URL } from '@/data/constants'
+import { NSpin, useMessage } from 'naive-ui'
+
+defineProps<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  biliInfo: any | undefined
+}>()
+
+const songListType = computed(() => {
+  if (userInfo.value) {
+    switch (userInfo.value.songListType) {
+      case SongListTypes.Default:
+        return DefaultSongListTemplate
+
+      default:
+        return DefaultSongListTemplate
+    }
+  } else {
+    return DefaultSongListTemplate
+  }
+})
 const songs = ref<SongsInfo[]>()
 const uId = useRouteParams('id', '-1', { transform: Number })
+const isLoading = ref(true)
+const message = useMessage()
 
 const errMessage = ref('')
 
 async function getSongs() {
+  isLoading.value = true
   await QueryGetAPI<SongsInfo[]>(SONG_API_URL + 'get', {
     id: uId.value,
-  }).then((data) => {
-    if (data.code == 200) {
-      songs.value = data.data
-    }
-    else {
-      errMessage.value = data.message
-    }
   })
+    .then((data) => {
+      if (data.code == 200) {
+        songs.value = data.data
+      } else {
+        errMessage.value = data.message
+        message.error('加载失败: ' + data.message)
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+      message.error('加载失败')
+    })
+    .finally(() => {
+      isLoading.value = false
+    })
 }
 
+const userInfo = ref<UserInfo>()
+
 onMounted(async () => {
+  userInfo.value = await useUser()
   await getSongs()
 })
 </script>
-
-<template>
-  <SongList v-if="songs" :songs="songs ?? []" />
-  <NAlert v-else-if="errMessage" type="error">
-    {{ errMessage }}
-  </NAlert>
-</template>

src/views/view/UserIndexView.vue

@@ -1,23 +1,22 @@
 <template>
-  <div style="display: flex; justify-content: center">
-    <div>
-      <NText strong tag="h1"> vtsuru </NText>
-      <component :is="indexType" :user-info="userInfo"/>
-    </div>
-  </div>
+  <component :is="indexType" :user-info="userInfo" :bili-info="biliInfo"/>
 </template>
 
 <script lang="ts" setup>
-import { useAccount } from '@/api/account'
 import { useUser } from '@/api/user'
 import { IndexTypes } from '@/api/api-models'
-import { NButton, NText } from 'naive-ui'
 import DefaultIndexTemplate from '@/views/view/indexTemplate/DefaultIndexTemplate.vue'
-import { computed } from 'vue'
+import { computed, onMounted, ref } from 'vue'
+import { UserInfo } from '@/api/api-models'
+
+defineProps<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  biliInfo: any | undefined
+}>()
 
 const indexType = computed(() => {
-  if (userInfo) {
-    switch (userInfo.indexType) {
+  if (userInfo.value) {
+    switch (userInfo.value.indexType) {
       case IndexTypes.Default:
         return DefaultIndexTemplate
 
@@ -28,6 +27,9 @@ const indexType = computed(() => {
     return DefaultIndexTemplate
   }
 })
-const accountInfo = useAccount()
-const userInfo = await useUser()
+const userInfo = ref<UserInfo>()
+
+onMounted(async () => {
+  userInfo.value = await useUser()
+})
 </script>

src/views/view/indexTemplate/DefaultIndexTemplate.vue

@@ -1,11 +1,44 @@
 <script lang="ts" setup>
-import { UserInfo } from '@/api/api-models';
+import { UserInfo } from '@/api/api-models'
+import { NAvatar, NButton, NDivider, NSpace, NText } from 'naive-ui'
+
+const width = window.innerWidth
 
 const props = defineProps<{
-  userInfo: UserInfo
+  userInfo: UserInfo | undefined
+  biliInfo: any | undefined
 }>()
+function navigate(url: string) {
+  window.open(url, '_blank')
+}
 </script>
 
 <template>
-  1
-</template>
+  <NDivider />
+  <template v-if="userInfo?.biliId">
+    <NSpace justify="center" align="center" vertical>
+      <NAvatar :src="biliInfo?.face" :size="width > 750 ? 175 : 100" round bordered style="box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);" />
+      <NSpace align="baseline" justify="center">
+        <NText strong style="font-size: 32px"> {{ biliInfo?.name }} </NText>
+        <NText strong style="font-size: 20px" depth="3"> ({{ userInfo?.name }}) </NText>
+      </NSpace>
+      <NText strong depth="3" style="font-size: medium">
+        {{ userInfo?.biliId }}
+      </NText>
+      <NText strong depth="2" style="font-size: medium">
+        {{ biliInfo?.sign }}
+      </NText>
+    </NSpace>
+    <NDivider/>
+    <NSpace align="center" justify="center">
+      <NButton type="primary" @click="navigate('https://space.bilibili.com/' + userInfo?.biliId)"> 个人主页 </NButton>
+      <NButton type="primary" secondary @click="navigate('https://live.bilibili.com/' + userInfo?.biliRoomId)"> 直播间 </NButton>
+    </NSpace>
+  </template>
+  <template v-else>
+    <NSpace justify="center" align="center">
+      <NText strong style="font-size: 32px"> {{ userInfo?.name }} </NText>
+      未认证
+    </NSpace>
+  </template>
+</template>

src/views/view/songListTemplate/DefaultSongListTemplate.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { useAccount } from '@/api/account';
+import { SongsInfo, UserInfo } from '@/api/api-models'
+import SongList from '@/components/SongList.vue'
+import { NDivider } from 'naive-ui';
+
+const accountInfo = useAccount()
+
+const props = defineProps<{
+  userInfo: UserInfo | undefined
+  songs: SongsInfo[] | undefined
+}>()
+</script>
+
+<template>
+  <SongList v-if="songs" :songs="songs ?? []" :is-self="accountInfo?.id.toString() == $route.params.id?.toString()"/>
+  <NDivider/>
+</template>