From 2aa16c6af9dfe6c577028d5c3e3aeadd1ed305b7 Mon Sep 17 00:00:00 2001
From: wuyiping0628 <1106773985@qq.com>
Date: Tue, 10 Sep 2024 19:37:09 -0700
Subject: [PATCH 1/9] feat(tree-menu): [tree-menu] updata tree-menu xdesign

---
 packages/theme/src/tree-menu/index.less   | 13 ++++++++++++-
 packages/theme/src/tree-menu/smb-theme.js |  3 +++
 packages/theme/src/tree-menu/vars.less    |  4 ++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/packages/theme/src/tree-menu/index.less b/packages/theme/src/tree-menu/index.less
index b4f0813ab8..a6022bc6a6 100644
--- a/packages/theme/src/tree-menu/index.less
+++ b/packages/theme/src/tree-menu/index.less
@@ -127,11 +127,22 @@
   .@{input-prefix-cls} {
     .@{input-prefix-cls}__inner {
       border: none;
-      border-bottom: 1px solid var(--ti-tree-menu-border-color);
     }
   }
 
   .@{tree-prefix-cls} {
+    padding-top: var(--ti-tree-menu-padding-top);
+    position: relative;
+
+    &:after {
+      content: '';
+      position: absolute;
+      left: 20px;
+      right: 20px;
+      top: 0;
+      bottom: 0;
+      border-top: 1px solid  var(--ti-tree-menu-border-top-color);
+    }
     .@{tree-node-prefix-cls} {
       &.is-disabled {
         & > .@{tree-node-prefix-cls}__content a {
diff --git a/packages/theme/src/tree-menu/smb-theme.js b/packages/theme/src/tree-menu/smb-theme.js
index 315aabe1bc..e88d733921 100644
--- a/packages/theme/src/tree-menu/smb-theme.js
+++ b/packages/theme/src/tree-menu/smb-theme.js
@@ -4,6 +4,9 @@ export const tinyTreeMenuSmbTheme = {
   'ti-tree-menu-node-current-text-color': 'var(--ti-common-color-text-primary)',
   'ti-tree-menu-square-left-border-color': 'var(--ti-common-color-icon-active)',
   'ti-tree-menu-node-number-font-size': 'var(--ti-common-font-size-0)',
+  'ti-tree-menu-padding-top': 'var(--ti-common-size-2x)',
   'ti-tree-menu-border-color': 'var(--ti-common-color-light)',
+  'ti-tree-menu-collapse-icon-margin-right': 'var(--ti-common-size-5x)',
+  'ti-common-color-light': 'var(--ti-common-color-line-dividing)',
   'ti-tree-menu-node-number-color': 'var(--ti-common-color-text-weaken)'
 }
diff --git a/packages/theme/src/tree-menu/vars.less b/packages/theme/src/tree-menu/vars.less
index 76720a2ad3..8f43ed9ba8 100644
--- a/packages/theme/src/tree-menu/vars.less
+++ b/packages/theme/src/tree-menu/vars.less
@@ -37,10 +37,14 @@
   --ti-tree-menu-collapse-icon-hover-color: var(--ti-common-bg-color-focus, #0067d1);
   // 折叠图标右边距
   --ti-tree-menu-collapse-icon-margin-right: var(--ti-common-size-2x, 8px);
+  // 输入框下面的线
+  --ti-tree-menu-border-top-color: var(--ti-common-color-light, #fff);
   // 节点序号字号
   --ti-tree-menu-node-number-font-size: var(--ti-common-font-size-base, 12px);
   // 活跃节点竖线与文本的间距
   --ti-tree-menu-node-vertical-line-margin-right: var(--ti-common-size-4x, 16px);
+  // 输入框与文本的间距
+  --ti-tree-menu-padding-top: var(--ti-common-size-4x, 16px);
   // 前缀图标右边距
   --ti-tree-menu-prefix-icon-margin-right: var(--ti-common-size-2x, 8px);
   // 禁用文本色

From de5f0a29588e92d08981b511338af98aa68ed65e Mon Sep 17 00:00:00 2001
From: wuyiping0628 <1106773985@qq.com>
Date: Wed, 11 Sep 2024 02:43:00 -0700
Subject: [PATCH 2/9] feat(tree-menu): [tree-menu] updata tree-menu xdesign

---
 packages/theme/src/tree-menu/index.less | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/packages/theme/src/tree-menu/index.less b/packages/theme/src/tree-menu/index.less
index a6022bc6a6..b4f0813ab8 100644
--- a/packages/theme/src/tree-menu/index.less
+++ b/packages/theme/src/tree-menu/index.less
@@ -127,22 +127,11 @@
   .@{input-prefix-cls} {
     .@{input-prefix-cls}__inner {
       border: none;
+      border-bottom: 1px solid var(--ti-tree-menu-border-color);
     }
   }
 
   .@{tree-prefix-cls} {
-    padding-top: var(--ti-tree-menu-padding-top);
-    position: relative;
-
-    &:after {
-      content: '';
-      position: absolute;
-      left: 20px;
-      right: 20px;
-      top: 0;
-      bottom: 0;
-      border-top: 1px solid  var(--ti-tree-menu-border-top-color);
-    }
     .@{tree-node-prefix-cls} {
       &.is-disabled {
         & > .@{tree-node-prefix-cls}__content a {

From 98990925cf0bdd9114e7b685b53162e6d6fc9662 Mon Sep 17 00:00:00 2001
From: wuyiping0628 <1106773985@qq.com>
Date: Wed, 11 Sep 2024 02:45:28 -0700
Subject: [PATCH 3/9] fix(tree-menu): [tree-menu] fix tree-menu bug

---
 packages/theme/src/tree-menu/index.less | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/packages/theme/src/tree-menu/index.less b/packages/theme/src/tree-menu/index.less
index a6022bc6a6..b4f0813ab8 100644
--- a/packages/theme/src/tree-menu/index.less
+++ b/packages/theme/src/tree-menu/index.less
@@ -127,22 +127,11 @@
   .@{input-prefix-cls} {
     .@{input-prefix-cls}__inner {
       border: none;
+      border-bottom: 1px solid var(--ti-tree-menu-border-color);
     }
   }
 
   .@{tree-prefix-cls} {
-    padding-top: var(--ti-tree-menu-padding-top);
-    position: relative;
-
-    &:after {
-      content: '';
-      position: absolute;
-      left: 20px;
-      right: 20px;
-      top: 0;
-      bottom: 0;
-      border-top: 1px solid  var(--ti-tree-menu-border-top-color);
-    }
     .@{tree-node-prefix-cls} {
       &.is-disabled {
         & > .@{tree-node-prefix-cls}__content a {

From 4686dac4030f520ddc12b1a45d55789492d54bff Mon Sep 17 00:00:00 2001
From: wuyiping0628 <1106773985@qq.com>
Date: Thu, 12 Sep 2024 05:58:02 -0700
Subject: [PATCH 4/9] feat(tree-menu): [tree-menu] updata tree-menu xdesign

---
 .../tree-menu/basic-usage-composition-api.vue |  2 +-
 .../demos/pc/app/tree-menu/basic-usage.vue    |  2 +-
 .../demos/pc/app/tree-menu/clearable.spec.ts  |  8 ++--
 packages/theme/src/tree-menu/index.less       | 44 +++++++++++++------
 packages/theme/src/tree-menu/vars.less        | 12 +++--
 packages/vue-locale/src/lang/zh-CN.ts         |  2 +-
 6 files changed, 45 insertions(+), 25 deletions(-)

diff --git a/examples/sites/demos/pc/app/tree-menu/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/basic-usage-composition-api.vue
index 295499adcd..d732580363 100644
--- a/examples/sites/demos/pc/app/tree-menu/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/basic-usage-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <tiny-tree-menu placeholder="请输入内容进行筛选"></tiny-tree-menu>
+  <tiny-tree-menu placeholder="输入关键字搜索"></tiny-tree-menu>
 </template>
 
 <script setup>
diff --git a/examples/sites/demos/pc/app/tree-menu/basic-usage.vue b/examples/sites/demos/pc/app/tree-menu/basic-usage.vue
index 60ef798019..013b5b8dbe 100644
--- a/examples/sites/demos/pc/app/tree-menu/basic-usage.vue
+++ b/examples/sites/demos/pc/app/tree-menu/basic-usage.vue
@@ -1,5 +1,5 @@
 <template>
-  <tiny-tree-menu placeholder="请输入内容进行筛选"></tiny-tree-menu>
+  <tiny-tree-menu placeholder="输入关键字搜索"></tiny-tree-menu>
 </template>
 
 <script>
diff --git a/examples/sites/demos/pc/app/tree-menu/clearable.spec.ts b/examples/sites/demos/pc/app/tree-menu/clearable.spec.ts
index 4e04ce2f13..86c728894d 100644
--- a/examples/sites/demos/pc/app/tree-menu/clearable.spec.ts
+++ b/examples/sites/demos/pc/app/tree-menu/clearable.spec.ts
@@ -8,13 +8,13 @@ test('搜索框可清除', async ({ page }) => {
 
   await page.goto('tree-menu#clearable')
 
-  await page.locator('#clearable').getByRole('textbox', { name: '请输入内容进行筛选' }).click()
-  await page.locator('#clearable').getByRole('textbox', { name: '请输入内容进行筛选' }).click()
-  await page.locator('#clearable').getByRole('textbox', { name: '请输入内容进行筛选' }).fill('123')
+  await page.locator('#clearable').getByRole('textbox', { name: '输入关键字搜索' }).click()
+  await page.locator('#clearable').getByRole('textbox', { name: '输入关键字搜索' }).click()
+  await page.locator('#clearable').getByRole('textbox', { name: '输入关键字搜索' }).fill('123')
   await expect(page.getByText('暂无数据')).toBeVisible()
   const icon = getIcon(page)
   await icon.click()
-  const val = await page.locator('#clearable').getByRole('textbox', { name: '请输入内容进行筛选' }).inputValue()
+  const val = await page.locator('#clearable').getByRole('textbox', { name: '输入关键字搜索' }).inputValue()
   expect(val).toBe('')
   await expect(page.getByText('暂无数据')).not.toBeVisible()
 })
diff --git a/packages/theme/src/tree-menu/index.less b/packages/theme/src/tree-menu/index.less
index b4f0813ab8..750b06780d 100644
--- a/packages/theme/src/tree-menu/index.less
+++ b/packages/theme/src/tree-menu/index.less
@@ -25,6 +25,7 @@
   position: relative;
   font-size: var(--ti-tree-menu-font-size);
   transition: width 0.5s;
+  background: #fff;
 
   &__toggle-button {
     position: absolute;
@@ -45,6 +46,7 @@
     .tiny-svg {
       margin-left: 2px;
       fill: var(--ti-tree-menu-collapse-icon-fill-color);
+      font-size: 16px;
     }
   }
 
@@ -125,13 +127,23 @@
   }
 
   .@{input-prefix-cls} {
-    .@{input-prefix-cls}__inner {
-      border: none;
-      border-bottom: 1px solid var(--ti-tree-menu-border-color);
+    margin: var(--ti-tree-menu-padding-top) var(--ti-tree-menu-padding-left);
+    position: relative;
+    max-width: 180px;
+
+    &:before {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 50px;
+      bottom: 0;
+      border-top: 1px solid  var(--ti-tree-menu-border-top-color);
     }
   }
 
   .@{tree-prefix-cls} {
+    padding-top: 8px;
     .@{tree-node-prefix-cls} {
       &.is-disabled {
         & > .@{tree-node-prefix-cls}__content a {
@@ -144,11 +156,16 @@
         }
       }
 
+      .@{tree-node-prefix-cls}__expand-icon {
+        font-size: 16px;
+      }
+
       .@{tree-node-prefix-cls}__content {
         height: var(--ti-tree-menu-node-height);
         line-height: var(--ti-tree-menu-node-height);
         overflow: hidden;
         padding-left: 0;
+        margin-bottom: var(--ti-tree-menu-node-margin-bottom);
 
         .tree-node-icon {
           order: 10;
@@ -210,17 +227,16 @@
           .tree-node-body {
             color: var(--ti-tree-menu-node-current-text-color);
           }
-
-          .@{tree-node-prefix-cls}__content-left::before {
-            content: '';
-            position: absolute;
-            left: 4px;
-            top: 50%;
-            display: inline-block;
-            height: 18px;
-            transform: translateY(-50%);
-            border-left: 2px solid var(--ti-tree-menu-square-left-border-color);
-          }
+        }
+        & > .@{tree-node-prefix-cls}__content::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 50%;
+          display: inline-block;
+          height: 32px;
+          transform: translateY(-50%);
+          border-left: 2px solid var(--ti-tree-menu-square-left-border-color);
         }
       }
 
diff --git a/packages/theme/src/tree-menu/vars.less b/packages/theme/src/tree-menu/vars.less
index 7e676a6717..e11bdc6cca 100644
--- a/packages/theme/src/tree-menu/vars.less
+++ b/packages/theme/src/tree-menu/vars.less
@@ -12,9 +12,11 @@
 
 .component-css-vars-tree-menu() {
   // 宽度
-  --ti-tree-menu-width: calc(var(--ti-common-space-10, 10px) * 27);
+  --ti-tree-menu-width: calc(var(--ti-common-space-10, 10px) * 22);
   // 节点高度
-  --ti-tree-menu-node-height: var(--ti-common-size-10x, 40px);
+  --ti-tree-menu-node-height: var(--ti-common-size-8x, 32px);
+  // 节点高度直接距离
+  --ti-tree-menu-node-margin-bottom: var(--ti-common-size-base, 4px);
   // 空数据显示文本字号(hide)
   --ti-tree-menu-font-size: var(--ti-common-font-size-base, 12px);
   // 边框色
@@ -38,13 +40,15 @@
   // 折叠图标右边距
   --ti-tree-menu-collapse-icon-margin-right: var(--ti-common-size-5x);
   // 输入框下面的线
-  --ti-tree-menu-border-top-color: var(--ti-common-color-light, #fff);
+  --ti-tree-menu-border-top-color: #f0f0f0;
+  // 输入框距离左边的距离
+  --ti-tree-menu-padding-left: 20px;
   // 节点序号字号
   --ti-tree-menu-node-number-font-size: var(--ti-common-font-size-0);
   // 活跃节点竖线与文本的间距
   --ti-tree-menu-node-vertical-line-margin-right: var(--ti-common-size-4x, 16px);
   // 输入框与文本的间距
-  --ti-tree-menu-padding-top: var(--ti-common-size-2x);
+  --ti-tree-menu-padding-top: var(--ti-common-size-5x);
   // 前缀图标右边距
   --ti-tree-menu-prefix-icon-margin-right: var(--ti-common-size-2x, 8px);
   // 禁用文本色
diff --git a/packages/vue-locale/src/lang/zh-CN.ts b/packages/vue-locale/src/lang/zh-CN.ts
index 90e5c5e6d8..c29396d6e6 100644
--- a/packages/vue-locale/src/lang/zh-CN.ts
+++ b/packages/vue-locale/src/lang/zh-CN.ts
@@ -584,7 +584,7 @@ export default {
       placeholder: '请输入内容进行筛选'
     },
     treeMenu: {
-      placeholder: '请输入内容进行筛选'
+      placeholder: '输入关键字搜索'
     },
     transfer: {
       filterPlaceholder: '请输入搜索内容',

From 58824bed4674d6d2abedea6815ad5adca1dfca2b Mon Sep 17 00:00:00 2001
From: wuyiping0628 <1106773985@qq.com>
Date: Fri, 13 Sep 2024 02:20:08 -0700
Subject: [PATCH 5/9] feat(tree-menu): [tree-menu] updata tree-menu xdesign

---
 .../default-expand-all-composition-api.vue         |  5 +++--
 .../demos/pc/app/tree-menu/default-expand-all.vue  |  5 +++--
 .../default-expanded-keys-composition-api.vue      | 11 ++++++++---
 ...ult-expanded-keys-highlight-composition-api.vue |  5 +++--
 .../tree-menu/default-expanded-keys-highlight.vue  |  5 +++--
 .../pc/app/tree-menu/default-expanded-keys.vue     | 12 ++++++------
 .../expand-on-click-node-composition-api.vue       |  8 ++++----
 .../pc/app/tree-menu/expand-on-click-node.vue      |  8 ++++----
 .../pc/app/tree-menu/props-composition-api.vue     |  6 +++---
 .../tree-menu/show-checkbox-composition-api.vue    | 14 ++++++++++----
 .../sites/demos/pc/app/tree-menu/show-checkbox.vue | 14 ++++++++++----
 .../app/tree-menu/show-filter-composition-api.vue  | 12 ++++++++----
 .../sites/demos/pc/app/tree-menu/show-filter.vue   | 12 ++++++++----
 .../app/tree-menu/show-number-composition-api.vue  |  5 +++--
 .../sites/demos/pc/app/tree-menu/show-number.vue   |  5 +++--
 .../tree-menu/text-ellipsis-composition-api.vue    |  8 ++++----
 .../sites/demos/pc/app/tree-menu/text-ellipsis.vue |  8 ++++----
 packages/theme/src/tree-menu/index.less            |  8 +++++++-
 packages/theme/src/tree-menu/vars.less             |  6 +++---
 19 files changed, 97 insertions(+), 60 deletions(-)

diff --git a/examples/sites/demos/pc/app/tree-menu/default-expand-all-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/default-expand-all-composition-api.vue
index e0cc4ec77d..b88d377367 100644
--- a/examples/sites/demos/pc/app/tree-menu/default-expand-all-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/default-expand-all-composition-api.vue
@@ -1,5 +1,6 @@
 <template>
   <tiny-tree-menu
+    class="demo-tree-menu"
     node-key="id"
     :data="treeData"
     :default-checked-keys="expandeArr"
@@ -170,8 +171,8 @@ const treeData = ref([
 </script>
 
 <style lang="less" scoped>
-.tiny-tree-menu {
-  height: 300px;
+.demo-tree-menu ::v-deep .tiny-tree {
+  height: 320px;
   overflow: auto;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/tree-menu/default-expand-all.vue b/examples/sites/demos/pc/app/tree-menu/default-expand-all.vue
index 460dad9ae6..3a82b52c85 100644
--- a/examples/sites/demos/pc/app/tree-menu/default-expand-all.vue
+++ b/examples/sites/demos/pc/app/tree-menu/default-expand-all.vue
@@ -1,5 +1,6 @@
 <template>
   <tiny-tree-menu
+    class="demo-tree-menu"
     node-key="id"
     :data="treeData"
     :default-checked-keys="expandeArr"
@@ -178,8 +179,8 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.tiny-tree-menu {
-  height: 300px;
+.demo-tree-menu ::v-deep .tiny-tree {
+  height: 320px;
   overflow: auto;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/tree-menu/default-expanded-keys-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/default-expanded-keys-composition-api.vue
index 7364f8bed7..7206972d13 100644
--- a/examples/sites/demos/pc/app/tree-menu/default-expanded-keys-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/default-expanded-keys-composition-api.vue
@@ -1,5 +1,10 @@
 <template>
-  <tiny-tree-menu :data="treeData" node-key="id" :default-expanded-keys="expandeArr"></tiny-tree-menu>
+  <tiny-tree-menu
+    class="demo-tree-menu"
+    :data="treeData"
+    node-key="id"
+    :default-expanded-keys="expandeArr"
+  ></tiny-tree-menu>
 </template>
 
 <script setup>
@@ -112,8 +117,8 @@ const treeData = ref([
 </script>
 
 <style lang="less" scoped>
-.tiny-tree-menu {
-  height: 300px;
+.demo-tree-menu ::v-deep .tiny-tree {
+  height: 320px;
   overflow: auto;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/tree-menu/default-expanded-keys-highlight-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/default-expanded-keys-highlight-composition-api.vue
index a514c5cedd..35f90dff81 100644
--- a/examples/sites/demos/pc/app/tree-menu/default-expanded-keys-highlight-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/default-expanded-keys-highlight-composition-api.vue
@@ -2,6 +2,7 @@
   <div>
     <tiny-button @click="changeHighlight" type="primary">设置展开并高亮</tiny-button>
     <tiny-tree-menu
+      class="demo-tree-menu"
       node-key="id"
       :data="treeData"
       :default-expanded-keys="expandeArr"
@@ -128,8 +129,8 @@ const changeHighlight = () => {
 </script>
 
 <style lang="less" scoped>
-.tiny-tree-menu {
-  height: 300px;
+.demo-tree-menu ::v-deep .tiny-tree {
+  height: 320px;
   overflow: auto;
 }
 .tiny-button {
diff --git a/examples/sites/demos/pc/app/tree-menu/default-expanded-keys-highlight.vue b/examples/sites/demos/pc/app/tree-menu/default-expanded-keys-highlight.vue
index 6374b0d107..cae2e8af93 100644
--- a/examples/sites/demos/pc/app/tree-menu/default-expanded-keys-highlight.vue
+++ b/examples/sites/demos/pc/app/tree-menu/default-expanded-keys-highlight.vue
@@ -2,6 +2,7 @@
   <div>
     <tiny-button @click="changeHighlight" type="primary">设置展开并高亮</tiny-button>
     <tiny-tree-menu
+      class="demo-tree-menu"
       node-key="id"
       :data="treeData"
       :default-expanded-keys="expandeArr"
@@ -142,8 +143,8 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.tiny-tree-menu {
-  height: 300px;
+.demo-tree-menu ::v-deep .tiny-tree {
+  height: 320px;
   overflow: auto;
 }
 .tiny-button {
diff --git a/examples/sites/demos/pc/app/tree-menu/default-expanded-keys.vue b/examples/sites/demos/pc/app/tree-menu/default-expanded-keys.vue
index 2eccde3c56..b708f2ad88 100644
--- a/examples/sites/demos/pc/app/tree-menu/default-expanded-keys.vue
+++ b/examples/sites/demos/pc/app/tree-menu/default-expanded-keys.vue
@@ -1,14 +1,14 @@
 <template>
-  <tiny-tree-menu :data="treeData" node-key="id" :default-expanded-keys="expandeArr"> </tiny-tree-menu>
+  <tiny-tree-menu class="demo-tree-menu" :data="treeData" node-key="id" :default-expanded-keys="expandeArr">
+  </tiny-tree-menu>
 </template>
 
 <script>
-import { TreeMenu, Button } from '@opentiny/vue'
+import { TreeMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeMenu: TreeMenu,
-    TinyButton: Button
+    TinyTreeMenu: TreeMenu
   },
   data() {
     return {
@@ -121,8 +121,8 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.tiny-tree-menu {
-  height: 300px;
+.demo-tree-menu ::v-deep .tiny-tree {
+  height: 320px;
   overflow: auto;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/tree-menu/expand-on-click-node-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/expand-on-click-node-composition-api.vue
index 60eb8dd0fe..9c4c4eea93 100644
--- a/examples/sites/demos/pc/app/tree-menu/expand-on-click-node-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/expand-on-click-node-composition-api.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
     <p>场景1：默认点击文字展开菜单</p>
-    <tiny-tree-menu :data="treeData"></tiny-tree-menu>
+    <tiny-tree-menu class="demo-tree-menu" :data="treeData"></tiny-tree-menu>
     <br /><br />
     <p>场景2：点击展开按钮才可展开菜单</p>
-    <tiny-tree-menu :data="treeData" :expand-on-click-node="false"></tiny-tree-menu>
+    <tiny-tree-menu class="demo-tree-menu" :data="treeData" :expand-on-click-node="false"></tiny-tree-menu>
   </div>
 </template>
 
@@ -169,8 +169,8 @@ const treeData = ref([
 </script>
 
 <style lang="less" scoped>
-.tiny-tree-menu {
-  height: 300px;
+.demo-tree-menu ::v-deep .tiny-tree {
+  height: 320px;
   overflow: auto;
 }
 p {
diff --git a/examples/sites/demos/pc/app/tree-menu/expand-on-click-node.vue b/examples/sites/demos/pc/app/tree-menu/expand-on-click-node.vue
index 5a038d41c3..d5288c0976 100644
--- a/examples/sites/demos/pc/app/tree-menu/expand-on-click-node.vue
+++ b/examples/sites/demos/pc/app/tree-menu/expand-on-click-node.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
     <p>场景1：默认点击文字展开菜单</p>
-    <tiny-tree-menu :data="treeData"></tiny-tree-menu>
+    <tiny-tree-menu class="demo-tree-menu" :data="treeData"></tiny-tree-menu>
     <br /><br />
     <p>场景2：点击展开按钮才可展开菜单</p>
-    <tiny-tree-menu :data="treeData" :expand-on-click-node="false"></tiny-tree-menu>
+    <tiny-tree-menu class="demo-tree-menu" :data="treeData" :expand-on-click-node="false"></tiny-tree-menu>
   </div>
 </template>
 
@@ -181,8 +181,8 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.tiny-tree-menu {
-  height: 300px;
+.demo-tree-menu ::v-deep .tiny-tree {
+  height: 320px;
   overflow: auto;
 }
 p {
diff --git a/examples/sites/demos/pc/app/tree-menu/props-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/props-composition-api.vue
index 9b2076ae54..27e7c4981a 100644
--- a/examples/sites/demos/pc/app/tree-menu/props-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/props-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <tiny-tree-menu :data="treeData" :props="mapField"></tiny-tree-menu>
+  <tiny-tree-menu class="demo-tree-menu" :data="treeData" :props="mapField"></tiny-tree-menu>
 </template>
 
 <script setup>
@@ -122,8 +122,8 @@ const treeData = reactive([
 </script>
 
 <style lang="less" scoped>
-.tiny-tree-menu {
-  height: 300px;
+.demo-tree-menu ::v-deep .tiny-tree {
+  height: 320px;
   overflow: auto;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/tree-menu/show-checkbox-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/show-checkbox-composition-api.vue
index 3765ea92b4..f9b936b97d 100644
--- a/examples/sites/demos/pc/app/tree-menu/show-checkbox-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/show-checkbox-composition-api.vue
@@ -1,10 +1,16 @@
 <template>
   <div>
     <p>场景1：节点可勾选 + 默认选中</p>
-    <tiny-tree-menu node-key="id" show-checkbox :data="treeData" :default-checked-keys="expandeArr"></tiny-tree-menu>
+    <tiny-tree-menu
+      class="demo-tree-menu"
+      node-key="id"
+      show-checkbox
+      :data="treeData"
+      :default-checked-keys="expandeArr"
+    ></tiny-tree-menu>
     <br /><br />
     <p>场景2：节点可勾选 + 父子级不相关联</p>
-    <tiny-tree-menu :data="treeData" show-checkbox check-strictly></tiny-tree-menu>
+    <tiny-tree-menu class="demo-tree-menu" :data="treeData" show-checkbox check-strictly></tiny-tree-menu>
   </div>
 </template>
 
@@ -170,8 +176,8 @@ const treeData = ref([
 </script>
 
 <style lang="less" scoped>
-.tiny-tree-menu {
-  height: 300px;
+.demo-tree-menu ::v-deep .tiny-tree {
+  height: 320px;
   overflow: auto;
 }
 p {
diff --git a/examples/sites/demos/pc/app/tree-menu/show-checkbox.vue b/examples/sites/demos/pc/app/tree-menu/show-checkbox.vue
index d77f8f6df5..deb99c552d 100644
--- a/examples/sites/demos/pc/app/tree-menu/show-checkbox.vue
+++ b/examples/sites/demos/pc/app/tree-menu/show-checkbox.vue
@@ -1,10 +1,16 @@
 <template>
   <div>
     <p>场景1：节点可勾选 + 默认选中</p>
-    <tiny-tree-menu node-key="id" show-checkbox :data="treeData" :default-checked-keys="expandeArr"></tiny-tree-menu>
+    <tiny-tree-menu
+      class="demo-tree-menu"
+      node-key="id"
+      show-checkbox
+      :data="treeData"
+      :default-checked-keys="expandeArr"
+    ></tiny-tree-menu>
     <br /><br />
     <p>场景2：节点可勾选 + 父子级不相关联</p>
-    <tiny-tree-menu :data="treeData" show-checkbox check-strictly></tiny-tree-menu>
+    <tiny-tree-menu class="demo-tree-menu" :data="treeData" show-checkbox check-strictly></tiny-tree-menu>
   </div>
 </template>
 
@@ -179,8 +185,8 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.tiny-tree-menu {
-  height: 300px;
+.demo-tree-menu ::v-deep .tiny-tree {
+  height: 320px;
   overflow: auto;
 }
 p {
diff --git a/examples/sites/demos/pc/app/tree-menu/show-filter-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/show-filter-composition-api.vue
index 2098cd5ccd..2bbb25dbdd 100644
--- a/examples/sites/demos/pc/app/tree-menu/show-filter-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/show-filter-composition-api.vue
@@ -8,10 +8,14 @@
         <tiny-radio label="hide"> 默认不变 </tiny-radio>
       </tiny-radio-group>
     </div>
-    <tiny-tree-menu :highlight-query="highlightQuery === 'show'" :data="treeData"></tiny-tree-menu>
+    <tiny-tree-menu
+      class="demo-tree-menu"
+      :highlight-query="highlightQuery === 'show'"
+      :data="treeData"
+    ></tiny-tree-menu>
     <br /><br />
     <p>场景2：不可过滤 + 不设置原生 title 属性</p>
-    <tiny-tree-menu :data="treeData" :show-filter="false" :show-title="false"></tiny-tree-menu>
+    <tiny-tree-menu class="demo-tree-menu" :data="treeData" :show-filter="false" :show-title="false"></tiny-tree-menu>
   </div>
 </template>
 
@@ -178,8 +182,8 @@ const treeData = ref([
 </script>
 
 <style lang="less" scoped>
-.tiny-tree-menu {
-  height: 300px;
+.demo-tree-menu ::v-deep .tiny-tree {
+  height: 320px;
   overflow: auto;
 }
 p {
diff --git a/examples/sites/demos/pc/app/tree-menu/show-filter.vue b/examples/sites/demos/pc/app/tree-menu/show-filter.vue
index faf1c08c7e..dad647ca31 100644
--- a/examples/sites/demos/pc/app/tree-menu/show-filter.vue
+++ b/examples/sites/demos/pc/app/tree-menu/show-filter.vue
@@ -8,10 +8,14 @@
         <tiny-radio label="hide"> 默认不变 </tiny-radio>
       </tiny-radio-group>
     </div>
-    <tiny-tree-menu :highlight-query="highlightQuery === 'show'" :data="treeData"></tiny-tree-menu>
+    <tiny-tree-menu
+      class="demo-tree-menu"
+      :highlight-query="highlightQuery === 'show'"
+      :data="treeData"
+    ></tiny-tree-menu>
     <br /><br />
     <p>场景2：不可过滤 + 不设置原生 title 属性</p>
-    <tiny-tree-menu :data="treeData" :show-filter="false" :show-title="false"></tiny-tree-menu>
+    <tiny-tree-menu class="demo-tree-menu" :data="treeData" :show-filter="false" :show-title="false"></tiny-tree-menu>
   </div>
 </template>
 
@@ -187,8 +191,8 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.tiny-tree-menu {
-  height: 300px;
+.demo-tree-menu ::v-deep .tiny-tree {
+  height: 320px;
   overflow: auto;
 }
 p {
diff --git a/examples/sites/demos/pc/app/tree-menu/show-number-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/show-number-composition-api.vue
index 03d26b8be2..d62494dc04 100644
--- a/examples/sites/demos/pc/app/tree-menu/show-number-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/show-number-composition-api.vue
@@ -1,5 +1,6 @@
 <template>
   <tiny-tree-menu
+    class="demo-tree-menu"
     :data="treeData"
     default-expand-all
     show-number
@@ -124,8 +125,8 @@ const treeData = reactive([
 </script>
 
 <style lang="less" scoped>
-.tiny-tree-menu {
-  height: 300px;
+.demo-tree-menu ::v-deep .tiny-tree {
+  height: 320px;
   overflow: auto;
 }
 p {
diff --git a/examples/sites/demos/pc/app/tree-menu/show-number.vue b/examples/sites/demos/pc/app/tree-menu/show-number.vue
index 69f26cb862..5a4f553264 100644
--- a/examples/sites/demos/pc/app/tree-menu/show-number.vue
+++ b/examples/sites/demos/pc/app/tree-menu/show-number.vue
@@ -1,5 +1,6 @@
 <template>
   <tiny-tree-menu
+    class="demo-tree-menu"
     :data="treeData"
     default-expand-all
     show-number
@@ -132,8 +133,8 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.tiny-tree-menu {
-  height: 300px;
+.demo-tree-menu ::v-deep .tiny-tree {
+  height: 320px;
   overflow: auto;
 }
 p {
diff --git a/examples/sites/demos/pc/app/tree-menu/text-ellipsis-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/text-ellipsis-composition-api.vue
index bb2ae7cfe5..698842b817 100644
--- a/examples/sites/demos/pc/app/tree-menu/text-ellipsis-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/text-ellipsis-composition-api.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
     <p>场景1：文字超长省略显示</p>
-    <tiny-tree-menu :data="treeData" ellipsis></tiny-tree-menu>
+    <tiny-tree-menu class="demo-tree-menu" :data="treeData" ellipsis></tiny-tree-menu>
     <br />
     <p>场景2：文字超长换行显示</p>
-    <tiny-tree-menu :data="treeData" wrap></tiny-tree-menu>
+    <tiny-tree-menu class="demo-tree-menu" :data="treeData" wrap></tiny-tree-menu>
   </div>
 </template>
 
@@ -169,8 +169,8 @@ const treeData = ref([
 </script>
 
 <style lang="less" scoped>
-.tiny-tree-menu {
-  height: 300px;
+.demo-tree-menu ::v-deep .tiny-tree {
+  height: 320px;
   overflow: auto;
 }
 p {
diff --git a/examples/sites/demos/pc/app/tree-menu/text-ellipsis.vue b/examples/sites/demos/pc/app/tree-menu/text-ellipsis.vue
index 8f80fc8c9a..9a2a1ac62e 100644
--- a/examples/sites/demos/pc/app/tree-menu/text-ellipsis.vue
+++ b/examples/sites/demos/pc/app/tree-menu/text-ellipsis.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
     <p>场景1：文字超长点点点</p>
-    <tiny-tree-menu :data="treeData" ellipsis></tiny-tree-menu>
+    <tiny-tree-menu class="demo-tree-menu" :data="treeData" ellipsis></tiny-tree-menu>
     <br /><br />
     <p>场景2：文字超长换行</p>
-    <tiny-tree-menu :data="treeData" wrap></tiny-tree-menu>
+    <tiny-tree-menu class="demo-tree-menu" :data="treeData" wrap></tiny-tree-menu>
   </div>
 </template>
 
@@ -181,8 +181,8 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.tiny-tree-menu {
-  height: 300px;
+.demo-tree-menu ::v-deep .tiny-tree {
+  height: 320px;
   overflow: auto;
 }
 p {
diff --git a/packages/theme/src/tree-menu/index.less b/packages/theme/src/tree-menu/index.less
index 750b06780d..5dee1c8052 100644
--- a/packages/theme/src/tree-menu/index.less
+++ b/packages/theme/src/tree-menu/index.less
@@ -129,7 +129,7 @@
   .@{input-prefix-cls} {
     margin: var(--ti-tree-menu-padding-top) var(--ti-tree-menu-padding-left);
     position: relative;
-    max-width: 180px;
+    max-width: 188px;
 
     &:before {
       content: '';
@@ -144,6 +144,12 @@
 
   .@{tree-prefix-cls} {
     padding-top: 8px;
+
+    &::-webkit-scrollbar {
+      width: 8px;
+      margin-right: 4px;
+    }
+
     .@{tree-node-prefix-cls} {
       &.is-disabled {
         & > .@{tree-node-prefix-cls}__content a {
diff --git a/packages/theme/src/tree-menu/vars.less b/packages/theme/src/tree-menu/vars.less
index e11bdc6cca..f45312fa16 100644
--- a/packages/theme/src/tree-menu/vars.less
+++ b/packages/theme/src/tree-menu/vars.less
@@ -14,7 +14,7 @@
   // 宽度
   --ti-tree-menu-width: calc(var(--ti-common-space-10, 10px) * 22);
   // 节点高度
-  --ti-tree-menu-node-height: var(--ti-common-size-8x, 32px);
+  --ti-tree-menu-node-height: 30px;
   // 节点高度直接距离
   --ti-tree-menu-node-margin-bottom: var(--ti-common-size-base, 4px);
   // 空数据显示文本字号(hide)
@@ -42,13 +42,13 @@
   // 输入框下面的线
   --ti-tree-menu-border-top-color: #f0f0f0;
   // 输入框距离左边的距离
-  --ti-tree-menu-padding-left: 20px;
+  --ti-tree-menu-padding-left: 16px;
   // 节点序号字号
   --ti-tree-menu-node-number-font-size: var(--ti-common-font-size-0);
   // 活跃节点竖线与文本的间距
   --ti-tree-menu-node-vertical-line-margin-right: var(--ti-common-size-4x, 16px);
   // 输入框与文本的间距
-  --ti-tree-menu-padding-top: var(--ti-common-size-5x);
+  --ti-tree-menu-padding-top: var(--ti-common-size-4x);
   // 前缀图标右边距
   --ti-tree-menu-prefix-icon-margin-right: var(--ti-common-size-2x, 8px);
   // 禁用文本色

From bf7442c926127af046a52a917f48602ef55a3d36 Mon Sep 17 00:00:00 2001
From: wuyiping0628 <1106773985@qq.com>
Date: Wed, 16 Oct 2024 00:38:28 -0700
Subject: [PATCH 6/9] feat(tree-menu): [tree-menu] conflict resolution

---
 .husky/pre-commit | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.husky/pre-commit b/.husky/pre-commit
index 9f5c7d2442..36af219892 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-# npx lint-staged
+npx lint-staged

From 1e1ab963f2f008fbeb38c7280552475e439886e6 Mon Sep 17 00:00:00 2001
From: wuyiping0628 <1106773985@qq.com>
Date: Thu, 17 Oct 2024 02:13:02 -0700
Subject: [PATCH 7/9] refactor(tree-menu): [tree-menu] refactor tree-menu thems
 vars

---
 .../demos/pc/app/tree-menu/draggable.spec.ts  |  4 +-
 .../pc/app/tree-menu/menu-collapsible.spec.ts |  2 +-
 packages/theme/src/tree-menu/index.less       | 68 +++++++++++--------
 packages/theme/src/tree-menu/vars.less        | 48 ++++++-------
 4 files changed, 67 insertions(+), 55 deletions(-)

diff --git a/examples/sites/demos/pc/app/tree-menu/draggable.spec.ts b/examples/sites/demos/pc/app/tree-menu/draggable.spec.ts
index 8f07e5f021..91a993572c 100644
--- a/examples/sites/demos/pc/app/tree-menu/draggable.spec.ts
+++ b/examples/sites/demos/pc/app/tree-menu/draggable.spec.ts
@@ -17,7 +17,7 @@ test('拖动菜单', async ({ page }) => {
 
   await page.mouse.move(x0, y0)
   await page.mouse.down()
-  await page.mouse.move(x0, y0 + 80)
+  await page.mouse.move(x0, y0 + 64)
   await page.mouse.up()
 
   await node.hover()
@@ -41,7 +41,7 @@ test('拖动菜单', async ({ page }) => {
 
   await page.mouse.move(x2, y2)
   await page.mouse.down()
-  await page.mouse.move(x2, y2 + 80)
+  await page.mouse.move(x2, y2 + 64)
   await page.mouse.up()
   await expect(treeMenu.getByRole('treeitem', { name: '指南' }).getByRole('treeitem', { name: '首页' })).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/tree-menu/menu-collapsible.spec.ts b/examples/sites/demos/pc/app/tree-menu/menu-collapsible.spec.ts
index 6df6c1fed1..dcffe14527 100644
--- a/examples/sites/demos/pc/app/tree-menu/menu-collapsible.spec.ts
+++ b/examples/sites/demos/pc/app/tree-menu/menu-collapsible.spec.ts
@@ -15,5 +15,5 @@ test('菜单可折叠', async ({ page }) => {
   await expect(treeMenu).toHaveCSS('width', '0px')
   await toggleBtn.click()
   await expect(treeMenu).not.toHaveClass(/is-collapsed/)
-  await expect(treeMenu).toHaveCSS('width', '270px')
+  await expect(treeMenu).toHaveCSS('width', '220px')
 })
diff --git a/packages/theme/src/tree-menu/index.less b/packages/theme/src/tree-menu/index.less
index e6df8bcbd4..5dbf48eb05 100644
--- a/packages/theme/src/tree-menu/index.less
+++ b/packages/theme/src/tree-menu/index.less
@@ -19,11 +19,11 @@
 @tree-menu-prefix-cls: ~'@{css-prefix}tree-menu';
 
 .@{tree-menu-prefix-cls} {
-  .component-css-vars-tree-menu();
+  .inject-TreeMenu-vars();
 
-  width: var(--ti-tree-menu-width);
+  width: var(--tv-TreeMenu-width);
   position: relative;
-  font-size: var(--ti-tree-menu-font-size);
+  font-size: var(--tv-TreeMenu-font-size);
   transition: width 0.5s;
   background: #fff;
 
@@ -41,12 +41,20 @@
     line-height: 18px;
     background-color: #fff;
     box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.06);
-    border: 1px solid var(--ti-tree-menu-border-color);
+    border: 1px solid var(--tv-TreeMenu-border-color);
 
     .tiny-svg {
       margin-left: 2px;
-      fill: var(--ti-tree-menu-collapse-icon-fill-color);
+      fill: var(--tv-TreeMenu-collapse-icon-fill-color);
       font-size: 16px;
+
+      &:hover {
+        fill: var(--tv-TreeMenu-collapse-icon-hover-color);
+      }
+
+      &:focus {
+        fill: var(--tv-TreeMenu-collapse-icon-hover-color);
+      }
     }
   }
 
@@ -65,13 +73,14 @@
       width: 22px;
       height: 22px;
       cursor: pointer;
+      fill: var(--tv-TreeMenu-collapse-icon-fill-color);
 
       &:hover {
-        fill: var(--ti-tree-menu-collapse-icon-hover-color);
+        fill: var(--tv-TreeMenu-collapse-icon-hover-color);
       }
 
       &:focus {
-        fill: var(--ti-tree-menu-collapse-icon-hover-color);
+        fill: var(--tv-TreeMenu-collapse-icon-hover-color);
       }
     }
   }
@@ -118,7 +127,7 @@
 
   &:before {
     content: '';
-    border-right: 1px solid var(--ti-tree-menu-border-color);
+    border-right: 1px solid var(--tv-TreeMenu-border-color);
     position: absolute;
     top: 0;
     right: 0;
@@ -127,7 +136,7 @@
   }
 
   .@{input-prefix-cls} {
-    margin: var(--ti-tree-menu-padding-top) var(--ti-tree-menu-padding-left);
+    margin: var(--tv-TreeMenu-padding-top) var(--tv-TreeMenu-padding-left);
     position: relative;
     max-width: 188px;
 
@@ -136,9 +145,10 @@
       position: absolute;
       left: 0;
       right: 0;
-      top: 50px;
+      top: 48px;
       bottom: 0;
-      border-top: 1px solid  var(--ti-tree-menu-border-top-color);
+      z-index: 2;
+      border-top: 1px solid  var(--tv-TreeMenu-border-top-color);
     }
   }
 
@@ -156,26 +166,26 @@
           cursor: not-allowed;
 
           .tree-node-name {
-            color: var(--ti-tree-menu-disabled-text-color);
+            color: var(--tv-TreeMenu-disabled-text-color);
             font-weight: normal;
           }
         }
       }
 
       .@{tree-node-prefix-cls}__expand-icon {
-        font-size: 16px;
+        font-size: var(--tv-TreeMenu-expand-icon-font-size);
       }
 
       .@{tree-node-prefix-cls}__content {
-        height: var(--ti-tree-menu-node-height);
-        line-height: var(--ti-tree-menu-node-height);
+        height: var(--tv-TreeMenu-node-height);
+        line-height: var(--tv-TreeMenu-node-height);
         overflow: hidden;
         padding-left: 0;
-        margin-bottom: var(--ti-tree-menu-node-margin-bottom);
+        margin-bottom: var(--tv-TreeMenu-node-margin-bottom);
 
         .tree-node-icon {
           order: 10;
-          margin-right: var(--ti-tree-menu-collapse-icon-margin-right);
+          margin-right: var(--tv-TreeMenu-collapse-icon-margin-right);
         }
 
         .tree-node-number {
@@ -184,8 +194,8 @@
           right: 16px;
           max-width: 36px;
           overflow: hidden;
-          font-size: var(--ti-tree-menu-node-number-font-size);
-          color: var(--ti-tree-menu-node-number-color);
+          font-size: var(--tv-TreeMenu-node-number-font-size);
+          color: var(--tv-TreeMenu-node-number-color);
         }
 
         .tree-node {
@@ -195,14 +205,14 @@
         .tree-node-name {
           display: flex;
           align-items: center;
-          padding: 0 var(--ti-tree-menu-node-body-text-padding-horizontal);
+          padding: 0 var(--tv-TreeMenu-node-body-text-padding-horizontal);
 
           &:hover {
             font-weight: 700;
           }
 
           svg {
-            margin-right: var(--ti-tree-menu-prefix-icon-margin-right);
+            margin-right: var(--tv-TreeMenu-prefix-icon-margin-right);
           }
         }
       }
@@ -213,7 +223,7 @@
       }
 
       .@{tree-node-prefix-cls}__content:hover {
-        background-color: var(--ti-tree-menu-node-hover-bg-color);
+        background-color: var(--tv-TreeMenu-node-hover-bg-color);
 
         .@{tree-node-prefix-cls}__label {
           background-color: transparent;
@@ -222,16 +232,16 @@
 
       .@{tree-node-prefix-cls}__content-left {
         position: relative;
-        padding-left: var(--ti-tree-menu-node-vertical-line-margin-right);
+        padding-left: var(--tv-TreeMenu-node-vertical-line-margin-right);
       }
 
       &.is-current {
         & > .@{tree-node-prefix-cls}__content {
-          background-color: var(--ti-tree-menu-node-selected-bg-color);
+          background-color: var(--tv-TreeMenu-node-selected-bg-color);
           position: relative;
 
           .tree-node-body {
-            color: var(--ti-tree-menu-node-current-text-color);
+            color: var(--tv-TreeMenu-node-current-text-color);
           }
         }
         & > .@{tree-node-prefix-cls}__content::before {
@@ -242,12 +252,12 @@
           display: inline-block;
           height: 32px;
           transform: translateY(-50%);
-          border-left: 2px solid var(--ti-tree-menu-square-left-border-color);
+          border-left: 2px solid var(--tv-TreeMenu-square-left-border-color);
         }
       }
 
       .tree-node-body {
-        color: var(--ti-tree-menu-node-body-text-color);
+        color: var(--tv-TreeMenu-node-body-text-color);
         display: block;
 
         &,
@@ -296,12 +306,12 @@
   & &__wrap {
     &.@{tree-prefix-cls} {
       .@{tree-node-prefix-cls}__content {
-        min-height: var(--ti-tree-menu-node-height);
+        min-height: var(--tv-TreeMenu-node-height);
         height: auto;
       }
 
       .tree-node-body {
-        min-height: var(--ti-tree-menu-node-height);
+        min-height: var(--tv-TreeMenu-node-height);
         display: flex;
         align-items: center;
       }
diff --git a/packages/theme/src/tree-menu/vars.less b/packages/theme/src/tree-menu/vars.less
index 315acd7230..4d59b4fddd 100644
--- a/packages/theme/src/tree-menu/vars.less
+++ b/packages/theme/src/tree-menu/vars.less
@@ -10,49 +10,51 @@
 *
 */
 
-.component-css-vars-tree-menu() {
+.inject-TreeMenu-vars() {
   // 宽度
-  --ti-tree-menu-width: calc(var(--ti-common-space-10, 10px) * 22);
+  --tv-TreeMenu-width: 220px;
   // 节点高度
-  --ti-tree-menu-node-height: 30px;
+  --tv-TreeMenu-node-height: var(--tv-size-height-md);
   // 节点高度直接距离
-  --ti-tree-menu-node-margin-bottom: var(--ti-common-size-base, 4px);
+  --tv-TreeMenu-node-margin-bottom: var(--tv-space-base);
   // 空数据显示文本字号(hide)
-  --ti-tree-menu-font-size: var(--ti-common-font-size-base, 14px);
+  --tv-TreeMenu-font-size: var(--tv-font-size-md);
   // 边框色
-  --ti-tree-menu-border-color: var(--ti-common-color-light, #ffffff);
+  --tv-TreeMenu-border-color: var(--tv-color-border-divider);
   // 节点水平内边距
-  --ti-tree-menu-node-body-text-padding-horizontal: 0;
+  --tv-TreeMenu-node-body-text-padding-horizontal: 0;
   // 选中节点的背景色
-  --ti-tree-menu-node-selected-bg-color: var(--ti-common-color-bg-normal, #f5f5f5);
+  --tv-TreeMenu-node-selected-bg-color: var(--tv-color-bg-active);
   // 选中节点文本色
-  --ti-tree-menu-node-current-text-color: var(--ti-common-color-text-primary, #191919);
+  --tv-TreeMenu-node-current-text-color: var(--tv-color-act-primary-text-active);
   // 选中节点左边框色
-  --ti-tree-menu-square-left-border-color: var(--ti-common-color-icon-active, #191919);
+  --tv-TreeMenu-square-left-border-color: var(--tv-color-border-active);
   // 未选中节点文本色
-  --ti-tree-menu-node-body-text-color: var(--ti-common-color-text-primary, #191919);
+  --tv-TreeMenu-node-body-text-color: var(--tv-color-act-primary-text-active);
   // 节点悬浮背景色
-  --ti-tree-menu-node-hover-bg-color: var(--ti-common-color-hover-background, #f5f5f5);
+  --tv-TreeMenu-node-hover-bg-color: var(--tv-color-bg-hover);
   // 折叠图标颜色
-  --ti-tree-menu-collapse-icon-fill-color: var(--ti-common-color-icon-normal, #808080);
+  --tv-TreeMenu-collapse-icon-fill-color: var(--tv-color-icon);
   // 底部折叠按钮
-  --ti-tree-menu-collapse-icon-hover-color: var(--ti-common-bg-color-focus, #0067d1);
+  --tv-TreeMenu-collapse-icon-hover-color: var(--tv-color-icon-active);
   // 折叠图标右边距
-  --ti-tree-menu-collapse-icon-margin-right: var(--ti-common-size-5x, 20px);
+  --tv-TreeMenu-collapse-icon-margin-right: 20px;
   // 输入框下面的线
-  --ti-tree-menu-border-top-color: #f0f0f0;
+  --tv-TreeMenu-border-top-color: var(--tv-color-border-divider);
   // 输入框距离左边的距离
-  --ti-tree-menu-padding-left: 16px;
+  --tv-TreeMenu-padding-left: var(--tv-space-xl);
   // 节点序号字号
-  --ti-tree-menu-node-number-font-size: var(--ti-common-font-size-0, 12px);
+  --tv-TreeMenu-node-number-font-size: var(--tv-font-size-sm);
   // 活跃节点竖线与文本的间距
-  --ti-tree-menu-node-vertical-line-margin-right: var(--ti-common-size-4x, 16px);
+  --tv-TreeMenu-node-vertical-line-margin-right: var(--tv-space-xl);
   // 输入框与文本的间距
-  --ti-tree-menu-padding-top: var(--ti-common-size-4x);
+  --tv-TreeMenu-padding-top: var(--tv-space-xl);
   // 前缀图标右边距
-  --ti-tree-menu-prefix-icon-margin-right: var(--ti-common-size-2x, 8px);
+  --tv-TreeMenu-prefix-icon-margin-right: var(--tv-space-md);
   // 禁用文本色
-  --ti-tree-menu-disabled-text-color: var(--ti-common-color-text-disabled, #c2c2c2);
+  --tv-TreeMenu-disabled-text-color: var(--tv-color-text-disabled);
+  // 切换图标大小
+  --tv-TreeMenu-expand-icon-font-size: var(--tv-font-size-md);
   // 数字文本色
-  --ti-tree-menu-node-number-color: var(--ti-common-color-text-weaken, #808080);
+  --tv-TreeMenu-node-number-color: var(--tv-color-text-weaken);
 }

From 5f7e38b3f9e93ddb0da66f836d24e01e967a3507 Mon Sep 17 00:00:00 2001
From: wuyiping0628 <1106773985@qq.com>
Date: Thu, 17 Oct 2024 02:18:14 -0700
Subject: [PATCH 8/9] refactor(tree-menu): [tree-menu] refactor tree-menu thems
 vars

---
 examples/sites/demos/pc/app/tree-menu/clearable.spec.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/examples/sites/demos/pc/app/tree-menu/clearable.spec.ts b/examples/sites/demos/pc/app/tree-menu/clearable.spec.ts
index 86c728894d..c90941f58b 100644
--- a/examples/sites/demos/pc/app/tree-menu/clearable.spec.ts
+++ b/examples/sites/demos/pc/app/tree-menu/clearable.spec.ts
@@ -8,7 +8,6 @@ test('搜索框可清除', async ({ page }) => {
 
   await page.goto('tree-menu#clearable')
 
-  await page.locator('#clearable').getByRole('textbox', { name: '输入关键字搜索' }).click()
   await page.locator('#clearable').getByRole('textbox', { name: '输入关键字搜索' }).click()
   await page.locator('#clearable').getByRole('textbox', { name: '输入关键字搜索' }).fill('123')
   await expect(page.getByText('暂无数据')).toBeVisible()

From eed28718e8cc0a22a67bee5251ee7c1d6a64d252 Mon Sep 17 00:00:00 2001
From: wuyiping0628 <1106773985@qq.com>
Date: Thu, 17 Oct 2024 04:58:30 -0700
Subject: [PATCH 9/9] refactor(tree-menu): [tree-menu] refactor tree-menu thems
 vars

---
 packages/theme/src/tree-menu/index.less | 4 ++--
 packages/theme/src/tree-menu/vars.less  | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/theme/src/tree-menu/index.less b/packages/theme/src/tree-menu/index.less
index 5dbf48eb05..7125966137 100644
--- a/packages/theme/src/tree-menu/index.less
+++ b/packages/theme/src/tree-menu/index.less
@@ -173,7 +173,7 @@
       }
 
       .@{tree-node-prefix-cls}__expand-icon {
-        font-size: var(--tv-TreeMenu-expand-icon-font-size);
+        font-size: var(--tv-TreeMenu-expand-icon-size);
       }
 
       .@{tree-node-prefix-cls}__content {
@@ -205,7 +205,7 @@
         .tree-node-name {
           display: flex;
           align-items: center;
-          padding: 0 var(--tv-TreeMenu-node-body-text-padding-horizontal);
+          padding: 0 var(--tv-TreeMenu-node-body-text-padding-x);
 
           &:hover {
             font-weight: 700;
diff --git a/packages/theme/src/tree-menu/vars.less b/packages/theme/src/tree-menu/vars.less
index 4d59b4fddd..e6d3f70403 100644
--- a/packages/theme/src/tree-menu/vars.less
+++ b/packages/theme/src/tree-menu/vars.less
@@ -22,7 +22,7 @@
   // 边框色
   --tv-TreeMenu-border-color: var(--tv-color-border-divider);
   // 节点水平内边距
-  --tv-TreeMenu-node-body-text-padding-horizontal: 0;
+  --tv-TreeMenu-node-body-text-padding-x: 0;
   // 选中节点的背景色
   --tv-TreeMenu-node-selected-bg-color: var(--tv-color-bg-active);
   // 选中节点文本色
@@ -36,7 +36,7 @@
   // 折叠图标颜色
   --tv-TreeMenu-collapse-icon-fill-color: var(--tv-color-icon);
   // 底部折叠按钮
-  --tv-TreeMenu-collapse-icon-hover-color: var(--tv-color-icon-active);
+  --tv-TreeMenu-collapse-icon-hover-color: var(--tv-color-icon-hover);
   // 折叠图标右边距
   --tv-TreeMenu-collapse-icon-margin-right: 20px;
   // 输入框下面的线
@@ -54,7 +54,7 @@
   // 禁用文本色
   --tv-TreeMenu-disabled-text-color: var(--tv-color-text-disabled);
   // 切换图标大小
-  --tv-TreeMenu-expand-icon-font-size: var(--tv-font-size-md);
+  --tv-TreeMenu-expand-icon-size: 14px;
   // 数字文本色
   --tv-TreeMenu-node-number-color: var(--tv-color-text-weaken);
 }