From 85ce0238453fa923fec860536dcc2dee0d40aac0 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Sat, 5 Jun 2021 14:01:18 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Editor/Toolbar/ElementPositionPanel.vue   | 29 +++++++++++--------
 src/views/Editor/Toolbar/index.vue            |  1 +
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/views/Editor/Toolbar/ElementPositionPanel.vue b/src/views/Editor/Toolbar/ElementPositionPanel.vue
index 0bb39871..66e0b9a5 100644
--- a/src/views/Editor/Toolbar/ElementPositionPanel.vue
+++ b/src/views/Editor/Toolbar/ElementPositionPanel.vue
@@ -1,19 +1,18 @@
 <template>
   <div class="element-positopn-panel">
+    <div class="title">层级：</div>
     <ButtonGroup class="row">
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="置顶层">
-        <Button style="flex: 1;" @click="orderElement(handleElement, 'top')"><IconSendToBack /></Button>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="置底层">
-        <Button style="flex: 1;" @click="orderElement(handleElement, 'bottom')"><IconBringToFrontOne /></Button>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="上移一层">
-        <Button style="flex: 1;" @click="orderElement(handleElement, 'up')"><IconBringToFront /></Button>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="下移一层">
-        <Button style="flex: 1;" @click="orderElement(handleElement, 'down')"><IconSentToBack /></Button>
-      </Tooltip>
+      <Button style="flex: 1;" @click="orderElement(handleElement, 'top')"><IconSendToBack class="btn-icon" /> 置于顶层</Button>
+      <Button style="flex: 1;" @click="orderElement(handleElement, 'bottom')"><IconBringToFrontOne class="btn-icon" /> 置于底层</Button>
     </ButtonGroup>
+    <ButtonGroup class="row">
+      <Button style="flex: 1;" @click="orderElement(handleElement, 'up')"><IconBringToFront class="btn-icon" /> 上移一层</Button>
+      <Button style="flex: 1;" @click="orderElement(handleElement, 'down')"><IconSentToBack class="btn-icon" /> 下移一层</Button>
+    </ButtonGroup>
+
+    <Divider />
+    
+    <div class="title">对齐：</div>
     <ButtonGroup class="row">
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="左对齐">
         <Button style="flex: 1;" @click="alignElementToCanvas('left')"><IconAlignLeft /></Button>
@@ -260,9 +259,15 @@ export default defineComponent({
   align-items: center;
   margin-bottom: 10px;
 }
+.title {
+  margin-bottom: 10px;
+}
 .label {
   text-align: center;
 }
+.btn-icon {
+  margin-right: 3px;
+}
 .icon-btn {
   cursor: pointer;
 }
diff --git a/src/views/Editor/Toolbar/index.vue b/src/views/Editor/Toolbar/index.vue
index 5b66e95c..191d1308 100644
--- a/src/views/Editor/Toolbar/index.vue
+++ b/src/views/Editor/Toolbar/index.vue
@@ -100,6 +100,7 @@ export default defineComponent({
   font-size: 12px;
   flex-shrink: 0;
   display: flex;
+  user-select: none;
 }
 .tab {
   flex: 1;