重构 DouyuTasksPage 布局：删除任务记录区，操作工具栏移至账号表格上方，账号表格全宽
This commit is contained in:
yml2213
@@ -17,7 +17,6 @@ import {
|
||||
} 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';
|
||||
|
||||
@@ -89,16 +88,6 @@ const ESPORTS_TASK_TYPES = new Set([
|
||||
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 : '';
|
||||
@@ -112,8 +101,17 @@ function resultFlag(result: Record<string, unknown> | null | undefined, key: str
|
||||
return text === '1' || text === 'true' || text === 'yes';
|
||||
}
|
||||
|
||||
function taskPayUrl(task: DouyuTaskItem | null | undefined): string {
|
||||
return resultText(task?.result, 'pay_url') || resultText(task?.result, 'url');
|
||||
// 提取任务结果中的二维码 URL：绑定/电竞绑定用 url，支付类用 pay_url
|
||||
function taskQrUrl(task: DouyuTaskItem | null | undefined): string {
|
||||
if (!task) return '';
|
||||
if (task.task_type === 'get_bind_qr') return resultText(task.result, 'url');
|
||||
if (['create_elite_qr', 'create_esports_qr', 'create_gold_qr'].includes(task.task_type)) {
|
||||
return resultText(task.result, 'pay_url');
|
||||
}
|
||||
if (['prepare_esports_bind', 'get_esports_bind_qr'].includes(task.task_type)) {
|
||||
return resultText(task.result, 'url');
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
function bindReadyForConfirm(task: DouyuTaskItem | null | undefined): boolean {
|
||||
@@ -256,10 +254,12 @@ export default function DouyuTasksPage({ handbook }: { handbook: HandbookKind })
|
||||
const [giftCount, setGiftCount] = useState(() => savedPositiveInteger(DOUYU_GIFT_COUNT_STORAGE_KEY));
|
||||
const [selectedGoodsId, setSelectedGoodsId] = useState('');
|
||||
const [accountSearch, setAccountSearch] = useState('');
|
||||
const taskRecordAreaRef = useRef<HTMLDivElement | null>(null);
|
||||
const [taskRecordAreaHeight, setTaskRecordAreaHeight] = useState(360);
|
||||
const accountTableAreaRef = useRef<HTMLDivElement | null>(null);
|
||||
const [accountTableAreaHeight, setAccountTableAreaHeight] = useState(360);
|
||||
const [accountPageSize, setAccountPageSize] = useState<number>(() => {
|
||||
const v = Number(localStorage.getItem('douyu_task_account_page_size'));
|
||||
return [10, 20, 50, 100].includes(v) ? v : 20;
|
||||
});
|
||||
|
||||
const [importOpen, setImportOpen] = useState(false);
|
||||
const [importPool, setImportPool] = useState<DouyuTaskAccountItem[]>([]);
|
||||
@@ -408,29 +408,18 @@ export default function DouyuTasksPage({ handbook }: { handbook: HandbookKind })
|
||||
|
||||
useEffect(() => { loadData(); }, [loadData]);
|
||||
|
||||
// 监听任务记录/账号表格区域高度变化，动态计算 scroll.y 实现表体内部滚动
|
||||
// 监听账号表格区域高度变化，动态计算 scroll.y 实现表体内部滚动
|
||||
useEffect(() => {
|
||||
const updateNode = (
|
||||
node: HTMLDivElement | null,
|
||||
setter: (v: number) => void,
|
||||
) => {
|
||||
if (!node) return;
|
||||
setter(Math.max(200, Math.floor(node.getBoundingClientRect().height)));
|
||||
};
|
||||
const taskNode = taskRecordAreaRef.current;
|
||||
const accountNode = accountTableAreaRef.current;
|
||||
const updateHeights = () => {
|
||||
updateNode(taskNode, setTaskRecordAreaHeight);
|
||||
updateNode(accountNode, setAccountTableAreaHeight);
|
||||
};
|
||||
updateHeights();
|
||||
const node = accountTableAreaRef.current;
|
||||
if (!node) return;
|
||||
const update = () => setAccountTableAreaHeight(Math.max(200, Math.floor(node.getBoundingClientRect().height)));
|
||||
update();
|
||||
if (typeof ResizeObserver === 'undefined') {
|
||||
window.addEventListener('resize', updateHeights);
|
||||
return () => window.removeEventListener('resize', updateHeights);
|
||||
window.addEventListener('resize', update);
|
||||
return () => window.removeEventListener('resize', update);
|
||||
}
|
||||
const observer = new ResizeObserver(updateHeights);
|
||||
if (taskNode) observer.observe(taskNode);
|
||||
if (accountNode) observer.observe(accountNode);
|
||||
const observer = new ResizeObserver(update);
|
||||
observer.observe(node);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
@@ -974,157 +963,26 @@ export default function DouyuTasksPage({ handbook }: { handbook: HandbookKind })
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '最近结果', width: 200,
|
||||
title: '二维码', width: 76, align: 'center',
|
||||
render: (_, record) => {
|
||||
const task = latestTaskByAccount.get(record.id);
|
||||
if (!task) return <Text type="secondary">无</Text>;
|
||||
const typeLabel = taskTypes[task.task_type] || task.task_type;
|
||||
// 是否有可打开的二维码/弹窗
|
||||
const canOpen = hasBindQrcode(task) || hasPaymentQrcode(task)
|
||||
|| (['prepare_esports_bind', 'get_esports_bind_qr'].includes(task.task_type)
|
||||
&& (Boolean(resultText(task.result, 'url')) || task.result?.esports_bind_dialog === true));
|
||||
const url = taskQrUrl(task);
|
||||
if (!url) return null;
|
||||
const openTask = () => {
|
||||
if (!task) return;
|
||||
if (hasBindQrcode(task)) openQrTask(task);
|
||||
else if (hasPaymentQrcode(task)) openPayTask(task);
|
||||
else openEsportsBindTask(task);
|
||||
};
|
||||
return (
|
||||
<Space direction="vertical" size={2} style={{ width: '100%' }}>
|
||||
<Space size={4} wrap>
|
||||
<Tag color={STATUS_COLORS[task.status] || 'default'} style={{ margin: 0 }}>{typeLabel}</Tag>
|
||||
{canOpen && (
|
||||
<Button
|
||||
size="small" type="link" icon={<QrcodeOutlined />}
|
||||
onClick={openTask}
|
||||
style={{ padding: 0, height: 20, fontSize: 12 }}
|
||||
>
|
||||
查看
|
||||
</Button>
|
||||
)}
|
||||
</Space>
|
||||
<Text
|
||||
type="secondary" style={{ fontSize: 12 }}
|
||||
ellipsis={{ tooltip: task.message || '' }}
|
||||
>
|
||||
{task.message || STATUS_LABELS[task.status] || task.status}
|
||||
</Text>
|
||||
</Space>
|
||||
<div onClick={openTask} style={{ cursor: 'pointer', display: 'inline-block', lineHeight: 0 }} title="点击查看大图">
|
||||
<QRCode value={url} size={56} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
// 任务记录表
|
||||
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();
|
||||
@@ -1268,258 +1126,231 @@ export default function DouyuTasksPage({ handbook }: { handbook: HandbookKind })
|
||||
</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>
|
||||
<div ref={accountTableAreaRef} style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
|
||||
<Table
|
||||
rowKey="id"
|
||||
{/* 操作工具栏 */}
|
||||
<Card
|
||||
size="small"
|
||||
title={isEsportsHandbook ? '电竞手册操作' : '精英宝典操作'}
|
||||
extra={
|
||||
<Space>
|
||||
<Tag color={selectedIds.length ? 'blue' : 'default'}>{selectedText}</Tag>
|
||||
<Space.Compact>
|
||||
<Button size="small" disabled>并发</Button>
|
||||
<InputNumber
|
||||
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 }}
|
||||
tableLayout="fixed"
|
||||
scroll={{ x: 960, y: Math.max(120, accountTableAreaHeight - 80) }}
|
||||
onRow={(record) => ({
|
||||
onContextMenu: (e) => handleRowContextMenu(record, e),
|
||||
style: { cursor: 'context-menu' },
|
||||
title: '右键打开账号动作',
|
||||
})}
|
||||
min={1}
|
||||
max={10}
|
||||
value={concurrency}
|
||||
onChange={(v) => setConcurrency(v || 1)}
|
||||
style={{ width: 70 }}
|
||||
/>
|
||||
</Space.Compact>
|
||||
</Space>
|
||||
}
|
||||
style={{ flexShrink: 0, marginBottom: 12 }}
|
||||
styles={{ body: { padding: 8 } }}
|
||||
>
|
||||
{isEsportsHandbook ? (
|
||||
<div style={compactOperationGridStyle}>
|
||||
<div style={sectionStyle}>
|
||||
<div style={sectionTitleStyle}>
|
||||
<CreditCardOutlined />
|
||||
<span>开通手册</span>
|
||||
</div>
|
||||
{renderActionButton('create_esports_qr', 'primary')}
|
||||
</div>
|
||||
</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>
|
||||
<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>
|
||||
}
|
||||
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' } }}
|
||||
>
|
||||
<div ref={taskRecordAreaRef} style={{ flex: 1, minHeight: 0, 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, y: Math.max(120, taskRecordAreaHeight - 80) }}
|
||||
/>
|
||||
</div>
|
||||
</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>
|
||||
<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}
|
||||
max={10}
|
||||
value={concurrency}
|
||||
onChange={(v) => setConcurrency(v || 1)}
|
||||
value={giftCount}
|
||||
onChange={(v) => setGiftCount(v || 1)}
|
||||
addonAfter="赠送数量"
|
||||
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 style={actionGridStyle}>
|
||||
{renderActionButton('donate_esports_chicken_gift', 'primary')}
|
||||
{renderActionButton('donate_esports_firework_gift', 'primary')}
|
||||
</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>
|
||||
</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>
|
||||
)}
|
||||
<Text type="secondary" style={{ fontSize: 12 }}>
|
||||
勾选账号后可批量执行；账号行右键可执行绑定与查询动作。
|
||||
</Text>
|
||||
</Space>
|
||||
</Card>
|
||||
</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>
|
||||
</Card>
|
||||
|
||||
{/* 账号 */}
|
||||
<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, padding: '4px 6px', overflow: 'hidden', 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>
|
||||
<div ref={accountTableAreaRef} style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
|
||||
<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: accountPageSize,
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: [10, 20, 50, 100],
|
||||
size: 'small',
|
||||
showLessItems: true,
|
||||
showTotal: (total) => `共 ${total} 条`,
|
||||
onChange: (_page, size) => {
|
||||
if (size !== accountPageSize) {
|
||||
setAccountPageSize(size);
|
||||
localStorage.setItem('douyu_task_account_page_size', String(size));
|
||||
}
|
||||
},
|
||||
}}
|
||||
tableLayout="fixed"
|
||||
scroll={{ x: 960, y: Math.max(120, accountTableAreaHeight - 80) }}
|
||||
onRow={(record) => ({
|
||||
onContextMenu: (e) => handleRowContextMenu(record, e),
|
||||
style: { cursor: 'context-menu' },
|
||||
title: '右键打开账号动作',
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* 右键菜单 */}
|
||||
{contextMenu && (
|
||||
|
||||
Reference in New Issue
Block a user