From fdbfc681d70546891a29ba4a8020b4913cb63205 Mon Sep 17 00:00:00 2001
From: jieliu52 <jieliu52@kxdigit.com>
Date: Thu, 13 Mar 2025 18:52:15 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat(tree-menu):=20=E6=94=B6=E8=B5=B7?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E6=97=B6=E6=94=AF=E6=8C=81=E6=82=AC=E6=B5=AE?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E5=AD=90=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/sites/demos/apis/tree-menu.js        |  12 ++
 .../pop-sub-menu-composition-api.vue          | 123 ++++++++++++++++
 .../pc/app/tree-menu/pop-sub-menu.spec.ts     |  26 ++++
 .../demos/pc/app/tree-menu/pop-sub-menu.vue   | 132 ++++++++++++++++++
 .../pc/app/tree-menu/webdoc/tree-menu.js      |  12 ++
 packages/renderless/src/tree-menu/vue.ts      |   4 +-
 packages/theme/src/tree-menu/index.less       |  73 ++++++++++
 packages/theme/src/tree-menu/vars.less        |  25 ++++
 packages/vue/src/tree-menu/src/menu-node.vue  |  50 +++++++
 packages/vue/src/tree-menu/src/pc.vue         |  37 +++--
 packages/vue/src/tree-menu/src/pop-menu.vue   | 109 +++++++++++++++
 packages/vue/src/tree-menu/src/props.ts       |   4 +
 12 files changed, 595 insertions(+), 12 deletions(-)
 create mode 100644 examples/sites/demos/pc/app/tree-menu/pop-sub-menu-composition-api.vue
 create mode 100644 examples/sites/demos/pc/app/tree-menu/pop-sub-menu.spec.ts
 create mode 100644 examples/sites/demos/pc/app/tree-menu/pop-sub-menu.vue
 create mode 100644 packages/vue/src/tree-menu/src/menu-node.vue
 create mode 100644 packages/vue/src/tree-menu/src/pop-menu.vue

diff --git a/examples/sites/demos/apis/tree-menu.js b/examples/sites/demos/apis/tree-menu.js
index eb36cf68fb..dd1522264b 100644
--- a/examples/sites/demos/apis/tree-menu.js
+++ b/examples/sites/demos/apis/tree-menu.js
@@ -342,6 +342,18 @@ 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: 'show-filter',
           type: 'boolean',
diff --git a/examples/sites/demos/pc/app/tree-menu/pop-sub-menu-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/pop-sub-menu-composition-api.vue
new file mode 100644
index 0000000000..63c1d609c8
--- /dev/null
+++ b/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>
diff --git a/examples/sites/demos/pc/app/tree-menu/pop-sub-menu.spec.ts b/examples/sites/demos/pc/app/tree-menu/pop-sub-menu.spec.ts
new file mode 100644
index 0000000000..40887a76b1
--- /dev/null
+++ b/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()
+})
diff --git a/examples/sites/demos/pc/app/tree-menu/pop-sub-menu.vue b/examples/sites/demos/pc/app/tree-menu/pop-sub-menu.vue
new file mode 100644
index 0000000000..9ff8517deb
--- /dev/null
+++ b/examples/sites/demos/pc/app/tree-menu/pop-sub-menu.vue
@@ -0,0 +1,132 @@
+<template>
+  <tiny-tree-menu :data="treeData" show-expand expand-menu-popable></tiny-tree-menu>
+</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>
diff --git a/examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.js b/examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.js
index d3ed3963bc..2994386b99 100644
--- a/examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.js
+++ b/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: {
diff --git a/packages/renderless/src/tree-menu/vue.ts b/packages/renderless/src/tree-menu/vue.ts
index bdd89a6c6c..3edf0d9829 100644
--- a/packages/renderless/src/tree-menu/vue.ts
+++ b/packages/renderless/src/tree-menu/vue.ts
@@ -77,7 +77,7 @@ export const api = [
 
 export const renderless = (
   props: ITreeMenuProps,
-  { computed, watch, reactive, onMounted }: ISharedRenderlessFunctionParams,
+  { computed, watch, reactive, onMounted, provide }: ISharedRenderlessFunctionParams,
   { t, service, emit, vm }: ISharedRenderlessParamUtils
 ) => {
   service = service || { base: {} }
@@ -128,6 +128,8 @@ export const renderless = (
     computedTreeStyle: computedTreeStyle({ props })
   })
 
+  provide('tree-menu', vm)
+
   watch(
     () => props.data,
     (value) => (state.data = value),
diff --git a/packages/theme/src/tree-menu/index.less b/packages/theme/src/tree-menu/index.less
index eb41ce57e4..528d2ff3a8 100644
--- a/packages/theme/src/tree-menu/index.less
+++ b/packages/theme/src/tree-menu/index.less
@@ -17,6 +17,8 @@
 @tree-node-prefix-cls: ~'@{css-prefix}tree-node';
 @input-prefix-cls: ~'@{css-prefix}input';
 @tree-menu-prefix-cls: ~'@{css-prefix}tree-menu';
+@tree-pop-menu-prefix-cls: ~'@{css-prefix}tree-menu-pop-menu';
+@tree-pop-menu-panel-prefix-cls: ~'@{css-prefix}tree-menu-pop-menu-panel';
 
 .@{tree-menu-prefix-cls} {
   .inject-TreeMenu-vars();
@@ -212,6 +214,7 @@
         .tree-node-name {
           align-items: center;
           padding: 0 var(--tv-TreeMenu-node-body-text-padding-x);
+          display: flex;
 
           &:hover {
             font-weight: var(--tv-TreeMenu-node-name-hover-font-weight);
@@ -219,6 +222,7 @@
 
           svg {
             margin-right: var(--tv-TreeMenu-prefix-icon-margin-right);
+            flex-shrink: 0;
           }
         }
       }
@@ -335,4 +339,73 @@
       }
     }
   }
+
+  .@{tree-pop-menu-prefix-cls} {
+    line-height: initial;
+  }
+}
+
+.@{tree-pop-menu-panel-prefix-cls} {
+  .inject-TreeMenu-vars();
+  padding: var(--tv-TreeMenu-pop-padding) !important;
+  border-radius: var(--tv-TreeMenu-pop-radius) !important;
+  box-shadow: var(--tv-TreeMenu-pop-shadow) !important;
+  width: var(--tv-TreeMenu-pop-width);
+  transform: translateX(var(--tv-TreeMenu-pop-panel-margin-left));
+
+  .tree-menu-pop-menu__list {
+    width: 100%;
+
+    .tiny-tree-menu-pop-menu {
+      width: 100%;
+    }
+
+    .reference-wrapper {
+      display: block;
+    }
+  
+    &-item {
+      width: 100%;
+      height: var(--tv-TreeMenu-pop-item-height);
+      display: flex;
+      align-items: center;
+
+      .tree-node-name {
+        svg {
+          margin-right: var(--tv-TreeMenu-prefix-icon-margin-right);
+        }
+      }
+
+      &.hover,
+      &:hover,
+      &:active {
+        background-color: var(--tv-TreeMenu-pop-item-active-bg);
+        color: var(--tv-TreeMenu-pop-item-active-text-color);
+      }
+
+      &.has-current {
+        background-color: var(--tv-TreeMenu-pop-item-active-bg);
+        color: var(--tv-TreeMenu-pop-item-active-text-color);
+      }
+
+      &.is-current {
+        background-color: var(--tv-TreeMenu-pop-item-selected-bg);
+        color: var(--tv-TreeMenu-pop-item-selected-text-color);
+      }
+
+      .tree-node {
+        padding-left: var(--tv-TreeMenu-pop-item-padding-left);
+        display: flex;
+        align-items: center;
+
+        &-body {
+          color: inherit;
+        }
+      }
+    }
+  }
+
+  &__first {
+    transform: translateX(var(--tv-TreeMenu-pop-panel-first-margin-left));
+  }
 }
diff --git a/packages/theme/src/tree-menu/vars.less b/packages/theme/src/tree-menu/vars.less
index fa3a6b2820..72834ab8ce 100644
--- a/packages/theme/src/tree-menu/vars.less
+++ b/packages/theme/src/tree-menu/vars.less
@@ -77,4 +77,29 @@
   --tv-TreeMenu-node-name-hover-font-weight: var(--tv-font-weight-bold);
   // 左侧折叠图标背景色
   --tv-TreeMenu-toggle-button-background-color: var(--tv-color-bg-3);
+
+  // 弹出面板 边距
+  --tv-TreeMenu-pop-padding: var(--tv-space-base);
+  // 弹出面板 圆角
+  --tv-TreeMenu-pop-radius: var(--tv-border-radius-sm);
+  // 弹出面板 圆角
+  --tv-TreeMenu-pop-shadow: var(--tv-shadow-4-down);
+  // 弹出面板 菜单高度
+  --tv-TreeMenu-pop-item-height: 36px;
+  // 弹出面板 宽度
+  --tv-TreeMenu-pop-width: 160px;
+  // 弹出面板 菜单悬浮、激活背景
+  --tv-TreeMenu-pop-item-active-bg: transparent;
+  // 弹出面板 菜单悬浮、激活文本色
+  --tv-TreeMenu-pop-item-active-text-color: var(--tv-base-color-brand);
+  // 弹出面板 选中背景色
+  --tv-TreeMenu-pop-item-selected-bg: transparent;
+  // 弹出面板 选中文本色
+  --tv-TreeMenu-pop-item-selected-text-color: var(--tv-base-color-brand);
+  // 弹出面板 选中文本色
+  --tv-TreeMenu-pop-item-padding-left: 16px;
+  // 弹出面板 左侧边距
+  --tv-TreeMenu-pop-panel-margin-left: -2px;
+  // 弹出面板 第一层左侧边距
+  --tv-TreeMenu-pop-panel-first-margin-left: -38px;
 }
diff --git a/packages/vue/src/tree-menu/src/menu-node.vue b/packages/vue/src/tree-menu/src/menu-node.vue
new file mode 100644
index 0000000000..f316c86c84
--- /dev/null
+++ b/packages/vue/src/tree-menu/src/menu-node.vue
@@ -0,0 +1,50 @@
+<!-- eslint-disable vue/no-mutating-props -->
+<!--
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ -->
+
+<template>
+  <div class="tree-node">
+    <div class="tree-menus-link tiny-tree-node__label">
+      <a class="tree-node-body" :title="getTitle(data.label)" :href="data.url || void 0">
+        <span class="tree-node-name">
+          <component v-if="!data.customIcon && suffixIcon" :is="suffixIcon"></component>
+          <component v-if="data.customIcon" :is="data.customIcon"></component>
+          <slot :node="node" :data="data" :label="data.label">{{ data.label || node.label }} </slot>
+        </span>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@opentiny/vue-common'
+import Popover from '@opentiny/vue-popover'
+
+export default defineComponent({
+  name: 'TreeMenuNode',
+  componentName: 'TreeMenuNode',
+  components: {
+    TinyPopover: Popover
+  },
+
+  props: {
+    node: {},
+    data: {},
+    suffixIcon: {},
+    getTitle: {}
+  },
+
+  setup() {
+    return {}
+  }
+})
+</script>
diff --git a/packages/vue/src/tree-menu/src/pc.vue b/packages/vue/src/tree-menu/src/pc.vue
index c59cf094dc..4596c578ca 100644
--- a/packages/vue/src/tree-menu/src/pc.vue
+++ b/packages/vue/src/tree-menu/src/pc.vue
@@ -78,17 +78,26 @@
       @current-change="currentChange"
     >
       <template #default="{ node, data }">
-        <div class="tree-node">
-          <div class="tree-menus-link tiny-tree-node__label">
-            <a class="tree-node-body" :title="getTitle(data.label)" :href="data.url || void 0">
-              <span class="tree-node-name">
-                <component v-if="!data.customIcon && suffixIcon" :is="suffixIcon"></component>
-                <component v-if="data.customIcon" :is="data.customIcon"></component>
-                <slot :node="node" :data="data" :label="data.label">{{ data.label || node.label }} </slot>
-              </span>
-            </a>
-          </div>
-        </div>
+        <template v-if="expandMenuPopable && state.isExpand">
+          <TinyTooltip placement="right" v-if="!node.childNodes || node.childNodes.length === 0">
+            <template #content>
+              <span>{{ data.label || node.label }}</span>
+            </template>
+            <template #default>
+              <TinyTreeMenuNode :node="node" :data="data" :getTitle="getTitle" />
+            </template>
+          </TinyTooltip>
+
+          <TinyTreeMenuPopMenu :node="node" :data="data" :getTitle="getTitle" v-else>
+            <template #reference>
+              <TinyTreeMenuNode :node="node" :data="data" :getTitle="getTitle" />
+            </template>
+          </TinyTreeMenuPopMenu>
+        </template>
+
+        <template v-else>
+          <TinyTreeMenuNode :node="node" :data="data" :getTitle="getTitle" />
+        </template>
       </template>
     </tiny-tree>
     <div v-if="showExpand" class="tiny-tree-menu__expand">
@@ -105,6 +114,9 @@ import { $prefix, setup, defineComponent } from '@opentiny/vue-common'
 import { renderless, api } from '@opentiny/vue-renderless/tree-menu/vue'
 import Tree from '@opentiny/vue-tree'
 import Input from '@opentiny/vue-input'
+import Tooltip from '@opentiny/vue-tooltip'
+import PopMenu from './pop-menu.vue'
+import MenuNode from './menu-node.vue'
 import { iconLeftWardArrow, iconEditorMenuLeft, iconEditorMenuRight } from '@opentiny/vue-icon'
 import { treeMenuProps } from './props'
 import '@opentiny/vue-theme/tree-menu/index.less'
@@ -129,6 +141,9 @@ export default defineComponent({
   components: {
     TinyTree: Tree,
     TinyInput: Input,
+    TinyTooltip: Tooltip,
+    TinyTreeMenuPopMenu: PopMenu,
+    TinyTreeMenuNode: MenuNode,
     IconArrow: iconLeftWardArrow(),
     IconEditorMenuLeft: iconEditorMenuLeft(),
     IconEditorMenuRight: iconEditorMenuRight()
diff --git a/packages/vue/src/tree-menu/src/pop-menu.vue b/packages/vue/src/tree-menu/src/pop-menu.vue
new file mode 100644
index 0000000000..45866a130f
--- /dev/null
+++ b/packages/vue/src/tree-menu/src/pop-menu.vue
@@ -0,0 +1,109 @@
+<!-- eslint-disable vue/no-mutating-props -->
+<!--
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ -->
+
+<template>
+  <template v-if="node.childNodes && node.childNodes.length > 0">
+    <TinyPopover
+      trigger="hover"
+      placement="right"
+      :visible-arrow="false"
+      :popperClass="'tiny-tree-menu-pop-menu-panel ' + (node.level === 1 && 'tiny-tree-menu-pop-menu-panel__first')"
+      class="tiny-tree-menu-pop-menu"
+    >
+      <template #default>
+        <div class="tree-menu-pop-menu__list">
+          <div
+            class="tree-menu-pop-menu__list-item"
+            :class="{ 'is-current': item.isCurrent, 'has-current': hasCurrent(item) }"
+            v-for="(item, index) in node.childNodes"
+            :key="'pop-menu-item-' + index"
+            @click="onClickItem(item)"
+          >
+            <TreeMenuPopMenu :node="item" :data="item.data" :getTitle="getTitle">
+              <template #reference="{ node: childNode, data: childData }">
+                <TinyTreeMenuNode :node="childNode" :data="childData" :getTitle="getTitle" />
+              </template>
+            </TreeMenuPopMenu>
+          </div>
+        </div>
+      </template>
+      <template #reference>
+        <slot name="reference" :node="node" :data="data" :getTitle="getTitle"></slot>
+      </template>
+    </TinyPopover>
+  </template>
+  <template v-else>
+    <slot name="reference" :node="node" :data="data" :getTitle="getTitle"></slot>
+  </template>
+</template>
+
+<script lang="ts">
+import { defineComponent, hooks } from '@opentiny/vue-common'
+import Popover from '@opentiny/vue-popover'
+import MenuNode from './menu-node.vue'
+
+export default defineComponent({
+  name: 'TreeMenuPopMenu',
+  componentName: 'TreeMenuPopMenu',
+  components: {
+    TinyPopover: Popover,
+    TinyTreeMenuNode: MenuNode
+  },
+
+  props: {
+    node: {},
+    data: {},
+    getTitle: {},
+    suffixIcon: {}
+  },
+
+  setup() {
+    const treeMenuVm = hooks.inject('tree-menu')
+
+    function onClickItem(item) {
+      treeMenuVm && treeMenuVm.setCurrentNode(item)
+    }
+
+    function hasCurrent(node) {
+      if (node.isCurrent === true) {
+        return false // 输入对象自身 isCurrent 为 true，直接返回 false
+      }
+
+      function hasChildCurrent(currentNode) {
+        if (currentNode.childNodes && Array.isArray(currentNode.childNodes)) {
+          for (const child of currentNode.childNodes) {
+            if (typeof child === 'object' && child !== null) {
+              // 检查子节点是否直接标记为 current
+              if (child.isCurrent === true) {
+                return true
+              }
+              // 递归检查子节点的子节点
+              if (hasChildCurrent(child)) {
+                return true
+              }
+            }
+          }
+        }
+        return false
+      }
+
+      return hasChildCurrent(node)
+    }
+
+    return {
+      onClickItem,
+      hasCurrent
+    }
+  }
+})
+</script>
diff --git a/packages/vue/src/tree-menu/src/props.ts b/packages/vue/src/tree-menu/src/props.ts
index 69f273c953..4943886798 100644
--- a/packages/vue/src/tree-menu/src/props.ts
+++ b/packages/vue/src/tree-menu/src/props.ts
@@ -67,6 +67,10 @@ export const treeMenuProps = {
     type: Boolean,
     default: false
   },
+  expandMenuPopable: {
+    type: Boolean,
+    default: false
+  },
   collapsible: {
     type: Boolean,
     default: true

From 4a5eda3d2b13ba5f21429eaba0e02fb5dca182b1 Mon Sep 17 00:00:00 2001
From: jieliu52 <jieliu52@kxdigit.com>
Date: Fri, 14 Mar 2025 08:58:51 +0800
Subject: [PATCH 2/3] =?UTF-8?q?fix:=20popover=20=E4=B8=8D=E6=8C=82?=
 =?UTF-8?q?=E8=BD=BD=E5=88=B0=20body?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/vue/src/tree-menu/src/pop-menu.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/vue/src/tree-menu/src/pop-menu.vue b/packages/vue/src/tree-menu/src/pop-menu.vue
index 45866a130f..f111f9f719 100644
--- a/packages/vue/src/tree-menu/src/pop-menu.vue
+++ b/packages/vue/src/tree-menu/src/pop-menu.vue
@@ -19,6 +19,7 @@
       :visible-arrow="false"
       :popperClass="'tiny-tree-menu-pop-menu-panel ' + (node.level === 1 && 'tiny-tree-menu-pop-menu-panel__first')"
       class="tiny-tree-menu-pop-menu"
+      :append-to-body="false"
     >
       <template #default>
         <div class="tree-menu-pop-menu__list">

From d2d184ebd1ad82b4dbb815b9791c6bb247047792 Mon Sep 17 00:00:00 2001
From: jieliu52 <jieliu52@kxdigit.com>
Date: Fri, 14 Mar 2025 10:08:14 +0800
Subject: [PATCH 3/3] =?UTF-8?q?feat(tree-menu):=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E5=BC=B9=E7=AA=97=E7=B1=BB=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/sites/demos/apis/tree-menu.js        | 11 ++++
 .../demos/pc/app/tree-menu/pop-sub-menu.vue   | 54 ++++++++++++++++++-
 packages/vue/src/tree-menu/src/pc.vue         |  2 +-
 packages/vue/src/tree-menu/src/pop-menu.vue   | 13 +++--
 packages/vue/src/tree-menu/src/props.ts       |  1 +
 5 files changed, 75 insertions(+), 6 deletions(-)

diff --git a/examples/sites/demos/apis/tree-menu.js b/examples/sites/demos/apis/tree-menu.js
index dd1522264b..180dc68fcf 100644
--- a/examples/sites/demos/apis/tree-menu.js
+++ b/examples/sites/demos/apis/tree-menu.js
@@ -354,6 +354,17 @@ export default {
           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',
diff --git a/examples/sites/demos/pc/app/tree-menu/pop-sub-menu.vue b/examples/sites/demos/pc/app/tree-menu/pop-sub-menu.vue
index 9ff8517deb..41a48dfcaa 100644
--- a/examples/sites/demos/pc/app/tree-menu/pop-sub-menu.vue
+++ b/examples/sites/demos/pc/app/tree-menu/pop-sub-menu.vue
@@ -1,5 +1,22 @@
 <template>
-  <tiny-tree-menu :data="treeData" show-expand expand-menu-popable></tiny-tree-menu>
+  <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>
@@ -130,3 +147,38 @@ export default {
   }
 }
 </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>
diff --git a/packages/vue/src/tree-menu/src/pc.vue b/packages/vue/src/tree-menu/src/pc.vue
index 4596c578ca..7036e6807e 100644
--- a/packages/vue/src/tree-menu/src/pc.vue
+++ b/packages/vue/src/tree-menu/src/pc.vue
@@ -88,7 +88,7 @@
             </template>
           </TinyTooltip>
 
-          <TinyTreeMenuPopMenu :node="node" :data="data" :getTitle="getTitle" v-else>
+          <TinyTreeMenuPopMenu :node="node" :data="data" :getTitle="getTitle" :popperClass="popperClass" v-else>
             <template #reference>
               <TinyTreeMenuNode :node="node" :data="data" :getTitle="getTitle" />
             </template>
diff --git a/packages/vue/src/tree-menu/src/pop-menu.vue b/packages/vue/src/tree-menu/src/pop-menu.vue
index f111f9f719..5b9d645e28 100644
--- a/packages/vue/src/tree-menu/src/pop-menu.vue
+++ b/packages/vue/src/tree-menu/src/pop-menu.vue
@@ -17,9 +17,13 @@
       trigger="hover"
       placement="right"
       :visible-arrow="false"
-      :popperClass="'tiny-tree-menu-pop-menu-panel ' + (node.level === 1 && 'tiny-tree-menu-pop-menu-panel__first')"
+      :popperClass="
+        'tiny-tree-menu-pop-menu-panel ' +
+        (node.level === 1 && 'tiny-tree-menu-pop-menu-panel__first') +
+        ' ' +
+        (popperClass || '')
+      "
       class="tiny-tree-menu-pop-menu"
-      :append-to-body="false"
     >
       <template #default>
         <div class="tree-menu-pop-menu__list">
@@ -30,7 +34,7 @@
             :key="'pop-menu-item-' + index"
             @click="onClickItem(item)"
           >
-            <TreeMenuPopMenu :node="item" :data="item.data" :getTitle="getTitle">
+            <TreeMenuPopMenu :node="item" :data="item.data" :getTitle="getTitle" :popperClass="popperClass">
               <template #reference="{ node: childNode, data: childData }">
                 <TinyTreeMenuNode :node="childNode" :data="childData" :getTitle="getTitle" />
               </template>
@@ -65,7 +69,8 @@ export default defineComponent({
     node: {},
     data: {},
     getTitle: {},
-    suffixIcon: {}
+    suffixIcon: {},
+    popperClass: {}
   },
 
   setup() {
diff --git a/packages/vue/src/tree-menu/src/props.ts b/packages/vue/src/tree-menu/src/props.ts
index 4943886798..393f717c7a 100644
--- a/packages/vue/src/tree-menu/src/props.ts
+++ b/packages/vue/src/tree-menu/src/props.ts
@@ -71,6 +71,7 @@ export const treeMenuProps = {
     type: Boolean,
     default: false
   },
+  popperClass: String,
   collapsible: {
     type: Boolean,
     default: true