feat(editor,ui): 新增显示隐藏组件功能

re #516

packages/editor/src/layouts/sidebar/LayerNode.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    {{ `${data.name} (${data.id})` }}
+  </div>
+  <div class="layer-node-tool">
+    <template v-if="data.type !== 'page'">
+      <el-icon v-if="data.visible === false" @click.stop="setNodeVisible(true)" title="点击显示">
+        <Hide />
+      </el-icon>
+      <el-icon v-else @click.stop="setNodeVisible(false)" class="node-lock" title="点击隐藏">
+        <View />
+      </el-icon>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { inject } from 'vue';
+import { Hide, View } from '@element-plus/icons-vue';
+
+import { MNode } from '@tmagic/schema';
+
+import { Services } from '@editor/type';
+
+const props = defineProps<{
+  data: MNode;
+}>();
+
+const services = inject<Services>('services');
+const editorService = services?.editorService;
+
+const setNodeVisible = (visible: boolean) => {
+  if (!editorService) return;
+
+  editorService.update({
+    id: props.data.id,
+    visible,
+  });
+};
+</script>

packages/editor/src/layouts/sidebar/LayerPanel.vue

@@ -35,9 +35,7 @@
       <template #default="{ node, data }">
         <div class="cus-tree-node" :id="data.id" @mouseenter="highlightHandler(data)">
           <slot name="layer-node-content" :node="node" :data="data">
-            <span>
+            <LayerNode :data="data"></LayerNode>
-              {{ `${data.name} (${data.id})` }}
-            </span>
           </slot>
         </div>
       </template>
@@ -63,6 +61,7 @@ import type { MenuButton, MenuComponent, Services } from '@editor/type';
 import { Layout } from '@editor/type';
 
 import LayerMenu from './LayerMenu.vue';
+import LayerNode from './LayerNode.vue';
 
 defineOptions({
   name: 'MEditorLayerPanel',

packages/editor/src/theme/layer-panel.scss

@@ -44,6 +44,12 @@
 .magic-editor-layer-panel .cus-tree-node {
   width: 100%;
   overflow: hidden;
+  display: flex;
+  justify-content: space-between;
+
+  .layer-node-tool {
+    margin-right: 15px;
+  }
 }
 
 .magic-editor-layer-panel .cus-tree-node-hover {

packages/ui-react/src/container/Container.tsx

@@ -45,6 +45,8 @@ const Container: React.FC<ContainerProps> = ({ config, id }) => {
 
         if (!MagicUiComp) return null;
 
+        if (item.visible === false) return null;
+
         return (
           <MagicUiComp
             id={`${item.id || ''}`}

packages/ui-react/src/page/Page.tsx

@@ -49,6 +49,8 @@ const Page: React.FC<PageProps> = ({ config }) => {
 
         if (!MagicUiComp) return null;
 
+        if (item.visible === false) return null;
+
         return (
           <MagicUiComp
             id={`${item.id || ''}`}

packages/ui-vue2/src/Component.vue

@@ -35,6 +35,8 @@ export default defineComponent({
       style: computed(() => app?.transformStyle(props.config.style || {})),
 
       display: () => {
+        if (props.config.visible === false) return false;
+
         const displayCfg = props.config?.display;
 
         if (typeof displayCfg === 'function') {

packages/ui/src/Component.vue

@@ -33,6 +33,8 @@ const tagName = computed(() => `magic-ui-${toLine(props.config.type)}`);
 const style = computed(() => app?.transformStyle(props.config.style));
 
 const display = () => {
+  if (props.config.visible === false) return false;
+
   const displayCfg = props.config?.display;
 
   if (typeof displayCfg === 'function') {