diff --git a/frontend/src/components/canvas/store/layer.js b/frontend/src/components/canvas/store/layer.js
index a5554be878..6bbb56eb4f 100644
--- a/frontend/src/components/canvas/store/layer.js
+++ b/frontend/src/components/canvas/store/layer.js
@@ -1,4 +1,4 @@
-import { swap } from '@/components/canvas/utils/utils'
+import { swap, toBottom, toTop, moveUp, moveDown } from '@/components/canvas/utils/utils'
 import toast from '@/components/canvas/utils/toast'
 
 export default {
@@ -6,7 +6,7 @@ export default {
     upComponent({ componentData, curComponentIndex }) {
       // 上移图层 index，表示元素在数组中越往后
       if (curComponentIndex < componentData.length - 1) {
-        swap(componentData, curComponentIndex, curComponentIndex + 1)
+        moveUp(componentData, curComponentIndex)
       } else {
         toast('已经到顶了')
       }
@@ -15,7 +15,7 @@ export default {
     downComponent({ componentData, curComponentIndex }) {
       // 下移图层 index，表示元素在数组中越往前
       if (curComponentIndex > 0) {
-        swap(componentData, curComponentIndex, curComponentIndex - 1)
+        moveDown(componentData, curComponentIndex)
       } else {
         toast('已经到底了')
       }
@@ -24,7 +24,7 @@ export default {
     topComponent({ componentData, curComponentIndex }) {
       // 置顶
       if (curComponentIndex < componentData.length - 1) {
-        swap(componentData, curComponentIndex, componentData.length - 1)
+        toTop(componentData, curComponentIndex)
       } else {
         toast('已经到顶了')
       }
@@ -33,7 +33,7 @@ export default {
     bottomComponent({ componentData, curComponentIndex }) {
       // 置底
       if (curComponentIndex > 0) {
-        swap(componentData, curComponentIndex, 0)
+        toBottom(componentData, curComponentIndex)
       } else {
         toast('已经到底了')
       }
diff --git a/frontend/src/components/canvas/utils/utils.js b/frontend/src/components/canvas/utils/utils.js
index cdce9342c3..fdd236650b 100644
--- a/frontend/src/components/canvas/utils/utils.js
+++ b/frontend/src/components/canvas/utils/utils.js
@@ -16,11 +16,28 @@ export function deepCopy(target) {
 }
 
 export function swap(arr, i, j) {
+  console.log('before:' + i + '-->' + j + JSON.stringify(arr))
   const temp = arr[i]
   arr[i] = arr[j]
   arr[j] = temp
+  console.log('after:' + JSON.stringify(arr))
 }
 
+export function moveUp(arr, i) {
+  arr.splice(i + 1, 0, arr.splice(i, 1)[0])
+}
+
+export function moveDown(arr, i) {
+  arr.splice(i, 0, arr.splice(i - 1, 1)[0])
+}
+
+export function toTop(arr, i, j) {
+  arr.push(arr.splice(i, 1)[0])
+}
+
+export function toBottom(arr, i) {
+  arr.unshift(arr.splice(i, 1)[0])
+ }
 export function $(selector) {
   return document.querySelector(selector)
 }