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

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 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/Sidebar.vue.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">84.21% </span>
+                <span class="strong">88.88% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>16/19</span>
+                <span class='fraction'>8/9</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">61.11% </span>
+                <span class="strong">60% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>11/18</span>
+                <span class='fraction'>6/10</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">83.33% </span>
+                <span class="strong">75% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>5/6</span>
+                <span class='fraction'>3/4</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">84.21% </span>
+                <span class="strong">88.88% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>16/19</span>
+                <span class='fraction'>8/9</span>
             </div>
         
             
@@ -110,46 +110,7 @@
 <a name='L45'></a><a href='#L45'>45</a>
 <a name='L46'></a><a href='#L46'>46</a>
 <a name='L47'></a><a href='#L47'>47</a>
-<a name='L48'></a><a href='#L48'>48</a>
-<a name='L49'></a><a href='#L49'>49</a>
-<a name='L50'></a><a href='#L50'>50</a>
-<a name='L51'></a><a href='#L51'>51</a>
-<a name='L52'></a><a href='#L52'>52</a>
-<a name='L53'></a><a href='#L53'>53</a>
-<a name='L54'></a><a href='#L54'>54</a>
-<a name='L55'></a><a href='#L55'>55</a>
-<a name='L56'></a><a href='#L56'>56</a>
-<a name='L57'></a><a href='#L57'>57</a>
-<a name='L58'></a><a href='#L58'>58</a>
-<a name='L59'></a><a href='#L59'>59</a>
-<a name='L60'></a><a href='#L60'>60</a>
-<a name='L61'></a><a href='#L61'>61</a>
-<a name='L62'></a><a href='#L62'>62</a>
-<a name='L63'></a><a href='#L63'>63</a>
-<a name='L64'></a><a href='#L64'>64</a>
-<a name='L65'></a><a href='#L65'>65</a>
-<a name='L66'></a><a href='#L66'>66</a>
-<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>
-<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></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L48'></a><a href='#L48'>48</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>
@@ -162,21 +123,11 @@
 <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">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-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>
@@ -204,70 +155,31 @@
 <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">2x</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">2x</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>
-<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-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-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">&lt;template&gt;
-  &lt;el-tabs v-if="data.type === 'tabs'" class="m-editor-sidebar" v-model="activeTabName" type="card" tab-position="left"&gt;
-    &lt;el-tab-pane v-for="item in items" :key="item.text" :name="item.text"&gt;
-      &lt;template #label&gt;
-        &lt;span&gt;
-          &lt;m-icon v-if="item.icon" :icon="item.icon"&gt;&lt;/m-icon&gt;
-          &lt;div v-if="item.text" class="magic-editor-tab-panel-title"&gt;{{ item.text }}&lt;/div&gt;
-        &lt;/span&gt;
-      &lt;/template&gt;
-&nbsp;
-      &lt;component :is="item.component" v-bind="item.props || {}" v-on="item.listeners || {}"&gt;
-        &lt;template #layer-node-content="{ data, node }" v-if="item.slots?.layerNodeContent"&gt;
-          &lt;component :is="item.slots.layerNodeContent" :data="data" :node="node" /&gt;
-        &lt;/template&gt;
-      &lt;/component&gt;
-    &lt;/el-tab-pane&gt;
+  &lt;el-tabs
+    v-if="data.type === 'tabs' &amp;&amp; data.items.length"
+    class="m-editor-sidebar"
+    v-model="activeTabName"
+    type="card"
+    tab-position="left"
+  &gt;
+    &lt;tab-pane v-for="(item, index) in data.items" :key="index" :data="item"&gt;&lt;/tab-pane&gt;
   &lt;/el-tabs&gt;
 &lt;/template&gt;
 &nbsp;
 &lt;script lang="ts"&gt;
-import { computed, defineComponent, PropType, ref, watch } from 'vue';
-import { Coin, Files } from '@element-plus/icons';
+import { defineComponent, PropType, ref, watch } from 'vue';
 &nbsp;
-import MIcon from '@editor/components/Icon.vue';
-import { SideBarData, SideComponent } from '@editor/type';
+import { SideBarData } from '@editor/type';
 &nbsp;
-import ComponentListPanel from './ComponentListPanel.vue';
-import LayerPanel from './LayerPanel.vue';
+import TabPane from './TabPane.vue';
 &nbsp;
 export default defineComponent({
-  name: 'm-sidebar',
+  components: { TabPane },
 &nbsp;
-  components: { MIcon },
+  name: 'm-sidebar',
 &nbsp;
   props: {
     data: {
@@ -288,35 +200,6 @@ export default defineComponent({
 &nbsp;
     return {
       activeTabName,
-&nbsp;
-      items: computed&lt;SideComponent[] | Record&lt;string, any&gt;[]&gt;(() =&gt;
-        props.data<span class="branch-0 cbranch-no" title="branch not covered" >?.i</span>tems.map((item) =&gt; {
-          <span class="missing-if-branch" title="if path not taken" >I</span>if (typeof item !== 'string') {
-<span class="cstat-no" title="statement not covered" >            return i</span>tem;
-          }
-&nbsp;
-          switch (item) {
-            case 'component-list':
-              return {
-                type: 'component',
-                icon: Coin,
-                text: '组件',
-                component: ComponentListPanel,
-                slots: {},
-              };
-            case 'layer':
-              return {
-                type: 'component',
-                icon: Files,
-                text: '已选组件',
-                component: LayerPanel,
-                slots: {},
-              };
-<span class="branch-2 cbranch-no" title="branch not covered" >            default:</span>
-<span class="cstat-no" title="statement not covered" >              return {</span>};
-          }
-        }),
-      ),
     };
   },
 });
@@ -328,7 +211,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>