feat: 搜索结果使用 Tab 切换

components/ResultItem.vue

@@ -24,7 +24,7 @@ async function copyUrl() {
       <nuxt-link class="font-bold text-5 hover:color-blue" :to="data.url" target="_blank">
         <span>{{ data.title }}</span>
       </nuxt-link>
-      <Button @click="copyUrl" variant="secondary" size="sm" margin-left="3px" class="ml-3 mt-3">
+      <Button @click="copyUrl" variant="secondary" size="sm" margin-left="3px" class="ml-3">
         <Copy class="w-4 h-4 mr-2"></Copy>复制商家链接
       </Button>
     </span>
@@ -35,13 +35,13 @@ async function copyUrl() {
           {{ data.provider }}
         </Badge>
       </a>
-      <Badge v-if="data.date" variant="outline"
-        ><Calendar class="w-3 h-3 mr-2"></Calendar>
-        <span class="select-none mr-1">发售日:</span><span>{{ data.date }}</span>
+      <Badge v-if="data.date" variant="outline" class="whitespace-nowrap"
+        ><Calendar class="w-3 h-3 mr-2"></Calendar><span class="select-none mr-1">发售日:</span
+        ><span>{{ data.date }}</span>
       </Badge>
-      <Badge v-if="data.price" variant="outline"
-        ><BadgeJapaneseYen class="w-3 h-3 mr-2"></BadgeJapaneseYen>
-        <span>{{ data.price }}</span><span class="select-none ml-1">円</span>
+      <Badge v-if="data.price" variant="outline" class="whitespace-nowrap"
+        ><BadgeJapaneseYen class="w-3 h-3 mr-2"></BadgeJapaneseYen> <span>{{ data.price }}</span
+        ><span class="select-none ml-1">円</span>
       </Badge>
     </span>
     <ul>

components/SearchResult.vue

@@ -1,22 +1,80 @@
 <script setup lang="ts">
 import type { Detail } from 'get-bonus';
+import { AlertCircle, SearchCheck, RotateCw } from 'lucide-vue-next';
 
 const props = defineProps<{ details: Record<string, Detail[]> }>();
 
-const detailEntries = computed(() => {
-  return Object.entries(props.details).filter((d) => d[1].length > 0);
-});
+const platforms = [`Melonbooks`, `Animate`, `虎穴`, `Gamers`, `Comic Zin`, `漫画王`];
 </script>
 
 <template>
-  <Accordion type="multiple" :default-value="detailEntries.map((d) => d[0])">
-    <AccordionItem v-for="[id, results] in detailEntries" :key="id" :value="id">
-      <AccordionTrigger>{{ id }}</AccordionTrigger>
-      <AccordionContent>
-        <ul class="grid gap-4">
-          <ResultItem v-for="result in results" :key="result.url" :data="result" />
-        </ul>
-      </AccordionContent>
-    </AccordionItem>
-  </Accordion>
+  <div class="p-2.5 b-1 rounded-2">
+    店铺名称旁有
+    <button variant="ghost" class="selecct-none"><SearchCheck class="w-3.5 h-3.5"></SearchCheck></button>
+    即为搜索完成；
+    店铺名称旁有
+    <button variant="ghost" class="selecct-none"><AlertCircle class="w-3.5 h-3.5"></AlertCircle></button>
+    则代表该店铺无搜索结果 或是 搜索错误，可点击对应的店铺 Tab 以查看排障指引或对单个店铺重新搜索。
+  </div>
+  <br />
+  <Tabs
+    type="multiple"
+    :default-value="platforms.find((id) => details[id] && details[id].length > 0)"
+  >
+    <TabsList>
+      <TabsTrigger v-for="id in platforms" :key="id" :value="id">
+        {{ id }} 
+        <SearchCheck v-if="details[id] && details[id].length > 0" class="w-4 h-4 ml-1"></SearchCheck>
+        <AlertCircle v-else class="w-4 h-4 ml-1"></AlertCircle>
+      </TabsTrigger>
+    </TabsList>
+    <TabsContent v-for="id in platforms" :key="id" :value="id">
+      <ul v-if="details[id] && details[id].length > 0" class="grid gap-4 w-full">
+        <ResultItem v-for="result in details[id]" :key="result.url" :data="result" />
+      </ul>
+      <div v-else>
+        <Card>
+          <CardContent class="p-6">
+            <Button variant="secondary" size="sm" class="mb-2">
+            <RotateCw class="w-4 h-4 mr-2"></RotateCw>重新搜索（仅重搜本店铺）
+            </Button>
+            <br />
+            在 {{ id }} 没有找到任何符合 搜索关键词 + 搜索条件（如有）的商品。
+            <br />
+            <del>请先尝试点击「重新搜索（仅重搜本店铺）」按钮来重试一次。</del>此功能尚在开发，敬请期待。
+            <br />
+            如果仍然没有搜索结果，请参考以下内容：
+            <br />
+            1. 请先确认您在搜索框输入的是商品（书籍等）的<span class="font-bold"
+              >原文（例如：日文）标题</span
+              >，且输入准确无误、不是简称。 <br />如果您输入的是中文译名，您应该可以在此段文字上方的
+              Bangumi 番组计划 信息卡片，一键复制原文标题，重新进行搜索。如果上方来自 Bangumi
+              番组计划 的结果有误，请自行找到正确的原文标题。
+            <br />
+            2. 尝试调整搜索条件。
+            <br />
+            3. 尝试只输入作品名称，或是商品名称当中较为关键的词语；搜索书籍可删去 第X卷 / X 巻
+              等卷数表述，改用半角数字（如：0 1 ……），或不带卷数搜索。
+            <br />
+            4.
+            在商家网站自行搜索一次。如果商家网站也一样没有，且搜索关键词没有问题、在商家网站的搜索条件设置无误，那就可能是商家自己尚未上架，请耐心等待。
+            <br />
+            5.
+            如果您访问本站的网络连接欠佳，可能也无法正常进行搜索并弹出本提示。请自行解决此类问题。
+            <br />
+            6. 如果您已阅读上述提示并都尝试过，<span class="font-bold"
+              >并且商家官网本来可以搜得到</span
+              >但这里没能显示出来，请
+            <a
+              href="https://github.com/YurierDept/get-bonus/issues"
+              target="_blank"
+              class="color-blue"
+              >提交 Issue</a
+            >
+            给开发者，开发者会协助解决。
+          </CardContent>
+        </Card>
+      </div>
+    </TabsContent>
+  </Tabs>
 </template>

components/ui/scroll-area/ScrollArea.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue';
+import {
+  ScrollAreaCorner,
+  ScrollAreaRoot,
+  type ScrollAreaRootProps,
+  ScrollAreaViewport
+} from 'radix-vue';
+import ScrollBar from './ScrollBar.vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <ScrollAreaRoot v-bind="delegatedProps" :class="cn('relative overflow-hidden', props.class)">
+    <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
+      <slot />
+    </ScrollAreaViewport>
+    <ScrollBar orientation="horizontal" />
+    <ScrollAreaCorner />
+  </ScrollAreaRoot>
+</template>

components/ui/scroll-area/ScrollBar.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
+  orientation: 'vertical',
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ScrollAreaScrollbar
+    v-bind="delegatedProps"
+    :class="
+      cn('flex touch-none select-none transition-colors',
+         orientation === 'vertical'
+           && 'h-full w-2.5 border-l border-l-transparent p-px',
+         orientation === 'horizontal'
+           && 'h-2.5 flex-col border-t border-t-transparent p-px',
+         props.class)"
+  >
+    <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaScrollbar>
+</template>

components/ui/scroll-area/index.ts

@@ -0,0 +1,2 @@
+export { default as ScrollArea } from './ScrollArea.vue'
+export { default as ScrollBar } from './ScrollBar.vue'

pages/index.vue

@@ -281,20 +281,25 @@ onMounted(() => {
               >
               <br />
               1. 请先确认您在搜索框输入的是商品（书籍等）的<span class="font-bold"
-                >原文（例如：日文）标题</span
+              >原文（例如：日文）标题</span
               >，且输入准确无误、不是简称。 <br />如果您输入的是中文译名，您应该可以在此段文字上方的
               Bangumi 番组计划 信息卡片，一键复制原文标题，重新进行搜索。如果上方来自 Bangumi
               番组计划 的结果有误，请自行找到正确的原文标题。
               <br />
-              2. 尝试调整搜索设置。
+              2. 尝试调整搜索条件。
               <br />
               3. 尝试只输入作品名称，或是商品名称当中较为关键的词语；搜索书籍可删去 第X卷 / X 巻
               等卷数表述，改用半角数字（如：0 1 ……），或不带卷数搜索。
               <br />
               4.
+              在商家网站自行搜索一次。如果商家网站也一样没有，且搜索关键词没有问题、在商家网站的搜索条件设置无误，那就可能是商家自己尚未上架，请耐心等待。
+              <br />
+              5.
               如果您访问本站的网络连接欠佳，可能也无法正常进行搜索并弹出本提示。请自行解决此类问题。
               <br />
-              5. 如果您已阅读上述提示并都尝试过，但仍然无法解决问题，请
+              6. 如果您已阅读上述提示并都尝试过，<span class="font-bold"
+              >并且商家官网本来可以搜得到</span
+              >但这里没能显示出来，请
               <a
                 href="https://github.com/YurierDept/get-bonus/issues"
                 target="_blank"
@@ -313,7 +318,7 @@ onMounted(() => {
               <AlertCircle />
               没有搜索结果。</span
             ><br />
-            无法在 Bangumi 番组计划 与所有支持的商家找到任何符合搜索关键词的作品与商品。
+            无法在 Bangumi 番组计划 与所有支持的商家找到任何符合搜索关键词和搜索条件的作品与商品。
             <br />
             1. 请先确认您在搜索框输入的是商品（书籍等）的<span class="font-bold"
               >原文（例如：日文）标题</span
@@ -323,15 +328,18 @@ onMounted(() => {
               >同样不能是简称</span
             >。
             <br />
-            2. 尝试调整搜索设置。
+            2. 尝试调整搜索条件。
             <br />
             3. 尝试只输入作品名称，或是商品名称当中较为关键的词语；搜索书籍可删去 第X卷 / X 巻
             等卷数表述，改用半角数字（如：0 1 ……），或不带卷数搜索。
             <br />
             4.
+            在商家网站自行搜索一次。如果商家网站也一样没有，且搜索关键词没有问题、在商家网站的搜索条件设置无误，那就可能是商家自己尚未上架，请耐心等待。
+            <br />
+            5.
             如果您访问本站的网络连接欠佳，可能也无法正常进行搜索并弹出本提示。请自行解决此类问题。
             <br />
-            5. 如果您已阅读上述提示并都尝试过，但仍然无法解决问题（例如：使用相同关键词在 Bangumi
+            6. 如果您已阅读上述提示并都尝试过，但仍然无法解决问题（例如：使用相同关键词在 Bangumi
             番组计划 或支持的商家可以搜到商品，但这里无法搜到），请
             <a
               href="https://github.com/YurierDept/get-bonus/issues"