feat(douyu): 二维码弹窗增加复制二维码/复制链接按钮
- 新增 QrActions 组件:复制二维码图片、复制二维码链接(含 execCommand 降级) - 精英宝典绑定/电竞手册/支付三个弹窗统一功能按钮在上、操作按钮在下
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user