fix(layout/sidebar-item): 修复侧边栏菜单项的两处显示问题
- 将侧边栏内容容器从span改为div,避免Tooltip触发器被误判为隐藏文本 - 折叠父菜单时子菜单强制不折叠以保留子项标题 - 新增对应单元测试覆盖修复场景
This commit is contained in:
@@ -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"');
|
||||
});
|
||||
});
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user