refactor: 优化代码结构并修复类型问题
- 移除未使用的TabPane组件 - 修复类型定义和导入方式 - 优化mock数据源的环境变量判断逻辑 - 更新文档结构并归档旧文件 - 添加新的UI组件和Memo组件 - 调整API路径和响应处理
This commit is contained in:
448
dashboard/src/pages/Settings/PlatformAuth.tsx
Normal file
448
dashboard/src/pages/Settings/PlatformAuth.tsx
Normal file
@@ -0,0 +1,448 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
Card,
|
||||
Table,
|
||||
Button,
|
||||
Space,
|
||||
Modal,
|
||||
Form,
|
||||
Input,
|
||||
Select,
|
||||
Tag,
|
||||
message,
|
||||
Row,
|
||||
Col,
|
||||
Statistic,
|
||||
Badge,
|
||||
Typography,
|
||||
Divider,
|
||||
Alert,
|
||||
Spin,
|
||||
} from 'antd';
|
||||
import {
|
||||
PlusOutlined,
|
||||
CheckCircleOutlined,
|
||||
CloseCircleOutlined,
|
||||
SyncOutlined,
|
||||
ShopOutlined,
|
||||
LinkOutlined,
|
||||
ApiOutlined,
|
||||
ReloadOutlined,
|
||||
DeleteOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import { platformAuthDataSource } from '@/services/platformAuthDataSource';
|
||||
import { PlatformAccount, PlatformAccountStats, Platform } from '@/types/platform';
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
const { Option } = Select;
|
||||
|
||||
const PLATFORM_CONFIG: Record<string, { color: string; text: string; icon: React.ReactNode }> = {
|
||||
// TikTok系列
|
||||
TIKTOK: { color: 'cyan', text: 'TikTok', icon: <ShopOutlined /> },
|
||||
TIKTOK_FULL: { color: 'cyan', text: 'TikTok全托管', icon: <ShopOutlined /> },
|
||||
|
||||
// Shopee系列
|
||||
SHOPEE: { color: 'red', text: 'Shopee', icon: <ShopOutlined /> },
|
||||
SHOPEE_FULL: { color: 'red', text: 'Shopee全托管', icon: <ShopOutlined /> },
|
||||
SHOPEE_LIGHT: { color: 'red', text: 'Shopee轻出海', icon: <ShopOutlined /> },
|
||||
|
||||
// Lazada系列
|
||||
LAZADA: { color: 'purple', text: 'Lazada', icon: <ShopOutlined /> },
|
||||
LAZADA_FULL: { color: 'purple', text: 'Lazada全托管', icon: <ShopOutlined /> },
|
||||
|
||||
// Temu
|
||||
TEMU_FULL: { color: 'green', text: 'Temu全托管', icon: <ShopOutlined /> },
|
||||
|
||||
// SHEIN系列
|
||||
SHEIN: { color: 'pink', text: 'SHEIN', icon: <ShopOutlined /> },
|
||||
SHEIN_HALF: { color: 'pink', text: 'SHEIN半托管', icon: <ShopOutlined /> },
|
||||
|
||||
// 其他平台
|
||||
OZON: { color: 'yellow', text: 'Ozon', icon: <ShopOutlined /> },
|
||||
YANDEX: { color: 'blue', text: 'Yandex', icon: <ShopOutlined /> },
|
||||
ALIEXPRESS: { color: 'orange', text: 'AliExpress', icon: <ShopOutlined /> },
|
||||
ALIEXPRESS_HALF: { color: 'orange', text: '速卖通半托管', icon: <ShopOutlined /> },
|
||||
ALIEXPRESS_POP: { color: 'orange', text: '速卖通本土POP', icon: <ShopOutlined /> },
|
||||
COUPANG: { color: 'red', text: 'Coupang', icon: <ShopOutlined /> },
|
||||
WALMART: { color: 'blue', text: 'Walmart', icon: <ShopOutlined /> },
|
||||
WILDBERRIES: { color: 'purple', text: 'Wildberries', icon: <ShopOutlined /> },
|
||||
ALLEGRO: { color: 'green', text: 'Allegro', icon: <ShopOutlined /> },
|
||||
MERCADO_LIBRE: { color: 'yellow', text: 'Mercado Libre', icon: <ShopOutlined /> },
|
||||
JUMIA: { color: 'blue', text: 'Jumia', icon: <ShopOutlined /> },
|
||||
JOOM: { color: 'purple', text: 'Joom', icon: <ShopOutlined /> },
|
||||
AMAZON: { color: 'orange', text: 'Amazon', icon: <ShopOutlined /> },
|
||||
WISH: { color: 'blue', text: 'Wish', icon: <ShopOutlined /> },
|
||||
EMAG: { color: 'green', text: 'eMAG', icon: <ShopOutlined /> },
|
||||
MIRAVIA: { color: 'pink', text: 'Miravia', icon: <ShopOutlined /> },
|
||||
DARAZ: { color: 'blue', text: 'Daraz', icon: <ShopOutlined /> },
|
||||
JOYBUY: { color: 'red', text: 'Joybuy', icon: <ShopOutlined /> },
|
||||
ALIBABA: { color: 'orange', text: 'Alibaba', icon: <ShopOutlined /> },
|
||||
QOO10: { color: 'red', text: 'Qoo10', icon: <ShopOutlined /> },
|
||||
SHOPIFY: { color: 'green', text: 'Shopify', icon: <ShopOutlined /> },
|
||||
SHOPLAZZA: { color: 'blue', text: 'Shoplazza', icon: <ShopOutlined /> },
|
||||
SHOPYY_V1: { color: 'purple', text: 'SHOPYY v1.0', icon: <ShopOutlined /> },
|
||||
SHOPYY_V2: { color: 'purple', text: 'SHOPYY v2.0', icon: <ShopOutlined /> },
|
||||
SHOPLINE: { color: 'green', text: 'SHOPLINE', icon: <ShopOutlined /> },
|
||||
GREATBOSS: { color: 'blue', text: 'GreatBoss', icon: <ShopOutlined /> },
|
||||
OTHER: { color: 'default', text: '其他', icon: <ShopOutlined /> },
|
||||
|
||||
// 原有平台
|
||||
EBAY: { color: 'blue', text: 'eBay', icon: <ShopOutlined /> },
|
||||
};
|
||||
|
||||
const STATUS_CONFIG: Record<string, { color: string; text: string }> = {
|
||||
ACTIVE: { color: 'success', text: '已连接' },
|
||||
INACTIVE: { color: 'default', text: '未连接' },
|
||||
EXPIRED: { color: 'warning', text: '已过期' },
|
||||
ERROR: { color: 'error', text: '错误' },
|
||||
};
|
||||
|
||||
const PlatformAuth: React.FC = () => {
|
||||
const [accounts, setAccounts] = useState<PlatformAccount[]>([]);
|
||||
const [stats, setStats] = useState<PlatformAccountStats>({ total: 0, active: 0, inactive: 0, expired: 0, error: 0 });
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
const [form] = Form.useForm();
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
const loadData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const [accountList, accountStats] = await Promise.all([
|
||||
platformAuthDataSource.list(),
|
||||
platformAuthDataSource.getStats(),
|
||||
]);
|
||||
setAccounts(accountList);
|
||||
setStats(accountStats);
|
||||
} catch (error: any) {
|
||||
message.error(`加载失败: ${error.message}`);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleConnect = async (values: { platform: Platform; accountName: string; accountId: string; shopId?: string }) => {
|
||||
try {
|
||||
const result = await platformAuthDataSource.connect({
|
||||
platform: values.platform,
|
||||
accountName: values.accountName,
|
||||
accountId: values.accountId,
|
||||
shopId: values.shopId,
|
||||
});
|
||||
|
||||
if (result.authUrl) {
|
||||
message.success('正在跳转到授权页面...');
|
||||
window.open(result.authUrl, '_blank');
|
||||
}
|
||||
|
||||
setModalVisible(false);
|
||||
form.resetFields();
|
||||
loadData();
|
||||
} catch (error: any) {
|
||||
message.error(`连接失败: ${error.message}`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDisconnect = async (id: string) => {
|
||||
Modal.confirm({
|
||||
title: '确认断开连接？',
|
||||
content: '断开后将无法同步该平台的数据',
|
||||
onOk: async () => {
|
||||
try {
|
||||
await platformAuthDataSource.disconnect(id);
|
||||
message.success('已断开连接');
|
||||
loadData();
|
||||
} catch (error: any) {
|
||||
message.error(`断开失败: ${error.message}`);
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleRefresh = async (id: string) => {
|
||||
try {
|
||||
message.loading({ content: '正在刷新授权...', key: 'refresh' });
|
||||
const result = await platformAuthDataSource.refresh(id);
|
||||
if (result.success) {
|
||||
message.success({ content: '授权已刷新', key: 'refresh' });
|
||||
loadData();
|
||||
} else {
|
||||
message.error({ content: result.message, key: 'refresh' });
|
||||
}
|
||||
} catch (error: any) {
|
||||
message.error({ content: `刷新失败: ${error.message}`, key: 'refresh' });
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
Modal.confirm({
|
||||
title: '确认删除？',
|
||||
content: '删除后需要重新授权才能使用该平台',
|
||||
okType: 'danger',
|
||||
onOk: async () => {
|
||||
try {
|
||||
await platformAuthDataSource.delete(id);
|
||||
message.success('已删除');
|
||||
loadData();
|
||||
} catch (error: any) {
|
||||
message.error(`删除失败: ${error.message}`);
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const columns: ColumnsType<PlatformAccount> = [
|
||||
{
|
||||
title: '平台',
|
||||
dataIndex: 'platform',
|
||||
key: 'platform',
|
||||
width: 150,
|
||||
render: (platform: string) => {
|
||||
const config = PLATFORM_CONFIG[platform] || { color: 'default', text: platform, icon: <ShopOutlined /> };
|
||||
return (
|
||||
<Space>
|
||||
{config.icon}
|
||||
<Tag color={config.color}>{config.text}</Tag>
|
||||
</Space>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '店铺名称',
|
||||
dataIndex: 'accountName',
|
||||
key: 'accountName',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '账号ID',
|
||||
dataIndex: 'accountId',
|
||||
key: 'accountId',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 120,
|
||||
render: (status: string) => {
|
||||
const config = STATUS_CONFIG[status] || { color: 'default', text: status };
|
||||
return <Badge status={config.color as any} text={config.text} />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '最后同步',
|
||||
dataIndex: 'lastSyncAt',
|
||||
key: 'lastSyncAt',
|
||||
width: 180,
|
||||
render: (lastSyncAt?: string) => lastSyncAt ? new Date(lastSyncAt).toLocaleString() : '-',
|
||||
},
|
||||
{
|
||||
title: '授权过期',
|
||||
dataIndex: 'expiresAt',
|
||||
key: 'expiresAt',
|
||||
width: 180,
|
||||
render: (expiresAt?: string) => expiresAt ? new Date(expiresAt).toLocaleString() : '-',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 220,
|
||||
render: (_, record) => (
|
||||
<Space>
|
||||
{record.status === 'ACTIVE' && (
|
||||
<>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
icon={<ReloadOutlined />}
|
||||
onClick={() => handleRefresh(record.id)}
|
||||
>
|
||||
刷新
|
||||
</Button>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
danger
|
||||
onClick={() => handleDisconnect(record.id)}
|
||||
>
|
||||
断开
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
{record.status === 'EXPIRED' && (
|
||||
<>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
icon={<SyncOutlined />}
|
||||
onClick={() => handleRefresh(record.id)}
|
||||
>
|
||||
重新授权
|
||||
</Button>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={() => handleDelete(record.id)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{record.status === 'INACTIVE' && (
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
icon={<LinkOutlined />}
|
||||
onClick={() => {
|
||||
form.setFieldsValue({
|
||||
platform: record.platform,
|
||||
accountName: record.accountName,
|
||||
accountId: record.accountId,
|
||||
});
|
||||
setModalVisible(true);
|
||||
}}
|
||||
>
|
||||
去授权
|
||||
</Button>
|
||||
)}
|
||||
{record.status === 'ERROR' && (
|
||||
<>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
icon={<SyncOutlined />}
|
||||
onClick={() => handleRefresh(record.id)}
|
||||
>
|
||||
重试
|
||||
</Button>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={() => handleDelete(record.id)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Title level={4}>平台授权管理</Title>
|
||||
<Text type="secondary">管理各电商平台的API授权，确保数据同步正常</Text>
|
||||
|
||||
<Divider />
|
||||
|
||||
<Row gutter={16} style={{ marginBottom: 24 }}>
|
||||
<Col span={6}>
|
||||
<Card>
|
||||
<Statistic title="总平台数" value={stats.total} prefix={<ShopOutlined />} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Card>
|
||||
<Statistic
|
||||
title="已连接"
|
||||
value={stats.active}
|
||||
valueStyle={{ color: '#3f8600' }}
|
||||
prefix={<CheckCircleOutlined />}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Card>
|
||||
<Statistic
|
||||
title="已过期"
|
||||
value={stats.expired}
|
||||
valueStyle={{ color: '#faad14' }}
|
||||
prefix={<CloseCircleOutlined />}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Card>
|
||||
<Statistic
|
||||
title="错误"
|
||||
value={stats.error}
|
||||
valueStyle={{ color: '#cf1322' }}
|
||||
prefix={<SyncOutlined spin />}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{stats.expired > 0 && (
|
||||
<Alert
|
||||
message="部分平台授权已过期，请及时刷新授权以避免数据同步中断"
|
||||
type="warning"
|
||||
showIcon
|
||||
style={{ marginBottom: 16 }}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Card>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={() => setModalVisible(true)}>
|
||||
添加平台
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Spin spinning={loading}>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={accounts}
|
||||
rowKey="id"
|
||||
pagination={{ pageSize: 10 }}
|
||||
/>
|
||||
</Spin>
|
||||
</Card>
|
||||
|
||||
<Modal
|
||||
title="添加平台授权"
|
||||
open={modalVisible}
|
||||
onCancel={() => {
|
||||
setModalVisible(false);
|
||||
form.resetFields();
|
||||
}}
|
||||
onOk={() => {
|
||||
form.validateFields().then(values => {
|
||||
handleConnect(values);
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Form form={form} layout="vertical">
|
||||
<Form.Item name="platform" label="平台" rules={[{ required: true, message: '请选择平台' }]}>
|
||||
<Select placeholder="选择平台">
|
||||
{Object.entries(PLATFORM_CONFIG).map(([key, config]) => (
|
||||
<Option key={key} value={key}>
|
||||
<Space>
|
||||
{config.icon}
|
||||
{config.text}
|
||||
</Space>
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item name="accountName" label="店铺名称" rules={[{ required: true, message: '请输入店铺名称' }]}>
|
||||
<Input placeholder="输入店铺名称" />
|
||||
</Form.Item>
|
||||
<Form.Item name="accountId" label="账号ID" rules={[{ required: true, message: '请输入账号ID' }]}>
|
||||
<Input placeholder="输入平台账号ID" />
|
||||
</Form.Item>
|
||||
<Form.Item name="shopId" label="店铺ID（可选）">
|
||||
<Input placeholder="输入店铺ID" />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PlatformAuth;
|
||||
Reference in New Issue
Block a user