316 lines
9.6 KiB
TypeScript
316 lines
9.6 KiB
TypeScript
import { useEffect, useState, useCallback } from 'react';
|
||
import { Table, Button, Card, Row, Col, Statistic, message, Tag, Popconfirm, Space, Typography, Input, theme, Dropdown } from 'antd';
|
||
import { DownloadOutlined, DeleteOutlined, CopyOutlined, SearchOutlined } from '@ant-design/icons';
|
||
import { cookieApi, type CookieItem } from '../api/modules';
|
||
import { usePermissions } from '../hooks/usePermissions';
|
||
import { formatTime } from '../utils/time';
|
||
import { getErrorMessage } from '../utils/error';
|
||
|
||
const { Text } = Typography;
|
||
|
||
/** 复制文本到剪贴板，兼容非安全上下文（http://非localhost） */
|
||
function copyToClipboard(text: string): Promise<void> {
|
||
if (navigator.clipboard?.writeText) {
|
||
return navigator.clipboard.writeText(text);
|
||
}
|
||
// fallback：利用 textarea + execCommand，兼容 http 远程访问
|
||
return new Promise((resolve, reject) => {
|
||
const ta = document.createElement('textarea');
|
||
ta.value = text;
|
||
ta.style.position = 'fixed';
|
||
ta.style.left = '-9999px';
|
||
document.body.appendChild(ta);
|
||
ta.select();
|
||
try {
|
||
const ok = document.execCommand('copy');
|
||
document.body.removeChild(ta);
|
||
if (ok) {
|
||
resolve();
|
||
} else {
|
||
reject(new Error('execCommand copy failed'));
|
||
}
|
||
} catch (e) {
|
||
document.body.removeChild(ta);
|
||
reject(e);
|
||
}
|
||
});
|
||
}
|
||
|
||
export default function CookiePage() {
|
||
const { token } = theme.useToken();
|
||
const [cookies, setCookies] = useState<CookieItem[]>([]);
|
||
const [loading, setLoading] = useState(false);
|
||
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
|
||
const [searchText, setSearchText] = useState('');
|
||
const [pageSize, setPageSize] = useState(() => {
|
||
const v = localStorage.getItem('cookie_page_size');
|
||
return v ? Number(v) || 20 : 20;
|
||
});
|
||
const [currentPage, setCurrentPage] = useState(1);
|
||
const { can } = usePermissions();
|
||
|
||
const canView = can('cookie:view');
|
||
const canExport = can('cookie:export');
|
||
|
||
const loadCookies = useCallback(async () => {
|
||
setLoading(true);
|
||
try {
|
||
const data = await cookieApi.list();
|
||
setCookies(data);
|
||
} catch (e: unknown) {
|
||
message.error(getErrorMessage(e));
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
loadCookies();
|
||
}, [loadCookies]);
|
||
|
||
const handleExport = async (format: string = 'csv') => {
|
||
try {
|
||
const blob = await cookieApi.exportCsv(format);
|
||
const url = URL.createObjectURL(blob instanceof Blob ? blob : new Blob([blob]));
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = format === 'custom' ? 'cookies_custom.txt' : 'cookies.csv';
|
||
a.click();
|
||
URL.revokeObjectURL(url);
|
||
message.success('已导出');
|
||
} catch (e: unknown) {
|
||
message.error(getErrorMessage(e));
|
||
}
|
||
};
|
||
|
||
const handleCopyCookie = (cookie: string, username: string) => {
|
||
if (!cookie) {
|
||
message.warning('Cookie 为空');
|
||
return;
|
||
}
|
||
copyToClipboard(cookie).then(() => {
|
||
message.success(`已复制 ${username} 的 Cookie`);
|
||
}).catch(() => {
|
||
message.error('复制失败');
|
||
});
|
||
};
|
||
|
||
const handleCopySelected = () => {
|
||
if (selectedRowKeys.length === 0) {
|
||
message.warning('请先选择 Cookie');
|
||
return;
|
||
}
|
||
const selected = cookies.filter((c) => selectedRowKeys.includes(c.id));
|
||
const text = selected
|
||
.map((c) => `${c.account_username}: ${c.cookie || '(空)'}`)
|
||
.join('\n');
|
||
copyToClipboard(text).then(() => {
|
||
message.success(`已复制 ${selected.length} 条 Cookie`);
|
||
}).catch(() => {
|
||
message.error('复制失败');
|
||
});
|
||
};
|
||
|
||
const handleDelete = async (id: number) => {
|
||
try {
|
||
await cookieApi.delete(id);
|
||
message.success('已删除');
|
||
setSelectedRowKeys((prev) => prev.filter((k) => k !== id));
|
||
loadCookies();
|
||
} catch (e: unknown) {
|
||
message.error(getErrorMessage(e));
|
||
}
|
||
};
|
||
|
||
const handleDeleteSelected = async () => {
|
||
if (selectedRowKeys.length === 0) {
|
||
message.warning('请先选择要删除的 Cookie');
|
||
return;
|
||
}
|
||
try {
|
||
const ids = selectedRowKeys.map((k) => Number(k));
|
||
const res = await cookieApi.deleteBatch(ids);
|
||
message.success(res.message);
|
||
setSelectedRowKeys([]);
|
||
loadCookies();
|
||
} catch (e: unknown) {
|
||
message.error(getErrorMessage(e));
|
||
}
|
||
};
|
||
|
||
// 筛选
|
||
const filteredCookies = cookies.filter((c) => {
|
||
if (!searchText) return true;
|
||
const s = searchText.toLowerCase();
|
||
return (
|
||
c.account_username?.toLowerCase().includes(s) ||
|
||
c.assigned_username?.toLowerCase().includes(s)
|
||
);
|
||
});
|
||
|
||
const columns = [
|
||
{ title: 'ID', dataIndex: 'id', width: 60, align: 'center' as const },
|
||
{
|
||
title: '账号',
|
||
dataIndex: 'account_username',
|
||
width: 140,
|
||
ellipsis: true,
|
||
},
|
||
{
|
||
title: '分配',
|
||
dataIndex: 'assigned_username',
|
||
width: 100,
|
||
align: 'center' as const,
|
||
render: (name: string | null) =>
|
||
name ? <Tag color="green">{name}</Tag> : <Text type="secondary" style={{ fontSize: 12 }}>未分配</Text>,
|
||
},
|
||
{
|
||
title: 'Cookie',
|
||
dataIndex: 'cookie_preview',
|
||
ellipsis: true,
|
||
render: (val: string) => {
|
||
if (!canView) return <Tag>***</Tag>;
|
||
return <span style={{ fontFamily: 'monospace', fontSize: 12 }}>{val}</span>;
|
||
},
|
||
},
|
||
{
|
||
title: '时间',
|
||
dataIndex: 'created_at',
|
||
width: 180,
|
||
align: 'center' as const,
|
||
render: (val: string) => formatTime(val),
|
||
},
|
||
{
|
||
title: '操作',
|
||
width: 130,
|
||
align: 'center' as const,
|
||
fixed: 'right' as const,
|
||
render: (_: unknown, record: CookieItem) => (
|
||
<Space size={4}>
|
||
<Button
|
||
size="small"
|
||
icon={<CopyOutlined />}
|
||
onClick={() => handleCopyCookie(record.cookie, record.account_username)}
|
||
>
|
||
复制
|
||
</Button>
|
||
{canExport && (
|
||
<Popconfirm title="确认删除？" onConfirm={() => handleDelete(record.id)}>
|
||
<Button danger size="small" icon={<DeleteOutlined />} />
|
||
</Popconfirm>
|
||
)}
|
||
</Space>
|
||
),
|
||
},
|
||
];
|
||
|
||
const assignedCount = cookies.filter((c) => c.assigned_to).length;
|
||
const unassignedCount = cookies.length - assignedCount;
|
||
|
||
return (
|
||
<div>
|
||
<div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||
<h2 style={{ margin: 0 }}>Cookie 管理</h2>
|
||
<Space>
|
||
<Button
|
||
icon={<CopyOutlined />}
|
||
onClick={handleCopySelected}
|
||
disabled={selectedRowKeys.length === 0}
|
||
>
|
||
复制选中 {selectedRowKeys.length > 0 && `(${selectedRowKeys.length})`}
|
||
</Button>
|
||
{canExport && (
|
||
<Popconfirm
|
||
title={`确认删除选中的 ${selectedRowKeys.length} 条 Cookie？`}
|
||
onConfirm={handleDeleteSelected}
|
||
disabled={selectedRowKeys.length === 0}
|
||
>
|
||
<Button
|
||
danger
|
||
icon={<DeleteOutlined />}
|
||
disabled={selectedRowKeys.length === 0}
|
||
>
|
||
删除选中 {selectedRowKeys.length > 0 && `(${selectedRowKeys.length})`}
|
||
</Button>
|
||
</Popconfirm>
|
||
)}
|
||
{canExport && (
|
||
<Dropdown
|
||
menu={{
|
||
items: [
|
||
{ key: 'csv', label: 'CSV（账号, Cookie, 时间）', onClick: () => handleExport('csv') },
|
||
{ key: 'custom', label: '自定义（账号----密码----ck）', onClick: () => handleExport('custom') },
|
||
],
|
||
}}
|
||
>
|
||
<Button type="primary" icon={<DownloadOutlined />}>
|
||
导出
|
||
</Button>
|
||
</Dropdown>
|
||
)}
|
||
</Space>
|
||
</div>
|
||
<Row gutter={12} style={{ marginBottom: 16 }}>
|
||
<Col span={6}>
|
||
<Card size="small"><Statistic title="Cookie 总数" value={cookies.length} /></Card>
|
||
</Col>
|
||
<Col span={6}>
|
||
<Card size="small">
|
||
<Statistic
|
||
title="已分配"
|
||
value={assignedCount}
|
||
styles={{ content: { color: token.colorSuccess } }}
|
||
/>
|
||
</Card>
|
||
</Col>
|
||
<Col span={6}>
|
||
<Card size="small">
|
||
<Statistic
|
||
title="未分配"
|
||
value={unassignedCount}
|
||
styles={{ content: { color: token.colorError } }}
|
||
/>
|
||
</Card>
|
||
</Col>
|
||
</Row>
|
||
<div style={{ marginBottom: 12 }}>
|
||
<Input.Search
|
||
placeholder="搜索账号或分配客服"
|
||
allowClear
|
||
value={searchText}
|
||
onChange={(e) => setSearchText(e.target.value)}
|
||
style={{ width: 260 }}
|
||
size="small"
|
||
prefix={<SearchOutlined />}
|
||
/>
|
||
</div>
|
||
<Table
|
||
rowSelection={{
|
||
selectedRowKeys,
|
||
onChange: (keys) => setSelectedRowKeys(keys),
|
||
}}
|
||
columns={columns}
|
||
dataSource={filteredCookies}
|
||
rowKey="id"
|
||
loading={loading}
|
||
size="small"
|
||
pagination={{
|
||
current: currentPage,
|
||
pageSize,
|
||
showSizeChanger: true,
|
||
showTotal: (t) => `共 ${t} 条`,
|
||
onChange: (page, size) => {
|
||
setCurrentPage(page);
|
||
if (size !== pageSize) {
|
||
setPageSize(size);
|
||
localStorage.setItem('cookie_page_size', String(size));
|
||
setCurrentPage(1); // 切换 pageSize 时重置到第1页
|
||
}
|
||
},
|
||
}}
|
||
scroll={{ x: 900 }}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|