fix: search item and not load data in server

yjl9903 · yjl9903 · commit 06a10d07ffbb · 2024-02-16T22:58:17.000+08:00
diff --git a/pages/index.vue b/pages/index.vue
@@ -1,18 +1,29 @@
 <script setup lang="ts">
 import type { Detail } from 'get-bonus';
 import type { SubjectInformation, SubjectPersons, PersonInformation } from 'bgmc';
-import { Loader, Loader2, Search, Moon, Sun, Trash2, XCircle, Sparkles, History, AlertCircle } from 'lucide-vue-next';
-import { ref, watchEffect } from 'vue'; 
-import { Card, CardContent} from '..//components/ui/card';
+import {
+  Loader,
+  Loader2,
+  Search,
+  Moon,
+  Sun,
+  Trash2,
+  XCircle,
+  Sparkles,
+  History,
+  AlertCircle
+} from 'lucide-vue-next';
+import { ref, watchEffect } from 'vue';
+import { Card, CardContent } from '..//components/ui/card';
 
 const route = useRoute();
 const router = useRouter();
 
-const { data } = await useAsyncData('search_results', async () =>
-  route.query.q
-    ? Promise.all([$fetch(`/api/search/${route.query.q}`), $fetch(`/api/bgm/${route.query.q}`, {})])
-    : undefined
-);
+// const { data } = await useAsyncData('search_results', async () =>
+//   route.query.q
+//     ? Promise.all([$fetch(`/api/search/${route.query.q}`), $fetch(`/api/bgm/${route.query.q}`, {})])
+//     : undefined
+// );
 
 type FullDetail = {
   details: Record<string, Detail[]> | null;
@@ -21,18 +32,22 @@ type FullDetail = {
 };
 
 const details = ref<FullDetail | null>(
-  data.value
-    ? {
-        details: data.value[0].details,
-        subject: data.value[1]?.subject,
-        persons: data.value[1]?.persons
-      }
-    : null
+  null
+  // data.value
+  //   ? {
+  //       details: data.value[0].details,
+  //       subject: data.value[1]?.subject,
+  //       persons: data.value[1]?.persons
+  //     }
+  //   : null
 );
 
 let abort: AbortController | null = null;
-const searchInput = ref((route.query.q as string | null) || '');
+// const searchInput = ref((route.query.q as string | null) || '');
+const searchInput = ref('');
 const isSearching = ref(false);
+const searchHistory = ref<string[]>([]);
+
 const resetSearch = () => {
   if (!abort && !searchInput.value && !details.value) return;
   abort?.abort();
@@ -52,8 +67,8 @@ const search = async (input: string) => {
     path: route.path,
     query: { q: input }
   });
-  const updatedHistory = [input, ...searchHistory.value.filter(item => item !== input)];  
-  searchHistory.value = updatedHistory.slice(0, 5);   
+  const updatedHistory = [input, ...searchHistory.value.filter((item) => item !== input)];
+  searchHistory.value = updatedHistory.slice(0, 5);
   try {
     abort = new AbortController();
     isSearching.value = true;
@@ -83,7 +98,8 @@ watch(
         search(searchInput.value);
       }
     }
-  }
+  },
+  { immediate: true }
 );
 
 const foundNums = computed(() => {
@@ -118,34 +134,32 @@ const random = (arr: string[]) => {
 
 const colorMode = useColorMode();
 
-const searchHistory = ref<string[]>([]);  
-  
-// 初始化时从localStorage加载搜索历史  
-const initHistory = () => {  
-    const savedHistory = localStorage.getItem('searchHistory');  
-    if (savedHistory) {  
-      searchHistory.value = JSON.parse(savedHistory) as string[];  
-    }  
-};  
-  
-// 移除历史记录中的某个条目  
-const removeHistoryItem = (index: number) => {  
-  searchHistory.value.splice(index, 1);  
-};  
-  
-// 清空搜索历史  
-const clearHistory = () => {  
-  searchHistory.value = [];  
-};  
+// 初始化时从localStorage加载搜索历史
+const initHistory = () => {
+  const savedHistory = localStorage.getItem('searchHistory');
+  if (savedHistory) {
+    searchHistory.value = JSON.parse(savedHistory) as string[];
+  }
+};
+
+// 移除历史记录中的某个条目
+const removeHistoryItem = (index: number) => {
+  searchHistory.value.splice(index, 1);
+};
+
+// 清空搜索历史
+const clearHistory = () => {
+  searchHistory.value = [];
+};
 
-onMounted(() => {  
-  initHistory(); 
+onMounted(() => {
+  initHistory();
 
-  // 监听searchHistory的变化并保存到localStorage  
-  watchEffect(() => {  
-    localStorage.setItem('searchHistory', JSON.stringify(searchHistory.value));  
-});   
-}); 
+  // 监听searchHistory的变化并保存到localStorage
+  watchEffect(() => {
+    localStorage.setItem('searchHistory', JSON.stringify(searchHistory.value));
+  });
+});
 </script>
 
 <template>
@@ -201,21 +215,21 @@ onMounted(() => {
         <button class="mr-1.5">
           <History class="w-3 h-3"></History>
         </button>
-        搜索历史 
+        搜索历史
       </Badge>
       <Badge variant="outline" class="select-none mr-4">
-        <button @click="clearHistory" >
+        <button @click="clearHistory">
           <Trash2 class="w-3 h-3"></Trash2>
-        </button> 
+        </button>
       </Badge>
-      <Item v-for="(item, index) in searchHistory" :key="index" class="mr-4">  
-          <button @click="search(item)" class="mr-3">
-            {{ item }}
-          </button>    
-          <button @click="removeHistoryItem(index)">
-            <XCircle class="w-3 h-3 mr-4"></XCircle>
-          </button>  
-      </Item>   
+      <span v-for="(item, index) in searchHistory" :key="index" class="mr-4">
+        <button @click="search(item)" class="mr-3">
+          {{ item }}
+        </button>
+        <button @click="removeHistoryItem(index)">
+          <XCircle class="w-3 h-3 mr-4"></XCircle>
+        </button>
+      </span>
     </div>
     <div class="mt-4 flex gap-4">
       <ClientOnly>
@@ -224,8 +238,8 @@ onMounted(() => {
             <button class="mr-1.5">
               <Sparkles class="w-3 h-3"></Sparkles>
             </button>
-            试一试吧
-          </Badge>&nbsp;
+            试一试吧 </Badge
+          >&nbsp;
           <span v-for="(title, idx) in random(examples)" :key="title"
             >{{ idx > 0 ? '&nbsp;|&nbsp; ' : ''
             }}<span
@@ -248,16 +262,16 @@ onMounted(() => {
         ></BangumiResult>
         <div v-else class="flex">
           <Card class="w-full mb-6">
-          <CardContent class="p-6">
-          <span class="text-2xl font-bold">貌似在 Bangumi 番组计划 没有找到作品详情。</span>
-          <br />如果你搜索的并不是一部具体的「作品」，或者下方的商家搜索结果已按预期输出，请忽略本提示。
-          <br />如果你搜索的作品在 Bangumi 番组计划存在，但仍然弹出这个提示，您可以<a
-            href="https://github.com/YurierDept/get-bonus/issues"
-            target="_blank"
-            class="color-blue"
-            >提交 Issue</a
-          >。
-          </CardContent>
+            <CardContent class="p-6">
+              <span class="text-2xl font-bold">貌似在 Bangumi 番组计划 没有找到作品详情。</span>
+              <br />如果你搜索的并不是一部具体的「作品」，或者下方的商家搜索结果已按预期输出，请忽略本提示。
+              <br />如果你搜索的作品在 Bangumi 番组计划存在，但仍然弹出这个提示，您可以<a
+                href="https://github.com/YurierDept/get-bonus/issues"
+                target="_blank"
+                class="color-blue"
+                >提交 Issue</a
+              >。
+            </CardContent>
           </Card>
         </div>
         <SearchResult
@@ -266,67 +280,72 @@ onMounted(() => {
         ></SearchResult>
         <div v-else>
           <Card class="w-full mb-6">
-          <CardContent class="p-6">
-          <span class="text-2xl font-bold"
-            ><AlertCircle />
-            已在目前支持的所有商家都搜索了一次，但貌似找不到商品。</span
-          >
-          <br />
-          1. 请先确认您在搜索框输入的是商品（书籍等）的<span class="font-bold"
-            >原文（例如：日文）标题</span
-          >，且输入准确无误、不是简称。 <br />如果您输入的是中文译名，您应该可以在此段文字上方的
-          Bangumi 番组计划 信息卡片，一键复制原文标题，重新进行搜索。如果上方来自 Bangumi 番组计划
-          的结果有误，请自行找到正确的原文标题。
-          <br />
-          2. 尝试调整搜索设置。
-          <br />
-          3. 尝试只输入作品名称，或是商品名称当中较为关键的词语；搜索书籍可删去 第X卷 / X 巻
-          等卷数表述，改用半角数字（如：0 1 ……），或不带卷数搜索。
-          <br />
-          4. 如果您访问本站的网络连接欠佳，可能也无法正常进行搜索并弹出本提示。请自行解决此类问题。
-          <br />
-          5. 如果您已阅读上述提示并都尝试过，但仍然无法解决问题，请
-          <a
-            href="https://github.com/YurierDept/get-bonus/issues"
-            target="_blank"
-            class="color-blue"
-            >提交 Issue</a
-          >
-          给开发者，开发者会协助解决。
-          </CardContent>
+            <CardContent class="p-6">
+              <span class="text-2xl font-bold"
+                ><AlertCircle /> 已在目前支持的所有商家都搜索了一次，但貌似找不到商品。</span
+              >
+              <br />
+              1. 请先确认您在搜索框输入的是商品（书籍等）的<span class="font-bold"
+                >原文（例如：日文）标题</span
+              >，且输入准确无误、不是简称。 <br />如果您输入的是中文译名，您应该可以在此段文字上方的
+              Bangumi 番组计划 信息卡片，一键复制原文标题，重新进行搜索。如果上方来自 Bangumi
+              番组计划 的结果有误，请自行找到正确的原文标题。
+              <br />
+              2. 尝试调整搜索设置。
+              <br />
+              3. 尝试只输入作品名称，或是商品名称当中较为关键的词语；搜索书籍可删去 第X卷 / X 巻
+              等卷数表述，改用半角数字（如：0 1 ……），或不带卷数搜索。
+              <br />
+              4.
+              如果您访问本站的网络连接欠佳，可能也无法正常进行搜索并弹出本提示。请自行解决此类问题。
+              <br />
+              5. 如果您已阅读上述提示并都尝试过，但仍然无法解决问题，请
+              <a
+                href="https://github.com/YurierDept/get-bonus/issues"
+                target="_blank"
+                class="color-blue"
+                >提交 Issue</a
+              >
+              给开发者，开发者会协助解决。
+            </CardContent>
           </Card>
         </div>
       </div>
       <div v-else-if="details && foundNums === 0">
         <Card class="w-full mb-6">
-        <CardContent class="p-6">
-        <span class="text-2xl font-bold">
-          <AlertCircle />
-          没有搜索结果。</span><br />
-        无法在 Bangumi 番组计划 与所有支持的商家找到任何符合搜索关键词的作品与商品。
-        <br />
-        1. 请先确认您在搜索框输入的是商品（书籍等）的<span class="font-bold"
-          >原文（例如：日文）标题</span
-        >，且输入准确无误、不是简称。<br />
-        如果您输入的是中文译名，想用中文译名来查原文（例如：日文）标题，请注意您输入的中文译名需要完整、输入准确无误，<span
-          class="font-bold"
-          >同样不能是简称</span
-        >。
-        <br />
-        2. 尝试调整搜索设置。
-        <br />
-        3. 尝试只输入作品名称，或是商品名称当中较为关键的词语；搜索书籍可删去 第X卷 / X 巻
-        等卷数表述，改用半角数字（如：0 1 ……），或不带卷数搜索。
-        <br />
-        4. 如果您访问本站的网络连接欠佳，可能也无法正常进行搜索并弹出本提示。请自行解决此类问题。
-        <br />
-        5. 如果您已阅读上述提示并都尝试过，但仍然无法解决问题（例如：使用相同关键词在 Bangumi
-        番组计划 或支持的商家可以搜到商品，但这里无法搜到），请
-        <a href="https://github.com/YurierDept/get-bonus/issues" target="_blank" class="color-blue"
-          >提交 Issue</a
-        >
-        给开发者，开发者会协助解决。
-        </CardContent>
+          <CardContent class="p-6">
+            <span class="text-2xl font-bold">
+              <AlertCircle />
+              没有搜索结果。</span
+            ><br />
+            无法在 Bangumi 番组计划 与所有支持的商家找到任何符合搜索关键词的作品与商品。
+            <br />
+            1. 请先确认您在搜索框输入的是商品（书籍等）的<span class="font-bold"
+              >原文（例如：日文）标题</span
+            >，且输入准确无误、不是简称。<br />
+            如果您输入的是中文译名，想用中文译名来查原文（例如：日文）标题，请注意您输入的中文译名需要完整、输入准确无误，<span
+              class="font-bold"
+              >同样不能是简称</span
+            >。
+            <br />
+            2. 尝试调整搜索设置。
+            <br />
+            3. 尝试只输入作品名称，或是商品名称当中较为关键的词语；搜索书籍可删去 第X卷 / X 巻
+            等卷数表述，改用半角数字（如：0 1 ……），或不带卷数搜索。
+            <br />
+            4.
+            如果您访问本站的网络连接欠佳，可能也无法正常进行搜索并弹出本提示。请自行解决此类问题。
+            <br />
+            5. 如果您已阅读上述提示并都尝试过，但仍然无法解决问题（例如：使用相同关键词在 Bangumi
+            番组计划 或支持的商家可以搜到商品，但这里无法搜到），请
+            <a
+              href="https://github.com/YurierDept/get-bonus/issues"
+              target="_blank"
+              class="color-blue"
+              >提交 Issue</a
+            >
+            给开发者，开发者会协助解决。
+          </CardContent>
         </Card>
       </div>
       <div v-else>
