yml2213
b17ce8d420
goodsLabel 从 raw.count 取剩余库存并拼接到标签末尾， 格式变为「套装-浪漫天命 / 360积分 / 库存8144」。 精英宝典和电竞手册两处下拉框共用该函数，一次改动两处生效。
1736 lines
68 KiB
TypeScript
1736 lines
68 KiB
TypeScript
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
import {
|
|
Button, Card, Input, InputNumber, Modal, QRCode, Select, Space, Table, Tag, Typography,
|
|
} from 'antd';
|
|
import type { TableProps } from 'antd';
|
|
import {
|
|
CheckCircleOutlined, CreditCardOutlined, FieldTimeOutlined, GiftOutlined,
|
|
ImportOutlined, QrcodeOutlined, ReloadOutlined,
|
|
SearchOutlined, SettingOutlined, ShoppingOutlined, StopOutlined,
|
|
} from '@ant-design/icons';
|
|
import {
|
|
douyuApi,
|
|
type DouyuConfig,
|
|
type DouyuGoodsItem,
|
|
type DouyuTaskAccountItem,
|
|
type DouyuTaskItem,
|
|
} from '../api/modules';
|
|
import { usePermissions } from '../hooks/usePermissions';
|
|
import { useWebSocketLogs } from '../hooks/useWebSocketLogs';
|
|
import { formatTime } from '../utils/time';
|
|
import { getErrorMessage } from '../utils/error';
|
|
import { message } from '../utils/antdMessage';
|
|
|
|
const { Text } = Typography;
|
|
|
|
type HandbookKind = 'elite' | 'esports';
|
|
|
|
const ELITE_QUICK_ACTIONS = [
|
|
{ key: 'get_bind_qr', icon: <QrcodeOutlined /> },
|
|
{ key: 'confirm_bind', icon: <CheckCircleOutlined /> },
|
|
{ key: 'create_elite_qr', icon: <CreditCardOutlined /> },
|
|
{ key: 'query_points', icon: <SearchOutlined /> },
|
|
{ key: 'query_game_name', icon: <SearchOutlined /> },
|
|
{ key: 'query_change_bind_time', icon: <FieldTimeOutlined /> },
|
|
{ key: 'query_limited_goods', icon: <SearchOutlined /> },
|
|
{ key: 'query_gold_balance', icon: <SearchOutlined /> },
|
|
{ key: 'exchange_goods', icon: <ShoppingOutlined /> },
|
|
{ key: 'create_gold_qr', icon: <CreditCardOutlined /> },
|
|
{ key: 'donate_elite_gift', icon: <GiftOutlined /> },
|
|
];
|
|
|
|
const ESPORTS_QUICK_ACTIONS = [
|
|
{ key: 'prepare_esports_bind', icon: <QrcodeOutlined /> },
|
|
{ key: 'query_esports_game_name', icon: <SearchOutlined /> },
|
|
{ key: 'create_esports_qr', icon: <CreditCardOutlined /> },
|
|
{ key: 'query_esports_points', icon: <SearchOutlined /> },
|
|
{ key: 'query_gold_balance', icon: <SearchOutlined /> },
|
|
{ key: 'refresh_esports_goods', icon: <ReloadOutlined /> },
|
|
{ key: 'exchange_esports_goods', icon: <ShoppingOutlined /> },
|
|
{ key: 'create_gold_qr', icon: <CreditCardOutlined /> },
|
|
{ key: 'donate_esports_chicken_gift', icon: <GiftOutlined /> },
|
|
{ key: 'donate_esports_firework_gift', icon: <GiftOutlined /> },
|
|
];
|
|
|
|
const ELITE_TASK_TYPES = new Set([
|
|
'get_bind_qr',
|
|
'confirm_bind',
|
|
'create_elite_qr',
|
|
'create_gold_qr',
|
|
'donate_elite_gift',
|
|
'query_points',
|
|
'exchange_goods',
|
|
'query_game_name',
|
|
'query_change_bind_time',
|
|
'query_limited_goods',
|
|
'query_gold_balance',
|
|
'refresh_goods',
|
|
'query_exchange_records',
|
|
'prefetch_csrf_token',
|
|
]);
|
|
const ESPORTS_TASK_TYPES = new Set([
|
|
'prepare_esports_bind',
|
|
'get_esports_bind_qr',
|
|
'query_esports_game_name',
|
|
'confirm_esports_bind',
|
|
'create_esports_qr',
|
|
'query_esports_points',
|
|
'query_gold_balance',
|
|
'refresh_esports_goods',
|
|
'exchange_esports_goods',
|
|
'create_gold_qr',
|
|
'donate_esports_chicken_gift',
|
|
'donate_esports_firework_gift',
|
|
]);
|
|
const DOUYU_GOLD_AMOUNT_STORAGE_KEY = 'douyu_task_gold_amount';
|
|
const DOUYU_GIFT_COUNT_STORAGE_KEY = 'douyu_task_gift_count';
|
|
|
|
const STATUS_COLORS: Record<string, string> = {
|
|
planned: 'default', pending: 'default', running: 'processing',
|
|
success: 'success', failed: 'error', error: 'error', stopped: 'warning',
|
|
};
|
|
|
|
const STATUS_LABELS: Record<string, string> = {
|
|
planned: '已计划', pending: '等待中', running: '执行中',
|
|
success: '成功', failed: '失败', error: '异常', stopped: '已停止',
|
|
};
|
|
|
|
function resultText(result: Record<string, unknown> | null | undefined, key: string): string {
|
|
const value = result?.[key];
|
|
return typeof value === 'string' ? value : '';
|
|
}
|
|
|
|
function resultFlag(result: Record<string, unknown> | null | undefined, key: string): boolean {
|
|
const value = result?.[key];
|
|
if (value === true) return true;
|
|
if (value === false || value == null) return false;
|
|
const text = String(value).trim().toLowerCase();
|
|
return text === '1' || text === 'true' || text === 'yes';
|
|
}
|
|
|
|
function taskPayUrl(task: DouyuTaskItem | null | undefined): string {
|
|
return resultText(task?.result, 'pay_url') || resultText(task?.result, 'url');
|
|
}
|
|
|
|
function bindReadyForConfirm(task: DouyuTaskItem | null | undefined): boolean {
|
|
if (!task || task.task_type !== 'get_bind_qr') return false;
|
|
if (task.result?.bind_ready_for_confirm === true) return true;
|
|
const roleName = resultText(task.result, 'role_name');
|
|
if (!roleName) return false;
|
|
// 已确认绑定的角色不能再次直接确认
|
|
if (resultFlag(task.result, 'bind_confirmed') || resultFlag(task.result, 'is_bound_act')) {
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function hasBindQrcode(task: DouyuTaskItem | null | undefined): boolean {
|
|
if (!task || task.task_type !== 'get_bind_qr') return false;
|
|
// 有二维码，或已有待确认角色（无需再扫码）都应可展示绑定面板
|
|
return Boolean(resultText(task.result, 'url'))
|
|
|| bindReadyForConfirm(task)
|
|
|| resultFlag(task.result, 'esports_bound');
|
|
}
|
|
|
|
function hasPaymentQrcode(task: DouyuTaskItem | null | undefined): boolean {
|
|
return Boolean(
|
|
task
|
|
&& ['create_elite_qr', 'create_esports_qr', 'create_gold_qr'].includes(task.task_type)
|
|
&& resultText(task.result, 'pay_url'),
|
|
);
|
|
}
|
|
|
|
function paymentArrived(task: DouyuTaskItem | null | undefined): boolean {
|
|
if (!task || !['create_elite_qr', 'create_esports_qr', 'create_gold_qr'].includes(task.task_type)) return false;
|
|
if (task.status !== 'success') return false;
|
|
return task.result?.gold_recharged === true
|
|
|| task.result?.elite_opened === true
|
|
|| task.result?.esports_opened === true;
|
|
}
|
|
|
|
function bindPhaseText(phase: string, polling: boolean): string {
|
|
if (phase === 'role_ready') return '已识别角色，待确认';
|
|
if (phase === 'change_waiting') return '换绑冷却中';
|
|
if (phase === 'role_timeout') return '未检测到角色';
|
|
if (phase === 'stopped') return '任务已停止';
|
|
if (phase === 'confirmed') return '已绑定';
|
|
if (phase === 'confirm_failed') return '确认未生效';
|
|
if (polling || phase === 'waiting_scan') return '等待扫码绑定';
|
|
return phase || '等待绑定';
|
|
}
|
|
|
|
function goodsLabel(item: DouyuGoodsItem): string {
|
|
const stock = item.raw?.count;
|
|
const stockText =
|
|
stock != null && Number.isFinite(Number(stock)) ? ` / 库存${stock}` : '';
|
|
return `${item.name || item.commodity_id}${item.score ? ` / ${item.score}积分` : ''}${stockText}`;
|
|
}
|
|
|
|
function formatWaitSeconds(seconds: number | null | undefined): string {
|
|
if (seconds == null || Number.isNaN(Number(seconds))) return '';
|
|
const total = Math.max(0, Math.floor(Number(seconds)));
|
|
if (total <= 0) return '可换绑';
|
|
const days = Math.floor(total / 86400);
|
|
const hours = Math.floor((total % 86400) / 3600);
|
|
const minutes = Math.floor((total % 3600) / 60);
|
|
const secs = total % 60;
|
|
if (days > 0) return `${days}天${hours}小时${minutes}分`;
|
|
if (hours > 0) return `${hours}小时${minutes}分${secs}秒`;
|
|
return `${minutes}分${secs}秒`;
|
|
}
|
|
|
|
function esportsRebindStatus(canChangeTime: number | null | undefined): {
|
|
available: boolean;
|
|
text: string;
|
|
} | null {
|
|
if (canChangeTime == null || Number.isNaN(Number(canChangeTime))) return null;
|
|
const timestamp = Math.floor(Number(canChangeTime));
|
|
if (timestamp <= 0 || timestamp <= Math.floor(Date.now() / 1000)) {
|
|
return { available: true, text: '可换绑' };
|
|
}
|
|
return {
|
|
available: false,
|
|
text: new Date(timestamp * 1000).toLocaleString('zh-CN', { hour12: false }),
|
|
};
|
|
}
|
|
|
|
function resultNumber(result: Record<string, unknown> | null | undefined, key: string): number | null {
|
|
const value = result?.[key];
|
|
if (typeof value === 'number' && Number.isFinite(value)) return value;
|
|
if (typeof value === 'string' && value.trim()) {
|
|
const n = Number(value);
|
|
return Number.isFinite(n) ? n : null;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function limitedGoodsName(item: unknown): string {
|
|
if (!item || typeof item !== 'object') return '';
|
|
const record = item as Record<string, unknown>;
|
|
const value = record.commodityName ?? record.name;
|
|
return typeof value === 'string' ? value : '';
|
|
}
|
|
|
|
function limitedGoodsTaskText(task: DouyuTaskItem | null | undefined): string {
|
|
if (!task) return '';
|
|
if (task.message?.trim()) return task.message.trim();
|
|
const count = resultNumber(task.result, 'limited_count');
|
|
if (count == null) return '';
|
|
if (count <= 0) return '无限制商品';
|
|
const goods = task.result?.limited_goods;
|
|
const names = Array.isArray(goods)
|
|
? goods.map(limitedGoodsName).filter(Boolean).slice(0, 5)
|
|
: [];
|
|
return names.length ? `限兑 ${count} 个: ${names.join(', ')}` : `限兑 ${count} 个`;
|
|
}
|
|
|
|
function savedPositiveInteger(key: string, fallback = 1): number {
|
|
const value = Number(localStorage.getItem(key));
|
|
return Number.isInteger(value) && value >= 1 ? value : fallback;
|
|
}
|
|
|
|
export default function DouyuTasksPage({ handbook }: { handbook: HandbookKind }) {
|
|
const isEsportsHandbook = handbook === 'esports';
|
|
const handbookTitle = isEsportsHandbook ? '电竞手册工作台' : '精英宝典工作台';
|
|
const handbookDescription = isEsportsHandbook
|
|
? '电竞手册角色绑定与开通任务'
|
|
: '精英宝典绑定、开通、积分与兑换任务';
|
|
const activeTaskTypes = isEsportsHandbook ? ESPORTS_TASK_TYPES : ELITE_TASK_TYPES;
|
|
const quickActions = isEsportsHandbook ? ESPORTS_QUICK_ACTIONS : ELITE_QUICK_ACTIONS;
|
|
const { can } = usePermissions();
|
|
const [accounts, setAccounts] = useState<DouyuTaskAccountItem[]>([]);
|
|
const [selectedIds, setSelectedIds] = useState<number[]>([]);
|
|
const [goods, setGoods] = useState<DouyuGoodsItem[]>([]);
|
|
const [tasks, setTasks] = useState<DouyuTaskItem[]>([]);
|
|
const [taskTypes, setTaskTypes] = useState<Record<string, string>>({});
|
|
const [config, setConfig] = useState<DouyuConfig | null>(null);
|
|
const [loading, setLoading] = useState(false);
|
|
const [runningBatchId, setRunningBatchId] = useState('');
|
|
const [configOpen, setConfigOpen] = useState(false);
|
|
const [concurrency, setConcurrency] = useState(3);
|
|
const [goldAmount, setGoldAmount] = useState(() => savedPositiveInteger(DOUYU_GOLD_AMOUNT_STORAGE_KEY));
|
|
const [giftCount, setGiftCount] = useState(() => savedPositiveInteger(DOUYU_GIFT_COUNT_STORAGE_KEY));
|
|
const [selectedGoodsId, setSelectedGoodsId] = useState('');
|
|
const [accountSearch, setAccountSearch] = useState('');
|
|
|
|
const [importOpen, setImportOpen] = useState(false);
|
|
const [importPool, setImportPool] = useState<DouyuTaskAccountItem[]>([]);
|
|
const [importSearch, setImportSearch] = useState('');
|
|
const [importSelectedIds, setImportSelectedIds] = useState<number[]>([]);
|
|
const [importLoading, setImportLoading] = useState(false);
|
|
|
|
// 绑定/支付弹窗以 task 为唯一数据源
|
|
const [qrTask, setQrTask] = useState<DouyuTaskItem | null>(null);
|
|
const [esportsBindTask, setEsportsBindTask] = useState<DouyuTaskItem | null>(null);
|
|
const [payTask, setPayTask] = useState<DouyuTaskItem | null>(null);
|
|
const autoOpenedQrTaskIds = useRef<Set<number>>(new Set());
|
|
const autoOpenedEsportsBindTaskIds = useRef<Set<number>>(new Set());
|
|
const autoOpenedPayTaskIds = useRef<Set<number>>(new Set());
|
|
const autoOpenQrReady = useRef(false);
|
|
const autoOpenEsportsBindReady = useRef(false);
|
|
const autoOpenPayReady = useRef(false);
|
|
|
|
const logs = useWebSocketLogs();
|
|
const canConfig = can('douyu:config');
|
|
const latestQueryGameTaskByAccount = useMemo(() => {
|
|
const map = new Map<number, DouyuTaskItem>();
|
|
for (const task of tasks) {
|
|
if (task.task_type !== 'query_game_name') continue;
|
|
const previous = map.get(task.account_id);
|
|
if (!previous || task.id > previous.id) map.set(task.account_id, task);
|
|
}
|
|
return map;
|
|
}, [tasks]);
|
|
|
|
const latestEsportsStateTaskByAccount = useMemo(() => {
|
|
const map = new Map<number, DouyuTaskItem>();
|
|
for (const task of tasks) {
|
|
if (!['prepare_esports_bind', 'get_esports_bind_qr', 'query_esports_game_name', 'confirm_esports_bind']
|
|
.includes(task.task_type) || !task.result) continue;
|
|
const previous = map.get(task.account_id);
|
|
if (!previous || task.id > previous.id) map.set(task.account_id, task);
|
|
}
|
|
return map;
|
|
}, [tasks]);
|
|
|
|
const visibleTasks = useMemo(
|
|
() => tasks.filter((task) => activeTaskTypes.has(task.task_type)),
|
|
[activeTaskTypes, tasks],
|
|
);
|
|
|
|
// 换绑时间：优先最近一次查询/拦截任务结果，回退账号落库字段
|
|
const latestChangeWaitByAccount = useMemo(() => {
|
|
const map = new Map<number, {
|
|
wait: number | null; canChangeTime: number | null; text: string; taskId: number;
|
|
}>();
|
|
for (const task of tasks) {
|
|
const taskTypes = isEsportsHandbook
|
|
? ['prepare_esports_bind', 'get_esports_bind_qr', 'query_esports_game_name', 'confirm_esports_bind']
|
|
: ['query_change_bind_time', 'get_bind_qr'];
|
|
if (!taskTypes.includes(task.task_type)) continue;
|
|
if (!['success', 'failed'].includes(task.status)) continue;
|
|
const wait = resultNumber(task.result, 'change_role_wait_time');
|
|
const canChangeTime = resultNumber(task.result, 'can_change_time');
|
|
// get_bind_qr 只有冷却拦截时才有 wait；无 wait 时跳过，避免覆盖
|
|
if (!isEsportsHandbook && task.task_type === 'get_bind_qr' && wait == null) continue;
|
|
const existing = map.get(task.account_id);
|
|
if (existing && existing.taskId > task.id) continue;
|
|
const esportsStatus = isEsportsHandbook ? esportsRebindStatus(canChangeTime) : null;
|
|
const text = esportsStatus?.text || resultText(task.result, 'change_role_wait_text') || formatWaitSeconds(wait);
|
|
map.set(task.account_id, { wait, canChangeTime, text, taskId: task.id });
|
|
}
|
|
return map;
|
|
}, [isEsportsHandbook, tasks]);
|
|
|
|
const latestLimitedGoodsTaskByAccount = useMemo(() => {
|
|
const map = new Map<number, DouyuTaskItem>();
|
|
for (const task of tasks) {
|
|
if (task.task_type !== 'query_limited_goods') continue;
|
|
if (!['success', 'failed', 'error'].includes(task.status)) continue;
|
|
const previous = map.get(task.account_id);
|
|
if (!previous || task.id > previous.id) map.set(task.account_id, task);
|
|
}
|
|
return map;
|
|
}, [tasks]);
|
|
|
|
const loadData = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const [accResult, goodsResult, taskResult, cfgResult, typeResult] = await Promise.allSettled([
|
|
douyuApi.listAccounts(),
|
|
isEsportsHandbook ? douyuApi.listEsportsGoods() : douyuApi.listGoods(),
|
|
douyuApi.listTasks(),
|
|
canConfig ? douyuApi.getConfig() : Promise.resolve(null),
|
|
douyuApi.taskTypes(),
|
|
]);
|
|
if (accResult.status === 'fulfilled') setAccounts(accResult.value);
|
|
if (goodsResult.status === 'fulfilled') setGoods(goodsResult.value);
|
|
if (taskResult.status === 'fulfilled') {
|
|
setTasks(taskResult.value);
|
|
// 仅首次加载时屏蔽历史二维码自动弹窗；后续刷新不能把新任务一并标记掉
|
|
if (!autoOpenQrReady.current) {
|
|
for (const task of taskResult.value) {
|
|
if (hasBindQrcode(task)) autoOpenedQrTaskIds.current.add(task.id);
|
|
if (task.task_type === 'prepare_esports_bind' && task.result?.esports_bind_dialog === true) {
|
|
autoOpenedEsportsBindTaskIds.current.add(task.id);
|
|
}
|
|
if (hasPaymentQrcode(task)) autoOpenedPayTaskIds.current.add(task.id);
|
|
}
|
|
autoOpenQrReady.current = true;
|
|
autoOpenEsportsBindReady.current = true;
|
|
autoOpenPayReady.current = true;
|
|
}
|
|
}
|
|
if (cfgResult.status === 'fulfilled' && cfgResult.value) setConfig(cfgResult.value);
|
|
if (typeResult.status === 'fulfilled') setTaskTypes(typeResult.value);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [canConfig, isEsportsHandbook]);
|
|
|
|
const loadTasks = useCallback(async () => {
|
|
try {
|
|
const data = await douyuApi.listTasks();
|
|
setTasks(data);
|
|
if (!data.some((task) => ['pending', 'running', 'planned'].includes(task.status))) {
|
|
// 批次已结束时清理 busy 标记，避免 onResult 丢失导致永久锁住
|
|
setRunningBatchId((current) => (current ? '' : current));
|
|
}
|
|
} catch {
|
|
// 轮询失败不打扰操作
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => { loadData(); }, [loadData]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem(DOUYU_GOLD_AMOUNT_STORAGE_KEY, String(goldAmount));
|
|
}, [goldAmount]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem(DOUYU_GIFT_COUNT_STORAGE_KEY, String(giftCount));
|
|
}, [giftCount]);
|
|
|
|
const hasActiveTasks = useMemo(
|
|
() => visibleTasks.some((task) => ['pending', 'running', 'planned'].includes(task.status)),
|
|
[visibleTasks],
|
|
);
|
|
|
|
// 有活跃任务或 WS 连接时 3 秒刷 tasks；空闲 15 秒轻量刷新
|
|
useEffect(() => {
|
|
const intervalMs = hasActiveTasks || logs.connected || runningBatchId ? 3000 : 15000;
|
|
const timer = setInterval(loadTasks, intervalMs);
|
|
return () => clearInterval(timer);
|
|
}, [hasActiveTasks, loadTasks, logs.connected, runningBatchId]);
|
|
|
|
const openQrTask = useCallback((task: DouyuTaskItem) => {
|
|
autoOpenedQrTaskIds.current.add(task.id);
|
|
setEsportsBindTask(null);
|
|
setPayTask(null);
|
|
setQrTask(task);
|
|
}, []);
|
|
|
|
const openEsportsBindTask = useCallback((task: DouyuTaskItem) => {
|
|
autoOpenedEsportsBindTaskIds.current.add(task.id);
|
|
setQrTask(null);
|
|
setPayTask(null);
|
|
setEsportsBindTask(task);
|
|
}, []);
|
|
|
|
const openPayTask = useCallback((task: DouyuTaskItem) => {
|
|
autoOpenedPayTaskIds.current.add(task.id);
|
|
setQrTask(null);
|
|
setEsportsBindTask(null);
|
|
setPayTask(task);
|
|
}, []);
|
|
|
|
// 自动弹出最新绑定二维码（running 有 url 即可）
|
|
useEffect(() => {
|
|
if (!autoOpenQrReady.current || qrTask) return;
|
|
const nextQrTask = visibleTasks
|
|
.filter((task) => hasBindQrcode(task) && !autoOpenedQrTaskIds.current.has(task.id))
|
|
.sort((a, b) => b.id - a.id)[0];
|
|
if (nextQrTask) openQrTask(nextQrTask);
|
|
}, [openQrTask, qrTask, visibleTasks]);
|
|
|
|
// 电竞手册先查状态再打开独立绑定面板，不把切换角色二维码当作主流程。
|
|
useEffect(() => {
|
|
if (!autoOpenEsportsBindReady.current || esportsBindTask) return;
|
|
const nextTask = visibleTasks
|
|
.filter((task) => (
|
|
task.task_type === 'prepare_esports_bind'
|
|
&& task.result?.esports_bind_dialog === true
|
|
&& !autoOpenedEsportsBindTaskIds.current.has(task.id)
|
|
))
|
|
.sort((a, b) => b.id - a.id)[0];
|
|
if (nextTask) openEsportsBindTask(nextTask);
|
|
}, [esportsBindTask, openEsportsBindTask, visibleTasks]);
|
|
|
|
// 自动弹出支付二维码
|
|
useEffect(() => {
|
|
if (!autoOpenPayReady.current || payTask) return;
|
|
const nextPayTask = visibleTasks
|
|
.filter((task) => hasPaymentQrcode(task) && !paymentArrived(task) && !autoOpenedPayTaskIds.current.has(task.id))
|
|
.sort((a, b) => b.id - a.id)[0];
|
|
if (nextPayTask) openPayTask(nextPayTask);
|
|
}, [openPayTask, payTask, visibleTasks]);
|
|
|
|
// 弹窗跟随最新 task 状态（后端 progress 写入后 UI 自动更新）
|
|
useEffect(() => {
|
|
if (!qrTask) return;
|
|
const latest = tasks.find((task) => task.id === qrTask.id);
|
|
if (latest && latest !== qrTask) setQrTask(latest);
|
|
}, [qrTask, tasks]);
|
|
|
|
useEffect(() => {
|
|
if (!esportsBindTask) return;
|
|
const latest = tasks.find((task) => task.id === esportsBindTask.id);
|
|
if (latest && latest !== esportsBindTask) setEsportsBindTask(latest);
|
|
}, [esportsBindTask, tasks]);
|
|
|
|
useEffect(() => {
|
|
if (!payTask) return;
|
|
const latest = tasks.find((task) => task.id === payTask.id);
|
|
if (!latest) return;
|
|
if (paymentArrived(latest)) {
|
|
setPayTask(null);
|
|
return;
|
|
}
|
|
if (latest !== payTask) setPayTask(latest);
|
|
}, [payTask, tasks]);
|
|
|
|
const batchBusy = Boolean(runningBatchId || logs.connected || hasActiveTasks);
|
|
|
|
const startTask = async (
|
|
taskType: string,
|
|
accountIds?: number[],
|
|
extraPayload: Record<string, unknown> = {},
|
|
) => {
|
|
const ids = accountIds || selectedIds;
|
|
if (ids.length === 0) {
|
|
message.warning('请先选择账号');
|
|
return;
|
|
}
|
|
// 绑定确认/查询允许在其他账号仍轮询时继续，避免卡在多账号批次里
|
|
const allowDuringBatch = [
|
|
'confirm_bind',
|
|
'confirm_esports_bind',
|
|
'query_game_name',
|
|
'query_esports_game_name',
|
|
'prepare_esports_bind',
|
|
'get_esports_bind_qr',
|
|
].includes(taskType);
|
|
if (batchBusy && !allowDuringBatch) {
|
|
message.warning('当前已有批次在运行，请先停止或等待结束');
|
|
return;
|
|
}
|
|
if (['exchange_goods', 'exchange_esports_goods'].includes(taskType) && !selectedGoodsId) {
|
|
message.warning('请先选择兑换商品');
|
|
return;
|
|
}
|
|
const payload: Record<string, unknown> = { ...extraPayload };
|
|
if (['exchange_goods', 'exchange_esports_goods'].includes(taskType)) payload.commodity_id = selectedGoodsId;
|
|
if (taskType === 'create_gold_qr') payload.amount = goldAmount;
|
|
if (['donate_elite_gift', 'donate_esports_chicken_gift', 'donate_esports_firework_gift'].includes(taskType)) {
|
|
payload.gift_count = giftCount;
|
|
}
|
|
try {
|
|
const result = await douyuApi.createTasks({
|
|
account_ids: ids,
|
|
task_type: taskType,
|
|
concurrency,
|
|
payload,
|
|
});
|
|
setRunningBatchId(result.batch_id);
|
|
logs.connect(`/api/douyu/ws/${result.batch_id}`, {
|
|
clear: true,
|
|
onResult: () => {
|
|
setRunningBatchId('');
|
|
void loadData();
|
|
},
|
|
});
|
|
message.success(`已创建 ${result.count} 个任务`);
|
|
setTimeout(() => { void loadTasks(); }, 400);
|
|
} catch (error) {
|
|
message.error(getErrorMessage(error));
|
|
}
|
|
};
|
|
|
|
const stopBatch = async () => {
|
|
if (!runningBatchId) return;
|
|
try {
|
|
await douyuApi.stopBatch(runningBatchId);
|
|
message.success('已停止');
|
|
} catch (error) {
|
|
message.error(getErrorMessage(error));
|
|
}
|
|
};
|
|
|
|
const saveConfig = async (values: DouyuConfig) => {
|
|
try {
|
|
const saved = await douyuApi.updateConfig(values);
|
|
setConfig(saved);
|
|
setConfigOpen(false);
|
|
message.success('配置已保存');
|
|
} catch (error) {
|
|
message.error(getErrorMessage(error));
|
|
}
|
|
};
|
|
|
|
// ---- Import ----
|
|
const loadImportPool = useCallback(async () => {
|
|
setImportLoading(true);
|
|
try {
|
|
const result = await douyuApi.listAccounts({ search: importSearch });
|
|
setImportPool(result.filter((a) => !accounts.find((x) => x.id === a.id)));
|
|
} finally {
|
|
setImportLoading(false);
|
|
}
|
|
}, [importSearch, accounts]);
|
|
useEffect(() => { if (importOpen) void loadImportPool(); }, [importOpen, loadImportPool]);
|
|
|
|
const importAccounts = (ids: number[]) => {
|
|
const toImport = importPool.filter((a) => ids.includes(a.id));
|
|
setAccounts((prev) => {
|
|
const existing = new Set(prev.map((a) => a.id));
|
|
return [...prev, ...toImport.filter((a) => !existing.has(a.id))];
|
|
});
|
|
setImportSelectedIds([]);
|
|
setImportOpen(false);
|
|
message.success(`已导入 ${toImport.length} 个账号`);
|
|
};
|
|
|
|
const removeSelected = () => {
|
|
const sel = new Set(selectedIds);
|
|
setAccounts((prev) => prev.filter((a) => !sel.has(a.id)));
|
|
setSelectedIds([]);
|
|
};
|
|
|
|
// ---- Context menu ----
|
|
const [contextMenu, setContextMenu] = useState<{
|
|
accountIds: number[]; x: number; y: number;
|
|
} | null>(null);
|
|
|
|
const handleRowContextMenu = (record: DouyuTaskAccountItem, event: React.MouseEvent) => {
|
|
event.preventDefault();
|
|
const ids = selectedIds.includes(record.id) ? selectedIds : [record.id];
|
|
setContextMenu({ accountIds: ids, x: event.clientX, y: event.clientY });
|
|
if (!selectedIds.includes(record.id)) setSelectedIds([record.id]);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!contextMenu) return;
|
|
const close = () => setContextMenu(null);
|
|
const closeOnEscape = (event: KeyboardEvent) => {
|
|
if (event.key === 'Escape') close();
|
|
};
|
|
window.addEventListener('click', close);
|
|
window.addEventListener('scroll', close, true);
|
|
window.addEventListener('resize', close);
|
|
window.addEventListener('keydown', closeOnEscape);
|
|
return () => {
|
|
window.removeEventListener('click', close);
|
|
window.removeEventListener('scroll', close, true);
|
|
window.removeEventListener('resize', close);
|
|
window.removeEventListener('keydown', closeOnEscape);
|
|
};
|
|
}, [contextMenu]);
|
|
|
|
const contextMenuStyle = contextMenu ? {
|
|
position: 'fixed' as const,
|
|
left: Math.max(8, Math.min(contextMenu.x, window.innerWidth - 220)),
|
|
top: Math.max(8, Math.min(contextMenu.y, window.innerHeight - 390)),
|
|
zIndex: 1050,
|
|
} : { display: 'none' };
|
|
|
|
const runContextAction = (taskType: string) => {
|
|
if (!contextMenu) return;
|
|
setContextMenu(null);
|
|
void startTask(taskType, contextMenu.accountIds);
|
|
};
|
|
|
|
// ---- 电竞手册绑定面板 ----
|
|
const esportsRelatedTasks = esportsBindTask
|
|
? tasks
|
|
.filter((task) => (
|
|
task.account_id === esportsBindTask.account_id
|
|
&& task.id >= esportsBindTask.id
|
|
&& ['prepare_esports_bind', 'get_esports_bind_qr', 'query_esports_game_name', 'confirm_esports_bind']
|
|
.includes(task.task_type)
|
|
))
|
|
.sort((a, b) => b.id - a.id)
|
|
: [];
|
|
const esportsLatestStateTask = esportsRelatedTasks.find((task) => task.result) || esportsBindTask;
|
|
const esportsLatestRoleTask = esportsRelatedTasks.find(
|
|
(task) => task.task_type === 'query_esports_game_name',
|
|
) || null;
|
|
const esportsLatestQrTask = esportsRelatedTasks.find(
|
|
(task) => Boolean(resultText(task.result, 'url')),
|
|
) || null;
|
|
const esportsConfirmRunning = esportsRelatedTasks.some(
|
|
(task) => task.task_type === 'confirm_esports_bind' && ['planned', 'pending', 'running'].includes(task.status),
|
|
);
|
|
const esportsRoleQueryRunning = Boolean(
|
|
esportsLatestRoleTask && ['planned', 'pending', 'running'].includes(esportsLatestRoleTask.status),
|
|
);
|
|
const esportsResult = esportsLatestStateTask?.result || esportsBindTask?.result || null;
|
|
const esportsBound = resultFlag(esportsResult, 'esports_bound') || resultFlag(esportsResult, 'bind_confirmed');
|
|
const esportsRoleName = resultText(esportsResult, 'role_name');
|
|
const esportsAreaName = resultText(esportsResult, 'area_name');
|
|
const esportsPlatName = resultText(esportsResult, 'plat_name');
|
|
const esportsRoleLine = [esportsPlatName, esportsAreaName].filter(Boolean).join(' / ');
|
|
const esportsCanChangeRole = Boolean(esportsBindTask && !esportsConfirmRunning);
|
|
const esportsCanChangeTime = resultNumber(esportsResult, 'can_change_time');
|
|
const esportsRebind = esportsRebindStatus(esportsCanChangeTime);
|
|
const esportsQrUrl = resultText(esportsLatestQrTask?.result, 'url');
|
|
const esportsAccountName = esportsBindTask
|
|
? (
|
|
esportsBindTask.account_nickname
|
|
|| esportsBindTask.account_username
|
|
|| esportsBindTask.account_uid
|
|
|| `#${esportsBindTask.account_id}`
|
|
)
|
|
: '';
|
|
const esportsStatusText = esportsBound
|
|
? '电竞手册已绑定'
|
|
: esportsConfirmRunning
|
|
? '正在完成电竞手册绑定'
|
|
: esportsRoleQueryRunning
|
|
? '正在查询最新角色'
|
|
: esportsLatestStateTask?.message || '加载电竞手册绑定状态';
|
|
const esportsCanConfirm = Boolean(
|
|
esportsBindTask
|
|
&& !esportsBound
|
|
&& esportsRoleName
|
|
&& !esportsConfirmRunning,
|
|
);
|
|
|
|
const queryEsportsRole = () => {
|
|
if (!esportsBindTask || esportsRoleQueryRunning) return;
|
|
void startTask('query_esports_game_name', [esportsBindTask.account_id]);
|
|
};
|
|
|
|
const switchEsportsRole = () => {
|
|
if (!esportsBindTask || !esportsCanChangeRole) return;
|
|
void startTask('get_esports_bind_qr', [esportsBindTask.account_id]);
|
|
};
|
|
|
|
const confirmEsportsBindFromDialog = () => {
|
|
if (!esportsBindTask || !esportsCanConfirm) {
|
|
message.warning('请先确认当前角色');
|
|
return;
|
|
}
|
|
void startTask('confirm_esports_bind', [esportsBindTask.account_id]);
|
|
};
|
|
|
|
// ---- QR panel derived state ----
|
|
const qrResult = qrTask?.result || null;
|
|
const qrUrl = resultText(qrResult, 'url');
|
|
const qrBindPhase = resultText(qrResult, 'bind_phase');
|
|
const qrAutoPolling = qrTask?.status === 'running' && qrResult?.bind_polling === true;
|
|
const qrQueryTask = qrTask
|
|
? latestQueryGameTaskByAccount.get(qrTask.account_id) || null
|
|
: null;
|
|
const qrQueryResult = qrTask && qrQueryTask && qrQueryTask.id > qrTask.id ? qrQueryTask.result : null;
|
|
const qrQueryRunning = Boolean(qrQueryTask && qrTask && qrQueryTask.id > qrTask.id && qrQueryTask.status === 'running');
|
|
const qrQueryRoleName = resultText(qrQueryResult, 'role_name');
|
|
const qrQueryIsBoundAct = resultFlag(qrQueryResult, 'is_bound_act') || resultFlag(qrQueryResult, 'bind_confirmed');
|
|
const qrQueryPending = Boolean(
|
|
qrQueryResult
|
|
&& qrQueryRoleName
|
|
&& (
|
|
qrQueryResult.bind_ready_for_confirm === true
|
|
|| (!qrQueryIsBoundAct)
|
|
),
|
|
);
|
|
const qrBindReady = bindReadyForConfirm(qrTask) || qrQueryPending;
|
|
const qrRoleSourceResult = qrQueryPending
|
|
? qrQueryResult
|
|
: (bindReadyForConfirm(qrTask) ? qrResult : null);
|
|
const qrRoleName = resultText(qrRoleSourceResult, 'role_name');
|
|
const qrAreaName = resultText(qrRoleSourceResult, 'area_name');
|
|
const qrPlatName = resultText(qrRoleSourceResult, 'plat_name');
|
|
const qrCurrentRoleName = qrQueryRoleName
|
|
|| resultText(qrResult, 'current_role_name')
|
|
|| (
|
|
resultFlag(qrResult, 'is_bound_act')
|
|
? resultText(qrResult, 'role_name')
|
|
: ''
|
|
)
|
|
|| (qrQueryIsBoundAct ? qrQueryRoleName : '');
|
|
const qrCurrentAreaName = resultText(qrQueryResult, 'area_name')
|
|
|| resultText(qrResult, 'current_area_name')
|
|
|| (
|
|
resultFlag(qrResult, 'is_bound_act')
|
|
? resultText(qrResult, 'area_name')
|
|
: ''
|
|
)
|
|
|| (qrQueryIsBoundAct ? resultText(qrQueryResult, 'area_name') : '');
|
|
const qrCurrentPlatName = resultText(qrQueryResult, 'plat_name')
|
|
|| resultText(qrResult, 'current_plat_name')
|
|
|| (
|
|
resultFlag(qrResult, 'is_bound_act')
|
|
? resultText(qrResult, 'plat_name')
|
|
: ''
|
|
)
|
|
|| (qrQueryIsBoundAct ? resultText(qrQueryResult, 'plat_name') : '');
|
|
const qrRoleLine = qrBindReady
|
|
? [qrPlatName, qrAreaName, qrRoleName].filter(Boolean).join(' - ')
|
|
: '';
|
|
const qrBindSummary = resultText(qrResult, 'bind_summary') || resultText(qrQueryResult, 'bind_summary');
|
|
const qrStatusText = qrBindReady
|
|
? '已识别角色，待确认'
|
|
: qrQueryRunning
|
|
? '查询角色中'
|
|
: qrQueryTask && qrQueryTask.id > (qrTask?.id || 0) && qrQueryTask.status === 'success' && qrQueryIsBoundAct
|
|
? '查询结果：仍是当前绑定角色'
|
|
: bindPhaseText(qrBindPhase, qrAutoPolling);
|
|
const qrAccountName = qrTask
|
|
? (qrTask.account_nickname || qrTask.account_username || qrTask.account_uid || `#${qrTask.account_id}`)
|
|
: '';
|
|
|
|
const confirmQrBind = () => {
|
|
if (!qrTask || !qrBindReady) {
|
|
message.warning('请先扫码识别待确认角色');
|
|
return;
|
|
}
|
|
const accountId = qrTask.account_id;
|
|
setQrTask(null);
|
|
void startTask('confirm_bind', [accountId]);
|
|
};
|
|
|
|
const queryQrRole = () => {
|
|
if (!qrTask) return;
|
|
if (qrAutoPolling) {
|
|
message.info('正在自动识别角色，请稍候');
|
|
return;
|
|
}
|
|
void startTask('query_game_name', [qrTask.account_id]);
|
|
};
|
|
|
|
// Account table
|
|
const accountColumns: TableProps<DouyuTaskAccountItem>['columns'] = [
|
|
{
|
|
title: '#', width: 45,
|
|
render: (_, __, index) => <Text type="secondary">{index + 1}</Text>,
|
|
},
|
|
{
|
|
title: '账号', dataIndex: 'username', width: 150,
|
|
render: (_, record) => (
|
|
<Space direction="vertical" size={0}>
|
|
<Text strong>{record.nickname || record.username}</Text>
|
|
<Text type="secondary" style={{ fontSize: 12 }}>UID {record.uid || '-'}</Text>
|
|
</Space>
|
|
),
|
|
},
|
|
{
|
|
title: '游戏名', dataIndex: 'game_name', width: 130,
|
|
render: (_, record) => {
|
|
const queryResult = (
|
|
isEsportsHandbook
|
|
? latestEsportsStateTaskByAccount.get(record.id)
|
|
: latestQueryGameTaskByAccount.get(record.id)
|
|
)?.result || null;
|
|
const roleName = resultText(queryResult, 'role_name')
|
|
|| (isEsportsHandbook ? record.esports_game_name : record.game_name);
|
|
const channel = (
|
|
[resultText(queryResult, 'area_name'), resultText(queryResult, 'plat_name')]
|
|
.filter(Boolean)
|
|
.join(' / ')
|
|
|| (isEsportsHandbook ? record.esports_game_channel : record.game_channel)
|
|
);
|
|
return roleName ? (
|
|
<Space direction="vertical" size={0}>
|
|
<Text>{roleName}</Text>
|
|
{channel ? <Text type="secondary" style={{ fontSize: 12 }}>{channel}</Text> : null}
|
|
</Space>
|
|
) : <Text type="secondary">未查</Text>;
|
|
},
|
|
},
|
|
{
|
|
title: isEsportsHandbook ? '电竞积分' : '积分',
|
|
dataIndex: isEsportsHandbook ? 'esports_points' : 'points',
|
|
width: 80,
|
|
render: (v) => v ?? <Text type="secondary">-</Text>,
|
|
},
|
|
{
|
|
title: '鱼翅', dataIndex: 'gold_balance', width: 70,
|
|
render: (v: number | null) => v ?? <Text type="secondary">-</Text>,
|
|
},
|
|
{
|
|
title: '限制兑换', dataIndex: 'exchange_balance', width: 150, ellipsis: true,
|
|
render: (_, record) => {
|
|
const latestLimitedTask = latestLimitedGoodsTaskByAccount.get(record.id);
|
|
const text = limitedGoodsTaskText(latestLimitedTask);
|
|
if (!text) return <Text type="secondary">未查</Text>;
|
|
if (latestLimitedTask?.status !== 'success') {
|
|
return <Text type="secondary">{text}</Text>;
|
|
}
|
|
const count = resultNumber(latestLimitedTask.result, 'limited_count');
|
|
if (count === 0 || text === '无限制商品') return <Tag color="green">无限制商品</Tag>;
|
|
return <Text title={text}>{text}</Text>;
|
|
},
|
|
},
|
|
{
|
|
title: '换绑时间', dataIndex: 'change_role_wait_time', width: 130,
|
|
render: (_, record) => {
|
|
const fromTask = latestChangeWaitByAccount.get(record.id);
|
|
const canChangeTime = fromTask?.canChangeTime ?? (
|
|
isEsportsHandbook ? record.esports_can_change_time : null
|
|
);
|
|
const esportsStatus = isEsportsHandbook ? esportsRebindStatus(canChangeTime) : null;
|
|
if (esportsStatus) {
|
|
return esportsStatus.available
|
|
? <Tag color="success">可换绑</Tag>
|
|
: (
|
|
<Space direction="vertical" size={0}>
|
|
<Tag color="orange">暂不可换绑</Tag>
|
|
<Text type="secondary" style={{ fontSize: 12 }}>{esportsStatus.text}</Text>
|
|
</Space>
|
|
);
|
|
}
|
|
const wait = fromTask?.wait ?? (
|
|
isEsportsHandbook ? record.esports_change_role_wait_time : record.change_role_wait_time
|
|
);
|
|
const text = fromTask?.text || formatWaitSeconds(wait);
|
|
if (wait == null && !text) {
|
|
return <Text type="secondary">未查</Text>;
|
|
}
|
|
if (wait != null && wait <= 0) {
|
|
return <Tag color="success">可换绑</Tag>;
|
|
}
|
|
if (wait != null && wait > 0) {
|
|
return (
|
|
<Space direction="vertical" size={0}>
|
|
<Tag color="orange">冷却中</Tag>
|
|
<Text type="secondary" style={{ fontSize: 12 }}>{text || formatWaitSeconds(wait)}</Text>
|
|
</Space>
|
|
);
|
|
}
|
|
// 接口没返回数字但有文案
|
|
if (text === '可换绑') return <Tag color="success">可换绑</Tag>;
|
|
return <Text type="secondary">{text || '-'}</Text>;
|
|
},
|
|
sorter: (a, b) => {
|
|
const aw = isEsportsHandbook
|
|
? latestChangeWaitByAccount.get(a.id)?.canChangeTime ?? a.esports_can_change_time ?? -1
|
|
: latestChangeWaitByAccount.get(a.id)?.wait
|
|
?? (isEsportsHandbook ? a.esports_change_role_wait_time : a.change_role_wait_time) ?? -1;
|
|
const bw = isEsportsHandbook
|
|
? latestChangeWaitByAccount.get(b.id)?.canChangeTime ?? b.esports_can_change_time ?? -1
|
|
: latestChangeWaitByAccount.get(b.id)?.wait
|
|
?? (isEsportsHandbook ? b.esports_change_role_wait_time : b.change_role_wait_time) ?? -1;
|
|
return aw - bw;
|
|
},
|
|
},
|
|
];
|
|
|
|
// 任务记录表
|
|
const taskColumns: TableProps<DouyuTaskItem>['columns'] = [
|
|
{
|
|
title: '账号', dataIndex: 'account_username', width: 130,
|
|
render: (_, r) => r.account_nickname || r.account_username || r.account_uid,
|
|
},
|
|
{
|
|
title: '结果', dataIndex: 'message', width: 300, ellipsis: true,
|
|
render: (_, r) => {
|
|
if (['prepare_esports_bind', 'get_esports_bind_qr'].includes(r.task_type)) {
|
|
const roleName = resultText(r.result, 'role_name');
|
|
const esportsBound = resultFlag(r.result, 'esports_bound') || resultFlag(r.result, 'bind_confirmed');
|
|
const bindUrl = resultText(r.result, 'url');
|
|
return (
|
|
<Space wrap size={4}>
|
|
<Text>{r.message || '-'}</Text>
|
|
{roleName ? <Tag color={esportsBound ? 'green' : 'blue'}>{roleName}</Tag> : null}
|
|
{bindUrl || r.result?.esports_bind_dialog === true ? (
|
|
<Button size="small" icon={<QrcodeOutlined />} onClick={() => openEsportsBindTask(r)}>
|
|
查看
|
|
</Button>
|
|
) : null}
|
|
</Space>
|
|
);
|
|
}
|
|
if (r.task_type === 'get_bind_qr') {
|
|
const roleName = resultText(r.result, 'role_name');
|
|
const phase = resultText(r.result, 'bind_phase');
|
|
const ready = bindReadyForConfirm(r);
|
|
const polling = r.status === 'running' && r.result?.bind_polling === true;
|
|
const bindUrl = resultText(r.result, 'url');
|
|
return (
|
|
<Space wrap size={4}>
|
|
<Text>{r.message || '-'}</Text>
|
|
{ready ? <Tag color="gold">{roleName || '待确认'}</Tag> : null}
|
|
{!ready && (polling || phase) ? (
|
|
<Tag color="processing">{bindPhaseText(phase, polling)}</Tag>
|
|
) : null}
|
|
{bindUrl && (
|
|
<Button size="small" icon={<QrcodeOutlined />} onClick={() => openQrTask(r)}>
|
|
查看
|
|
</Button>
|
|
)}
|
|
</Space>
|
|
);
|
|
}
|
|
if (['query_game_name', 'query_esports_game_name'].includes(r.task_type)) {
|
|
const roleName = resultText(r.result, 'role_name');
|
|
const areaName = resultText(r.result, 'area_name');
|
|
const platName = resultText(r.result, 'plat_name');
|
|
return (
|
|
<Space wrap size={4}>
|
|
<Text>{r.message || '-'}</Text>
|
|
{roleName ? <Tag color="blue">{roleName}</Tag> : null}
|
|
{(areaName || platName) ? (
|
|
<Text type="secondary">{[areaName, platName].filter(Boolean).join(' / ')}</Text>
|
|
) : null}
|
|
</Space>
|
|
);
|
|
}
|
|
if (r.task_type === 'confirm_bind') {
|
|
const roleName = resultText(r.result, 'role_name');
|
|
const confirmed = resultFlag(r.result, 'bind_confirmed');
|
|
return (
|
|
<Space wrap size={4}>
|
|
<Text>{r.message || '-'}</Text>
|
|
{roleName ? <Tag color={confirmed ? 'green' : 'orange'}>{roleName}</Tag> : null}
|
|
</Space>
|
|
);
|
|
}
|
|
if (r.task_type === 'confirm_esports_bind') {
|
|
const roleName = resultText(r.result, 'role_name');
|
|
const confirmed = resultFlag(r.result, 'bind_confirmed');
|
|
return (
|
|
<Space wrap size={4}>
|
|
<Text>{r.message || '-'}</Text>
|
|
{roleName ? <Tag color={confirmed ? 'green' : 'orange'}>{roleName}</Tag> : null}
|
|
</Space>
|
|
);
|
|
}
|
|
const url = taskPayUrl(r);
|
|
return (
|
|
<Space wrap size={4}>
|
|
<Text>{r.message || '-'}</Text>
|
|
{url && (
|
|
<Button
|
|
size="small"
|
|
icon={<QrcodeOutlined />}
|
|
onClick={() => {
|
|
if (hasPaymentQrcode(r)) openPayTask(r);
|
|
else if (hasBindQrcode(r)) openQrTask(r);
|
|
}}
|
|
>
|
|
查看
|
|
</Button>
|
|
)}
|
|
</Space>
|
|
);
|
|
},
|
|
},
|
|
{ title: '任务', dataIndex: 'task_type', width: 170, render: (v) => taskTypes[v] || v },
|
|
{
|
|
title: '状态', dataIndex: 'status', width: 80,
|
|
render: (v) => <Tag color={STATUS_COLORS[v]}>{STATUS_LABELS[v] || v}</Tag>,
|
|
},
|
|
{
|
|
title: '时间', dataIndex: 'finished_at', width: 170,
|
|
render: (_, r) => formatTime(r.finished_at || r.created_at),
|
|
},
|
|
];
|
|
|
|
const filteredAccounts = useMemo(() => {
|
|
if (!accountSearch.trim()) return accounts;
|
|
const kw = accountSearch.toLowerCase();
|
|
return accounts.filter((a) =>
|
|
(a.nickname || '').toLowerCase().includes(kw)
|
|
|| (a.username || '').toLowerCase().includes(kw)
|
|
|| (a.uid || '').toLowerCase().includes(kw)
|
|
|| (a.game_name || '').toLowerCase().includes(kw)
|
|
|| (a.esports_game_name || '').toLowerCase().includes(kw),
|
|
);
|
|
}, [accounts, accountSearch]);
|
|
|
|
const [configFormValues, setConfigFormValues] = useState<DouyuConfig | null>(null);
|
|
useEffect(() => {
|
|
if (configOpen && config) setConfigFormValues({ ...config });
|
|
}, [configOpen, config]);
|
|
|
|
const payUrl = resultText(payTask?.result, 'pay_url');
|
|
const payAccountName = payTask
|
|
? (payTask.account_nickname || payTask.account_username || payTask.account_uid || `#${payTask.account_id}`)
|
|
: '';
|
|
const selectedText = selectedIds.length > 0 ? `已选 ${selectedIds.length} 个账号` : '请先勾选账号';
|
|
const actionByKey = useMemo(() => new Map(quickActions.map((item) => [item.key, item])), [quickActions]);
|
|
const actionDisabled = (taskType: string) => {
|
|
if (batchBusy || selectedIds.length === 0) return true;
|
|
if (['exchange_goods', 'exchange_esports_goods'].includes(taskType)) return !selectedGoodsId;
|
|
return false;
|
|
};
|
|
const renderActionButton = (taskType: string, type: 'default' | 'primary' = 'default') => {
|
|
const item = actionByKey.get(taskType);
|
|
return (
|
|
<Button
|
|
key={taskType}
|
|
size="small"
|
|
block
|
|
type={type}
|
|
icon={item?.icon}
|
|
onClick={() => startTask(taskType)}
|
|
disabled={actionDisabled(taskType)}
|
|
style={{ justifyContent: 'flex-start' }}
|
|
>
|
|
{taskTypes[taskType] || taskType}
|
|
</Button>
|
|
);
|
|
};
|
|
const sectionStyle = {
|
|
border: '1px solid #f0f0f0',
|
|
borderRadius: 6,
|
|
padding: 8,
|
|
background: '#fff',
|
|
};
|
|
const sectionTitleStyle = {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 6,
|
|
marginBottom: 8,
|
|
fontWeight: 600,
|
|
};
|
|
const actionGridStyle = {
|
|
display: 'grid',
|
|
gridTemplateColumns: '1fr 1fr',
|
|
gap: 6,
|
|
};
|
|
const compactOperationGridStyle = {
|
|
display: 'grid',
|
|
gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
|
|
gap: 8,
|
|
};
|
|
// 任务记录表:表头固定、表体内部滚动、分页器固定显示在底部
|
|
const taskRecordTableStyle = `
|
|
.douyu-task-record-table {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.douyu-task-record-table .ant-spin-nested-loading,
|
|
.douyu-task-record-table .ant-spin-container {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.douyu-task-record-table .ant-table {
|
|
flex: 1;
|
|
min-height: 0;
|
|
font-size: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.douyu-task-record-table .ant-table-container {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.douyu-task-record-table .ant-table-header {
|
|
flex-shrink: 0;
|
|
}
|
|
.douyu-task-record-table .ant-table-body {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: auto !important;
|
|
}
|
|
.douyu-task-record-table .ant-table-thead > tr > th,
|
|
.douyu-task-record-table .ant-table-tbody > tr > td {
|
|
padding: 4px 8px;
|
|
line-height: 20px;
|
|
}
|
|
.douyu-task-record-table .ant-typography {
|
|
font-size: 12px;
|
|
}
|
|
.douyu-task-record-table .ant-tag {
|
|
font-size: 11px;
|
|
line-height: 18px;
|
|
margin-inline-end: 0;
|
|
padding-inline: 5px;
|
|
}
|
|
.douyu-task-record-table .ant-pagination {
|
|
flex-shrink: 0;
|
|
margin: 0;
|
|
padding: 6px 4px 2px;
|
|
border-top: 1px solid #f0f0f0;
|
|
}
|
|
`;
|
|
|
|
return (
|
|
<div style={{ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
|
|
<style>{taskRecordTableStyle}</style>
|
|
{/* 头部 */}
|
|
<Space style={{ justifyContent: 'space-between', width: '100%', marginBottom: 8, flexShrink: 0 }}>
|
|
<div>
|
|
<h2 style={{ margin: 0 }}>{handbookTitle}</h2>
|
|
<Text type="secondary">{handbookDescription}</Text>
|
|
</div>
|
|
<Space>
|
|
<Button icon={<ReloadOutlined />} onClick={loadData} loading={loading}>刷新</Button>
|
|
{canConfig && <Button icon={<SettingOutlined />} onClick={() => setConfigOpen(true)}>配置</Button>}
|
|
{runningBatchId && <Button danger icon={<StopOutlined />} onClick={stopBatch}>停止</Button>}
|
|
</Space>
|
|
</Space>
|
|
|
|
{/* 主布局 */}
|
|
<div style={{
|
|
flex: 1, minHeight: 0,
|
|
display: 'grid',
|
|
gridTemplateColumns: 'minmax(0, 2fr) minmax(0, 1fr)',
|
|
gap: 12, overflow: 'hidden',
|
|
}}>
|
|
{/* 左侧账号 */}
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 12, minHeight: 0, overflow: 'hidden' }}>
|
|
<Card
|
|
size="small" title="账号"
|
|
extra={<Tag color="blue">已选 {selectedIds.length}/{accounts.length}</Tag>}
|
|
style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}
|
|
styles={{ body: { flex: 1, minHeight: 0, overflow: 'hidden', padding: 8, display: 'flex', flexDirection: 'column' } }}
|
|
>
|
|
<Space style={{ marginBottom: 8, width: '100%', justifyContent: 'space-between', flexShrink: 0 }} wrap>
|
|
<Space>
|
|
<Input
|
|
size="small" placeholder="搜索账号/昵称/游戏名" prefix={<SearchOutlined />}
|
|
value={accountSearch} onChange={(e) => setAccountSearch(e.target.value)}
|
|
style={{ width: 200 }} allowClear
|
|
/>
|
|
</Space>
|
|
<Space>
|
|
<Button size="small" icon={<ImportOutlined />} onClick={() => setImportOpen(true)}>导入账号</Button>
|
|
{selectedIds.length > 0 && (
|
|
<Button size="small" danger onClick={removeSelected}>移出选中</Button>
|
|
)}
|
|
</Space>
|
|
</Space>
|
|
<Table
|
|
rowKey="id"
|
|
size="small"
|
|
className="douyu-task-record-table"
|
|
loading={loading}
|
|
rowSelection={{
|
|
selectedRowKeys: selectedIds,
|
|
onChange: (keys) => setSelectedIds(keys.map(Number)),
|
|
}}
|
|
columns={accountColumns}
|
|
dataSource={filteredAccounts}
|
|
pagination={{ pageSize: 15, showSizeChanger: false, size: 'small', showLessItems: true }}
|
|
onRow={(record) => ({
|
|
onContextMenu: (e) => handleRowContextMenu(record, e),
|
|
style: { cursor: 'context-menu' },
|
|
title: '右键打开账号动作',
|
|
})}
|
|
/>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* 右侧:任务记录(弹性高度) + 操作区(自适应) */}
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 12, minHeight: 0, overflow: 'hidden' }}>
|
|
<Card
|
|
size="small" title="任务记录"
|
|
extra={
|
|
<Space size={12}>
|
|
<Tag color="success">成功 {visibleTasks.filter((t) => t.status === 'success').length}</Tag>
|
|
<Tag color="error">失败 {visibleTasks.filter((t) => ['failed', 'error'].includes(t.status)).length}</Tag>
|
|
</Space>
|
|
}
|
|
style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}
|
|
styles={{ body: { flex: 1, minHeight: 0, padding: '4px 6px', overflow: 'hidden', display: 'flex', flexDirection: 'column' } }}
|
|
>
|
|
<Table
|
|
rowKey="id" size="small" columns={taskColumns} dataSource={visibleTasks}
|
|
className="douyu-task-record-table"
|
|
loading={loading}
|
|
pagination={{
|
|
pageSize: 15,
|
|
showSizeChanger: false,
|
|
size: 'small',
|
|
showLessItems: true,
|
|
showTotal: (total) => `共 ${total} 条`,
|
|
}}
|
|
tableLayout="fixed"
|
|
scroll={{ x: 850 }}
|
|
/>
|
|
</Card>
|
|
|
|
<Card
|
|
size="small"
|
|
title={isEsportsHandbook ? '电竞手册操作' : '精英宝典操作'}
|
|
extra={<Tag color={selectedIds.length ? 'blue' : 'default'}>{selectedText}</Tag>}
|
|
style={{ flexShrink: 0, display: 'flex', flexDirection: 'column' }}
|
|
styles={{ body: { padding: 8, maxHeight: 260, overflow: 'auto' } }}
|
|
>
|
|
<Space direction="vertical" style={{ width: '100%' }} size={8}>
|
|
<Space.Compact style={{ width: '100%' }}>
|
|
<Button size="small" disabled>并发</Button>
|
|
<InputNumber
|
|
size="small"
|
|
min={1}
|
|
max={10}
|
|
value={concurrency}
|
|
onChange={(v) => setConcurrency(v || 1)}
|
|
style={{ width: '100%' }}
|
|
/>
|
|
</Space.Compact>
|
|
|
|
{isEsportsHandbook ? (
|
|
<div style={compactOperationGridStyle}>
|
|
<div style={sectionStyle}>
|
|
<div style={sectionTitleStyle}>
|
|
<CreditCardOutlined />
|
|
<span>开通手册</span>
|
|
</div>
|
|
{renderActionButton('create_esports_qr', 'primary')}
|
|
</div>
|
|
<div style={sectionStyle}>
|
|
<div style={sectionTitleStyle}>
|
|
<ShoppingOutlined />
|
|
<span>皮肤兑换</span>
|
|
</div>
|
|
<Space direction="vertical" style={{ width: '100%' }} size={6}>
|
|
<Select
|
|
size="small"
|
|
value={selectedGoodsId || undefined}
|
|
onChange={setSelectedGoodsId}
|
|
options={goods.map((item) => ({ value: item.commodity_id, label: goodsLabel(item) }))}
|
|
placeholder="选择电竞皮肤"
|
|
showSearch
|
|
optionFilterProp="label"
|
|
style={{ width: '100%' }}
|
|
/>
|
|
<div style={actionGridStyle}>
|
|
{renderActionButton('refresh_esports_goods')}
|
|
{renderActionButton('exchange_esports_goods', 'primary')}
|
|
</div>
|
|
</Space>
|
|
</div>
|
|
<div style={sectionStyle}>
|
|
<div style={sectionTitleStyle}>
|
|
<CreditCardOutlined />
|
|
<span>充值与送礼</span>
|
|
</div>
|
|
<Space direction="vertical" style={{ width: '100%' }} size={6}>
|
|
<Space.Compact style={{ width: '100%' }}>
|
|
<InputNumber
|
|
size="small"
|
|
min={1}
|
|
value={goldAmount}
|
|
onChange={(v) => setGoldAmount(v || 1)}
|
|
style={{ width: '100%' }}
|
|
/>
|
|
<Button
|
|
size="small"
|
|
icon={<CreditCardOutlined />}
|
|
onClick={() => startTask('create_gold_qr')}
|
|
disabled={actionDisabled('create_gold_qr')}
|
|
>
|
|
充值鱼翅
|
|
</Button>
|
|
</Space.Compact>
|
|
<InputNumber
|
|
size="small"
|
|
min={1}
|
|
value={giftCount}
|
|
onChange={(v) => setGiftCount(v || 1)}
|
|
addonAfter="赠送数量"
|
|
style={{ width: '100%' }}
|
|
/>
|
|
<div style={actionGridStyle}>
|
|
{renderActionButton('donate_esports_chicken_gift', 'primary')}
|
|
{renderActionButton('donate_esports_firework_gift', 'primary')}
|
|
</div>
|
|
</Space>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div style={compactOperationGridStyle}>
|
|
<div style={sectionStyle}>
|
|
<div style={sectionTitleStyle}>
|
|
<ShoppingOutlined />
|
|
<span>兑换</span>
|
|
</div>
|
|
<Space direction="vertical" style={{ width: '100%' }} size={6}>
|
|
<Select
|
|
size="small"
|
|
value={selectedGoodsId || undefined}
|
|
onChange={setSelectedGoodsId}
|
|
options={goods.map((item) => ({ value: item.commodity_id, label: goodsLabel(item) }))}
|
|
placeholder="选择兑换商品"
|
|
showSearch
|
|
optionFilterProp="label"
|
|
style={{ width: '100%' }}
|
|
/>
|
|
<div style={actionGridStyle}>
|
|
{renderActionButton('refresh_goods')}
|
|
{renderActionButton('exchange_goods', 'primary')}
|
|
</div>
|
|
</Space>
|
|
</div>
|
|
|
|
<div style={sectionStyle}>
|
|
<div style={sectionTitleStyle}>
|
|
<CreditCardOutlined />
|
|
<span>开通、充值与送礼</span>
|
|
</div>
|
|
<Space direction="vertical" style={{ width: '100%' }} size={6}>
|
|
{renderActionButton('create_elite_qr', 'primary')}
|
|
<Space.Compact style={{ width: '100%' }}>
|
|
<InputNumber
|
|
size="small"
|
|
min={1}
|
|
value={goldAmount}
|
|
onChange={(v) => setGoldAmount(v || 1)}
|
|
style={{ width: '100%' }}
|
|
/>
|
|
<Button
|
|
size="small"
|
|
icon={<CreditCardOutlined />}
|
|
onClick={() => startTask('create_gold_qr')}
|
|
disabled={actionDisabled('create_gold_qr')}
|
|
>
|
|
充值鱼翅
|
|
</Button>
|
|
</Space.Compact>
|
|
<Space.Compact style={{ width: '100%' }}>
|
|
<InputNumber
|
|
size="small"
|
|
min={1}
|
|
value={giftCount}
|
|
onChange={(v) => setGiftCount(v || 1)}
|
|
style={{ width: '100%' }}
|
|
/>
|
|
<Button
|
|
size="small"
|
|
icon={<GiftOutlined />}
|
|
onClick={() => startTask('donate_elite_gift')}
|
|
disabled={actionDisabled('donate_elite_gift')}
|
|
>
|
|
赠送精英令
|
|
</Button>
|
|
</Space.Compact>
|
|
</Space>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<Text type="secondary" style={{ fontSize: 12 }}>
|
|
勾选账号后可批量执行；账号行右键可执行绑定与查询动作。
|
|
</Text>
|
|
</Space>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 右键菜单 */}
|
|
{contextMenu && (
|
|
<div style={contextMenuStyle} onClick={(e) => e.stopPropagation()}>
|
|
<Card
|
|
size="small"
|
|
title={contextMenu.accountIds.length > 1 ? '批量动作' : '账号动作'}
|
|
styles={{ body: { padding: 4 } }}
|
|
style={{ width: 200, boxShadow: '0 4px 12px rgba(0,0,0,0.12)' }}
|
|
>
|
|
<Space direction="vertical" style={{ width: '100%' }}>
|
|
{quickActions.map((item) => (
|
|
<Button
|
|
key={item.key} block size="small" type="text"
|
|
icon={item.icon}
|
|
onClick={() => runContextAction(item.key)}
|
|
disabled={batchBusy}
|
|
style={{ justifyContent: 'flex-start' }}
|
|
>
|
|
{taskTypes[item.key] || item.key}
|
|
</Button>
|
|
))}
|
|
</Space>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
|
|
{/* Import modal */}
|
|
<Modal
|
|
title="导入账号到操作台"
|
|
open={importOpen}
|
|
onCancel={() => setImportOpen(false)}
|
|
footer={null}
|
|
width={700}
|
|
>
|
|
<Space style={{ marginBottom: 12, width: '100%', justifyContent: 'space-between' }}>
|
|
<Input
|
|
placeholder="搜索账号/昵称" prefix={<SearchOutlined />}
|
|
value={importSearch} onChange={(e) => setImportSearch(e.target.value)}
|
|
style={{ width: 250 }}
|
|
/>
|
|
<Space>
|
|
<Button onClick={() => importAccounts(importPool.map((a) => a.id))}>
|
|
导入全部 ({importPool.length})
|
|
</Button>
|
|
<Button type="primary" onClick={() => importAccounts(importSelectedIds)} disabled={importSelectedIds.length === 0}>
|
|
导入选中 ({importSelectedIds.length})
|
|
</Button>
|
|
</Space>
|
|
</Space>
|
|
<Table
|
|
rowKey="id" size="small" loading={importLoading}
|
|
rowSelection={{ selectedRowKeys: importSelectedIds, onChange: (keys) => setImportSelectedIds(keys.map(Number)) }}
|
|
dataSource={importPool}
|
|
columns={[
|
|
{ title: '昵称', dataIndex: 'nickname', render: (_, r) => r.nickname || r.username },
|
|
{ title: 'UID', dataIndex: 'uid' },
|
|
{
|
|
title: '游戏名',
|
|
dataIndex: isEsportsHandbook ? 'esports_game_name' : 'game_name',
|
|
render: (v) => v || '-',
|
|
},
|
|
{
|
|
title: isEsportsHandbook ? '电竞积分' : '积分',
|
|
dataIndex: isEsportsHandbook ? 'esports_points' : 'points',
|
|
render: (v) => v ?? '-',
|
|
},
|
|
]}
|
|
pagination={{ pageSize: 10 }}
|
|
locale={{ emptyText: '没有可导入的账号（操作台已包含所有账号）' }}
|
|
/>
|
|
</Modal>
|
|
|
|
{/* Config modal */}
|
|
<Modal
|
|
title={isEsportsHandbook ? '电竞手册配置' : '精英宝典配置'}
|
|
open={configOpen}
|
|
onCancel={() => setConfigOpen(false)}
|
|
onOk={() => configFormValues && saveConfig(configFormValues)}
|
|
okText="保存" cancelText="取消"
|
|
width={600}
|
|
>
|
|
{configFormValues && (
|
|
<Space direction="vertical" style={{ width: '100%' }} size={8}>
|
|
{(isEsportsHandbook ? [
|
|
{ label: '电竞手册 manualID', key: 'esports_manual_id' },
|
|
{ label: '电竞手册活动', key: 'esports_act_alias' },
|
|
{ label: '房间 ID', key: 'room_id' },
|
|
{ label: '冠军鸡腿礼物 ID', key: 'esports_chicken_gift_id' },
|
|
{ label: '冠军鸡腿皮肤 ID', key: 'esports_chicken_skin_id' },
|
|
{ label: '冠军烟花礼物 ID', key: 'esports_firework_gift_id' },
|
|
{ label: '冠军烟花皮肤 ID', key: 'esports_firework_skin_id' },
|
|
] : [
|
|
{ label: 'manualID', key: 'manual_id' },
|
|
{ label: 'RID', key: 'rid' },
|
|
{ label: '绑定二维码活动', key: 'bind_act_alias' },
|
|
{ label: '确认绑定活动', key: 'confirm_act_alias' },
|
|
{ label: '查询绑定活动(最新)', key: 'legacy_act_alias' },
|
|
{ label: '房间 ID', key: 'room_id' },
|
|
{ label: '精英令礼物 ID', key: 'gift_id' },
|
|
{ label: '皮肤 ID', key: 'skin_id' },
|
|
]).map(({ label, key }) => (
|
|
<Space key={key} style={{ width: '100%', justifyContent: 'space-between' }}>
|
|
<Text>{label}</Text>
|
|
<Input
|
|
style={{ width: 300 }}
|
|
value={String(configFormValues[key as keyof DouyuConfig] ?? '')}
|
|
onChange={(e) => setConfigFormValues((prev) => prev ? { ...prev, [key]: e.target.value } : prev)}
|
|
/>
|
|
</Space>
|
|
))}
|
|
{(isEsportsHandbook ? [
|
|
{ label: '电竞手册金额(分)', key: 'esports_amount' },
|
|
] : [
|
|
{ label: '宝典金额(分)', key: 'elite_amount' },
|
|
{ label: '鱼翅支付方式', key: 'gold_pay_type' },
|
|
]).map(({ label, key }) => (
|
|
<Space key={key} style={{ width: '100%', justifyContent: 'space-between' }}>
|
|
<Text>{label}</Text>
|
|
<InputNumber
|
|
style={{ width: 300 }}
|
|
value={Number(configFormValues[key as keyof DouyuConfig]) || 0}
|
|
onChange={(v) => setConfigFormValues((prev) => prev ? { ...prev, [key]: v ?? 0 } : prev)}
|
|
/>
|
|
</Space>
|
|
))}
|
|
</Space>
|
|
)}
|
|
</Modal>
|
|
|
|
{/* 电竞手册绑定弹窗：活动绑定与角色选择是独立流程。 */}
|
|
<Modal
|
|
title={
|
|
<Space>
|
|
<QrcodeOutlined />
|
|
<span>绑定电竞手册角色</span>
|
|
</Space>
|
|
}
|
|
open={!!esportsBindTask}
|
|
onCancel={() => {
|
|
setEsportsBindTask(null);
|
|
}}
|
|
footer={null}
|
|
centered
|
|
width={440}
|
|
>
|
|
{esportsBindTask && (
|
|
<Space direction="vertical" style={{ width: '100%' }} size={14}>
|
|
{esportsAccountName ? (
|
|
<Text type="secondary">{esportsAccountName}</Text>
|
|
) : null}
|
|
<Tag color={esportsBound ? 'green' : esportsConfirmRunning ? 'processing' : 'blue'}>
|
|
{esportsStatusText}
|
|
</Tag>
|
|
|
|
{esportsRoleName ? (
|
|
<div>
|
|
<Text type="secondary" style={{ display: 'block', marginBottom: 4 }}>当前游戏角色</Text>
|
|
<Text strong style={{ fontSize: 16 }}>{esportsRoleName}</Text>
|
|
{esportsRoleLine ? (
|
|
<Text type="secondary" style={{ display: 'block', marginTop: 4 }}>{esportsRoleLine}</Text>
|
|
) : null}
|
|
</div>
|
|
) : (
|
|
<Text type="secondary">当前未检测到游戏角色，请先切换角色。</Text>
|
|
)}
|
|
|
|
{esportsRebind && esportsRoleName ? (
|
|
<Text type="secondary">
|
|
{esportsRebind.available ? '当前可换绑' : `可换绑时间：${esportsRebind.text}`}
|
|
</Text>
|
|
) : null}
|
|
|
|
{esportsQrUrl ? (
|
|
<div style={{ textAlign: 'center' }}>
|
|
<QRCode value={esportsQrUrl} size={220} bordered={false} />
|
|
<Text type="secondary" style={{ display: 'block', marginTop: 8 }}>
|
|
请在腾讯页面选择角色，完成后查询最新角色。
|
|
</Text>
|
|
</div>
|
|
) : null}
|
|
|
|
<Space wrap>
|
|
<Button
|
|
icon={<SearchOutlined />}
|
|
onClick={queryEsportsRole}
|
|
loading={esportsRoleQueryRunning}
|
|
disabled={esportsConfirmRunning}
|
|
>
|
|
查询最新角色
|
|
</Button>
|
|
<Button
|
|
icon={<QrcodeOutlined />}
|
|
onClick={switchEsportsRole}
|
|
disabled={!esportsCanChangeRole || esportsConfirmRunning}
|
|
>
|
|
切换角色
|
|
</Button>
|
|
<Button
|
|
type="primary"
|
|
icon={<CheckCircleOutlined />}
|
|
onClick={confirmEsportsBindFromDialog}
|
|
disabled={!esportsCanConfirm}
|
|
loading={esportsConfirmRunning}
|
|
>
|
|
完成绑定
|
|
</Button>
|
|
</Space>
|
|
</Space>
|
|
)}
|
|
</Modal>
|
|
|
|
{/* 精英宝典绑定二维码弹窗。 */}
|
|
<Modal
|
|
title={
|
|
<Space>
|
|
<QrcodeOutlined />
|
|
<span>{qrBindReady ? '已识别新角色' : qrStatusText}</span>
|
|
</Space>
|
|
}
|
|
open={!!qrTask}
|
|
onCancel={() => setQrTask(null)}
|
|
footer={null}
|
|
centered
|
|
width={420}
|
|
>
|
|
{qrTask && (
|
|
<div style={{ textAlign: 'center' }}>
|
|
{qrAccountName && (
|
|
<Text type="secondary" style={{ marginBottom: 12, display: 'block' }}>{qrAccountName}</Text>
|
|
)}
|
|
<Space direction="vertical" align="center" size={12}>
|
|
<Tag color={qrBindReady ? 'gold' : qrBindPhase === 'role_timeout' ? 'orange' : 'processing'}>
|
|
{qrStatusText}
|
|
</Tag>
|
|
{qrUrl ? (
|
|
<QRCode value={qrUrl} size={220} bordered={false} />
|
|
) : qrBindReady ? (
|
|
<Text type="secondary">绑定二维码暂未返回</Text>
|
|
) : qrTask?.status === 'running' ? (
|
|
<Text type="secondary">二维码生成中...</Text>
|
|
) : (
|
|
<Text type="secondary">本次未生成二维码</Text>
|
|
)}
|
|
{qrBindReady ? (
|
|
<>
|
|
<Tag color="gold" style={{ fontSize: 16, padding: '6px 16px' }}>
|
|
{qrRoleName}
|
|
</Tag>
|
|
{qrRoleLine && <Text type="secondary">{qrRoleLine}</Text>}
|
|
</>
|
|
) : qrCurrentRoleName ? (
|
|
<>
|
|
<Tag color="blue" style={{ fontSize: 14, padding: '4px 12px' }}>
|
|
当前绑定: {qrCurrentRoleName}
|
|
</Tag>
|
|
{(qrCurrentAreaName || qrCurrentPlatName) && (
|
|
<Text type="secondary">
|
|
{[qrCurrentPlatName, qrCurrentAreaName].filter(Boolean).join(' - ')}
|
|
</Text>
|
|
)}
|
|
</>
|
|
) : null}
|
|
{qrBindSummary ? (
|
|
<Text type="secondary" style={{ fontSize: 12, wordBreak: 'break-all' }}>
|
|
{qrBindSummary}
|
|
</Text>
|
|
) : null}
|
|
{qrQueryTask && qrQueryTask.id > (qrTask?.id || 0) && qrQueryTask.message ? (
|
|
<Text type="secondary" style={{ fontSize: 12 }}>
|
|
最近查询: {qrQueryTask.message}
|
|
</Text>
|
|
) : null}
|
|
<Space>
|
|
<Button
|
|
icon={<SearchOutlined />}
|
|
onClick={queryQrRole}
|
|
loading={qrQueryRunning}
|
|
disabled={qrAutoPolling}
|
|
>
|
|
{qrAutoPolling ? '自动识别中' : '查询角色'}
|
|
</Button>
|
|
<Button
|
|
type="primary"
|
|
icon={<CheckCircleOutlined />}
|
|
onClick={confirmQrBind}
|
|
disabled={!qrBindReady}
|
|
>
|
|
确认绑定
|
|
</Button>
|
|
</Space>
|
|
</Space>
|
|
</div>
|
|
)}
|
|
</Modal>
|
|
|
|
{/* Pay QR Modal */}
|
|
<Modal
|
|
title={
|
|
<Space>
|
|
<CreditCardOutlined />
|
|
<span>支付二维码</span>
|
|
</Space>
|
|
}
|
|
open={!!payTask}
|
|
onCancel={() => setPayTask(null)}
|
|
footer={null}
|
|
centered
|
|
width={400}
|
|
>
|
|
{payTask && (
|
|
<div style={{ textAlign: 'center' }}>
|
|
{payAccountName && (
|
|
<Text type="secondary" style={{ marginBottom: 12, display: 'block' }}>{payAccountName}</Text>
|
|
)}
|
|
<Space direction="vertical" align="center" size={12}>
|
|
{payUrl ? (
|
|
<QRCode value={payUrl} size={220} bordered={false} />
|
|
) : (
|
|
<Text type="secondary">支付码生成中...</Text>
|
|
)}
|
|
<Text>{payTask.message || '请扫码支付'}</Text>
|
|
</Space>
|
|
</div>
|
|
)}
|
|
</Modal>
|
|
</div>
|
|
);
|
|
}
|