webui: change v-bind model. add transition effect in mian page.

webui/src/components/ab-bangumi-card.vue

@@ -1,13 +1,11 @@
 <script lang="ts" setup>
 import {ErrorPicture, Write} from '@icon-park/vue-next';
+import type {BangumiRule} from "#/bangumi";
 
 withDefaults(
     defineProps<{
       type?: 'primary' | 'search' | 'mobile';
-      poster: string;
-      name: string;
-      season: number;
-      group?: string;
+      bangumi: BangumiRule;
     }>(),
     {
       type: 'primary',
@@ -21,8 +19,8 @@ defineEmits(['click']);
   <div v-if="type === 'primary'" w-150px is-btn @click="() => $emit('click')">
     <div rounded-4px overflow-hidden poster-shandow rel>
       <div w-full h-210px>
-        <template v-if="poster !== ''">
-          <img :src="poster" alt="poster" wh-full/>
+        <template v-if="bangumi.poster_link">
+          <img :src="bangumi.poster_link" alt="poster" wh-full/>
         </template>
 
         <template v-else>
@@ -62,9 +60,9 @@ defineEmits(['click']);
     </div>
 
     <div py-4px>
-      <div text-h3 truncate>{{ name }}</div>
+      <div text-h3 truncate>{{ bangumi.official_title }}</div>
       <ab-tag
-          :title="`Season ${season}`"
+          :title="`Season ${bangumi.season}`"
           type="primary"
       />
     </div>
@@ -76,8 +74,8 @@ defineEmits(['click']);
         space-x-16px>
       <div w-400px space-x-16px fx-cer>
         <div h-44px w-72px rounded-6px overflow-hidden>
-          <template v-if="poster !== ''">
-            <img :src="poster" alt="poster" w-full class="search-image"/>
+          <template v-if="bangumi.poster_link">
+            <img :src="bangumi.poster_link" alt="poster" w-full class="search-image"/>
           </template>
 
           <template v-else>
@@ -87,15 +85,15 @@ defineEmits(['click']);
           </template>
         </div>
         <div flex-col space-y-4px>
-          <div w-300px text-h3 text-primary truncate>{{ name }}</div>
+          <div w-300px text-h3 text-primary truncate>{{ bangumi.official_title }}</div>
           <div flex space-x-8px>
             <ab-tag
-                :title="`Season ${season}`"
+                :title="`Season ${bangumi.season}`"
                 type="primary"
             />
             <ab-tag
-                v-if="group !== ''"
-                :title="group"
+                v-if="bangumi.group_name !== ''"
+                :title="bangumi.group_name"
                 type="primary"
             />
           </div>

webui/src/components/basic/ab-search.vue

@@ -6,7 +6,7 @@ import {ref} from 'vue';
 const inputValue = ref<string>('');
 const selectingProvider = ref<boolean>(false);
 
-const {input$, provider, providers, getProviders, bangumiList } = useSearchStore();
+const {input$, provider, providers, getProviders, bangumiList} = useSearchStore();
 
 /**
  * - 输入中 debounce 600ms 后触发搜索
@@ -15,17 +15,17 @@ const {input$, provider, providers, getProviders, bangumiList } = useSearchStore
  */
 
 
-function onInput (e: Event) {
+function onInput(e: Event) {
   const value = (e.target as HTMLInputElement).value;
   input$.next(value);
   inputValue.value = value;
 }
 
-function onSearch () {
+function onSearch() {
   input$.next(inputValue.value);
 }
 
-function onSelect (site: string) {
+function onSelect(site: string) {
   provider.value = site;
   selectingProvider.value = !selectingProvider.value
   onSearch();
@@ -105,18 +105,17 @@ onMounted(() => {
       </div>
     </div>
   </div>
-    <div
-        abs top-84px left-200px z-98
-    >
-      <ab-bangumi-card
-          v-for="(item, index) in bangumiList"
-          :key="index"
-          :poster="item.poster_link ?? ''"
-          :name="item.official_title"
-          :season="item.season"
-          :group="item.group_name"
-      />
-    </div>
+  <div
+      abs top-84px left-200px space-y-8px z-98
+  >
+    <ab-bangumi-card
+        v-for="(item, index) in bangumiList"
+        :key="index"
+        :bangumi="item"
+        type="search"
+        transition-all
+    />
+  </div>
 </template>
 
 <style lang="scss" scoped>
@@ -125,4 +124,8 @@ onMounted(() => {
   background: #4E2A94;
 }
 
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .3s;
+}
+
 </style>

webui/src/pages/index/bangumi.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-const { bangumi, editRule } = storeToRefs(useBangumiStore());
-const { getAll, updateRule, enableRule, openEditPopup, ruleManage } =
-  useBangumiStore();
+const {bangumi, editRule} = storeToRefs(useBangumiStore());
+const {getAll, updateRule, enableRule, openEditPopup, ruleManage} =
+    useBangumiStore();
 
 onActivated(() => {
   getAll();
@@ -15,26 +15,32 @@ definePage({
 <template>
   <div overflow-auto mt-12px flex-grow>
     <div flex="~ wrap" gap-y-12px gap-x-32px>
-      <ab-bangumi-card
-        v-for="i in bangumi"
-        :key="i.id"
-        :class="[i.deleted && 'grayscale']"
-        :poster="i.poster_link ?? ''"
-        :name="i.official_title"
-        :season="i.season"
-        type="primary"
-        @click="() => openEditPopup(i)"
-      ></ab-bangumi-card>
+      <transition-group name="fade">
+        <ab-bangumi-card
+            v-for="i in bangumi"
+            :key="i.id"
+            :class="[i.deleted && 'grayscale']"
+            :bangumi="i"
+            type="primary"
+            @click="() => openEditPopup(i)"
+        ></ab-bangumi-card>
+      </transition-group>
 
       <ab-edit-rule
-        v-model:show="editRule.show"
-        v-model:rule="editRule.item"
-        @enable="(id) => enableRule(id)"
-        @delete-file="
+          v-model:show="editRule.show"
+          v-model:rule="editRule.item"
+          @enable="(id) => enableRule(id)"
+          @delete-file="
           (type, { id, deleteFile }) => ruleManage(type, id, deleteFile)
         "
-        @apply="(rule) => updateRule(rule.id, rule)"
+          @apply="(rule) => updateRule(rule.id, rule)"
       ></ab-edit-rule>
     </div>
   </div>
 </template>
+
+<style>
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .3s;
+}
+</style>