✨ 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.

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;
 };