From 298ae2c354278b68d0a5f10755605198d651d8e8 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Thu, 21 Sep 2023 21:24:10 +0800
Subject: [PATCH] fix ui

---
 src/components/cards/MediaCard.vue        | 100 ++++++++++++----------
 src/components/cards/TmdbSelectorCard.vue |  10 +--
 2 files changed, 56 insertions(+), 54 deletions(-)

diff --git a/src/components/cards/MediaCard.vue b/src/components/cards/MediaCard.vue
index 5a0751f9..5ba106f5 100644
--- a/src/components/cards/MediaCard.vue
+++ b/src/components/cards/MediaCard.vue
@@ -360,14 +360,6 @@ onBeforeMount(() => {
   handleCheckExists()
 })
 
-// 订阅季表头
-const seasonsHeaders = [
-  { title: '季', key: 'title', sortable: false },
-  { title: '集数', key: 'episodes', sortable: false },
-  { title: '评分', key: 'vote', sortable: false },
-  { title: '状态', key: 'status', sortable: false },
-]
-
 // 计算图片地址
 const getImgUrl: Ref<string> = computed(() => {
   if (imageLoadError.value)
@@ -379,6 +371,13 @@ const getImgUrl: Ref<string> = computed(() => {
 
   return url
 })
+
+// 拼装季图片地址
+function getSeasonPoster(posterPath: string) {
+  if (!posterPath)
+    return ''
+  return `https://image.tmdb.org/t/p/w500${posterPath}`
+}
 </script>
 
 <template>
@@ -468,54 +467,61 @@ const getImgUrl: Ref<string> = computed(() => {
   >
     <VCard title="选择订阅季">
       <DialogCloseBtn @click="subscribeSeasonDialog = false" />
-      <VCardText style="padding: 0;">
-        <VDataTable
+      <VCardText class="p-0">
+        <VList
           v-model="seasonsSelected"
-          :headers="seasonsHeaders"
-          :items="seasonInfos"
-          item-value="season_number"
-          return-object
-          fixed-header
-          show-select
-          :items-per-page="100"
-          height="auto"
+          multiple
+          lines="three"
         >
-          <template #item.title="{ item }">
-            <span class="d-block whitespace-nowrap text-high-emphasis">第 {{ item.raw.season_number }} 季
-            </span>
-          </template>
-          <template #item.episodes="{ item }">
-            <VChip
-              variant="outlined"
-            >
-              {{ item.raw.episode_count }}
-            </VChip>
-          </template>
-          <template #item.vote="{ item }">
-            {{ item.raw.vote_average }}
-          </template>
-          <template #item.status="{ item }">
-            <VChip
-              v-if="seasonsNotExisted"
-              :color="getExistColor(item.raw.season_number)"
-            >
-              {{ getExistText(item.raw.season_number) }}
-            </VChip>
-          </template>
-          <template #no-data>
-            没有数据
-          </template>
-          <template #bottom />
-        </VDataTable>
+          <VListItem v-for="(item, i) in seasonInfos" :key="i">
+            <template #prepend>
+              <VImg
+                height="80"
+                width="60"
+                :src="getSeasonPoster(item.poster_path || '')"
+                aspect-ratio="2/3"
+                class="object-cover rounded shadow ring-gray-500 me-3"
+                cover
+              >
+                <template #placeholder>
+                  <div class="w-full h-full">
+                    <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
+                  </div>
+                </template>
+              </VImg>
+            </template>
+            <VListItemTitle>
+              第 {{ item.season_number }} 季
+            </VListItemTitle>
+            <VListItemSubtitle class="mt-1">
+              评分：{{ item.vote_average }}，上映日期：{{ item.air_date }}
+            </VListItemSubtitle>
+            <VListItemSubtitle v-html="item.overview" />
+            <VListItemSubtitle>
+              <VChip
+                v-if="seasonsNotExisted"
+                class="mt-2"
+                size="small"
+                :color="getExistColor(item.season_number || 0)"
+              >
+                {{ getExistText(item.season_number || 0) }}
+              </VChip>
+            </VListItemSubtitle>
+            <template #append>
+              <VListItemAction start>
+                <VSwitch v-model="seasonsSelected" :value="item.season_number" />
+              </VListItemAction>
+            </template>
+          </VListItem>
+        </VList>
       </VCardText>
       <div class="my-2 text-center">
         <VBtn
           :disabled="seasonsSelected.length === 0"
           width="30%"
           @click="subscribeSeasons"
-          @keydown.enter="subscribeSeasons"
         >
-          提交订阅
+          {{ seasonsSelected.length === 0 ? '请选择订阅季' : '提交订阅' }}
         </VBtn>
       </div>
     </VCard>
diff --git a/src/components/cards/TmdbSelectorCard.vue b/src/components/cards/TmdbSelectorCard.vue
index 54130df9..cb1c3cc5 100644
--- a/src/components/cards/TmdbSelectorCard.vue
+++ b/src/components/cards/TmdbSelectorCard.vue
@@ -75,15 +75,12 @@ async function searchMedias() {
     class="mx-auto"
     width="100%"
   >
-    <VToolbar flat dense>
+    <VToolbar flat class="p-0">
       <VTextField
         v-model="keyword"
-        density="compact"
         label="输入名称搜索"
-        single-line
-        hide-details
-        flat
         class="mx-3"
+        variant="underlined"
         append-inner-icon="mdi-magnify"
         :loading="loading"
         @click:append-inner="searchMedias"
@@ -97,7 +94,6 @@ async function searchMedias() {
     >
       <template v-for="(item, i) in items" :key="i">
         <VListItem
-          density="compact"
           @click="selectMedia(item)"
         >
           <template #prepend>
@@ -119,7 +115,7 @@ async function searchMedias() {
           <VListItemTitle>
             {{ item.title }}
           </VListItemTitle>
-          <VListItemSubtitle v-html="item.overview" />
+          <VListItemSubtitle class="mt-2" v-html="item.overview" />
         </VListItem>
         <VDivider v-if="i < items.length - 1" class="mt-1" inset />
       </template>