feat:更改多集展示样式

src/views/subscribe/FullCalendarView.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script lang='ts' setup>
 import type { CalendarOptions, EventSourceInput } from '@fullcalendar/core'
 import dayGridPlugin from '@fullcalendar/daygrid'
 import interactionPlugin from '@fullcalendar/interaction'
@@ -48,6 +48,7 @@ async function eventsHander(subscribe: Subscribe | Rss) {
       allDay: false,
       posterPath: subscribe.poster,
       mediaType: subscribe.type,
+      len: 1,
     }
   }
   else {
@@ -56,16 +57,45 @@ async function eventsHander(subscribe: Subscribe | Rss) {
       `tmdb/${subscribe.tmdbid}/${subscribe.season}`,
     )
 
-    return episodes.map((episode) => {
+    interface EpisodeInfo {
-      return {
+      title: string
+      subtitle: string
+      start: Date | null
+      allDay: boolean
+      posterPath: string
+      mediaType: string
+      len: number
+    }
+
+    interface EpisodesDictionary {
+      [key: string]: EpisodeInfo
+    }
+
+    const dictEpisode: EpisodesDictionary = {}
+    episodes.forEach((episode: TmdbEpisode) => {
+      const air_date = episode.air_date ?? ''
+      if (dictEpisode[air_date]) {
+        dictEpisode[air_date].subtitle += `,${episode.episode_number}`
+        dictEpisode[air_date].len++
+      }
+      else {
+        dictEpisode[air_date] = {
           title: subscribe.name,
-        subtitle: `第 ${episode.episode_number} 集`,
+          subtitle: `第${episode.episode_number}`,
           start: parseDate(episode.air_date || ''),
           allDay: false,
           posterPath: subscribe.poster,
           mediaType: subscribe.type,
+          len: 1,
+        }
       }
     })
+    for (const key in dictEpisode) {
+      if (dictEpisode.hasOwnProperty(key))
+        dictEpisode[key].subtitle += '集'
+    }
+
+    return Object.values(dictEpisode)
   }
 }
 
@@ -115,10 +145,13 @@ onMounted(() => {
               </VImg>
             </div>
             <div>
-              <VCardSubtitle class="pa-2 font-bold break-words whitespace-break-spaces">
+              <VCardSubtitle class="pa-1 px-2 font-bold break-words whitespace-break-spaces">
                 {{ arg.event.title }}
               </VCardSubtitle>
               <VCardText class="pa-0 px-2">
+                {{ arg.event.extendedProps.len }}集
+              </VCardText>
+              <VCardText class="pa-0 px-2 break-words">
                 {{ arg.event.extendedProps.subtitle }}
               </VCardText>
             </div>
@@ -142,6 +175,13 @@ onMounted(() => {
                   <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
                 </div>
               </template>
+              <VChip
+                variant="elevated"
+                size="mini"
+                class="absolute right-1 top-1 bg-opacity-80 shadow-md text-white font-bold border-purple-600 bg-purple-600"
+              >
+                {{ arg.event.extendedProps.len }}
+              </VChip>
             </VImg>
           </template>
         </VTooltip>
@@ -150,7 +190,7 @@ onMounted(() => {
   </FullCalendar>
 </template>
 
-<style lang="scss">
+<style lang='scss'>
 .v-application .fc {
   --fc-today-bg-color: rgba(var(--v-theme-on-surface), 0.04);
   --fc-border-color: rgba(var(--v-border-color), var(--v-border-opacity));
@@ -285,8 +325,7 @@ onMounted(() => {
 .fc-toolbar-chunk:last-child
 .fc-button-group
 .fc-button:not(:last-child) {
-  border-inline-end: 0.0625rem solid
+  border-inline-end: 0.0625rem solid rgba(var(--v-theme-primary), var(--v-overlay-scrim-opacity));
-    rgba(var(--v-theme-primary), var(--v-overlay-scrim-opacity));
 }
 
 .v-application