perf: 代码优化、UI调整

src/components/ColorPicker/index.vue

@@ -215,7 +215,7 @@ const openEyeDropper = () => {
 
 // 原生取色吸管
 const browserEyeDropper = () => {
-  message.success('按 ESC 键关闭取色吸管')
+  message.success('按 ESC 键关闭取色吸管', { duration: 0 })
 
   // eslint-disable-next-line
   const eyeDropper = new (window as any).EyeDropper()
@@ -226,7 +226,7 @@ const browserEyeDropper = () => {
 
     updateRecentColorsCache()
   }).catch(() => {
-    message.success('关闭取色吸管')
+    message.closeAll()
   })
 }
 

src/hooks/useGlobalHotkey.ts

@@ -9,7 +9,7 @@ import useLockElement from './useLockElement'
 import useDeleteElement from './useDeleteElement'
 import useCombineElement from './useCombineElement'
 import useCopyAndPasteElement from './useCopyAndPasteElement'
-import useSelectAllElement from './useSelectAllElement'
+import useSelectElement from './useSelectElement'
 import useMoveElement from './useMoveElement'
 import useOrderElement from './useOrderElement'
 import useHistorySnapshot from './useHistorySnapshot'
@@ -45,7 +45,7 @@ export default () => {
   const { deleteElement } = useDeleteElement()
   const { lockElement } = useLockElement()
   const { copyElement, cutElement, quickCopyElement } = useCopyAndPasteElement()
-  const { selectAllElement } = useSelectAllElement()
+  const { selectAllElements } = useSelectElement()
   const { moveElement } = useMoveElement()
   const { orderElement } = useOrderElement()
   const { redo, undo } = useHistorySnapshot()
@@ -68,7 +68,7 @@ export default () => {
   }
 
   const selectAll = () => {
-    if (editorAreaFocus.value) selectAllElement()
+    if (editorAreaFocus.value) selectAllElements()
     if (thumbnailsFocus.value) selectAllSlide()
   }
 

src/hooks/useHideElement.ts

@@ -0,0 +1,35 @@
+import { storeToRefs } from 'pinia'
+import { useSlidesStore, useMainStore } from '@/store'
+
+export default () => {
+  const slidesStore = useSlidesStore()
+  const mainStore = useMainStore()
+  const { currentSlide } = storeToRefs(slidesStore)
+  const { activeElementIdList, hiddenElementIdList } = storeToRefs(mainStore)
+
+  const toggleHideElement = (id: string) => {
+    if (hiddenElementIdList.value.includes(id)) {
+      mainStore.setHiddenElementIdList(hiddenElementIdList.value.filter(item => item !== id))
+    }
+    else mainStore.setHiddenElementIdList([...hiddenElementIdList.value, id])
+  
+    if (activeElementIdList.value.includes(id)) mainStore.setActiveElementIdList([])
+  }
+  
+  const showAllElements = () => {
+    const currentSlideElIdList = currentSlide.value.elements.map(item => item.id)
+    const needHiddenElementIdList = hiddenElementIdList.value.filter(item => !currentSlideElIdList.includes(item))
+    mainStore.setHiddenElementIdList(needHiddenElementIdList)
+  }
+  const hideAllElements = () => {
+    const currentSlideElIdList = currentSlide.value.elements.map(item => item.id)
+    mainStore.setHiddenElementIdList([...hiddenElementIdList.value, ...currentSlideElIdList])
+    if (activeElementIdList.value.length) mainStore.setActiveElementIdList([])
+  }
+
+  return {
+    toggleHideElement,
+    showAllElements,
+    hideAllElements,
+  }
+}

src/hooks/useSelectElement.ts

@@ -4,16 +4,28 @@ import { useMainStore, useSlidesStore } from '@/store'
 export default () => {
   const mainStore = useMainStore()
   const { currentSlide } = storeToRefs(useSlidesStore())
-  const { hiddenElementIdList } = storeToRefs(mainStore)
+  const { hiddenElementIdList, handleElementId } = storeToRefs(mainStore)
 
   // 将当前页面全部元素设置为被选择状态
-  const selectAllElement = () => {
+  const selectAllElements = () => {
     const unlockedElements = currentSlide.value.elements.filter(el => !el.lock && !hiddenElementIdList.value.includes(el.id))
     const newActiveElementIdList = unlockedElements.map(el => el.id)
     mainStore.setActiveElementIdList(newActiveElementIdList)
   }
   
+  // 将指定元素设置为被选择状态
+  const selectElement = (id: string) => {
+    if (handleElementId.value === id) return
+    if (hiddenElementIdList.value.includes(id)) return
+    
+    const lockedElements = currentSlide.value.elements.filter(el => el.lock)
+    if (lockedElements.some(el => el.id === id)) return
+  
+    mainStore.setActiveElementIdList([id])
+  }
+
   return {
-    selectAllElement,
+    selectAllElements,
+    selectElement,
   }
 }

src/views/Editor/Canvas/EditableElement.vue

@@ -27,7 +27,7 @@ import useCombineElement from '@/hooks/useCombineElement'
 import useOrderElement from '@/hooks/useOrderElement'
 import useAlignElementToCanvas from '@/hooks/useAlignElementToCanvas'
 import useCopyAndPasteElement from '@/hooks/useCopyAndPasteElement'
-import useSelectAllElement from '@/hooks/useSelectAllElement'
+import useSelectElement from '@/hooks/useSelectElement'
 
 import { ElementOrderCommands, ElementAlignCommands } from '@/types/edit'
 
@@ -70,7 +70,7 @@ const { combineElements, uncombineElements } = useCombineElement()
 const { deleteElement } = useDeleteElement()
 const { lockElement, unlockElement } = useLockElement()
 const { copyElement, pasteElement, cutElement } = useCopyAndPasteElement()
-const { selectAllElement } = useSelectAllElement()
+const { selectAllElements } = useSelectElement()
 
 const contextmenus = (): ContextmenuItem[] => {
   if (props.elementInfo.lock) {
@@ -150,7 +150,7 @@ const contextmenus = (): ContextmenuItem[] => {
     {
       text: '全选',
       subText: 'Ctrl + A',
-      handler: selectAllElement,
+      handler: selectAllElements,
     },
     {
       text: '锁定',

src/views/Editor/Canvas/ShapeCreateCanvas.vue

@@ -166,11 +166,14 @@ const keydownListener = (e: KeyboardEvent) => {
 }
 onMounted(() => {
   message.success('点击绘制任意形状，首尾闭合完成绘制，按 ESC 键或鼠标右键取消，按 ENTER 键提前完成', {
-    duration: 5000,
+    duration: 0,
   })
   document.addEventListener('keydown', keydownListener)
 })
-onUnmounted(() => document.removeEventListener('keydown', keydownListener))
+onUnmounted(() => {
+  document.removeEventListener('keydown', keydownListener)
+  message.closeAll()
+})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Canvas/index.vue

@@ -113,7 +113,7 @@ import useMouseSelection from './hooks/useMouseSelection'
 import useDropImageOrText from './hooks/useDropImageOrText'
 import useRotateElement from './hooks/useRotateElement'
 import useScaleElement from './hooks/useScaleElement'
-import useSelectElement from './hooks/useSelectElement'
+import useSelectAndMoveElement from './hooks/useSelectElement'
 import useDragElement from './hooks/useDragElement'
 import useDragLineElement from './hooks/useDragLineElement'
 import useMoveShapeKeypoint from './hooks/useMoveShapeKeypoint'
@@ -121,7 +121,7 @@ import useInsertFromCreateSelection from './hooks/useInsertFromCreateSelection'
 
 import useDeleteElement from '@/hooks/useDeleteElement'
 import useCopyAndPasteElement from '@/hooks/useCopyAndPasteElement'
-import useSelectAllElement from '@/hooks/useSelectAllElement'
+import useSelectElement from '@/hooks/useSelectElement'
 import useScaleCanvas from '@/hooks/useScaleCanvas'
 import useScreening from '@/hooks/useScreening'
 import useSlideHandler from '@/hooks/useSlideHandler'
@@ -181,12 +181,12 @@ const { mouseSelection, mouseSelectionVisible, mouseSelectionQuadrant, updateMou
 
 const { dragElement } = useDragElement(elementList, alignmentLines, canvasScale)
 const { dragLineElement } = useDragLineElement(elementList)
-const { selectElement } = useSelectElement(elementList, dragElement)
+const { selectElement } = useSelectAndMoveElement(elementList, dragElement)
 const { scaleElement, scaleMultiElement } = useScaleElement(elementList, alignmentLines, canvasScale)
 const { rotateElement } = useRotateElement(elementList, viewportRef, canvasScale)
 const { moveShapeKeypoint } = useMoveShapeKeypoint(elementList, canvasScale)
 
-const { selectAllElement } = useSelectAllElement()
+const { selectAllElements } = useSelectElement()
 const { deleteAllElements } = useDeleteElement()
 const { pasteElement } = useCopyAndPasteElement()
 const { enterScreeningFromStart } = useScreening()
@@ -297,7 +297,7 @@ const contextmenus = (): ContextmenuItem[] => {
     {
       text: '全选',
       subText: 'Ctrl + A',
-      handler: selectAllElement,
+      handler: selectAllElements,
     },
     {
       text: '标尺',

src/views/Editor/NotesPanel.vue

@@ -311,11 +311,11 @@ const close = () => {
 
   
   .footer {
-    margin-top: 5px;
+    margin-top: 10px;
     display: flex;
 
     .btn + .btn {
-      margin-left: 5px;
+      margin-left: 8px;
       flex-shrink: 0;
     }
   }

src/views/Editor/SelectPanel.vue

@@ -10,8 +10,8 @@
   >
     <div class="handler" v-if="elements.length">
       <div class="btns">
-        <Button size="small" style="margin-right: 5px;" @click="showAll()">全部显示</Button>
+        <Button size="small" style="margin-right: 5px;" @click="showAllElements()">全部显示</Button>
-        <Button size="small" @click="hideAll()">全部隐藏</Button>
+        <Button size="small" @click="hideAllElements()">全部隐藏</Button>
       </div>
       <div class="icon-btns" v-if="handleElement">
         <IconDown class="icon-btn" @click="orderElement(handleElement!, ElementOrderCommands.UP)" />
@@ -44,8 +44,8 @@
             >
             <div v-else class="name">{{groupItem.name || ELEMENT_TYPE_ZH[groupItem.type]}}</div>
             <div class="icons">
-              <IconPreviewClose style="font-size: 17px;" @click.stop="hideElement(groupItem.id)" v-if="hiddenElementIdList.includes(groupItem.id)" />
+              <IconPreviewClose style="font-size: 17px;" @click.stop="toggleHideElement(groupItem.id)" v-if="hiddenElementIdList.includes(groupItem.id)" />
-              <IconPreviewOpen style="font-size: 17px;" @click.stop="hideElement(groupItem.id)" v-else />
+              <IconPreviewOpen style="font-size: 17px;" @click.stop="toggleHideElement(groupItem.id)" v-else />
             </div>
           </div>
         </div>
@@ -53,7 +53,7 @@
           class="item" 
           :class="{ 'active': activeElementIdList.includes(item.id) }"
           v-else 
-          @click="selectEl(item.id)"
+          @click="selectElement(item.id)"
           @dblclick="enterEdit(item.id)"
         >
           <input 
@@ -67,8 +67,8 @@
           >
           <div v-else class="name">{{item.name || ELEMENT_TYPE_ZH[item.type]}}</div>
           <div class="icons">
-            <IconPreviewClose style="font-size: 17px;" @click.stop="hideElement(item.id)" v-if="hiddenElementIdList.includes(item.id)" />
+            <IconPreviewClose style="font-size: 17px;" @click.stop="toggleHideElement(item.id)" v-if="hiddenElementIdList.includes(item.id)" />
-            <IconPreviewOpen style="font-size: 17px;" @click.stop="hideElement(item.id)" v-else />
+            <IconPreviewOpen style="font-size: 17px;" @click.stop="toggleHideElement(item.id)" v-else />
           </div>
         </div>
       </template>
@@ -83,6 +83,8 @@ import { useSlidesStore, useMainStore } from '@/store'
 import type { PPTElement } from '@/types/slides'
 import { ELEMENT_TYPE_ZH } from '@/configs/element'
 import useOrderElement from '@/hooks/useOrderElement'
+import useHideElement from '@/hooks/useHideElement'
+import useSelectElement from '@/hooks/useSelectElement'
 import { ElementOrderCommands } from '@/types/edit'
 
 import MoveablePanel from '@/components/MoveablePanel.vue'
@@ -94,6 +96,8 @@ const { currentSlide } = storeToRefs(slidesStore)
 const { handleElement, handleElementId, activeElementIdList, activeGroupElementId, hiddenElementIdList } = storeToRefs(mainStore)
 
 const { orderElement } = useOrderElement()
+const { selectElement } = useSelectElement()
+const { toggleHideElement, showAllElements, hideAllElements } = useHideElement()
 
 interface GroupElements {
   type: 'group'
@@ -130,33 +134,6 @@ const selectGroupEl = (item: GroupElements, id: string) => {
   nextTick(() => mainStore.setActiveGroupElementId(id))
 }
 
-const selectEl = (id: string) => {
-  if (handleElementId.value === id) return
-  if (hiddenElementIdList.value.includes(id)) return
-
-  mainStore.setActiveElementIdList([id])
-}
-
-const hideElement = (id: string) => {
-  if (hiddenElementIdList.value.includes(id)) {
-    mainStore.setHiddenElementIdList(hiddenElementIdList.value.filter(item => item !== id))
-  }
-  else mainStore.setHiddenElementIdList([...hiddenElementIdList.value, id])
-
-  if (activeElementIdList.value.includes(id)) mainStore.setActiveElementIdList([])
-}
-
-const showAll = () => {
-  const currentSlideElIdList = currentSlide.value.elements.map(item => item.id)
-  const needHiddenElementIdList = hiddenElementIdList.value.filter(item => !currentSlideElIdList.includes(item))
-  mainStore.setHiddenElementIdList(needHiddenElementIdList)
-}
-const hideAll = () => {
-  const currentSlideElIdList = currentSlide.value.elements.map(item => item.id)
-  mainStore.setHiddenElementIdList([...hiddenElementIdList.value, ...currentSlideElIdList])
-  if (activeElementIdList.value.length) mainStore.setActiveElementIdList([])
-}
-
 const editingElId = ref('')
 
 const saveElementName = (e: FocusEvent | KeyboardEvent, id: string) => {