style: 优化退款状态指示器设计，统一圆点+色条风格

- 订单列表：pill 形圆点指示器 + 色彩语义（琥珀审核中/蓝色部分/灰色全额）
- 待审核状态圆点带脉冲动画，直观传达"处理中"
- 金额加粗突出显示
- 订单详情 & 退款页同步统一为圆点指示器，去除 emoji 图标
- 颜色全部使用设计令牌，与系统 amber 主色系协调

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

haha-mp/src/pages/orderDetail/orderDetail.vue

@@ -54,17 +54,17 @@
         </view>
 
         <!-- 退款状态提示 -->
-        <view v-if="order.refundStatus === 'PENDING'" class="refund-status-notice pending">
-          <text class="refund-notice-icon">⏳</text>
-          <text class="refund-notice-text">退款申请已提交，正在审核中</text>
+        <view v-if="order.refundStatus === 'PENDING'" class="refund-notice pending">
+          <view class="notice-dot"></view>
+          <text class="notice-text">退款申请已提交，正在审核中</text>
         </view>
-        <view v-else-if="order.refundAmount > 0 && order.refundAmount < (order.paidAmount || order.totalAmount || 0)" class="refund-status-notice partial">
-          <text class="refund-notice-icon">📋</text>
-          <text class="refund-notice-text">已退款 ¥{{ order.refundAmount.toFixed(2) }}，可继续申请退款</text>
+        <view v-else-if="order.refundAmount > 0 && order.refundAmount < (order.paidAmount || order.totalAmount || 0)" class="refund-notice partial">
+          <view class="notice-dot"></view>
+          <text class="notice-text">已退款 <text class="notice-amount">¥{{ order.refundAmount.toFixed(2) }}</text>，可继续申请退款</text>
         </view>
-        <view v-else-if="order.refundAmount > 0 && order.refundAmount >= (order.paidAmount || order.totalAmount || 0)" class="refund-status-notice full">
-          <text class="refund-notice-icon">✅</text>
-          <text class="refund-notice-text">已全额退款</text>
+        <view v-else-if="order.refundAmount > 0 && order.refundAmount >= (order.paidAmount || order.totalAmount || 0)" class="refund-notice full">
+          <view class="notice-dot"></view>
+          <text class="notice-text">已全额退款</text>
         </view>
 
         <view class="card-footer-actions">
@@ -449,40 +449,59 @@ const viewVideo = (url: string) => {
   font-weight: 700;
 }
 
-.refund-status-notice {
+.refund-notice {
   display: flex;
   align-items: center;
-  gap: $spacing-sm;
+  gap: 12rpx;
   margin: 0 $spacing-lg $spacing-xs;
   padding: 20rpx $spacing-md;
   border-radius: $radius-md;
   font-size: 26rpx;
+  line-height: 1.5;
+
+  .notice-dot {
+    width: 14rpx;
+    height: 14rpx;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .notice-amount {
+    font-weight: 700;
+  }
 
   &.pending {
-    background-color: #fff7e6;
-    border: 1rpx solid #ffd591;
-    color: $color-warning;
+    background-color: $color-primary-bg;
+    color: $color-primary-dark;
+
+    .notice-dot {
+      background-color: $color-warning;
+      animation: notice-dot-pulse 1.5s ease-in-out infinite;
+    }
   }
 
   &.partial {
-    background-color: #e6f7ff;
-    border: 1rpx solid #91d5ff;
-    color: $color-info;
+    background-color: #E3F2FD;
+    color: #1565C0;
+
+    .notice-dot {
+      background-color: $color-info;
+    }
   }
 
   &.full {
-    background-color: #f6ffed;
-    border: 1rpx solid #b7eb8f;
-    color: $color-success;
-  }
+    background-color: #E8F5E9;
+    color: #2E7D32;
 
-  .refund-notice-icon {
-    font-size: 28rpx;
+    .notice-dot {
+      background-color: $color-success;
+    }
   }
+}
 
-  .refund-notice-text {
-    flex: 1;
-  }
+@keyframes notice-dot-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
 }
 
 .card-footer-actions {

haha-mp/src/pages/orders/orders.vue

@@ -43,10 +43,19 @@
           </view>
         </view>
         <view class="order-footer">
-          <!-- 退款状态 -->
-          <text v-if="order.refundStatus === 'PENDING'" class="refund-tag pending">退款审核中</text>
-          <text v-else-if="order.refundAmount > 0 && order.refundAmount < (order.paidAmount || order.totalAmount || 0)" class="refund-tag partial">已退 ¥{{ order.refundAmount.toFixed(2) }}</text>
-          <text v-else-if="order.refundAmount > 0 && order.refundAmount >= (order.paidAmount || order.totalAmount || 0)" class="refund-tag full">已全额退款</text>
+          <!-- 退款状态指示器 -->
+          <view v-if="order.refundStatus === 'PENDING'" class="refund-indicator pending">
+            <view class="indicator-dot"></view>
+            <text class="indicator-text">退款审核中</text>
+          </view>
+          <view v-else-if="order.refundAmount > 0 && order.refundAmount < (order.paidAmount || order.totalAmount || 0)" class="refund-indicator partial">
+            <view class="indicator-dot"></view>
+            <text class="indicator-text">已退 <text class="indicator-amount">¥{{ order.refundAmount.toFixed(2) }}</text></text>
+          </view>
+          <view v-else-if="order.refundAmount > 0 && order.refundAmount >= (order.paidAmount || order.totalAmount || 0)" class="refund-indicator full">
+            <view class="indicator-dot"></view>
+            <text class="indicator-text">已全额退款</text>
+          </view>
           <button v-else-if="canRefund(order)" class="action-btn refund-btn" @click.stop="applyRefund(order)">申请退款</button>
           <button class="action-btn detail-btn" @click.stop="viewOrderDetail(order)">订单详情</button>
         </view>
@@ -330,30 +339,61 @@ const viewOrderDetail = (order: OrderInfo) => {
   }
 }
 
-.refund-tag {
-  padding: 6rpx 20rpx;
-  border-radius: $radius-sm;
+/* 退款状态指示器 */
+.refund-indicator {
+  display: flex;
+  align-items: center;
+  gap: 10rpx;
+  padding: 10rpx 20rpx;
+  border-radius: $radius-xl;
+  margin-right: auto;
   font-size: 24rpx;
   font-weight: 500;
-  margin-right: auto;
-  line-height: 1.6;
+  line-height: 1;
+
+  .indicator-dot {
+    width: 12rpx;
+    height: 12rpx;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .indicator-amount {
+    font-weight: 700;
+    letter-spacing: 0.5rpx;
+  }
 
   &.pending {
-    color: $color-warning;
-    background-color: #fff7e6;
-    border: 1rpx solid #ffd591;
+    background-color: $color-primary-bg;
+    color: $color-primary-dark;
+
+    .indicator-dot {
+      background-color: $color-warning;
+      animation: dot-pulse 1.5s ease-in-out infinite;
+    }
   }
 
   &.partial {
-    color: $color-info;
-    background-color: #e6f7ff;
-    border: 1rpx solid #91d5ff;
+    background-color: #E3F2FD;
+    color: #1565C0;
+
+    .indicator-dot {
+      background-color: $color-info;
+    }
   }
 
   &.full {
-    color: $color-text-secondary;
     background-color: $color-bg-tertiary;
-    border: 1rpx solid $color-border;
+    color: $color-text-secondary;
+
+    .indicator-dot {
+      background-color: $color-text-tertiary;
+    }
   }
 }
+
+@keyframes dot-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
 </style>

haha-mp/src/pages/refund/refund.vue

@@ -1,8 +1,8 @@
 <template>
   <view class="container">
     <!-- 退款状态提示 -->
-    <view v-if="refundDisabled" class="refund-status-banner">
-      <text class="banner-icon">{{ refundBannerIcon }}</text>
+    <view v-if="refundDisabled" class="refund-status-banner" :class="bannerType">
+      <view class="banner-dot"></view>
       <text class="banner-title">{{ refundBannerTitle }}</text>
       <text class="banner-desc">{{ refundBannerDesc }}</text>
       <button class="banner-back-btn" @click="goBack">返回订单详情</button>
@@ -254,9 +254,9 @@ const refundDisabled = computed(() => {
   return refunded >= paid;
 });
 
-const refundBannerIcon = computed(() => {
-  if (orderInfo.value.refundStatus === 'PENDING') return '⏳';
-  return '✅';
+const bannerType = computed(() => {
+  if (orderInfo.value.refundStatus === 'PENDING') return 'pending';
+  return 'full';
 });
 
 const refundBannerTitle = computed(() => {
@@ -499,8 +499,10 @@ const submitRefund = async () => {
   box-shadow: $shadow-md;
   text-align: center;
 
-  .banner-icon {
-    font-size: 80rpx;
+  .banner-dot {
+    width: 24rpx;
+    height: 24rpx;
+    border-radius: 50%;
     margin-bottom: 24rpx;
   }
 
@@ -535,6 +537,24 @@ const submitRefund = async () => {
       transform: scale(0.97);
     }
   }
+
+  &.pending {
+    .banner-dot {
+      background-color: $color-warning;
+      animation: banner-dot-pulse 1.5s ease-in-out infinite;
+    }
+  }
+
+  &.full {
+    .banner-dot {
+      background-color: $color-success;
+    }
+  }
+}
+
+@keyframes banner-dot-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
 }
 
 .product-section {