refactor: 代码优化

src/hooks/useCombineElement.ts

@@ -13,6 +13,19 @@ export default () => {
 
   const { addHistorySnapshot } = useHistorySnapshot()
 
+  /**
+   * 判断当前选中的元素是否可以组合
+   */
+  const canCombine = computed(() => {
+    if (activeElementList.value.length < 2) return false
+
+    const firstGroupId = activeElementList.value[0].groupId
+    if (!firstGroupId) return true
+
+    const inSameGroup = activeElementList.value.every(el => (el.groupId && el.groupId) === firstGroupId)
+    return !inSameGroup
+  })
+
   /**
    * 组合当前选中的元素：给当前选中的元素赋予一个相同的分组ID
    */
@@ -70,6 +83,7 @@ export default () => {
   }
 
   return {
+    canCombine,
     combineElements,
     uncombineElements,
   }

src/views/Editor/Toolbar/MultiPositionPanel.vue

@@ -37,9 +37,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue'
+import { defineComponent } from 'vue'
-import { useStore } from '@/store'
-import { PPTElement } from '@/types/slides'
 import { ElementAlignCommand } from '@/types/edit'
 import useCombineElement from '@/hooks/useCombineElement'
 import useAlignActiveElement from '@/hooks/useAlignActiveElement'
@@ -49,23 +47,11 @@ import useUniformDisplayElement from '@/hooks/useUniformDisplayElement'
 export default defineComponent({
   name: 'multi-position-panel',
   setup() {
-    const store = useStore()
+    const { canCombine, combineElements, uncombineElements } = useCombineElement()
-    const activeElementList = computed<PPTElement[]>(() => store.getters.activeElementList)
-
-    const { combineElements, uncombineElements } = useCombineElement()
     const { alignActiveElement } = useAlignActiveElement()
     const { alignElementToCanvas } = useAlignElementToCanvas()
     const { displayItemCount, uniformHorizontalDisplay, uniformVerticalDisplay } = useUniformDisplayElement()
 
-    // 判断当前多选的几个元素是否可以组合
-    const canCombine = computed(() => {
-      const firstGroupId = activeElementList.value[0].groupId
-      if (!firstGroupId) return true
-
-      const inSameGroup = activeElementList.value.every(el => (el.groupId && el.groupId) === firstGroupId)
-      return !inSameGroup
-    })
-
     // 多选元素对齐，需要先判断当前所选中的元素状态：
     // 如果所选元素为一组组合元素，则将它对齐到画布；
     // 如果所选元素不是组合元素或不止一组元素（即当前为可组合状态），则将这多个（多组）元素相互对齐。
@@ -75,8 +61,8 @@ export default defineComponent({
     }
 
     return {
-      displayItemCount,
       canCombine,
+      displayItemCount,
       combineElements,
       uncombineElements,
       uniformHorizontalDisplay,