fix person cards

This commit is contained in:
jxxghp
2024-04-27 08:44:39 +08:00
parent 9745c2ea1a
commit 58ab1599db
3 changed files with 45 additions and 30 deletions

View File

@@ -16,22 +16,19 @@ const isImageLoaded = ref(false)
// 人物图片地址
function getPersonImage() {
if (!personInfo.value?.images)
return personIcon
if (!personInfo.value?.images) return personIcon
return personInfo.value?.images?.medium
}
// 使用、拼装人物角色
function getPersonCharacter() {
if (!personInfo.value?.career)
return ''
if (!personInfo.value?.career) return ''
return personInfo.value?.career.join('、')
}
// 打开人物详情
function goPersonDetail() {
if (!personInfo.value?.id)
return
if (!personInfo.value?.id) return
window.open(`https://bangumi.tv/person/${personInfo.value?.id}`, '_blank')
}
</script>
@@ -50,9 +47,9 @@ function goPersonDetail() {
@click.stop="goPersonDetail"
>
<div
class="person-card relative transform-gpu cursor-pointer rounded shadow ring-1 transition duration-150 ease-in-out scale-100 ring-gray-700"
class="person-card relative transform-gpu cursor-pointer rounded shadow transition duration-150 ease-in-out scale-100 ring-gray-700"
>
<div style="padding-bottom: 150%;">
<div style="padding-block-end: 150%">
<div class="absolute inset-0 flex h-full w-full flex-col items-center p-2">
<div class="relative mt-2 mb-4 flex h-1/2 w-full justify-center">
<VAvatar
@@ -61,18 +58,16 @@ function goPersonDetail() {
'ring-1 ring-gray-700': isImageLoaded,
}"
>
<VImg
v-img
:src="getPersonImage()"
cover
@load="isImageLoaded = true"
/>
<VImg v-img :src="getPersonImage()" cover @load="isImageLoaded = true" />
</VAvatar>
</div>
<div class="w-full truncate text-center font-bold">
{{ personInfo?.name }}
</div>
<div class="overflow-hidden whitespace-normal text-center text-sm" style=" display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical;-webkit-line-clamp: 2;">
<div
class="overflow-hidden whitespace-normal text-center text-sm"
style="display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2"
>
{{ getPersonCharacter() }}
</div>
<div class="absolute bottom-0 left-0 right-0 h-12 rounded-b" />

View File

@@ -16,15 +16,13 @@ const isImageLoaded = ref(false)
// 人物图片地址
function getPersonImage() {
if (!personInfo.value?.avatar)
return personIcon
if (!personInfo.value?.avatar) return personIcon
return personInfo.value?.avatar?.large
}
// 打开人物详情
function goPersonDetail() {
if (!personInfo.value?.id)
return
if (!personInfo.value?.id) return
window.open(`https://movie.douban.com/celebrity/${personInfo.value?.id}/`, '_blank')
}
</script>
@@ -43,9 +41,9 @@ function goPersonDetail() {
@click.stop="goPersonDetail"
>
<div
class="person-card relative transform-gpu cursor-pointer rounded shadow ring-1 transition duration-150 ease-in-out scale-100 ring-gray-700"
class="person-card relative transform-gpu cursor-pointer rounded shadow transition duration-150 ease-in-out scale-100 ring-gray-700"
>
<div style="padding-bottom: 150%;">
<div style="padding-block-end: 150%">
<div class="absolute inset-0 flex h-full w-full flex-col items-center p-2">
<div class="relative mt-2 mb-4 flex h-1/2 w-full justify-center">
<VAvatar
@@ -54,18 +52,16 @@ function goPersonDetail() {
'ring-1 ring-gray-700': isImageLoaded,
}"
>
<VImg
v-img
:src="getPersonImage()"
cover
@load="isImageLoaded = true"
/>
<VImg v-img :src="getPersonImage()" cover @load="isImageLoaded = true" />
</VAvatar>
</div>
<div class="w-full truncate text-center font-bold">
{{ personInfo?.name }}
</div>
<div class="overflow-hidden whitespace-normal text-center text-sm" style=" display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical;-webkit-line-clamp: 2;">
<div
class="overflow-hidden whitespace-normal text-center text-sm"
style="display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2"
>
{{ personInfo?.character }}
</div>
<div class="absolute bottom-0 left-0 right-0 h-12 rounded-b" />

View File

@@ -1,4 +1,5 @@
<script setup lang="ts">
import api from '@/api'
import MediaCardListView from '@/views/discover/MediaCardListView.vue'
import PersonCardListView from '@/views/discover/PersonCardListView.vue'
@@ -16,14 +17,37 @@ let title = route.query?.title?.toString()
// 类型
const type = route.query?.type?.toString()
if (type === 'person') title = '演员:' + title
// 识别类型
const RecognizeType = ref('themoviedb')
// 计算人物类型
const PersonType = computed(() => {
if (RecognizeType.value === 'douban') return 'douban'
else if (RecognizeType.value === 'bangumi') return 'bangumi'
else return 'tmdb'
})
// 计算API路径
function getApiPath(paths: string[] | string) {
if (Array.isArray(paths)) return paths.join('/')
else return paths
}
// 加载系统设计
async function loadSystemSettings() {
try {
const result: { [key: string]: any } = await api.get('system/env')
if (result.success) RecognizeType.value = result.data?.RECOGNIZE_SOURCE
} catch (error) {
console.error(error)
}
}
onMounted(async () => {
if (type === 'person') await loadSystemSettings()
})
</script>
<template>
@@ -41,7 +65,7 @@ function getApiPath(paths: string[] | string) {
<PersonCardListView
v-if="type === 'person'"
:apipath="getApiPath(props.paths || '')"
type="tmdb"
:type="PersonType"
:params="route.query"
/>
<MediaCardListView v-else :apipath="getApiPath(props.paths || '')" :params="route.query" />