add more custom item in index

src/views/view/indexTemplate/DefaultIndexTemplate.vue

@@ -1,9 +1,15 @@
 <script lang="ts" setup>
 import { isDarkMode } from '@/Utils'
-import { UserInfo } from '@/api/api-models'
+import { useAccount } from '@/api/account'
+import { ResponseUserIndexModel, UserInfo } from '@/api/api-models'
+import { QueryGetAPI } from '@/api/query'
+import SimpleVideoCard from '@/components/SimpleVideoCard.vue'
 import { TemplateConfig } from '@/data/VTsuruTypes'
-import { NAvatar, NButton, NDivider, NSpace, NText } from 'naive-ui'
+import { USER_INDEX_API_URL } from '@/data/constants'
+import { NAlert, NAvatar, NButton, NCard, NDivider, NFlex, NSpace, NText, useMessage } from 'naive-ui'
+import { ref } from 'vue'
 
+defineExpose({ Config, DefaultConfig })
 const width = window.innerWidth
 
 const props = defineProps<{
@@ -11,10 +17,32 @@ const props = defineProps<{
   biliInfo: any | undefined
   currentData?: any
 }>()
+const isLoading = ref(true)
+const message = useMessage()
+const accountInfo = useAccount()
+
+const indexInfo = ref<ResponseUserIndexModel>((await getIndexInfo()) || ({} as ResponseUserIndexModel))
+async function getIndexInfo() {
+  try {
+    isLoading.value = true
+    const data = await QueryGetAPI<ResponseUserIndexModel>(USER_INDEX_API_URL + 'get', { id: props.userInfo?.name })
+    if (data.code == 200) {
+      return data.data
+    } else if (data.code != 404) {
+      message?.error('无法获取数据: ' + data.message)
+      return undefined
+    }
+  } catch (err) {
+    message?.error('无法获取数据: ' + err)
+    return undefined
+  } finally {
+    isLoading.value = false
+  }
+}
+
 function navigate(url: string) {
   window.open(url, '_blank')
 }
-defineExpose({ Config, DefaultConfig })
 </script>
 
 <script lang="ts">
@@ -50,6 +78,19 @@ export const Config: TemplateConfig<ConfigType> = {
 <template>
   <NDivider />
   <template v-if="userInfo?.biliId">
+    <template v-if="userInfo?.id == accountInfo?.id">
+      <NButton type="primary" @click="$router.push({ name: 'manage-index', query: { tab: 'index' } })">
+        自定义个人主页
+      </NButton>
+      <NDivider />
+    </template>
+    <template v-if="indexInfo?.notification">
+      <NCard size="small" content-style="text-align: center">
+        {{ indexInfo?.notification }}
+      </NCard>
+      <br />
+    </template>
+
     <NSpace justify="center" align="center" vertical>
       <NAvatar
         v-if="biliInfo"
@@ -79,7 +120,31 @@ export const Config: TemplateConfig<ConfigType> = {
       <NButton type="primary" secondary @click="navigate('https://live.bilibili.com/' + userInfo?.biliRoomId)">
         直播间
       </NButton>
+      <temlate v-if="Object.keys(indexInfo.links || {}).length > 0">
+        <NFlex align="center">
+          <NDivider vertical />
+          <NButton
+            type="info"
+            secondary
+            tag="a"
+            :href="link[1]"
+            target="_blank"
+            v-for="link in Object.entries(indexInfo.links || {})"
+            :key="link[0] + link[1]"
+          >
+            {{ link[0] }}
+          </NButton>
+        </NFlex>
+      </temlate>
     </NSpace>
+    <template v-if="indexInfo.videos?.length || 0 > 0">
+      <NDivider>
+        <NText>相关视频</NText>
+      </NDivider>
+      <NFlex justify="center">
+        <SimpleVideoCard v-for="video in indexInfo.videos" :video="video" :key="video.id" />
+      </NFlex>
+    </template>
   </template>
   <template v-else>
     <NSpace justify="center" align="center">
@@ -88,3 +153,4 @@ export const Config: TemplateConfig<ConfigType> = {
     </NSpace>
   </template>
 </template>
+import { QueryGetAPI } from '@/api/query' import { USER_INDEX_API_URL } from '@/data/constants'