fix ui

src/api/types.ts

@@ -279,22 +279,46 @@ export interface TmdbEpisode {
 // TMDB人特信息
 export interface TmdbPerson {
   // ID
-  id: number
+  id?: number
 
   // 名称
-  name: string
+  name?: string
 
   // 角色
-  character: string
+  character?: string
 
   // 图片
-  profile_path: string
+  profile_path?: string
 
   // 性别
-  gender: number
+  gender?: number
 
   // 原名
-  original_name: string
+  original_name?: string
+
+  // 演员ID
+  credit_id?: string
+
+  // 别名
+  also_known_as?: string[]
+
+  // 生日
+  birthday?: string
+
+  // 卒日
+  deathday?: string
+
+  // IMDB ID
+  imdb_id?: string
+
+  // 部门
+  known_for_department?: string
+
+  // 出生地
+  place_of_birth?: string
+
+  // 热度
+  popularity?: number
 }
 
 // 站点

src/components/cards/PersonCard.vue

@@ -63,4 +63,8 @@ function getPersonImage() {
 .person-card {
   background-image: linear-gradient(45deg, #99999b, #384359 60%);
 }
+
+.person-card:hover {
+  background-image: linear-gradient(45deg, #bbbbbd, #8597aa 60%);
+}
 </style>

src/pages/browse.vue

@@ -10,25 +10,8 @@ const props = defineProps({
 // 路由参数
 const route = useRoute()
 
-// 面包屑标题定义
+// 标题
-const titles: { [key: string]: any } = {
+const title = route.query?.title?.toString()
-  tmdb: {
-    trending: '流行趋势',
-    movies: '热门电影',
-    tvs: '热门电视剧',
-  },
-  douban: {
-    movies: '最新电影',
-    tvs: '最新电视剧',
-    tv_weekly_chinese: '华语剧集榜',
-    tv_weekly_global: '全球剧集榜',
-    movie_top250: '电影TOP250',
-  },
-  credits: '演员阵容',
-  media: {
-    search: '搜索',
-  },
-}
 
 // 计算API路径
 function getApiPath(paths: string[] | string) {
@@ -37,24 +20,17 @@ function getApiPath(paths: string[] | string) {
   else
     return paths
 }
-
-// 面包屑标题
-function getTitle(paths: string[] | string, title: any = '') {
-  if (Array.isArray(paths)) {
-    if (title)
-      return [titles[paths[0]][paths[1]], title]
-
-    return ['推荐', titles[paths[0]][paths[1]]]
-  }
-  else {
-    return ['发现']
-  }
-}
 </script>
 
 <template>
   <div>
-    <VBreadcrumbs :items="getTitle(props.paths || '', route.query?.title)" />
+    <div v-if="title" class="mt-8 md:flex md:items-center md:justify-between">
+      <div class="min-w-0 flex-1 mx-0">
+        <h2 class="mb-4 truncate text-2xl font-bold leading-7 text-gray-100 sm:overflow-visible sm:text-4xl sm:leading-9 md:mb-0" data-testid="page-header">
+          <span class="text-moviepilot">{{ title }}</span>
+        </h2>
+      </div>
+    </div>
     <MediaCardListView
       :apipath="getApiPath(props.paths || '')"
       :params="route.query"

src/pages/ranking.vue

@@ -11,7 +11,7 @@ import MediaCardSlideView from '@/views/discover/MediaCardSlideView.vue'
           class="slider-header ms-1"
         >
           <RouterLink
-            to="/browse/tmdb/trending"
+            to="/browse/tmdb/trending?title=流行趋势"
             class="slider-title"
           >
             <span>流行趋势</span>
@@ -31,7 +31,7 @@ import MediaCardSlideView from '@/views/discover/MediaCardSlideView.vue'
           class="slider-header mt-3 ms-1"
         >
           <RouterLink
-            to="/browse/tmdb/movies"
+            to="/browse/tmdb/movies?title=热门电影"
             class="slider-title"
           >
             <span>热门电影</span>
@@ -51,7 +51,7 @@ import MediaCardSlideView from '@/views/discover/MediaCardSlideView.vue'
           class="slider-header mt-3 ms-1"
         >
           <RouterLink
-            to="/browse/tmdb/tvs"
+            to="/browse/tmdb/tvs?title=热门电视剧"
             class="slider-title"
           >
             <span>热门电视剧</span>
@@ -71,7 +71,7 @@ import MediaCardSlideView from '@/views/discover/MediaCardSlideView.vue'
           class="slider-header mt-3 ms-1"
         >
           <RouterLink
-            to="/browse/douban/movies"
+            to="/browse/douban/movies?title=最新电影"
             class="slider-title"
           >
             <span>最新电影</span>
@@ -91,7 +91,7 @@ import MediaCardSlideView from '@/views/discover/MediaCardSlideView.vue'
           class="slider-header mt-3 ms-1"
         >
           <RouterLink
-            to="/browse/douban/tvs"
+            to="/browse/douban/tvs?title=最新电视剧"
             class="slider-title"
           >
             <span>最新电视剧</span>
@@ -111,7 +111,7 @@ import MediaCardSlideView from '@/views/discover/MediaCardSlideView.vue'
           class="slider-header mt-3 ms-1"
         >
           <RouterLink
-            to="/browse/douban/movie_top250"
+            to="/browse/douban/movie_top250?title=电影TOP250"
             class="slider-title"
           >
             <span>电影TOP250</span>
@@ -131,7 +131,7 @@ import MediaCardSlideView from '@/views/discover/MediaCardSlideView.vue'
           class="slider-header mt-3 ms-1"
         >
           <RouterLink
-            to="/browse/douban/tv_weekly_chinese"
+            to="/browse/douban/tv_weekly_chinese?title=国产剧集榜"
             class="slider-title"
           >
             <span>国产剧集榜</span>
@@ -151,7 +151,7 @@ import MediaCardSlideView from '@/views/discover/MediaCardSlideView.vue'
           class="slider-header mt-3 ms-1"
         >
           <RouterLink
-            to="/browse/douban/tv_weekly_global"
+            to="/browse/douban/tv_weekly_global?title=全球剧集榜"
             class="slider-title"
           >
             <span>全球剧集榜</span>

src/styles/styles.scss

@@ -60,3 +60,14 @@
   grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
   padding-block-end: 1rem;
 }
+
+.text-moviepilot {
+  background-image: linear-gradient(to bottom right,var(--tw-gradient-stops));
+  --tw-gradient-from: #818cf8;
+  --tw-gradient-to: rgba(129,140,248,0);
+  --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
+  --tw-gradient-to: #c084fc;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}

src/views/discover/MediaDetailView.vue

@@ -14,6 +14,9 @@ const mediaProps = defineProps({
 // 媒体详情
 const mediaDetail = ref<MediaInfo>({} as MediaInfo)
 
+// 是否已加载完成
+const loaded = ref(false)
+
 // 调用API查询详情
 async function getMediaDetail() {
   if (mediaProps.mediaid && mediaProps.type) {
@@ -23,6 +26,7 @@ async function getMediaDetail() {
       },
     })
     mediaDetail.value = result
+    loaded.value = true
   }
 }
 
@@ -32,6 +36,16 @@ onBeforeMount(() => {
 </script>
 
 <template>
+  <div
+    v-if="!loaded"
+    class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
+  >
+    <VProgressCircular
+      size="48"
+      indeterminate
+      color="primary"
+    />
+  </div>
   <div v-if="mediaDetail.tmdb_id" class="max-w-8xl mx-auto px-4">
     <div class="media-page">
       <div class="media-page-bg-image">
@@ -110,7 +124,7 @@ onBeforeMount(() => {
     </div>
   </div>
   <NoDataFound
-    v-if="!mediaDetail.tmdb_id"
+    v-if="!mediaDetail.tmdb_id && loaded"
     error-code="500"
     error-title="出错啦！"
     error-description="无法获取到媒体信息，请检查网络连接。"