update: anime page

src/contentScripts/views/Anime/Anime.vue

@@ -2,16 +2,13 @@
 import { useI18n } from 'vue-i18n'
 import PopularAnimeCarousel from './components/PopularAnimeCarousel.vue'
 import type { AnimeItem } from './types'
-import { getUserID } from '~/utils'
-
-const { t } = useI18n()
+import { getUserID, removeHttpFromUrl } from '~/utils'
 
 const recommendAnimeList = reactive<AnimeItem[]>([])
 const animeWatchList = reactive<AnimeItem[]>([])
 const cursor = ref<number>(29) // 遊標默認必須要非0，否則第一次會出現同樣的結果
 const isLoading = ref<boolean>()
 const activatedSeasonId = ref<number>()
-const watchListWrap = ref<HTMLElement>() as Ref<HTMLElement>
 
 onMounted(() => {
   getRecommendAnimeList()
@@ -28,11 +25,6 @@ onMounted(() => {
       getRecommendAnimeList()
     }
   }
-
-  watchListWrap.value.addEventListener('wheel', (event) => {
-    event.preventDefault()
-    watchListWrap.value.scrollLeft += event.deltaY
-  })
 })
 
 onUnmounted(() => {
@@ -55,7 +47,7 @@ function getAnimeWatchList() {
         data: { list },
       } = response
       if (code === 0)
-        Object.assign(animeWatchList, list)
+        Object.assign(animeWatchList, list as AnimeItem[])
     })
     .finally(() => {
       isLoading.value = false
@@ -99,59 +91,79 @@ function getRecommendAnimeList() {
       <section mb-8>
         <div flex justify-between items-end mb-6>
           <h3 text="3xl $bew-text-1" font="bold">
-            Your Watchlist
+            {{ $t('anime.your_watch_list') }}
           </h3>
           <a
             :href="`https://space.bilibili.com/${getUserID() ?? 0}/bangumi`"
             target="_blank"
             un-text="$bew-theme-color"
-          >{{ t('common.view_all') }}</a>
+          >{{ $t('common.view_all') }}</a>
         </div>
-        <div
-          ref="watchListWrap"
-          flex="~"
-          w="[calc(100%+1.5rem)]"
-          overflow-scroll
-          relative
-        >
-          <article
-            v-for="item in animeWatchList"
-            :key="item.episode_id"
-            w="2xl:[calc(100%/6-1.5rem)] xl:[calc(100%/5-1.5rem)] lg:[calc(100%/4-1.5rem)] md:[calc(100%/3-1.5rem)] [calc(100%/2-1.5rem)]"
-            shrink-0
-            m="r-6"
-          >
-            <a
-              rounded="$bew-radius"
-              aspect="12/16"
-              overflow-hidden
-              mb-4
-              bg="$bew-fill-3"
-              :href="item.url"
-              target="_blank"
+
+        <HorizontalScrollView w="[calc(100%+1.5rem)]">
+          <div w-full flex>
+            <article
+              v-for="item in animeWatchList"
+              :key="item.episode_id"
+              w="2xl:[calc(100%/6-1.5rem)] xl:[calc(100%/5-1.5rem)] lg:[calc(100%/4-1.5rem)] md:[calc(100%/3-1.5rem)] [calc(100%/2-1.5rem)]"
+              last:w="2xl:1/6 xl:1/5 lg:1/4 md:1/3 1/2"
+              shrink-0
+              m="r-6"
+              last:pr-6
             >
-              <img
-                :src="`${item.cover.replace('https:', '')}@466w_622h.webp`"
-                :alt="item.title"
+              <a
                 rounded="$bew-radius"
+                aspect="12/16"
+                overflow-hidden
+                mb-4
+                bg="$bew-fill-3"
+                :href="item.url"
+                target="_blank"
               >
-            </a>
-            <p un-text="lg" my-4>
-              <a :href="item.url" target="_blank">
-                {{ item.title }}
+                <img
+                  :src="`${removeHttpFromUrl(item.cover)}@466w_622h.webp`"
+                  :alt="item.title"
+                  rounded="$bew-radius"
+                >
               </a>
-            </p>
-            <p text="$bew-text-2" mb-10>
-              {{ item.progress !== '' ? item.progress : `Haven't seen` }}
-            </p>
-          </article>
-        </div>
+              <p un-text="lg" my-4>
+                <a
+                  :href="item.url"
+                  target="_blank"
+                  class="keep-two-lines"
+                  :title="item.title"
+                >
+                  {{ item.title }}
+                </a>
+              </p>
+              <p text="$bew-text-2" mb-10>
+                <span
+                  text="$bew-theme-color"
+                  bg="$bew-theme-color-20"
+                  p="x-3 y-1"
+                  mr-2
+                  rounded-4
+                  lh-loose
+                >{{
+                  item.is_finish
+                    ? $t('anime.total_episodes', { ep: item.total_count })
+                    : $t('anime.update_to_n_episodes', {
+                      ep: item.total_count,
+                    })
+                }}</span>
+                {{
+                  item.progress !== '' ? item.progress : $t('anime.havent_seen')
+                }}
+              </p>
+            </article>
+          </div>
+        </HorizontalScrollView>
       </section>
 
       <!-- Recommended for you -->
       <section>
         <h3 text="3xl $bew-text-1" font="bold" mb-6>
-          Recommended for you
+          {{ $t('anime.recommended_for_you') }}
         </h3>
         <div grid="~ 2xl:cols-6 xl:cols-5 lg:cols-4 md:cols-3 cols-2 gap-6">
           <article
@@ -210,9 +222,8 @@ function getRecommendAnimeList() {
                   transition="all duration-300"
                   bg="cover center"
                   :style="{
-                    backgroundImage: `url(${item.cover.replace(
-                      'http:',
-                      '',
+                    backgroundImage: `url(${removeHttpFromUrl(
+                      item.cover,
                     )}@466w_622h.webp)`,
                   }"
                 />
@@ -228,9 +239,8 @@ function getRecommendAnimeList() {
                   pos="absolute top-0 left-0"
                   z--1
                   :style="{
-                    backgroundImage: `url(${item.hover.img.replace(
-                      'http:',
-                      '',
+                    backgroundImage: `url(${removeHttpFromUrl(
+                      item.hover.img,
                     )}@672w_378h_1c.webp)`,
                   }"
                   style="
@@ -246,7 +256,7 @@ function getRecommendAnimeList() {
             </div>
 
             <p un-text="lg" my-4>
-              <a :href="item.link" target="_blank">
+              <a :href="item.link" target="_blank" class="keep-two-lines">
                 {{ item.title }}
               </a>
             </p>