From 5a6f32c39253dc40bfbd403ad0efce0c94ed57da Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Wed, 25 Jun 2025 15:40:27 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style(ui):=20refactor=20Tabs=20i?=
 =?UTF-8?q?n=20ModelPricing=20to=20use=20native=20Semi=20UI=20styling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• Removed the custom `renderArrow` helper and its `Dropdown`-based arrow navigation, simplifying the component logic.
• Switched the `<Tabs>` component to rely on Semi UI’s built-in behaviour (no more `renderArrow` override).
• Kept `type="card"` and `collapsible` props for consistent visual appearance while still using the default style.
• Eliminated the now-unused `Dropdown` import.

This cleanup reduces bespoke UI code, makes future maintenance easier, and keeps the interface consistent with the rest of the application.
---
 web/src/components/table/ModelPricing.js | 61 +-----------------------
 1 file changed, 1 insertion(+), 60 deletions(-)

diff --git a/web/src/components/table/ModelPricing.js b/web/src/components/table/ModelPricing.js
index 8ae06a19..be389f80 100644
--- a/web/src/components/table/ModelPricing.js
+++ b/web/src/components/table/ModelPricing.js
@@ -16,7 +16,6 @@ import {
   Card,
   Tabs,
   TabPane,
-  Dropdown,
   Empty
 } from '@douyinfe/semi-ui';
 import {
@@ -257,7 +256,7 @@ const ModelPricing = () => {
 
   const [models, setModels] = useState([]);
   const [loading, setLoading] = useState(true);
-  const [userState, userDispatch] = useContext(UserContext);
+  const [userState] = useContext(UserContext);
   const [groupRatio, setGroupRatio] = useState({});
   const [usableGroup, setUsableGroup] = useState({});
 
@@ -334,57 +333,6 @@ const ModelPricing = () => {
     return counts;
   }, [models, modelCategories]);
 
-  const renderArrow = (items, pos, handleArrowClick) => {
-    const style = {
-      width: 32,
-      height: 32,
-      margin: '0 12px',
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      borderRadius: '100%',
-      background: 'rgba(var(--semi-grey-1), 1)',
-      color: 'var(--semi-color-text)',
-      cursor: 'pointer',
-    };
-    return (
-      <Dropdown
-        render={
-          <Dropdown.Menu>
-            {items.map(item => {
-              const key = item.itemKey;
-              const modelCount = categoryCounts[key] || 0;
-
-              return (
-                <Dropdown.Item
-                  key={item.itemKey}
-                  onClick={() => setActiveKey(item.itemKey)}
-                  icon={modelCategories[item.itemKey]?.icon}
-                >
-                  <div className="flex items-center gap-2">
-                    {modelCategories[item.itemKey]?.label || item.itemKey}
-                    <Tag
-                      color={activeKey === item.itemKey ? 'red' : 'grey'}
-                      size='small'
-                      shape='circle'
-                    >
-                      {modelCount}
-                    </Tag>
-                  </div>
-                </Dropdown.Item>
-              );
-            })}
-          </Dropdown.Menu>
-        }
-      >
-        <div style={style} onClick={handleArrowClick}>
-          {pos === 'start' ? '←' : '→'}
-        </div>
-      </Dropdown>
-    );
-  };
-
-  // 检查分类是否有对应的模型
   const availableCategories = useMemo(() => {
     if (!models.length) return ['all'];
 
@@ -394,11 +342,9 @@ const ModelPricing = () => {
     }).map(([key]) => key);
   }, [models]);
 
-  // 渲染标签页
   const renderTabs = () => {
     return (
       <Tabs
-        renderArrow={renderArrow}
         activeKey={activeKey}
         type="card"
         collapsible
@@ -434,16 +380,13 @@ const ModelPricing = () => {
     );
   };
 
-  // 优化过滤逻辑
   const filteredModels = useMemo(() => {
     let result = models;
 
-    // 先按分类过滤
     if (activeKey !== 'all') {
       result = result.filter(model => modelCategories[activeKey].filter(model));
     }
 
-    // 再按搜索词过滤
     if (filteredValue.length > 0) {
       const searchTerm = filteredValue[0].toLowerCase();
       result = result.filter(model =>
@@ -454,7 +397,6 @@ const ModelPricing = () => {
     return result;
   }, [activeKey, models, filteredValue]);
 
-  // 搜索和操作区组件
   const SearchAndActions = useMemo(() => (
     <Card className="!rounded-xl mb-6" bordered={false}>
       <div className="flex flex-wrap items-center gap-4">
@@ -485,7 +427,6 @@ const ModelPricing = () => {
     </Card>
   ), [selectedRowKeys, t]);
 
-  // 表格组件
   const ModelTable = useMemo(() => (
     <Card className="!rounded-xl overflow-hidden" bordered={false}>
       <Table