diff --git a/admin-web/src/layouts/MainLayout.vue b/admin-web/src/layouts/MainLayout.vue
index 20bbe52..34328cc 100644
--- a/admin-web/src/layouts/MainLayout.vue
+++ b/admin-web/src/layouts/MainLayout.vue
@@ -12,6 +12,10 @@
用专业的服务,帮助更多人遇见对的人
+
+ 善缘相牵
+ 爱在丹阳
+
公益为本不以营利为目的
真实可靠严格审核 多重保障
@@ -241,13 +245,14 @@ function handleLogout() {
}
.scene-header {
- display: flex;
+ display: grid;
max-width: 1840px;
- height: 124px;
+ height: 188px;
margin: 0 auto;
+ grid-template-columns: minmax(640px, 1fr) auto;
+ grid-template-rows: 112px 76px;
align-items: center;
- justify-content: space-between;
- gap: 32px;
+ column-gap: 32px;
}
.scene-brand,
@@ -264,6 +269,27 @@ function handleLogout() {
object-fit: contain;
}
+.scene-slogan {
+ display: flex;
+ padding-right: 24px;
+ align-items: flex-end;
+ flex-direction: column;
+ color: var(--admin-coral);
+ font-family: KaiTi, STKaiti, serif;
+ line-height: 1.05;
+ transform: rotate(-7deg);
+}
+
+.scene-slogan span {
+ font-size: 17px;
+}
+
+.scene-slogan strong {
+ margin-top: 4px;
+ font-size: 25px;
+ font-weight: 500;
+}
+
.scene-brand-copy {
min-width: 172px;
margin-left: 10px;
@@ -303,7 +329,11 @@ function handleLogout() {
}
.scene-benefits {
- gap: clamp(14px, 2vw, 34px);
+ grid-column: 1 / -1;
+ align-self: start;
+ justify-content: flex-start;
+ gap: clamp(38px, 5vw, 92px);
+ padding: 4px 0 0 50px;
}
.scene-benefits span {
@@ -331,7 +361,7 @@ function handleLogout() {
.admin-shell {
width: min(1840px, 100%);
- height: calc(100vh - 174px);
+ height: calc(100vh - 238px);
min-height: 560px;
margin: 0 auto;
overflow: hidden;
@@ -591,7 +621,23 @@ function handleLogout() {
}
.scene-header {
- height: 96px;
+ display: grid;
+ height: 120px;
+ grid-template-columns: minmax(520px, 1fr) auto;
+ grid-template-rows: 66px 54px;
+ column-gap: 18px;
+ }
+
+ .scene-slogan {
+ padding-right: 12px;
+ }
+
+ .scene-slogan span {
+ font-size: 14px;
+ }
+
+ .scene-slogan strong {
+ font-size: 20px;
}
.scene-brand > img {
@@ -613,12 +659,13 @@ function handleLogout() {
font-size: 27px;
}
- .scene-benefits span:nth-child(-n + 2) {
- display: none;
+ .scene-benefits {
+ padding: 0 0 0 28px;
+ gap: clamp(22px, 4vw, 54px);
}
.admin-shell {
- height: calc(100vh - 140px);
+ height: calc(100vh - 170px);
}
.scene-footer {
diff --git a/artifacts/ui-redesign/admin/dashboard-1366x768.png b/artifacts/ui-redesign/admin/dashboard-1366x768.png
new file mode 100644
index 0000000..8b0f751
Binary files /dev/null and b/artifacts/ui-redesign/admin/dashboard-1366x768.png differ
diff --git a/artifacts/ui-redesign/admin/dashboard-1920x1080.png b/artifacts/ui-redesign/admin/dashboard-1920x1080.png
new file mode 100644
index 0000000..4baf052
Binary files /dev/null and b/artifacts/ui-redesign/admin/dashboard-1920x1080.png differ
diff --git a/artifacts/ui-redesign/admin/dashboard-comparison.png b/artifacts/ui-redesign/admin/dashboard-comparison.png
new file mode 100644
index 0000000..f567ffb
Binary files /dev/null and b/artifacts/ui-redesign/admin/dashboard-comparison.png differ
diff --git a/docs/ADMIN_REFERENCE_UI_QA_2026-09-13.md b/docs/ADMIN_REFERENCE_UI_QA_2026-09-13.md
new file mode 100644
index 0000000..20786df
--- /dev/null
+++ b/docs/ADMIN_REFERENCE_UI_QA_2026-09-13.md
@@ -0,0 +1,50 @@
+# 管理端参考图 UI 验收记录(2026-09-13)
+
+## 验收范围
+
+- 参考图:`ChatGPT Image 2026年9月11日 10_34_34 (1).png`
+- 实现范围:管理端全局壳层、顶部品牌区、13 项主导航、工作台六项指标和四个业务面板
+- 本轮不包含:其他管理端业务页重绘、小程序 11 个核心页面
+
+## 视觉证据
+
+- `artifacts/ui-redesign/admin/dashboard-1366x768.png`
+- `artifacts/ui-redesign/admin/dashboard-1920x1080.png`
+- `artifacts/ui-redesign/admin/dashboard-comparison.png`
+
+## 参考图对齐结果
+
+| 检查项 | 结果 | 说明 |
+| --- | --- | --- |
+| 丹阳地域氛围背景 | 通过 | 使用本地生成并固化的浅粉丹阳塔、桥、山水和人物剪影背景,无外部运行时依赖 |
+| 顶部品牌层级 | 通过 | 品牌与管理端标题置于第一行,四项公益原则置于第二行,并保留右侧品牌手写语 |
+| 中央白色圆角壳层 | 通过 | 桌面端保持大圆角、轻描边和柔和阴影,背景与业务区层次明确 |
+| 深色侧栏 | 通过 | 13 项固定主导航全部存在,珊瑚红高亮当前页,低高度时侧栏内部滚动 |
+| 工作台信息架构 | 通过 | 六项指标、今日待办、近期公益活动、服务数据概览、项目服务成效顺序与参考图一致 |
+| 状态表达 | 通过 | Loading、错误重试、无权限、空状态和局部接口失败均有明确反馈;预览模式不伪造业务数字 |
+| 1366×768 | 通过 | 页面无横向溢出;六项指标同排;壳层完整进入视口;侧栏可滚动访问全部入口 |
+| 1920×1080 | 通过 | 页面无横向溢出;壳层范围 x=34~1871;六项指标范围 x=332~1780 |
+
+## 浏览器交互验证
+
+- 全局搜索输入“用户”后可导航到用户管理页。
+- 通知按钮可显示“当前没有新的系统通知”反馈。
+- 侧栏可收起并重新展开。
+- 管理员下拉菜单可正常打开并显示退出入口,未执行退出操作。
+- 浏览器控制台未发现 error 或 warning。
+
+## 缺陷分级与处理
+
+- P0:无。
+- P1:首轮顶部品牌区层级过浅,四项公益原则与标题挤在同一行;已改为双层结构,并在两档分辨率复验通过。
+- P2:首轮 1366×768 隐藏前两项公益原则;已改为四项全部展示,并确认横向溢出为 0。
+- P3:预览身份无真实业务数据,仅展示明确的不可用状态。该状态符合“不使用参考图虚构数字”的数据原则,不属于视觉阻断项。
+
+## 环境说明
+
+- 本轮通过前端预览身份完成视觉和交互验收。
+- Docker Desktop 的 Linux Engine 命名管道当前不可访问,因此未在本轮重复验证真实后端数据联调;前端数据适配层使用真实 API 契约并具备 8 秒超时、局部失败隔离和降级状态。
+
+## 结论
+
+管理端壳层与工作台已达到本阶段参考图验收门槛,可以提交人工视觉确认。按照阶段门禁,在用户确认前不进入小程序 11 个核心页面重绘。
diff --git a/ui-tests/admin-reference-contracts.mjs b/ui-tests/admin-reference-contracts.mjs
index c0d299d..612f66f 100644
--- a/ui-tests/admin-reference-contracts.mjs
+++ b/ui-tests/admin-reference-contracts.mjs
@@ -58,5 +58,10 @@ for (const title of ['今日待办事项', '近期公益活动', '服务数据
assert.match(dashboard, /metrics/, '工作台缺少指标数据绑定')
assert.match(dashboard, /Asia\/Shanghai/, '工作台日期未固定为中国时区')
+assert.match(dashboard, /loadDashboard/, '工作台未接入真实数据适配层')
+assert.match(dashboard, /retryLoad/, '工作台缺少失败重试')
+assert.match(dashboard, /activity-default\.jpg/, '活动封面缺少本地降级资产')
+assert.match(dashboard, /item\.max\s*>\s*0/, '成效进度未处理 max 为 0 的情况')
+assert.match(dashboard, /v-for="metric in dashboard\.metrics"/, '六指标必须由 DashboardModel 统一渲染')
console.log('Admin reference contracts passed')