Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: dev
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fdbfc68
feat(tree-menu): 收起菜单时支持悬浮展示子菜单
Mar 13, 2025
4a5eda3
fix: popover 不挂载到 body
Mar 14, 2025
d2d184e
feat(tree-menu): 支持配置弹窗类名
Mar 14, 2025
2d082f1
Merge branch 'dev' of https://github.com/opentiny/tiny-vue into feat-…
Mar 17, 2025
efbdd88
Merge branch 'feat-tree-menu' into feat-tree-menu-new
Mar 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions examples/sites/demos/apis/tree-menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
123 changes: 123 additions & 0 deletions examples/sites/demos/pc/app/tree-menu/pop-sub-menu-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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()
},
Comment on lines +13 to +14
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Missing icon imports will cause runtime errors

The component references custom icon functions like iconApp(), iconExpressSearch(), etc., but these functions are not imported in the script section.

Add the necessary imports at the top of your script section:

import { TinyTreeMenu } from '@opentiny/vue'
import { ref } from 'vue'
+import { 
+  iconApp, 
+  iconExpressSearch, 
+  iconTotal, 
+  iconUnfreeze, 
+  iconFile 
+} from '@opentiny/vue-icon'
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
customIcon: iconApp()
},
<script>
import { TinyTreeMenu } from '@opentiny/vue'
import { ref } from 'vue'
import {
iconApp,
iconExpressSearch,
iconTotal,
iconUnfreeze,
iconFile
} from '@opentiny/vue-icon'
// ... rest of your script code
export default {
// component definition, etc.
data() {
return {
customIcon: iconApp()
}
}
}
</script>

{
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>
26 changes: 26 additions & 0 deletions examples/sites/demos/pc/app/tree-menu/pop-sub-menu.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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()
})
184 changes: 184 additions & 0 deletions examples/sites/demos/pc/app/tree-menu/pop-sub-menu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
12 changes: 12 additions & 0 deletions examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,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: {
Expand Down
Loading
Loading