test: verify admin reference UI fidelity

admin-web/src/layouts/MainLayout.vue

@@ -12,6 +12,10 @@
           <p>用专业的服务，帮助更多人遇见对的人</p>
         </div>
       </div>
+      <div class="scene-slogan" aria-hidden="true">
+        <span>善缘相牵</span>
+        <strong>爱在丹阳</strong>
+      </div>
       <div class="scene-benefits" aria-label="平台服务原则">
         <span><el-icon><StarFilled /></el-icon><b>公益为本</b><small>不以营利为目的</small></span>
         <span><el-icon><Lock /></el-icon><b>真实可靠</b><small>严格审核 多重保障</small></span>
@@ -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 {

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 个核心页面重绘。

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')