🎨 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
2025-07-23 01:58:51 +08:00
parent 5bd8dd787e
commit 1c22e03a40
18 changed files with 773 additions and 294 deletions
@@ -0,0 +1,72 @@
+/*
+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 from 'react';
+import { Layout, ImagePreview } from '@douyinfe/semi-ui';
+import PricingSidebar from './PricingSidebar.jsx';
+import PricingContent from './PricingContent.jsx';
+import { useModelPricingData } from '../../../hooks/model-pricing/useModelPricingData.js';
+
+const PricingPage = () => {
+  const pricingData = useModelPricingData();
+  const { Sider, Content } = Layout;
+
+  // 显示倍率状态
+  const [showRatio, setShowRatio] = React.useState(false);
+
+  return (
+    <div className="bg-white">
+      <Layout style={{ height: 'calc(100vh - 60px)', overflow: 'hidden', marginTop: '60px' }}>
+        {/* 左侧边栏 */}
+        <Sider
+          style={{
+            width: 460,
+            height: 'calc(100vh - 60px)',
+            backgroundColor: 'var(--semi-color-bg-0)',
+            borderRight: '1px solid var(--semi-color-border)',
+            overflow: 'auto'
+          }}
+        >
+          <PricingSidebar {...pricingData} showRatio={showRatio} setShowRatio={setShowRatio} />
+        </Sider>
+
+        {/* 右侧内容区 */}
+        <Content
+          style={{
+            height: 'calc(100vh - 60px)',
+            backgroundColor: 'var(--semi-color-bg-0)',
+            display: 'flex',
+            flexDirection: 'column'
+          }}
+        >
+          <PricingContent {...pricingData} showRatio={showRatio} />
+        </Content>
+      </Layout>
+
+      {/* 倍率说明图预览 */}
+      <ImagePreview
+        src={pricingData.modalImageUrl}
+        visible={pricingData.isModalOpenurl}
+        onVisibleChange={(visible) => pricingData.setIsModalOpenurl(visible)}
+      />
+    </div>
+  );
+};
+
+export default PricingPage;