From a17ca909a9052aaa13c6991479262c337c8ee2fe Mon Sep 17 00:00:00 2001
From: zhh <zhonghuaremistinker@gmail.com>
Date: Mon, 25 Sep 2023 02:16:58 +0800
Subject: [PATCH 1/2] add VirtualList for EpisodesPicker

---
 .../video/download/inputs/EpisodesPicker.vue  |  65 +++++---
 .../video/download/inputs/VirtualList.vue     | 152 ++++++++++++++++++
 .../video/download/inputs/bangumi/batch.ts    |   2 +-
 3 files changed, 197 insertions(+), 22 deletions(-)
 create mode 100644 registry/lib/components/video/download/inputs/VirtualList.vue

diff --git a/registry/lib/components/video/download/inputs/EpisodesPicker.vue b/registry/lib/components/video/download/inputs/EpisodesPicker.vue
index a2b62308f..e6fbc4e8a 100644
--- a/registry/lib/components/video/download/inputs/EpisodesPicker.vue
+++ b/registry/lib/components/video/download/inputs/EpisodesPicker.vue
@@ -32,36 +32,46 @@
         </VButton>
       </div>
     </div>
-    <div class="episodes-picker-items">
-      <div v-for="(item, index) of episodeItems" :key="item.key" class="episodes-picker-item">
-        <CheckBox
-          v-model="item.isChecked"
-          icon-position="left"
-          :data-aid="item.inputItem.aid"
-          :data-cid="item.inputItem.cid"
-          :data-bvid="item.inputItem.bvid"
-          @click.native="shiftSelect($event, item, index)"
-        >
-          <span class="episode-title">
-            {{ item.title }}
-          </span>
-          <span v-if="item.durationText" class="episode-duration">
-            {{ item.durationText }}
-          </span>
-        </CheckBox>
-      </div>
-    </div>
+    <VirtualList class="episodes-picker-items" 
+      :items="episodeItems"
+      :item-height="24"
+      :stage-item-count="100"
+      :buffer-item-count="40"
+      :update-required-item-count="20"
+      :focuse-item-index="currentEpisodeIndex">
+      <template #item="{ item, index }">
+        <div class="episodes-picker-item">
+          <CheckBox
+            v-model="item.isChecked"
+            icon-position="left"
+            :data-aid="item.inputItem.aid"
+            :data-cid="item.inputItem.cid"
+            :data-bvid="item.inputItem.bvid"
+            @click.native="shiftSelect($event, item, index)"
+          >
+            <span class="episode-title">
+              {{ item.title }}
+            </span>
+            <span v-if="item.durationText" class="episode-duration">
+              {{ item.durationText }}
+            </span>
+          </CheckBox>
+        </div>
+      </template>
+    </VirtualList>
   </div>
 </template>
 <script lang="ts">
 import { VButton, VIcon, CheckBox } from '@/ui'
 import { EpisodeItem } from './episode-item'
+import VirtualList from './VirtualList.vue'
 
 export default Vue.extend({
   components: {
     VButton,
     VIcon,
     CheckBox,
+    VirtualList
   },
   props: {
     api: {
@@ -74,6 +84,7 @@ export default Vue.extend({
       episodeItems: [],
       maxCheckedItems: 32,
       lastCheckedEpisodeIndex: -1,
+      currentEpisodeIndex: 0 // 当前页面的剧集 index
     }
   },
   computed: {
@@ -89,8 +100,14 @@ export default Vue.extend({
       return items.filter(it => it.isChecked).map(it => it.inputItem)
     },
   },
-  created() {
-    this.getEpisodeItems()
+  async created() {
+    await this.getEpisodeItems()
+    const aid = unsafeWindow.aid
+    if (aid) {
+      this.currentEpisodeIndex = this.episodeItems.findIndex(ep => ep.inputItem.aid == aid) ?? 0
+      this.episodeItems[this.currentEpisodeIndex].isChecked = true
+    }
+    // console.log('dididi', this.episodeItems)
   },
   methods: {
     shiftSelect(e: MouseEvent, item: EpisodeItem, index: number) {
@@ -164,6 +181,12 @@ export default Vue.extend({
     .be-check-box {
       padding: 2px 6px;
     }
+    .episode-title {
+      max-width: 250px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
     .episode-duration {
       margin-right: 4px;
       text-align: right;
diff --git a/registry/lib/components/video/download/inputs/VirtualList.vue b/registry/lib/components/video/download/inputs/VirtualList.vue
new file mode 100644
index 000000000..d265249d6
--- /dev/null
+++ b/registry/lib/components/video/download/inputs/VirtualList.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue'
+
+type PropsType = {
+  items: any[]
+  itemHeight: number
+  stageItemCount?: number // 容器容纳的列表项数量
+  bufferItemCount?: number // 边缘预留缓冲的列表项数量
+  updateRequiredItemCount?: number // 缓冲列表项低于此数时触发更新
+  focuseItemIndex?: number // 初始聚焦的列表项
+}
+
+const props = withDefaults(defineProps<PropsType>(), {
+  stageItemCount: 50,
+  bufferItemCount: 5,
+  updateRequiredItemCount: 5,
+  focuseItemIndex: 0
+})
+
+const container = ref<HTMLDivElement>()
+const stageHeight = computed(() => props.stageItemCount * props.itemHeight)
+const clientHeight = computed(() => container.value?.clientHeight ?? 0)
+const scrollHeight = computed(() => container.value?.scrollHeight ?? 0)
+
+const ptr = ref(0)
+const appendPaddingTop = computed(() => ptr.value * props.itemHeight)
+const appendPaddingBottom = computed(() => (props.items.length - ptr.value - props.stageItemCount) * props.itemHeight)
+const activatedItems = computed(() => props.items.slice(ptr.value, ptr.value + props.stageItemCount))
+
+const forceScrolling = ref(false)
+const lastScrollTop = ref(0)
+
+onMounted(() => {
+  setTimeout(() => focus(props.focuseItemIndex))
+})
+
+watch(
+  () => props.focuseItemIndex,
+  (newv, oldv) => {
+    focus(newv)
+  }
+)
+
+/**
+ * 将 viewport 对齐到指定元素
+ * @param index 
+ * @param alignment 决定用顶部还是底部对齐
+ */
+const focus = (index: number, alignment: 'top' | 'bottom' = 'top') => {
+  if (alignment === 'top') {
+    const offset = index - moveStage(index - props.bufferItemCount)
+    moveViewport(offset * props.itemHeight)
+  } else if (alignment === 'bottom') {
+    const offset = index - moveStage(index + props.bufferItemCount - props.stageItemCount)
+    moveViewport(offset * props.itemHeight)
+  }
+}
+
+/**
+ * 在 stage 之内移动 viewport，不引起数据变化
+ * @param top float
+ */
+const moveViewport = (top: number) => {
+  if (top < 0) {
+    top = 0
+  } else if (top > (stageHeight.value - clientHeight.value)) {
+    top = stageHeight.value - clientHeight.value
+  }
+  // 滚动列表
+  forceScrolling.value = true
+  container.value?.scrollTo({
+    top: appendPaddingTop.value + top,
+    behavior: 'instant'
+  })
+
+  return top
+}
+
+/**
+ * 在虚拟列表之内移动 stage，引起数据变化
+ * @param index int
+ */
+const moveStage = (index: number) => {
+  if (index < 0) {
+    index = 0
+  } else if (index > props.items.length - props.stageItemCount) {
+    index = props.items.length - props.stageItemCount
+  }
+  // 触发内容变化并推动列表
+  return ptr.value = index
+}
+
+const onScroll = lodash.throttle((event: Event) => {
+  if (forceScrolling.value) {
+    // 手动触发滚动时不做处理
+    forceScrolling.value = false
+    return
+  }
+
+  const tar = event.currentTarget as HTMLDivElement
+  const step = tar.scrollTop - lastScrollTop.value
+  // console.log(tar.scrollHeight, tar.scrollTop, step)
+  lastScrollTop.value = tar.scrollTop
+  if (step > 0) {
+    // 向下滚动
+    const actualBottomHeight = tar.scrollTop + tar.clientHeight,
+      contentBottomHeight = appendPaddingTop.value + stageHeight.value
+    const buffer = contentBottomHeight - actualBottomHeight,
+      min = props.itemHeight * props.updateRequiredItemCount
+    if (buffer < min) {
+      const offset = props.bufferItemCount - Math.round(buffer / props.itemHeight)
+      moveStage(ptr.value + offset)
+    }
+  } else if (step < 0) {
+    // 向上滚动
+    const actualTopHeight = tar.scrollHeight - tar.scrollTop,
+      contentTopHeight = tar.scrollHeight - appendPaddingTop.value
+    const buffer = contentTopHeight - actualTopHeight,
+      min = props.itemHeight * props.updateRequiredItemCount
+    if (buffer < min) {
+      const offset = props.bufferItemCount - Math.round(buffer / props.itemHeight)
+      moveStage(ptr.value - offset)
+    }
+  }
+}, 33)
+
+</script>
+
+<template>
+  <div class="virtual-list" ref="container" @scroll.self="onScroll">
+    <ul class="scroll-box">
+      <li class="list-item" v-for="(item, index) in activatedItems" :key="index">
+        <slot name="item" :item="item" :index="index"></slot>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.virtual-list {
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  >.scroll-box {
+    list-style: none;
+    padding-top: v-bind('`${appendPaddingTop}px`');
+    padding-bottom: v-bind('`${appendPaddingBottom}px`');
+
+    >.list-item {}
+  }
+}
+</style>
diff --git a/registry/lib/components/video/download/inputs/bangumi/batch.ts b/registry/lib/components/video/download/inputs/bangumi/batch.ts
index e1284c96f..7337535a5 100644
--- a/registry/lib/components/video/download/inputs/bangumi/batch.ts
+++ b/registry/lib/components/video/download/inputs/bangumi/batch.ts
@@ -45,7 +45,7 @@ export const bangumiBatchInput: DownloadVideoInput = {
           return {
             key: it.cid,
             title: `${nText} - ${title}`,
-            isChecked: index < instance.maxCheckedItems,
+            isChecked: index < instance.maxCheckedItems && totalLength <= instance.maxCheckedItems,
             inputItem: {
               aid: it.aid,
               cid: it.cid,

From e1454b673c2d0f73e1f05a44be94fded75c49a9c Mon Sep 17 00:00:00 2001
From: zhh <zhonghuaremistinker@gmail.com>
Date: Mon, 25 Sep 2023 02:30:09 +0800
Subject: [PATCH 2/2] lint-fix

---
 .../video/download/inputs/EpisodesPicker.vue  | 14 +--
 .../video/download/inputs/VirtualList.vue     | 92 ++++++++++---------
 2 files changed, 56 insertions(+), 50 deletions(-)

diff --git a/registry/lib/components/video/download/inputs/EpisodesPicker.vue b/registry/lib/components/video/download/inputs/EpisodesPicker.vue
index e6fbc4e8a..c89b69906 100644
--- a/registry/lib/components/video/download/inputs/EpisodesPicker.vue
+++ b/registry/lib/components/video/download/inputs/EpisodesPicker.vue
@@ -32,13 +32,15 @@
         </VButton>
       </div>
     </div>
-    <VirtualList class="episodes-picker-items" 
+    <VirtualList
+      class="episodes-picker-items"
       :items="episodeItems"
       :item-height="24"
       :stage-item-count="100"
       :buffer-item-count="40"
       :update-required-item-count="20"
-      :focuse-item-index="currentEpisodeIndex">
+      :focuse-item-index="currentEpisodeIndex"
+    >
       <template #item="{ item, index }">
         <div class="episodes-picker-item">
           <CheckBox
@@ -71,7 +73,7 @@ export default Vue.extend({
     VButton,
     VIcon,
     CheckBox,
-    VirtualList
+    VirtualList,
   },
   props: {
     api: {
@@ -84,7 +86,7 @@ export default Vue.extend({
       episodeItems: [],
       maxCheckedItems: 32,
       lastCheckedEpisodeIndex: -1,
-      currentEpisodeIndex: 0 // 当前页面的剧集 index
+      currentEpisodeIndex: 0, // 当前页面的剧集 index
     }
   },
   computed: {
@@ -102,9 +104,9 @@ export default Vue.extend({
   },
   async created() {
     await this.getEpisodeItems()
-    const aid = unsafeWindow.aid
+    const { aid } = unsafeWindow
     if (aid) {
-      this.currentEpisodeIndex = this.episodeItems.findIndex(ep => ep.inputItem.aid == aid) ?? 0
+      this.currentEpisodeIndex = this.episodeItems.findIndex(ep => ep.inputItem.aid === +aid) ?? 0
       this.episodeItems[this.currentEpisodeIndex].isChecked = true
     }
     // console.log('dididi', this.episodeItems)
diff --git a/registry/lib/components/video/download/inputs/VirtualList.vue b/registry/lib/components/video/download/inputs/VirtualList.vue
index d265249d6..09c0fd104 100644
--- a/registry/lib/components/video/download/inputs/VirtualList.vue
+++ b/registry/lib/components/video/download/inputs/VirtualList.vue
@@ -14,48 +14,26 @@ const props = withDefaults(defineProps<PropsType>(), {
   stageItemCount: 50,
   bufferItemCount: 5,
   updateRequiredItemCount: 5,
-  focuseItemIndex: 0
+  focuseItemIndex: 0,
 })
 
 const container = ref<HTMLDivElement>()
 const stageHeight = computed(() => props.stageItemCount * props.itemHeight)
 const clientHeight = computed(() => container.value?.clientHeight ?? 0)
-const scrollHeight = computed(() => container.value?.scrollHeight ?? 0)
+// const scrollHeight = computed(() => container.value?.scrollHeight ?? 0)
 
 const ptr = ref(0)
 const appendPaddingTop = computed(() => ptr.value * props.itemHeight)
-const appendPaddingBottom = computed(() => (props.items.length - ptr.value - props.stageItemCount) * props.itemHeight)
-const activatedItems = computed(() => props.items.slice(ptr.value, ptr.value + props.stageItemCount))
+const appendPaddingBottom = computed(() => {
+  return (props.items.length - ptr.value - props.stageItemCount) * props.itemHeight
+})
+const activatedItems = computed(() => {
+  return props.items.slice(ptr.value, ptr.value + props.stageItemCount)
+})
 
 const forceScrolling = ref(false)
 const lastScrollTop = ref(0)
 
-onMounted(() => {
-  setTimeout(() => focus(props.focuseItemIndex))
-})
-
-watch(
-  () => props.focuseItemIndex,
-  (newv, oldv) => {
-    focus(newv)
-  }
-)
-
-/**
- * 将 viewport 对齐到指定元素
- * @param index 
- * @param alignment 决定用顶部还是底部对齐
- */
-const focus = (index: number, alignment: 'top' | 'bottom' = 'top') => {
-  if (alignment === 'top') {
-    const offset = index - moveStage(index - props.bufferItemCount)
-    moveViewport(offset * props.itemHeight)
-  } else if (alignment === 'bottom') {
-    const offset = index - moveStage(index + props.bufferItemCount - props.stageItemCount)
-    moveViewport(offset * props.itemHeight)
-  }
-}
-
 /**
  * 在 stage 之内移动 viewport，不引起数据变化
  * @param top float
@@ -63,14 +41,14 @@ const focus = (index: number, alignment: 'top' | 'bottom' = 'top') => {
 const moveViewport = (top: number) => {
   if (top < 0) {
     top = 0
-  } else if (top > (stageHeight.value - clientHeight.value)) {
+  } else if (top > stageHeight.value - clientHeight.value) {
     top = stageHeight.value - clientHeight.value
   }
   // 滚动列表
   forceScrolling.value = true
   container.value?.scrollTo({
     top: appendPaddingTop.value + top,
-    behavior: 'instant'
+    behavior: 'instant',
   })
 
   return top
@@ -87,9 +65,35 @@ const moveStage = (index: number) => {
     index = props.items.length - props.stageItemCount
   }
   // 触发内容变化并推动列表
-  return ptr.value = index
+  return (ptr.value = index)
 }
 
+/**
+ * 将 viewport 对齐到指定元素
+ * @param index
+ * @param alignment 决定用顶部还是底部对齐
+ */
+const focus = (index: number, alignment: 'top' | 'bottom' = 'top') => {
+  if (alignment === 'top') {
+    const offset = index - moveStage(index - props.bufferItemCount)
+    moveViewport(offset * props.itemHeight)
+  } else if (alignment === 'bottom') {
+    const offset = index - moveStage(index + props.bufferItemCount - props.stageItemCount)
+    moveViewport(offset * props.itemHeight)
+  }
+}
+
+onMounted(() => {
+  setTimeout(() => focus(props.focuseItemIndex))
+})
+
+watch(
+  () => props.focuseItemIndex,
+  newv => {
+    focus(newv)
+  },
+)
+
 const onScroll = lodash.throttle((event: Event) => {
   if (forceScrolling.value) {
     // 手动触发滚动时不做处理
@@ -103,27 +107,26 @@ const onScroll = lodash.throttle((event: Event) => {
   lastScrollTop.value = tar.scrollTop
   if (step > 0) {
     // 向下滚动
-    const actualBottomHeight = tar.scrollTop + tar.clientHeight,
-      contentBottomHeight = appendPaddingTop.value + stageHeight.value
-    const buffer = contentBottomHeight - actualBottomHeight,
-      min = props.itemHeight * props.updateRequiredItemCount
+    const actualBottomHeight = tar.scrollTop + tar.clientHeight
+    const contentBottomHeight = appendPaddingTop.value + stageHeight.value
+    const buffer = contentBottomHeight - actualBottomHeight
+    const min = props.itemHeight * props.updateRequiredItemCount
     if (buffer < min) {
       const offset = props.bufferItemCount - Math.round(buffer / props.itemHeight)
       moveStage(ptr.value + offset)
     }
   } else if (step < 0) {
     // 向上滚动
-    const actualTopHeight = tar.scrollHeight - tar.scrollTop,
-      contentTopHeight = tar.scrollHeight - appendPaddingTop.value
-    const buffer = contentTopHeight - actualTopHeight,
-      min = props.itemHeight * props.updateRequiredItemCount
+    const actualTopHeight = tar.scrollHeight - tar.scrollTop
+    const contentTopHeight = tar.scrollHeight - appendPaddingTop.value
+    const buffer = contentTopHeight - actualTopHeight
+    const min = props.itemHeight * props.updateRequiredItemCount
     if (buffer < min) {
       const offset = props.bufferItemCount - Math.round(buffer / props.itemHeight)
       moveStage(ptr.value - offset)
     }
   }
 }, 33)
-
 </script>
 
 <template>
@@ -141,12 +144,13 @@ const onScroll = lodash.throttle((event: Event) => {
   overflow-x: hidden;
   overflow-y: auto;
 
-  >.scroll-box {
+  > .scroll-box {
     list-style: none;
     padding-top: v-bind('`${appendPaddingTop}px`');
     padding-bottom: v-bind('`${appendPaddingBottom}px`');
 
-    >.list-item {}
+    > .list-item {
+    }
   }
 }
 </style>