From dde3cce5628bf365feb207a295e2c0960994f27a Mon Sep 17 00:00:00 2001
From: xcbyy <2578898740@qq.com>
Date: Tue, 20 Oct 2026 14:00:27 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E4=B8=8B=E5=8D=95=E9=A1=B5=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF/=E5=8D=A1=E7=89=87/=E6=96=87=E5=AD=97=E8=B7=9F?=
 =?UTF-8?q?=E9=9A=8F=E5=85=A8=E5=B1=80=E4=B8=BB=E9=A2=98=EF=BC=88=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E6=9A=96=E8=89=B2=E4=B8=BB=E9=A2=98=E4=B8=8B=E4=BB=8D?=
 =?UTF-8?q?=E6=98=AF=E6=B7=B1=E8=89=B2=E5=BA=95=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- create.vue 原先把整套深色配色写死，仅局部有 .theme-warm 覆盖 → 暖色主题下页面底色/卡片仍是深色
- 统一改用全局主题变量：容器 var(--bg-primary)、卡片 var(--bg-surface)、次级面 var(--bg-surface-elevated)、文字 --text-primary/secondary/muted、描边 --border-subtle、品牌 --color-brand(-gradient)、底部支付栏 --bg-surface-glass
- 替换 15 处深色时代的中性半透明白（rgba(255,255,255,0.03~0.1)）为对应主题变量，暖色下不再白上白
- 主按钮渐变改用 var(--color-brand-gradient)，暖色下自动变为橙色渐变
- theme-consistency.spec.ts 增加下单页断言（99 套件/682 用例全绿）
---
 pwuniapp/pages/order/create.vue        | 110 ++++++++++++-------------
 server/tests/theme-consistency.spec.ts |  15 ++++
 2 files changed, 70 insertions(+), 55 deletions(-)

diff --git a/pwuniapp/pages/order/create.vue b/pwuniapp/pages/order/create.vue
index 7c1158e..b66bd70 100644
--- a/pwuniapp/pages/order/create.vue
+++ b/pwuniapp/pages/order/create.vue
@@ -475,7 +475,7 @@ const selectBalancePay = () => {
       content: `当前钱包余额为 ¥${userBalance.value}，实付需 ¥${finalTotal.value}。您可以前往「我的」-「我的钱包」充值后再使用余额支付，或切换为微信直接支付。`,
       confirmText: '去充值',
       cancelText: '微信支付',
-      confirmColor: '#6366F1',
+      confirmColor: 'var(--color-brand)',
       success: (res) => {
         if (res.confirm) {
           uni.switchTab({ url: '/pages/user/index' });
@@ -611,16 +611,16 @@ const handlePay = async () => {
 <style lang="scss">
 .create-order-container {
   min-height: 100vh;
-  background-color: #0A0F1D;
+  background-color: var(--bg-primary);
   padding: 24rpx 32rpx calc(160rpx + env(safe-area-inset-bottom));
 }
 
 .order-card {
-  background-color: #151D30;
+  background-color: var(--bg-surface);
   border-radius: 24rpx;
   padding: 28rpx;
   margin-bottom: 24rpx;
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  border: 1px solid var(--border-subtle);
 
   .expert-profile {
     display: flex;
@@ -645,12 +645,12 @@ const handlePay = async () => {
         .expert-name {
           font-size: 28rpx;
           font-weight: 700;
-          color: #F8FAFC;
+          color: var(--text-primary);
         }
         .game-tag {
           font-size: 20rpx;
           background: rgba(99, 102, 241, 0.2);
-          color: #818CF8;
+          color: var(--color-brand-light);
           padding: 2rpx 10rpx;
           border-radius: 6rpx;
         }
@@ -658,7 +658,7 @@ const handlePay = async () => {
 
       .service-title {
         font-size: 24rpx;
-        color: #94A3B8;
+        color: var(--text-secondary);
       }
     }
 
@@ -683,12 +683,12 @@ const handlePay = async () => {
 
       .label-main {
         font-size: 28rpx;
-        color: #F8FAFC;
+        color: var(--text-primary);
         font-weight: 600;
       }
       .label-sub {
         font-size: 20rpx;
-        color: #64748B;
+        color: var(--text-muted);
         margin-top: 4rpx;
       }
     }
@@ -696,7 +696,7 @@ const handlePay = async () => {
     .stepper-box {
       display: flex;
       align-items: center;
-      background: rgba(255, 255, 255, 0.04);
+      background: var(--bg-surface-elevated);
       border-radius: 16rpx;
       padding: 6rpx;
 
@@ -705,7 +705,7 @@ const handlePay = async () => {
         height: 72rpx;
         line-height: 68rpx;
         padding: 0;
-        background: #1E2942;
+        background: var(--bg-surface-elevated);
         color: #FFF;
         font-size: 32rpx;
         border-radius: 14rpx;
@@ -720,7 +720,7 @@ const handlePay = async () => {
 
       .step-val {
         font-size: 30rpx;
-        color: #F8FAFC;
+        color: var(--text-primary);
         font-weight: 600;
         margin: 0 24rpx;
         font-variant-numeric: tabular-nums;
@@ -731,7 +731,7 @@ const handlePay = async () => {
   .section-title {
     font-size: 26rpx;
     font-weight: 600;
-    color: #F8FAFC;
+    color: var(--text-primary);
     margin-bottom: 18rpx;
   }
 
@@ -741,18 +741,18 @@ const handlePay = async () => {
 
     .time-tab {
       flex: 1;
-      background: rgba(255, 255, 255, 0.03);
-      border: 1px solid rgba(255, 255, 255, 0.08);
+      background: var(--bg-surface-elevated);
+      border: 1px solid var(--border-subtle);
       border-radius: 16rpx;
       padding: 20rpx;
       text-align: center;
 
       &.active {
         background: rgba(99, 102, 241, 0.15);
-        border-color: #6366F1;
+        border-color: var(--color-brand);
 
         .tab-t {
-          color: #818CF8;
+          color: var(--color-brand-light);
           font-weight: 700;
         }
       }
@@ -770,13 +770,13 @@ const handlePay = async () => {
         }
         .tab-t {
           font-size: 26rpx;
-          color: #CBD5E1;
+          color: var(--text-secondary);
         }
       }
 
       .tab-d {
         font-size: 20rpx;
-        color: #64748B;
+        color: var(--text-muted);
       }
     }
   }
@@ -786,11 +786,11 @@ const handlePay = async () => {
     justify-content: space-between;
     align-items: center;
     padding-bottom: 20rpx;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid var(--border-subtle);
 
     .cell-label {
       font-size: 26rpx;
-      color: #CBD5E1;
+      color: var(--text-secondary);
     }
 
     .cell-right {
@@ -805,7 +805,7 @@ const handlePay = async () => {
       }
       .arrow {
         font-size: 24rpx;
-        color: #64748B;
+        color: var(--text-muted);
       }
     }
   }
@@ -817,17 +817,17 @@ const handlePay = async () => {
 
     .cell-label {
       font-size: 24rpx;
-      color: #64748B;
+      color: var(--text-muted);
       width: 220rpx;
     }
 
     .remark-input {
       flex: 1;
       font-size: 24rpx;
-      color: #F8FAFC;
+      color: var(--text-primary);
     }
     .ph {
-      color: #475569;
+      color: var(--text-muted);
     }
   }
 
@@ -835,11 +835,11 @@ const handlePay = async () => {
     display: flex;
     align-items: center;
     padding: 20rpx 0;
-    border-top: 1px solid rgba(255, 255, 255, 0.05);
+    border-top: 1px solid var(--border-subtle);
 
     .cell-label {
       font-size: 24rpx;
-      color: #64748B;
+      color: var(--text-muted);
       width: 220rpx;
     }
 
@@ -849,9 +849,9 @@ const handlePay = async () => {
 
       .expense-pill {
         font-size: 22rpx;
-        color: #94A3B8;
-        background: rgba(255, 255, 255, 0.05);
-        border: 1px solid rgba(255, 255, 255, 0.1);
+        color: var(--text-secondary);
+        background: var(--bg-surface-elevated);
+        border: 1px solid var(--border-subtle);
         padding: 6rpx 16rpx;
         border-radius: 12rpx;
 
@@ -895,10 +895,10 @@ const handlePay = async () => {
     margin-bottom: 12rpx;
 
     .fee-k {
-      color: #94A3B8;
+      color: var(--text-secondary);
     }
     .fee-v {
-      color: #E2E8F0;
+      color: var(--text-primary);
       font-weight: 500;
 
       &.green {
@@ -934,20 +934,20 @@ const handlePay = async () => {
         }
 
         .muted {
-          color: #64748B;
+          color: var(--text-muted);
         }
       }
     }
 
     &.total-row {
-      border-top: 1px solid rgba(255, 255, 255, 0.06);
+      border-top: 1px solid var(--border-subtle);
       padding-top: 16rpx;
       margin-top: 16rpx;
       margin-bottom: 0;
 
       .fee-k {
         font-size: 26rpx;
-        color: #F8FAFC;
+        color: var(--text-primary);
         font-weight: 600;
       }
       .pay-val {
@@ -967,9 +967,9 @@ const handlePay = async () => {
   height: calc(120rpx + env(safe-area-inset-bottom));
   padding: 0 32rpx env(safe-area-inset-bottom);
   box-sizing: border-box;
-  background-color: rgba(21, 29, 48, 0.95);
+  background-color: var(--bg-surface-glass, rgba(21, 29, 48, 0.95));
   backdrop-filter: blur(12px);
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  border-top: 1px solid var(--border-subtle);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -983,7 +983,7 @@ const handlePay = async () => {
 
     .amount-label {
       font-size: 24rpx;
-      color: #94A3B8;
+      color: var(--text-secondary);
     }
     .amount-num {
       font-size: 40rpx;
@@ -1006,7 +1006,7 @@ const handlePay = async () => {
     margin: 0;
 
     &.btn-balance {
-      background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
+      background: var(--color-brand-gradient, linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%));
       box-shadow: 0 4rpx 20rpx rgba(99, 102, 241, 0.35);
     }
   }
@@ -1024,8 +1024,8 @@ const handlePay = async () => {
       justify-content: space-between;
       align-items: center;
       padding: 20rpx 24rpx;
-      background: rgba(255, 255, 255, 0.03);
-      border: 1px solid rgba(255, 255, 255, 0.08);
+      background: var(--bg-surface-elevated);
+      border: 1px solid var(--border-subtle);
       border-radius: 16rpx;
       transition: all 0.2s ease;
 
@@ -1054,7 +1054,7 @@ const handlePay = async () => {
           .method-title {
             font-size: 28rpx;
             font-weight: 600;
-            color: #F8FAFC;
+            color: var(--text-primary);
           }
 
           .balance-tag {
@@ -1073,7 +1073,7 @@ const handlePay = async () => {
 
           .method-desc {
             font-size: 22rpx;
-            color: #64748B;
+            color: var(--text-muted);
 
             &.warn-tip {
               color: #EF4444;
@@ -1086,15 +1086,15 @@ const handlePay = async () => {
         width: 36rpx;
         height: 36rpx;
         border-radius: 50%;
-        border: 2px solid #475569;
+        border: 2px solid var(--text-muted);
         display: flex;
         align-items: center;
         justify-content: center;
         transition: all 0.2s;
 
         &.checked {
-          border-color: #6366F1;
-          background: #6366F1;
+          border-color: var(--color-brand);
+          background: var(--color-brand);
 
           &::after {
             content: '';
@@ -1107,7 +1107,7 @@ const handlePay = async () => {
       }
 
       &.active {
-        border-color: #6366F1;
+        border-color: var(--color-brand);
         background: rgba(99, 102, 241, 0.08);
       }
 
@@ -1135,11 +1135,11 @@ const handlePay = async () => {
 .coupon-modal-content {
   width: 100%;
   max-width: 600px;
-  background: #151D30;
+  background: var(--bg-surface);
   border-top-left-radius: 36rpx;
   border-top-right-radius: 36rpx;
   padding: 36rpx 36rpx calc(36rpx + env(safe-area-inset-bottom));
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--border-subtle);
   border-bottom: none;
   box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.5);
   animation: slideUp 0.25s ease-out;
@@ -1153,7 +1153,7 @@ const handlePay = async () => {
     .modal-title {
       font-size: 32rpx;
       font-weight: 700;
-      color: #F8FAFC;
+      color: var(--text-primary);
     }
 
     .modal-close {
@@ -1178,8 +1178,8 @@ const handlePay = async () => {
     .coupon-card {
       display: flex;
       align-items: center;
-      background: rgba(255, 255, 255, 0.04);
-      border: 1px solid rgba(255, 255, 255, 0.08);
+      background: var(--bg-surface-elevated);
+      border: 1px solid var(--border-subtle);
       border-radius: 20rpx;
       padding: 24rpx;
       transition: all 0.2s;
@@ -1211,18 +1211,18 @@ const handlePay = async () => {
         .coupon-card-title {
           font-size: 28rpx;
           font-weight: 600;
-          color: #F8FAFC;
+          color: var(--text-primary);
         }
         .coupon-card-desc {
           font-size: 22rpx;
-          color: #94A3B8;
+          color: var(--text-secondary);
         }
       }
 
       .coupon-right {
         .coupon-tag {
           font-size: 22rpx;
-          color: #818CF8;
+          color: var(--color-brand-light);
           background: rgba(99, 102, 241, 0.15);
           padding: 6rpx 16rpx;
           border-radius: 12rpx;
diff --git a/server/tests/theme-consistency.spec.ts b/server/tests/theme-consistency.spec.ts
index f7b1499..80890a9 100644
--- a/server/tests/theme-consistency.spec.ts
+++ b/server/tests/theme-consistency.spec.ts
@@ -45,6 +45,21 @@ describe('第八十一批主题一致性闸门', () => {
     }
   });
 
+  it('下单页(create)底色/卡片/文字全部走全局主题变量', () => {
+    const create = read('pwuniapp/pages/order/create.vue');
+    expect(create).toContain('background-color: var(--bg-primary)');
+    expect(create).toContain('background-color: var(--bg-surface)');
+    expect(create).toContain('var(--bg-surface-glass');
+    expect(create).toContain('border: 1px solid var(--border-subtle)');
+    expect(create).toContain('color: var(--text-primary)');
+    expect(create).toContain('color: var(--text-muted)');
+    // 不得残留深色时代的中性硬编码（否则暖色主题下白上白/底色不一致）
+    expect(create).not.toContain('background-color: rgba(21, 29, 48');
+    expect(create).not.toContain('background-color: #0A0F1D');
+    expect(create).not.toContain('rgba(255, 255, 255, 0.0');
+    expect(create).toContain("'theme-warm': currentThemeKey === 'warm'");
+  });
+
   it('全局主题变量在 App.vue 中按主题定义', () => {
     const app = read('pwuniapp/App.vue');
     expect(app).toContain(':root, page {');