From 824bb3b808ce4246d2c921d17134dac81b194d9a Mon Sep 17 00:00:00 2001
From: jacobxu666 <jacobxu666@gmail.com>
Date: Fri, 26 Jun 2026 11:00:46 +0800
Subject: [PATCH] refactor(order): migrate hardcoded colors, spacing, and mock
 data to design tokens

---
 src/pages/order/order-detail.vue | 144 ++++++++++++++--------------
 src/pages/order/order-list.vue   | 155 ++++++++++++++-----------------
 2 files changed, 140 insertions(+), 159 deletions(-)

diff --git a/src/pages/order/order-detail.vue b/src/pages/order/order-detail.vue
index f9725ff..396b4d1 100644
--- a/src/pages/order/order-detail.vue
+++ b/src/pages/order/order-detail.vue
@@ -226,26 +226,26 @@ $bar-height: 120rpx;
 
 .page {
   min-height: 100vh;
-  background: #f7f8fa;
-  padding: 24rpx;
-  padding-bottom: calc(#{$bar-height} + env(safe-area-inset-bottom) + 24rpx);
+  background: $color-background;
+  padding: $spacing-3;
+  padding-bottom: calc(#{$bar-height} + env(safe-area-inset-bottom) + #{$spacing-3});
   font-family: $font-family-body;
 }
 
 /* ===== 模块1：状态卡片 ===== */
 .status-card {
-  background: #ffffff;
+  background: $color-card;
   border-radius: $radius-lg;
-  padding: 48rpx 32rpx;
+  padding: $spacing-6 $spacing-4;
   display: flex;
   flex-direction: column;
   align-items: center;
   box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
 
-  &--pending { border-top: 6rpx solid #ff9500; }
-  &--activated { border-top: 6rpx solid #00b42a; }
-  &--refunded { border-top: 6rpx solid #86909c; }
-  &--expired { border-top: 6rpx solid #f53f3f; }
+  &--pending { border-top: 6rpx solid $color-status-pending; }
+  &--activated { border-top: 6rpx solid $color-status-success; }
+  &--refunded { border-top: 6rpx solid $color-status-cancel; }
+  &--expired { border-top: 6rpx solid $uv-error; }
 }
 
 .status-icon-wrap {
@@ -255,7 +255,7 @@ $bar-height: 120rpx;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 20rpx;
+  margin-bottom: $spacing-3;
 }
 
 .status-card--pending .status-icon-wrap { background: rgba(255, 149, 0, 0.1); }
@@ -268,7 +268,7 @@ $bar-height: 120rpx;
   height: 36rpx;
 
   &--pending {
-    border: 4rpx solid #ff9500;
+    border: 4rpx solid $color-status-pending;
     border-radius: 50%;
     position: relative;
     &::after {
@@ -278,13 +278,13 @@ $bar-height: 120rpx;
       left: 50%;
       width: 4rpx;
       height: 16rpx;
-      background: #ff9500;
+      background: $color-status-pending;
       transform: translate(-50%, -70%);
     }
   }
 
   &--activated {
-    border: 4rpx solid #00b42a;
+    border: 4rpx solid $color-status-success;
     border-radius: 50%;
     position: relative;
     &::after {
@@ -294,8 +294,8 @@ $bar-height: 120rpx;
       left: 50%;
       width: 16rpx;
       height: 8rpx;
-      border-left: 4rpx solid #00b42a;
-      border-bottom: 4rpx solid #00b42a;
+      border-left: 4rpx solid $color-status-success;
+      border-bottom: 4rpx solid $color-status-success;
       transform: translate(-50%, -50%) rotate(-45deg);
     }
   }
@@ -309,7 +309,7 @@ $bar-height: 120rpx;
       left: 50%;
       width: 28rpx;
       height: 4rpx;
-      background: #86909c;
+      background: $color-status-cancel;
       border-radius: 2rpx;
     }
     &::before { transform: translate(-50%, -50%) rotate(45deg); }
@@ -317,7 +317,7 @@ $bar-height: 120rpx;
   }
 
   &--expired {
-    border: 4rpx solid #f53f3f;
+    border: 4rpx solid $uv-error;
     border-radius: 50%;
     position: relative;
     &::before, &::after {
@@ -327,7 +327,7 @@ $bar-height: 120rpx;
       left: 50%;
       width: 20rpx;
       height: 4rpx;
-      background: #f53f3f;
+      background: $uv-error;
       border-radius: 2rpx;
     }
     &::before { transform: translate(-50%, -50%) rotate(45deg); }
@@ -337,67 +337,67 @@ $bar-height: 120rpx;
 
 .status-title {
   font-family: $font-family-body;
-  font-size: 38rpx;
-  font-weight: 700;
+  font-size: $font-size-title;
+  font-weight: $font-weight-bold;
   color: $uv-main-color;
-  margin-bottom: 12rpx;
+  margin-bottom: $spacing-2;
 }
 
 .status-desc {
   font-family: $font-family-body;
-  font-size: 26rpx;
+  font-size: $font-size-sm;
   color: $uv-tips-color;
   text-align: center;
 }
 
 /* ===== 模块2：商品信息卡片 ===== */
 .info-card {
-  background: #ffffff;
+  background: $color-card;
   border-radius: $radius-lg;
-  padding: 32rpx;
-  margin-top: 24rpx;
+  padding: $spacing-4;
+  margin-top: $spacing-3;
   box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
 }
 
 .product-name {
   display: block;
   font-family: $font-family-body;
-  font-size: 28rpx;
-  font-weight: 700;
+  font-size: $font-size-base;
+  font-weight: $font-weight-bold;
   color: $uv-main-color;
-  margin-bottom: 12rpx;
+  margin-bottom: $spacing-2;
 }
 
 .price-row {
   display: flex;
   align-items: baseline;
-  margin-bottom: 16rpx;
+  margin-bottom: $spacing-2;
 }
 
 .price-current {
   display: flex;
   align-items: baseline;
-  margin-right: 16rpx;
+  margin-right: $spacing-2;
 }
 
 .price-symbol {
   font-family: $font-family-body;
-  font-size: 24rpx;
-  font-weight: 700;
-  color: #e53935;
+  font-size: $font-size-sm;
+  font-weight: $font-weight-bold;
+  color: $color-price;
 }
 
 .price-value {
   font-family: $font-family-body;
-  font-size: 38rpx;
-  font-weight: 700;
-  color: #e53935;
+  font-size: $font-size-title;
+  font-weight: $font-weight-bold;
+  color: $color-price;
   line-height: 1;
 }
 
 .product-desc {
   font-family: $font-family-body;
-  font-size: 26rpx;
+  font-size: $font-size-sm;
   color: $uv-tips-color;
   line-height: 1.6;
 }
@@ -407,8 +407,8 @@ $bar-height: 120rpx;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 20rpx 0;
-  border-bottom: 1rpx solid $uv-border-color;
+  padding: $spacing-3 0;
+  border-bottom: $border-width solid $uv-border-color;
 
   &--last {
     border-bottom: none;
@@ -417,37 +417,37 @@ $bar-height: 120rpx;
 
 .detail-label {
   font-family: $font-family-body;
-  font-size: 26rpx;
+  font-size: $font-size-sm;
   color: $uv-main-color;
   flex-shrink: 0;
 }
 
 .detail-value {
   font-family: $font-family-body;
-  font-size: 26rpx;
+  font-size: $font-size-sm;
   color: $uv-content-color;
   text-align: right;
 
   &--code {
-    font-weight: 700;
+    font-weight: $font-weight-bold;
     letter-spacing: 4rpx;
   }
 
   &--price {
-    font-weight: 700;
-    color: #e53935;
+    font-weight: $font-weight-bold;
+    color: $color-price;
   }
 }
 
 .detail-value-row {
   display: flex;
   align-items: center;
-  gap: 16rpx;
+  gap: $spacing-2;
 }
 
 .copy-btn {
-  padding: 4rpx 16rpx;
-  border-radius: 8rpx;
+  padding: 4rpx $spacing-2;
+  border-radius: $radius-sm;
   background: rgba(60, 156, 255, 0.08);
 
   &:active {
@@ -457,36 +457,36 @@ $bar-height: 120rpx;
 
 .copy-btn__text {
   font-family: $font-family-body;
-  font-size: 24rpx;
+  font-size: $font-size-sm;
   color: $uv-primary;
-  font-weight: 500;
+  font-weight: $font-weight-medium;
 }
 
 /* ===== 模块4：使用提示 ===== */
 .tips-card {
   background: rgba(60, 156, 255, 0.04);
   border-radius: $radius-lg;
-  padding: 32rpx;
-  margin-top: 24rpx;
+  padding: $spacing-4;
+  margin-top: $spacing-3;
 }
 
 .tips-title {
   display: block;
   font-family: $font-family-body;
-  font-size: 26rpx;
-  font-weight: 700;
+  font-size: $font-size-sm;
+  font-weight: $font-weight-bold;
   color: $uv-main-color;
-  margin-bottom: 16rpx;
+  margin-bottom: $spacing-2;
 }
 
 .tips-list {
-  margin-bottom: 20rpx;
+  margin-bottom: $spacing-3;
 }
 
 .tips-item {
   display: flex;
   align-items: flex-start;
-  margin-bottom: 12rpx;
+  margin-bottom: $spacing-2;
 }
 
 .tips-dot {
@@ -496,12 +496,12 @@ $bar-height: 120rpx;
   background: $uv-primary;
   flex-shrink: 0;
   margin-top: 14rpx;
-  margin-right: 12rpx;
+  margin-right: $spacing-2;
 }
 
 .tips-text {
   font-family: $font-family-body;
-  font-size: 24rpx;
+  font-size: $font-size-sm;
   color: $uv-tips-color;
   line-height: 1.6;
 }
@@ -514,14 +514,14 @@ $bar-height: 120rpx;
 
 .tips-link__text {
   font-family: $font-family-body;
-  font-size: 24rpx;
+  font-size: $font-size-sm;
   color: $uv-primary;
-  font-weight: 500;
+  font-weight: $font-weight-medium;
 }
 
 /* ===== 底部安全区 ===== */
 .safe-bottom {
-  height: 24rpx;
+  height: $spacing-3;
 }
 
 /* ===== 模块5：底部操作栏 ===== */
@@ -533,19 +533,19 @@ $bar-height: 120rpx;
   width: 100%;
   box-sizing: border-box;
   height: $bar-height;
-  background: #ffffff;
+  background: $color-card;
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  padding: 0 48rpx;
+  padding: 0 $spacing-6;
   padding-bottom: env(safe-area-inset-bottom);
   box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.06);
-  z-index: 100;
+  z-index: $z-sticky;
 }
 
 .bottom-bar__right {
   display: flex;
-  gap: 24rpx;
+  gap: $spacing-3;
 }
 
 .btn-action {
@@ -555,7 +555,7 @@ $bar-height: 120rpx;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.15s ease;
+  transition: all $transition-fast;
 
   &--primary {
     background: $uv-primary;
@@ -570,22 +570,22 @@ $bar-height: 120rpx;
 
     &:active {
       transform: scale(0.97);
-      background: #f5f5f5;
+      background: $uv-bg-color;
     }
   }
 }
 
 .btn-action__text {
   font-family: $font-family-body;
-  font-size: 26rpx;
-  font-weight: 700;
-  color: #ffffff;
+  font-size: $font-size-sm;
+  font-weight: $font-weight-bold;
+  color: #fff;
 }
 
 .btn-action__text--outline {
   font-family: $font-family-body;
-  font-size: 26rpx;
-  font-weight: 500;
+  font-size: $font-size-sm;
+  font-weight: $font-weight-medium;
   color: $uv-tips-color;
 }
 </style>
diff --git a/src/pages/order/order-list.vue b/src/pages/order/order-list.vue
index fde32e1..be59721 100644
--- a/src/pages/order/order-list.vue
+++ b/src/pages/order/order-list.vue
@@ -117,22 +117,10 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
+import { mockOrders, type OrderItem } from '@/mock/order'
 
 type OrderStatus = 'pending' | 'activated' | 'refunded' | 'expired'
 
-interface OrderItem {
-  id: string
-  status: OrderStatus
-  createTime: string
-  payAmount: number
-  originalPrice: number
-  cardType: string
-  redeemCode: string
-  payChannel: string
-  activatedTime?: string
-  refundedTime?: string
-}
-
 const tabs = [
   { label: '全部', value: '' },
   { label: '待绑定', value: 'pending' },
@@ -148,14 +136,7 @@ const currentPage = ref(1)
 const refundPopup = ref<any>(null)
 const refundOrderId = ref('')
 
-const orders = ref<OrderItem[]>([
-  { id: 'ORD20260625001', status: 'pending', createTime: '2026-06-25 10:32', payAmount: 198, originalPrice: 3800, cardType: '超级玩家卡', redeemCode: 'CJ0000012398', payChannel: '微信支付' },
-  { id: 'ORD20260624002', status: 'activated', createTime: '2026-06-24 14:18', payAmount: 198, originalPrice: 3800, cardType: '超级玩家卡', redeemCode: 'CJ0000012399', payChannel: '微信支付', activatedTime: '2026-06-24 15:00' },
-  { id: 'ORD20260623003', status: 'pending', createTime: '2026-06-23 09:45', payAmount: 198, originalPrice: 3800, cardType: '超级玩家卡', redeemCode: 'CJ0000012400', payChannel: '微信支付' },
-  { id: 'ORD20260620004', status: 'refunded', createTime: '2026-06-20 16:22', payAmount: 198, originalPrice: 3800, cardType: '超级玩家卡', redeemCode: 'CJ0000012401', payChannel: '微信支付', refundedTime: '2026-06-21 10:15' },
-  { id: 'ORD20260618005', status: 'activated', createTime: '2026-06-18 11:08', payAmount: 198, originalPrice: 3800, cardType: '超级玩家卡', redeemCode: 'CJ0000012402', payChannel: '微信支付', activatedTime: '2026-06-18 12:30' },
-  { id: 'ORD20260510007', status: 'activated', createTime: '2026-05-10 13:40', payAmount: 198, originalPrice: 3800, cardType: '超级玩家卡', redeemCode: 'CJ0000012403', payChannel: '微信支付', activatedTime: '2026-05-10 14:20' },
-])
+const orders = ref<OrderItem[]>(mockOrders)
 
 const filteredOrders = computed(() => {
   if (!activeTab.value) return orders.value
@@ -232,14 +213,14 @@ function goBuy() {
 
 .page {
   min-height: 100vh;
-  background: #f7f8fa;
+  background: $color-background;
   font-family: $font-family-body;
 }
 
 /* ===== Tab Bar ===== */
 .tab-bar {
   white-space: nowrap;
-  background: #ffffff;
+  background: $color-card;
   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
 }
 
@@ -252,20 +233,20 @@ function goBuy() {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 24rpx 0;
+  padding: $spacing-3 0;
   position: relative;
 }
 
 .tab-text {
   font-family: $font-family-body;
-  font-size: 26rpx;
-  font-weight: 500;
+  font-size: $font-size-sm;
+  font-weight: $font-weight-medium;
   color: $uv-tips-color;
 }
 
 .tab-item--active .tab-text {
   color: $uv-primary;
-  font-weight: 700;
+  font-weight: $font-weight-bold;
 }
 
 .tab-underline {
@@ -273,7 +254,7 @@ function goBuy() {
   height: 4rpx;
   border-radius: 2rpx;
   background: $uv-primary;
-  margin-top: 8rpx;
+  margin-top: $spacing-1;
 }
 
 /* ===== Order List ===== */
@@ -282,16 +263,16 @@ function goBuy() {
 }
 
 .order-cards {
-  padding: 24rpx;
+  padding: $spacing-3;
 }
 
 /* ===== Order Card ===== */
 .order-card {
-  background: #ffffff;
+  background: $color-card;
   border-radius: $radius-lg;
   box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
-  padding: 32rpx;
-  margin-bottom: 24rpx;
+  padding: $spacing-4;
+  margin-bottom: $spacing-3;
 
   &:active {
     transform: scale(0.99);
@@ -302,19 +283,19 @@ function goBuy() {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20rpx;
+  margin-bottom: $spacing-3;
 }
 
 .order-no {
   font-family: $font-family-body;
-  font-size: 22rpx;
+  font-size: $font-size-xs;
   color: $uv-placeholder-color;
 }
 
 /* Status Tags */
 .status-tag {
-  padding: 4rpx 16rpx;
-  border-radius: 8rpx;
+  padding: 4rpx $spacing-2;
+  border-radius: $radius-sm;
 
   &--pending {
     background: rgba(255, 149, 0, 0.1);
@@ -335,18 +316,18 @@ function goBuy() {
 
 .status-tag__text {
   font-family: $font-family-body;
-  font-size: 22rpx;
-  font-weight: 500;
+  font-size: $font-size-xs;
+  font-weight: $font-weight-medium;
 }
 
-.status-tag--pending .status-tag__text { color: #ff9500; }
-.status-tag--activated .status-tag__text { color: #00b42a; }
-.status-tag--refunded .status-tag__text { color: #86909c; }
-.status-tag--expired .status-tag__text { color: #f53f3f; }
+.status-tag--pending .status-tag__text { color: $color-status-pending; }
+.status-tag--activated .status-tag__text { color: $color-status-success; }
+.status-tag--refunded .status-tag__text { color: $color-status-cancel; }
+.status-tag--expired .status-tag__text { color: $uv-error; }
 
 /* Product Info */
 .card-product {
-  margin-bottom: 20rpx;
+  margin-bottom: $spacing-3;
 }
 
 .product-name-row {
@@ -357,8 +338,8 @@ function goBuy() {
 
 .product-name {
   font-family: $font-family-body;
-  font-size: 28rpx;
-  font-weight: 500;
+  font-size: $font-size-base;
+  font-weight: $font-weight-medium;
   color: $uv-main-color;
 }
 
@@ -369,16 +350,16 @@ function goBuy() {
 
 .price-symbol {
   font-family: $font-family-body;
-  font-size: 24rpx;
-  font-weight: 700;
-  color: #e53935;
+  font-size: $font-size-sm;
+  font-weight: $font-weight-bold;
+  color: $color-price;
 }
 
 .price-value {
   font-family: $font-family-body;
-  font-size: 38rpx;
-  font-weight: 700;
-  color: #e53935;
+  font-size: $font-size-title;
+  font-weight: $font-weight-bold;
+  color: $color-price;
   line-height: 1;
 }
 
@@ -386,20 +367,20 @@ function goBuy() {
 .card-info {
   display: flex;
   justify-content: space-between;
-  padding-bottom: 20rpx;
-  border-bottom: 1rpx solid $uv-border-color;
-  margin-bottom: 20rpx;
+  padding-bottom: $spacing-3;
+  border-bottom: $border-width solid $uv-border-color;
+  margin-bottom: $spacing-3;
 }
 
 .info-time {
   font-family: $font-family-body;
-  font-size: 24rpx;
+  font-size: $font-size-sm;
   color: $uv-tips-color;
 }
 
 .info-pay {
   font-family: $font-family-body;
-  font-size: 24rpx;
+  font-size: $font-size-sm;
   color: $uv-tips-color;
 }
 
@@ -407,7 +388,7 @@ function goBuy() {
 .card-actions {
   display: flex;
   justify-content: flex-end;
-  gap: 20rpx;
+  gap: $spacing-3;
 }
 
 .btn-outline {
@@ -418,18 +399,18 @@ function goBuy() {
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.15s ease;
+  transition: all $transition-fast;
 
   &:active {
     transform: scale(0.97);
-    background: #f5f5f5;
+    background: $uv-bg-color;
   }
 }
 
 .btn-outline__text {
   font-family: $font-family-body;
-  font-size: 24rpx;
-  font-weight: 500;
+  font-size: $font-size-sm;
+  font-weight: $font-weight-medium;
   color: $uv-tips-color;
 }
 
@@ -441,7 +422,7 @@ function goBuy() {
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.15s ease;
+  transition: all $transition-fast;
 
   &:active {
     transform: scale(0.97);
@@ -450,9 +431,9 @@ function goBuy() {
 
 .btn-primary__text {
   font-family: $font-family-body;
-  font-size: 24rpx;
-  font-weight: 700;
-  color: #ffffff;
+  font-size: $font-size-sm;
+  font-weight: $font-weight-bold;
+  color: #fff;
 }
 
 /* ===== Empty State ===== */
@@ -461,21 +442,21 @@ function goBuy() {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 160rpx 48rpx 0;
+  padding: 160rpx $spacing-6 0;
 }
 
 .empty-icon {
   width: 120rpx;
   height: 120rpx;
   position: relative;
-  margin-bottom: 32rpx;
+  margin-bottom: $spacing-4;
 }
 
 .empty-bag {
   width: 80rpx;
   height: 64rpx;
-  border: 4rpx solid #cccccc;
-  border-radius: 8rpx;
+  border: 4rpx solid $uv-disabled-color;
+  border-radius: $radius-sm;
   position: absolute;
   bottom: 0;
   left: 50%;
@@ -485,22 +466,22 @@ function goBuy() {
 .empty-bag__handle {
   width: 40rpx;
   height: 24rpx;
-  border: 4rpx solid #cccccc;
+  border: 4rpx solid $uv-disabled-color;
   border-bottom: none;
   border-radius: 20rpx 20rpx 0 0;
   position: absolute;
-  top: 16rpx;
+  top: $spacing-2;
   left: 50%;
   transform: translateX(-50%);
 }
 
 .empty-text {
   font-family: $font-family-body;
-  font-size: 26rpx;
+  font-size: $font-size-sm;
   color: $uv-placeholder-color;
   text-align: center;
   line-height: 1.6;
-  margin-bottom: 32rpx;
+  margin-bottom: $spacing-4;
 }
 
 .empty-btn {
@@ -519,57 +500,57 @@ function goBuy() {
 
 .empty-btn__text {
   font-family: $font-family-body;
-  font-size: 26rpx;
-  font-weight: 700;
-  color: #ffffff;
+  font-size: $font-size-sm;
+  font-weight: $font-weight-bold;
+  color: #fff;
 }
 
 /* ===== Load More ===== */
 .load-more {
   text-align: center;
-  padding: 16rpx 0 120rpx;
+  padding: $spacing-2 0 120rpx;
 }
 
 .load-more__text {
   font-family: $font-family-body;
-  font-size: 24rpx;
+  font-size: $font-size-sm;
   color: $uv-placeholder-color;
 }
 
 /* ===== Refund Modal ===== */
 .refund-modal {
   width: 600rpx;
-  background: #ffffff;
+  background: $color-card;
   border-radius: $radius-lg;
-  padding: 40rpx;
+  padding: $spacing-5;
 }
 
 .refund-title {
   display: block;
   font-family: $font-family-body;
-  font-size: 28rpx;
-  font-weight: 700;
+  font-size: $font-size-base;
+  font-weight: $font-weight-bold;
   color: $uv-main-color;
   text-align: center;
-  margin-bottom: 24rpx;
+  margin-bottom: $spacing-3;
 }
 
 .refund-body {
-  margin-bottom: 32rpx;
+  margin-bottom: $spacing-4;
 }
 
 .refund-text {
   display: block;
   font-family: $font-family-body;
-  font-size: 26rpx;
+  font-size: $font-size-sm;
   color: $uv-content-color;
   line-height: 1.7;
-  margin-bottom: 12rpx;
+  margin-bottom: $spacing-2;
 }
 
 .refund-actions {
   display: flex;
-  gap: 24rpx;
+  gap: $spacing-3;
 
   .btn-outline,
   .btn-primary {