自动关闭虎牙支付成功弹窗

web/frontend/src/pages/HuyaTasksPage.tsx

@@ -132,6 +132,20 @@ function hasPaymentQrcode(task: HuyaTaskItem): boolean {
   return task.task_type === 'create_recharge_order' && Boolean(resultText(task.result, 'pay_url'));
 }
 
+function paymentStatus(task: HuyaTaskItem | null | undefined): string {
+  const status = task?.result?.payment_status;
+  return typeof status === 'string' ? status : '';
+}
+
+function paymentStatusLabel(task: HuyaTaskItem | null | undefined): string {
+  const label = task?.result?.payment_status_label;
+  return typeof label === 'string' ? label : '';
+}
+
+function isPaymentFinished(task: HuyaTaskItem | null | undefined): boolean {
+  return task?.task_type === 'create_recharge_order' && paymentStatus(task) === 'paid';
+}
+
 export default function HuyaTasksPage() {
   const { token } = theme.useToken();
   const [form] = Form.useForm<HuyaConfig>();
@@ -163,6 +177,7 @@ export default function HuyaTasksPage() {
   const autoOpenQrReady = useRef(false);
   const autoOpenedPayTaskIds = useRef<Set<number>>(new Set());
   const autoOpenPayReady = useRef(false);
+  const notifiedPaidTaskIds = useRef<Set<number>>(new Set());
   const { logs, connected: wsConnected, connect: connectLogs } = useWebSocketLogs();
   const { can } = usePermissions();
 
@@ -265,11 +280,26 @@ export default function HuyaTasksPage() {
   useEffect(() => {
     if (!autoOpenPayReady.current || payTask) return;
     const nextPayTask = tasks
-      .filter((task) => hasPaymentQrcode(task) && !autoOpenedPayTaskIds.current.has(task.id))
+      .filter((task) => hasPaymentQrcode(task) && !isPaymentFinished(task) && !autoOpenedPayTaskIds.current.has(task.id))
       .sort((a, b) => b.id - a.id)[0];
     if (nextPayTask) openPayTask(nextPayTask);
   }, [openPayTask, payTask, tasks]);
 
+  useEffect(() => {
+    if (!payTask) return;
+    const latest = tasks.find((task) => task.id === payTask.id);
+    if (!latest) return;
+    if (isPaymentFinished(latest)) {
+      if (!notifiedPaidTaskIds.current.has(latest.id)) {
+        notifiedPaidTaskIds.current.add(latest.id);
+        message.success('虎牙支付成功');
+      }
+      setPayTask(null);
+      return;
+    }
+    if (latest !== payTask) setPayTask(latest);
+  }, [payTask, tasks]);
+
   const accountOptions = useMemo(() => {
     return accounts.map((account) => ({ value: account.id, label: accountLabel(account) }));
   }, [accounts]);
@@ -456,6 +486,8 @@ export default function HuyaTasksPage() {
   const payProductName = resultText(payResult, 'product_name');
   const payAmountText = resultText(payResult, 'amount_text');
   const payChannelLabel = resultText(payResult, 'pay_channel_label');
+  const payStatus = paymentStatus(payTask);
+  const payStatusText = paymentStatusLabel(payTask);
   const payOrderId = payResult?.order_id;
   const payAccountName = payTask
     ? payTask.account_nickname || payTask.account_uid || `#${payTask.account_id}`
@@ -555,10 +587,15 @@ export default function HuyaTasksPage() {
     }
     if (record.task_type === 'create_recharge_order') {
       if (resultText(value, 'pay_url')) {
+        if (isPaymentFinished(record)) return <Tag color="green">已支付</Tag>;
+        const status = paymentStatus(record);
         return (
-          <Button size="small" icon={<QrcodeOutlined />} onClick={() => openPayTask(record)}>
-            查看支付码
-          </Button>
+          <Space size={6}>
+            {status === 'timeout' ? <Tag color="orange">待支付</Tag> : <Tag color="processing">等待支付</Tag>}
+            <Button size="small" icon={<QrcodeOutlined />} onClick={() => openPayTask(record)}>
+              支付码
+            </Button>
+          </Space>
         );
       }
       return <Text type="secondary">-</Text>;
@@ -1166,6 +1203,11 @@ export default function HuyaTasksPage() {
               <Text type="secondary">
                 {payChannelLabel || '支付'}{payAmountText ? ` / ${payAmountText}` : ''}{payAccountName ? ` / ${payAccountName}` : ''}
               </Text>
+              {payStatusText ? (
+                <Tag color={payStatus === 'timeout' ? 'orange' : 'processing'} style={{ alignSelf: 'center', marginInlineEnd: 0 }}>
+                  {payStatusText}
+                </Tag>
+              ) : null}
               {typeof payOrderId === 'number' || typeof payOrderId === 'string' ? (
                 <Text type="secondary" style={{ fontSize: 12 }}>订单号 {String(payOrderId)}</Text>
               ) : null}