style: 退款功能前端样式统一为系统设计风格

- 提交按钮改为 primary 渐变风格（amber gradient + shadow）
- 硬编码颜色/圆角/间距替换为设计令牌（$radius-md, $spacing-sm 等）
- 退款通知颜色对齐语义：pending→$color-warning, partial→$color-info,
  full→$color-success
- 已退款标签色值统一：小程序 $color-warning, 管理后台 el-color-warning
- 状态横幅增加 card 风格阴影

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

haha-admin-web/src/views/order/utils/hook.tsx

@@ -564,7 +564,7 @@ export function useOrder(tableRef: Ref) {
                           <div>
                             <span>{r.productName}</span>
                             {(r.refundedQuantity || 0) > 0 && (
-                              <span style="color: #fa9550; font-size: 12px; margin-left: 6px;">(已退{r.refundedQuantity}件)</span>
+                              <span style="color: var(--el-color-warning); font-size: 12px; margin-left: 6px;">(已退{r.refundedQuantity}件)</span>
                             )}
                           </div>
                         </div>

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

@@ -452,28 +452,28 @@ const viewVideo = (url: string) => {
 .refund-status-notice {
   display: flex;
   align-items: center;
-  gap: 12rpx;
-  margin: 0 32rpx 8rpx;
-  padding: 20rpx 24rpx;
-  border-radius: 12rpx;
+  gap: $spacing-sm;
+  margin: 0 $spacing-lg $spacing-xs;
+  padding: 20rpx $spacing-md;
+  border-radius: $radius-md;
   font-size: 26rpx;
 
   &.pending {
     background-color: #fff7e6;
     border: 1rpx solid #ffd591;
-    color: #d48806;
+    color: $color-warning;
   }
 
   &.partial {
     background-color: #e6f7ff;
     border: 1rpx solid #91d5ff;
-    color: #096dd9;
+    color: $color-info;
   }
 
   &.full {
     background-color: #f6ffed;
     border: 1rpx solid #b7eb8f;
-    color: #389e0d;
+    color: $color-success;
   }
 
   .refund-notice-icon {

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

@@ -331,11 +331,12 @@ const viewOrderDetail = (order: OrderInfo) => {
 }
 
 .refund-tag {
-  padding: 8rpx 20rpx;
-  border-radius: 8rpx;
+  padding: 6rpx 20rpx;
+  border-radius: $radius-sm;
   font-size: 24rpx;
   font-weight: 500;
   margin-right: auto;
+  line-height: 1.6;
 
   &.pending {
     color: $color-warning;
@@ -351,7 +352,7 @@ const viewOrderDetail = (order: OrderInfo) => {
 
   &.full {
     color: $color-text-secondary;
-    background-color: $color-bg-secondary;
+    background-color: $color-bg-tertiary;
     border: 1rpx solid $color-border;
   }
 }

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

@@ -495,7 +495,8 @@ const submitRefund = async () => {
   padding: 60rpx 40rpx;
   margin: 30rpx;
   background-color: $color-bg-primary;
-  border-radius: 16rpx;
+  border-radius: $radius-lg;
+  box-shadow: $shadow-md;
   text-align: center;
 
   .banner-icon {
@@ -518,16 +519,21 @@ const submitRefund = async () => {
   }
 
   .banner-back-btn {
-    background-color: $color-bg-secondary;
-    border: 1rpx solid $color-border;
-    border-radius: 10rpx;
+    background-color: $color-bg-primary;
+    border: 2rpx solid $color-border;
+    border-radius: $radius-xl;
     font-size: 28rpx;
-    color: $color-text-primary;
+    color: $color-text-secondary;
     padding: 20rpx 60rpx;
 
     &::after {
       border: none;
     }
+
+    &:active {
+      background-color: $color-bg-secondary;
+      transform: scale(0.97);
+    }
   }
 }
 
@@ -558,16 +564,16 @@ const submitRefund = async () => {
 }
 
 .product-item-refunded {
-  opacity: 0.6;
+  opacity: 0.55;
   background-color: $color-bg-secondary;
 
   .checkbox-icon.refunded {
     background-color: $color-success;
     border-color: $color-success;
-    opacity: 0.5;
+    opacity: 0.6;
 
     text {
-      color: #ffffff;
+      color: $color-bg-primary;
       font-size: 26rpx;
       font-weight: bold;
     }
@@ -700,8 +706,8 @@ const submitRefund = async () => {
 
 .refunded-tag {
   font-size: 22rpx;
-  color: #fa9550;
-  margin-left: 8rpx;
+  color: $color-warning;
+  margin-left: $spacing-xs;
 }
 
 /* 退款数量选择器 */
@@ -920,18 +926,24 @@ radio-group {
 /* 提交按钮 */
 .submit-btn {
   margin: 40rpx 30rpx;
-  background-color: $color-bg-secondary;
-  border: 1rpx solid $color-border;
-  border-radius: 10rpx;
+  background: linear-gradient(135deg, $color-primary-light, $color-primary);
+  border: none;
+  border-radius: $radius-xl;
   font-size: 32rpx;
   color: $color-text-primary;
   padding: 24rpx 0;
   line-height: 1;
-  font-weight: 500;
+  font-weight: 600;
+  box-shadow: $shadow-primary;
 
   &::after {
     border: none;
   }
+
+  &:active {
+    transform: scale(0.97);
+    opacity: 0.9;
+  }
 }
 
 /* 提示信息 */
@@ -968,29 +980,29 @@ radio-group {
 
 .custom-amount-display {
   text-align: center;
-  padding: 24rpx;
+  padding: $spacing-md;
   background-color: #f6ffed;
-  border-radius: 12rpx;
-  border: 1rpx solid #d9f7be;
+  border-radius: $radius-md;
+  border: 1rpx solid #b7eb8f;
 }
 
 .calculated-hint {
   display: block;
   font-size: 24rpx;
   color: $color-text-secondary;
-  margin-bottom: 12rpx;
+  margin-bottom: $spacing-sm;
 }
 
 .calculated-amount {
   font-size: 44rpx;
-  color: $color-error;
+  color: $color-warning;
   font-weight: 700;
 }
 
 .custom-amount-input-wrapper {
   display: flex;
   flex-direction: column;
-  gap: 16rpx;
+  gap: $spacing-sm;
 }
 
 .custom-amount-input {
@@ -998,11 +1010,11 @@ radio-group {
   align-items: center;
   background-color: $color-bg-primary;
   border: 2rpx solid $color-border;
-  border-radius: 12rpx;
-  padding: 20rpx 24rpx;
+  border-radius: $radius-md;
+  padding: 20rpx $spacing-md;
 
   &:focus-within {
-    border-color: $color-info;
+    border-color: $color-primary;
   }
 }
 
@@ -1010,7 +1022,7 @@ radio-group {
   font-size: 36rpx;
   color: $color-text-primary;
   font-weight: 600;
-  margin-right: 12rpx;
+  margin-right: $spacing-sm;
 }
 
 .amount-input {