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