new-api/web/src/components/table/model-pricing/PricingTable.jsx

/*
Copyright (C) 2025 QuantumNous

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.

For commercial licensing, please contact support@quantumnous.com
*/

import React, { useMemo } from 'react';
import { Card, Table, Empty } from '@douyinfe/semi-ui';
import {
  IllustrationNoResult,
  IllustrationNoResultDark
} from '@douyinfe/semi-illustrations';
import { getPricingTableColumns } from './PricingTableColumns';

const PricingTable = ({
  filteredModels,
  loading,
  rowSelection,
  pageSize,
  setPageSize,
  selectedGroup,
  usableGroup,
  groupRatio,
  copyText,
  setModalImageUrl,
  setIsModalOpenurl,
  currency,
  showWithRecharge,
  tokenUnit,
  setTokenUnit,
  displayPrice,
  filteredValue,
  handleGroupClick,
  showRatio,
  compactMode = false,
  t
}) => {

  const columns = useMemo(() => {
    return getPricingTableColumns({
      t,
      selectedGroup,
      usableGroup,
      groupRatio,
      copyText,
      setModalImageUrl,
      setIsModalOpenurl,
      currency,
      showWithRecharge,
      tokenUnit,
      setTokenUnit,
      displayPrice,
      handleGroupClick,
      showRatio,
    });
  }, [
    t,
    selectedGroup,
    usableGroup,
    groupRatio,
    copyText,
    setModalImageUrl,
    setIsModalOpenurl,
    currency,
    showWithRecharge,
    tokenUnit,
    setTokenUnit,
    displayPrice,
    handleGroupClick,
    showRatio,
  ]);

  // 更新列定义中的 filteredValue
  const processedColumns = useMemo(() => {
    const cols = columns.map(column => {
      if (column.dataIndex === 'model_name') {
        return {
          ...column,
          filteredValue
        };
      }
      return column;
    });

    // Remove fixed property when in compact mode (mobile view)
    if (compactMode) {
      return cols.map(({ fixed, ...rest }) => rest);
    }
    return cols;
  }, [columns, filteredValue, compactMode]);

  const ModelTable = useMemo(() => (
    <Card className="!rounded-xl overflow-hidden" bordered={false}>
      <Table
        columns={processedColumns}
        dataSource={filteredModels}
        loading={loading}
        rowSelection={rowSelection}
        className="custom-table"
        scroll={compactMode ? undefined : { x: 'max-content' }}
        empty={
          <Empty
            image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
            darkModeImage={<IllustrationNoResultDark style={{ width: 150, height: 150 }} />}
            description={t('搜索无结果')}
            style={{ padding: 30 }}
          />
        }
        pagination={{
          defaultPageSize: 10,
          pageSize: pageSize,
          showSizeChanger: true,
          pageSizeOptions: [10, 20, 50, 100],
          onPageSizeChange: (size) => setPageSize(size),
        }}
      />
    </Card>
  ), [filteredModels, loading, processedColumns, rowSelection, pageSize, setPageSize, t, compactMode]);

  return ModelTable;
};

export default PricingTable;