fix(ui): 优化大神详情页底部操作栏布局（不再挤压换行）

- 左侧「私聊/收藏/举报」独立成 bar-actions 组：固定 76rpx 宽、flex-shrink:0、文案 nowrap，杜绝被价格块挤压换行
- 价格块改为右对齐两行展示：小字标签「当前选定」+ 金额(独立 ¥ 符号，大号加粗)，不再与标签挤在一行
- 「立即预约」按钮 flex-shrink:0 + min-width 220rpx，胶囊圆角(999rpx)，保证任何机型都可点且不被压缩
- 未认证大神的提示改为独立的 guest-tip（右对齐、单行）
- 底部栏高度改为 min-height+内边距并保留安全区；暖色主题同步补充 summary-sym/guest-tip 配色
- 新增回归护栏 detail-bottom-bar.spec.ts（99 套件/681 用例全绿）

pwuniapp/pages/expert/detail.vue

@@ -170,27 +170,33 @@
 
     <!-- 底部固定栏 (限制居中与安全区) -->
     <view class="bottom-bar">
-      <view class="icon-action btn-active" @click="chatOnline">
-        <image class="action-svg" :src="ICONS.chat" mode="aspectFit" />
-        <text class="action-text">私聊</text>
-      </view>
-      <view class="icon-action btn-active" @click="toggleFavorite">
-        <image class="action-svg" :src="isFav ? ICONS.starFilled : ICONS.starOutline" mode="aspectFit" />
-        <text class="action-text" :class="{ 'fav-active': isFav }">{{ isFav ? '已收藏' : '收藏' }}</text>
-      </view>
-      <view class="icon-action btn-active" @click="openReportModal">
-        <image class="action-svg" :src="ICONS.shield" mode="aspectFit" />
-        <text class="action-text">举报</text>
+      <view class="bar-actions">
+        <view class="icon-action btn-active" @click="chatOnline">
+          <image class="action-svg" :src="ICONS.chat" mode="aspectFit" />
+          <text class="action-text">私聊</text>
+        </view>
+        <view class="icon-action btn-active" @click="toggleFavorite">
+          <image class="action-svg" :src="isFav ? ICONS.starFilled : ICONS.starOutline" mode="aspectFit" />
+          <text class="action-text" :class="{ 'fav-active': isFav }">{{ isFav ? '已收藏' : '收藏' }}</text>
+        </view>
+        <view class="icon-action btn-active" @click="openReportModal">
+          <image class="action-svg" :src="ICONS.shield" mode="aspectFit" />
+          <text class="action-text">举报</text>
+        </view>
       </view>
+
       <template v-if="isCompanion">
         <view class="price-summary">
-          <text class="summary-label">当前选定：</text>
-          <text class="summary-price">¥{{ currentSelectedService ? currentSelectedService.price : expert.price }}</text>
+          <text class="summary-label">当前选定</text>
+          <view class="summary-price-row">
+            <text class="summary-sym">¥</text>
+            <text class="summary-price">{{ currentSelectedService ? currentSelectedService.price : expert.price }}</text>
+          </view>
         </view>
         <button class="btn-book btn-active" @click="goToOrder">立即预约</button>
       </template>
-      <view v-else class="price-summary">
-        <text class="summary-label">该用户尚未认证为大神，暂不可预约</text>
+      <view v-else class="guest-tip">
+        <text class="guest-tip-text">该用户尚未认证为大神，暂不可预约</text>
       </view>
     </view>
 
@@ -1131,70 +1137,112 @@ const submitReportTicket = async () => {
   bottom: 0;
   left: 0;
   right: 0;
-  height: calc(120rpx + env(safe-area-inset-bottom));
-  padding: 0 32rpx env(safe-area-inset-bottom);
+  min-height: calc(112rpx + env(safe-area-inset-bottom));
+  padding: 12rpx 24rpx calc(12rpx + env(safe-area-inset-bottom));
   box-sizing: border-box;
   background-color: rgba(21, 29, 48, 0.95);
   backdrop-filter: blur(12px);
   border-top: 1px solid rgba(255, 255, 255, 0.08);
   display: flex;
   align-items: center;
-  gap: 20rpx;
+  gap: 12rpx;
   z-index: 100;
   max-width: 450px;
   margin: 0 auto;
 
-  .icon-action {
+  /* 左侧三个图标动作：固定宽度，绝不换行/被压缩 */
+  .bar-actions {
     display: flex;
-    flex-direction: column;
     align-items: center;
-    width: 80rpx;
+    gap: 6rpx;
+    flex-shrink: 0;
 
-    .action-svg {
-      width: 36rpx;
-      height: 36rpx;
-    }
-    .action-text {
-      font-size: 18rpx;
-      color: #94A3B8;
-      margin-top: 4rpx;
+    .icon-action {
+      width: 76rpx;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
 
-      &.fav-active {
-        color: #F59E0B;
-        font-weight: 600;
+      .action-svg {
+        width: 36rpx;
+        height: 36rpx;
+      }
+      .action-text {
+        font-size: 20rpx;
+        color: #94A3B8;
+        margin-top: 4rpx;
+        white-space: nowrap;
+        line-height: 1.2;
+
+        &.fav-active {
+          color: #F59E0B;
+          font-weight: 600;
+        }
       }
     }
   }
 
+  /* 价格块：右对齐、两行（标签 + 金额），不换行 */
   .price-summary {
-    flex: 1;
+    margin-left: auto;
+    flex-shrink: 0;
     display: flex;
-    align-items: baseline;
+    flex-direction: column;
+    align-items: flex-end;
+    justify-content: center;
+    padding: 0 4rpx;
 
     .summary-label {
-      font-size: 22rpx;
+      font-size: 20rpx;
       color: #64748B;
+      white-space: nowrap;
+      line-height: 1.2;
     }
-    .summary-price {
-      font-size: 36rpx;
+    .summary-price-row {
+      display: flex;
+      align-items: baseline;
+    }
+    .summary-sym {
+      font-size: 22rpx;
       font-weight: 700;
       color: #10B981;
-      margin-left: 6rpx;
+      margin-right: 2rpx;
+    }
+    .summary-price {
+      font-size: 38rpx;
+      font-weight: 700;
+      color: #10B981;
+      line-height: 1.1;
       font-variant-numeric: tabular-nums;
     }
   }
 
   .btn-book {
+    flex-shrink: 0;
+    min-width: 220rpx;
     background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
     color: #FFF;
-    font-size: 28rpx;
+    font-size: 30rpx;
     font-weight: 700;
-    border-radius: 44rpx;
-    height: 80rpx;
-    line-height: 80rpx;
-    padding: 0 48rpx;
-    box-shadow: 0 4rpx 20rpx rgba(99, 102, 241, 0.4);
+    border-radius: 999rpx;
+    height: 84rpx;
+    line-height: 84rpx;
+    padding: 0 36rpx;
     margin: 0;
+    white-space: nowrap;
+    box-shadow: 0 4rpx 20rpx rgba(99, 102, 241, 0.4);
+  }
+
+  .guest-tip {
+    margin-left: auto;
+    flex: 1;
+    text-align: right;
+
+    .guest-tip-text {
+      font-size: 22rpx;
+      color: #94A3B8;
+    }
   }
 }
 
@@ -1591,11 +1639,20 @@ const submitReportTicket = async () => {
       .summary-label {
         color: #78716C;
       }
+      .summary-sym {
+        color: #EA580C;
+      }
       .summary-price {
         color: #EA580C;
       }
     }
 
+    .guest-tip {
+      .guest-tip-text {
+        color: #57534E;
+      }
+    }
+
     .btn-book {
       background: linear-gradient(135deg, #EA580C 0%, #C2410C 100%);
       box-shadow: 0 4rpx 20rpx rgba(234, 88, 12, 0.35);

server/tests/detail-bottom-bar.spec.ts

@@ -0,0 +1,35 @@
+// 已读取AGENTS.md
+import * as fs from 'fs';
+import * as path from 'path';
+
+/**
+ * 第八十三批：大神详情页底部操作栏布局（不换行、不被压缩、价格块右对齐）。
+ */
+describe('第八十三批详情页底部栏布局闸门', () => {
+  const root = path.resolve(__dirname, '../../');
+  const detail = fs.readFileSync(path.join(root, 'pwuniapp/pages/expert/detail.vue'), 'utf-8');
+
+  it('底部栏左侧图标动作独立成组，固定宽度不换行', () => {
+    expect(detail).toContain('<view class="bar-actions">');
+    expect(detail).toContain('.bar-actions {');
+    expect(detail).toContain('flex-shrink: 0;');
+    expect(detail).toContain('white-space: nowrap;');
+  });
+
+  it('价格块右对齐两行展示（标签+金额），金额独立符号', () => {
+    expect(detail).toContain('<text class="summary-label">当前选定</text>');
+    expect(detail).toContain('class="summary-price-row"');
+    expect(detail).toContain('class="summary-sym"');
+    expect(detail).toContain('align-items: flex-end;');
+  });
+
+  it('预约按钮不被压缩且最小宽度保证可点击', () => {
+    expect(detail).toContain('min-width: 220rpx;');
+    expect(detail).toContain('border-radius: 999rpx;');
+  });
+
+  it('兼容暖色主题的底部栏配色', () => {
+    expect(detail).toContain('.guest-tip-text');
+    expect(detail).toContain('color: #EA580C;');
+  });
+});