refactor(tree-menu): [tree-menu] refactor tree-menu thems vars

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>

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>

examples/sites/demos/pc/app/tree-menu/clearable.spec.ts

@@ -8,13 +8,12 @@ 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: '输入关键字搜索' }).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()
 })

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>

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>

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>

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 {

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 {

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>

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()
 })

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 {

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 {

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')
 })

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>

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 {

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 {

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 {

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 {

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 {