style(editor): 菜单样式优化

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);

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,

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;

packages/editor/src/theme/content-menu.scss

@@ -40,7 +40,7 @@
     }
 
     &:hover {
-      background-color: #f3f5f9;
+      background-color: $--hover-color;
     }
   }
 }

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%;
 }
 

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;
+    }
+  }
+}