From d1610e5ff28b2b037264707da986aeccab562f0d Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 6 May 2022 20:41:55 +0800
Subject: [PATCH] =?UTF-8?q?style(editor):=20=E8=8F=9C=E5=8D=95=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/src/layouts/sidebar/LayerMenu.vue  |  8 +++-
 .../editor/src/layouts/workspace/PageBar.vue  | 41 ++++++++++++++++---
 packages/editor/src/theme/common/var.scss     |  1 +
 packages/editor/src/theme/content-menu.scss   |  2 +-
 packages/editor/src/theme/layer-panel.scss    |  2 +-
 packages/editor/src/theme/page-bar.scss       | 23 ++++++++++-
 6 files changed, 67 insertions(+), 10 deletions(-)

diff --git a/packages/editor/src/layouts/sidebar/LayerMenu.vue b/packages/editor/src/layouts/sidebar/LayerMenu.vue
index 4fc1823b..8a2c0ba5 100644
--- a/packages/editor/src/layouts/sidebar/LayerMenu.vue
+++ b/packages/editor/src/layouts/sidebar/LayerMenu.vue
@@ -3,7 +3,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, ref } from 'vue';
+import { computed, defineComponent, inject, markRaw, ref } from 'vue';
+import { Delete, DocumentCopy, Files, Plus } from '@element-plus/icons';
 
 import { NodeType } from '@tmagic/schema';
 
@@ -25,6 +26,7 @@ export default defineComponent({
       group.items.map((component) => ({
         text: component.text,
         type: 'button',
+        icon: component.icon,
         handler: () => {
           services?.editorService.add({
             name: component.text,
@@ -40,6 +42,7 @@ export default defineComponent({
           {
             text: '标签页',
             type: 'button',
+            icon: Files,
             handler: () => {
               services?.editorService.add({
                 type: 'tab-pane',
@@ -76,12 +79,14 @@ export default defineComponent({
         {
           type: 'button',
           text: '新增',
+          icon: markRaw(Plus),
           display: () => node.value?.items,
           items: getSubMenuData.value,
         },
         {
           type: 'button',
           text: '复制',
+          icon: markRaw(DocumentCopy),
           display: () => !isRoot.value,
           handler: () => {
             node.value && services?.editorService.copy(node.value);
@@ -90,6 +95,7 @@ export default defineComponent({
         {
           type: 'button',
           text: '删除',
+          icon: markRaw(Delete),
           display: () => !isRoot.value && !isPage.value,
           handler: () => {
             node.value && services?.editorService.remove(node.value);
diff --git a/packages/editor/src/layouts/workspace/PageBar.vue b/packages/editor/src/layouts/workspace/PageBar.vue
index 30cb723d..5b33c4d1 100644
--- a/packages/editor/src/layouts/workspace/PageBar.vue
+++ b/packages/editor/src/layouts/workspace/PageBar.vue
@@ -22,11 +22,25 @@
           </slot>
         </div>
 
-        <el-popover placement="top" :width="160" trigger="hover">
+        <el-popover popper-class="page-bar-popover" placement="top" :width="160" trigger="hover">
           <div>
             <slot name="page-bar-popover" :page="item">
-              <div class="magic-editor-content-menu-item" @click="() => copy(item)">复制</div>
-              <div class="magic-editor-content-menu-item" @click="() => remove(item)">删除</div>
+              <tool-button
+                :data="{
+                  type: 'button',
+                  text: '复制',
+                  icon: DocumentCopy,
+                  handler: () => copy(item),
+                }"
+              ></tool-button>
+              <tool-button
+                :data="{
+                  type: 'button',
+                  text: '删除',
+                  icon: Delete,
+                  handler: () => remove(item),
+                }"
+              ></tool-button>
             </slot>
           </div>
           <template #reference>
@@ -44,12 +58,24 @@
 </template>
 
 <script lang="ts">
-import { computed, ComputedRef, defineComponent, inject, onMounted, onUnmounted, ref, toRaw, watch } from 'vue';
-import { ArrowLeftBold, ArrowRightBold, CaretBottom, Plus } from '@element-plus/icons';
+import {
+  computed,
+  ComputedRef,
+  defineComponent,
+  inject,
+  markRaw,
+  onMounted,
+  onUnmounted,
+  ref,
+  toRaw,
+  watch,
+} from 'vue';
+import { ArrowLeftBold, ArrowRightBold, CaretBottom, Delete, DocumentCopy, Plus } from '@element-plus/icons';
 
 import type { MApp, MPage } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
 
+import ToolButton from '@editor/components/ToolButton.vue';
 import type { Services } from '@editor/type';
 import { generatePageNameByApp } from '@editor/utils/editor';
 
@@ -138,7 +164,7 @@ const useScroll = (root: ComputedRef<MApp | undefined>) => {
 };
 
 export default defineComponent({
-  components: { ArrowLeftBold, ArrowRightBold, CaretBottom, Plus },
+  components: { ArrowLeftBold, ArrowRightBold, CaretBottom, Plus, ToolButton },
 
   setup() {
     const services = inject<Services>('services');
@@ -147,6 +173,9 @@ export default defineComponent({
     const root = computed(() => editorService?.get<MApp>('root'));
 
     return {
+      Delete: markRaw(Delete),
+      DocumentCopy: markRaw(DocumentCopy),
+
       ...useScroll(root),
 
       root,
diff --git a/packages/editor/src/theme/common/var.scss b/packages/editor/src/theme/common/var.scss
index 6ec7b843..a9b0240c 100644
--- a/packages/editor/src/theme/common/var.scss
+++ b/packages/editor/src/theme/common/var.scss
@@ -2,6 +2,7 @@ $--theme-color: #2882e0;
 
 $--font-color: #070303;
 $--border-color: #d9dbdd;
+$--hover-color: #f3f5f9;
 
 $--nav-height: 35px;
 $--nav-color: #070303;
diff --git a/packages/editor/src/theme/content-menu.scss b/packages/editor/src/theme/content-menu.scss
index 368d7111..92d24753 100644
--- a/packages/editor/src/theme/content-menu.scss
+++ b/packages/editor/src/theme/content-menu.scss
@@ -40,7 +40,7 @@
     }
 
     &:hover {
-      background-color: #f3f5f9;
+      background-color: $--hover-color;
     }
   }
 }
diff --git a/packages/editor/src/theme/layer-panel.scss b/packages/editor/src/theme/layer-panel.scss
index 26903ec7..5b7a21be 100644
--- a/packages/editor/src/theme/layer-panel.scss
+++ b/packages/editor/src/theme/layer-panel.scss
@@ -56,7 +56,7 @@
 }
 
 .magic-editor-layer-panel .cus-tree-node-hover {
-  background-color: #f3f5f9;
+  background-color: $--hover-color;
   width: 100%;
 }
 
diff --git a/packages/editor/src/theme/page-bar.scss b/packages/editor/src/theme/page-bar.scss
index 75567c90..01d0173c 100644
--- a/packages/editor/src/theme/page-bar.scss
+++ b/packages/editor/src/theme/page-bar.scss
@@ -40,7 +40,7 @@
       z-index: 1;
     }
 
-    .m-editor-page-bar-title {
+    &-title {
       max-width: 150px;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -48,3 +48,24 @@
     }
   }
 }
+
+.page-bar-popover {
+  &.el-popper.el-popover {
+    padding: 10px 0;
+  }
+
+  .menu-item {
+    cursor: pointer;
+    transition: all 0.2s ease 0s;
+    padding: 5px 14px;
+
+    .el-button--text,
+    i {
+      color: $--font-color;
+    }
+
+    &:hover {
+      background-color: $--hover-color;
+    }
+  }
+}