feat：人物搜索

src/components/cards/TmdbPersonCard.vue

@@ -17,15 +17,13 @@ const isImageLoaded = ref(false)
 
 // 人物图片地址
 function getPersonImage() {
-  if (!personInfo.value?.profile_path)
+  if (!personInfo.value?.profile_path) return personIcon
-    return personIcon
   return `https://image.tmdb.org/t/p/w600_and_h900_bestv2${personInfo.value?.profile_path}`
 }
 
 // 人物详情
 function goPersonDetail() {
-  if (!personInfo.value?.id)
+  if (!personInfo.value?.id) return
-    return
   router.push({
     path: '/person',
     query: {
@@ -51,7 +49,7 @@ function 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"
         >
-          <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
@@ -60,17 +58,16 @@ function goPersonDetail() {
                     'ring-1 ring-gray-700': isImageLoaded,
                   }"
                 >
-                  <VImg
+                  <VImg :src="getPersonImage()" cover @load="isImageLoaded = true" />
-                    :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" />

src/layouts/components/SearchBar.vue

@@ -11,20 +11,28 @@ const searchDialog = ref(false)
 // ref
 const searchWordInput = ref<HTMLElement | null>(null)
 
+// 当前的搜索类型 media/person
+const searchType = ref('media')
+
 // Search
 function search() {
-  if (!searchWord.value)
+  if (!searchWord.value) return
-    return
 
   searchDialog.value = false
   router.push({
     path: '/browse/media/search',
     query: {
       title: searchWord.value,
+      type: searchType.value,
     },
   })
 }
 
+// 切换搜索类型
+function switchSearchType() {
+  searchType.value = searchType.value === 'media' ? 'person' : 'media'
+}
+
 // 打开搜索弹窗
 function openSearchDialog() {
   searchDialog.value = true
@@ -36,15 +44,8 @@ function openSearchDialog() {
 
 <template>
   <!-- 👉 Search Button -->
-  <div
+  <div class="d-flex align-center cursor-pointer" style="user-select: none">
-    class="d-flex align-center cursor-pointer"
+    <VDialog v-model="searchDialog" max-width="50rem" transition="dialog-top-transition">
-    style="user-select: none;"
-  >
-    <VDialog
-      v-model="searchDialog"
-      max-width="50rem"
-      transition="dialog-top-transition"
-    >
       <!-- Dialog Content -->
       <VCard title="搜索">
         <VCardText>
@@ -53,8 +54,10 @@ function openSearchDialog() {
               <VTextField
                 ref="searchWordInput"
                 v-model="searchWord"
-                label="电影、电视剧名称"
+                :prepend-inner-icon="searchType == 'person' ? 'mdi-account' : 'mdi-movie-roll'"
+                :label="searchType == 'person' ? '演员名称' : '电影、电视剧名称'"
                 @keydown.enter="search"
+                @click:prepend-inner="switchSearchType"
               />
             </VCol>
           </VRow>
@@ -62,21 +65,13 @@ function openSearchDialog() {
 
         <VCardActions>
           <VSpacer />
-          <VBtn
+          <VBtn variant="tonal" @click="search"> 搜索 </VBtn>
-            variant="tonal"
-            @click="search"
-          >
-            搜索
-          </VBtn>
         </VCardActions>
       </VCard>
     </VDialog>
   </div>
   <!-- 👉 Search Icon -->
-  <IconBtn
+  <IconBtn class="d-lg-none" @click="openSearchDialog">
-    class="d-lg-none"
-    @click="openSearchDialog"
-  >
     <VIcon icon="mdi-magnify" />
   </IconBtn>
   <!-- 👉 Search Textfield -->
@@ -87,20 +82,22 @@ function openSearchDialog() {
       class="d-none d-lg-block text-disabled search-box"
       density="compact"
       variant="solo"
-      label="搜索电影、电视剧"
+      :prepend-inner-icon="searchType == 'person' ? 'mdi-account' : 'mdi-movie-roll'"
+      :label="searchType == 'person' ? '演员名称' : '电影、电视剧名称'"
       append-inner-icon="mdi-magnify"
       single-line
       hide-details
       flat
       rounded
       @click:append-inner="search"
+      @click:prepend-inner="switchSearchType"
       @keydown.enter="search"
     />
   </span>
 </template>
 
 <style lang="scss">
-.search-box div.v-input__control div[role="textbox"] {
+.search-box div.v-input__control div[role='textbox'] {
   border: 1px solid rgb(var(--v-theme-background));
 }
 </style>

src/pages/browse.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import MediaCardListView from '@/views/discover/MediaCardListView.vue'
+import PersonCardListView from '@/views/discover/PersonCardListView.vue'
 
 // 输入参数
 const props = defineProps({
@@ -11,14 +12,17 @@ const props = defineProps({
 const route = useRoute()
 
 // 标题
-const title = route.query?.title?.toString()
+let title = route.query?.title?.toString()
+
+// 类型
+const type = route.query?.type?.toString()
+
+if (type === 'person') title = '演员：' + title
 
 // 计算API路径
 function getApiPath(paths: string[] | string) {
-  if (Array.isArray(paths))
+  if (Array.isArray(paths)) return paths.join('/')
-    return paths.join('/')
+  else return paths
-  else
-    return paths
 }
 </script>
 
@@ -26,14 +30,20 @@ function getApiPath(paths: string[] | string) {
   <div>
     <div v-if="title" class="mt-3 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">
+        <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
+    <PersonCardListView
+      v-if="type === 'person'"
       :apipath="getApiPath(props.paths || '')"
+      type="tmdb"
       :params="route.query"
     />
+    <MediaCardListView v-else :apipath="getApiPath(props.paths || '')" :params="route.query" />
   </div>
 </template>

src/views/discover/MediaCardListView.vue

@@ -12,11 +12,7 @@ const props = defineProps({
 
 // 判断是否有滚动条
 function hasScroll() {
-  return (
+  return document.body.scrollHeight - (window.innerHeight || document.documentElement.clientHeight) > 2
-    document.body.scrollHeight
-      - (window.innerHeight || document.documentElement.clientHeight)
-    > 2
-  )
 }
 
 // 当前页码
@@ -37,8 +33,7 @@ function getParams() {
   let params = {
     page: page.value,
   }
-  if (props.params)
+  if (props.params) params = { ...params, ...props.params }
-    params = { ...params, ...props.params }
 
   return params
 }
@@ -46,8 +41,7 @@ function getParams() {
 // 获取列表数据
 async function fetchData({ done }: { done: any }) {
   try {
-    if (!props.apipath)
+    if (!props.apipath) return
-      return
 
     // 如果正在加载中，直接返回
     if (loading.value) {
@@ -81,8 +75,7 @@ async function fetchData({ done }: { done: any }) {
         // 返回加载成功
         done('ok')
       }
-    }
+    } else {
-    else {
       // 加载一次
       // 设置加载中
       loading.value = true
@@ -106,8 +99,7 @@ async function fetchData({ done }: { done: any }) {
     }
     // 取消加载中
     loading.value = false
-  }
+  } catch (error) {
-  catch (error) {
     console.error(error)
     // 返回加载失败
     done('error')
@@ -116,29 +108,12 @@ async function fetchData({ done }: { done: any }) {
 </script>
 
 <template>
-  <LoadingBanner
+  <LoadingBanner v-if="!isRefreshed" class="mt-12" />
-    v-if="!isRefreshed"
+  <VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-hidden" @load="fetchData">
-    class="mt-12"
-  />
-  <VInfiniteScroll
-    mode="intersect"
-    side="end"
-    :items="dataList"
-    class="overflow-hidden"
-    @load="fetchData"
-  >
     <template #loading />
     <template #empty />
-    <div
+    <div v-if="dataList.length > 0" class="grid gap-4 grid-media-card mx-3" tabindex="0">
-      v-if="dataList.length > 0"
+      <MediaCard v-for="data in dataList" :key="data.tmdb_id || data.douban_id" :media="data" />
-      class="grid gap-4 grid-media-card mx-3"
-      tabindex="0"
-    >
-      <MediaCard
-        v-for="data in dataList"
-        :key="data.tmdb_id || data.douban_id"
-        :media="data"
-      />
     </div>
     <NoDataFound
       v-if="dataList.length === 0 && isRefreshed"

src/views/discover/PersonCardListView.vue

@@ -2,6 +2,7 @@
 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 NoDataFound from '@/components/NoDataFound.vue'
 
 // 输入参数
@@ -13,11 +14,7 @@ const props = defineProps({
 
 // 判断是否有滚动条
 function hasScroll() {
-  return (
+  return document.body.scrollHeight - (window.innerHeight || document.documentElement.clientHeight) > 2
-    document.body.scrollHeight
-      - (window.innerHeight || document.documentElement.clientHeight)
-    > 2
-  )
 }
 
 // 当前页码
@@ -33,11 +30,20 @@ const isRefreshed = ref(false)
 const dataList = ref<any>([])
 const currData = ref<any>([])
 
+// 拼装参数
+function getParams() {
+  let params = {
+    page: page.value,
+  }
+  if (props.params) params = { ...params, ...props.params }
+
+  return params
+}
+
 // 获取列表数据
 async function fetchData({ done }: { done: any }) {
   try {
-    if (!props.apipath)
+    if (!props.apipath) return
-      return
 
     // 如果正在加载中，直接返回
     if (loading.value) {
@@ -53,9 +59,7 @@ async function fetchData({ done }: { done: any }) {
         loading.value = true
         // 请求API
         currData.value = await api.get(props.apipath, {
-          params: {
+          params: getParams(),
-            page: page.value,
-          },
         })
         // 取消加载中
         loading.value = false
@@ -64,6 +68,7 @@ async function fetchData({ done }: { done: any }) {
         if (currData.value.length === 0) {
           // 如果没有数据，跳出
           done('empty')
+          return
         } else {
           // 合并数据
           dataList.value = [...dataList.value, ...currData.value]
@@ -73,16 +78,13 @@ async function fetchData({ done }: { done: any }) {
           done('ok')
         }
       }
-    }
+    } else {
-    else {
       // 加载一次
       // 设置加载中
       loading.value = true
       // 请求API
       currData.value = await api.get(props.apipath, {
-        params: {
+        params: getParams(),
-          page: page.value,
-        },
       })
       // 标计为已请求完成
       isRefreshed.value = true
@@ -100,8 +102,7 @@ async function fetchData({ done }: { done: any }) {
       // 取消加载中
       loading.value = false
     }
-  }
+  } catch (error) {
-  catch (error) {
     console.error(error)
     // 返回加载失败
     done('error')
@@ -110,40 +111,18 @@ async function fetchData({ done }: { done: any }) {
 </script>
 
 <template>
-  <LoadingBanner
+  <LoadingBanner v-if="!isRefreshed" class="mt-12" />
-    v-if="!isRefreshed"
+  <VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-hidden" @load="fetchData">
-    class="mt-12"
-  />
-  <VInfiniteScroll
-    mode="intersect"
-    side="end"
-    :items="dataList"
-    class="overflow-hidden"
-    @load="fetchData"
-  >
     <template #loading />
     <template #empty />
-    <div
+    <div v-if="dataList.length > 0 && props.type === 'tmdb'" class="grid gap-4 grid-media-card mx-3" tabindex="0">
-      v-if="dataList.length > 0 && props.type === 'tmdb'"
+      <TmdbPersonCard v-for="data in dataList" :key="data.id" :person="data" />
-      class="grid gap-4 grid-media-card mx-3"
-      tabindex="0"
-    >
-      <TmdbPersonCard
-        v-for="data in dataList"
-        :key="data.id"
-        :person="data"
-      />
     </div>
-    <div
+    <div v-if="dataList.length > 0 && props.type === 'douban'" class="grid gap-4 grid-media-card mx-3" tabindex="0">
-      v-if="dataList.length > 0 && props.type === 'douban'"
+      <DoubanPersonCard v-for="data in dataList" :key="data.id" :person="data" />
-      class="grid gap-4 grid-media-card mx-3"
+    </div>
-      tabindex="0"
+    <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" />
-      <DoubanPersonCard
-        v-for="data in dataList"
-        :key="data.id"
-        :person="data"
-      />
     </div>
     <NoDataFound
       v-if="dataList.length === 0 && isRefreshed"