From 1a56ba2682655b8330349356bf144a8bd9925e45 Mon Sep 17 00:00:00 2001
From: wikiboss <zacow@163.com>
Date: Wed, 16 Sep 2026 20:27:07 +0800
Subject: [PATCH] =?UTF-8?q?feat(theme):=20=E5=AE=8C=E5=96=84=E9=A1=B6?=
 =?UTF-8?q?=E9=83=A8=E5=AF=BC=E8=88=AA=E6=A0=8F=E4=B8=8E=E5=BA=95=E9=83=A8?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E6=B5=85=E8=89=B2=E6=9A=96=E8=89=B2=E7=B3=BB?=
 =?UTF-8?q?=E9=80=82=E9=85=8D=E5=8F=8A=E5=A4=9A=E7=AB=AFTab=E7=94=9F?=
 =?UTF-8?q?=E5=91=BD=E5=91=A8=E6=9C=9F=E5=90=8C=E6=AD=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pwuniapp/App.vue                       |  64 +++++++++++++-
 pwuniapp/common/theme.js               |  67 ++++++++++++++-
 pwuniapp/pages/activity/list.vue       |   9 +-
 pwuniapp/pages/index/index.vue         |  10 ++-
 pwuniapp/pages/order/list.vue          | 112 ++++++++++++++++++++++++-
 pwuniapp/pages/user/index.vue          |  10 ++-
 server/src/core/theme/theme.manager.ts |  38 ++++++++-
 server/tests/theme.spec.ts             |  74 ++++++++++++++++
 8 files changed, 370 insertions(+), 14 deletions(-)

diff --git a/pwuniapp/App.vue b/pwuniapp/App.vue
index 6b119b4..33832da 100644
--- a/pwuniapp/App.vue
+++ b/pwuniapp/App.vue
@@ -1,13 +1,15 @@
 <script>
-import { getCurrentThemeKey } from './common/theme.js';
+import { getCurrentThemeKey, applyThemeToNativeUI } from './common/theme.js';
 
 export default {
   onLaunch: function () {
     const currentTheme = getCurrentThemeKey();
+    applyThemeToNativeUI(currentTheme);
     console.log('App Launch: 电竞陪玩小程序初始化, 当前主题:', currentTheme);
   },
   onShow: function () {
-    console.log('App Show');
+    const currentTheme = getCurrentThemeKey();
+    applyThemeToNativeUI(currentTheme);
   },
   onHide: function () {
     console.log('App Hide');
@@ -33,6 +35,11 @@ export default {
   --text-secondary: #94A3B8;
   --text-muted: #64748B;
   --shadow-brand: 0 8rpx 24rpx rgba(99, 102, 241, 0.35);
+  --nav-bg: #0A0F1D;
+  --nav-color: #F8FAFC;
+  --tab-bg: #151D30;
+  --tab-color: #94A3B8;
+  --tab-active: #6366F1;
 }
 
 /* 浅色暖阳晨曦主题 (Light Warm Sunset Morning) */
@@ -52,6 +59,11 @@ page.theme-warm, .theme-warm {
   --text-secondary: #57534E;
   --text-muted: #78716C;
   --shadow-brand: 0 8rpx 24rpx rgba(234, 88, 12, 0.25);
+  --nav-bg: #FDFBF7;
+  --nav-color: #1C1917;
+  --tab-bg: #FFFFFF;
+  --tab-color: #78716C;
+  --tab-active: #EA580C;
 
   background-color: #FDFBF7;
   color: #1C1917;
@@ -161,8 +173,52 @@ html, body {
 }
 
 uni-tabbar .uni-tabbar__bd {
-  background-color: var(--bg-surface, #151D30) !important;
-  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
+  background-color: var(--tab-bg, var(--bg-surface, #151D30)) !important;
+  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08)) !important;
+  transition: background-color 0.2s ease;
+}
+
+/* 顶部导航栏 (H5 端 uni-page-head 动态浅色/暗黑主题自适应) */
+uni-page-head, .uni-page-head {
+  background-color: var(--nav-bg, var(--bg-primary, #0A0F1D)) !important;
+  color: var(--nav-color, var(--text-primary, #F8FAFC)) !important;
+  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08)) !important;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+uni-page-head .uni-page-head__title {
+  color: var(--nav-color, var(--text-primary, #F8FAFC)) !important;
+}
+
+/* 浅色暖阳晨曦模式下强制确保 TabBar 与 PageHead 呈现高质感浅色 */
+body:has(.theme-warm) uni-page-head,
+page.theme-warm ~ uni-page-head {
+  background-color: #FDFBF7 !important;
+  border-bottom: 1px solid #F0ECE4 !important;
+}
+
+body:has(.theme-warm) uni-page-head .uni-page-head__title,
+page.theme-warm ~ uni-page-head .uni-page-head__title {
+  color: #1C1917 !important;
+}
+
+body:has(.theme-warm) uni-tabbar .uni-tabbar__bd,
+page.theme-warm ~ uni-tabbar .uni-tabbar__bd {
+  background-color: #FFFFFF !important;
+  border-top: 1px solid #F0ECE4 !important;
+  box-shadow: 0 -4rpx 20rpx rgba(28, 25, 23, 0.04) !important;
+}
+
+body:has(.theme-warm) uni-tabbar .uni-tabbar__label,
+page.theme-warm ~ uni-tabbar .uni-tabbar__label {
+  color: #78716C !important;
+}
+
+body:has(.theme-warm) uni-tabbar .uni-tabbar-item.active .uni-tabbar__label,
+page.theme-warm ~ uni-tabbar .uni-tabbar-item.active .uni-tabbar__label,
+body:has(.theme-warm) uni-tabbar .uni-tabbar__item.active .uni-tabbar__label,
+page.theme-warm ~ uni-tabbar .uni-tabbar__item.active .uni-tabbar__label {
+  color: #EA580C !important;
 }
 /* #endif */
 </style>
diff --git a/pwuniapp/common/theme.js b/pwuniapp/common/theme.js
index cb60448..bd66126 100644
--- a/pwuniapp/common/theme.js
+++ b/pwuniapp/common/theme.js
@@ -28,7 +28,17 @@ export const THEMES = {
       textPrimary: '#F8FAFC',
       textSecondary: '#94A3B8',
       textMuted: '#64748B',
-      shadowBrand: '0 8rpx 24rpx rgba(99, 102, 241, 0.35)'
+      shadowBrand: '0 8rpx 24rpx rgba(99, 102, 241, 0.35)',
+      navBar: {
+        backgroundColor: '#0A0F1D',
+        frontColor: '#ffffff'
+      },
+      tabBar: {
+        color: '#94A3B8',
+        selectedColor: '#6366F1',
+        backgroundColor: '#151D30',
+        borderStyle: 'black'
+      }
     }
   },
   [THEME_KEYS.WARM]: {
@@ -50,13 +60,61 @@ export const THEMES = {
       textPrimary: '#1C1917',
       textSecondary: '#57534E',
       textMuted: '#78716C',
-      shadowBrand: '0 8rpx 24rpx rgba(234, 88, 12, 0.25)'
+      shadowBrand: '0 8rpx 24rpx rgba(234, 88, 12, 0.25)',
+      navBar: {
+        backgroundColor: '#FDFBF7',
+        frontColor: '#000000'
+      },
+      tabBar: {
+        color: '#78716C',
+        selectedColor: '#EA580C',
+        backgroundColor: '#FFFFFF',
+        borderStyle: 'white'
+      }
     }
   }
 };
 
 const STORAGE_KEY = 'peiwan_app_theme';
 
+/**
+ * 将主题色彩同步应用至小程序与原生顶部导航栏及底部 TabBar
+ */
+export function applyThemeToNativeUI(themeKey) {
+  const theme = THEMES[themeKey] || THEMES[THEME_KEYS.COOL];
+  const { navBar, tabBar } = theme.tokens;
+
+  // 1. 设置顶部系统导航栏颜色
+  try {
+    if (typeof uni !== 'undefined' && uni.setNavigationBarColor) {
+      uni.setNavigationBarColor({
+        frontColor: navBar.frontColor,
+        backgroundColor: navBar.backgroundColor,
+        animation: {
+          duration: 200,
+          timingFunc: 'easeOut'
+        }
+      });
+    }
+  } catch (e) {
+    // 忽略特定页面无系统导航栏异常
+  }
+
+  // 2. 设置底部原生 TabBar 菜单颜色
+  try {
+    if (typeof uni !== 'undefined' && uni.setTabBarStyle) {
+      uni.setTabBarStyle({
+        color: tabBar.color,
+        selectedColor: tabBar.selectedColor,
+        backgroundColor: tabBar.backgroundColor,
+        borderStyle: tabBar.borderStyle
+      });
+    }
+  } catch (e) {
+    // 忽略非 TabBar 页面抛出的异常
+  }
+}
+
 /**
  * 获取当前持久化的主题标识
  */
@@ -88,7 +146,7 @@ export function getCurrentTokens() {
 }
 
 /**
- * 切换全局主题并持久化，广播全局事件
+ * 切换全局主题并持久化，广播全局事件，同步更新顶部与底部 UI
  */
 export function setTheme(themeKey) {
   const targetKey = THEMES[themeKey] ? themeKey : THEME_KEYS.COOL;
@@ -97,6 +155,9 @@ export function setTheme(themeKey) {
   } catch (e) {
     // 忽略持久化异常
   }
+
+  // 同步原生顶部与底部栏色彩
+  applyThemeToNativeUI(targetKey);
   
   // 广播主题变更事件
   try {
diff --git a/pwuniapp/pages/activity/list.vue b/pwuniapp/pages/activity/list.vue
index 06883c3..8165006 100644
--- a/pwuniapp/pages/activity/list.vue
+++ b/pwuniapp/pages/activity/list.vue
@@ -153,9 +153,10 @@
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { onShow } from '@dcloudio/uni-app';
 import { ACTIVITIES_LIST } from '@/common/mock.js';
 import { ICONS } from '@/common/icons.js';
-import { getCurrentThemeKey } from '@/common/theme.js';
+import { getCurrentThemeKey, applyThemeToNativeUI } from '@/common/theme.js';
 
 const activities = ref(ACTIVITIES_LIST);
 const currentTab = ref('ALL');
@@ -164,6 +165,7 @@ const currentThemeKey = ref(getCurrentThemeKey());
 
 const onThemeChanged = (key) => {
   currentThemeKey.value = key;
+  applyThemeToNativeUI(key);
 };
 
 onMounted(() => {
@@ -171,6 +173,11 @@ onMounted(() => {
   uni.$on('theme-change', onThemeChanged);
 });
 
+onShow(() => {
+  currentThemeKey.value = getCurrentThemeKey();
+  applyThemeToNativeUI(currentThemeKey.value);
+});
+
 onUnmounted(() => {
   uni.$off('theme-change', onThemeChanged);
 });
diff --git a/pwuniapp/pages/index/index.vue b/pwuniapp/pages/index/index.vue
index f0712f0..e006b0f 100644
--- a/pwuniapp/pages/index/index.vue
+++ b/pwuniapp/pages/index/index.vue
@@ -143,9 +143,10 @@
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { onShow } from '@dcloudio/uni-app';
 import { GAMES_LIST, BANNERS, EXPERTS_LIST } from '@/common/mock.js';
 import { ICONS } from '@/common/icons.js';
-import { getCurrentThemeKey } from '@/common/theme.js';
+import { getCurrentThemeKey, applyThemeToNativeUI } from '@/common/theme.js';
 
 const games = ref(GAMES_LIST);
 const banners = ref(BANNERS);
@@ -156,13 +157,20 @@ const currentThemeKey = ref(getCurrentThemeKey());
 
 const onThemeChanged = (key) => {
   currentThemeKey.value = key;
+  applyThemeToNativeUI(key);
 };
 
 onMounted(() => {
   currentThemeKey.value = getCurrentThemeKey();
+  applyThemeToNativeUI(currentThemeKey.value);
   uni.$on('theme-change', onThemeChanged);
 });
 
+onShow(() => {
+  currentThemeKey.value = getCurrentThemeKey();
+  applyThemeToNativeUI(currentThemeKey.value);
+});
+
 onUnmounted(() => {
   uni.$off('theme-change', onThemeChanged);
 });
diff --git a/pwuniapp/pages/order/list.vue b/pwuniapp/pages/order/list.vue
index dc4331e..f4f75c9 100644
--- a/pwuniapp/pages/order/list.vue
+++ b/pwuniapp/pages/order/list.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="order-list-container">
+  <view class="order-list-container" :class="{ 'theme-warm': currentThemeKey === 'warm' }">
     <!-- 顶部状态分类 Tab -->
     <view class="tab-header">
       <view
@@ -76,9 +76,32 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { onShow } from '@dcloudio/uni-app';
 import { ORDERS_LIST } from '@/common/mock.js';
 import { ICONS } from '@/common/icons.js';
+import { getCurrentThemeKey, applyThemeToNativeUI } from '@/common/theme.js';
+
+const currentThemeKey = ref(getCurrentThemeKey());
+
+const onThemeChanged = (key) => {
+  currentThemeKey.value = key;
+  applyThemeToNativeUI(key);
+};
+
+onMounted(() => {
+  currentThemeKey.value = getCurrentThemeKey();
+  uni.$on('theme-change', onThemeChanged);
+});
+
+onShow(() => {
+  currentThemeKey.value = getCurrentThemeKey();
+  applyThemeToNativeUI(currentThemeKey.value);
+});
+
+onUnmounted(() => {
+  uni.$off('theme-change', onThemeChanged);
+});
 
 const tabs = [
   { key: 'ALL', name: '全部' },
@@ -435,4 +458,89 @@ const rateExpert = (id) => {
     }
   }
 }
+
+.order-list-container.theme-warm {
+  background-color: #FDFBF7;
+
+  .tab-header {
+    background-color: #FFFFFF;
+    border-color: #F0ECE4;
+    box-shadow: 0 4rpx 16rpx rgba(28, 25, 23, 0.04);
+
+    .tab-item {
+      .tab-text {
+        color: #78716C;
+      }
+      &.active {
+        background: rgba(234, 88, 12, 0.1);
+        .tab-text {
+          color: #EA580C;
+        }
+        .tab-indicator {
+          background: #EA580C;
+          box-shadow: 0 0 10rpx rgba(234, 88, 12, 0.4);
+        }
+      }
+    }
+  }
+
+  .orders-wrap .order-card {
+    background-color: #FFFFFF;
+    border-color: #F0ECE4;
+    box-shadow: 0 6rpx 20rpx rgba(28, 25, 23, 0.05);
+
+    .order-head {
+      border-bottom-color: #F5F2EC;
+      .order-sn {
+        color: #78716C;
+      }
+    }
+
+    .expert-block {
+      .expert-meta {
+        .name-row .expert-name {
+          color: #1C1917;
+        }
+        .service-name {
+          color: #57534E;
+        }
+        .order-time {
+          color: #78716C;
+        }
+      }
+      .amount-box .quantity-text {
+        color: #78716C;
+      }
+    }
+
+    .order-actions {
+      border-top-color: #F5F2EC;
+
+      .action-btn {
+        &.cancel-btn {
+          color: #78716C;
+          border-color: #E7E5E4;
+        }
+        &.primary-btn {
+          background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
+        }
+        &.chat-btn {
+          background: rgba(234, 88, 12, 0.1);
+          color: #EA580C;
+          border-color: rgba(234, 88, 12, 0.25);
+        }
+      }
+    }
+  }
+
+  .empty-state {
+    .empty-text {
+      color: #78716C;
+    }
+    .empty-btn {
+      background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
+      box-shadow: 0 4rpx 16rpx rgba(234, 88, 12, 0.35);
+    }
+  }
+}
 </style>
diff --git a/pwuniapp/pages/user/index.vue b/pwuniapp/pages/user/index.vue
index 8807ff9..eba993f 100644
--- a/pwuniapp/pages/user/index.vue
+++ b/pwuniapp/pages/user/index.vue
@@ -121,9 +121,10 @@
 
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue';
+import { onShow } from '@dcloudio/uni-app';
 import { USER_PROFILE } from '@/common/mock.js';
 import { ICONS } from '@/common/icons.js';
-import { getCurrentThemeKey, setTheme, THEME_KEYS } from '@/common/theme.js';
+import { getCurrentThemeKey, setTheme, THEME_KEYS, applyThemeToNativeUI } from '@/common/theme.js';
 
 const user = ref(USER_PROFILE);
 const currentRole = ref('PLAYER');
@@ -131,13 +132,20 @@ const currentThemeKey = ref(getCurrentThemeKey());
 
 const onThemeChanged = (key) => {
   currentThemeKey.value = key;
+  applyThemeToNativeUI(key);
 };
 
 onMounted(() => {
   currentThemeKey.value = getCurrentThemeKey();
+  applyThemeToNativeUI(currentThemeKey.value);
   uni.$on('theme-change', onThemeChanged);
 });
 
+onShow(() => {
+  currentThemeKey.value = getCurrentThemeKey();
+  applyThemeToNativeUI(currentThemeKey.value);
+});
+
 onUnmounted(() => {
   uni.$off('theme-change', onThemeChanged);
 });
diff --git a/server/src/core/theme/theme.manager.ts b/server/src/core/theme/theme.manager.ts
index f74c0c0..7669d89 100644
--- a/server/src/core/theme/theme.manager.ts
+++ b/server/src/core/theme/theme.manager.ts
@@ -10,6 +10,18 @@ export const THEME_KEYS = {
 
 export type ThemeKey = (typeof THEME_KEYS)[keyof typeof THEME_KEYS];
 
+export interface NavBarThemeTokens {
+  backgroundColor: string;
+  frontColor: '#ffffff' | '#000000';
+}
+
+export interface TabBarThemeTokens {
+  color: string;
+  selectedColor: string;
+  backgroundColor: string;
+  borderStyle: 'white' | 'black';
+}
+
 export interface ThemeTokens {
   bgPrimary: string;
   bgSurface: string;
@@ -26,6 +38,8 @@ export interface ThemeTokens {
   textSecondary: string;
   textMuted: string;
   shadowBrand: string;
+  navBar: NavBarThemeTokens;
+  tabBar: TabBarThemeTokens;
 }
 
 export interface ThemeItem {
@@ -55,7 +69,17 @@ export const THEMES: Record<ThemeKey, ThemeItem> = {
       textPrimary: '#F8FAFC',
       textSecondary: '#94A3B8',
       textMuted: '#64748B',
-      shadowBrand: '0 8rpx 24rpx rgba(99, 102, 241, 0.35)'
+      shadowBrand: '0 8rpx 24rpx rgba(99, 102, 241, 0.35)',
+      navBar: {
+        backgroundColor: '#0A0F1D',
+        frontColor: '#ffffff'
+      },
+      tabBar: {
+        color: '#94A3B8',
+        selectedColor: '#6366F1',
+        backgroundColor: '#151D30',
+        borderStyle: 'black'
+      }
     }
   },
   [THEME_KEYS.WARM]: {
@@ -77,7 +101,17 @@ export const THEMES: Record<ThemeKey, ThemeItem> = {
       textPrimary: '#1C1917',
       textSecondary: '#57534E',
       textMuted: '#78716C',
-      shadowBrand: '0 8rpx 24rpx rgba(234, 88, 12, 0.25)'
+      shadowBrand: '0 8rpx 24rpx rgba(234, 88, 12, 0.25)',
+      navBar: {
+        backgroundColor: '#FDFBF7',
+        frontColor: '#000000'
+      },
+      tabBar: {
+        color: '#78716C',
+        selectedColor: '#EA580C',
+        backgroundColor: '#FFFFFF',
+        borderStyle: 'white'
+      }
     }
   }
 };
diff --git a/server/tests/theme.spec.ts b/server/tests/theme.spec.ts
index 7b655cd..62a5dca 100644
--- a/server/tests/theme.spec.ts
+++ b/server/tests/theme.spec.ts
@@ -158,4 +158,78 @@ describe('ThemeManager (TDD 测试套件: 暖色系与双主题设计系统)', (
       }
     });
   });
+
+  describe('5. 顶部导航栏 (NavBar) 与底部菜单 (TabBar) 双主题规范校验', () => {
+    it('冷色系 NavBar 必须为深色黑底白字，TabBar 必须为深蓝卡片底', () => {
+      const coolTheme = THEMES[THEME_KEYS.COOL];
+      expect(coolTheme.tokens.navBar).toBeDefined();
+      expect(coolTheme.tokens.navBar.backgroundColor).toBe('#0A0F1D');
+      expect(coolTheme.tokens.navBar.frontColor).toBe('#ffffff');
+
+      expect(coolTheme.tokens.tabBar).toBeDefined();
+      expect(coolTheme.tokens.tabBar.backgroundColor).toBe('#151D30');
+      expect(coolTheme.tokens.tabBar.selectedColor).toBe('#6366F1');
+    });
+
+    it('浅色暖阳晨曦模式下，顶部 NavBar 与底部 TabBar 必须全部为浅色亮底', () => {
+      const warmTheme = THEMES[THEME_KEYS.WARM];
+      expect(warmTheme.tokens.navBar).toBeDefined();
+      expect(warmTheme.tokens.tabBar).toBeDefined();
+
+      // 顶部 NavBar 浅色底 (亮度 >= 0.85)，文字为深黑 (#000000)
+      expect(getLuminance(warmTheme.tokens.navBar.backgroundColor)).toBeGreaterThanOrEqual(0.85);
+      expect(warmTheme.tokens.navBar.frontColor).toBe('#000000');
+
+      // 底部 TabBar 浅色底 (纯白或米白，亮度 >= 0.95)，选中项高亮为曜橙
+      expect(getLuminance(warmTheme.tokens.tabBar.backgroundColor)).toBeGreaterThanOrEqual(0.95);
+      expect(warmTheme.tokens.tabBar.selectedColor).toBe('#EA580C');
+      expect(warmTheme.tokens.tabBar.borderStyle).toBe('white');
+    });
+  });
+
+  describe('6. 核心 Tab 页面多端生命周期与主题自适应门禁校验', () => {
+    const rootDir = path.resolve(__dirname, '../../');
+    const tabPages = [
+      path.join(rootDir, 'pwuniapp', 'pages', 'index', 'index.vue'),
+      path.join(rootDir, 'pwuniapp', 'pages', 'activity', 'list.vue'),
+      path.join(rootDir, 'pwuniapp', 'pages', 'order', 'list.vue'),
+      path.join(rootDir, 'pwuniapp', 'pages', 'user', 'index.vue'),
+    ];
+
+    it('四大 Tab 页面必须全部引入并在 onShow 中调用 applyThemeToNativeUI', () => {
+      for (const pagePath of tabPages) {
+        expect(fs.existsSync(pagePath)).toBe(true);
+        const content = fs.readFileSync(pagePath, 'utf-8');
+        const relativeName = path.relative(rootDir, pagePath);
+
+        expect({
+          file: relativeName,
+          hasApplyTheme: content.includes('applyThemeToNativeUI'),
+          hasOnShow: content.includes('onShow')
+        }).toEqual({
+          file: relativeName,
+          hasApplyTheme: true,
+          hasOnShow: true
+        });
+      }
+    });
+
+    it('四大 Tab 页面必须包含 theme-warm 根容器类绑定与浅色样式适配', () => {
+      for (const pagePath of tabPages) {
+        const content = fs.readFileSync(pagePath, 'utf-8');
+        const relativeName = path.relative(rootDir, pagePath);
+
+        expect({
+          file: relativeName,
+          hasThemeWarmBind: content.includes('theme-warm'),
+          hasThemeWarmStyle: content.includes('.theme-warm')
+        }).toEqual({
+          file: relativeName,
+          hasThemeWarmBind: true,
+          hasThemeWarmStyle: true
+        });
+      }
+    });
+  });
 });
+