add person route

src/pages/browse.vue

@@ -13,6 +13,9 @@ const route = useRoute()
 // 标题
 const title = route.query?.title?.toString()
 
+// 副标题
+const subtitle = route.query?.subtitle?.toString()
+
 // 计算API路径
 function getApiPath(paths: string[] | string) {
   if (Array.isArray(paths))
@@ -28,6 +31,7 @@ function getApiPath(paths: string[] | string) {
       <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>
+          <span class="text-sm">{{ subtitle }}</span>
         </h2>
       </div>
     </div>

src/pages/person.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import MediaCardListView from '@/views/discover/MediaCardListView.vue'
+
+// 输入参数
+const props = defineProps({
+  // API路径
+  paths: Array as PropType<string[]> | PropType<string>,
+})
+
+// 路由参数
+const route = useRoute()
+
+// 标题
+const title = route.query?.title?.toString()
+
+// 副标题
+const subtitle = route.query?.subtitle?.toString()
+
+// 计算API路径
+function getApiPath(paths: string[] | string) {
+  if (Array.isArray(paths))
+    return paths.join('/')
+  else
+    return paths
+}
+</script>
+
+<template>
+  <div>
+    <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>
+          <span class="text-sm">{{ subtitle }}</span>
+        </h2>
+      </div>
+    </div>
+    <MediaCardListView
+      :apipath="getApiPath(props.paths || '')"
+      :params="route.query"
+    />
+  </div>
+</template>

src/router/index.ts

@@ -98,6 +98,14 @@ const router = createRouter({
             requiresAuth: true,
           },
         },
+        {
+          path: '/person/:paths+',
+          component: () => import('../pages/person.vue'),
+          props: true,
+          meta: {
+            requiresAuth: true,
+          },
+        },
         {
           path: '/media',
           component: () => import('../pages/media.vue'),

src/styles/styles.scss

@@ -71,3 +71,30 @@
   background-clip: text;
   color: transparent;
 }
+
+.slider-header {
+  position: relative;
+  margin-top: 1.5rem;
+  margin-bottom: 1rem;
+  display: flex;
+}
+
+.slider-title {
+  display: inline-flex;
+  align-items: center;
+  font-size: 1.25rem;
+  font-weight: 700;
+  line-height: 1.75rem;
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219/var(--tw-text-opacity));
+}
+
+@media (min-width: 640px){
+.slider-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 1.5rem;
+    line-height: 2.25rem;
+}
+}

src/views/discover/MediaDetailView.vue

@@ -15,7 +15,7 @@ const mediaProps = defineProps({
 const mediaDetail = ref<MediaInfo>({} as MediaInfo)
 
 // 是否已加载完成
-const loaded = ref(false)
+const isRefreshed = ref(false)
 
 // 调用API查询详情
 async function getMediaDetail() {
@@ -26,7 +26,7 @@ async function getMediaDetail() {
       },
     })
     mediaDetail.value = result
-    loaded.value = true
+    isRefreshed.value = true
   }
 }
 
@@ -37,7 +37,7 @@ onBeforeMount(() => {
 
 <template>
   <div
-    v-if="!loaded"
+    v-if="!isRefreshed"
     class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
   >
     <VProgressCircular
@@ -88,8 +88,8 @@ onBeforeMount(() => {
       <div v-if="mediaDetail.tmdb_id">
         <PersonCardSlideView :apipath="`tmdb/credits/${mediaDetail.tmdb_id}/${mediaProps.type}`">
           <template #title="{ loaded }">
-            <div v-if="loaded" class="slider-header mt-3 ms-1">
-              <RouterLink to="" class="slider-title">
+            <div v-if="loaded" class="slider-header">
+              <RouterLink :to="`/browse/tmdb/credits/${mediaDetail.tmdb_id}/${mediaProps.type}?title=演员阵容`" class="slider-title">
                 <span>演员阵容</span>
                 <VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
               </RouterLink>
@@ -100,8 +100,8 @@ onBeforeMount(() => {
       <div v-if="mediaDetail.tmdb_id">
         <MediaCardSlideView :apipath="`tmdb/recommend/${mediaDetail.tmdb_id}/${mediaProps.type}`">
           <template #title="{ loaded }">
-            <div v-if="loaded" class="slider-header mt-3 ms-1">
-              <RouterLink to="" class="slider-title">
+            <div v-if="loaded" class="slider-header">
+              <RouterLink :to="`/browse/tmdb/recommend/${mediaDetail.tmdb_id}/${mediaProps.type}?title=推荐&subtitle=${mediaDetail.title}`" class="slider-title">
                 <span>推荐</span>
                 <VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
               </RouterLink>
@@ -112,8 +112,8 @@ onBeforeMount(() => {
       <div v-if="mediaDetail.tmdb_id">
         <MediaCardSlideView :apipath="`tmdb/similar/${mediaDetail.tmdb_id}/${mediaProps.type}`">
           <template #title="{ loaded }">
-            <div v-if="loaded" class="slider-header mt-3 ms-1">
-              <RouterLink to="" class="slider-title">
+            <div v-if="loaded" class="slider-header">
+              <RouterLink :to="`/browse/tmdb/similar/${mediaDetail.tmdb_id}/${mediaProps.type}?title=类似`" class="slider-title">
                 <span>类似</span>
                 <VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
               </RouterLink>
@@ -124,7 +124,7 @@ onBeforeMount(() => {
     </div>
   </div>
   <NoDataFound
-    v-if="!mediaDetail.tmdb_id && loaded"
+    v-if="!mediaDetail.tmdb_id && isRefreshed"
     error-code="500"
     error-title="出错啦！"
     error-description="无法获取到媒体信息，请检查网络连接。"
@@ -350,24 +350,4 @@ ul.media-crew {
       line-height: 2rem;
   }
 }
-
-.slider-title {
-    display: inline-flex;
-    align-items: center;
-    font-size: 1.25rem;
-    font-weight: 700;
-    line-height: 1.75rem;
-    --tw-text-opacity: 1;
-    color: rgb(209 213 219/var(--tw-text-opacity));
-}
-
-@media (min-width: 640px){
-  .slider-title {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      font-size: 1.5rem;
-      line-height: 2.25rem;
-  }
-}
 </style>