refactor: 代码优化

src/hooks/useAddSlidesOrElements.ts

@@ -9,7 +9,7 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 export default () => {
   const mainStore = useMainStore()
   const slidesStore = useSlidesStore()
-  const { currentSlide, slides } = storeToRefs(slidesStore)
+  const { currentSlide } = storeToRefs(slidesStore)
 
   const { addHistorySnapshot } = useHistorySnapshot()
 
@@ -100,15 +100,8 @@ export default () => {
     addHistorySnapshot()
   }
 
-  const isEmptySlide = computed(() => {
-    if (slides.value.length > 1) return false
-    if (slides.value[0].elements.length > 0) return false
-    return true
-  })
-
   return {
     addElementsFromData,
     addSlidesFromData,
-    isEmptySlide,
   }
 }

src/hooks/useImport.ts

@@ -7,6 +7,7 @@ import { decrypt } from '@/utils/crypto'
 import { type ShapePoolItem, SHAPE_LIST, SHAPE_PATH_FORMULAS } from '@/configs/shapes'
 import { VIEWPORT_SIZE } from '@/configs/canvas'
 import useAddSlidesOrElements from '@/hooks/useAddSlidesOrElements'
+import useSlideHandler from '@/hooks/useSlideHandler'
 import message from '@/utils/message'
 import type {
   Slide,
@@ -25,7 +26,8 @@ export default () => {
   const slidesStore = useSlidesStore()
   const { theme } = storeToRefs(useSlidesStore())
 
-  const { addSlidesFromData, isEmptySlide } = useAddSlidesOrElements()
+  const { addSlidesFromData } = useAddSlidesOrElements()
+  const { isEmptySlide } = useSlideHandler()
 
   const exporting = ref(false)
 

src/hooks/useSectionHandler.ts

@@ -0,0 +1,92 @@
+import { storeToRefs } from 'pinia'
+import { nanoid } from 'nanoid'
+import { useSlidesStore } from '@/store'
+import useHistorySnapshot from '@/hooks/useHistorySnapshot'
+import useSlideHandler from '@/hooks/useSlideHandler'
+
+export default () => {
+  const slidesStore = useSlidesStore()
+  const { slides } = storeToRefs(slidesStore)
+
+  const { addHistorySnapshot } = useHistorySnapshot()
+  const { deleteSlide } = useSlideHandler()
+
+  const createSection = () => {
+    slidesStore.updateSlide({
+      sectionTag: {
+        id: nanoid(6),
+      },
+    })
+    addHistorySnapshot()
+  }
+
+  const removeSection = (sectionId: string) => {
+    if (!sectionId) return
+
+    const slide = slides.value.find(slide => slide.sectionTag?.id === sectionId)!
+    slidesStore.removeSlideProps({
+      id: slide.id,
+      propName: 'sectionTag',
+    })
+    addHistorySnapshot()
+  }
+
+  const removeAllSection = () => {
+    const _slides = slides.value.map(slide => {
+      if (slide.sectionTag) delete slide.sectionTag
+      return slide
+    })
+    slidesStore.setSlides(_slides)
+    addHistorySnapshot()
+  }
+
+  const removeSectionSlides = (sectionId: string) => {
+    let startIndex = 0
+    if (sectionId) {
+      startIndex = slides.value.findIndex(slide => slide.sectionTag?.id === sectionId)
+    }
+    const ids: string[] = []
+    
+    for (let i = startIndex; i < slides.value.length; i++) {
+      const slide = slides.value[i]
+      if(i !== startIndex && slide.sectionTag) break
+
+      ids.push(slide.id)
+    }
+
+    deleteSlide(ids)
+  }
+
+  const updateSectionTitle = (sectionId: string, title: string) => {
+    if (!title) return
+
+    if (sectionId === 'default') {
+      slidesStore.updateSlide({
+        sectionTag: {
+          id: nanoid(6),
+          title,
+        },
+      }, slides.value[0].id)
+    }
+    else {
+      const slide = slides.value.find(slide => slide.sectionTag?.id === sectionId)
+      if (!slide) return
+
+      slidesStore.updateSlide({
+        sectionTag: {
+          ...slide.sectionTag!,
+          title,
+        },
+      }, slide.id)
+    }
+    addHistorySnapshot()
+  }
+
+  return {
+    createSection,
+    removeSection,
+    removeAllSection,
+    removeSectionSlides,
+    updateSectionTitle,
+  }
+}

src/hooks/useSlideHandler.ts

@@ -168,76 +168,11 @@ export default () => {
     slidesStore.updateSlideIndex(newIndex)
   }
 
-  const createSection = () => {
+  const isEmptySlide = computed(() => {
-    slidesStore.updateSlide({
+    if (slides.value.length > 1) return false
-      sectionTag: {
+    if (slides.value[0].elements.length > 0) return false
-        id: nanoid(6),
+    return true
-      },
+  })
-    })
-    addHistorySnapshot()
-  }
-
-  const removeSection = (sectionId: string) => {
-    if (!sectionId) return
-
-    const slide = slides.value.find(slide => slide.sectionTag?.id === sectionId)!
-    slidesStore.removeSlideProps({
-      id: slide.id,
-      propName: 'sectionTag',
-    })
-    addHistorySnapshot()
-  }
-
-  const removeAllSection = () => {
-    const _slides = slides.value.map(slide => {
-      if (slide.sectionTag) delete slide.sectionTag
-      return slide
-    })
-    slidesStore.setSlides(_slides)
-    addHistorySnapshot()
-  }
-
-  const removeSectionSlides = (sectionId: string) => {
-    let startIndex = 0
-    if (sectionId) {
-      startIndex = slides.value.findIndex(slide => slide.sectionTag?.id === sectionId)
-    }
-    const ids: string[] = []
-    
-    for (let i = startIndex; i < slides.value.length; i++) {
-      const slide = slides.value[i]
-      if(i !== startIndex && slide.sectionTag) break
-
-      ids.push(slide.id)
-    }
-
-    deleteSlide(ids)
-  }
-
-  const updateSectionTitle = (sectionId: string, title: string) => {
-    if (!title) return
-
-    if (sectionId === 'default') {
-      slidesStore.updateSlide({
-        sectionTag: {
-          id: nanoid(6),
-          title,
-        },
-      }, slides.value[0].id)
-    }
-    else {
-      const slide = slides.value.find(slide => slide.sectionTag?.id === sectionId)
-      if (!slide) return
-
-      slidesStore.updateSlide({
-        sectionTag: {
-          ...slide.sectionTag!,
-          title,
-        },
-      }, slide.id)
-    }
-    addHistorySnapshot()
-  }
 
   return {
     resetSlides,
@@ -251,10 +186,6 @@ export default () => {
     cutSlide,
     selectAllSlide,
     sortSlides,
-    createSection,
+    isEmptySlide,
-    removeSection,
-    removeAllSection,
-    removeSectionSlides,
-    updateSectionTitle,
   }
 }

src/views/Editor/Thumbnails/index.vue

@@ -74,6 +74,7 @@ import { fillDigit } from '@/utils/common'
 import { isElementInViewport } from '@/utils/element'
 import type { ContextmenuItem } from '@/components/Contextmenu/types'
 import useSlideHandler from '@/hooks/useSlideHandler'
+import useSectionHandler from '@/hooks/useSectionHandler'
 import useScreening from '@/hooks/useScreening'
 import useLoadSlides from '@/hooks/useLoadSlides'
 
@@ -109,12 +110,15 @@ const {
   cutSlide,
   selectAllSlide,
   sortSlides,
+} = useSlideHandler()
+
+const {
   createSection,
   removeSection,
   removeAllSection,
   removeSectionSlides,
   updateSectionTitle,
-} = useSlideHandler()
+} = useSectionHandler()
 
 // 页面被切换时
 const thumbnailsRef = ref<InstanceType<typeof Draggable>>()