feat: BangumiResult.vue: Typesetting revision and other optimizations…

…; delete CardDescription(no need)
YurierDept · Feb 7, 2024 · ad1236f · ad1236f
1 parent 40fde4a
commit ad1236f
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 55 deletions.
diff --git a/components/BangumiResult.vue b/components/BangumiResult.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { SubjectInformation, SubjectPersons, PersonInformation } from 'bgmc';
 
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './ui/card';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from './ui/card';
 
 import { toast } from 'vue-sonner';
 import { ClipboardCopy } from 'lucide-vue-next';
@@ -61,34 +61,23 @@ async function copyOriginTitle() {
 </script>
 
 <template>
+  <div class="mb-3">正在为您展现：作品信息卡片 & 在所有支持商家的搜索结果</div>
   <Card class="w-full mb-6">
-    <CardHeader>
-      <CardTitle>
-        <a :href="`https://bgm.tv/subject/${subject.id}`" target="_blank" class="hover:color-blue">
-          <span v-if="subject.name_cn && subject.name"
+    <CardContent class="flex gap-4 lt-md:flex-col p-6">
+      <div class="flex flex-col"><NuxtImg class="max-w-36" :src="subject.images.large" :placeholder="144" /></div>
+      <div>
+        <CardHeader>
+        <CardTitle>
+        <span v-if="subject.name_cn && subject.name"
             ><span>{{ subject.name_cn }}</span
             ><span class="inline-block ml-3 font-normal text-base">原文标题：{{ subject.name }}</span></span
           >
           <span v-else>{{ subject.name }}</span>
-        </a>
-      </CardTitle>
-      <CardDescription class="mt-2">
-        <span>Bangumi ID: </span>
-        <a
-          :href="`https://bgm.tv/subject/${subject.id}`"
-          target="_blank"
-          class="hover:color-blue"
-          >{{ subject.id }}</a
-        >
-        <Button @click="copyOriginTitle" variant="secondary" size="sm" margin-left="3px" class="ml-3 mt-3"
+        </CardTitle>
+        <Button @click="copyOriginTitle" variant="secondary" size="sm" class="mt-3" 
           ><ClipboardCopy class="w-4 h-4 mr-2"  ></ClipboardCopy>复制原文标题</Button
         >
-      </CardDescription>
-    </CardHeader>
-    <CardContent class="flex gap-4 lt-md:flex-col">
-      <div><NuxtImg class="max-w-36" :src="subject.images.large" :placeholder="144" /></div>
-      <div>
-        <div class="text-sm">{{ subject.summary }}</div>
+        </CardHeader>
         <div class="mt-6 space-y-1">
           <div v-for="[relation, list] in persons" :key="relation">
             <span class="font-bold mr-2">{{ relation }}</span>
@@ -114,36 +103,33 @@ async function copyOriginTitle() {
               </a>
             </span>
           </div>
+          <div class="mt-1">
+          <a
+            :href="`https://bgm.tv/subject/${subject.id}`"
+            target="_blank"
+            class="color-blue"
+          >查看作品在 Bangumi 番组计划 的条目 →</a
+          >
+          </div>
         </div>
       </div>
     </CardContent>
     <CardFooter class="flex flex-col items-start px-6 pt-4 pb-6 border-t text-sm space-y-1">
       <div>
-        上述信息来自
+        ①信息来自  
         <a
           href="https://bgm.tv/"
           target="_blank"
           class="text-blue-400 hover:text-blue-500 hover:underline"
           >Bangumi 番组计划</a
-        >。
-      </div>
-      <div>
-        因版面所限，仅展示在
+        > 。
+        <br/>②如果本卡片的展现结果不符合预期（如：作品完全不对；想搜本作却搜到外传），请检查搜索关键词是否完整无误，避免使用简称。也可以
         <a
-          href="https://bgm.tv/"
-          target="_blank"
-          class="text-blue-400 hover:text-blue-500 hover:underline"
-          >Bangumi 番组计划</a
-        >
-        搜索结果第一页中的标题最相似的一个条目。
-      </div>
-      <div>
-        需要进一步搜索，<a
           :href="`https://bgm.tv/subject_search/${input}?cat=1`"
           target="_blank"
           class="text-blue-400 hover:text-blue-500 hover:underline"
-          >请点这里去 Bangumi 番组计划 搜索 →</a
-        >
+          >在 Bangumi 番组计划 使用相同的搜索关键词详细搜索 →</a
+        >。
       </div>
     </CardFooter>
   </Card>

diff --git a/components/ui/card/CardContent.vue b/components/ui/card/CardContent.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn('p-6 pt-0', props.class)">
+  <div :class="cn('pt-0', props.class)">
     <slot />
   </div>
 </template>
diff --git a/components/ui/card/CardDescription.vue b/components/ui/card/CardDescription.vue
diff --git a/components/ui/card/CardHeader.vue b/components/ui/card/CardHeader.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
+  <div :class="cn('flex flex-col', props.class)">
     <slot />
   </div>
 </template>
diff --git a/components/ui/card/index.ts b/components/ui/card/index.ts
@@ -1,6 +1,5 @@
 export { default as Card } from './Card.vue'
 export { default as CardHeader } from './CardHeader.vue'
 export { default as CardTitle } from './CardTitle.vue'
-export { default as CardDescription } from './CardDescription.vue'
 export { default as CardContent } from './CardContent.vue'
 export { default as CardFooter } from './CardFooter.vue'