feat：人物搜索

2026-05-25 02:09:59 +08:00 · 2024-04-26 20:35:40 +08:00
parent 54415377ee
commit db0d5133e8
5 changed files with 82 additions and 124 deletions
--- a/src/components/cards/TmdbPersonCard.vue
+++ b/src/components/cards/TmdbPersonCard.vue
@@ -17,15 +17,13 @@ const isImageLoaded = ref(false)

 // 人物图片地址
 function getPersonImage() {
-  if (!personInfo.value?.profile_path)
-    return personIcon
+  if (!personInfo.value?.profile_path) return personIcon
  return `https://image.tmdb.org/t/p/w600_and_h900_bestv2${personInfo.value?.profile_path}`
 }

 // 人物详情
 function goPersonDetail() {
-  if (!personInfo.value?.id)
-    return
+  if (!personInfo.value?.id) 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
-                    :src="getPersonImage()"
-                    cover
-                    @load="isImageLoaded = true"
-                  />
+                  <VImg :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" />
--- a/src/layouts/components/SearchBar.vue
+++ 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)
-    return
+  if (!searchWord.value) 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
-    class="d-flex align-center cursor-pointer"
-    style="user-select: none;"
-  >
-    <VDialog
-      v-model="searchDialog"
-      max-width="50rem"
-      transition="dialog-top-transition"
-    >
+  <div class="d-flex align-center cursor-pointer" 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
-            variant="tonal"
-            @click="search"
-          >
-            搜索
-          </VBtn>
+          <VBtn variant="tonal" @click="search"> 搜索 </VBtn>
        </VCardActions>
      </VCard>
    </VDialog>
  </div>
  <!-- 👉 Search Icon -->
-  <IconBtn
-    class="d-lg-none"
-    @click="openSearchDialog"
-  >
+  <IconBtn 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>
--- a/src/pages/browse.vue
+++ b/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))
-    return paths.join('/')
-  else
-    return paths
+  if (Array.isArray(paths)) return paths.join('/')
+  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>
--- a/src/views/discover/MediaCardListView.vue
+++ b/src/views/discover/MediaCardListView.vue
@@ -12,11 +12,7 @@ const props = defineProps({

 // 判断是否有滚动条
 function hasScroll() {
-  return (
-    document.body.scrollHeight
-      - (window.innerHeight || document.documentElement.clientHeight)
-    > 2
-  )
+  return document.body.scrollHeight - (window.innerHeight || document.documentElement.clientHeight) > 2
 }

 // 当前页码
@@ -37,8 +33,7 @@ function getParams() {
  let params = {
    page: page.value,
  }
-  if (props.params)
-    params = { ...params, ...props.params }
+  if (props.params) params = { ...params, ...props.params }

  return params
 }
@@ -46,8 +41,7 @@ function getParams() {
 // 获取列表数据
 async function fetchData({ done }: { done: any }) {
  try {
-    if (!props.apipath)
-      return
+    if (!props.apipath) 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
-    v-if="!isRefreshed"
-    class="mt-12"
-  />
-  <VInfiniteScroll
-    mode="intersect"
-    side="end"
-    :items="dataList"
-    class="overflow-hidden"
-    @load="fetchData"
-  >
+  <LoadingBanner v-if="!isRefreshed" class="mt-12" />
+  <VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-hidden" @load="fetchData">
    <template #loading />
    <template #empty />
-    <div
-      v-if="dataList.length > 0"
-      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 v-if="dataList.length > 0" 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"
--- a/src/views/discover/PersonCardListView.vue
+++ b/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 (
-    document.body.scrollHeight
-      - (window.innerHeight || document.documentElement.clientHeight)
-    > 2
-  )
+  return 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)
-      return
+    if (!props.apipath) 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: {
-            page: page.value,
-          },
+          params: getParams(),
        })
        // 取消加载中
        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: {
-          page: page.value,
-        },
+        params: getParams(),
      })
      // 标计为已请求完成
      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
-    v-if="!isRefreshed"
-    class="mt-12"
-  />
-  <VInfiniteScroll
-    mode="intersect"
-    side="end"
-    :items="dataList"
-    class="overflow-hidden"
-    @load="fetchData"
-  >
+  <LoadingBanner v-if="!isRefreshed" class="mt-12" />
+  <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 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 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>
    <NoDataFound
      v-if="dataList.length === 0 && isRefreshed"