short-drama-agent/short-drama-agent-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 统一侧栏折叠动画并收口拆解页

Browse Source
This commit is contained in:
GJ
2026-09-04 20:06:40 +08:00
parent 278874e3ee
commit a37b0b613f
7 changed files with 70 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/components/ui/layout.test.ts
+16 -9
View File
@@ -157,6 +157,7 @@ describe('管理后台组件边界', () => {
expect(wrapper.find('.admin-nav-scroll [aria-label="后端连接"]').exists()).toBe(false)
expect(wrapper.get('.admin-sider-footer [aria-label="后端连接"]').text()).toBe('后端连接')
expect(wrapper.getComponent(NMenu).props()).toMatchObject({
collapsed: false,
collapsedWidth: 64,
iconSize: 20,
collapsedIconSize: 20,
@@ -165,8 +166,9 @@ describe('管理后台组件边界', () => {
})
await wrapper.get('[aria-label="折叠侧栏"]').trigger('click')
expect(wrapper.find('[aria-label="展开侧栏"]').exists()).toBe(true)
expect(wrapper.getComponent(NMenu).props('collapsed')).toBe(false)
const settings = wrapper.get('.admin-sider-footer [aria-label="后端连接"]')
expect(settings.text()).toBe('')
expect(settings.text()).toBe('后端连接')
await settings.trigger('click')
await flushPromises()
expect(document.querySelector('[role="dialog"][aria-label="后端连接"]')).not.toBeNull()
@@ -176,13 +178,18 @@ describe('管理后台组件边界', () => {
it('侧栏菜单独立滚动，页脚不参与滚动且窄屏展开平移主栏', () => {
const css = readAllStyles()
expect(css).toMatch(/\.admin-sider\s*\{[^}]*display:\s*flex;[^}]*flex-direction:\s*column;[^}]*height:\s*100%/)
expect(css).toMatch(/\.admin-nav-scroll\.n-scrollbar\s*\{[^}]*flex:\s*1;[^}]*min-height:\s*0/)
expect(css).toMatch(
/\.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-footer\s*\{[^}]*flex-shrink:\s*0/)
expect(css).toMatch(/\.n-button\.admin-settings-button\.is-collapsed\s*\{[^}]*justify-content:\s*center/)
expect(css).toMatch(/\.admin-brand\.is-collapsed\s*\{[^}]*justify-content:\s*center/)
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/)
expect(css).toMatch(/@media \(max-width: 800px\)[\s\S]*?\.admin-brand\s*\{[^}]*height:\s*48px/)
expect(css).toContain('@media (max-width: 800px)')
expect(css).toMatch(/transition:\s*width\s+0\.32s/)
expect(css).toMatch(/\.admin-sider\s*\{[^}]*transition:\s*width\s+0\.32s/)
expect(css).toMatch(/\.workspace-tools-body\s*\{[^}]*padding:\s*16px/)
expect(css).toMatch(/\.workspace-tools-drawer \.n-drawer-header[\s\S]*?padding:\s*16px/)
expect(css).toContain('calc(100% - var(--admin-sider-collapsed))')
expect(css).toContain('@media (prefers-reduced-motion: reduce)')
expect(css).not.toContain('.admin-sider-mask')
@@ -237,9 +244,9 @@ describe('管理后台组件边界', () => {
})
const collapsedBrand = wrapper.get('.admin-brand')
expect(collapsedBrand.classes()).toContain('is-collapsed')
expect(collapsedBrand.text()).toBe('')
expect(collapsedBrand.text()).toContain('短剧工作台')
const collapsedSettings = wrapper.get('.admin-sider-footer [aria-label="后端连接"]')
expect(collapsedSettings.text()).toBe('')
expect(collapsedSettings.text()).toBe('后端连接')
expect(collapsedSettings.classes()).toContain('is-collapsed')
await wrapper.get('[aria-label="展开侧栏"]').trigger('click')
await flushPromises()
@@ -260,8 +267,8 @@ describe('管理后台组件边界', () => {
await flushPromises()
expect(wrapper.get('.admin-sider').classes()).toContain('is-collapsed')
expect(wrapper.get('.admin-sider').attributes('style')).toContain('width: 48px')
expect(wrapper.get('.admin-brand').text()).toBe('')
expect(wrapper.get('.admin-sider-footer [aria-label="后端连接"]').text()).toBe('')
expect(wrapper.get('.admin-brand').text()).toContain('短剧工作台')
expect(wrapper.get('.admin-sider-footer [aria-label="后端连接"]').text()).toBe('后端连接')
})
it('长弹窗使用内部滚动，提交期间禁止遮罩和 Esc 关闭', async () => {