From a1e3a137b6e0f46305c1009eaff30311a0cc5586 Mon Sep 17 00:00:00 2001
From: xcbyy <2578898740@qq.com>
Date: Mon, 19 Oct 2026 15:42:18 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E4=BF=AE=E5=A4=8D=E4=BC=98=E6=83=A0?=
 =?UTF-8?q?=E5=88=B8=E9=A1=B5/=E6=B6=88=E6=81=AF=E9=A1=B5=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E6=A0=8F=E4=BD=8D=E7=BD=AE=E5=81=8F=E9=AB=98(?=
 =?UTF-8?q?=E6=A0=87=E9=A2=98=E4=B8=8E=E8=BF=94=E5=9B=9E=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E5=BA=94=E8=B4=B4=E8=83=B6=E5=9B=8A=E8=A1=8C)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 原因：初版用 padding-top=safe-header-gap + 44px 内容行，把标题推到状态栏下方，顶部留白过大
- 改为与其它页面一致的规范：导航栏总高=var(--safe-header-gap)，内容行 position:absolute;bottom:0;height:var(--capsule-height) 贴底对齐胶囊；标题绝对居中(translateX(-50%))
- 页面根改为 height:100vh + flex 纵向布局，列表用 flex:1 撑满剩余空间（tab-bar/滚动区不再按 100vh 硬算）
- 返回按钮对齐既有规范(64rpx 圆形底 + 38rpx 图标)
- 回归 97 套件/674 用例全绿（theme-consistency.spec.ts 增加导航规范断言）
---
 pwuniapp/pages/user/coupons.vue        | 54 ++++++++++++++++---------
 pwuniapp/pages/user/notifications.vue  | 55 +++++++++++++++++---------
 server/tests/theme-consistency.spec.ts | 11 ++++++
 3 files changed, 83 insertions(+), 37 deletions(-)

diff --git a/pwuniapp/pages/user/coupons.vue b/pwuniapp/pages/user/coupons.vue
index fa3058b..ca9c440 100644
--- a/pwuniapp/pages/user/coupons.vue
+++ b/pwuniapp/pages/user/coupons.vue
@@ -221,50 +221,66 @@ onShow(() => {
 
 <style scoped>
 /* 颜色全部取自全局主题变量（App.vue 中按 theme-warm 覆盖），随主题切换自动适配 */
+/* 导航栏规范与其它页面一致：总高=安全区，内容行贴底对齐胶囊，标题绝对居中 */
 .coupon-page {
-  min-height: 100vh;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
   background: var(--bg-primary, #0a0f1d);
 }
 .custom-nav-bar {
-  position: sticky;
-  top: 0;
-  z-index: 50;
+  position: relative;
+  flex-shrink: 0;
+  height: var(--safe-header-gap, 88px);
   background: var(--nav-bg, #0a0f1d);
-  padding-top: var(--safe-header-gap, 0);
+  border-bottom: 1px solid var(--border-subtle, #1e293b);
 }
 .nav-content {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: var(--capsule-height, 32px);
   display: flex;
   align-items: center;
-  height: 44px;
-  padding: 0 12px;
+  justify-content: space-between;
+  padding: 0 24rpx;
+  box-sizing: border-box;
 }
 .btn-nav-back {
-  width: 32px;
-  height: 32px;
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: 32rpx;
+  background: var(--bg-surface-elevated, rgba(255, 255, 255, 0.08));
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .nav-back-icon {
-  width: 18px;
-  height: 18px;
+  width: 38rpx;
+  height: 38rpx;
 }
 .nav-title-wrap {
-  flex: 1;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
   text-align: center;
 }
 .nav-title {
-  color: var(--text-primary, #fff);
-  font-size: 17px;
-  font-weight: 600;
+  color: var(--text-primary, #f8fafc);
+  font-size: 32rpx;
+  font-weight: 700;
+  letter-spacing: 0.5rpx;
 }
 .nav-capsule-placeholder {
-  width: 32px;
+  width: var(--capsule-right-space, 0rpx);
 }
 .tab-bar {
+  flex-shrink: 0;
   display: flex;
   gap: 12px;
-  padding: 10px 16px 0;
+  padding: 12px 16px 0;
 }
 .tab-item {
   flex: 1;
@@ -289,7 +305,9 @@ onShow(() => {
   color: #fff;
 }
 .coupon-scroll {
-  height: calc(100vh - 90px - var(--safe-header-gap, 0px));
+  flex: 1;
+  min-height: 0;
+  box-sizing: border-box;
 }
 .coupon-body {
   padding: 12px 16px 40px;
diff --git a/pwuniapp/pages/user/notifications.vue b/pwuniapp/pages/user/notifications.vue
index d8dfe5a..a1d6489 100644
--- a/pwuniapp/pages/user/notifications.vue
+++ b/pwuniapp/pages/user/notifications.vue
@@ -170,56 +170,73 @@ onShow(() => {
 
 <style scoped>
 /* 颜色全部取自全局主题变量（App.vue 按 theme-warm 覆盖），随主题切换自动适配 */
+/* 导航栏规范与其它页面一致：总高=安全区，内容行贴底对齐胶囊，标题绝对居中 */
 .notif-page {
-  min-height: 100vh;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
   background: var(--bg-primary, #0a0f1d);
 }
 .custom-nav-bar {
-  position: sticky;
-  top: 0;
-  z-index: 50;
+  position: relative;
+  flex-shrink: 0;
+  height: var(--safe-header-gap, 88px);
   background: var(--nav-bg, #0a0f1d);
-  padding-top: var(--safe-header-gap, 0);
+  border-bottom: 1px solid var(--border-subtle, #1e293b);
 }
 .nav-content {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: var(--capsule-height, 32px);
   display: flex;
   align-items: center;
-  height: 44px;
-  padding: 0 12px;
+  justify-content: space-between;
+  padding: 0 24rpx;
+  box-sizing: border-box;
 }
 .btn-nav-back {
-  width: 32px;
-  height: 32px;
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: 32rpx;
+  background: var(--bg-surface-elevated, rgba(255, 255, 255, 0.08));
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .nav-back-icon {
-  width: 18px;
-  height: 18px;
+  width: 38rpx;
+  height: 38rpx;
 }
 .nav-title-wrap {
-  flex: 1;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
   text-align: center;
 }
 .nav-title {
-  color: var(--text-primary, #fff);
-  font-size: 17px;
-  font-weight: 600;
+  color: var(--text-primary, #f8fafc);
+  font-size: 32rpx;
+  font-weight: 700;
+  letter-spacing: 0.5rpx;
 }
 .nav-action {
-  min-width: 56px;
+  min-width: 96rpx;
   text-align: right;
 }
 .nav-action-text {
   color: var(--color-brand, #8b9cff);
-  font-size: 13px;
+  font-size: 26rpx;
 }
 .nav-capsule-placeholder {
-  width: 56px;
+  width: var(--capsule-right-space, 0rpx);
 }
 .notif-scroll {
-  height: calc(100vh - 44px - var(--safe-header-gap, 0px));
+  flex: 1;
+  min-height: 0;
+  box-sizing: border-box;
 }
 .notif-body {
   padding: 12px 16px 40px;
diff --git a/server/tests/theme-consistency.spec.ts b/server/tests/theme-consistency.spec.ts
index 8074b83..f7b1499 100644
--- a/server/tests/theme-consistency.spec.ts
+++ b/server/tests/theme-consistency.spec.ts
@@ -34,6 +34,17 @@ describe('第八十一批主题一致性闸门', () => {
     expect(workspace).toContain('var(--text-primary');
   });
 
+  it('新页面导航栏遵循统一规范（总高=安全区，内容行贴底对齐胶囊，标题绝对居中）', () => {
+    for (const page of [coupons, notifications]) {
+      expect(page).toContain('height: var(--safe-header-gap');
+      expect(page).toContain('position: absolute;');
+      expect(page).toContain('bottom: 0;');
+      expect(page).toContain('height: var(--capsule-height');
+      expect(page).toContain('transform: translateX(-50%)');
+      expect(page).toContain('flex-direction: column');
+    }
+  });
+
   it('全局主题变量在 App.vue 中按主题定义', () => {
     const app = read('pwuniapp/App.vue');
     expect(app).toContain(':root, page {');