feat(douyu): 二维码弹窗增加复制二维码/复制链接按钮

- 新增 QrActions 组件:复制二维码图片、复制二维码链接(含 execCommand 降级)
- 精英宝典绑定/电竞手册/支付三个弹窗统一功能按钮在上、操作按钮在下
This commit is contained in:
yml2213
2026-08-01 17:41:46 +08:00
parent c95d6963b8
commit fcf1dec549
2 changed files with 102 additions and 3 deletions
+16 -3
View File
@@ -16,6 +16,7 @@ import {
type DouyuTaskItem,
} from '../api/modules';
import ExchangeResultImage from '../components/ExchangeResultImage';
import QrActions from '../components/QrActions';
import { usePermissions } from '../hooks/usePermissions';
import { useWebSocketLogs } from '../hooks/useWebSocketLogs';
import {
@@ -279,6 +280,9 @@ export default function DouyuTasksPage({ handbook }: { handbook: HandbookKind })
const [activeQrTaskId, setActiveQrTaskId] = useState<number | null>(null);
const [esportsBindTask, setEsportsBindTask] = useState<DouyuTaskItem | null>(null);
const [payTask, setPayTask] = useState<DouyuTaskItem | null>(null);
const qrCanvasWrapRef = useRef<HTMLDivElement | null>(null);
const esportsQrCanvasWrapRef = useRef<HTMLDivElement | null>(null);
const payQrCanvasWrapRef = useRef<HTMLDivElement | null>(null);
const autoOpenedQrTaskIds = useRef<Set<number>>(new Set());
const autoOpenedEsportsBindTaskIds = useRef<Set<number>>(new Set());
const autoOpenedPayTaskIds = useRef<Set<number>>(new Set());
@@ -1608,13 +1612,16 @@ export default function DouyuTasksPage({ handbook }: { handbook: HandbookKind })
{esportsQrUrl ? (
<div style={{ textAlign: 'center' }}>
<QRCode value={esportsQrUrl} size={220} bordered={false} />
<div ref={esportsQrCanvasWrapRef}>
<QRCode value={esportsQrUrl} size={220} bordered={false} />
</div>
<Text type="secondary" style={{ display: 'block', marginTop: 8 }}>
</Text>
</div>
) : null}
<QrActions wrapRef={esportsQrCanvasWrapRef} url={esportsQrUrl} disabled={!esportsQrUrl} />
<Space wrap>
<Button
icon={<SearchOutlined />}
@@ -1693,7 +1700,9 @@ export default function DouyuTasksPage({ handbook }: { handbook: HandbookKind })
{qrStatusText}
</Tag>
{qrUrl ? (
<QRCode value={qrUrl} size={220} bordered={false} />
<div ref={qrCanvasWrapRef}>
<QRCode value={qrUrl} size={220} bordered={false} />
</div>
) : qrBindReady ? (
<Text type="secondary"></Text>
) : qrTask?.status === 'running' ? (
@@ -1701,6 +1710,7 @@ export default function DouyuTasksPage({ handbook }: { handbook: HandbookKind })
) : (
<Text type="secondary"></Text>
)}
<QrActions wrapRef={qrCanvasWrapRef} url={qrUrl} disabled={!qrUrl} />
{qrBindReady ? (
<>
<Tag color="gold" style={{ fontSize: 16, padding: '6px 16px' }}>
@@ -1774,10 +1784,13 @@ export default function DouyuTasksPage({ handbook }: { handbook: HandbookKind })
)}
<Space direction="vertical" align="center" size={12}>
{payUrl ? (
<QRCode value={payUrl} size={220} bordered={false} />
<div ref={payQrCanvasWrapRef}>
<QRCode value={payUrl} size={220} bordered={false} />
</div>
) : (
<Text type="secondary">...</Text>
)}
<QrActions wrapRef={payQrCanvasWrapRef} url={payUrl} disabled={!payUrl} />
<Text>{payTask.message || '请扫码支付'}</Text>
</Space>
</div>