Feat(tree-menu)：树折叠时，支持悬浮展示子菜单列表，无子菜单时，悬浮展示tooltip

examples/sites/demos/apis/tree-menu.js

@@ -342,6 +342,29 @@ export default {
           mode: ['pc'],
           pcDemo: 'show-expand'
         },
+        {
+          name: 'expand-menu-popable',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '启用一键展开/收起功能下。是否支持悬浮展示子菜单',
+            'en-US':
+              'when the one click expand/collapse function enabled. whether to support hovering to display submenus'
+          },
+          mode: ['pc'],
+          pcDemo: 'pop-sub-menu'
+        },
+        {
+          name: 'popper-class',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '悬浮展示子菜单时，弹窗的类名',
+            'en-US': 'when hovering to display submenus, the class name of the pop-up window'
+          },
+          mode: ['pc'],
+          pcDemo: 'pop-sub-menu'
+        },
         {
           name: 'show-filter',
           type: 'boolean',

examples/sites/demos/pc/app/tree-menu/pop-sub-menu-composition-api.vue

@@ -0,0 +1,123 @@
+<template>
+  <tiny-tree-menu placeholder="输入关键字搜索" :data="treeData" show-expand expand-menu-popable></tiny-tree-menu>
+</template>
+
+<script setup>
+import { TinyTreeMenu } from '@opentiny/vue'
+import { ref } from 'vue'
+
+const treeData = ref([
+  {
+    id: 100,
+    label: '首页',
+    customIcon: iconApp()
+  },
+  {
+    id: 200,
+    label: '指南',
+    customIcon: iconExpressSearch(),
+    children: [
+      {
+        id: 201,
+        label: '引入组件',
+        children: [
+          { id: 20101, label: '按需引入' },
+          { id: 20102, label: '完整引入', customIcon: iconApp() }
+        ]
+      },
+      { id: 202, label: '后端适配器' },
+      { id: 203, label: '服务代理' },
+      { id: 204, label: '构建部署' }
+    ]
+  },
+  {
+    id: 300,
+    label: '组件',
+    customIcon: iconTotal(),
+    children: [
+      {
+        id: 300,
+        label: '组件'
+      },
+      {
+        id: 301,
+        label: '表单组件',
+        children: [
+          {
+            id: 30101,
+            label: 'Button 按钮',
+            url: 'button'
+          },
+          { id: 30102, label: 'Datepicker 日期', url: '' },
+          { id: 30103, label: 'Dropdown 下拉框', url: '' },
+          { id: 30104, label: 'DropTimes 下拉时间', url: '' },
+          { id: 30105, label: 'Input 输入框', url: '' }
+        ]
+      },
+      { id: 302, label: '数据组件' },
+      { id: 303, label: '导航组件' },
+      { id: 304, label: '业务组件' }
+    ]
+  },
+  {
+    id: 400,
+    label: '教程',
+    customIcon: iconUnfreeze(),
+    children: [
+      {
+        id: 401,
+        label: '页面布局',
+        children: [
+          { id: 40101, label: '添加标签页', url: '' },
+          { id: 40102, label: '标签页配置', url: '' }
+        ]
+      },
+      {
+        id: 402,
+        label: '查询功能',
+        children: [
+          { id: 40201, label: '添加查询页面', url: '' },
+          { id: 40202, label: '列表属性配置', url: '' },
+          { id: 40203, label: '通讯录查询', url: '' }
+        ]
+      },
+      {
+        id: 403,
+        label: '新增功能',
+        children: [
+          { id: 40301, label: '表单新增功能', url: '' },
+          { id: 40302, label: '表单数据验证', url: '' }
+        ]
+      },
+      {
+        id: 404,
+        label: '编辑功能',
+        children: [
+          { id: 40401, label: '开启编辑功能', url: '' },
+          { id: 40402, label: '保存表格数据', url: '' }
+        ]
+      }
+    ]
+  },
+  {
+    id: 500,
+    label: '规范',
+    customIcon: iconFile()
+  },
+  {
+    id: 600,
+    label: '性能',
+    customIcon: iconFile()
+  },
+  {
+    id: 700,
+    label: '案例',
+    customIcon: iconFile()
+  },
+  {
+    id: 800,
+    label: '更新日志',
+    customIcon: iconFile()
+  }
+])
+</script>

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

@@ -0,0 +1,26 @@
+import { test, expect } from '@playwright/test'
+
+test('静态数据', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree-menu#basic-usage')
+
+  const wrap = page.locator('#basic-usage')
+  const treeMenu = wrap.locator('.tiny-tree-menu')
+  const treeNode = treeMenu.locator('.tiny-tree-node__wrapper > .tiny-tree-node')
+  const treeNodeContent = treeNode.locator('> .tiny-tree-node__content')
+
+  await expect(treeNode.filter({ hasText: /^环境准备$/ })).toBeHidden()
+  await treeNodeContent.filter({ hasText: /^使用指南$/ }).click()
+  await expect(treeNode.filter({ hasText: /^环境准备$/ })).toBeVisible()
+  await treeNode.filter({ hasText: /^环境准备$/ }).click()
+  await expect(treeNode.filter({ hasText: /^环境准备$/ })).toHaveClass(/is-current/)
+  await treeNodeContent.filter({ hasText: /^使用指南$/ }).click()
+  await expect(treeNode.filter({ hasText: /^环境准备$/ })).toBeHidden()
+
+  // 过滤功能
+  await treeMenu.locator('.tiny-input__inner').fill('新增组件')
+  await expect(page.getByTitle('新增组件')).toBeVisible()
+  await expect(treeNodeContent.filter({ hasText: /^使用指南$/ })).toBeHidden()
+  await treeMenu.locator('.tiny-input__inner').clear()
+  await expect(treeNodeContent.filter({ hasText: /^使用指南$/ })).toBeVisible()
+})

examples/sites/demos/pc/app/tree-menu/pop-sub-menu.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="wrapper">
+    <div class="menu-fix">
+      <h4>浅色模式</h4>
+      <tiny-tree-menu :data="treeData" show-expand expand-menu-popable :show-filter="false"></tiny-tree-menu>
+    </div>
+
+    <div class="menu-fix">
+      <h4>深色模式</h4>
+      <tiny-tree-menu
+        class="my-dark-menu"
+        :show-filter="false"
+        :data="treeData"
+        show-expand
+        expand-menu-popable
+        popperClass="my-dark-menu"
+      ></tiny-tree-menu>
+    </div>
+  </div>
+</template>
+
+<script>
+import { TinyTreeMenu } from '@opentiny/vue'
+import { iconApp, iconExpressSearch, iconTotal, iconUnfreeze, iconFile } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyTreeMenu
+  },
+  data() {
+    return {
+      treeData: [
+        {
+          id: 100,
+          label: '首页',
+          customIcon: iconApp()
+        },
+        {
+          id: 200,
+          label: '指南',
+          customIcon: iconExpressSearch(),
+          children: [
+            {
+              id: 201,
+              label: '引入组件',
+              children: [
+                { id: 20101, label: '按需引入' },
+                { id: 20102, label: '完整引入', customIcon: iconApp() }
+              ]
+            },
+            { id: 202, label: '后端适配器' },
+            { id: 203, label: '服务代理' },
+            { id: 204, label: '构建部署' }
+          ]
+        },
+        {
+          id: 300,
+          label: '组件',
+          customIcon: iconTotal(),
+          children: [
+            {
+              id: 300,
+              label: '组件'
+            },
+            {
+              id: 301,
+              label: '表单组件',
+              children: [
+                {
+                  id: 30101,
+                  label: 'Button 按钮',
+                  url: 'button'
+                },
+                { id: 30102, label: 'Datepicker 日期', url: '' },
+                { id: 30103, label: 'Dropdown 下拉框', url: '' },
+                { id: 30104, label: 'DropTimes 下拉时间', url: '' },
+                { id: 30105, label: 'Input 输入框', url: '' }
+              ]
+            },
+            { id: 302, label: '数据组件' },
+            { id: 303, label: '导航组件' },
+            { id: 304, label: '业务组件' }
+          ]
+        },
+        {
+          id: 400,
+          label: '教程',
+          customIcon: iconUnfreeze(),
+          children: [
+            {
+              id: 401,
+              label: '页面布局',
+              children: [
+                { id: 40101, label: '添加标签页', url: '' },
+                { id: 40102, label: '标签页配置', url: '' }
+              ]
+            },
+            {
+              id: 402,
+              label: '查询功能',
+              children: [
+                { id: 40201, label: '添加查询页面', url: '' },
+                { id: 40202, label: '列表属性配置', url: '' },
+                { id: 40203, label: '通讯录查询', url: '' }
+              ]
+            },
+            {
+              id: 403,
+              label: '新增功能',
+              children: [
+                { id: 40301, label: '表单新增功能', url: '' },
+                { id: 40302, label: '表单数据验证', url: '' }
+              ]
+            },
+            {
+              id: 404,
+              label: '编辑功能',
+              children: [
+                { id: 40401, label: '开启编辑功能', url: '' },
+                { id: 40402, label: '保存表格数据', url: '' }
+              ]
+            }
+          ]
+        },
+        {
+          id: 500,
+          label: '规范',
+          customIcon: iconFile()
+        },
+        {
+          id: 600,
+          label: '性能',
+          customIcon: iconFile()
+        },
+        {
+          id: 700,
+          label: '案例',
+          customIcon: iconFile()
+        },
+        {
+          id: 800,
+          label: '更新日志',
+          customIcon: iconFile()
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.wrapper {
+  display: flex;
+  justify-content: space-between;
+}
+
+.menu-fix {
+  margin-right: 300px;
+}
+</style>
+
+<style lang="less">
+.my-dark-menu {
+  --tv-TreeMenu-background-color: #284570 !important;
+  --tv-TreeMenu-node-body-text-color: rgba(255, 255, 255, 0.85) !important;
+  --tv-TreeMenu-node-hover-bg-color: transparent !important;
+  --tv-TreeMenu-node-selected-bg-color: #2e71e6 !important;
+  --tv-TreeMenu-collapse-icon-fill-color: rgba(255, 255, 255, 0.85) !important;
+  --tv-TreeMenu-collapse-icon-hover-color: #ffffff !important;
+  --tv-TreeMenu-pop-item-active-text-color: #ffffff !important;
+  --tv-TreeMenu-pop-item-selected-bg: #2e71e6 !important;
+  --tv-TreeMenu-pop-item-selected-text-color: #ffffff !important;
+  --tv-Tree-bg-color: #284570 !important;
+  --tv-Popover-bg-color: #284570 !important;
+
+  .tiny-tree {
+    --tv-Tree-bg-color: #284570;
+  }
+
+  .tiny-tree-menu__expand {
+    background-color: var(--tv-Tree-bg-color);
+  }
+}
+</style>

examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.js

@@ -148,6 +148,18 @@ export default {
       },
       codeFiles: ['show-expand.vue']
     },
+    {
+      demoId: 'pop-sub-menu',
+      name: {
+        'zh-CN': '折叠弹出',
+        'en-US': 'Pop Sub Menu'
+      },
+      desc: {
+        'zh-CN': '<p>折叠模式下，支持弹出子菜单列表。</p>\n',
+        'en-US': '<p>support pop sub menus when collapsed. </p>\n'
+      },
+      codeFiles: ['pop-sub-menu.vue']
+    },
     {
       demoId: 'custom-icon',
       name: {