From 5092c7f093d96c60b59c698611a5bdf71ae9220f Mon Sep 17 00:00:00 2001
From: Rewrite0 <Rewrite0.me@gmail.com>
Date: Mon, 29 Jul 2024 17:32:43 +0800
Subject: [PATCH] feat: optimize mobile Bangumi list styles

---
 webui/src/components/ab-bangumi-card.vue | 168 +++++++++++------------
 webui/src/components/basic/ab-tag.vue    |   4 +-
 webui/src/pages/index/bangumi.vue        |  11 +-
 3 files changed, 89 insertions(+), 94 deletions(-)

diff --git a/webui/src/components/ab-bangumi-card.vue b/webui/src/components/ab-bangumi-card.vue
index 0fb2adee..b33dfe11 100644
--- a/webui/src/components/ab-bangumi-card.vue
+++ b/webui/src/components/ab-bangumi-card.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { ErrorPicture, Write } from '@icon-park/vue-next';
+import { Write } from '@icon-park/vue-next';
 import type { BangumiRule } from '#/bangumi';
 
 withDefaults(
   defineProps<{
-    type?: 'primary' | 'search' | 'mobile';
+    type?: 'primary' | 'search';
     bangumi: BangumiRule;
   }>(),
   {
@@ -16,103 +16,95 @@ defineEmits(['click']);
 </script>
 
 <template>
-  <div v-if="type === 'primary'" w-150 is-btn @click="() => $emit('click')">
-    <div rounded-4 overflow-hidden poster-shandow rel>
-      <div w-full h-210>
-        <template v-if="bangumi.poster_link">
-          <img :src="bangumi.poster_link" alt="poster" wh-full />
-        </template>
+  <template v-if="type === 'primary'">
+    <div w="full pc:150" is-btn @click="() => $emit('click')">
+      <div rounded-4 overflow-hidden poster-shandow rel>
+        <ab-image
+          :src="bangumi.poster_link"
+          :aspect-ratio="1 / 1.5"
+          w-full
+        ></ab-image>
 
-        <template v-else>
-          <div wh-full f-cer border="1 white">
-            <ErrorPicture theme="outline" size="24" fill="#333" />
-          </div>
-        </template>
-      </div>
-
-      <div
-        abs
-        f-cer
-        z-1
-        inset-0
-        opacity-0
-        transition="all duration-300"
-        hover="backdrop-blur-2 bg-white bg-opacity-30 opacity-100"
-        active="duration-0 bg-opacity-60"
-        class="group"
-      >
         <div
-          text-white
-          rounded="1/2"
-          wh-44
+          abs
           f-cer
-          bg-theme-row
-          group-active="poster-pen-active"
+          z-1
+          inset-0
+          opacity-0
+          transition="all duration-300"
+          hover="backdrop-blur-2 bg-white bg-opacity-30 opacity-100"
+          active="duration-0 bg-opacity-60"
+          class="group"
         >
-          <Write size="20" />
+          <div
+            text-white
+            rounded="1/2"
+            wh-44
+            f-cer
+            bg-theme-row
+            group-active="poster-pen-active"
+          >
+            <Write size="20" />
+          </div>
         </div>
       </div>
-    </div>
 
-    <div py-4>
-      <div text-h3 truncate>{{ bangumi.official_title }}</div>
+      <div py-4>
+        <div text-h3 truncate>{{ bangumi.official_title }}</div>
 
-      <div space-x-5>
-        <ab-tag :title="`Season ${bangumi.season}`" type="primary" />
-        <ab-tag
-          v-if="bangumi.group_name"
-          :title="bangumi.group_name"
-          type="primary"
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    v-else-if="type === 'search'"
-    w-480
-    rounded-12
-    p-4
-    shadow
-    bg="#eee5f4"
-    transition="opacity ease-in-out duration-300"
-  >
-    <div bg-white rounded-8 p-12 fx-cer justify-between gap-x-16>
-      <div w-400 gap-x-16 fx-cer>
-        <div h-44 w-72 rounded-6 overflow-hidden>
-          <template v-if="bangumi.poster_link">
-            <img
-              :src="bangumi.poster_link"
-              alt="poster"
-              w-full
-              translate-y="-25%"
+        <div flex="~ wrap col" pc:flex-row gap-5>
+          <template v-for="i in ['season', 'group_name']" :key="i">
+            <ab-tag
+              v-if="bangumi[i]"
+              :title="i === 'season' ? `Season ${bangumi[i]}` : bangumi[i]"
+              type="primary"
+              pc:max-w="1/2"
             />
           </template>
-
-          <template v-else>
-            <div wh-full f-cer border="1 white">
-              <ErrorPicture theme="outline" size="24" fill="#333" />
-            </div>
-          </template>
-        </div>
-        <div flex="~ col gap-y-4">
-          <div w-300 text="h3 primary" truncate>
-            {{ bangumi.official_title }}
-          </div>
-          <div flex="~ gap-x-8">
-            <template
-              v-for="i in ['season', 'group_name', 'subtitle']"
-              :key="i"
-            >
-              <ab-tag
-                v-if="bangumi[i]"
-                :title="i === 'season' ? `Season ${bangumi[i]}` : bangumi[i]"
-                type="primary"
-              />
-            </template>
-          </div>
         </div>
       </div>
-      <ab-add :round="true" type="medium" @click="() => $emit('click')" />
     </div>
-  </div>
+  </template>
+
+  <template v-else-if="type === 'search'">
+    <div
+      w-480
+      rounded-12
+      p-4
+      shadow
+      bg="#eee5f4"
+      transition="opacity ease-in-out duration-300"
+    >
+      <div bg-white rounded-8 p-12 fx-cer justify-between gap-x-16>
+        <div w-400 gap-x-16 fx-cer>
+          <div w-72 rounded-6 overflow-hidden>
+            <ab-image
+              :src="bangumi.poster_link"
+              :aspect-ratio="72 / 44"
+              w-full
+            ></ab-image>
+          </div>
+
+          <div flex="~ col gap-y-4">
+            <div w-300 text="h3 primary" truncate>
+              {{ bangumi.official_title }}
+            </div>
+            <div flex="~ gap-x-8">
+              <template
+                v-for="i in ['season', 'group_name', 'subtitle']"
+                :key="i"
+              >
+                <ab-tag
+                  v-if="bangumi[i]"
+                  :title="i === 'season' ? `Season ${bangumi[i]}` : bangumi[i]"
+                  type="primary"
+                />
+              </template>
+            </div>
+          </div>
+        </div>
+        <ab-add :round="true" type="medium" @click="() => $emit('click')" />
+      </div>
+    </div>
+  </template>
 </template>
diff --git a/webui/src/components/basic/ab-tag.vue b/webui/src/components/basic/ab-tag.vue
index 5b11de9a..8654d07f 100644
--- a/webui/src/components/basic/ab-tag.vue
+++ b/webui/src/components/basic/ab-tag.vue
@@ -16,8 +16,8 @@ const InnerStyle = computed(() => {
 </script>
 
 <template>
-  <div p-1 rounded-16 inline-flex :class="type">
-    <div bg-white rounded-12 px-8 text-10 truncate max-w-72 :class="InnerStyle">
+  <div p-1 rounded-16 inline-flex w-max :class="type">
+    <div w-full bg-white rounded-12 px-8 text-10 truncate :class="InnerStyle">
       {{ title }}
     </div>
   </div>
diff --git a/webui/src/pages/index/bangumi.vue b/webui/src/pages/index/bangumi.vue
index 3712ef4a..227c9cd2 100644
--- a/webui/src/pages/index/bangumi.vue
+++ b/webui/src/pages/index/bangumi.vue
@@ -15,14 +15,17 @@ onActivated(() => {
 </script>
 
 <template>
-  <div overflow-auto mt-12 flex-grow>
+  <div overflow-auto pr-10 mt-12 flex-grow>
     <div>
       <transition-group
         name="bangumi"
         tag="div"
-        flex="~ wrap"
-        gap="20"
-        :class="{ 'justify-center': isMobile }"
+        gap="10"
+        pc:gap="20"
+        :class="[
+          { 'justify-center': isMobile },
+          isMobile ? 'grid grid-cols-3' : 'flex flex-wrap',
+        ]"
       >
         <ab-bangumi-card
           v-for="i in bangumi"