From 46b0db40f3888682c7e3cb8bc92eec3989bd30c3 Mon Sep 17 00:00:00 2001
From: jahnli <jahnli@163.com>
Date: Tue, 7 Oct 2025 19:52:23 +0800
Subject: [PATCH] feat(tree): add `switcherWrapperClass` and
 `switcherWrapperStyle` props to `n-tree` and `n-tree-select` components

---
 CHANGELOG.en-US.md                 |  9 +++++++++
 CHANGELOG.zh-CN.md                 |  9 +++++++++
 src/tree-select/src/TreeSelect.tsx |  2 ++
 src/tree/src/Tree.tsx              |  4 ++++
 src/tree/src/TreeNodeSwitcher.tsx  | 14 ++++++++++++--
 src/tree/src/interface.ts          |  4 +++-
 6 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index ccf50bcf260..18c87e80152 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -1,5 +1,14 @@
 # CHANGELOG
 
+## NEXT_VERSION
+
+`NEXT_VERSION`
+
+### Features
+
+- `n-tree` adds `switcher-class` and `switcher-style` props
+- `n-tree-select` adds `switcher-class` and `switcher-style` props
+
 ## 2.43.1
 
 `2025-09-15`
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 7c0e0300828..55801743ce3 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -1,5 +1,14 @@
 # CHANGELOG
 
+## NEXT_VERSION
+
+`NEXT_VERSION`
+
+### Features
+
+- `n-tree` 新增 `switcher-wrapper-class` 和 `switcher-wrapper-style` 属性
+- `n-tree-select` 新增 `switcher-wrapper-class` 和 `switcher-wrapper-style` 属性
+
 ## 2.43.1
 
 `2025-09-15`
diff --git a/src/tree-select/src/TreeSelect.tsx b/src/tree-select/src/TreeSelect.tsx
index b5edc532f6c..58fa60812b8 100644
--- a/src/tree-select/src/TreeSelect.tsx
+++ b/src/tree-select/src/TreeSelect.tsx
@@ -1024,6 +1024,8 @@ export default defineComponent({
                                 renderPrefix={this.renderPrefix}
                                 renderSuffix={this.renderSuffix}
                                 renderSwitcherIcon={this.renderSwitcherIcon}
+                                switcherWrapperClass={this.switcherWrapperClass}
+                                switcherWrapperStyle={this.switcherWrapperStyle}
                                 nodeProps={this.nodeProps}
                                 watchProps={this.watchProps}
                                 virtualScroll={
diff --git a/src/tree/src/Tree.tsx b/src/tree/src/Tree.tsx
index b0aa5204173..91dd38ef095 100644
--- a/src/tree/src/Tree.tsx
+++ b/src/tree/src/Tree.tsx
@@ -189,6 +189,8 @@ export const treeSharedProps = {
   },
   indeterminateKeys: Array as PropType<Key[]>,
   renderSwitcherIcon: Function as PropType<RenderSwitcherIcon>,
+  switcherWrapperClass: String,
+  switcherWrapperStyle: [String, Object] as PropType<string | CSSProperties>,
   onUpdateIndeterminateKeys: [Function, Array] as PropType<
     MaybeArray<OnUpdateIndeterminateKeys>
   >,
@@ -1607,6 +1609,8 @@ export default defineComponent({
       renderPrefixRef: toRef(props, 'renderPrefix'),
       renderSuffixRef: toRef(props, 'renderSuffix'),
       renderSwitcherIconRef: toRef(props, 'renderSwitcherIcon'),
+      switcherWrapperClassRef: toRef(props, 'switcherWrapperClass'),
+      switcherWrapperStyleRef: toRef(props, 'switcherWrapperStyle'),
       labelFieldRef: toRef(props, 'labelField'),
       multipleRef: toRef(props, 'multiple'),
       overrideDefaultNodeClickBehaviorRef: toRef(
diff --git a/src/tree/src/TreeNodeSwitcher.tsx b/src/tree/src/TreeNodeSwitcher.tsx
index da549277985..708cc7a0cfd 100644
--- a/src/tree/src/TreeNodeSwitcher.tsx
+++ b/src/tree/src/TreeNodeSwitcher.tsx
@@ -24,7 +24,11 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { renderSwitcherIconRef } = inject(treeInjectionKey, null)!
+    const {
+      renderSwitcherIconRef,
+      switcherWrapperClassRef,
+      switcherWrapperStyleRef
+    } = inject(treeInjectionKey, null)!
     return () => {
       const { clsPrefix, expanded, hide, indent, onClick } = props
       return (
@@ -38,7 +42,13 @@ export default defineComponent({
           style={{ width: `${indent}px` }}
           onClick={onClick}
         >
-          <div class={`${clsPrefix}-tree-node-switcher__icon`}>
+          <div
+            class={[
+              `${clsPrefix}-tree-node-switcher__icon`,
+              switcherWrapperClassRef.value
+            ]}
+            style={switcherWrapperStyleRef.value}
+          >
             <NIconSwitchTransition>
               {{
                 default: () => {
diff --git a/src/tree/src/interface.ts b/src/tree/src/interface.ts
index 45887c30236..68057c1934f 100644
--- a/src/tree/src/interface.ts
+++ b/src/tree/src/interface.ts
@@ -1,5 +1,5 @@
 import type { CheckStrategy, TreeNode } from 'treemate'
-import type { HTMLAttributes, Ref, VNodeChild } from 'vue'
+import type { CSSProperties, HTMLAttributes, Ref, VNodeChild } from 'vue'
 import type { VirtualListScrollTo } from 'vueuc'
 import type { MergedTheme } from '../../_mixins'
 import type { TreeTheme } from '../styles'
@@ -127,6 +127,8 @@ export interface TreeInjection {
   renderPrefixRef: Ref<RenderPrefix | undefined>
   renderSuffixRef: Ref<RenderSuffix | undefined>
   renderSwitcherIconRef: Ref<RenderSwitcherIcon | undefined>
+  switcherWrapperClassRef: Ref<string | undefined>
+  switcherWrapperStyleRef: Ref<string | CSSProperties | undefined>
   labelFieldRef: Ref<string>
   nodePropsRef: Ref<TreeNodeProps | undefined>
   multipleRef: Ref<boolean>