From 5421f82801c6f485cd3fb611e084ead528e30fc9 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Mon, 8 Mar 2021 22:35:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E7=BC=A9=E7=95=A5?=
 =?UTF-8?q?=E5=9B=BE=E5=A4=9A=E9=80=89=EF=BC=88=E5=BE=85=E8=A1=A5=E5=85=85?=
 =?UTF-8?q?=E6=89=B9=E9=87=8F=E6=93=8D=E4=BD=9C=E5=8A=9F=E8=83=BD=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/constants.ts                |  1 +
 src/store/mutations.ts                |  4 ++
 src/store/state.ts                    |  2 +
 src/views/Editor/Thumbnails/index.vue | 71 +++++++++++++++++++++++++--
 4 files changed, 74 insertions(+), 4 deletions(-)

diff --git a/src/store/constants.ts b/src/store/constants.ts
index 16e610df..cde289ca 100644
--- a/src/store/constants.ts
+++ b/src/store/constants.ts
@@ -21,6 +21,7 @@ export const enum MutationTypes {
   UPDATE_SLIDE = 'updateSlide',
   DELETE_SLIDE = 'deleteSlide',
   UPDATE_SLIDE_INDEX = 'updateSlideIndex',
+  UPDATE_SELECTED_SLIDES_INDEX = 'updateSelectedSlidesIndex',
   ADD_ELEMENT = 'addElement',
   UPDATE_ELEMENT = 'updateElement',
   REMOVE_ELEMENT_PROPS = 'removeElementProps',
diff --git a/src/store/mutations.ts b/src/store/mutations.ts
index 96376fb3..c451854a 100644
--- a/src/store/mutations.ts
+++ b/src/store/mutations.ts
@@ -106,6 +106,10 @@ export const mutations: MutationTree<State> = {
     state.slideIndex = index
   },
 
+  [MutationTypes.UPDATE_SELECTED_SLIDES_INDEX](state, selectedSlidesIndex: number[]) {
+    state.selectedSlidesIndex = selectedSlidesIndex
+  },
+
   [MutationTypes.ADD_ELEMENT](state, element: PPTElement | PPTElement[]) {
     const elements = Array.isArray(element) ? element : [element]
     const currentSlideEls = state.slides[state.slideIndex].elements
diff --git a/src/store/state.ts b/src/store/state.ts
index c7d18155..9aba0eef 100644
--- a/src/store/state.ts
+++ b/src/store/state.ts
@@ -19,6 +19,7 @@ export interface State {
   theme: SlideTheme;
   slides: Slide[];
   slideIndex: number;
+  selectedSlidesIndex: number[];
   snapshotCursor: number;
   snapshotLength: number;
   ctrlKeyState: boolean;
@@ -47,6 +48,7 @@ export const state: State = {
   },
   slides: slides,
   slideIndex: 0,
+  selectedSlidesIndex: [],
   snapshotCursor: -1,
   snapshotLength: 0,
   ctrlKeyState: false,
diff --git a/src/views/Editor/Thumbnails/index.vue b/src/views/Editor/Thumbnails/index.vue
index 608015ca..b3fc246f 100644
--- a/src/views/Editor/Thumbnails/index.vue
+++ b/src/views/Editor/Thumbnails/index.vue
@@ -18,8 +18,11 @@
       <template #item="{ element, index }">
         <div
           class="thumbnail-item"
-          :class="{ 'selected': slideIndex === index }"
-          @mousedown="changSlideIndex(index)"
+          :class="{
+            'active': slideIndex === index,
+            'selected': selectedSlidesIndex.includes(index),
+          }"
+          @mousedown="handleClickSlideThumbnail(index)"
           v-contextmenu="contextmenusThumbnailItem"
         >
           <div class="label">{{ fillDigit(index + 1, 2) }}</div>
@@ -51,6 +54,9 @@ export default defineComponent({
     const store = useStore()
     const slides = computed(() => store.state.slides)
     const slideIndex = computed(() => store.state.slideIndex)
+    const ctrlKeyState = computed(() => store.state.ctrlKeyState)
+    const shiftKeyState = computed(() => store.state.shiftKeyState)
+    const selectedSlidesIndex = computed(() => [...store.state.selectedSlidesIndex, slideIndex.value])
 
     const {
       copySlide,
@@ -69,12 +75,63 @@ export default defineComponent({
       store.commit(MutationTypes.UPDATE_SLIDE_INDEX, index)
     }
 
+    // 点击缩略图
+    const handleClickSlideThumbnail = (index: number) => {
+      const isMultiSelected = selectedSlidesIndex.value.length > 1
+
+      // 按住Ctrl键，点选幻灯片，再次点击已选中的页面则取消选中
+      if (ctrlKeyState.value) {
+        if (slideIndex.value === index) {
+          if (!isMultiSelected) return
+
+          const newSelectedSlidesIndex = selectedSlidesIndex.value.filter(item => item !== index)
+          store.commit(MutationTypes.UPDATE_SELECTED_SLIDES_INDEX, newSelectedSlidesIndex)
+          changSlideIndex(selectedSlidesIndex.value[0])
+        }
+        else {
+          if (selectedSlidesIndex.value.includes(index)) {
+            const newSelectedSlidesIndex = selectedSlidesIndex.value.filter(item => item !== index)
+            store.commit(MutationTypes.UPDATE_SELECTED_SLIDES_INDEX, newSelectedSlidesIndex)
+          }
+          else {
+            const newSelectedSlidesIndex = [...selectedSlidesIndex.value, index]
+            store.commit(MutationTypes.UPDATE_SELECTED_SLIDES_INDEX, newSelectedSlidesIndex)
+            changSlideIndex(index)
+          }
+        }
+      }
+      // 按住Shift键，选择范围内的全部幻灯片
+      else if (shiftKeyState.value) {
+        if (slideIndex.value === index && !isMultiSelected) return
+
+        let minIndex = Math.min(...selectedSlidesIndex.value)
+        let maxIndex = index
+
+        if (index < minIndex) {
+          maxIndex = Math.max(...selectedSlidesIndex.value)
+          minIndex = index
+        }
+
+        const newSelectedSlidesIndex = []
+        for (let i = minIndex; i <= maxIndex; i++) newSelectedSlidesIndex.push(i)
+        store.commit(MutationTypes.UPDATE_SELECTED_SLIDES_INDEX, newSelectedSlidesIndex)
+        changSlideIndex(index)
+      }
+      // 正常切换页面
+      else {
+        store.commit(MutationTypes.UPDATE_SELECTED_SLIDES_INDEX, [])
+        changSlideIndex(index)
+      }
+    }
+
     const thumbnailsFocus = computed(() => store.state.thumbnailsFocus)
 
     // 设置缩略图工具栏聚焦状态（只有聚焦状态下，该部分的快捷键才能生效）
     const setThumbnailsFocus = (focus: boolean) => {
       if (thumbnailsFocus.value === focus) return
       store.commit(MutationTypes.SET_THUMBNAILS_FOCUS, focus)
+
+      if (!focus) store.commit(MutationTypes.UPDATE_SELECTED_SLIDES_INDEX, [])
     }
 
     // 拖拽调整顺序后进行数据的同步
@@ -158,8 +215,9 @@ export default defineComponent({
       setThumbnailsFocus,
       slides,
       slideIndex,
+      selectedSlidesIndex,
       createSlide,
-      changSlideIndex,
+      handleClickSlideThumbnail,
       contextmenusThumbnails,
       contextmenusThumbnailItem,
       fillDigit,
@@ -202,7 +260,7 @@ export default defineComponent({
     outline: 1px solid rgba($color: $themeColor, $alpha: .15);
   }
 
-  &.selected {
+  &.active {
     .label {
       color: $themeColor;
     }
@@ -210,6 +268,11 @@ export default defineComponent({
       outline-color: $themeColor;
     }
   }
+  &.selected {
+    .thumbnail {
+      outline-color: $themeColor;
+    }
+  }
 }
 .label {
   font-size: 12px;