alpha

src/views/view/ScheduleView.vue

@@ -0,0 +1,75 @@
+<template>
+  <NSpin v-if="isLoading" show />
+  <component v-else v-bind="$attrs" :is="componentType" :user-info="userInfo" :currentData="currentData" />
+</template>
+
+<script lang="ts" setup>
+import { ScheduleWeekInfo } from '@/api/api-models'
+import DefaultScheduleTemplate from '@/views/view/scheduleTemplate/DefaultScheduleTemplate.vue'
+import { computed, onMounted, ref, watch } from 'vue'
+import { UserInfo } from '@/api/api-models'
+import { QueryGetAPI } from '@/api/query'
+import { SCHEDULE_API_URL } from '@/data/constants'
+import { NSpin, useMessage } from 'naive-ui'
+import PinkySchedule from './scheduleTemplate/PinkySchedule.vue'
+
+const props = defineProps<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  biliInfo: any | undefined
+  userInfo: UserInfo | undefined
+  template?: string | undefined
+  fakeData?: ScheduleWeekInfo[]
+}>()
+
+const componentType = computed(() => {
+  const type = props.template ?? props.userInfo?.extra?.templateTypes['schedule']?.toLowerCase()
+  if (props.userInfo) {
+    switch (type?.toLocaleLowerCase()) {
+      case 'test':
+        return DefaultScheduleTemplate
+      case 'pinkyschedule':
+        return PinkySchedule
+      default:
+        return DefaultScheduleTemplate
+    }
+  } else {
+    return DefaultScheduleTemplate
+  }
+})
+const currentData = ref<ScheduleWeekInfo[]>()
+const isLoading = ref(true)
+const message = useMessage()
+
+const errMessage = ref('')
+
+async function get() {
+  isLoading.value = true
+  await QueryGetAPI<ScheduleWeekInfo[]>(SCHEDULE_API_URL + 'get', {
+    id: props.userInfo?.id,
+  })
+    .then((data) => {
+      if (data.code == 200) {
+        currentData.value = data.data
+      } else {
+        errMessage.value = data.message
+        message.error('加载失败: ' + data.message)
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+      message.error('加载失败')
+    })
+    .finally(() => {
+      isLoading.value = false
+    })
+}
+
+onMounted(async () => {
+  if (!props.fakeData) {
+    await get()
+  } else {
+    currentData.value = props.fakeData
+    isLoading.value = false
+  }
+})
+</script>

src/views/view/SongListView.vue

@@ -1,10 +1,10 @@
 <template>
   <NSpin v-if="isLoading" show />
-  <component v-else :is="songListType" :user-info="userInfo" :songs="songs" />
+  <component v-else :is="componentType" :user-info="userInfo" :currentData="currentData" />
 </template>
 
 <script lang="ts" setup>
-import { SongListTypes, SongsInfo } from '@/api/api-models'
+import { 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'
@@ -12,16 +12,19 @@ import { QueryGetAPI } from '@/api/query'
 import { SONG_API_URL } from '@/data/constants'
 import { NSpin, useMessage } from 'naive-ui'
 
-const { biliInfo, userInfo } = defineProps<{
+const props = defineProps<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   biliInfo: any | undefined
   userInfo: UserInfo | undefined
+  template?: string | undefined
+  fakeData?: SongsInfo[]
 }>()
 
-const songListType = computed(() => {
-  if (userInfo) {
-    switch (userInfo.songListType) {
-      case SongListTypes.Default:
+const componentType = computed(() => {
+  const type = props.template ?? props.userInfo?.extra?.templateTypes['songlist']?.toLowerCase()
+  if (props.userInfo) {
+    switch (type?.toLocaleLowerCase()) {
+      case '':
         return DefaultSongListTemplate
 
       default:
@@ -31,7 +34,7 @@ const songListType = computed(() => {
     return DefaultSongListTemplate
   }
 })
-const songs = ref<SongsInfo[]>()
+const currentData = ref<SongsInfo[]>()
 const isLoading = ref(true)
 const message = useMessage()
 
@@ -40,11 +43,11 @@ const errMessage = ref('')
 async function getSongs() {
   isLoading.value = true
   await QueryGetAPI<SongsInfo[]>(SONG_API_URL + 'get', {
-    id: userInfo?.id,
+    id: props.userInfo?.id,
   })
     .then((data) => {
       if (data.code == 200) {
-        songs.value = data.data
+        currentData.value = data.data
       } else {
         errMessage.value = data.message
         message.error('加载失败: ' + data.message)
@@ -60,6 +63,11 @@ async function getSongs() {
 }
 
 onMounted(async () => {
-  await getSongs()
+  if (!props.fakeData) {
+    await getSongs()
+  } else {
+    currentData.value = props.fakeData
+    isLoading.value = false
+  }
 })
 </script>

src/views/view/UserIndexView.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="indexType" :user-info="userInfo" :bili-info="biliInfo"/>
+  <component :is="componentType" :user-info="userInfo" :bili-info="biliInfo" />
 </template>
 
 <script lang="ts" setup>
@@ -8,16 +8,18 @@ import DefaultIndexTemplate from '@/views/view/indexTemplate/DefaultIndexTemplat
 import { computed, onMounted, ref } from 'vue'
 import { UserInfo } from '@/api/api-models'
 
-const { biliInfo, userInfo } = defineProps<{
+const props = defineProps<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   biliInfo: any | undefined
   userInfo: UserInfo | undefined
+  template?: string | undefined
 }>()
 
-const indexType = computed(() => {
-  if (userInfo) {
-    switch (userInfo.indexType) {
-      case IndexTypes.Default:
+const componentType = computed(() => {
+  const type = props.template ?? props.userInfo?.extra?.templateTypes['index']?.toLowerCase()
+  if (props.userInfo) {
+    switch (type?.toLocaleLowerCase()) {
+      case '':
         return DefaultIndexTemplate
 
       default:

src/views/view/scheduleTemplate/DefaultScheduleTemplate.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { useAccount } from '@/api/account'
+import { ScheduleWeekInfo, UserInfo } from '@/api/api-models'
+import ScheduleList from '@/components/ScheduleList.vue'
+import { NDivider } from 'naive-ui'
+
+const accountInfo = useAccount()
+
+defineProps<{
+  userInfo: UserInfo | undefined
+  currentData: ScheduleWeekInfo[] | undefined
+}>()
+</script>
+
+<template>
+  <NDivider style="margin-top: 10px" />
+  <ScheduleList v-if="currentData" :schedules="currentData ?? []" :is-self="accountInfo?.id == userInfo?.id" v-bind="$attrs" />
+  <NDivider />
+</template>

src/views/view/scheduleTemplate/PinkySchedule.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { ScheduleWeekInfo, UserInfo } from '@/api/api-models';
+
+defineProps<{
+  userInfo: UserInfo | undefined
+  currentData: ScheduleWeekInfo[] | undefined
+}>()
+</script>
+<template>
+  <div class="schedule-template pinky">
+    <div v-for="item in currentData" :key="item.week">
+      test
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.schedule-template pinky {
+  background-color: #ebf0fa;
+  background-image: linear-gradient(90deg, #ffffff 10%, rgba(0, 0, 0, 0) 10%), linear-gradient(#ffffff 10%, rgba(0, 0, 0, 0) 10%);
+  background-size: 20px 20px;
+}
+</style>

src/views/view/songListTemplate/DefaultSongListTemplate.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { useAccount } from '@/api/account';
+import { useAccount } from '@/api/account'
 import { SongsInfo, UserInfo } from '@/api/api-models'
 import SongList from '@/components/SongList.vue'
-import { NDivider } from 'naive-ui';
+import { NDivider } from 'naive-ui'
 
 const accountInfo = useAccount()
 
 defineProps<{
   userInfo: UserInfo | undefined
-  songs: SongsInfo[] | undefined
+  currentData: SongsInfo[] | undefined
 }>()
 </script>
 
 <template>
-  <NDivider style="margin-top: 10px;"/>
-  <SongList v-if="songs" :songs="songs ?? []" :is-self="accountInfo?.id == userInfo?.id"/>
-  <NDivider/>
+  <NDivider style="margin-top: 10px" />
+  <SongList v-if="currentData" :songs="currentData ?? []" :is-self="accountInfo?.id == userInfo?.id" v-bind="$attrs" />
+  <NDivider />
 </template>