From 6694e7e92965df55537d74fc27fc0d9610fdeb1e Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Thu, 12 Oct 2023 08:13:05 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E6=90=9C=E7=B4=A2=E6=A1=86=E8=81=9A?=
 =?UTF-8?q?=E7=84=A6=E3=80=81=E5=8F=91=E7=8E=B0=E9=A1=B5=E7=BC=93=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/components/SearchBar.vue | 31 ++++++++++++++++++----------
 src/pages/resource.vue               | 19 ++++++-----------
 src/router/index.ts                  |  2 ++
 3 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/src/layouts/components/SearchBar.vue b/src/layouts/components/SearchBar.vue
index ecbda2a3..b1f85c59 100644
--- a/src/layouts/components/SearchBar.vue
+++ b/src/layouts/components/SearchBar.vue
@@ -8,6 +8,9 @@ const searchWord = ref<string>('')
 // 搜索弹窗
 const searchDialog = ref(false)
 
+// ref
+const searchWordInput = ref<HTMLElement | null>(null)
+
 // Search
 function search() {
   if (!searchWord.value)
@@ -21,6 +24,14 @@ function search() {
     },
   })
 }
+
+// 打开搜索弹窗
+function openSearchDialog() {
+  searchDialog.value = true
+  nextTick(() => {
+    searchWordInput.value?.focus()
+  })
+}
 </script>
 
 <template>
@@ -34,23 +45,16 @@ function search() {
       max-width="50rem"
       transition="dialog-top-transition"
     >
-      <!-- Dialog Activator -->
-      <template #activator="{ props }">
-        <IconBtn
-          class="d-lg-none"
-          v-bind="props"
-        >
-          <VIcon icon="mdi-magnify" />
-        </IconBtn>
-      </template>
       <!-- Dialog Content -->
       <VCard title="搜索">
         <VCardText>
           <VRow>
             <VCol cols="12">
               <VTextField
+                ref="searchWordInput"
                 v-model="searchWord"
                 label="电影、电视剧名称"
+                @keydown.enter="search"
               />
             </VCol>
           </VRow>
@@ -60,7 +64,6 @@ function search() {
           <VSpacer />
           <VBtn
             @click="search"
-            @keydown.enter="search"
           >
             搜索
           </VBtn>
@@ -68,7 +71,13 @@ function search() {
       </VCard>
     </VDialog>
   </div>
-
+  <!-- 👉 Search Icon -->
+  <IconBtn
+    class="d-lg-none"
+    @click="openSearchDialog"
+  >
+    <VIcon icon="mdi-magnify" />
+  </IconBtn>
   <!-- 👉 Search Textfield -->
   <span class="w-1/5">
     <VTextField
diff --git a/src/pages/resource.vue b/src/pages/resource.vue
index 3aecd3e6..3a2c88bb 100644
--- a/src/pages/resource.vue
+++ b/src/pages/resource.vue
@@ -65,18 +65,17 @@ function setViewType(type: string) {
 }
 
 // 获取搜索列表数据
-async function fetchData(): Promise<Array<Context>> {
+async function fetchData() {
   try {
-    let searchData: Array<Context>
     if (!keyword) {
       // 查询上次搜索结果
-      searchData = await api.get('search/last')
+      dataList.value = await api.get('search/last')
     }
     else {
       startLoadingProgress()
       // 优先按TMDBID精确查询
       if (keyword?.startsWith('tmdb:') || keyword?.startsWith('douban:')) {
-        searchData = await api.get(`search/media/${keyword}`, {
+        dataList.value = await api.get(`search/media/${keyword}`, {
           params: {
             mtype: type,
             area,
@@ -85,13 +84,12 @@ async function fetchData(): Promise<Array<Context>> {
       }
       else {
         // 按标题模糊查询
-        searchData = await api.get(`search/title/${keyword}`)
+        dataList.value = await api.get(`search/title/${keyword}`)
       }
       stopLoadingProgress()
     }
     // 标记已刷新
     isRefreshed.value = true
-    return Promise.resolve(searchData)
   }
   catch (error) {
     console.error(error)
@@ -100,13 +98,8 @@ async function fetchData(): Promise<Array<Context>> {
 }
 
 // 加载数据
-onMounted(async () => {
-  try {
-    dataList.value = await fetchData()
-  }
-  catch (error) {
-    console.error(error)
-  }
+onMounted(() => {
+  fetchData()
 })
 </script>
 
diff --git a/src/router/index.ts b/src/router/index.ts
index 50001514..3029eeab 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -103,6 +103,7 @@ const router = createRouter({
           component: () => import('../pages/browse.vue'),
           props: true,
           meta: {
+            keepAlive: true,
             requiresAuth: true,
           },
         },
@@ -111,6 +112,7 @@ const router = createRouter({
           component: () => import('../pages/credits.vue'),
           props: true,
           meta: {
+            keepAlive: true,
             requiresAuth: true,
           },
         },