diff --git a/examples/sites/demos/pc/app/toggle-menu/automatic-filtering.spec.ts b/examples/sites/demos/pc/app/toggle-menu/automatic-filtering.spec.ts
index 52915892e5..435734022f 100644
--- a/examples/sites/demos/pc/app/toggle-menu/automatic-filtering.spec.ts
+++ b/examples/sites/demos/pc/app/toggle-menu/automatic-filtering.spec.ts
@@ -5,7 +5,7 @@ test('自动过滤', async ({ page }) => {
   await page.goto('toggle-menu#automatic-filtering')
   await page.getByRole('textbox', { name: '请输入过滤值' }).click()
   await page.getByRole('textbox', { name: '请输入过滤值' }).fill('组件')
+  await expect(page.getByRole('treeitem', { name: '引入组件' })).not.toBeVisible()
   await page.locator('.tiny-toggle-menu__filter-search > .tiny-svg').click()
-  await page.getByRole('treeitem', { name: '引入组件' }).locator('div').nth(3).click()
-  await expect(page.locator('.tiny-tree-node__content').first()).toContainText('组件')
+  await expect(page.getByRole('treeitem', { name: '引入组件' })).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/toggle-menu/drag-events.spec.ts b/examples/sites/demos/pc/app/toggle-menu/drag-events.spec.ts
index 5380a8aad9..4bc8e3ca3c 100644
--- a/examples/sites/demos/pc/app/toggle-menu/drag-events.spec.ts
+++ b/examples/sites/demos/pc/app/toggle-menu/drag-events.spec.ts
@@ -4,8 +4,7 @@ test('拖拽事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('toggle-menu#drag-events')
   await page.getByRole('treeitem', { name: '开发指南' }).getByRole('img').click()
-  await page.getByRole('treeitem', { name: '引入组件' }).locator('div').nth(3).click()
-  const dragNode = page.getByRole('treeitem', { name: '引入组件' }).locator('div').nth(3).boundingBox()
+  const dragNode = page.getByRole('treeitem', { name: '引入组件' }).boundingBox()
   // 开始拖拽
   const { x, y } = await dragNode
   await page.mouse.move(x, y)
diff --git a/examples/sites/demos/pc/app/toggle-menu/draggable.spec.ts b/examples/sites/demos/pc/app/toggle-menu/draggable.spec.ts
index 47334e44a7..241d0f75fe 100644
--- a/examples/sites/demos/pc/app/toggle-menu/draggable.spec.ts
+++ b/examples/sites/demos/pc/app/toggle-menu/draggable.spec.ts
@@ -3,16 +3,9 @@ import { test, expect } from '@playwright/test'
 test('拖拽节点', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('toggle-menu#draggable')
-  const dragNode = await page
-    .locator('div')
-    .filter({ hasText: /^其他组件$/ })
-    .nth(3)
-    .boundingBox()
-  const dragToNode = await await page
-    .locator('div')
-    .filter({ hasText: /^表单组件$/ })
-    .nth(3)
-    .boundingBox()
+  const demo = page.locator('#draggable')
+  const dragNode = await demo.getByRole('treeitem', { name: '其他组件', exact: true }).boundingBox()
+  const dragToNode = await demo.getByRole('treeitem', { name: '表单组件', exact: true }).boundingBox()
   // 开始拖拽
   const { x, y } = await dragNode
   const { x: dragToNodeX, y: dragToNodeY } = await dragToNode
@@ -21,7 +14,5 @@ test('拖拽节点', async ({ page }) => {
   await page.mouse.down()
   await page.mouse.move(dragToNodeX, dragToNodeY)
   await page.mouse.up()
-  await expect(page.getByRole('treeitem', { name: '其他组件', exact: true }).locator('div').nth(3)).toContainText(
-    /^其他组件$/
-  )
+  await expect(page.getByRole('treeitem', { name: '其他组件', exact: true })).toContainText(/^其他组件$/)
 })
diff --git a/packages/theme/src/toggle-menu/index.less b/packages/theme/src/toggle-menu/index.less
index 568155cf55..bfcc3a6a64 100644
--- a/packages/theme/src/toggle-menu/index.less
+++ b/packages/theme/src/toggle-menu/index.less
@@ -20,9 +20,9 @@
 @svg-prefix-cls: ~'@{css-prefix}svg';
 
 .@{toggle-menu-prefix-cls} {
-  .component-css-vars-toggle-menu();
+  .inject-ToggleMenu-vars();
 
-  width: var(--ti-toggle-menu-width);
+  width: var(--tv-ToggleMenu-width);
   position: relative;
 
   & &__body {
@@ -38,8 +38,8 @@
   }
 
   & &__name {
-    color: var(--ti-toggle-menu-name-text-color);
-    font-size: var(--ti-toggle-menu-font-size);
+    color: var(--tv-ToggleMenu-name-text-color);
+    font-size: var(--tv-ToggleMenu-font-size);
   }
 
   & &__tree {
@@ -53,9 +53,9 @@
   }
 
   & &__filter-search {
-    width: var(--ti-toggle-menu-filter-search-size);
-    height: var(--ti-toggle-menu-filter-search-size);
-    line-height: var(--ti-toggle-menu-filter-search-size);
+    width: var(--tv-ToggleMenu-filter-search-size);
+    height: var(--tv-ToggleMenu-filter-search-size);
+    line-height: var(--tv-ToggleMenu-filter-search-size);
     display: block;
     text-align: center;
     position: absolute;
@@ -63,8 +63,8 @@
     top: 0;
 
     .@{svg-prefix-cls} {
-      fill: var(--ti-toggle-menu-filter-search-icon-color);
-      font-size: var(--ti-toggle-menu-filter-search-font-size);
+      fill: var(--tv-ToggleMenu-filter-search-icon-color);
+      font-size: var(--tv-ToggleMenu-filter-search-svg-size);
     }
   }
 
@@ -74,18 +74,18 @@
     left: calc(100% - 14px);
     z-index: 2;
     width: 14px;
-    height: var(--ti-toggle-menu-filter-search-size);
-    line-height: var(--ti-toggle-menu-filter-search-size);
-    background: var(--ti-toggle-menu-toggle-bg-color);
+    height: var(--tv-ToggleMenu-filter-search-size);
+    line-height: var(--tv-ToggleMenu-filter-search-size);
+    background: var(--tv-ToggleMenu-toggle-bg-color);
     cursor: pointer;
     transition: 0.2s linear;
 
     .@{svg-prefix-cls} {
-      fill: var(--ti-toggle-menu-toggle-icon-color);
+      fill: var(--tv-ToggleMenu-toggle-icon-color);
     }
 
     &:hover .@{svg-prefix-cls} {
-      fill: var(--ti-toggle-menu-toggle-icon-color-hover);
+      fill: var(--tv-ToggleMenu-toggle-icon-color-hover);
     }
   }
 
@@ -106,7 +106,7 @@
       background: none;
 
       .@{svg-prefix-cls} {
-        fill: var(--ti-toggle-menu-toggle-icon-color-hover);
+        fill: var(--tv-ToggleMenu-toggle-icon-color-hover);
       }
     }
   }
@@ -123,7 +123,7 @@
   .@{tree-prefix-cls} {
     .is-current:not(.show-checkbox) {
       > .@{tree-node-prefix-cls}__content > .@{tree-node-prefix-cls}__content-left {
-        font-weight: var(--ti-toggle-menu-toggle-font-weight);
+        font-weight: var(--tv-ToggleMenu-toggle-font-weight);
       }
     }
 
@@ -134,8 +134,8 @@
     :not(.show-checkbox) > .@{tree-node-prefix-cls}__content .@{tree-node-prefix-cls}__label,
     .@{tree-node-prefix-cls}__content-right {
       &:hover {
-        background-color: var(--ti-toggle-menu-toggle-bg-hover-color);
-        font-weight: var(--ti-toggle-menu-toggle-font-weight);
+        background-color: var(--tv-ToggleMenu-toggle-bg-hover-color);
+        font-weight: var(--tv-ToggleMenu-toggle-font-weight);
       }
     }
 
@@ -176,7 +176,7 @@
   }
 
   .@{input-prefix-cls}__inner {
-    font-size: var(--ti-toggle-menu-font-size);
+    font-size: var(--tv-ToggleMenu-font-size);
     padding-right: 30px;
     border-radius: 0;
     border-top: 0;
@@ -185,9 +185,9 @@
   }
 
   .@{tree-node-prefix-cls}__content {
-    height: var(--ti-toggle-menu-tree-node-height);
-    line-height: var(--ti-toggle-menu-tree-node-height);
-    font-size: var(--ti-toggle-menu-font-size);
+    height: var(--tv-ToggleMenu-tree-node-height);
+    line-height: var(--tv-ToggleMenu-tree-node-height);
+    font-size: var(--tv-ToggleMenu-font-size);
     padding-left: 0;
     margin-left: 0;
   }
diff --git a/packages/theme/src/toggle-menu/vars.less b/packages/theme/src/toggle-menu/vars.less
index fefd0d429d..3e43781dbc 100644
--- a/packages/theme/src/toggle-menu/vars.less
+++ b/packages/theme/src/toggle-menu/vars.less
@@ -10,29 +10,29 @@
 *
 */
 
-.component-css-vars-toggle-menu() {
+.inject-ToggleMenu-vars() {
   // 收缩菜单宽度
-  --ti-toggle-menu-width: var(--ti-common-size-50x, 200px);
+  --tv-ToggleMenu-width: 200px;
   // 收缩菜单字号
-  --ti-toggle-menu-font-size: var(--ti-common-font-size-1, 14px);
+  --tv-ToggleMenu-font-size: var(--tv-font-size-md);
   // 收缩菜单列表文本色
-  --ti-toggle-menu-name-text-color: var(--ti-common-color-text-primary, #191919);
+  --tv-ToggleMenu-name-text-color: var(--tv-color-text);
   // 收缩菜单列表项高度
-  --ti-toggle-menu-tree-node-height: var(--ti-common-size-8x, 32px);
+  --tv-ToggleMenu-tree-node-height: 32px;
   // 收缩菜单收缩搜索高度
-  --ti-toggle-menu-filter-search-size: var(--ti-common-size-7x, 28px);
+  --tv-ToggleMenu-filter-search-size: 28px;
   // 收缩菜单输入框搜索图标尺寸
-  --ti-toggle-menu-filter-search-font-size: var(--ti-common-font-size-2, 16px);
+  --tv-ToggleMenu-filter-search-svg-size: var(--tv-icon-size);
   // 收缩菜单搜索图标色
-  --ti-toggle-menu-filter-search-icon-color: var(--ti-base-color-brand-6, #191919);
+  --tv-ToggleMenu-filter-search-icon-color: var(--tv-color-icon);
   // 收缩菜单收缩图标色
-  --ti-toggle-menu-toggle-icon-color: var(--ti-base-color-brand-6, #191919);
+  --tv-ToggleMenu-toggle-icon-color: var(--tv-color-icon);
   // 收缩菜单收缩图标悬浮色
-  --ti-toggle-menu-toggle-icon-color-hover: var(--ti-common-color-primary-hover, #595959);
+  --tv-ToggleMenu-toggle-icon-color-hover: var(--tv-color-icon-hover);
   // 收缩菜单收缩按钮背景色
-  --ti-toggle-menu-toggle-bg-color: var(--ti-common-color-border, #999999);
+  --tv-ToggleMenu-toggle-bg-color: var(--tv-color-bg-gray-2);
   // 收缩菜单选中字重色
-  --ti-toggle-menu-toggle-font-weight: var(--ti-common-font-weight-6, 600);
+  --tv-ToggleMenu-toggle-font-weight: var(--tv-font-weight-bold);
   // 收缩菜单收缩标签悬浮背景色
-  --ti-toggle-menu-toggle-bg-hover-color: var(--ti-common-color-hover-background, #f5f5f5);
+  --tv-ToggleMenu-toggle-bg-hover-color: var(--tv-color-bg-hover);
 }