From a2a9556ab874d961c2855d672f23102a78ef347d Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 4 Dec 2025 16:36:34 +0800
Subject: [PATCH] =?UTF-8?q?style(editor):=20=E8=B0=83=E6=95=B4=E5=B7=B2?=
 =?UTF-8?q?=E9=80=89=E7=BB=84=E4=BB=B6=E8=8A=82=E7=82=B9=E5=8F=B3=E4=BE=A7?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/layouts/sidebar/layer/LayerNodeTool.vue  | 11 ++++++++---
 packages/editor/src/theme/layer-panel.scss       | 16 ++++++++++++++++
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/packages/editor/src/layouts/sidebar/layer/LayerNodeTool.vue b/packages/editor/src/layouts/sidebar/layer/LayerNodeTool.vue
index 4466949b..e0658404 100644
--- a/packages/editor/src/layouts/sidebar/layer/LayerNodeTool.vue
+++ b/packages/editor/src/layouts/sidebar/layer/LayerNodeTool.vue
@@ -1,7 +1,12 @@
 <template>
   <template v-if="data.type !== 'page'">
-    <MIcon v-if="data.visible === false" :icon="Hide" @click.stop="setNodeVisible(true)" title="点击显示"></MIcon>
-    <MIcon v-else :icon="View" @click.stop="setNodeVisible(false)" class="node-lock" title="点击隐藏"></MIcon>
+    <TMagicButton
+      link
+      :type="data.visible === false ? 'primary' : 'default'"
+      :icon="data.visible === false ? Hide : View"
+      :title="data.visible === false ? '点击显示' : '点击隐藏'"
+      @click.stop="setNodeVisible(data.visible === false)"
+    ></TMagicButton>
   </template>
 </template>
 
@@ -9,8 +14,8 @@
 import { Hide, View } from '@element-plus/icons-vue';
 
 import type { MNode } from '@tmagic/core';
+import { TMagicButton } from '@tmagic/design';
 
-import MIcon from '@editor/components/Icon.vue';
 import { useServices } from '@editor/hooks/use-services';
 
 const props = defineProps<{
diff --git a/packages/editor/src/theme/layer-panel.scss b/packages/editor/src/theme/layer-panel.scss
index 6797bb6c..a2fb22d7 100644
--- a/packages/editor/src/theme/layer-panel.scss
+++ b/packages/editor/src/theme/layer-panel.scss
@@ -5,6 +5,22 @@
 
   .m-editor-tree {
     padding-top: 48px;
+
+    .tree-node-tool {
+      padding-right: 10px;
+
+      .tmagic-design-button + .tmagic-design-button {
+        margin-left: 2px;
+      }
+    }
+
+    .tree-node.selected {
+      .tree-node-tool {
+        .tmagic-design-button {
+          color: #fff;
+        }
+      }
+    }
   }
 
   .search-wrapper {