From 8eb8fef4f95d0a0672d3a1edcc7362777bebec68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8F=AE=E5=8F=AE=E5=BD=93?= <604054726@qq.com>
Date: Thu, 3 Aug 2023 15:12:21 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E5=86=99SlideView=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/slide/SlideView.vue         | 131 +++++++++++++
 src/components/slide/SlideViewTitle.vue    |  24 +++
 src/pages/ranking.vue                      | 213 ++++-----------------
 src/views/discover/MediaCardSlideView.vue  |  67 ++-----
 src/views/discover/MediaDetailView.vue     |  45 ++---
 src/views/discover/PersonCardSlideView.vue |  67 ++-----
 6 files changed, 246 insertions(+), 301 deletions(-)
 create mode 100644 src/components/slide/SlideView.vue
 create mode 100644 src/components/slide/SlideViewTitle.vue

diff --git a/src/components/slide/SlideView.vue b/src/components/slide/SlideView.vue
new file mode 100644
index 00000000..a9bea0cf
--- /dev/null
+++ b/src/components/slide/SlideView.vue
@@ -0,0 +1,131 @@
+<script lang="ts" setup>
+import SlideViewTitle from '@/components/slide/SlideViewTitle.vue'
+
+// 输入参数
+const props = defineProps({
+  linkurl: String,
+  title: String,
+})
+
+// 元素
+const slideview_content = ref()
+// 分页切换状态
+const disabled = ref(0)
+// 所有卡片数量
+let slide_card_length: number
+// 卡片间距
+let slide_gap_px: number
+// 卡片宽度
+let card_width: number
+// 容器最多显示N张卡片
+let card_max: number
+// 当前定位
+let card_current: number
+
+// 分页切换
+function slideNext(next: boolean) {
+  let run_to_left_px
+  if (next) {
+    const card_index = card_current + card_max
+    run_to_left_px = card_index * card_width
+    if (run_to_left_px >= slideview_content.value.scrollWidth - slideview_content.value.clientWidth)
+      run_to_left_px = slideview_content.value.scrollWidth - slideview_content.value.clientWidth
+    // console.log(`最多显示: ${card_max} 当前起点: ${card_current} 目标起点: ${card_index} 卡片宽度: ${card_width}`)
+  }
+  else {
+    const card_index = card_current - card_max
+    run_to_left_px = card_index * card_width
+    if (run_to_left_px <= 0)
+      run_to_left_px = 0
+    // console.log(`最多显示: ${card_max} 当前起点: ${card_current} 目标起点: ${card_index} 卡片宽度: ${card_width}`)
+  }
+  slideview_content.value.scrollTo({
+    top: 0,
+    left: run_to_left_px,
+    behavior: 'smooth',
+  })
+}
+
+// 计算最大显示数量
+function countMaxNumber() {
+  slide_card_length = slideview_content.value.children.length
+  card_width = slideview_content.value.firstElementChild.getBoundingClientRect().width
+  slide_gap_px = (slideview_content.value.scrollWidth / slide_card_length) - card_width
+  card_width += slide_gap_px
+  card_max = Math.trunc(slideview_content.value.clientWidth / card_width)
+  countDisabled()
+}
+
+// 修改分页切换按钮状态
+function countDisabled() {
+  card_current = slideview_content.value.scrollLeft === 0 ? 0 : Math.trunc((slideview_content.value.scrollLeft + card_width / 2) / card_width)
+  if (slide_card_length * card_width <= slideview_content.value.clientWidth)
+    disabled.value = 3
+  else if (slideview_content.value.scrollLeft === 0)
+    disabled.value = 0
+  else if (slideview_content.value.scrollLeft >= slideview_content.value.scrollWidth - slideview_content.value.clientWidth - 2)
+    disabled.value = 2
+
+  else
+    disabled.value = 1
+}
+
+// 组件加载完成
+onMounted(() => {
+  // 初次获取元素参数
+  countMaxNumber()
+  // 窗口大小发生改变时
+  window.addEventListener('resize', countMaxNumber)
+})
+onUnmounted(() => {
+  // 卸载事件
+  window.removeEventListener('resize', countMaxNumber)
+})
+</script>
+
+<template>
+  <div class="flex justify-between mt-3">
+    <slot name="title">
+      <SlideViewTitle v-bind="props" />
+    </slot>
+    <div v-if="disabled !== 3" class="me-1 d-none d-md-flex">
+      <VBtn
+        class="rounded-circle"
+        variant="text"
+        icon="mdi-chevron-left"
+        color="grey"
+        :disabled="disabled === 0"
+        @click="slideNext(false)"
+      />
+      <VBtn
+        class="rounded-circle"
+        variant="text"
+        icon="mdi-chevron-right"
+        color="grey"
+        :disabled="disabled === 2"
+        @click="slideNext(true)"
+      />
+    </div>
+  </div>
+  <div
+    ref="slideview_content"
+    class="slideview_content grid grid-rows-1 grid-flow-col gap-4 p-3"
+    @scroll="countDisabled"
+  >
+    <slot name="content" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.slideview_content {
+  -ms-overflow-style: none !important;
+  overflow-x: scroll !important;
+  overflow-y: hidden !important;
+  overscroll-behavior-x: contain !important;
+  scrollbar-width: none !important;
+}
+
+.slideview_content::-webkit-scrollbar {
+  display: none;
+}
+</style>
diff --git a/src/components/slide/SlideViewTitle.vue b/src/components/slide/SlideViewTitle.vue
new file mode 100644
index 00000000..48253ec2
--- /dev/null
+++ b/src/components/slide/SlideViewTitle.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+// 输入参数
+const props = defineProps({
+  linkurl: String,
+  title: String,
+})
+</script>
+
+<template>
+  <div
+    class="ms-1"
+  >
+    <RouterLink
+      :to="props.linkurl ? props.linkurl : ''"
+      class="slider-title"
+    >
+      <span>{{ props.title }}</span>
+      <VIcon
+        icon="mdi-arrow-right-circle-outline"
+        class="ms-1"
+      />
+    </RouterLink>
+  </div>
+</template>
diff --git a/src/pages/ranking.vue b/src/pages/ranking.vue
index f2b4aac3..dec0c1d8 100644
--- a/src/pages/ranking.vue
+++ b/src/pages/ranking.vue
@@ -4,185 +4,52 @@ import MediaCardSlideView from '@/views/discover/MediaCardSlideView.vue'
 
 <template>
   <div>
-    <MediaCardSlideView apipath="tmdb/trending">
-      <template #title="{ loaded }">
-        <div
-          v-if="loaded"
-          class="slider-header ms-1"
-        >
-          <RouterLink
-            to="/browse/tmdb/trending?title=流行趋势"
-            class="slider-title"
-          >
-            <span>流行趋势</span>
-            <VIcon
-              icon="mdi-arrow-right-circle-outline"
-              class="ms-1"
-            />
-          </RouterLink>
-        </div>
-      </template>
-    </MediaCardSlideView>
+    <MediaCardSlideView
+      apipath="tmdb/trending"
+      linkurl="/browse/tmdb/trending?title=流行趋势"
+      title="流行趋势"
+    />
 
-    <MediaCardSlideView apipath="tmdb/movies">
-      <template #title="{ loaded }">
-        <div
-          v-if="loaded"
-          class="slider-header mt-3 ms-1"
-        >
-          <RouterLink
-            to="/browse/tmdb/movies?title=热门电影"
-            class="slider-title"
-          >
-            <span>热门电影</span>
-            <VIcon
-              icon="mdi-arrow-right-circle-outline"
-              class="ms-1"
-            />
-          </RouterLink>
-        </div>
-      </template>
-    </MediaCardSlideView>
+    <MediaCardSlideView
+      apipath="tmdb/movies"
+      linkurl="/browse/tmdb/movies?title=热门电影"
+      title="热门电影"
+    />
 
-    <MediaCardSlideView apipath="tmdb/tvs">
-      <template #title="{ loaded }">
-        <div
-          v-if="loaded"
-          class="slider-header mt-3 ms-1"
-        >
-          <RouterLink
-            to="/browse/tmdb/tvs?title=热门电视剧"
-            class="slider-title"
-          >
-            <span>热门电视剧</span>
-            <VIcon
-              icon="mdi-arrow-right-circle-outline"
-              class="ms-1"
-            />
-          </RouterLink>
-        </div>
-      </template>
-    </MediaCardSlideView>
+    <MediaCardSlideView
+      apipath="tmdb/tvs"
+      linkurl="/browse/tmdb/tvs?title=热门电视剧"
+      title="热门电视剧"
+    />
 
-    <MediaCardSlideView apipath="douban/movies">
-      <template #title="{ loaded }">
-        <div
-          v-if="loaded"
-          class="slider-header mt-3 ms-1"
-        >
-          <RouterLink
-            to="/browse/douban/movies?title=最新电影"
-            class="slider-title"
-          >
-            <span>最新电影</span>
-            <VIcon
-              icon="mdi-arrow-right-circle-outline"
-              class="ms-1"
-            />
-          </RouterLink>
-        </div>
-      </template>
-    </MediaCardSlideView>
+    <MediaCardSlideView
+      apipath="douban/movies"
+      linkurl="/browse/douban/movies?title=最新电影"
+      title="最新电影"
+    />
 
-    <MediaCardSlideView apipath="douban/tvs">
-      <template #title="{ loaded }">
-        <div
-          v-if="loaded"
-          class="slider-header mt-3 ms-1"
-        >
-          <RouterLink
-            to="/browse/douban/tvs?title=最新电视剧"
-            class="slider-title"
-          >
-            <span>最新电视剧</span>
-            <VIcon
-              icon="mdi-arrow-right-circle-outline"
-              class="ms-1"
-            />
-          </RouterLink>
-        </div>
-      </template>
-    </MediaCardSlideView>
+    <MediaCardSlideView
+      apipath="douban/tvs"
+      linkurl="/browse/douban/tvs?title=最新电视剧"
+      title="最新电视剧"
+    />
 
-    <MediaCardSlideView apipath="douban/movie_top250">
-      <template #title="{ loaded }">
-        <div
-          v-if="loaded"
-          class="slider-header mt-3 ms-1"
-        >
-          <RouterLink
-            to="/browse/douban/movie_top250?title=电影TOP250"
-            class="slider-title"
-          >
-            <span>电影TOP250</span>
-            <VIcon
-              icon="mdi-arrow-right-circle-outline"
-              class="ms-1"
-            />
-          </RouterLink>
-        </div>
-      </template>
-    </MediaCardSlideView>
+    <MediaCardSlideView
+      apipath="douban/movie_top250"
+      linkurl="/browse/douban/movie_top250?title=电影TOP250"
+      title="电影TOP250"
+    />
 
-    <MediaCardSlideView apipath="douban/tv_weekly_chinese">
-      <template #title="{ loaded }">
-        <div
-          v-if="loaded"
-          class="slider-header mt-3 ms-1"
-        >
-          <RouterLink
-            to="/browse/douban/tv_weekly_chinese?title=国产剧集榜"
-            class="slider-title"
-          >
-            <span>国产剧集榜</span>
-            <VIcon
-              icon="mdi-arrow-right-circle-outline"
-              class="ms-1"
-            />
-          </RouterLink>
-        </div>
-      </template>
-    </MediaCardSlideView>
+    <MediaCardSlideView
+      apipath="douban/tv_weekly_chinese"
+      linkurl="/browse/douban/tv_weekly_chinese?title=国产剧集榜"
+      title="国产剧集榜"
+    />
 
-    <MediaCardSlideView apipath="douban/tv_weekly_global">
-      <template #title="{ loaded }">
-        <div
-          v-if="loaded"
-          class="slider-header mt-3 ms-1"
-        >
-          <RouterLink
-            to="/browse/douban/tv_weekly_global?title=全球剧集榜"
-            class="slider-title"
-          >
-            <span>全球剧集榜</span>
-            <VIcon
-              icon="mdi-arrow-right-circle-outline"
-              class="ms-1"
-            />
-          </RouterLink>
-        </div>
-      </template>
-    </MediaCardSlideView>
+    <MediaCardSlideView
+      apipath="douban/tv_weekly_global"
+      linkurl="/browse/douban/tv_weekly_global?title=全球剧集榜"
+      title="全球剧集榜"
+    />
   </div>
 </template>
-
-<style lang="css">
-.slider-header {
-  position: relative;
-  display: flex;
-
-  @apply mb-1;
-}
-
-.slider-title {
-  --tw-text-opacity: 1;
-
-  display: inline-flex;
-  align-items: center;
-  color: inherit;
-  font-size: 1.25rem;
-  font-weight: 700;
-  line-height: 1.75rem;
-  transition-duration: 0.3s;
-}
-</style>
diff --git a/src/views/discover/MediaCardSlideView.vue b/src/views/discover/MediaCardSlideView.vue
index f067dcc3..0bddef9f 100644
--- a/src/views/discover/MediaCardSlideView.vue
+++ b/src/views/discover/MediaCardSlideView.vue
@@ -2,10 +2,13 @@
 import api from '@/api'
 import type { MediaInfo } from '@/api/types'
 import MediaCard from '@/components/cards/MediaCard.vue'
+import SlideView from '@/components/slide/SlideView.vue'
 
 // 输入参数
 const props = defineProps({
   apipath: String,
+  linkurl: String,
+  title: String,
 })
 
 // 组件加载完成
@@ -34,55 +37,21 @@ onMounted(fetchData)
 </script>
 
 <template>
-  <slot
-    name="title"
-    :loaded="componentLoaded"
-  />
-  <VSlideGroup show-arrows="false">
-    <template #prev>
-      <VBtn
-        class="rounded-circle shadow-none"
-        icon="mdi-chevron-left"
-        color="grey"
-      />
-    </template>
-    <VSlideGroupItem
-      v-for="data in dataList"
-      :key="data.tmdb_id"
-    >
-      <MediaCard
+  <SlideView
+    v-if="componentLoaded"
+    v-bind="props"
+  >
+    <template #content>
+      <template
+        v-for="data in dataList"
         :key="data.tmdb_id || data.douban_id"
-        :media="data"
-        height="15rem"
-        width="10rem"
-      />
-    </VSlideGroupItem>
-    <template #next>
-      <VBtn
-        class="rounded-circle shadow-none"
-        icon="mdi-chevron-right"
-        color="grey"
-      />
+      >
+        <MediaCard
+          :media="data"
+          height="15rem"
+          width="10rem"
+        />
+      </template>
     </template>
-  </VSlideGroup>
+  </SlideView>
 </template>
-
-<style lang="scss">
-.v-slide-group .v-card {
-  @apply m-2;
-}
-
-.v-slide-group__prev {
-  @apply absolute right-11;
-
-  z-index: 3;
-  margin-block-start: -40px;
-}
-
-.v-slide-group__next {
-  @apply absolute right-1;
-
-  z-index: 3;
-  margin-block-start: -40px;
-}
-</style>
diff --git a/src/views/discover/MediaDetailView.vue b/src/views/discover/MediaDetailView.vue
index f1723ecb..4f8474a9 100644
--- a/src/views/discover/MediaDetailView.vue
+++ b/src/views/discover/MediaDetailView.vue
@@ -573,40 +573,25 @@ onBeforeMount(() => {
         </div>
       </div>
       <div v-if="mediaDetail.tmdb_id">
-        <PersonCardSlideView :apipath="`tmdb/credits/${mediaDetail.tmdb_id}/${mediaProps.type}`">
-          <template #title="{ loaded }">
-            <div v-if="loaded" class="slider-header">
-              <RouterLink :to="`/credits/tmdb/credits/${mediaDetail.tmdb_id}/${mediaProps.type}?title=演员阵容`" class="slider-title">
-                <span>演员阵容</span>
-                <VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
-              </RouterLink>
-            </div>
-          </template>
-        </PersonCardSlideView>
+        <PersonCardSlideView
+          :apipath="`tmdb/credits/${mediaDetail.tmdb_id}/${mediaProps.type}`"
+          :linkurl="`/credits/tmdb/credits/${mediaDetail.tmdb_id}/${mediaProps.type}?title=演员阵容`"
+          title="演员阵容"
+        />
       </div>
       <div v-if="mediaDetail.tmdb_id">
-        <MediaCardSlideView :apipath="`tmdb/recommend/${mediaDetail.tmdb_id}/${mediaProps.type}`">
-          <template #title="{ loaded }">
-            <div v-if="loaded" class="slider-header">
-              <RouterLink :to="`/browse/tmdb/recommend/${mediaDetail.tmdb_id}/${mediaProps.type}?title=推荐`" class="slider-title">
-                <span>推荐</span>
-                <VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
-              </RouterLink>
-            </div>
-          </template>
-        </MediaCardSlideView>
+        <MediaCardSlideView
+          :apipath="`tmdb/recommend/${mediaDetail.tmdb_id}/${mediaProps.type}`"
+          :linkurl="`/browse/tmdb/recommend/${mediaDetail.tmdb_id}/${mediaProps.type}?title=推荐`"
+          title="推荐"
+        />
       </div>
       <div v-if="mediaDetail.tmdb_id">
-        <MediaCardSlideView :apipath="`tmdb/similar/${mediaDetail.tmdb_id}/${mediaProps.type}`">
-          <template #title="{ loaded }">
-            <div v-if="loaded" class="slider-header">
-              <RouterLink :to="`/browse/tmdb/similar/${mediaDetail.tmdb_id}/${mediaProps.type}?title=类似`" class="slider-title">
-                <span>类似</span>
-                <VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
-              </RouterLink>
-            </div>
-          </template>
-        </MediaCardSlideView>
+        <MediaCardSlideView
+          :apipath="`tmdb/similar/${mediaDetail.tmdb_id}/${mediaProps.type}`"
+          :linkurl="`/browse/tmdb/similar/${mediaDetail.tmdb_id}/${mediaProps.type}?title=类似`"
+          title="类似"
+        />
       </div>
     </div>
   </div>
diff --git a/src/views/discover/PersonCardSlideView.vue b/src/views/discover/PersonCardSlideView.vue
index 235fc74c..280701f3 100644
--- a/src/views/discover/PersonCardSlideView.vue
+++ b/src/views/discover/PersonCardSlideView.vue
@@ -2,10 +2,13 @@
 import PersionCard from '@/components/cards/PersonCard.vue'
 import api from '@/api'
 import type { TmdbPerson } from '@/api/types'
+import SlideView from '@/components/slide/SlideView.vue'
 
 // 输入参数
 const props = defineProps({
   apipath: String,
+  linkurl: String,
+  title: String,
 })
 
 // 组件加载完成
@@ -34,55 +37,21 @@ onMounted(fetchData)
 </script>
 
 <template>
-  <slot
-    name="title"
-    :loaded="componentLoaded"
-  />
-  <VSlideGroup show-arrows="false">
-    <template #prev>
-      <VBtn
-        class="rounded-circle shadow-none"
-        icon="mdi-chevron-left"
-        color="grey"
-      />
-    </template>
-    <VSlideGroupItem
-      v-for="data in dataList"
-      :key="data.id"
-    >
-      <PersionCard
+  <SlideView
+    v-if="componentLoaded"
+    v-bind="props"
+  >
+    <template #content>
+      <template
+        v-for="data in dataList"
         :key="data.id"
-        :person="data"
-        height="15rem"
-        width="10rem"
-      />
-    </VSlideGroupItem>
-    <template #next>
-      <VBtn
-        class="rounded-circle shadow-none"
-        icon="mdi-chevron-right"
-        color="grey"
-      />
+      >
+        <PersionCard
+          :person="data"
+          height="15rem"
+          width="10rem"
+        />
+      </template>
     </template>
-  </VSlideGroup>
+  </SlideView>
 </template>
-
-<style lang="scss">
-.v-slide-group .v-card {
-  @apply m-2;
-}
-
-.v-slide-group__prev {
-  @apply absolute right-11;
-
-  z-index: 3;
-  margin-block-start: -40px;
-}
-
-.v-slide-group__next {
-  @apply absolute right-1;
-
-  z-index: 3;
-  margin-block-start: -40px;
-}
-</style>