feat(order): 添加支付倒计时组件并优化订单相关功能

- 新增 PaymentCountdown 组件用于显示支付倒计时
- 实现 usePaymentCountdown Hook 以支持倒计时逻辑
- 添加 useOrderStats Hook 用于获取订单统计信息
- 在订单列表和详情页面集成支付倒计时功能
- 优化订单状态显示和相关操作逻辑

src/components/PaymentCountdown.scss

@@ -0,0 +1,170 @@
+/* 支付倒计时样式 */
+
+/* 徽章模式样式 */
+.payment-countdown-badge {
+  display: inline-block;
+  background: linear-gradient(135deg, #ff4757, #ff3838);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  box-shadow: 0 2px 4px rgba(255, 71, 87, 0.3);
+  margin-left: 8px;
+  
+  .countdown-text {
+    color: white;
+    font-size: 12px;
+    font-weight: 500;
+  }
+  
+  /* 紧急状态（少于1小时） */
+  &.urgent {
+    background: linear-gradient(135deg, #ff6b6b, #ee5a52);
+    animation: pulse 2s infinite;
+  }
+  
+  /* 非常紧急状态（少于10分钟） */
+  &.critical {
+    background: linear-gradient(135deg, #ff4757, #c44569);
+    animation: flash 1s infinite;
+  }
+  
+  /* 过期状态 */
+  &.expired {
+    background: linear-gradient(135deg, #95a5a6, #7f8c8d);
+    animation: none;
+  }
+}
+
+/* 纯文本模式样式 */
+.payment-countdown-text {
+  color: #ff4757;
+  font-size: 12px;
+  font-weight: 500;
+  
+  /* 紧急状态 */
+  &.urgent {
+    color: #ff6b6b;
+    animation: textPulse 2s infinite;
+  }
+  
+  /* 非常紧急状态 */
+  &.critical {
+    color: #ff4757;
+    animation: textFlash 1s infinite;
+  }
+  
+  /* 过期状态 */
+  &.expired {
+    color: #95a5a6;
+    animation: none;
+  }
+}
+
+/* 动画效果 */
+@keyframes pulse {
+  0% { 
+    opacity: 1; 
+    transform: scale(1);
+  }
+  50% { 
+    opacity: 0.8; 
+    transform: scale(1.02);
+  }
+  100% { 
+    opacity: 1; 
+    transform: scale(1);
+  }
+}
+
+@keyframes flash {
+  0% { 
+    opacity: 1; 
+    transform: scale(1);
+  }
+  25% { 
+    opacity: 0.7; 
+    transform: scale(1.05);
+  }
+  50% { 
+    opacity: 1; 
+    transform: scale(1);
+  }
+  75% { 
+    opacity: 0.7; 
+    transform: scale(1.05);
+  }
+  100% { 
+    opacity: 1; 
+    transform: scale(1);
+  }
+}
+
+@keyframes textPulse {
+  0% { opacity: 1; }
+  50% { opacity: 0.7; }
+  100% { opacity: 1; }
+}
+
+@keyframes textFlash {
+  0% { opacity: 1; }
+  25% { opacity: 0.5; }
+  50% { opacity: 1; }
+  75% { opacity: 0.5; }
+  100% { opacity: 1; }
+}
+
+/* 响应式调整 */
+@media (max-width: 375px) {
+  .payment-countdown-badge {
+    font-size: 11px;
+    padding: 3px 6px;
+    
+    .countdown-text {
+      font-size: 11px;
+    }
+  }
+  
+  .payment-countdown-text {
+    font-size: 11px;
+  }
+}
+
+/* 详情页专用样式 */
+.order-detail-countdown {
+  .payment-countdown-badge {
+    font-size: 14px;
+    padding: 6px 12px;
+    border-radius: 16px;
+    margin: 8px 0;
+    
+    .countdown-text {
+      font-size: 14px;
+      font-weight: 600;
+    }
+  }
+  
+  .payment-countdown-text {
+    font-size: 14px;
+    font-weight: 600;
+  }
+}
+
+/* 列表页专用样式 */
+.order-list-countdown {
+  .payment-countdown-badge {
+    font-size: 11px;
+    padding: 2px 6px;
+    border-radius: 10px;
+    margin-left: 6px;
+    
+    .countdown-text {
+      font-size: 11px;
+    }
+  }
+  
+  .payment-countdown-text {
+    font-size: 11px;
+  }
+}