makemd/dashboard/src/pages/Product/ProductList.tsx

import {
  useState,
  useEffect,
  useCallback,
  useMemo,
  useNavigate,
  FC,
  Card,
  Table,
  Button,
  Space,
  Tag,
  Input,
  InputNumber,
  Select,
  Row,
  Col,
  Modal,
  message,
  Tooltip,
  Badge,
  Dropdown,
  Menu,
  Image,
  Typography,
  DatePicker,
  Form,
  Drawer,
  Alert,
  Spin,
  Tabs,
  Statistic,
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  SyncOutlined,
  UploadOutlined,
  FilterOutlined,
  SortAscendingOutlined,
  SortDescendingOutlined,
  MoreOutlined,
  EyeOutlined,
  CopyOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
  DollarOutlined,
  ShoppingOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined,
  ExclamationCircleOutlined,
  AmazonOutlined,
  GlobalOutlined,
  ShopOutlined,
  AppstoreOutlined,
  Title,
  Text,
  Option,
  RangePicker,
  Search,
  ColumnsType,
  TablePaginationConfig,
  FilterValue,
  SorterResult,
  TableCurrentDataSource,
  moment,
  productDataSource,
  Product,
  Shop,
  ProductFilter,
  ProductSort,
  PLATFORMS,
} from '@/imports';
import { LoadingState, EmptyState } from '../../components/ui';

const CATEGORIES = ['工业自动化', '电子元器件', '工具设备', '仪器仪表', '安防设备'];

const STATUS_CONFIG: Record<string, { color: string; text: string; icon: React.ReactNode }> = {
  DRAFT: { color: 'default', text: '草稿', icon: <EditOutlined /> },
  PRICED: { color: 'processing', text: '已定价', icon: <DollarOutlined /> },
  LISTED: { color: 'warning', text: '已上架', icon: <ShoppingOutlined /> },
  SYNCING: { color: 'processing', text: '同步中', icon: <SyncOutlined spin /> },
  LIVE: { color: 'success', text: '已在线', icon: <CheckCircleOutlined /> },
  SYNC_FAILED: { color: 'error', text: '同步失败', icon: <CloseCircleOutlined /> },
  OFFLINE: { color: 'default', text: '已下架', icon: <ExclamationCircleOutlined /> },
};

const PLATFORM_CONFIG: Record<string, { icon: React.ReactNode; color: string }> = {
  // TikTok系列
  TikTok: { icon: <GlobalOutlined />, color: '#000000' },
  TikTokFull: { icon: <GlobalOutlined />, color: '#000000' },
  
  // Shopee系列
  Shopee: { icon: <ShopOutlined />, color: '#ee4d2d' },
  ShopeeFull: { icon: <ShopOutlined />, color: '#ee4d2d' },
  ShopeeLight: { icon: <ShopOutlined />, color: '#ee4d2d' },
  
  // Lazada系列
  Lazada: { icon: <ShopOutlined />, color: '#0F156D' },
  LazadaFull: { icon: <ShopOutlined />, color: '#0F156D' },
  
  // Temu
  TemuFull: { icon: <ShopOutlined />, color: '#96bf48' },
  
  // SHEIN系列
  Shein: { icon: <ShopOutlined />, color: '#FF6B6B' },
  SheinHalf: { icon: <ShopOutlined />, color: '#FF6B6B' },
  
  // 其他平台
  Ozon: { icon: <ShopOutlined />, color: '#FFD700' },
  Yandex: { icon: <ShopOutlined />, color: '#FF0000' },
  AliExpress: { icon: <ShopOutlined />, color: '#FF6A00' },
  AliExpressHalf: { icon: <ShopOutlined />, color: '#FF6A00' },
  AliExpressPop: { icon: <ShopOutlined />, color: '#FF6A00' },
  Coupang: { icon: <ShopOutlined />, color: '#FF3B30' },
  Walmart: { icon: <ShopOutlined />, color: '#007DC6' },
  Wildberries: { icon: <ShopOutlined />, color: '#9370DB' },
  Allegro: { icon: <ShopOutlined />, color: '#00A870' },
  MercadoLibre: { icon: <ShopOutlined />, color: '#6C3483' },
  Jumia: { icon: <ShopOutlined />, color: '#FF6B00' },
  Joom: { icon: <ShopOutlined />, color: '#8A2BE2' },
  Amazon: { icon: <AmazonOutlined />, color: '#ff9900' },
  Wish: { icon: <ShopOutlined />, color: '#4A90E2' },
  Emag: { icon: <ShopOutlined />, color: '#00B140' },
  Miravia: { icon: <ShopOutlined />, color: '#FF69B4' },
  Daraz: { icon: <ShopOutlined />, color: '#FF5722' },
  Joybuy: { icon: <ShopOutlined />, color: '#E74C3C' },
  Alibaba: { icon: <ShopOutlined />, color: '#FF6A00' },
  Qoo10: { icon: <ShopOutlined />, color: '#FF4500' },
  Shopify: { icon: <ShopOutlined />, color: '#96bf48' },
  Shoplazza: { icon: <ShopOutlined />, color: '#3498DB' },
  ShopyyV1: { icon: <ShopOutlined />, color: '#9370DB' },
  ShopyyV2: { icon: <ShopOutlined />, color: '#9370DB' },
  Shopline: { icon: <ShopOutlined />, color: '#27AE60' },
  GreatBoss: { icon: <ShopOutlined />, color: '#3498DB' },
  Other: { icon: <ShopOutlined />, color: '#999999' },
  
  // 原有平台
  eBay: { icon: <GlobalOutlined />, color: '#e53238' },
};

const ProductList: FC = () => {
  const navigate = useNavigate();
  const [products, setProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState(false);
  const [selectedRows, setSelectedRows] = useState<Product[]>([]);
  const [filterVisible, setFilterVisible] = useState(false);
  const [sortDrawerVisible, setSortDrawerVisible] = useState(false);
  const [pricingModalVisible, setPricingModalVisible] = useState(false);
  const [columnDrawerVisible, setColumnDrawerVisible] = useState(false);
  const [currentProduct, setCurrentProduct] = useState<Product | null>(null);
  const [syncLoading, setSyncLoading] = useState<Record<string, boolean>>({});
  const [activePlatformTab, setActivePlatformTab] = useState<string>('all');
  const [shops, setShops] = useState<Shop[]>([]);
  const [platformStats, setPlatformStats] = useState<Record<string, { total: number; live: number; pending: number; failed: number }>>({
    all: { total: 0, live: 0, pending: 0, failed: 0 },
    unpublished: { total: 0, live: 0, pending: 0, failed: 0 },
  });
  
  const [filters, setFilters] = useState<ProductFilter>({
    keyword: '',
    status: [],
    platform: [],
    shop: [],
    category: [],
    priceRange: undefined,
    stockRange: undefined,
    roiRange: undefined,
    dateRange: undefined,
    minProfit: undefined,
    minStock: undefined,
    searchInDescription: false,
  });
  
  const [sort, setSort] = useState<ProductSort>({
    field: 'updatedAt',
    order: 'descend',
  });
  
  const [visibleColumns, setVisibleColumns] = useState<string[]>([
    'name', 'price', 'costPrice', 'profit', 'roi', 'stock', 'status', 'platformStatus', 'updatedAt', 'action'
  ]);
  const [columnOrder, setColumnOrder] = useState<string[]>([
    'name', 'price', 'costPrice', 'profit', 'roi', 'stock', 'status', 'platformStatus', 'updatedAt', 'action'
  ]);

  useEffect(() => {
    fetchInitialData();
  }, []);

  useEffect(() => {
    fetchProducts();
  }, [filters, sort, activePlatformTab]);

  const fetchInitialData = async () => {
    try {
      const [shopsData, stats] = await Promise.all([
        productDataSource.fetchShops(),
        productDataSource.getPlatformStats()
      ]);
      setShops(shopsData);
      setPlatformStats(stats);
    } catch (error) {
      console.error('Failed to fetch initial data:', error);
    }
  };

  const fetchProducts = useCallback(async () => {
    setLoading(true);
    try {
      const productFilter: ProductFilter = {
        ...filters,
        platform: activePlatformTab !== 'all' && activePlatformTab !== 'unpublished' 
          ? [activePlatformTab] 
          : filters.platform
      };
      
      const productsData = await productDataSource.fetchProducts(productFilter, sort);
      setProducts(productsData);
      
      // 更新平台统计数据
      const stats = await productDataSource.getPlatformStats();
      setPlatformStats(stats);
    } catch (error) {
      console.error('Failed to fetch products:', error);
      message.error('Failed to load products');
    } finally {
      setLoading(false);
    }
  }, [filters, sort, activePlatformTab]);

  const handleFilterChange = (key: keyof ProductFilter, value: any) => {
    setFilters(prev => ({ ...prev, [key]: value }));
  };

  const handleSortChange = (field: string, order: 'ascend' | 'descend') => {
    setSort({ field, order });
    setSortDrawerVisible(false);
    message.success(`已按 ${field} ${order === 'ascend' ? '升序' : '降序'} 排序`);
  };

  const handleTableChange = (
    pagination: TablePaginationConfig,
    filters: Record<string, FilterValue | null>,
    sorter: SorterResult<Product> | SorterResult<Product>[],
    extra: TableCurrentDataSource<Product>
  ) => {
    if (!Array.isArray(sorter) && sorter.field) {
      setSort({
        field: sorter.field as string,
        order: sorter.order || null,
      });
    }
  };

  const handleSearch = (value: string) => {
    handleFilterChange('keyword', value);
  };

  const handleResetFilters = () => {
    setFilters({
      keyword: '',
      status: [],
      platform: [],
      shop: [],
      category: [],
      priceRange: undefined,
      stockRange: undefined,
      roiRange: undefined,
      dateRange: undefined,
      minProfit: undefined,
      minStock: undefined,
      searchInDescription: false,
    });
    message.success('筛选条件已重置');
  };

  const handleColumnVisibilityChange = (columnKey: string, visible: boolean) => {
    if (visible) {
      setVisibleColumns([...visibleColumns, columnKey]);
    } else {
      setVisibleColumns(visibleColumns.filter(key => key !== columnKey));
    }
  };

  const handleColumnOrderChange = (newOrder: string[]) => {
    setColumnOrder(newOrder);
  };

  const handleAddProduct = () => {
    navigate('/dashboard/product/publish');
  };

  const handleEditProduct = (record: Product) => {
    navigate(`/dashboard/product/detail/${record.id}`);
  };

  const handleViewProduct = (record: Product) => {
    navigate(`/dashboard/product/detail/${record.id}`);
  };

  const handleDeleteProduct = async (record: Product) => {
    Modal.confirm({
      title: '确认删除',
      content: `确定要删除商品 "${record.name}" 吗？此操作不可恢复。`,
      okText: '删除',
      okType: 'danger',
      onOk: async () => {
        try {
          const success = await productDataSource.deleteProduct(record.id);
          if (success) {
            message.success('商品删除成功');
            fetchProducts();
          } else {
            message.error('删除失败');
          }
        } catch (error) {
          message.error('删除失败');
        }
      },
    });
  };

  const handleDuplicateProduct = async (record: Product) => {
    try {
      await productDataSource.duplicateProduct(record.id);
      message.success('商品复制成功');
      fetchProducts();
    } catch (error) {
      message.error('复制失败');
    }
  };

  const handlePricing = (record: Product) => {
    setCurrentProduct(record);
    setPricingModalVisible(true);
  };

  const handlePublish = async (record: Product) => {
    Modal.confirm({
      title: '确认上架',
      content: `确定要上架商品 "${record.name}" 吗？`,
      onOk: async () => {
        try {
          await productDataSource.updateProductStatus(record.id, 'LISTED');
          message.success('商品上架成功');
          fetchProducts();
        } catch (error) {
          message.error('上架失败');
        }
      },
    });
  };

  const handleSync = async (record: Product) => {
    setSyncLoading(prev => ({ ...prev, [record.id]: true }));
    
    message.loading({ content: '正在同步到平台...', key: record.id });
    
    try {
      await productDataSource.syncProduct(record.id);
      message.success({ content: '同步完成', key: record.id });
      fetchProducts();
    } catch (error) {
      message.error({ content: '同步失败，请重试', key: record.id });
    } finally {
      setSyncLoading(prev => ({ ...prev, [record.id]: false }));
    }
  };

  const handleOffline = async (record: Product) => {
    Modal.confirm({
      title: '确认下架',
      content: `确定要下架商品 "${record.name}" 吗？`,
      onOk: async () => {
        try {
          await productDataSource.updateProductStatus(record.id, 'OFFLINE');
          message.success('商品已下架');
          fetchProducts();
        } catch (error) {
          message.error('下架失败');
        }
      },
    });
  };

  const handleRetrySync = (record: Product) => {
    handleSync(record);
  };

  const handleBatchDelete = () => {
    if (selectedRows.length === 0) {
      message.warning('请先选择要删除的商品');
      return;
    }
    Modal.confirm({
      title: '确认批量删除',
      content: `确定要删除选中的 ${selectedRows.length} 个商品吗？`,
      okText: '删除',
      okType: 'danger',
      onOk: async () => {
        try {
          const promises = selectedRows.map(r => productDataSource.deleteProduct(r.id));
          await Promise.all(promises);
          message.success(`成功删除 ${selectedRows.length} 个商品`);
          setSelectedRows([]);
          fetchProducts();
        } catch (error) {
          message.error('批量删除失败');
        }
      },
    });
  };

  const handleBatchPricing = () => {
    if (selectedRows.length === 0) {
      message.warning('请先选择要定价的商品');
      return;
    }
    message.info(`批量定价功能：已选择 ${selectedRows.length} 个商品`);
  };

  const handleBatchPublish = async () => {
    if (selectedRows.length === 0) {
      message.warning('请先选择要上架的商品');
      return;
    }
    const pricedProducts = selectedRows.filter(p => p.status === 'PRICED');
    if (pricedProducts.length === 0) {
      message.warning('选中的商品中没有已定价的商品');
      return;
    }
    Modal.confirm({
      title: '确认批量上架',
      content: `确定要上架选中的 ${pricedProducts.length} 个商品吗？`,
      onOk: async () => {
        try {
          const promises = pricedProducts.map(p => productDataSource.updateProductStatus(p.id, 'LISTED'));
          await Promise.all(promises);
          message.success(`成功上架 ${pricedProducts.length} 个商品`);
          setSelectedRows([]);
          fetchProducts();
        } catch (error) {
          message.error('批量上架失败');
        }
      },
    });
  };

  const handleBatchSync = async () => {
    if (selectedRows.length === 0) {
      message.warning('请先选择要同步的商品');
      return;
    }
    const listableProducts = selectedRows.filter(p => p.status === 'LISTED' || p.status === 'LIVE');
    if (listableProducts.length === 0) {
      message.warning('选中的商品中没有可同步的商品');
      return;
    }
    message.loading('正在批量同步...');
    try {
      const promises = listableProducts.map(p => productDataSource.syncProduct(p.id));
      await Promise.all(promises);
      message.success('批量同步完成');
      setSelectedRows([]);
      fetchProducts();
    } catch (error) {
      message.error('批量同步失败');
    }
  };

  const handleBatchUpdate = () => {
    if (selectedRows.length === 0) {
      message.warning('请先选择要更新的商品');
      return;
    }
    message.info(`批量更新功能：已选择 ${selectedRows.length} 个商品`);
    // 这里可以打开批量更新模态框，实现批量更新商品信息
  };

  const handleBatchExport = () => {
    if (selectedRows.length === 0) {
      message.warning('请先选择要导出的商品');
      return;
    }
    message.success(`成功导出 ${selectedRows.length} 个商品数据`);
    // 这里可以实现导出商品数据为Excel或CSV文件
  };

  const sortedProducts = products;

  const allColumns: ColumnsType<Product> = [
    {
      title: '商品信息',
      dataIndex: 'name',
      key: 'name',
      render: (text, record) => (
        <Space>
          <Image src={record.image} width={60} height={60} style={{ objectFit: 'cover' }} />
          <div>
            <div style={{ fontWeight: 500 }}>{text}</div>
            <div style={{ fontSize: 12, color: '#999' }}>SKU: {record.sku}</div>
            <div style={{ fontSize: 12, color: '#666' }}>{record.category}</div>
          </div>
        </Space>
      ),
      sorter: true,
    },
    {
      title: '售价',
      dataIndex: 'price',
      key: 'price',
      render: (value) => <Text strong>${value.toFixed(2)}</Text>,
      sorter: true,
    },
    {
      title: '成本',
      dataIndex: 'costPrice',
      key: 'costPrice',
      render: (value) => <Text type="secondary">${value.toFixed(2)}</Text>,
      sorter: true,
    },
    {
      title: '利润',
      dataIndex: 'profit',
      key: 'profit',
      render: (value) => <Text type="success">${value.toFixed(2)}</Text>,
      sorter: true,
    },
    {
      title: 'ROI',
      dataIndex: 'roi',
      key: 'roi',
      render: (value) => <Tag color="green">{value.toFixed(2)}%</Tag>,
      sorter: true,
    },
    {
      title: '库存',
      dataIndex: 'stock',
      key: 'stock',
      render: (value) => (
        <Badge 
          count={value} 
          style={{ backgroundColor: value > 50 ? '#52c41a' : value > 0 ? '#faad14' : '#ff4d4f' }}
        />
      ),
      sorter: true,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status) => {
        const config = STATUS_CONFIG[status];
        return (
          <Tag color={config.color} icon={config.icon}>
            {config.text}
          </Tag>
        );
      },
      filters: Object.entries(STATUS_CONFIG).map(([key, config]) => ({
        text: config.text,
        value: key,
      })),
    },
    {
      title: '平台状态',
      key: 'platformStatus',
      render: (_, record) => (
        <Space size="small">
          {Object.entries(record.platformStatus).map(([platform, status]) => (
            <Tooltip key={platform} title={`${platform}: ${status}`}>
              <Tag 
                color={status === 'LIVE' ? 'success' : status === 'FAILED' ? 'error' : 'processing'}
              >
                {platform.charAt(0)}
              </Tag>
            </Tooltip>
          ))}
        </Space>
      ),
    },
    {
      title: '更新时间',
      dataIndex: 'updatedAt',
      key: 'updatedAt',
      sorter: true,
    },
    {
      title: '操作',
      key: 'action',
      fixed: 'right',
      width: 200,
      render: (_, record) => {
        const menu = (
          <Menu>
            <Menu.Item key="view" icon={<EyeOutlined />} onClick={() => handleViewProduct(record)}>
              查看详情
            </Menu.Item>
            <Menu.Item key="edit" icon={<EditOutlined />} onClick={() => handleEditProduct(record)}>
              编辑
            </Menu.Item>
            <Menu.Item key="duplicate" icon={<CopyOutlined />} onClick={() => handleDuplicateProduct(record)}>
              复制
            </Menu.Item>
            <Menu.Item key="pricing" icon={<DollarOutlined />} onClick={() => handlePricing(record)}>
              定价
            </Menu.Item>
            {record.status === 'PRICED' && (
              <Menu.Item key="publish" icon={<ShoppingOutlined />} onClick={() => handlePublish(record)}>
                上架
              </Menu.Item>
            )}
            {(record.status === 'LISTED' || record.status === 'LIVE') && (
              <Menu.Item 
                key="sync" 
                icon={<SyncOutlined spin={syncLoading[record.id]} />} 
                onClick={() => handleSync(record)}
                disabled={syncLoading[record.id]}
              >
                同步到平台
              </Menu.Item>
            )}
            {record.status === 'SYNC_FAILED' && (
              <Menu.Item key="retry" icon={<SyncOutlined />} onClick={() => handleRetrySync(record)}>
                重试同步
              </Menu.Item>
            )}
            {(record.status === 'LISTED' || record.status === 'LIVE') && (
              <Menu.Item key="offline" icon={<CloseCircleOutlined />} onClick={() => handleOffline(record)}>
                下架
              </Menu.Item>
            )}
            <Menu.Divider />
            <Menu.Item key="delete" icon={<DeleteOutlined />} danger onClick={() => handleDeleteProduct(record)}>
              删除
            </Menu.Item>
          </Menu>
        );

        return (
          <Space>
            <Button type="link" size="small" onClick={() => handleViewProduct(record)}>
              查看
            </Button>
            <Button type="link" size="small" onClick={() => handleEditProduct(record)}>
              编辑
            </Button>
            <Dropdown overlay={menu} placement="bottomRight">
              <Button type="link" size="small" icon={<MoreOutlined />}>
                更多
              </Button>
            </Dropdown>
          </Space>
        );
      },
    },
  ];

  const columns = columnOrder
    .filter(key => visibleColumns.includes(key))
    .map(key => allColumns.find(col => col.key === key))
    .filter(Boolean) as ColumnsType<Product>;

  const rowSelection = {
    selectedRowKeys: selectedRows.map(r => r.id),
    onChange: (selectedRowKeys: React.Key[], selectedRows: Product[]) => {
      setSelectedRows(selectedRows);
    },
  };

  return (
    <Card>
      <Alert
        message="商品管理流程说明"
        description={
          <div>
            <p>1. 新建商品：先保存到本地系统（草稿状态）</p>
            <p>2. 定价上架：完成定价后上架到本地（已上架状态）</p>
            <p>3. 平台同步：手动或自动同步到各销售平台（同步中 → 已在线）</p>
            <p>所有商品数据以本地系统为准，平台数据通过同步机制保持一致</p>
          </div>
        }
        type="info"
        showIcon
        style={{ marginBottom: 16 }}
      />
      
      <Tabs 
        activeKey={activePlatformTab} 
        onChange={setActivePlatformTab}
        tabBarExtraContent={
          <Space>
            <Button icon={<FilterOutlined />} onClick={() => setFilterVisible(true)}>
              筛选
            </Button>
            <Button icon={<SortAscendingOutlined />} onClick={() => setSortDrawerVisible(true)}>
              排序
            </Button>
            <Button icon={<AppstoreOutlined />} onClick={() => setColumnDrawerVisible(true)}>
              列设置
            </Button>
            <Button type="primary" icon={<PlusOutlined />} onClick={handleAddProduct}>
              新增商品
            </Button>
          </Space>
        }
      >
        <Tabs.TabPane
          tab={
            <span>
              <AppstoreOutlined />
              全部 ({platformStats.all?.total || 0})
            </span>
          }
          key="all"
        />
        {PLATFORMS.map(platform => {
          const config = PLATFORM_CONFIG[platform];
          const stat = platformStats[platform] || { total: 0, live: 0, pending: 0, failed: 0 };
          return (
            <Tabs.TabPane
              tab={
                <span>
                  {config.icon}
                  {platform} ({stat.total})
                  {stat.failed > 0 && (
                    <Badge count={stat.failed} size="small" style={{ marginLeft: 4 }} />
                  )}
                </span>
              }
              key={platform}
            />
          );
        })}
        <Tabs.TabPane
          tab={
            <span>
              <ExclamationCircleOutlined />
              未发布 ({platformStats.unpublished?.total || 0})
            </span>
          }
          key="unpublished"
        />
      </Tabs>
      
      {activePlatformTab !== 'all' && activePlatformTab !== 'unpublished' && (
        <Row gutter={16} style={{ marginBottom: 16 }}>
          <Col span={6}>
            <Card size="small">
              <Statistic 
                title="已在线" 
                value={platformStats[activePlatformTab]?.live || 0} 
                valueStyle={{ color: '#52c41a' }}
                prefix={<CheckCircleOutlined />}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card size="small">
              <Statistic 
                title="处理中" 
                value={platformStats[activePlatformTab]?.pending || 0} 
                valueStyle={{ color: '#1890ff' }}
                prefix={<SyncOutlined spin />}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card size="small">
              <Statistic 
                title="同步失败" 
                value={platformStats[activePlatformTab]?.failed || 0} 
                valueStyle={{ color: '#ff4d4f' }}
                prefix={<CloseCircleOutlined />}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card size="small">
              <Statistic 
                title="总计" 
                value={platformStats[activePlatformTab]?.total || 0} 
                prefix={<ShoppingOutlined />}
              />
            </Card>
          </Col>
        </Row>
      )}
      
      <Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
        <Col span={24}>
          <Space style={{ display: 'flex', justifyContent: 'space-between' }}>
            <Space>
              <Title level={4} style={{ margin: 0 }}>
                {activePlatformTab === 'all' ? '全部商品' : 
                 activePlatformTab === 'unpublished' ? '未发布商品' : 
                 `${activePlatformTab} 商品`}
              </Title>
              <Badge count={sortedProducts.length} showZero style={{ backgroundColor: '#1890ff' }} />
            </Space>
          </Space>
        </Col>
        <Col span={24}>
          <Search
            placeholder="搜索商品名称或SKU"
            allowClear
            enterButton
            onSearch={handleSearch}
            style={{ maxWidth: 400 }}
          />
        </Col>
      </Row>

      {selectedRows.length > 0 && (
        <Alert
          message={`已选择 ${selectedRows.length} 项`}
          type="info"
          showIcon
          action={
            <Space>
              <Button size="small" onClick={handleBatchPricing}>
                批量定价
              </Button>
              <Button size="small" onClick={handleBatchPublish}>
                批量上架
              </Button>
              <Button size="small" onClick={handleBatchSync}>
                批量同步
              </Button>
              <Button size="small" onClick={handleBatchUpdate}>
                批量更新
              </Button>
              <Button size="small" onClick={handleBatchExport}>
                导出
              </Button>
              <Button size="small" danger onClick={handleBatchDelete}>
                批量删除
              </Button>
            </Space>
          }
          style={{ marginBottom: 16 }}
        />
      )}

      {loading ? (
        <LoadingState tip="正在加载商品数据..." />
      ) : sortedProducts.length === 0 ? (
        <EmptyState
          title="暂无商品"
          description="您还没有添加任何商品，点击下方按钮添加新商品"
          showAddButton={true}
          onAdd={handleAddProduct}
          showReloadButton={true}
          onReload={fetchProducts}
        />
      ) : (
        <Table
          rowSelection={rowSelection}
          columns={columns}
          dataSource={sortedProducts}
          rowKey="id"
          onChange={handleTableChange}
          scroll={{ x: 1200 }}
          pagination={{
            total: sortedProducts.length,
            pageSize: 10,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total) => `共 ${total} 条`,
          }}
        />
      )}

      <Drawer
        title="筛选条件"
        placement="right"
        onClose={() => setFilterVisible(false)}
        open={filterVisible}
        width={400}
      >
        <Form layout="vertical">
          <Form.Item label="商品状态">
            <Select
              mode="multiple"
              placeholder="选择状态"
              value={filters.status}
              onChange={(value) => handleFilterChange('status', value)}
              style={{ width: '100%' }}
            >
              {Object.entries(STATUS_CONFIG).map(([key, config]) => (
                <Option key={key} value={key}>{config.text}</Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item label="商品类目">
            <Select
              mode="multiple"
              placeholder="选择类目"
              value={filters.category}
              onChange={(value) => handleFilterChange('category', value)}
              style={{ width: '100%' }}
            >
              {CATEGORIES.map(cat => (
                <Option key={cat} value={cat}>{cat}</Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item label="店铺">
            <Select
              mode="multiple"
              placeholder="选择店铺"
              value={filters.shop}
              onChange={(value) => handleFilterChange('shop', value)}
              style={{ width: '100%' }}
            >
              {shops.map(shop => (
                <Option key={shop.id} value={shop.id}>
                  {shop.name} ({shop.platform})
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item label="平台">
            <Select
              mode="multiple"
              placeholder="选择平台"
              value={filters.platform}
              onChange={(value) => handleFilterChange('platform', value)}
              style={{ width: '100%' }}
            >
              {PLATFORMS.map(platform => (
                <Option key={platform} value={platform}>{platform}</Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item label="价格范围">
            <Row gutter={8}>
              <Col span={11}>
                <InputNumber
                  min={0}
                  placeholder="最小"
                  value={filters.priceRange?.[0] || undefined}
                  onChange={(value) => {
                    handleFilterChange('priceRange', filters.priceRange ? [value || 0, filters.priceRange[1]] : [value || 0, 999999]);
                  }}
                  style={{ width: '100%' }}
                />
              </Col>
              <Col span={2} style={{ textAlign: 'center' }}>-
              </Col>
              <Col span={11}>
                <InputNumber
                  min={0}
                  placeholder="最大"
                  value={filters.priceRange?.[1] || undefined}
                  onChange={(value) => {
                    handleFilterChange('priceRange', filters.priceRange ? [filters.priceRange[0], value || 999999] : [0, value || 999999]);
                  }}
                  style={{ width: '100%' }}
                />
              </Col>
            </Row>
          </Form.Item>
          <Form.Item label="库存范围">
            <Row gutter={8}>
              <Col span={11}>
                <InputNumber
                  min={0}
                  placeholder="最小"
                  value={filters.stockRange?.[0] || undefined}
                  onChange={(value) => {
                    handleFilterChange('stockRange', filters.stockRange ? [value || 0, filters.stockRange[1]] : [value || 0, 999999]);
                  }}
                  style={{ width: '100%' }}
                />
              </Col>
              <Col span={2} style={{ textAlign: 'center' }}>-
              </Col>
              <Col span={11}>
                <InputNumber
                  min={0}
                  placeholder="最大"
                  value={filters.stockRange?.[1] || undefined}
                  onChange={(value) => {
                    handleFilterChange('stockRange', filters.stockRange ? [filters.stockRange[0], value || 999999] : [0, value || 999999]);
                  }}
                  style={{ width: '100%' }}
                />
              </Col>
            </Row>
          </Form.Item>
          <Form.Item label="ROI范围">
            <Row gutter={8}>
              <Col span={11}>
                <InputNumber
                  min={0}
                  placeholder="最小"
                  value={filters.roiRange?.[0] || undefined}
                  onChange={(value) => {
                    handleFilterChange('roiRange', filters.roiRange ? [value || 0, filters.roiRange[1]] : [value || 0, 999999]);
                  }}
                  style={{ width: '100%' }}
                />
              </Col>
              <Col span={2} style={{ textAlign: 'center' }}>-
              </Col>
              <Col span={11}>
                <InputNumber
                  min={0}
                  placeholder="最大"
                  value={filters.roiRange?.[1] || undefined}
                  onChange={(value) => {
                    handleFilterChange('roiRange', filters.roiRange ? [filters.roiRange[0], value || 999999] : [0, value || 999999]);
                  }}
                  style={{ width: '100%' }}
                />
              </Col>
            </Row>
          </Form.Item>
          <Form.Item label="最小利润">
            <InputNumber
              min={0}
              placeholder="输入最小利润"
              value={filters.minProfit}
              onChange={(value) => handleFilterChange('minProfit', value)}
              style={{ width: '100%' }}
            />
          </Form.Item>
          <Form.Item label="最小库存">
            <InputNumber
              min={0}
              placeholder="输入最小库存"
              value={filters.minStock}
              onChange={(value) => handleFilterChange('minStock', value)}
              style={{ width: '100%' }}
            />
          </Form.Item>
          <Form.Item label="更新时间">
            <RangePicker
              value={filters.dateRange}
              onChange={(dates) => handleFilterChange('dateRange', dates)}
              style={{ width: '100%' }}
            />
          </Form.Item>
          <Form.Item>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <input
                type="checkbox"
                checked={filters.searchInDescription}
                onChange={(e) => handleFilterChange('searchInDescription', e.target.checked)}
                style={{ marginRight: 8 }}
              />
              <label>在描述中搜索</label>
            </div>
          </Form.Item>
        </Form>
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: 16, borderTop: '1px solid #f0f0f0', background: '#fff' }}>
          <Space style={{ display: 'flex', justifyContent: 'flex-end' }}>
            <Button onClick={handleResetFilters}>重置</Button>
            <Button type="primary" onClick={() => setFilterVisible(false)}>确定</Button>
          </Space>
        </div>
      </Drawer>

      <Drawer
        title="排序设置"
        placement="right"
        onClose={() => setSortDrawerVisible(false)}
        open={sortDrawerVisible}
        width={300}
      >
        <Space direction="vertical" style={{ width: '100%' }}>
          {[
            { key: 'name', label: '商品名称' },
            { key: 'price', label: '售价' },
            { key: 'profit', label: '利润' },
            { key: 'roi', label: 'ROI' },
            { key: 'stock', label: '库存' },
            { key: 'updatedAt', label: '更新时间' },
          ].map(item => (
            <Card key={item.key} size="small" hoverable>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span>{item.label}</span>
                <Space>
                  <Button 
                    icon={<ArrowUpOutlined />}
                    type={sort.field === item.key && sort.order === 'ascend' ? 'primary' : 'default'}
                    onClick={() => handleSortChange(item.key, 'ascend')}
                  >
                    升序
                  </Button>
                  <Button 
                    icon={<ArrowDownOutlined />}
                    type={sort.field === item.key && sort.order === 'descend' ? 'primary' : 'default'}
                    onClick={() => handleSortChange(item.key, 'descend')}
                  >
                    降序
                  </Button>
                </Space>
              </div>
            </Card>
          ))}
        </Space>
      </Drawer>

      <Drawer
        title="列设置"
        placement="right"
        onClose={() => setColumnDrawerVisible(false)}
        open={columnDrawerVisible}
        width={400}
      >
        <div style={{ marginBottom: 20 }}>
          <h3>显示列</h3>
        </div>
        <Space direction="vertical" style={{ width: '100%', marginBottom: 20 }}>
          {
            [
              { key: 'name', label: '商品信息' },
              { key: 'price', label: '售价' },
              { key: 'costPrice', label: '成本' },
              { key: 'profit', label: '利润' },
              { key: 'roi', label: 'ROI' },
              { key: 'stock', label: '库存' },
              { key: 'status', label: '状态' },
              { key: 'platformStatus', label: '平台状态' },
              { key: 'updatedAt', label: '更新时间' },
              { key: 'action', label: '操作' },
            ].map(item => (
              <div key={item.key} style={{ display: 'flex', alignItems: 'center', marginBottom: 12 }}>
                <input
                  type="checkbox"
                  checked={visibleColumns.includes(item.key)}
                  onChange={(e) => handleColumnVisibilityChange(item.key, e.target.checked)}
                  style={{ marginRight: 12 }}
                />
                <span>{item.label}</span>
              </div>
            ))
          }
        </Space>
        <div style={{ marginBottom: 20 }}>
          <h3>列顺序</h3>
          <p style={{ color: '#999', fontSize: 12 }}>拖拽调整列的显示顺序</p>
        </div>
        <div style={{ border: '1px dashed #d9d9d9', borderRadius: 4, padding: 16, minHeight: 200 }}>
          {columnOrder.map(key => {
            const columnInfo = [
              { key: 'name', label: '商品信息' },
              { key: 'price', label: '售价' },
              { key: 'costPrice', label: '成本' },
              { key: 'profit', label: '利润' },
              { key: 'roi', label: 'ROI' },
              { key: 'stock', label: '库存' },
              { key: 'status', label: '状态' },
              { key: 'platformStatus', label: '平台状态' },
              { key: 'updatedAt', label: '更新时间' },
              { key: 'action', label: '操作' },
            ].find(item => item.key === key);
            return (
              <div key={key} style={{ 
                padding: 8, 
                marginBottom: 8, 
                backgroundColor: '#f0f2f5', 
                borderRadius: 4, 
                cursor: 'move',
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center'
              }}>
                <span>{columnInfo?.label}</span>
                <Space size="small">
                  <Button 
                    size="small" 
                    icon={<ArrowUpOutlined />}
                    onClick={() => {
                      const currentIndex = columnOrder.indexOf(key);
                      if (currentIndex > 0) {
                        const newOrder = [...columnOrder];
                        [newOrder[currentIndex], newOrder[currentIndex - 1]] = [newOrder[currentIndex - 1], newOrder[currentIndex]];
                        handleColumnOrderChange(newOrder);
                      }
                    }}
                  />
                  <Button 
                    size="small" 
                    icon={<ArrowDownOutlined />}
                    onClick={() => {
                      const currentIndex = columnOrder.indexOf(key);
                      if (currentIndex < columnOrder.length - 1) {
                        const newOrder = [...columnOrder];
                        [newOrder[currentIndex], newOrder[currentIndex + 1]] = [newOrder[currentIndex + 1], newOrder[currentIndex]];
                        handleColumnOrderChange(newOrder);
                      }
                    }}
                  />
                </Space>
              </div>
            );
          })}
        </div>
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: 16, borderTop: '1px solid #f0f0f0', background: '#fff' }}>
          <Space style={{ display: 'flex', justifyContent: 'flex-end' }}>
            <Button onClick={() => {
              setVisibleColumns(['name', 'price', 'costPrice', 'profit', 'roi', 'stock', 'status', 'platformStatus', 'updatedAt', 'action']);
              setColumnOrder(['name', 'price', 'costPrice', 'profit', 'roi', 'stock', 'status', 'platformStatus', 'updatedAt', 'action']);
              message.success('列设置已重置');
            }}>重置</Button>
            <Button type="primary" onClick={() => setColumnDrawerVisible(false)}>确定</Button>
          </Space>
        </div>
      </Drawer>

      <Modal
        title="商品定价"
        open={pricingModalVisible}
        onCancel={() => setPricingModalVisible(false)}
        footer={null}
        width={600}
      >
        {currentProduct && (
          <Form layout="vertical">
            <Form.Item label="商品">
              <Text strong>{currentProduct.name}</Text>
            </Form.Item>
            <Form.Item label="当前售价">
              <Text>${currentProduct.price.toFixed(2)}</Text>
            </Form.Item>
            <Form.Item label="新售价">
              <InputNumber
                min={0}
                precision={2}
                style={{ width: '100%' }}
                placeholder="输入新售价"
              />
            </Form.Item>
            <Form.Item label="成本">
              <InputNumber
                min={0}
                precision={2}
                style={{ width: '100%' }}
                defaultValue={currentProduct.costPrice}
              />
            </Form.Item>
            <Form.Item>
              <Space>
                <Button type="primary">保存定价</Button>
                <Button onClick={() => setPricingModalVisible(false)}>取消</Button>
              </Space>
            </Form.Item>
          </Form>
        )}
      </Modal>
    </Card>
  );
};

export default ProductList;