task-5(壳层/路由): 定义顶部栏用户信息与页面标题模型

新增 src/layout/topbar-model.ts(pageTitleOf 缺省回落 + topbarUserOf 空态视图模型),
AdminLayout 改用模型渲染标题/用户名/角色,删除模板内联缺省逻辑;8 用例覆盖标题
空值、用户缺字段、非法输入等。
This commit is contained in:
2026-09-05 12:15:54 +08:00
parent af68b20f87
commit 4a0e464308
3 changed files with 103 additions and 3 deletions
@@ -4,6 +4,7 @@ import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useAdminSessionStore } from '@/stores/admin-session'
import { joinAdminPath } from '@/config/app'
import { pageTitleOf, topbarUserOf } from '@/layout/topbar-model'
import type { AdminMenuNode } from '@/types/admin'
const route = useRoute()
@@ -13,7 +14,8 @@ const collapsed = ref(false)
const activePath = computed(() => route.path)
const groups = computed(() => session.menuTree.filter((node) => node.children?.length))
const pageTitle = computed(() => String(route.meta.title || '管理后台'))
const pageTitle = computed(() => pageTitleOf(route.meta.title as string | undefined))
const userVm = computed(() => topbarUserOf(session.user))
const logoUrl = joinAdminPath('assets', 'logo.jpg')
function menuPath(node: AdminMenuNode): string {
@@ -85,8 +87,8 @@ async function signOut() {
</div>
<div class="admin-user">
<div class="admin-user-meta">
<strong>{{ session.user?.username || '当前用户' }}</strong>
<span>{{ session.user?.role || '' }}</span>
<strong>{{ userVm.username }}</strong>
<span v-if="userVm.role">{{ userVm.role }}</span>
</div>
<el-button text type="danger" @click="signOut">退出登录</el-button>
</div>