From 42b043670e7fbb0cf293faadb5f2a8cb24a7dfa5 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 30 Jun 2023 19:43:46 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor,ui):=20=E6=96=B0=E5=A2=9E=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E9=9A=90=E8=97=8F=E7=BB=84=E4=BB=B6=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

re #516
---
 .../editor/src/layouts/sidebar/LayerNode.vue  | 40 +++++++++++++++++++
 .../editor/src/layouts/sidebar/LayerPanel.vue |  5 +--
 packages/editor/src/theme/layer-panel.scss    |  6 +++
 packages/ui-react/src/container/Container.tsx |  2 +
 packages/ui-react/src/page/Page.tsx           |  2 +
 packages/ui-vue2/src/Component.vue            |  2 +
 packages/ui/src/Component.vue                 |  2 +
 7 files changed, 56 insertions(+), 3 deletions(-)
 create mode 100644 packages/editor/src/layouts/sidebar/LayerNode.vue

diff --git a/packages/editor/src/layouts/sidebar/LayerNode.vue b/packages/editor/src/layouts/sidebar/LayerNode.vue
new file mode 100644
index 00000000..790e8d16
--- /dev/null
+++ b/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>
diff --git a/packages/editor/src/layouts/sidebar/LayerPanel.vue b/packages/editor/src/layouts/sidebar/LayerPanel.vue
index b1feaf79..ea8676ea 100644
--- a/packages/editor/src/layouts/sidebar/LayerPanel.vue
+++ b/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>
-              {{ `${data.name} (${data.id})` }}
-            </span>
+            <LayerNode :data="data"></LayerNode>
           </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',
diff --git a/packages/editor/src/theme/layer-panel.scss b/packages/editor/src/theme/layer-panel.scss
index 8b188c3e..8173b031 100644
--- a/packages/editor/src/theme/layer-panel.scss
+++ b/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 {
diff --git a/packages/ui-react/src/container/Container.tsx b/packages/ui-react/src/container/Container.tsx
index c8a7b099..e603403d 100644
--- a/packages/ui-react/src/container/Container.tsx
+++ b/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 || ''}`}
diff --git a/packages/ui-react/src/page/Page.tsx b/packages/ui-react/src/page/Page.tsx
index d45e9dd0..fe875dd5 100644
--- a/packages/ui-react/src/page/Page.tsx
+++ b/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 || ''}`}
diff --git a/packages/ui-vue2/src/Component.vue b/packages/ui-vue2/src/Component.vue
index 52143e6a..b87549df 100644
--- a/packages/ui-vue2/src/Component.vue
+++ b/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') {
diff --git a/packages/ui/src/Component.vue b/packages/ui/src/Component.vue
index 67786829..3de22964 100644
--- a/packages/ui/src/Component.vue
+++ b/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') {