feat：发现内容聚合

src/views/discover/PersonCardListView.vue

@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import api from '@/api'
-import DoubanPersonCard from '@/components/cards/DoubanPersonCard.vue'
-import TmdbPersonCard from '@/components/cards/TmdbPersonCard.vue'
-import BangumiPersonCard from '@/components/cards/BangumiPersonCard.vue'
+import PersonCard from '@/components/cards/PersonCard.vue'
 import NoDataFound from '@/components/NoDataFound.vue'
 
 // 输入参数
@@ -115,14 +113,8 @@ async function fetchData({ done }: { done: any }) {
   <VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-hidden" @load="fetchData">
     <template #loading />
     <template #empty />
-    <div v-if="dataList.length > 0 && props.type === 'tmdb'" class="grid gap-4 grid-media-card mx-3" tabindex="0">
-      <TmdbPersonCard v-for="data in dataList" :key="data.id" :person="data" />
-    </div>
-    <div v-if="dataList.length > 0 && props.type === 'douban'" class="grid gap-4 grid-media-card mx-3" tabindex="0">
-      <DoubanPersonCard v-for="data in dataList" :key="data.id" :person="data" />
-    </div>
-    <div v-if="dataList.length > 0 && props.type === 'bangumi'" class="grid gap-4 grid-media-card mx-3" tabindex="0">
-      <BangumiPersonCard v-for="data in dataList" :key="data.id" :person="data" />
+    <div v-if="dataList.length > 0" class="grid gap-4 grid-media-card mx-3" tabindex="0">
+      <PersonCard v-for="data in dataList" :key="data.id" :person="data" />
     </div>
     <NoDataFound
       v-if="dataList.length === 0 && isRefreshed"

src/views/discover/PersonCardSlideView.vue

@@ -1,9 +1,7 @@
 <script lang="ts" setup>
-import TmdbPersonCard from '@/components/cards/TmdbPersonCard.vue'
+import PersonCard from '@/components/cards/PersonCard.vue'
 import api from '@/api'
 import SlideView from '@/components/slide/SlideView.vue'
-import DoubanPersonCard from '@/components/cards/DoubanPersonCard.vue'
-import BangumiPersonCard from '@/components/cards/BangumiPersonCard.vue'
 
 // 输入参数
 const props = defineProps({
@@ -13,7 +11,7 @@ const props = defineProps({
   type: String,
 })
 
-provide('rankingPropsKey', reactive({...props}))
+provide('rankingPropsKey', reactive({ ...props }))
 
 // 组件加载完成
 const componentLoaded = ref(false)
@@ -24,14 +22,11 @@ const dataList = ref<any>([])
 // 获取订阅列表数据
 async function fetchData() {
   try {
-    if (!props.apipath)
-      return
+    if (!props.apipath) return
 
     dataList.value = await api.get(props.apipath)
-    if (dataList.value.length > 0)
-      componentLoaded.value = true
-  }
-  catch (error) {
+    if (dataList.value.length > 0) componentLoaded.value = true
+  } catch (error) {
     console.error(error)
   }
 }
@@ -41,32 +36,10 @@ onMounted(fetchData)
 </script>
 
 <template>
-  <SlideView
-    v-if="componentLoaded"
-  >
+  <SlideView v-if="componentLoaded">
     <template #content>
-      <template
-        v-for="data in dataList"
-        :key="data.id"
-      >
-        <TmdbPersonCard
-          v-if="props.type === 'tmdb'"
-          :person="data"
-          height="15rem"
-          width="10rem"
-        />
-        <DoubanPersonCard
-          v-if="props.type === 'douban'"
-          :person="data"
-          height="15rem"
-          width="10rem"
-        />
-        <BangumiPersonCard
-          v-if="props.type === 'bangumi'"
-          :person="data"
-          height="15rem"
-          width="10rem"
-        />
+      <template v-for="data in dataList" :key="data.id">
+        <PersonCard :person="data" height="15rem" width="10rem" />
       </template>
     </template>
   </SlideView>

src/views/discover/PersonDetailView.vue

@@ -2,17 +2,18 @@
 import MediaCardListView from './MediaCardListView.vue'
 import api from '@/api'
 import personIcon from '@images/misc/person.png'
-import type { TmdbPerson } from '@/api/types'
+import type { Person } from '@/api/types'
 import NoDataFound from '@/components/NoDataFound.vue'
 
 // 输入参数
 const personProps = defineProps({
   personid: String,
   type: String,
+  source: String,
 })
 
 // 媒体详情
-const personDetail = ref<TmdbPerson>({} as TmdbPerson)
+const personDetail = ref<Person>({} as Person)
 
 // 是否已加载完成
 const isRefreshed = ref(false)
@@ -23,21 +24,67 @@ const isImageLoaded = ref(false)
 // 调用API查询详情
 async function getPersonDetail() {
   if (personProps.personid) {
-    personDetail.value = await api.get(`tmdb/person/${personProps.personid}`)
+    if (personProps.source === 'themoviedb') {
+      personDetail.value = await api.get(`tmdb/person/${personProps.personid}`)
+    } else if (personProps.source === 'douban') {
+      personDetail.value = await api.get(`douban/person/${personProps.personid}`)
+    } else if (personProps.source === 'bangumi') {
+      personDetail.value = await api.get(`bangumi/person/${personProps.personid}`)
+    }
     isRefreshed.value = true
   }
 }
 
 // 人物图片地址
 function getPersonImage() {
-  if (!personDetail.value?.profile_path) return personIcon
-  return `https://image.tmdb.org/t/p/w600_and_h900_bestv2${personDetail.value?.profile_path}`
+  if (personProps.source === 'themoviedb') {
+    if (!personDetail.value?.profile_path) return personIcon
+    return `https://image.tmdb.org/t/p/w600_and_h900_bestv2${personDetail.value?.profile_path}`
+  } else if (personProps.source === 'douban') {
+    if (!personDetail.value?.avatar) return personIcon
+    if (typeof personDetail.value?.avatar === 'object') {
+      return personDetail.value?.avatar?.normal
+    } else {
+      return personDetail.value?.avatar
+    }
+  } else if (personProps.source === 'bangumi') {
+    if (!personDetail.value?.images) return personIcon
+    return personDetail.value?.images?.medium
+  } else {
+    return personIcon
+  }
 }
 
 // 将别名数组拆分为、分隔的字符串
 function getAlsoKnownAs() {
   if (!personDetail.value?.also_known_as) return ''
-  return personDetail.value.also_known_as.join('、')
+  if (personProps.source === 'themoviedb') {
+    return '别名：' + personDetail.value.also_known_as.join('、')
+  } else {
+    return personDetail.value.also_known_as.join('，')
+  }
+}
+
+// 参演作品路由地址
+function getPersonCreditsPath() {
+  let apipath = 'tmdb'
+  if (personProps.source === 'douban') {
+    apipath = 'douban'
+  } else if (personProps.source === 'bangumi') {
+    apipath = 'bangumi'
+  }
+  return `/browse/${apipath}/person/credits/${personDetail.value.id}?title=参演作品`
+}
+
+// 参演作品API路径
+function getPersonCreditsApiPath() {
+  let apipath = 'tmdb'
+  if (personProps.source === 'douban') {
+    apipath = 'douban'
+  } else if (personProps.source === 'bangumi') {
+    apipath = 'bangumi'
+  }
+  return `${apipath}/person/credits/${personDetail.value.id}`
 }
 
 onBeforeMount(() => {
@@ -67,7 +114,7 @@ onBeforeMount(() => {
             <span v-if="personDetail.place_of_birth"> | </span>
             <span v-if="personDetail.place_of_birth">{{ personDetail.place_of_birth }}</span>
           </div>
-          <div v-if="personDetail.also_known_as">别名：{{ getAlsoKnownAs() }}</div>
+          <div v-if="personDetail.also_known_as">{{ getAlsoKnownAs() }}</div>
         </div>
       </div>
     </div>
@@ -80,12 +127,12 @@ onBeforeMount(() => {
     </div>
     <div>
       <div class="slider-header">
-        <RouterLink :to="`/browse/tmdb/person/credits/${personDetail.id}?title=参演作品`" class="slider-title">
+        <RouterLink :to="getPersonCreditsPath()" class="slider-title">
           <span>参演作品</span>
           <VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
         </RouterLink>
       </div>
-      <MediaCardListView :apipath="`tmdb/person/credits/${personDetail.id}`" />
+      <MediaCardListView :apipath="getPersonCreditsApiPath()" />
     </div>
   </div>
   <NoDataFound