优化
This commit is contained in:
@@ -18,9 +18,10 @@ test('source contract: renders the grouped sidebar menu and mobile drawer contro
|
||||
assert.match(layoutSource, /<aside\s+ref="sidebarRef"\s+id="client-sidebar"\s+class="client-sidebar"\s+:inert="!desktopViewport && !mobileMenuOpen"\s+:aria-hidden="!desktopViewport && !mobileMenuOpen \? 'true' : undefined"\s*>/)
|
||||
assert.doesNotMatch(layoutSource, /<aside[^>]*aria-label=/)
|
||||
assert.match(layoutSource, /<nav aria-label="客户工作台导航">/)
|
||||
assert.match(layoutSource, /<div class="client-sidebar-header">\s*<strong>功能导航<\/strong>/s)
|
||||
assert.match(layoutSource, /<div class="client-sidebar-brand">[\s\S]*?<RouterLink class="client-sidebar-brand-link" to="\/" aria-label="返回业务总览" @click="closeMobileMenu">[\s\S]*?柏悦物流[\s\S]*?客户工作台/s)
|
||||
assert.match(layoutSource, /<button[^>]*ref="sidebarCloseButtonRef"[^>]*aria-label="关闭导航"[^>]*@click="closeMobileMenu"[^>]*>\s*<X :size="20" \/>/s)
|
||||
assert.match(layoutSource, /<ClientSidebarMenu\s+:active-path="route\.path"\s+@navigate="closeMobileMenu"\s*\/>/s)
|
||||
assert.match(layoutSource, /<button type="button" class="client-sidebar-logout" @click="handleLogout">[\s\S]*?退出登录/s)
|
||||
assert.doesNotMatch(layoutSource, /v-for="item in clientNavigation"/)
|
||||
assert.doesNotMatch(layoutSource, /from '@\/router'/)
|
||||
})
|
||||
@@ -44,20 +45,22 @@ test('source contract: removes the header and main content from the accessibilit
|
||||
assert.match(layoutSource, /<main\s+class="client-main"\s+:inert="mobileMenuOpen"\s+:aria-hidden="mobileMenuOpen \? 'true' : undefined"\s*>/)
|
||||
})
|
||||
|
||||
test('source contract: keeps route context and user actions in the compact header without tenant identity', () => {
|
||||
test('source contract: keeps route context and user identity in the compact header', () => {
|
||||
assert.match(layoutSource, /const pageTitle = computed\(\(\) => route\.meta\.title \|\| '业务总览'\)/)
|
||||
assert.match(layoutSource, /const pageDescription = computed\(\(\) => route\.meta\.description \|\| ''\)/)
|
||||
assert.match(layoutSource, /<div class="client-header-heading">\s*<h1>\{\{ pageTitle \}\}<\/h1>\s*<p v-if="pageDescription">\{\{ pageDescription \}\}<\/p>/s)
|
||||
assert.match(layoutSource, /<div class="client-user">[\s\S]*\{\{ auth\.user\?\.name \}\}[\s\S]*aria-label="退出登录"/)
|
||||
assert.match(layoutSource, /<div class="client-user">[\s\S]*\{\{ auth\.user\?\.name \}\}/)
|
||||
assert.doesNotMatch(layoutSource, /<div class="client-user">[\s\S]*aria-label="退出登录"/)
|
||||
assert.doesNotMatch(layoutSource, /Building2|tenant-name|tenantName/)
|
||||
assert.doesNotMatch(routerSource, /showPageHeading|showTenantName/)
|
||||
})
|
||||
|
||||
test('source contract: uses compact desktop padding and a bounded mobile header', () => {
|
||||
assert.match(shellStyles, /\.top-header \{[^}]*padding: 0 20px;/)
|
||||
test('source contract: aligns the top bar beside the prototype sidebar and bounds the mobile header', () => {
|
||||
assert.match(shellStyles, /\.top-header \{[^}]*inset: 0 0 auto 250px;[^}]*max-width: calc\(100vw - 250px\);[^}]*padding: 0 24px;/)
|
||||
assert.match(shellStyles, /\.client-sidebar \{[^}]*inset: 0 auto 0 0;[^}]*width: 250px;[^}]*background: linear-gradient\(180deg, #0b1f3a 0%, #0c2a52 100%\)/)
|
||||
assert.match(shellStyles, /\.client-sidebar-brand \{[^}]*border-bottom: 1px solid rgba\(255, 255, 255, \.1\)/)
|
||||
assert.match(shellStyles, /\.client-main \{[^}]*padding: 88px 20px 40px;/)
|
||||
assert.match(globalStyles, /@media \(max-width: 720px\) \{[\s\S]*\.top-header \{ padding: 0 14px; \}/)
|
||||
assert.match(globalStyles, /\.client-brand \{ display: none; \}/)
|
||||
assert.match(globalStyles, /@media \(max-width: 720px\) \{[\s\S]*\.top-header \{ inset: 0;[^}]*padding: 0 14px; \}/)
|
||||
assert.match(globalStyles, /\.client-header-menu-button \{ display: grid; \}/)
|
||||
assert.match(globalStyles, /\.client-header-heading p, \.client-user-copy \{ display: none; \}/)
|
||||
})
|
||||
@@ -106,6 +109,7 @@ test('source contract: uses a native recursive disclosure list without Element m
|
||||
assert.match(sidebarMenuSource, /:active-parent-keys="activeParentKeys"/)
|
||||
assert.match(sidebarMenuSource, /@toggle="handleToggle"/)
|
||||
assert.match(sidebarMenuNodeSource, /<li\s+class="client-nav-node"[\s\S]*?v-if="node\.children"/)
|
||||
assert.match(sidebarMenuNodeSource, /'has-divider-before': node\.dividerBefore/)
|
||||
assert.match(sidebarMenuNodeSource, /<button[\s\S]*?:aria-expanded="openedKeys\.has\(node\.key\)"[\s\S]*?:aria-controls="groupId"[\s\S]*?@click="emit\('toggle', node\.key\)"/)
|
||||
assert.match(sidebarMenuNodeSource, /<ul\s+v-show="openedKeys\.has\(node\.key\)"\s+:id="groupId"\s+class="client-nav-submenu"\s*>/)
|
||||
assert.match(sidebarMenuNodeSource, /<RouterLink[\s\S]*?:aria-current="node\.path === activePath \? 'page' : undefined"[\s\S]*?@click="emit\('navigate', node\.path\)"/)
|
||||
|
||||
@@ -96,9 +96,6 @@ async function handleLogout() {
|
||||
<template>
|
||||
<div class="client-shell" :class="{ 'mobile-menu-open': mobileMenuOpen }">
|
||||
<header class="top-header" :inert="mobileMenuOpen" :aria-hidden="mobileMenuOpen ? 'true' : undefined">
|
||||
<RouterLink class="client-brand" to="/">
|
||||
<img class="client-brand-logo" :src="baiyueLogoDark" alt="柏悦物流" />
|
||||
</RouterLink>
|
||||
<button
|
||||
ref="menuButtonRef"
|
||||
type="button"
|
||||
@@ -117,7 +114,6 @@ async function handleLogout() {
|
||||
<div class="client-user">
|
||||
<span class="client-avatar">{{ auth.user?.name.slice(0, 1) }}</span>
|
||||
<span class="client-user-copy"><strong>{{ auth.user?.name }}</strong><small>{{ auth.user?.roles.join('、') }}</small></span>
|
||||
<el-button text aria-label="退出登录" @click="handleLogout"><LogOut :size="18" /></el-button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -136,8 +132,11 @@ async function handleLogout() {
|
||||
:inert="!desktopViewport && !mobileMenuOpen"
|
||||
:aria-hidden="!desktopViewport && !mobileMenuOpen ? 'true' : undefined"
|
||||
>
|
||||
<div class="client-sidebar-header">
|
||||
<strong>功能导航</strong>
|
||||
<div class="client-sidebar-brand">
|
||||
<RouterLink class="client-sidebar-brand-link" to="/" aria-label="返回业务总览" @click="closeMobileMenu">
|
||||
<span class="client-sidebar-brand-mark"><img :src="baiyueLogoDark" alt="" /></span>
|
||||
<span class="client-sidebar-brand-copy"><strong>柏悦物流</strong><small>客户工作台</small></span>
|
||||
</RouterLink>
|
||||
<button
|
||||
ref="sidebarCloseButtonRef"
|
||||
type="button"
|
||||
@@ -152,8 +151,11 @@ async function handleLogout() {
|
||||
:active-path="route.path"
|
||||
@navigate="closeMobileMenu"
|
||||
/>
|
||||
<button type="button" class="client-sidebar-logout" @click="handleLogout">
|
||||
<LogOut :size="18" aria-hidden="true" />
|
||||
<span>退出登录</span>
|
||||
</button>
|
||||
</nav>
|
||||
<div class="sidebar-help"><strong>需要帮助？</strong><span>联系您的专属客户经理</span></div>
|
||||
</aside>
|
||||
|
||||
<main
|
||||
|
||||
Reference in New Issue
Block a user