fix(layout/sidebar-item): 修复侧边栏菜单项的两处显示问题

- 将侧边栏内容容器从span改为div,避免Tooltip触发器被误判为隐藏文本
- 折叠父菜单时子菜单强制不折叠以保留子项标题
- 新增对应单元测试覆盖修复场景
This commit is contained in:
duanshuwen
2026-08-27 15:33:35 +08:00
parent 5ccdfd7f06
commit 68d2b88c04
2 changed files with 22 additions and 5 deletions

View File

@@ -0,0 +1,17 @@
import { readFileSync } from "node:fs";
import { describe, expect, it } from "vitest";
const source = readFileSync(new URL("./SidebarItem.vue", import.meta.url), "utf8");
describe("侧栏菜单图标容器", () => {
it("避免折叠菜单把 Tooltip 触发器误判为隐藏文本", () => {
expect(source).toContain('<div class="sidebar-item__content">');
expect(source).not.toContain('<span class="sidebar-item__content">');
});
});
describe("折叠态子菜单", () => {
it("在弹出的子菜单中保留子项标题", () => {
expect(source).toContain(':collapsed="false"');
});
});

View File

@@ -39,23 +39,23 @@ const childBasePath = computed(() => resolvedPath.value || props.basePath || "/"
:aria-label="menu.name" :class="['sidebar-item', `sidebar-item--${navigationType}`]">
<template #title>
<el-tooltip :content="menu.name" :disabled="!collapsed" placement="right">
<span class="sidebar-item__content">
<div class="sidebar-item__content">
<LayoutIcon :name="getMenuIconName(menu)" :title="collapsed ? menu.name : undefined" size="18" />
<span v-if="!collapsed" class="sidebar-item__label">{{ menu.name }}</span>
</span>
</div>
</el-tooltip>
</template>
<SidebarItem v-for="child in visibleChildren" :key="child.id" :menu="child" :base-path="childBasePath"
:collapsed="collapsed" :navigation-type="navigationType" />
:collapsed="false" :navigation-type="navigationType" />
</el-sub-menu>
<el-menu-item v-else-if="menu.type === 'page' && resolvedPath" :index="resolvedPath" :aria-label="menu.name"
:class="['sidebar-item', `sidebar-item--${navigationType}`]">
<el-tooltip :content="menu.name" :disabled="!collapsed" placement="right">
<span class="sidebar-item__content">
<div class="sidebar-item__content">
<LayoutIcon :name="getMenuIconName(menu)" :title="collapsed ? menu.name : undefined" size="18" />
<span v-if="!collapsed" class="sidebar-item__label">{{ menu.name }}</span>
</span>
</div>
</el-tooltip>
</el-menu-item>
</template>