feat: 添加层级调整

src/enum/layerEnum.ts

@@ -0,0 +1,6 @@
+export enum LayerEnum {
+  UP = 'up',
+  DOWN = 'down',
+  TOP = 'top',
+  BOTTOM = 'bottom',
+}

src/store/modules/action.ts

@@ -1,6 +1,9 @@
 import { defineStore } from "pinia";
 import { AlignEnum } from "@/enum/alignEnum";
+import { LayerEnum } from "@/enum/layerEnum";
 import { useProjectStore } from "@/store/modules/project";
+import { cloneDeep } from "lodash";
+import { CustomElement } from "#/project";
 
 export const useAcionStore = defineStore({
   id: 'action',
@@ -71,6 +74,7 @@ export const useAcionStore = defineStore({
         }
         case AlignEnum.Top: {
           const minY = Math.min(...activeElements.map((item) => item.container.props.y));
+          console.log(this.projectStore.currentSelectedElements, minY)
           activeElements.forEach((item) => {
             this.projectStore.updateElement(item.key, 'container.props.y', minY);
           });
@@ -78,6 +82,66 @@ export const useAcionStore = defineStore({
         }
         default: 
       }
+    },
+    // 图层调整
+    actionLayer(type: LayerEnum) {
+      const activeElements = this.projectStore.currentSelectedElements;
+      const elements = cloneDeep(this.projectStore.elements.sort((a, b) => a.zIndex - b.zIndex)) as CustomElement[];
+
+      switch (type) {
+        case LayerEnum.UP: {
+          activeElements.forEach((item) => {
+            const index = elements.findIndex((element) => element.key === item.key);
+            if (item.zIndex === elements.length) return;
+            elements.splice(index, 1);
+            elements.splice(index + 1, 0, {...item});
+          });
+          elements.forEach((item, index) => { item.zIndex = index + 1});
+          elements.forEach(item => {
+            this.projectStore.updateElement(item.key, 'zIndex', item.zIndex);
+          });
+          break;
+        }
+        case LayerEnum.DOWN: {
+          activeElements.forEach((item) => {
+            const index = elements.findIndex((element) => element.key === item.key);
+            if (item.zIndex === 1) return;
+            elements.splice(index, 1);
+            elements.splice(index - 1, 0, {...item});
+          });
+          elements.forEach((item, index) => { item.zIndex = index + 1});
+          elements.forEach(item => {
+            this.projectStore.updateElement(item.key, 'zIndex', item.zIndex);
+          });
+          break;
+        }
+        case LayerEnum.TOP: {
+          activeElements.forEach((item) => {
+            const index = elements.findIndex((element) => element.key === item.key);
+            if (item.zIndex === elements.length) return;
+            elements.splice(index, 1);
+            elements.push({...item});
+          });
+          elements.forEach((item, index) => { item.zIndex = index + 1});
+          elements.forEach(item => {
+            this.projectStore.updateElement(item.key, 'zIndex', item.zIndex);
+          });
+          break;
+        }
+        case LayerEnum.BOTTOM: {
+          activeElements.forEach((item) => {
+            const index = elements.findIndex((element) => element.key === item.key);
+            if (item.zIndex === 1) return;
+            elements.splice(index, 1);
+            elements.unshift({...item});
+          });
+          elements.forEach((item, index) => { item.zIndex = index + 1});
+          elements.forEach(item => {
+            this.projectStore.updateElement(item.key, 'zIndex', item.zIndex);
+          });
+          break;
+        }
+      }  
     }
   }
 })

src/views/designer/component/MenuBar.vue

@@ -70,7 +70,7 @@
             水平居中
           </MenuItem>
           <MenuDivider />
-          <MenuItem :key="AlignEnum.VerticalCenter">
+          <MenuItem :key="AlignEnum.Top">
             <VerticalAlignTopOutlined />
             顶部对齐
           </MenuItem>
@@ -99,22 +99,30 @@
 
     <Dropdown trigger="click">
       <template #overlay>
-        <Menu>
-          <MenuItem :key="AlignEnum.Left">
+        <Menu @click="handleLayerClick" :disabled="projectStore.selectedElementKeys.length < 1">
+          <MenuItem :key="LayerEnum.UP" v-if="projectStore.selectedElementKeys.length === 1">
             <ArrowUpOutlined />
             上移一层
           </MenuItem>
-          <MenuItem :key="AlignEnum.Right">
+          <MenuItem :key="LayerEnum.DOWN" v-if="projectStore.selectedElementKeys.length === 1">
             <ArrowDownOutlined />
             下移一层
           </MenuItem>
+          <MenuItem :key="LayerEnum.TOP">
+            <VerticalAlignTopOutlined />
+            移至顶层
+          </MenuItem>
+          <MenuItem :key="LayerEnum.BOTTOM">
+            <VerticalAlignBottomOutlined />
+            移至底层
+          </MenuItem>
         </Menu>
       </template>
       <Tooltip placement="right">
         <template #title>
           <div>层级</div>
         </template>
-        <Button type="text" size="small">
+        <Button type="text" size="small" :disabled="projectStore.selectedElementKeys.length < 1">
           <ColumnHeightOutlined />
           <CaretDownOutlined style="font-size: 10px; vertical-align: baseline" />
         </Button>
@@ -153,6 +161,7 @@ import {
 } from "@ant-design/icons-vue";
 
 import { AlignEnum } from "@/enum/alignEnum";
+import { LayerEnum } from "@/enum/layerEnum";
 import { useAcionStore } from "@/store/modules/action";
 import { useProjectStore } from "@/store/modules/project";
 
@@ -162,7 +171,9 @@ const projectStore = useProjectStore();
 const handleAlignClick = ({ key }: any) => {
   actionStore.actionAlign(key);
 };
-
+const handleLayerClick = ({ key }: any) => {
+  actionStore.actionLayer(key);
+};
 </script>
 
 <style scoped></style>