增加后台支付列表，修改前台有问题也能支付成功，增加支付日志

video-gen-app/src/components/Layout/AppLayout.tsx

@@ -27,7 +27,7 @@ import {
 } from '@ant-design/icons';
 import { Outlet, useNavigate, useLocation } from 'react-router-dom';
 import { useAuthStore } from '../../store/useAuthStore';
-import { getMenuConfigs, getRechargePackages, getPaymentMethods, createRechargeOrder, getPaymentOrders, getNotifications, markNotificationRead, getSiteInfo } from '../../api';
+import { getMenuConfigs, getRechargePackages, getPaymentMethods, createRechargeOrder, getPaymentOrders, cancelPaymentOrder, getNotifications, markNotificationRead, getSiteInfo } from '../../api';
 import NotificationPopup from '../NotificationPopup';
 
 interface MenuConfig {
@@ -93,6 +93,7 @@ const AppLayout: React.FC = () => {
   const [paymentMethod, setPaymentMethod] = useState<string>('alipay');
   const [paying, setPaying] = useState(false);
   const pollingTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const currentOrderNoRef = useRef<string | null>(null);
   const [enabledMethods, setEnabledMethods] = useState<{ alipay: boolean; wechat: boolean }>({ alipay: false, wechat: false });
 
   // 监听预览弹窗状态，关闭浮动按钮
@@ -208,11 +209,16 @@ const AppLayout: React.FC = () => {
         if (order && order.status === 'paid') {
           clearInterval(timer);
           pollingTimerRef.current = null;
+          currentOrderNoRef.current = null;
           message.success('支付成功！积分已到账');
           useAuthStore.getState().refreshUser();
           setQrCodeModalOpen(false);
           setCurrentPaymentInfo(null);
           setSelectedPlan(null);
+        } else if (order && order.status === 'cancelled') {
+          clearInterval(timer);
+          pollingTimerRef.current = null;
+          currentOrderNoRef.current = null;
         }
       } catch {
         // ignore polling errors
@@ -621,6 +627,7 @@ const AppLayout: React.FC = () => {
                     });
                     setRechargeModalOpen(false);
                     setQrCodeModalOpen(true);
+                    currentOrderNoRef.current = order.order_no;
                     // Start polling for payment status
                     startPolling(order.order_no);
                   } else {
@@ -650,7 +657,16 @@ const AppLayout: React.FC = () => {
       {/* QR Code Payment Modal */}
       <Modal
         open={qrCodeModalOpen}
-        onCancel={() => { stopPolling(); setQrCodeModalOpen(false); setCurrentPaymentInfo(null); }}
+        onCancel={async () => {
+          stopPolling();
+          // Mark order as cancelled if it's still pending
+          if (currentOrderNoRef.current) {
+            try { await cancelPaymentOrder(currentOrderNoRef.current); } catch {}
+            currentOrderNoRef.current = null;
+          }
+          setQrCodeModalOpen(false);
+          setCurrentPaymentInfo(null);
+        }}
         footer={null}
         width={400}
         closable={false}
@@ -750,7 +766,16 @@ const AppLayout: React.FC = () => {
             <Button
               size="large"
               block
-              onClick={() => { stopPolling(); setQrCodeModalOpen(false); setCurrentPaymentInfo(null); setSelectedPlan(null); }}
+              onClick={async () => {
+                stopPolling();
+                if (currentOrderNoRef.current) {
+                  try { await cancelPaymentOrder(currentOrderNoRef.current); } catch {}
+                  currentOrderNoRef.current = null;
+                }
+                setQrCodeModalOpen(false);
+                setCurrentPaymentInfo(null);
+                setSelectedPlan(null);
+              }}
               style={{ borderRadius: 10 }}
             >
               取消支付