🎨 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

web/src/hooks/model-pricing/useModelPricingData.js

@@ -32,6 +32,10 @@ export const useModelPricingData = () => {
   const [modalImageUrl, setModalImageUrl] = useState('');
   const [isModalOpenurl, setIsModalOpenurl] = useState(false);
   const [selectedGroup, setSelectedGroup] = useState('default');
+  // 用于 Table 的可用分组筛选，“all” 表示不过滤
+  const [filterGroup, setFilterGroup] = useState('all');
+  // 计费类型筛选: 'all' | 0 | 1
+  const [filterQuotaType, setFilterQuotaType] = useState('all');
   const [activeKey, setActiveKey] = useState('all');
   const [pageSize, setPageSize] = useState(10);
   const [currency, setCurrency] = useState('USD');
@@ -75,10 +79,22 @@ export const useModelPricingData = () => {
   const filteredModels = useMemo(() => {
     let result = models;
 
+    // 分类筛选
     if (activeKey !== 'all') {
       result = result.filter(model => modelCategories[activeKey].filter(model));
     }
 
+    // 分组筛选
+    if (filterGroup !== 'all') {
+      result = result.filter(model => model.enable_groups.includes(filterGroup));
+    }
+
+    // 计费类型筛选
+    if (filterQuotaType !== 'all') {
+      result = result.filter(model => model.quota_type === filterQuotaType);
+    }
+
+    // 搜索筛选
     if (filteredValue.length > 0) {
       const searchTerm = filteredValue[0].toLowerCase();
       result = result.filter(model =>
@@ -87,7 +103,7 @@ export const useModelPricingData = () => {
     }
 
     return result;
-  }, [activeKey, models, filteredValue]);
+  }, [activeKey, models, filteredValue, filterGroup, filterQuotaType]);
 
   const rowSelection = useMemo(
     () => ({
@@ -184,6 +200,8 @@ export const useModelPricingData = () => {
 
   const handleGroupClick = (group) => {
     setSelectedGroup(group);
+    // 同时将分组过滤设置为该分组
+    setFilterGroup(group);
     showInfo(
       t('当前查看的分组为：{{group}}，倍率为：{{ratio}}', {
         group: group,
@@ -208,6 +226,10 @@ export const useModelPricingData = () => {
     setIsModalOpenurl,
     selectedGroup,
     setSelectedGroup,
+    filterGroup,
+    setFilterGroup,
+    filterQuotaType,
+    setFilterQuotaType,
     activeKey,
     setActiveKey,
     pageSize,