From 8f0d99a4a68823542b089e85d3b90b6bd7f64700 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Wed, 22 Oct 2025 14:44:38 +0800
Subject: [PATCH] =?UTF-8?q?style(design,=20editor,=20tdesign-vue-next-adap?=
 =?UTF-8?q?ter):=20=E7=BC=96=E8=BE=91=E5=99=A8=E9=A1=B6=E9=83=A8=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E6=8C=89=E9=92=AEtdesign=E4=B8=8B=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/design/src/Button.vue                |  3 +++
 packages/editor/src/components/ToolButton.vue | 19 +++++++++++++------
 packages/editor/src/theme/nav-menu.scss       |  6 ++++++
 .../tdesign-vue-next-adapter/src/Icon.vue     |  2 +-
 .../tdesign-vue-next-adapter/src/index.ts     |  4 ++--
 5 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/packages/design/src/Button.vue b/packages/design/src/Button.vue
index 564ebbe0..63146ad8 100644
--- a/packages/design/src/Button.vue
+++ b/packages/design/src/Button.vue
@@ -1,5 +1,8 @@
 <template>
   <component class="tmagic-design-button" :is="uiComponent" v-bind="uiProps" @click="clickHandler">
+    <template #icon v-if="$slots.icon">
+      <slot name="icon"></slot>
+    </template>
     <template #default v-if="$slots.default">
       <slot></slot>
     </template>
diff --git a/packages/editor/src/components/ToolButton.vue b/packages/editor/src/components/ToolButton.vue
index 45d70daf..baad32fa 100644
--- a/packages/editor/src/components/ToolButton.vue
+++ b/packages/editor/src/components/ToolButton.vue
@@ -12,13 +12,20 @@
 
     <template v-else-if="data.type === 'button'">
       <TMagicTooltip v-if="data.tooltip" effect="dark" placement="bottom-start" :content="data.tooltip">
-        <TMagicButton size="small" link :disabled="disabled"
-          ><MIcon v-if="data.icon" :icon="data.icon"></MIcon><span>{{ data.text }}</span></TMagicButton
-        >
+        <TMagicButton size="small" link :disabled="disabled">
+          <template #icon v-if="data.icon">
+            <MIcon :icon="data.icon"></MIcon>
+          </template>
+          <template #default v-if="data.text">{{ data.text }}</template>
+        </TMagicButton>
       </TMagicTooltip>
-      <TMagicButton v-else size="small" link :disabled="disabled" :title="data.text"
-        ><MIcon v-if="data.icon" :icon="data.icon"></MIcon><span>{{ data.text }}</span></TMagicButton
-      >
+
+      <TMagicButton v-else size="small" link :disabled="disabled" :title="data.text">
+        <template #icon v-if="data.icon">
+          <MIcon :icon="data.icon"></MIcon>
+        </template>
+        <template #default v-if="data.text">{{ data.text }}</template>
+      </TMagicButton>
     </template>
 
     <TMagicDropdown
diff --git a/packages/editor/src/theme/nav-menu.scss b/packages/editor/src/theme/nav-menu.scss
index cb498486..50e3914e 100644
--- a/packages/editor/src/theme/nav-menu.scss
+++ b/packages/editor/src/theme/nav-menu.scss
@@ -18,6 +18,7 @@
 
   > div {
     display: flex;
+    gap: 3px;
     height: 100%;
     z-index: 1;
     align-items: center;
@@ -76,5 +77,10 @@
         transform: rotate(-90deg);
       }
     }
+
+    .t-button {
+      padding-left: 1px;
+      padding-right: 1px;
+    }
   }
 }
diff --git a/packages/tdesign-vue-next-adapter/src/Icon.vue b/packages/tdesign-vue-next-adapter/src/Icon.vue
index 8d50cf0f..c045bc64 100644
--- a/packages/tdesign-vue-next-adapter/src/Icon.vue
+++ b/packages/tdesign-vue-next-adapter/src/Icon.vue
@@ -1,5 +1,5 @@
 <template>
-  <i class="t-t-design-adapter-icon">
+  <i class="t-t-design-adapter-icon t-icon">
     <slot></slot>
   </i>
 </template>
diff --git a/packages/tdesign-vue-next-adapter/src/index.ts b/packages/tdesign-vue-next-adapter/src/index.ts
index 8882e15a..35ac2d06 100644
--- a/packages/tdesign-vue-next-adapter/src/index.ts
+++ b/packages/tdesign-vue-next-adapter/src/index.ts
@@ -117,7 +117,7 @@ const adapter: any = {
       props: (props: ButtonProps) => ({
         theme: props.type,
         size: props.size === 'default' ? 'medium' : props.size,
-        icon: () => (props.icon ? h(Icon, null, { default: () => h(props.icon) }) : null),
+        icon: props.icon ? () => h(Icon, null, { default: () => h(props.icon) }) : undefined,
         variant: props.link || props.text ? 'text' : 'base',
         shape: props.circle ? 'circle' : 'rectangle',
       }),
@@ -449,7 +449,7 @@ const adapter: any = {
       component: TTooltip,
       props: (props: TooltipProps) => ({
         ...props,
-        placement: props.placement,
+        placement: props.placement?.replace(/\B([A-Z])/g, '-$1').toLowerCase(),
         content: props.content,
       }),
     },