refactor: 优化代码结构并修复类型问题
- 移除未使用的TabPane组件 - 修复类型定义和导入方式 - 优化mock数据源的环境变量判断逻辑 - 更新文档结构并归档旧文件 - 添加新的UI组件和Memo组件 - 调整API路径和响应处理
This commit is contained in:
@@ -45,7 +45,7 @@ import type { ColumnsType } from 'antd/es/table';
|
||||
const { Text, Title } = Typography;
|
||||
const { Option } = Select;
|
||||
const { Search } = Input;
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
|
||||
// ==================== 多商户店铺配置 ====================
|
||||
// 当前用户拥有的店铺（根据登录用户的权限动态加载）
|
||||
@@ -71,12 +71,57 @@ const CURRENT_USER_SHOPS: UserShop[] = [
|
||||
|
||||
// 平台配置
|
||||
const PLATFORM_CONFIG: Record<string, { name: string; color: string; icon: React.ReactNode }> = {
|
||||
AMAZON: { name: 'Amazon', color: '#FF9900', icon: <AmazonOutlined /> },
|
||||
EBAY: { name: 'eBay', color: '#E53238', icon: <ShopOutlined /> },
|
||||
SHOPIFY: { name: 'Shopify', color: '#96BF48', icon: <ShoppingOutlined /> },
|
||||
// TikTok系列
|
||||
TIKTOK: { name: 'TikTok', color: '#000000', icon: <ShopOutlined /> },
|
||||
TIKTOK_FULL: { name: 'TikTok全托管', color: '#000000', icon: <ShopOutlined /> },
|
||||
|
||||
// Shopee系列
|
||||
SHOPEE: { name: 'Shopee', color: '#EE4D2D', icon: <ShopOutlined /> },
|
||||
TIKTOK: { name: 'TikTok Shop', color: '#000000', icon: <ShopOutlined /> },
|
||||
SHOPEE_FULL: { name: 'Shopee全托管', color: '#EE4D2D', icon: <ShopOutlined /> },
|
||||
SHOPEE_LIGHT: { name: 'Shopee轻出海', color: '#EE4D2D', icon: <ShopOutlined /> },
|
||||
|
||||
// Lazada系列
|
||||
LAZADA: { name: 'Lazada', color: '#0F156D', icon: <ShopOutlined /> },
|
||||
LAZADA_FULL: { name: 'Lazada全托管', color: '#0F156D', icon: <ShopOutlined /> },
|
||||
|
||||
// Temu
|
||||
TEMU_FULL: { name: 'Temu全托管', color: '#96BF48', icon: <ShopOutlined /> },
|
||||
|
||||
// SHEIN系列
|
||||
SHEIN: { name: 'SHEIN', color: '#FF6B6B', icon: <ShopOutlined /> },
|
||||
SHEIN_HALF: { name: 'SHEIN半托管', color: '#FF6B6B', icon: <ShopOutlined /> },
|
||||
|
||||
// 其他平台
|
||||
OZON: { name: 'Ozon', color: '#FFD700', icon: <ShopOutlined /> },
|
||||
YANDEX: { name: 'Yandex', color: '#FF0000', icon: <ShopOutlined /> },
|
||||
ALIEXPRESS: { name: 'AliExpress', color: '#FF6A00', icon: <ShopOutlined /> },
|
||||
ALIEXPRESS_HALF: { name: '速卖通半托管', color: '#FF6A00', icon: <ShopOutlined /> },
|
||||
ALIEXPRESS_POP: { name: '速卖通本土POP', color: '#FF6A00', icon: <ShopOutlined /> },
|
||||
COUPANG: { name: 'Coupang', color: '#FF3B30', icon: <ShopOutlined /> },
|
||||
WALMART: { name: 'Walmart', color: '#007DC6', icon: <ShopOutlined /> },
|
||||
WILDBERRIES: { name: 'Wildberries', color: '#9370DB', icon: <ShopOutlined /> },
|
||||
ALLEGRO: { name: 'Allegro', color: '#00A870', icon: <ShopOutlined /> },
|
||||
MERCADO_LIBRE: { name: 'Mercado Libre', color: '#6C3483', icon: <ShopOutlined /> },
|
||||
JUMIA: { name: 'Jumia', color: '#FF6B00', icon: <ShopOutlined /> },
|
||||
JOOM: { name: 'Joom', color: '#8A2BE2', icon: <ShopOutlined /> },
|
||||
AMAZON: { name: 'Amazon', color: '#FF9900', icon: <AmazonOutlined /> },
|
||||
WISH: { name: 'Wish', color: '#4A90E2', icon: <ShopOutlined /> },
|
||||
EMAG: { name: 'eMAG', color: '#00B140', icon: <ShopOutlined /> },
|
||||
MIRAVIA: { name: 'Miravia', color: '#FF69B4', icon: <ShopOutlined /> },
|
||||
DARAZ: { name: 'Daraz', color: '#FF5722', icon: <ShopOutlined /> },
|
||||
JOYBUY: { name: 'Joybuy', color: '#E74C3C', icon: <ShopOutlined /> },
|
||||
ALIBABA: { name: 'Alibaba', color: '#FF6A00', icon: <ShopOutlined /> },
|
||||
QOO10: { name: 'Qoo10', color: '#FF4500', icon: <ShopOutlined /> },
|
||||
SHOPIFY: { name: 'Shopify', color: '#96BF48', icon: <ShoppingOutlined /> },
|
||||
SHOPLAZZA: { name: 'Shoplazza', color: '#3498DB', icon: <ShopOutlined /> },
|
||||
SHOPYY_V1: { name: 'SHOPYY v1.0', color: '#9370DB', icon: <ShopOutlined /> },
|
||||
SHOPYY_V2: { name: 'SHOPYY v2.0', color: '#9370DB', icon: <ShopOutlined /> },
|
||||
SHOPLINE: { name: 'SHOPLINE', color: '#27AE60', icon: <ShopOutlined /> },
|
||||
GREATBOSS: { name: 'GreatBoss', color: '#3498DB', icon: <ShopOutlined /> },
|
||||
OTHER: { name: '其他', color: '#999999', icon: <ShopOutlined /> },
|
||||
|
||||
// 原有平台
|
||||
EBAY: { name: 'eBay', color: '#E53238', icon: <ShopOutlined /> },
|
||||
};
|
||||
|
||||
// ==================== 跨平台商品接口 ====================
|
||||
@@ -631,101 +676,104 @@ const CrossPlatformManage: React.FC = () => {
|
||||
]}
|
||||
>
|
||||
{selectedProduct && (
|
||||
<Tabs defaultActiveKey="info">
|
||||
<TabPane tab="基本信息" key="info">
|
||||
<Row gutter={16}>
|
||||
<Col span={8}>
|
||||
<Image src={selectedProduct.image} style={{ width: '100%' }} />
|
||||
</Col>
|
||||
<Col span={16}>
|
||||
<Descriptions column={2}>
|
||||
<Descriptions.Item label="商品名称">{selectedProduct.name}</Descriptions.Item>
|
||||
<Descriptions.Item label="SKU">{selectedProduct.sku}</Descriptions.Item>
|
||||
<Descriptions.Item label="分类">{selectedProduct.category}</Descriptions.Item>
|
||||
<Descriptions.Item label="本地价格">${selectedProduct.basePrice.toFixed(2)}</Descriptions.Item>
|
||||
<Descriptions.Item label="本地库存">{selectedProduct.baseStock}</Descriptions.Item>
|
||||
<Descriptions.Item label="总销量">{selectedProduct.totalSales}</Descriptions.Item>
|
||||
<Descriptions.Item label="创建时间">{selectedProduct.createdAt}</Descriptions.Item>
|
||||
<Descriptions.Item label="更新时间">{selectedProduct.updatedAt}</Descriptions.Item>
|
||||
</Descriptions>
|
||||
<Divider />
|
||||
<div>
|
||||
<Text strong>商品描述：</Text>
|
||||
<p>{selectedProduct.description}</p>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</TabPane>
|
||||
<TabPane tab="店铺分布" key="shops">
|
||||
<Table
|
||||
dataSource={Object.entries(selectedProduct.platforms)}
|
||||
rowKey="[0]"
|
||||
pagination={false}
|
||||
columns={[
|
||||
{
|
||||
title: '店铺',
|
||||
render: ([shopId, info]: [string, any]) => (
|
||||
<Space>
|
||||
{PLATFORM_CONFIG[info.shopInfo.platform]?.icon}
|
||||
<span>{info.shopInfo.shopName}</span>
|
||||
<Tag>{info.shopInfo.region}</Tag>
|
||||
{!info.shopInfo.apiSupported && <Tag color="warning">No API</Tag>}
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
render: ([_, info]: [string, any]) => (
|
||||
<Tag color={STATUS_CONFIG[info.status].color}>
|
||||
{STATUS_CONFIG[info.status].text}
|
||||
</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '平台SKU',
|
||||
render: ([_, info]: [string, any]) => info.platformSku,
|
||||
},
|
||||
{
|
||||
title: '售价',
|
||||
render: ([_, info]: [string, any]) => `$${info.price.toFixed(2)}`,
|
||||
},
|
||||
{
|
||||
title: '库存',
|
||||
render: ([_, info]: [string, any]) => info.stock,
|
||||
},
|
||||
{
|
||||
title: '销量',
|
||||
render: ([_, info]: [string, any]) => info.sales,
|
||||
},
|
||||
{
|
||||
title: '最后同步',
|
||||
render: ([_, info]: [string, any]) => info.lastSync,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
render: ([shopId, info]: [string, any]) => (
|
||||
<Space>
|
||||
{info.shopInfo.apiSupported && (
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
onClick={() => handleOpenSyncModal(selectedProduct)}
|
||||
>
|
||||
同步
|
||||
</Button>
|
||||
)}
|
||||
{info.listingUrl && (
|
||||
<a href={info.listingUrl} target="_blank" rel="noopener noreferrer">
|
||||
<LinkOutlined /> 查看
|
||||
</a>
|
||||
)}
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
<Tabs
|
||||
defaultActiveKey="info"
|
||||
items={[
|
||||
{ key: 'info', label: '基本信息', children: (
|
||||
<Row gutter={16}>
|
||||
<Col span={8}>
|
||||
<Image src={selectedProduct.image} style={{ width: '100%' }} />
|
||||
</Col>
|
||||
<Col span={16}>
|
||||
<Descriptions column={2}>
|
||||
<Descriptions.Item label="商品名称">{selectedProduct.name}</Descriptions.Item>
|
||||
<Descriptions.Item label="SKU">{selectedProduct.sku}</Descriptions.Item>
|
||||
<Descriptions.Item label="分类">{selectedProduct.category}</Descriptions.Item>
|
||||
<Descriptions.Item label="本地价格">${selectedProduct.basePrice.toFixed(2)}</Descriptions.Item>
|
||||
<Descriptions.Item label="本地库存">{selectedProduct.baseStock}</Descriptions.Item>
|
||||
<Descriptions.Item label="总销量">{selectedProduct.totalSales}</Descriptions.Item>
|
||||
<Descriptions.Item label="创建时间">{selectedProduct.createdAt}</Descriptions.Item>
|
||||
<Descriptions.Item label="更新时间">{selectedProduct.updatedAt}</Descriptions.Item>
|
||||
</Descriptions>
|
||||
<Divider />
|
||||
<div>
|
||||
<Text strong>商品描述：</Text>
|
||||
<p>{selectedProduct.description}</p>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
)},
|
||||
{ key: 'shops', label: '店铺分布', children: (
|
||||
<Table
|
||||
dataSource={Object.entries(selectedProduct.platforms)}
|
||||
rowKey="[0]"
|
||||
pagination={false}
|
||||
columns={[
|
||||
{
|
||||
title: '店铺',
|
||||
render: ([shopId, info]: [string, any]) => (
|
||||
<Space>
|
||||
{PLATFORM_CONFIG[info.shopInfo.platform]?.icon}
|
||||
<span>{info.shopInfo.shopName}</span>
|
||||
<Tag>{info.shopInfo.region}</Tag>
|
||||
{!info.shopInfo.apiSupported && <Tag color="warning">No API</Tag>}
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
render: ([_, info]: [string, any]) => (
|
||||
<Tag color={STATUS_CONFIG[info.status].color}>
|
||||
{STATUS_CONFIG[info.status].text}
|
||||
</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '平台SKU',
|
||||
render: ([_, info]: [string, any]) => info.platformSku,
|
||||
},
|
||||
{
|
||||
title: '售价',
|
||||
render: ([_, info]: [string, any]) => `$${info.price.toFixed(2)}`,
|
||||
},
|
||||
{
|
||||
title: '库存',
|
||||
render: ([_, info]: [string, any]) => info.stock,
|
||||
},
|
||||
{
|
||||
title: '销量',
|
||||
render: ([_, info]: [string, any]) => info.sales,
|
||||
},
|
||||
{
|
||||
title: '最后同步',
|
||||
render: ([_, info]: [string, any]) => info.lastSync,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
render: ([shopId, info]: [string, any]) => (
|
||||
<Space>
|
||||
{info.shopInfo.apiSupported && (
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
onClick={() => handleOpenSyncModal(selectedProduct)}
|
||||
>
|
||||
同步
|
||||
</Button>
|
||||
)}
|
||||
{info.listingUrl && (
|
||||
<a href={info.listingUrl} target="_blank" rel="noopener noreferrer">
|
||||
<LinkOutlined /> 查看
|
||||
</a>
|
||||
)}
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
)},
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
</Modal>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user