feat: 为桌面折叠侧栏添加菜单提示
PC 折叠侧栏菜单图标增加 NPopover 提示,并保留图标导航能力;展开态和移动端不显示重复提示。
This commit is contained in:
@@ -2,7 +2,7 @@ import { h } from 'vue'
|
||||
import { createMemoryHistory, createRouter } from 'vue-router'
|
||||
import { flushPromises, mount, type VueWrapper } from '@vue/test-utils'
|
||||
import { afterEach, describe, expect, it, vi } from 'vitest'
|
||||
import { NConfigProvider, NDrawer, NDrawerContent, NMenu, NModal, NScrollbar, NTooltip } from 'naive-ui'
|
||||
import { NConfigProvider, NDrawer, NDrawerContent, NMenu, NModal, NPopover, NScrollbar, NTooltip } from 'naive-ui'
|
||||
import App from '@/App.vue'
|
||||
import WorkspacePage from '@/components/ui/WorkspacePage.vue'
|
||||
import AppDialog from '@/components/ui/AppDialog.vue'
|
||||
@@ -165,9 +165,20 @@ describe('管理后台组件边界', () => {
|
||||
indent: 22,
|
||||
rootIndent: 22
|
||||
})
|
||||
const firstMenuIcon = () => {
|
||||
const [option] = wrapper!.getComponent(NMenu).props('options') as Array<{
|
||||
icon: () => ReturnType<typeof h>
|
||||
}>
|
||||
return option!.icon()
|
||||
}
|
||||
expect(firstMenuIcon().type).not.toBe(NPopover)
|
||||
expect(wrapper.get('.admin-sider-footer').getComponent(NPopover).props('disabled')).toBe(true)
|
||||
await wrapper.get('[aria-label="折叠侧栏"]').trigger('click')
|
||||
await flushPromises()
|
||||
expect(wrapper.find('[aria-label="展开侧栏"]').exists()).toBe(true)
|
||||
expect(wrapper.getComponent(NMenu).props('collapsed')).toBe(false)
|
||||
expect(firstMenuIcon().type).toBe(NPopover)
|
||||
expect(wrapper.get('.admin-sider-footer').getComponent(NPopover).props('disabled')).toBe(false)
|
||||
const settings = wrapper.get('.admin-sider-footer [aria-label="后端连接"]')
|
||||
expect(settings.text()).toBe('后端连接')
|
||||
await settings.trigger('click')
|
||||
@@ -183,6 +194,7 @@ describe('管理后台组件边界', () => {
|
||||
/\.admin-nav-scroll\.n-scrollbar\s*\{[^}]*flex:\s*1;[^}]*min-height:\s*0;[^}]*min-width:\s*var\(--admin-sider-expanded\)/
|
||||
)
|
||||
expect(css).toMatch(/\.admin-sider\.is-collapsed \.n-menu-item-content-header\s*\{[^}]*opacity:\s*0/)
|
||||
expect(css).toMatch(/\.admin-sider\.is-collapsed \.n-menu-item-content__icon\s*\{[^}]*z-index:\s*2/)
|
||||
expect(css).toMatch(/\.admin-sider-footer\s*\{[^}]*flex-shrink:\s*0/)
|
||||
expect(css).toMatch(/\.admin-sider\.is-collapsed \.admin-settings-label\s*\{[^}]*opacity:\s*0/)
|
||||
expect(css).toMatch(/\.admin-sider\.is-collapsed \.admin-brand span\s*\{[^}]*opacity:\s*0/)
|
||||
@@ -251,6 +263,11 @@ describe('管理后台组件边界', () => {
|
||||
indent: 20,
|
||||
rootIndent: 20
|
||||
})
|
||||
const [mobileOption] = wrapper.getComponent(NMenu).props('options') as Array<{
|
||||
icon: () => ReturnType<typeof h>
|
||||
}>
|
||||
expect(mobileOption!.icon().type).not.toBe(NPopover)
|
||||
expect(wrapper.get('.admin-sider-footer').getComponent(NPopover).props('disabled')).toBe(true)
|
||||
const collapsedBrand = wrapper.get('.admin-brand')
|
||||
expect(collapsedBrand.classes()).toContain('is-collapsed')
|
||||
expect(collapsedBrand.text()).toContain('短剧工作台')
|
||||
|
||||
Reference in New Issue
Block a user