feat: 元素选择面板支持调整层级

package-lock.json

@@ -40,7 +40,7 @@
         "svg-pathdata": "^6.0.0",
         "tinycolor2": "^1.4.2",
         "vue": "^3.2.37",
-        "vuedraggable": "^4.0.1"
+        "vuedraggable": "^4.1.0"
       },
       "devDependencies": {
         "@commitlint/cli": "^12.0.0",

package.json

@@ -41,7 +41,7 @@
     "svg-pathdata": "^6.0.0",
     "tinycolor2": "^1.4.2",
     "vue": "^3.2.37",
-    "vuedraggable": "^4.0.1"
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^12.0.0",

src/plugins/icon.ts

@@ -48,6 +48,7 @@ import {
   Tailoring,
   Effects,
   ColorFilter,
+  Up,
   Down,
   Plus,
   Minus,
@@ -159,6 +160,7 @@ export const icons = {
   IconTailoring: Tailoring,
   IconEffects: Effects,
   IconColorFilter: ColorFilter,
+  IconUp: Up,
   IconDown: Down,
   IconPlus: Plus,
   IconMinus: Minus,

src/views/Editor/Canvas/index.vue

@@ -143,6 +143,7 @@ const {
   editorAreaFocus,
   gridLineSize,
   showRuler,
+  showSelectPanel,
   creatingElement,
   canvasScale,
   textFormatPainter,
@@ -287,6 +288,13 @@ const contextmenus = (): ContextmenuItem[] => {
         },
       ],
     },
+    {
+      text: showSelectPanel.value ? '关闭选择面板' : '打开选择面板',
+      handler: () => {
+        if (!showSelectPanel.value) mainStore.setSelectPanelState(true)
+        else mainStore.setSelectPanelState(false)
+      },
+    },
     {
       text: '重置当前页',
       handler: deleteAllElements,

src/views/Editor/EditorHeader/index.vue

@@ -27,7 +27,7 @@
             <MenuItem @click="toggleGridLines()">{{ gridLineSize ? '关闭网格线' : '打开网格线' }}</MenuItem>
             <MenuItem @click="toggleRuler()">{{ showRuler ? '关闭标尺' : '打开标尺' }}</MenuItem>
             <MenuItem @click="resetSlides()">重置幻灯片</MenuItem>
-            <MenuItem @click="openSelectPanel()">打开选择面板</MenuItem>
+            <MenuItem @click="openSelectPanel()">{{ showSelectPanel ? '关闭选择面板' : '打开选择面板' }}</MenuItem>
           </Menu>
         </template>
       </Dropdown>
@@ -91,7 +91,7 @@ import useExport from '@/hooks/useExport'
 import HotkeyDoc from './HotkeyDoc.vue'
 
 const mainStore = useMainStore()
-const { gridLineSize, showRuler } = storeToRefs(mainStore)
+const { gridLineSize, showRuler, showSelectPanel } = storeToRefs(mainStore)
 
 const { enterScreening, enterScreeningFromStart } = useScreening()
 const { createSlide, deleteSlide, resetSlides } = useSlideHandler()
@@ -109,7 +109,8 @@ const toggleRuler = () => {
 }
 
 const openSelectPanel = () => {
-  mainStore.setSelectPanelState(true)
+  if (!showSelectPanel.value) mainStore.setSelectPanelState(true)
+  else mainStore.setSelectPanelState(false)
 }
 
 const hotkeyDrawerVisible = ref(false)

src/views/Editor/SelectPanel.vue

@@ -8,9 +8,15 @@
     :top="90"
     @close="close()"
   >
-    <div class="btns" v-if="elements.length">
+    <div class="handler" v-if="elements.length">
-      <Button size="small" style="margin-right: 5px;" @click="showAll()">全部显示</Button>
+      <div class="btns">
-      <Button size="small" @click="hideAll()">全部隐藏</Button>
+        <Button size="small" style="margin-right: 5px;" @click="showAll()">全部显示</Button>
+        <Button size="small" @click="hideAll()">全部隐藏</Button>
+      </div>
+      <div class="icon-btns" v-if="handleElement">
+        <IconDown class="icon-btn" @click="orderElement(handleElement!, ElementOrderCommands.UP)" />
+        <IconUp class="icon-btn" @click="orderElement(handleElement!, ElementOrderCommands.DOWN)" />
+      </div>
     </div>
     <div class="element-list">
       <template v-for="item in elements" :key="item.id">
@@ -76,11 +82,15 @@ import { storeToRefs } from 'pinia'
 import { useSlidesStore, useMainStore } from '@/store'
 import { PPTElement } from '@/types/slides'
 import { ELEMENT_TYPE_ZH } from '@/configs/element'
+import useOrderElement from '@/hooks/useOrderElement'
+import { ElementOrderCommands } from '@/types/edit'
 
 const slidesStore = useSlidesStore()
 const mainStore = useMainStore()
 const { currentSlide } = storeToRefs(slidesStore)
-const { handleElementId, activeElementIdList, activeGroupElementId, hiddenElementIdList } = storeToRefs(mainStore)
+const { handleElement, handleElementId, activeElementIdList, activeGroupElementId, hiddenElementIdList } = storeToRefs(mainStore)
+
+const { orderElement } = useOrderElement()
 
 interface GroupElements {
   type: 'group'
@@ -168,11 +178,35 @@ const close = () => {
   font-size: 12px;
   user-select: none;
 }
-.btns {
+.handler {
-  margin-bottom: 6px;
+  height: 24px;
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .icon-btns {
+    height: 100%;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+  .icon-btn {
+    width: 16px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    &:hover {
+      color: $themeColor;
+    }
+  }
 }
 .element-list {
-  height: calc(100% - 30px);
+  height: calc(100% - 32px);
   padding-right: 10px;
   margin-right: -10px;
   overflow: auto;