🎨 feat(model-pricing): refactor layout and component structure (#1365)

* Re-architected model-pricing page into modular components: * PricingPage / PricingSidebar / PricingContent * Removed obsolete `ModelPricing*` components and column defs * Introduced reusable `SelectableButtonGroup` in `common/ui` * Supports Row/Col grid (3 per row) * Optional collapsible mode with gradient mask & toggle * Rebuilt filter panels with the new button-group: * Model categories, token groups, and quota types * Added dynamic `tagCount` badges to display item totals * Extended `useModelPricingData` hook * Added `filterGroup` and `filterQuotaType` state and logic * Updated PricingTable columns & sidebar reset logic to respect new states * Ensured backward compatibility via re-export in `index.jsx` * Polished styling, icons and i18n keys
2026-04-23 00:28:38 +00:00 · 2025-07-23 01:58:51 +08:00
parent e0b859dbbe
commit a044070e1d
18 changed files with 773 additions and 294 deletions
--- a/web/src/components/table/model-pricing/PricingTable.jsx
+++ b/web/src/components/table/model-pricing/PricingTable.jsx
@@ -0,0 +1,128 @@
+/*
+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.js';
+
+const PricingTable = ({
+  filteredModels,
+  loading,
+  rowSelection,
+  pageSize,
+  setPageSize,
+  selectedGroup,
+  usableGroup,
+  groupRatio,
+  copyText,
+  setModalImageUrl,
+  setIsModalOpenurl,
+  currency,
+  showWithRecharge,
+  tokenUnit,
+  setTokenUnit,
+  displayPrice,
+  filteredValue,
+  handleGroupClick,
+  showRatio,
+  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 tableColumns = useMemo(() => {
+    return columns.map(column => {
+      if (column.dataIndex === 'model_name') {
+        return {
+          ...column,
+          filteredValue
+        };
+      }
+      return column;
+    });
+  }, [columns, filteredValue]);
+
+  const ModelTable = useMemo(() => (
+    <Card className="!rounded-xl overflow-hidden" bordered={false}>
+      <Table
+        columns={tableColumns}
+        dataSource={filteredModels}
+        loading={loading}
+        rowSelection={rowSelection}
+        className="custom-table"
+        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, tableColumns, rowSelection, pageSize, setPageSize, t]);
+
+  return ModelTable;
+};
+
+export default PricingTable;