feat 搜索框聚焦、发现页缓存

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

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 () => {
+onMounted(() => {
-  try {
+  fetchData()
-    dataList.value = await fetchData()
-  }
-  catch (error) {
-    console.error(error)
-  }
 })
 </script>
 

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,
           },
         },