✨ feat(ui): enhance pricing table & filters with responsive button-group, fixed column, scroll tweaks (#1365)

• SelectableButtonGroup • Added optional collapsible support with gradient mask & toggle • Dynamic tagCount badge support for groups / quota types • Switched to responsive Row/Col (`xs 24`, `sm 24`, `lg 12`, `xl 8`) for fluid layout • Shows expand button only when item count exceeds visible rows • Sidebar filters • PricingGroups & PricingQuotaTypes now pass tag counts to button-group • Counts derived from current models & quota_type • PricingTableColumns • Moved “Availability” column to far right; fixed via `fixed: 'right'` • Re-ordered columns and preserved ratio / price logic • PricingTable • Added `compactMode` prop; strips fixed columns and sets `scroll={compactMode ? undefined : { x: 'max-content' }}` • Processes columns to remove `fixed` in compact mode • PricingPage & index.css • Added `.pricing-scroll-hide` utility to hide Y-axis scrollbar for `Sider` & `Content` • Responsive / style refinements • Sidebar width adjusted to 460px • Scrollbars hidden uniformly across pricing modules These changes complete the model-pricing UI refactor, ensuring clean scrolling, responsive filters, and fixed availability column for better usability.
2025-07-23 02:23:25 +08:00
parent a044070e1d
commit b964f755ec
6 changed files with 102 additions and 88 deletions
--- a/web/src/components/common/ui/SelectableButtonGroup.jsx
+++ b/web/src/components/common/ui/SelectableButtonGroup.jsx
@@ -82,7 +82,7 @@ const SelectableButtonGroup = ({
      {items.map((item) => {
        const isActive = activeValue === item.value;
        return (
-          <Col span={8} key={item.value}>
+          <Col xs={24} sm={24} md={24} lg={12} xl={8} key={item.value}>
            <Button
              onClick={() => onChange(item.value)}
              theme={isActive ? 'solid' : 'outline'}
--- a/web/src/components/table/model-pricing/PricingContent.jsx
+++ b/web/src/components/table/model-pricing/PricingContent.jsx
@@ -23,7 +23,7 @@ import PricingTable from './PricingTable.jsx';

 const PricingContent = (props) => {
  return (
-    <>
+    <div className="pricing-scroll-hide">
      {/* 固定的搜索和操作区域 */}
      <div
        style={{
@@ -45,7 +45,7 @@ const PricingContent = (props) => {
      >
        <PricingTable {...props} />
      </div>
-    </>
+    </div>
  );
 };

--- a/web/src/components/table/model-pricing/PricingPage.jsx
+++ b/web/src/components/table/model-pricing/PricingPage.jsx
@@ -35,6 +35,7 @@ const PricingPage = () => {
      <Layout style={{ height: 'calc(100vh - 60px)', overflow: 'hidden', marginTop: '60px' }}>
        {/* 左侧边栏 */}
        <Sider
+          className="pricing-scroll-hide"
          style={{
            width: 460,
            height: 'calc(100vh - 60px)',
@@ -48,6 +49,7 @@ const PricingPage = () => {

        {/* 右侧内容区 */}
        <Content
+          className="pricing-scroll-hide"
          style={{
            height: 'calc(100vh - 60px)',
            backgroundColor: 'var(--semi-color-bg-0)',
--- a/web/src/components/table/model-pricing/PricingTable.jsx
+++ b/web/src/components/table/model-pricing/PricingTable.jsx
@@ -45,6 +45,7 @@ const PricingTable = ({
  filteredValue,
  handleGroupClick,
  showRatio,
+  compactMode = false,
  t
 }) => {

@@ -83,8 +84,8 @@ const PricingTable = ({
  ]);

  // 更新列定义中的 filteredValue
-  const tableColumns = useMemo(() => {
-    return columns.map(column => {
+  const processedColumns = useMemo(() => {
+    const cols = columns.map(column => {
      if (column.dataIndex === 'model_name') {
        return {
          ...column,
@@ -93,16 +94,23 @@ const PricingTable = ({
      }
      return column;
    });
-  }, [columns, filteredValue]);
+
+    // 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={tableColumns}
+        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 }} />}
@@ -120,7 +128,7 @@ const PricingTable = ({
        }}
      />
    </Card>
-  ), [filteredModels, loading, tableColumns, rowSelection, pageSize, setPageSize, t]);
+  ), [filteredModels, loading, processedColumns, rowSelection, pageSize, setPageSize, t, compactMode]);

  return ModelTable;
 };
--- a/web/src/components/table/model-pricing/PricingTableColumns.js
+++ b/web/src/components/table/model-pricing/PricingTableColumns.js
@@ -92,84 +92,88 @@ export const getPricingTableColumns = ({
  handleGroupClick,
  showRatio,
 }) => {
-  const baseColumns = [
-    {
-      title: t('可用性'),
-      dataIndex: 'available',
-      render: (text, record, index) => {
-        return renderAvailable(record.enable_groups.includes(selectedGroup), t);
-      },
-      sorter: (a, b) => {
-        const aAvailable = a.enable_groups.includes(selectedGroup);
-        const bAvailable = b.enable_groups.includes(selectedGroup);
-        return Number(aAvailable) - Number(bAvailable);
-      },
-      defaultSortOrder: 'descend',
+  const endpointColumn = {
+    title: t('可用端点类型'),
+    dataIndex: 'supported_endpoint_types',
+    render: (text, record, index) => {
+      return renderSupportedEndpoints(text);
    },
-    {
-      title: t('可用端点类型'),
-      dataIndex: 'supported_endpoint_types',
-      render: (text, record, index) => {
-        return renderSupportedEndpoints(text);
-      },
-    },
-    {
-      title: t('模型名称'),
-      dataIndex: 'model_name',
-      render: (text, record, index) => {
-        return renderModelTag(text, {
-          onClick: () => {
-            copyText(text);
-          }
-        });
-      },
-      onFilter: (value, record) =>
-        record.model_name.toLowerCase().includes(value.toLowerCase()),
-    },
-    {
-      title: t('计费类型'),
-      dataIndex: 'quota_type',
-      render: (text, record, index) => {
-        return renderQuotaType(parseInt(text), t);
-      },
-      sorter: (a, b) => a.quota_type - b.quota_type,
-    },
-    {
-      title: t('可用分组'),
-      dataIndex: 'enable_groups',
-      render: (text, record, index) => {
-        return (
-          <Space wrap>
-            {text.map((group) => {
-              if (usableGroup[group]) {
-                if (group === selectedGroup) {
-                  return (
-                    <Tag key={group} color='blue' shape='circle' prefixIcon={<IconVerify />}>
-                      {group}
-                    </Tag>
-                  );
-                } else {
-                  return (
-                    <Tag
-                      key={group}
-                      color='blue'
-                      shape='circle'
-                      onClick={() => handleGroupClick(group)}
-                      className="cursor-pointer hover:opacity-80 transition-opacity"
-                    >
-                      {group}
-                    </Tag>
-                  );
-                }
-              }
-            })}
-          </Space>
-        );
-      },
-    },
-  ];
+  };
+
+  const modelNameColumn = {
+    title: t('模型名称'),
+    dataIndex: 'model_name',
+    render: (text, record, index) => {
+      return renderModelTag(text, {
+        onClick: () => {
+          copyText(text);
+        }
+      });
+    },
+    onFilter: (value, record) =>
+      record.model_name.toLowerCase().includes(value.toLowerCase()),
+  };
+
+  const quotaColumn = {
+    title: t('计费类型'),
+    dataIndex: 'quota_type',
+    render: (text, record, index) => {
+      return renderQuotaType(parseInt(text), t);
+    },
+    sorter: (a, b) => a.quota_type - b.quota_type,
+  };
+
+  const enableGroupColumn = {
+    title: t('可用分组'),
+    dataIndex: 'enable_groups',
+    render: (text, record, index) => {
+      return (
+        <Space wrap>
+          {text.map((group) => {
+            if (usableGroup[group]) {
+              if (group === selectedGroup) {
+                return (
+                  <Tag key={group} color='blue' shape='circle' prefixIcon={<IconVerify />}>
+                    {group}
+                  </Tag>
+                );
+              } else {
+                return (
+                  <Tag
+                    key={group}
+                    color='blue'
+                    shape='circle'
+                    onClick={() => handleGroupClick(group)}
+                    className="cursor-pointer hover:opacity-80 transition-opacity"
+                  >
+                    {group}
+                  </Tag>
+                );
+              }
+            }
+          })}
+        </Space>
+      );
+    },
+  };
+
+  const baseColumns = [endpointColumn, modelNameColumn, quotaColumn, enableGroupColumn];
+
+  const availabilityColumn = {
+    title: t('可用性'),
+    dataIndex: 'available',
+    fixed: 'right',
+    render: (text, record, index) => {
+      return renderAvailable(record.enable_groups.includes(selectedGroup), t);
+    },
+    sorter: (a, b) => {
+      const aAvailable = a.enable_groups.includes(selectedGroup);
+      const bAvailable = b.enable_groups.includes(selectedGroup);
+      return Number(aAvailable) - Number(bAvailable);
+    },
+    defaultSortOrder: 'descend',
+  };

-  // 倍率列 - 只有在showRatio为true时才包含
  const ratioColumn = {
    title: () => (
      <div className="flex items-center space-x-1">
@@ -207,7 +211,6 @@ export const getPricingTableColumns = ({
    },
  };

-  // 价格列
  const priceColumn = {
    title: (
      <div className="flex items-center space-x-2">
@@ -264,12 +267,11 @@ export const getPricingTableColumns = ({
    },
  };

-  // 根据showRatio决定是否包含倍率列
  const columns = [...baseColumns];
  if (showRatio) {
    columns.push(ratioColumn);
  }
  columns.push(priceColumn);
-
+  columns.push(availabilityColumn);
  return columns;
 }; 
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -391,7 +391,8 @@ code {
  background: transparent;
 }

-/* 隐藏卡片内容区域的滚动条 */
+/* 隐藏内容区域滚动条 */
+.pricing-scroll-hide,
 .model-test-scroll,
 .card-content-scroll,
 .model-settings-scroll,
@@ -403,6 +404,7 @@ code {
  scrollbar-width: none;
 }

+.pricing-scroll-hide::-webkit-scrollbar,
 .model-test-scroll::-webkit-scrollbar,
 .card-content-scroll::-webkit-scrollbar,
 .model-settings-scroll::-webkit-scrollbar,