From 4a0e464308376575ebc8ab57124f9b3c434744a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E8=87=AA=E8=BE=BE?= <980324341@qq.com> Date: Sat, 5 Sep 2026 12:15:54 +0800 Subject: [PATCH] =?UTF-8?q?task-5(=E5=A3=B3=E5=B1=82/=E8=B7=AF=E7=94=B1):?= =?UTF-8?q?=20=E5=AE=9A=E4=B9=89=E9=A1=B6=E9=83=A8=E6=A0=8F=E7=94=A8?= =?UTF-8?q?=E6=88=B7=E4=BF=A1=E6=81=AF=E4=B8=8E=E9=A1=B5=E9=9D=A2=E6=A0=87?= =?UTF-8?q?=E9=A2=98=E6=A8=A1=E5=9E=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 新增 src/layout/topbar-model.ts（pageTitleOf 缺省回落 + topbarUserOf 空态视图模型）， AdminLayout 改用模型渲染标题/用户名/角色，删除模板内联缺省逻辑；8 用例覆盖标题 空值、用户缺字段、非法输入等。 --- admin-frontend-vue/src/layout/AdminLayout.vue | 8 +- admin-frontend-vue/src/layout/topbar-model.ts | 22 ++++++ admin-frontend-vue/tests/task-5.test.ts | 76 +++++++++++++++++++ 3 files changed, 103 insertions(+), 3 deletions(-) create mode 100644 admin-frontend-vue/src/layout/topbar-model.ts create mode 100644 admin-frontend-vue/tests/task-5.test.ts 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() {
- {{ session.user?.username || '当前用户' }} - {{ session.user?.role || '' }} + {{ userVm.username }} + {{ userVm.role }}
退出登录
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') +})