@tmagic/editor 1.0.0-beta.13 → 1.0.0-beta.14

package/coverage/lcov-report/src/layouts/sidebar/LayerPanel.vue.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">34.28% </span>
+                <span class="strong">34.02% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>36/105</span>
+                <span class='fraction'>33/97</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">6.45% </span>
+                <span class="strong">7.91% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>8/124</span>
+                <span class='fraction'>11/139</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">37.5% </span>
+                <span class="strong">30.43% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>9/24</span>
+                <span class='fraction'>7/23</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">34.4% </span>
+                <span class="strong">34.11% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>32/93</span>
+                <span class='fraction'>29/85</span>
             </div>
         
             
@@ -293,33 +293,7 @@
 <a name='L228'></a><a href='#L228'>228</a>
 <a name='L229'></a><a href='#L229'>229</a>
 <a name='L230'></a><a href='#L230'>230</a>
-<a name='L231'></a><a href='#L231'>231</a>
-<a name='L232'></a><a href='#L232'>232</a>
-<a name='L233'></a><a href='#L233'>233</a>
-<a name='L234'></a><a href='#L234'>234</a>
-<a name='L235'></a><a href='#L235'>235</a>
-<a name='L236'></a><a href='#L236'>236</a>
-<a name='L237'></a><a href='#L237'>237</a>
-<a name='L238'></a><a href='#L238'>238</a>
-<a name='L239'></a><a href='#L239'>239</a>
-<a name='L240'></a><a href='#L240'>240</a>
-<a name='L241'></a><a href='#L241'>241</a>
-<a name='L242'></a><a href='#L242'>242</a>
-<a name='L243'></a><a href='#L243'>243</a>
-<a name='L244'></a><a href='#L244'>244</a>
-<a name='L245'></a><a href='#L245'>245</a>
-<a name='L246'></a><a href='#L246'>246</a>
-<a name='L247'></a><a href='#L247'>247</a>
-<a name='L248'></a><a href='#L248'>248</a>
-<a name='L249'></a><a href='#L249'>249</a>
-<a name='L250'></a><a href='#L250'>250</a>
-<a name='L251'></a><a href='#L251'>251</a>
-<a name='L252'></a><a href='#L252'>252</a>
-<a name='L253'></a><a href='#L253'>253</a>
-<a name='L254'></a><a href='#L254'>254</a>
-<a name='L255'></a><a href='#L255'>255</a>
-<a name='L256'></a><a href='#L256'>256</a>
-<a name='L257'></a><a href='#L257'>257</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L231'></a><a href='#L231'>231</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -491,8 +465,6 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -500,33 +472,25 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -536,25 +500,6 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -570,6 +515,9 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -610,8 +558,8 @@
         &lt;div
           :id="data.id"
           class="cus-tree-node"
-          @mousedown="toogleClickFlag"
-          @mouseup="toogleClickFlag"
+          @mousedown="toggleClickFlag"
+          @mouseup="toggleClickFlag"
           @mouseenter="highlightHandler(data)"
           :class="{ 'cus-tree-node-hover': canHighlight &amp;&amp; data.id === highlightNode?.id }"
         &gt;
@@ -625,13 +573,13 @@
     &lt;/el-tree&gt;
 &nbsp;
     &lt;teleport to="body"&gt;
-      &lt;layer-menu :style="menuStyle"&gt;&lt;/layer-menu&gt;
+      &lt;layer-menu ref="menu"&gt;&lt;/layer-menu&gt;
     &lt;/teleport&gt;
   &lt;/el-scrollbar&gt;
 &lt;/template&gt;
 &nbsp;
 &lt;script lang="ts"&gt;
-import { computed, defineComponent, inject, onMounted, Ref, ref, watchEffect } from 'vue';
+import { computed, defineComponent, inject, Ref, ref, watchEffect } from 'vue';
 import type { ElTree } from 'element-plus';
 import { throttle } from 'lodash-es';
 &nbsp;
@@ -746,46 +694,6 @@ const useFilter = (tree: Ref&lt;InstanceType&lt;typeof ElTree&gt; | undefined&gt
   },
 });
 &nbsp;
-const useContentMenu = (editorService?: EditorService) =&gt; {
-  const menuStyle = ref({
-    position: 'absolute',
-    left: '0',
-    top: '0',
-    display: 'none',
-  });
-&nbsp;
-  onMounted(() =&gt; {
-    document.addEventListener(
-      'click',
-<span class="fstat-no" title="function not covered" >      () =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >        menuStyle.</span>value.display = 'none';
-      },
-      true,
-    );
-  });
-&nbsp;
-  return {
-    menuStyle,
-&nbsp;
-<span class="fstat-no" title="function not covered" >    contextmenu(</span>event: MouseEvent, data: MNode) {
-      const bodyHeight = <span class="cstat-no" title="statement not covered" >globalThis.document.body.clientHeight;</span>
-&nbsp;
-      const left = <span class="cstat-no" title="statement not covered" >`${e</span>vent.clientX + 20}px`;
-      let top = <span class="cstat-no" title="statement not covered" >`${e</span>vent.clientY - 10}px`;
-&nbsp;
-<span class="cstat-no" title="statement not covered" >      <span class="missing-if-branch" title="if path not taken" >I</span>if (event.clientY + 300 &gt; bodyHeight) {</span>
-<span class="cstat-no" title="statement not covered" >        top </span>= `${bodyHeight - 300}px`;
-      }
-&nbsp;
-<span class="cstat-no" title="statement not covered" >      menuStyle.</span>value.left = left;
-<span class="cstat-no" title="statement not covered" >      menuStyle.</span>value.top = top;
-<span class="cstat-no" title="statement not covered" >      menuStyle.</span>value.display = '';
-&nbsp;
-<span class="cstat-no" title="statement not covered" >      select(</span>data, editorService);
-    },
-  };
-};
-&nbsp;
 export default defineComponent({
   name: 'magic-editor-layer-panel',
 &nbsp;
@@ -794,13 +702,14 @@ export default defineComponent({
   setup() {
     const services = inject&lt;Services&gt;('services');
     const tree = ref&lt;InstanceType&lt;typeof ElTree&gt;&gt;();
+    const menu = ref&lt;InstanceType&lt;typeof LayerMenu&gt;&gt;();
     const clicked = ref(false);
     const editorService = services<span class="branch-0 cbranch-no" title="branch not covered" >?.e</span>ditorService;
     const highlightHandler = throttle(<span class="fstat-no" title="function not covered" >(d</span>ata: MNode) =&gt; {
 <span class="cstat-no" title="statement not covered" >      highlight(</span>data, editorService);
     }, throttleTime);
 &nbsp;
-    const toogleClickFlag = <span class="fstat-no" title="function not covered" >() =&gt; {</span>
+    const toggleClickFlag = <span class="fstat-no" title="function not covered" >() =&gt; {</span>
 <span class="cstat-no" title="statement not covered" >      clicked.</span>value = !clicked.value;
     };
 &nbsp;
@@ -808,13 +717,23 @@ export default defineComponent({
     const canHighlight = computed(
 <span class="fstat-no" title="function not covered" >      () =&gt; <span class="cstat-no" title="statement not covered" >s</span>tatusData.</span>highlightNode.value?.id !== statusData.clickNode.value?.id &amp;&amp; !clicked.value,
     );
+&nbsp;
+    editorService<span class="branch-0 cbranch-no" title="branch not covered" >?.o</span>n('remove', <span class="fstat-no" title="function not covered" >() =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >      setTimeout(<span class="fstat-no" title="function not covered" ></span>() =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >        tree.</span>value?.getNode(editorService.get('node').id)?.updateChildren();
+      }, 0);
+    });
 &nbsp;
     return {
       tree,
+      menu,
       ...statusData,
       ...useDrop(tree, editorService),
       ...useFilter(tree),
-      ...useContentMenu(editorService),
+&nbsp;
+      highlightHandler,
+      toggleClickFlag,
+      canHighlight,
 &nbsp;
 <span class="fstat-no" title="function not covered" >      clickHandler(</span>data: MNode): void {
 <span class="cstat-no" title="statement not covered" >        <span class="missing-if-branch" title="if path not taken" >I</span>if (services?.uiService.get&lt;boolean&gt;('uiSelectMode')) {</span>
@@ -824,9 +743,12 @@ export default defineComponent({
 <span class="cstat-no" title="statement not covered" >        tree.</span>value?.setCurrentKey(data.id);
 <span class="cstat-no" title="statement not covered" >        select(</span>data, editorService);
       },
-      highlightHandler,
-      toogleClickFlag,
-      canHighlight,
+&nbsp;
+<span class="fstat-no" title="function not covered" >      async c</span>ontextmenu(event: MouseEvent, data: MNode) {
+<span class="cstat-no" title="statement not covered" >        event.</span>preventDefault();
+<span class="cstat-no" title="statement not covered" >        await s</span>elect(data, editorService);
+<span class="cstat-no" title="statement not covered" >        menu.</span>value?.show(event);
+      },
     };
   },
 });
@@ -838,7 +760,7 @@ export default defineComponent({
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Fri Apr 22 2022 12:15:01 GMT+0800 (China Standard Time)
+                at Sat May 07 2022 17:04:32 GMT+0800 (China Standard Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/layouts/sidebar/Sidebar.vue.html

@@ -328,7 +328,7 @@ export default defineComponent({
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Fri Apr 22 2022 12:15:01 GMT+0800 (China Standard Time)
+                at Sat May 07 2022 17:04:32 GMT+0800 (China Standard Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/layouts/sidebar/index.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">47.4% </span>
+                <span class="strong">47.45% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>73/154</span>
+                <span class='fraction'>84/177</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">23.62% </span>
+                <span class="strong">18.06% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>43/182</span>
+                <span class='fraction'>43/238</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">52.27% </span>
+                <span class="strong">43.63% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>23/44</span>
+                <span class='fraction'>24/55</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">49.63% </span>
+                <span class="strong">50.32% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>68/137</span>
+                <span class='fraction'>77/153</span>
             </div>
         
             
@@ -79,48 +79,48 @@
 </tr>
 </thead>
 <tbody><tr>
-	<td class="file medium" data-value="ComponentListPanel.vue"><a href="ComponentListPanel.vue.html">ComponentListPanel.vue</a></td>
-	<td data-value="55.55" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 55%"></div><div class="cover-empty" style="width: 45%"></div></div>
+	<td class="file low" data-value="ComponentListPanel.vue"><a href="ComponentListPanel.vue.html">ComponentListPanel.vue</a></td>
+	<td data-value="42.3" class="pic low">
+	<div class="chart"><div class="cover-fill" style="width: 42%"></div><div class="cover-empty" style="width: 58%"></div></div>
 	</td>
-	<td data-value="55.55" class="pct medium">55.55%</td>
-	<td data-value="18" class="abs medium">10/18</td>
-	<td data-value="42.85" class="pct low">42.85%</td>
-	<td data-value="14" class="abs low">6/14</td>
-	<td data-value="42.85" class="pct low">42.85%</td>
-	<td data-value="7" class="abs low">3/7</td>
-	<td data-value="71.42" class="pct medium">71.42%</td>
-	<td data-value="14" class="abs medium">10/14</td>
+	<td data-value="42.3" class="pct low">42.3%</td>
+	<td data-value="26" class="abs low">11/26</td>
+	<td data-value="35.29" class="pct low">35.29%</td>
+	<td data-value="17" class="abs low">6/17</td>
+	<td data-value="37.5" class="pct low">37.5%</td>
+	<td data-value="8" class="abs low">3/8</td>
+	<td data-value="57.89" class="pct medium">57.89%</td>
+	<td data-value="19" class="abs medium">11/19</td>
 	</tr>
 
 <tr>
-	<td class="file high" data-value="LayerMenu.vue"><a href="LayerMenu.vue.html">LayerMenu.vue</a></td>
-	<td data-value="91.66" class="pic high">
-	<div class="chart"><div class="cover-fill" style="width: 91%"></div><div class="cover-empty" style="width: 9%"></div></div>
+	<td class="file medium" data-value="LayerMenu.vue"><a href="LayerMenu.vue.html">LayerMenu.vue</a></td>
+	<td data-value="68.57" class="pic medium">
+	<div class="chart"><div class="cover-fill" style="width: 68%"></div><div class="cover-empty" style="width: 32%"></div></div>
 	</td>
-	<td data-value="91.66" class="pct high">91.66%</td>
-	<td data-value="12" class="abs high">11/12</td>
-	<td data-value="69.23" class="pct medium">69.23%</td>
-	<td data-value="26" class="abs medium">18/26</td>
-	<td data-value="85.71" class="pct high">85.71%</td>
-	<td data-value="7" class="abs high">6/7</td>
-	<td data-value="90.9" class="pct high">90.9%</td>
-	<td data-value="11" class="abs high">10/11</td>
+	<td data-value="68.57" class="pct medium">68.57%</td>
+	<td data-value="35" class="abs medium">24/35</td>
+	<td data-value="23.43" class="pct low">23.43%</td>
+	<td data-value="64" class="abs low">15/64</td>
+	<td data-value="50" class="pct medium">50%</td>
+	<td data-value="18" class="abs medium">9/18</td>
+	<td data-value="70" class="pct medium">70%</td>
+	<td data-value="30" class="abs medium">21/30</td>
 	</tr>
 
 <tr>
 	<td class="file low" data-value="LayerPanel.vue"><a href="LayerPanel.vue.html">LayerPanel.vue</a></td>
-	<td data-value="34.28" class="pic low">
+	<td data-value="34.02" class="pic low">
 	<div class="chart"><div class="cover-fill" style="width: 34%"></div><div class="cover-empty" style="width: 66%"></div></div>
 	</td>
-	<td data-value="34.28" class="pct low">34.28%</td>
-	<td data-value="105" class="abs low">36/105</td>
-	<td data-value="6.45" class="pct low">6.45%</td>
-	<td data-value="124" class="abs low">8/124</td>
-	<td data-value="37.5" class="pct low">37.5%</td>
-	<td data-value="24" class="abs low">9/24</td>
-	<td data-value="34.4" class="pct low">34.4%</td>
-	<td data-value="93" class="abs low">32/93</td>
+	<td data-value="34.02" class="pct low">34.02%</td>
+	<td data-value="97" class="abs low">33/97</td>
+	<td data-value="7.91" class="pct low">7.91%</td>
+	<td data-value="139" class="abs low">11/139</td>
+	<td data-value="30.43" class="pct low">30.43%</td>
+	<td data-value="23" class="abs low">7/23</td>
+	<td data-value="34.11" class="pct low">34.11%</td>
+	<td data-value="85" class="abs low">29/85</td>
 	</tr>
 
 <tr>
@@ -146,7 +146,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Fri Apr 22 2022 12:15:01 GMT+0800 (China Standard Time)
+                at Sat May 07 2022 17:04:32 GMT+0800 (China Standard Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/layouts/workspace/PageBar.vue.html

@@ -23,9 +23,9 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">45.71% </span>
+                <span class="strong">46.47% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>32/70</span>
+                <span class='fraction'>33/71</span>
             </div>
         
             
@@ -44,9 +44,9 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">49.18% </span>
+                <span class="strong">50% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>30/61</span>
+                <span class='fraction'>31/62</span>
             </div>
         
             
@@ -245,7 +245,50 @@
 <a name='L180'></a><a href='#L180'>180</a>
 <a name='L181'></a><a href='#L181'>181</a>
 <a name='L182'></a><a href='#L182'>182</a>
-<a name='L183'></a><a href='#L183'>183</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L183'></a><a href='#L183'>183</a>
+<a name='L184'></a><a href='#L184'>184</a>
+<a name='L185'></a><a href='#L185'>185</a>
+<a name='L186'></a><a href='#L186'>186</a>
+<a name='L187'></a><a href='#L187'>187</a>
+<a name='L188'></a><a href='#L188'>188</a>
+<a name='L189'></a><a href='#L189'>189</a>
+<a name='L190'></a><a href='#L190'>190</a>
+<a name='L191'></a><a href='#L191'>191</a>
+<a name='L192'></a><a href='#L192'>192</a>
+<a name='L193'></a><a href='#L193'>193</a>
+<a name='L194'></a><a href='#L194'>194</a>
+<a name='L195'></a><a href='#L195'>195</a>
+<a name='L196'></a><a href='#L196'>196</a>
+<a name='L197'></a><a href='#L197'>197</a>
+<a name='L198'></a><a href='#L198'>198</a>
+<a name='L199'></a><a href='#L199'>199</a>
+<a name='L200'></a><a href='#L200'>200</a>
+<a name='L201'></a><a href='#L201'>201</a>
+<a name='L202'></a><a href='#L202'>202</a>
+<a name='L203'></a><a href='#L203'>203</a>
+<a name='L204'></a><a href='#L204'>204</a>
+<a name='L205'></a><a href='#L205'>205</a>
+<a name='L206'></a><a href='#L206'>206</a>
+<a name='L207'></a><a href='#L207'>207</a>
+<a name='L208'></a><a href='#L208'>208</a>
+<a name='L209'></a><a href='#L209'>209</a>
+<a name='L210'></a><a href='#L210'>210</a>
+<a name='L211'></a><a href='#L211'>211</a>
+<a name='L212'></a><a href='#L212'>212</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -292,11 +335,23 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -397,6 +452,9 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -451,11 +509,25 @@
           &lt;/slot&gt;
         &lt;/div&gt;
 &nbsp;
-        &lt;el-popover placement="top" :width="160" trigger="hover"&gt;
+        &lt;el-popover popper-class="page-bar-popover" placement="top" :width="160" trigger="hover"&gt;
           &lt;div&gt;
             &lt;slot name="page-bar-popover" :page="item"&gt;
-              &lt;div class="magic-editor-content-menu-item" @click="() =&gt; copy(item)"&gt;复制&lt;/div&gt;
-              &lt;div class="magic-editor-content-menu-item" @click="() =&gt; remove(item)"&gt;删除&lt;/div&gt;
+              &lt;tool-button
+                :data="{
+                  type: 'button',
+                  text: '复制',
+                  icon: DocumentCopy,
+                  handler: () =&gt; copy(item),
+                }"
+              &gt;&lt;/tool-button&gt;
+              &lt;tool-button
+                :data="{
+                  type: 'button',
+                  text: '删除',
+                  icon: Delete,
+                  handler: () =&gt; remove(item),
+                }"
+              &gt;&lt;/tool-button&gt;
             &lt;/slot&gt;
           &lt;/div&gt;
           &lt;template #reference&gt;
@@ -473,12 +545,24 @@
 &lt;/template&gt;
 &nbsp;
 &lt;script lang="ts"&gt;
-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';
 &nbsp;
 import type { MApp, MPage } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
 &nbsp;
+import ToolButton from '@editor/components/ToolButton.vue';
 import type { Services } from '@editor/type';
 import { generatePageNameByApp } from '@editor/utils/editor';
 &nbsp;
@@ -567,7 +651,7 @@ const useScroll = (root: ComputedRef&lt;MApp | undefined&gt;) =&gt; {
 };
 &nbsp;
 export default defineComponent({
-  components: { ArrowLeftBold, ArrowRightBold, CaretBottom, Plus },
+  components: { ArrowLeftBold, ArrowRightBold, CaretBottom, Plus, ToolButton },
 &nbsp;
   setup() {
     const services = inject&lt;Services&gt;('services');
@@ -576,6 +660,9 @@ export default defineComponent({
     const root = computed(() =&gt; editorService<span class="branch-0 cbranch-no" title="branch not covered" >?.g</span>et&lt;MApp&gt;('root'));
 &nbsp;
     return {
+      Delete: markRaw(Delete),
+      DocumentCopy: markRaw(DocumentCopy),
+&nbsp;
       ...useScroll(root),
 &nbsp;
       root,
@@ -616,7 +703,7 @@ export default defineComponent({
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Fri Apr 22 2022 12:15:01 GMT+0800 (China Standard Time)
+                at Sat May 07 2022 17:04:32 GMT+0800 (China Standard Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>