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

package/coverage/lcov-report/src/layouts/Resizer.vue.html

@@ -253,7 +253,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 Fri May 13 2022 20:42:37 GMT+0800 (China Standard Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>

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

@@ -23,23 +23,23 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">63.21% </span>
+                <span class="strong">62.92% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>55/87</span>
+                <span class='fraction'>56/89</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">36.61% </span>
+                <span class="strong">30.43% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>26/71</span>
+                <span class='fraction'>21/69</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">66.66% </span>
+                <span class="strong">61.9% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>14/21</span>
+                <span class='fraction'>13/21</span>
             </div>
         
             
@@ -95,15 +95,15 @@
 
 <tr>
 	<td class="file medium" data-value="Framework.vue"><a href="Framework.vue.html">Framework.vue</a></td>
-	<td data-value="78.57" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 78%"></div><div class="cover-empty" style="width: 22%"></div></div>
+	<td data-value="75" class="pic medium">
+	<div class="chart"><div class="cover-fill" style="width: 75%"></div><div class="cover-empty" style="width: 25%"></div></div>
 	</td>
-	<td data-value="78.57" class="pct medium">78.57%</td>
-	<td data-value="14" class="abs medium">11/14</td>
-	<td data-value="61.53" class="pct medium">61.53%</td>
-	<td data-value="26" class="abs medium">16/26</td>
-	<td data-value="83.33" class="pct high">83.33%</td>
-	<td data-value="6" class="abs high">5/6</td>
+	<td data-value="75" class="pct medium">75%</td>
+	<td data-value="16" class="abs medium">12/16</td>
+	<td data-value="45.83" class="pct low">45.83%</td>
+	<td data-value="24" class="abs low">11/24</td>
+	<td data-value="66.66" class="pct medium">66.66%</td>
+	<td data-value="6" class="abs medium">4/6</td>
 	<td data-value="76.92" class="pct medium">76.92%</td>
 	<td data-value="13" class="abs medium">10/13</td>
 	</tr>
@@ -161,7 +161,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 Fri May 13 2022 20:42:37 GMT+0800 (China Standard Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>

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

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">55.55% </span>
+                <span class="strong">42.3% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>10/18</span>
+                <span class='fraction'>11/26</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">42.85% </span>
+                <span class="strong">35.29% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>6/14</span>
+                <span class='fraction'>6/17</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">42.85% </span>
+                <span class="strong">37.5% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>3/7</span>
+                <span class='fraction'>3/8</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">71.42% </span>
+                <span class="strong">57.89% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>10/14</span>
+                <span class='fraction'>11/19</span>
             </div>
         
             
@@ -61,7 +61,7 @@
             </div>
         </template>
     </div>
-    <div class='status-line medium'></div>
+    <div class='status-line low'></div>
     <pre><table class="coverage">
 <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
 <a name='L2'></a><a href='#L2'>2</a>
@@ -132,7 +132,36 @@
 <a name='L67'></a><a href='#L67'>67</a>
 <a name='L68'></a><a href='#L68'>68</a>
 <a name='L69'></a><a href='#L69'>69</a>
-<a name='L70'></a><a href='#L70'>70</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L70'></a><a href='#L70'>70</a>
+<a name='L71'></a><a href='#L71'>71</a>
+<a name='L72'></a><a href='#L72'>72</a>
+<a name='L73'></a><a href='#L73'>73</a>
+<a name='L74'></a><a href='#L74'>74</a>
+<a name='L75'></a><a href='#L75'>75</a>
+<a name='L76'></a><a href='#L76'>76</a>
+<a name='L77'></a><a href='#L77'>77</a>
+<a name='L78'></a><a href='#L78'>78</a>
+<a name='L79'></a><a href='#L79'>79</a>
+<a name='L80'></a><a href='#L80'>80</a>
+<a name='L81'></a><a href='#L81'>81</a>
+<a name='L82'></a><a href='#L82'>82</a>
+<a name='L83'></a><a href='#L83'>83</a>
+<a name='L84'></a><a href='#L84'>84</a>
+<a name='L85'></a><a href='#L85'>85</a>
+<a name='L86'></a><a href='#L86'>86</a>
+<a name='L87'></a><a href='#L87'>87</a>
+<a name='L88'></a><a href='#L88'>88</a>
+<a name='L89'></a><a href='#L89'>89</a>
+<a name='L90'></a><a href='#L90'>90</a>
+<a name='L91'></a><a href='#L91'>91</a>
+<a name='L92'></a><a href='#L92'>92</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>
@@ -161,6 +190,7 @@
 <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-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -198,6 +228,20 @@
 <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-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-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>
@@ -215,7 +259,14 @@
       &lt;template v-for="(group, index) in list"&gt;
         &lt;el-collapse-item v-if="group.items &amp;&amp; group.items.length" :key="index" :name="index"&gt;
           &lt;template #title&gt;&lt;i class="el-icon-s-grid"&gt;&lt;/i&gt;{{ group.title }}&lt;/template&gt;
-          &lt;div class="component-item" v-for="item in group.items" :key="item.type" @click="appendComponent(item)"&gt;
+          &lt;div
+            class="component-item"
+            v-for="item in group.items"
+            draggable="true"
+            :key="item.type"
+            @click="appendComponent(item)"
+            @dragstart="dragstartHandler(item, $event)"
+          &gt;
             &lt;m-icon :icon="item.icon"&gt;&lt;/m-icon&gt;
 &nbsp;
             &lt;el-tooltip effect="dark" placement="bottom" :content="item.text"&gt;
@@ -230,6 +281,7 @@
 &nbsp;
 &lt;script lang="ts"&gt;
 import { computed, defineComponent, inject, ref } from 'vue';
+import serialize from 'serialize-javascript';
 &nbsp;
 import MIcon from '@editor/components/Icon.vue';
 import type { ComponentGroup, ComponentItem, Services } from '@editor/type';
@@ -266,6 +318,20 @@ export default defineComponent({
           ...data,
         });
       },
+&nbsp;
+<span class="fstat-no" title="function not covered" >      dragstartHandler(</span>{ text<span class="cstat-no" title="statement not covered" >, t</span>ype<span class="cstat-no" title="statement not covered" >, <span class="cstat-no" title="statement not covered" >d</span>ata<span class="cstat-no" title="statement not covered" > </span>= {} }: ComponentItem, e</span>: DragEvent) {
+<span class="cstat-no" title="statement not covered" >        <span class="missing-if-branch" title="if path not taken" >I</span>if (e.dataTransfer) {</span>
+<span class="cstat-no" title="statement not covered" >          e.</span>dataTransfer.effectAllowed = 'move';
+<span class="cstat-no" title="statement not covered" >          e.</span>dataTransfer.setData(
+            'data',
+            serialize({
+              name: text,
+              type,
+              ...data,
+            }).replace(/"(\w+)":\s/g, '$1: '),
+          );
+        }
+      },
     };
   },
 });
@@ -277,7 +343,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 Fri May 13 2022 20:42:37 GMT+0800 (China Standard Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">91.66% </span>
+                <span class="strong">68.57% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>11/12</span>
+                <span class='fraction'>24/35</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">69.23% </span>
+                <span class="strong">23.43% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>18/26</span>
+                <span class='fraction'>15/64</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">85.71% </span>
+                <span class="strong">50% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>6/7</span>
+                <span class='fraction'>9/18</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">90.9% </span>
+                <span class="strong">70% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>10/11</span>
+                <span class='fraction'>21/30</span>
             </div>
         
             
@@ -61,7 +61,7 @@
             </div>
         </template>
     </div>
-    <div class='status-line high'></div>
+    <div class='status-line medium'></div>
     <pre><table class="coverage">
 <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
 <a name='L2'></a><a href='#L2'>2</a>
@@ -156,23 +156,56 @@
 <a name='L91'></a><a href='#L91'>91</a>
 <a name='L92'></a><a href='#L92'>92</a>
 <a name='L93'></a><a href='#L93'>93</a>
-<a name='L94'></a><a href='#L94'>94</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L94'></a><a href='#L94'>94</a>
+<a name='L95'></a><a href='#L95'>95</a>
+<a name='L96'></a><a href='#L96'>96</a>
+<a name='L97'></a><a href='#L97'>97</a>
+<a name='L98'></a><a href='#L98'>98</a>
+<a name='L99'></a><a href='#L99'>99</a>
+<a name='L100'></a><a href='#L100'>100</a>
+<a name='L101'></a><a href='#L101'>101</a>
+<a name='L102'></a><a href='#L102'>102</a>
+<a name='L103'></a><a href='#L103'>103</a>
+<a name='L104'></a><a href='#L104'>104</a>
+<a name='L105'></a><a href='#L105'>105</a>
+<a name='L106'></a><a href='#L106'>106</a>
+<a name='L107'></a><a href='#L107'>107</a>
+<a name='L108'></a><a href='#L108'>108</a>
+<a name='L109'></a><a href='#L109'>109</a>
+<a name='L110'></a><a href='#L110'>110</a>
+<a name='L111'></a><a href='#L111'>111</a>
+<a name='L112'></a><a href='#L112'>112</a>
+<a name='L113'></a><a href='#L113'>113</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-yes">1x</span>
+<span class="cline-any cline-yes">1x</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-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-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-yes">1x</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-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-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -180,19 +213,26 @@
 <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-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-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-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-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>
@@ -205,30 +245,28 @@
 <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">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-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">2x</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-yes">5x</span>
-<span class="cline-any cline-yes">5x</span>
-<span class="cline-any cline-yes">5x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">5x</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>
-<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-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>
@@ -237,106 +275,125 @@
 <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-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-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-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">&lt;template&gt;
-  &lt;div v-if="node" class="magic-editor-content-menu"&gt;
-    &lt;div
-      v-if="node.items"
-      class="magic-editor-content-menu-item"
-      @mouseenter="setSubVisitable(true)"
-      @mouseleave="setSubVisitable(false)"
-    &gt;
-      新增
-    &lt;/div&gt;
-    &lt;div v-if="node.type !== 'app'" class="magic-editor-content-menu-item" @click="() =&gt; copy(node)"&gt;复制&lt;/div&gt;
-    &lt;div
-      v-if="node.type !== 'app' &amp;&amp; node.type !== 'page'"
-      class="magic-editor-content-menu-item"
-      @click="() =&gt; remove()"
-    &gt;
-      删除
-    &lt;/div&gt;
-    &lt;div class="subMenu" v-show="subVisible" @mouseenter="setSubVisitable(true)" @mouseleave="setSubVisitable(false)"&gt;
-      &lt;el-scrollbar&gt;
-        &lt;template v-if="node.type === 'tabs'"&gt;
-          &lt;div
-            class="magic-editor-content-menu-item"
-            @click="
-              () =&gt;
-                append({
-                  type: 'tab-pane',
-                })
-            "
-          &gt;
-            标签
-          &lt;/div&gt;
-        &lt;/template&gt;
-        &lt;template v-else-if="node.items"&gt;
-          &lt;div v-for="list in componentGroupList" :key="list.title"&gt;
-            &lt;template v-for="item in list.items"&gt;
-              &lt;div class="magic-editor-content-menu-item" v-if="item" :key="item.type" @click="() =&gt; append(item)"&gt;
-                {{ item.text }}
-              &lt;/div&gt;
-            &lt;/template&gt;
-            &lt;div class="separation"&gt;&lt;/div&gt;
-          &lt;/div&gt;
-        &lt;/template&gt;
-      &lt;/el-scrollbar&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
+  &lt;content-menu :menu-data="menuData" ref="menu" style="overflow: initial"&gt;&lt;/content-menu&gt;
 &lt;/template&gt;
 &nbsp;
 &lt;script lang="ts"&gt;
-import { computed, defineComponent, inject, ref } from 'vue';
+import { computed, defineComponent, inject, markRaw, ref } from 'vue';
+import { Delete, DocumentCopy, Files, Plus } from '@element-plus/icons';
 &nbsp;
-import type { MNode } from '@tmagic/schema';
+import { NodeType } from '@tmagic/schema';
 &nbsp;
-import type { AddMNode, Services } from '@editor/type';
+import ContentMenu from '@editor/components/ContentMenu.vue';
+import type { ComponentGroup, MenuButton, MenuItem, Services } from '@editor/type';
 &nbsp;
 export default defineComponent({
-  name: 'magic-editor-content-menu',
+  components: { ContentMenu },
 &nbsp;
   setup() {
     const services = inject&lt;Services&gt;('services');
-    const subVisible = ref(false);
+    const menu = ref&lt;InstanceType&lt;typeof ContentMenu&gt;&gt;();
     const node = computed(() =&gt; services<span class="branch-0 cbranch-no" title="branch not covered" >?.e</span>ditorService.get('node'));
+    const isRoot = computed(() =&gt; node.value<span class="branch-1 cbranch-no" title="branch not covered" ><span class="branch-1 cbranch-no" title="branch not covered" >?.t</span>ype === N</span>odeType.ROOT);
+    const isPage = computed(() =&gt; node.value<span class="branch-1 cbranch-no" title="branch not covered" ><span class="branch-1 cbranch-no" title="branch not covered" >?.t</span>ype === N</span>odeType.PAGE);
+    const componentList = computed(<span class="fstat-no" title="function not covered" >() =&gt; <span class="cstat-no" title="statement not covered" >s</span>ervices?</span>.componentListService.getList() || []);
 &nbsp;
-    return {
-      subVisible,
-&nbsp;
-      node,
+    const createMenuItems = <span class="fstat-no" title="function not covered" >(g</span>roup: ComponentGroup): MenuButton[] =&gt;
+<span class="cstat-no" title="statement not covered" >      group.</span>items.map(<span class="fstat-no" title="function not covered" >(c</span>omponent) =&gt; <span class="cstat-no" title="statement not covered" >({</span>
+        text: component.text,
+        type: 'button',
+        icon: component.icon,
+        handler: <span class="fstat-no" title="function not covered" >() =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >          services?</span>.editorService.add({
+            name: component.text,
+            type: component.type,
+            ...(component.data || {}),
+          });
+        },
+      }));
 &nbsp;
-      componentGroupList: computed(<span class="fstat-no" title="function not covered" >() =&gt; <span class="cstat-no" title="statement not covered" >s</span>ervices?</span>.componentListService.getList()),
-&nbsp;
-      append(config: AddMNode) {
-        services<span class="branch-0 cbranch-no" title="branch not covered" >?.e</span>ditorService.add({
-          name: config.text,
-          type: config.type,
-          ...(config.data || {}),
-        });
-      },
+    const getSubMenuData = computed&lt;MenuButton[]&gt;(() =&gt; {
+      <span class="missing-if-branch" title="if path not taken" >I</span>if (node.value<span class="branch-1 cbranch-no" title="branch not covered" ><span class="branch-1 cbranch-no" title="branch not covered" >?.t</span>ype === '</span>tabs') {
+<span class="cstat-no" title="statement not covered" >        return [</span>
+          {
+            text: '标签页',
+            type: 'button',
+            icon: Files,
+            handler: <span class="fstat-no" title="function not covered" >() =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >              services?</span>.editorService.add({
+                type: 'tab-pane',
+              });
+            },
+          },
+        ];
+      }
+      <span class="missing-if-branch" title="if path not taken" >I</span>if (node.value<span class="branch-1 cbranch-no" title="branch not covered" ><span class="branch-1 cbranch-no" title="branch not covered" >?.i</span>tems) {</span>
+<span class="cstat-no" title="statement not covered" >        return (</span>
+          componentList.value.reduce(
+<span class="fstat-no" title="function not covered" >            (s</span>ubMenuData: MenuButton[], group: ComponentGroup, index) =&gt;
+<span class="cstat-no" title="statement not covered" >              subMenuData.</span>concat(
+                createMenuItems(group),
+                index &lt; componentList.value.length - 1
+                  ? [
+                      {
+                        type: 'divider',
+                        direction: 'horizontal',
+                      },
+                    ]
+                  : [],
+              ),
+            [],
+          ) || []
+        );
+      }
+      return [];
+    });
 &nbsp;
-      remove() {
-        node.value &amp;&amp; services<span class="branch-0 cbranch-no" title="branch not covered" >?.e</span>ditorService.remove(node.value);
-      },
-&nbsp;
-      copy(node?: MNode) {
-        node &amp;&amp; services<span class="branch-0 cbranch-no" title="branch not covered" >?.e</span>ditorService.copy(node);
-      },
+    return {
+      menu,
+      menuData: computed&lt;MenuItem[]&gt;(() =&gt; [
+        {
+          type: 'button',
+          text: '新增',
+          icon: markRaw(Plus),
+          display: () =&gt; node.value<span class="branch-1 cbranch-no" title="branch not covered" ><span class="branch-1 cbranch-no" title="branch not covered" >?.i</span>tems,</span>
+          items: getSubMenuData.value,
+        },
+        {
+          type: 'button',
+          text: '复制',
+          icon: markRaw(DocumentCopy),
+          display: () =&gt; !isRoot.value,
+          handler: <span class="fstat-no" title="function not covered" >() =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >            node.</span>value &amp;&amp; services?.editorService.copy(node.value);
+          },
+        },
+        {
+          type: 'button',
+          text: '删除',
+          icon: markRaw(Delete),
+          display: () =&gt; !isRoot.value &amp;&amp; !isPage.value,
+          handler: <span class="fstat-no" title="function not covered" >() =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >            node.</span>value &amp;&amp; services?.editorService.remove(node.value);
+          },
+        },
+      ]),
 &nbsp;
-      setSubVisitable(v: boolean) {
-        subVisible.value = v;
+<span class="fstat-no" title="function not covered" >      show(</span>e: MouseEvent) {
+<span class="cstat-no" title="statement not covered" >        menu.</span>value?.show(e);
       },
     };
   },
@@ -349,7 +406,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 Fri May 13 2022 20:42:37 GMT+0800 (China Standard Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>