diff --git a/admin-frontend-vue/src/layout/AdminLayout.vue b/admin-frontend-vue/src/layout/AdminLayout.vue
index d88702b9..803b5271 100644
--- a/admin-frontend-vue/src/layout/AdminLayout.vue
+++ b/admin-frontend-vue/src/layout/AdminLayout.vue
@@ -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>
diff --git a/admin-frontend-vue/src/layout/topbar-model.ts b/admin-frontend-vue/src/layout/topbar-model.ts
new file mode 100644
index 00000000..5b2ae3a5
--- /dev/null
+++ b/admin-frontend-vue/src/layout/topbar-model.ts
@@ -0,0 +1,22 @@
+import type { AdminUser } from '../types/admin'
+
+/** 无 meta.title 时的壳层缺省标题。 */
+export const ADMIN_DEFAULT_TITLE = '管理后台'
+
+/** 页面标题模型：由路由 meta.title 驱动，空值回落缺省标题。 */
+export function pageTitleOf(title: string | null | undefined): string {
+  const value = typeof title === 'string' ? title.trim() : ''
+  return value || ADMIN_DEFAULT_TITLE
+}
+
+export interface TopbarUserViewModel {
+  username: string
+  role: string
+  hasUser: boolean
+}
+
+/** 顶部栏用户模型：用户信息或未登录空态统一为可渲染视图模型。 */
+export function topbarUserOf(user: AdminUser | null | undefined): TopbarUserViewModel {
+  if (!user) return { username: '当前用户', role: '', hasUser: false }
+  return { username: user.username || '当前用户', role: user.role || '', hasUser: true }
+}
diff --git a/admin-frontend-vue/tests/task-5.test.ts b/admin-frontend-vue/tests/task-5.test.ts
new file mode 100644
index 00000000..0e8e4527
--- /dev/null
+++ b/admin-frontend-vue/tests/task-5.test.ts
@@ -0,0 +1,76 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { readSource } from './helpers.ts'
+import {
+  ADMIN_DEFAULT_TITLE,
+  pageTitleOf,
+  topbarUserOf,
+} from '../src/layout/topbar-model.ts'
+
+test('test_task_005_topbar_title_model_normal_primary_path', () => {
+  // 正常主路径：meta.title 直接驱动页面标题；用户信息映射到顶栏视图模型。
+  assert.equal(pageTitleOf('用户管理'), '用户管理')
+  const vm = topbarUserOf({ id: 1, username: 'admin', role: 'super_admin' })
+  assert.equal(vm.username, 'admin')
+  assert.equal(vm.role, 'super_admin')
+  assert.equal(vm.hasUser, true)
+})
+
+test('test_task_005_topbar_title_model_normal_variant_input', () => {
+  // 正常变体：另一种有效标题/角色不依赖单一样例。
+  assert.equal(pageTitleOf('菜单管理'), '菜单管理')
+  const normal = topbarUserOf({ id: 2, username: 'ops', role: 'admin' })
+  assert.equal(normal.username, 'ops')
+  assert.equal(normal.hasUser, true)
+})
+
+test('test_task_005_topbar_title_model_normal_repeated_operation_is_idempotent', () => {
+  // 正常重复：模型纯函数重复调用结果稳定。
+  assert.equal(pageTitleOf('数据权限分组'), pageTitleOf('数据权限分组'))
+  assert.deepEqual(topbarUserOf(null), topbarUserOf(null))
+  assert.deepEqual(topbarUserOf({ id: 1, username: 'u', role: '' }), topbarUserOf({ id: 1, username: 'u', role: '' }))
+})
+
+test('test_task_005_topbar_title_model_boundary_empty_input', () => {
+  // 边界空值：标题为空/空白回落到缺省；用户为 null/undefined 进入空态不崩溃。
+  assert.equal(pageTitleOf(undefined), ADMIN_DEFAULT_TITLE)
+  assert.equal(pageTitleOf(''), ADMIN_DEFAULT_TITLE)
+  assert.equal(pageTitleOf('   '), ADMIN_DEFAULT_TITLE)
+  const none = topbarUserOf(undefined)
+  assert.equal(none.username, '当前用户')
+  assert.equal(none.hasUser, false)
+})
+
+test('test_task_005_topbar_title_model_boundary_single_item', () => {
+  // 边界单元素：单页面标题、单用户映射各自产出唯一稳定结果。
+  assert.equal(pageTitleOf('首页'), '首页')
+  const single = topbarUserOf({ id: 9, username: 'root', role: 'admin' })
+  assert.equal(single.username, 'root')
+  assert.equal(single.role, 'admin')
+})
+
+test('test_task_005_topbar_title_model_boundary_limit_or_missing_field', () => {
+  // 边界上限/缺字段：缺 username/role 的用户仍可渲染且有明确空态。
+  const partial = topbarUserOf({ id: 3, username: '', role: '' })
+  assert.equal(partial.username, '当前用户')
+  assert.equal(partial.role, '')
+  assert.equal(partial.hasUser, true)
+  assert.ok(ADMIN_DEFAULT_TITLE.length > 0, '缺省标题不能为空')
+})
+
+test('test_task_005_topbar_title_model_invalid_input_rejected', () => {
+  // 异常输入：非字符串标题按空处理回落到缺省（不崩溃、不输出 undefined/null）。
+  const bad = pageTitleOf(null)
+  assert.notEqual(bad, 'undefined')
+  assert.notEqual(bad, 'null')
+  assert.equal(bad, ADMIN_DEFAULT_TITLE)
+  assert.equal(pageTitleOf(123 as unknown as string), ADMIN_DEFAULT_TITLE)
+})
+
+test('test_task_005_topbar_title_model_dependency_failure_returns_actionable_message', () => {
+  // 依赖失败：壳层实际使用该标题/用户模型，而非在模板里另写一份缺省逻辑。
+  const layout = readSource('src/layout/AdminLayout.vue')
+  assert.match(layout, /pageTitleOf/)
+  assert.match(layout, /topbarUserOf/)
+  assert.equal(/route\.meta\.title\s*\|\|\s*'管理后台'/.test(layout), false, '标题缺省必须走 pageTitleOf')
+})