feat：人物搜索

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>