feat: replace Card components with divs for improved layout consistency

web/src/components/table/model-pricing/modal/ModelDetailSideSheet.jsx

@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { SideSheet, Typography, Button } from '@douyinfe/semi-ui';
+import { SideSheet, Typography, Button, Divider } from '@douyinfe/semi-ui';
 import { IconClose } from '@douyinfe/semi-icons';
 
 import { useIsMobile } from '../../../../hooks/common/useIsMobile';
@@ -72,7 +72,7 @@ const ModelDetailSideSheet = ({
       }
       onCancel={onClose}
     >
-      <div className='p-2'>
+      <div style={{ paddingTop: 16, paddingBottom: 16 }}>
         {!modelData && (
           <div className='flex justify-center items-center py-10'>
             <Text type='secondary'>{t('加载中...')}</Text>
@@ -80,34 +80,48 @@ const ModelDetailSideSheet = ({
         )}
         {modelData && (
           <>
-            <ModelBasicInfo
-              modelData={modelData}
-              vendorsMap={vendorsMap}
-              t={t}
-            />
-            <ModelEndpoints
-              modelData={modelData}
-              endpointMap={endpointMap}
-              t={t}
-            />
-            {modelData.billing_mode === 'tiered_expr' && modelData.billing_expr && (
-              <DynamicPricingBreakdown
-                billingExpr={modelData.billing_expr}
+            <div style={{ padding: '0 24px' }}>
+              <ModelBasicInfo
+                modelData={modelData}
+                vendorsMap={vendorsMap}
+                t={t}
+              />
+            </div>
+            <Divider margin={16} />
+            <div style={{ padding: '0 24px' }}>
+              <ModelEndpoints
+                modelData={modelData}
+                endpointMap={endpointMap}
                 t={t}
               />
+            </div>
+            {modelData.billing_mode === 'tiered_expr' && modelData.billing_expr && (
+              <>
+                <Divider margin={16} />
+                <div style={{ padding: '0 24px' }}>
+                  <DynamicPricingBreakdown
+                    billingExpr={modelData.billing_expr}
+                    t={t}
+                  />
+                </div>
+              </>
             )}
-            <ModelPricingTable
-              modelData={modelData}
-              groupRatio={groupRatio}
-              currency={currency}
-              siteDisplayType={siteDisplayType}
-              tokenUnit={tokenUnit}
-              displayPrice={displayPrice}
-              showRatio={showRatio}
-              usableGroup={usableGroup}
-              autoGroups={autoGroups}
-              t={t}
-            />
+            <Divider margin={16} />
+            <div style={{ padding: '0 24px' }}>
+              <ModelPricingTable
+                modelData={modelData}
+                groupRatio={groupRatio}
+                currency={currency}
+                siteDisplayType={siteDisplayType}
+                tokenUnit={tokenUnit}
+                displayPrice={displayPrice}
+                showRatio={showRatio}
+                usableGroup={usableGroup}
+                autoGroups={autoGroups}
+                t={t}
+              />
+            </div>
+            <Divider margin={16} />
           </>
         )}
       </div>

web/src/components/table/model-pricing/modal/components/DynamicPricingBreakdown.jsx

@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Card, Avatar, Tag, Table, Typography } from '@douyinfe/semi-ui';
+import { Avatar, Tag, Table, Typography } from '@douyinfe/semi-ui';
 import { IconPriceTag } from '@douyinfe/semi-icons';
 import { parseTiersFromExpr } from '../../../../../helpers';
 import { BILLING_VARS } from '../../../../../constants';
@@ -100,7 +100,7 @@ export default function DynamicPricingBreakdown({ billingExpr, t }) {
 
   if (!hasTiers && !hasRules) {
     return (
-      <Card className='!rounded-2xl shadow-sm border-0'>
+      <div>
         <div className='flex items-center mb-3'>
           <Avatar size='small' color='amber' className='mr-2 shadow-md'>
             <IconPriceTag size={16} />
@@ -110,7 +110,7 @@ export default function DynamicPricingBreakdown({ billingExpr, t }) {
         <div className='text-sm text-gray-500'>
           <code style={{ fontSize: 12, wordBreak: 'break-all' }}>{billingExpr}</code>
         </div>
-      </Card>
+      </div>
     );
   }
 
@@ -148,7 +148,7 @@ export default function DynamicPricingBreakdown({ billingExpr, t }) {
     : [];
 
   return (
-    <Card className='!rounded-2xl shadow-sm border-0'>
+    <div>
       <div className='flex items-center mb-4'>
         <Avatar size='small' color='amber' className='mr-2 shadow-md'>
           <IconPriceTag size={16} />
@@ -202,6 +202,6 @@ export default function DynamicPricingBreakdown({ billingExpr, t }) {
         </div>
       )}
 
-    </Card>
+    </div>
   );
 }

web/src/components/table/model-pricing/modal/components/ModelBasicInfo.jsx

@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Card, Avatar, Typography, Tag, Space } from '@douyinfe/semi-ui';
+import { Avatar, Typography, Tag, Space } from '@douyinfe/semi-ui';
 import { IconInfoCircle } from '@douyinfe/semi-icons';
 import { stringToColor } from '../../../../../helpers';
 
@@ -58,7 +58,7 @@ const ModelBasicInfo = ({ modelData, vendorsMap = {}, t }) => {
   };
 
   return (
-    <Card className='!rounded-2xl shadow-sm border-0 mb-6'>
+    <div>
       <div className='flex items-center mb-4'>
         <Avatar size='small' color='blue' className='mr-2 shadow-md'>
           <IconInfoCircle size={16} />
@@ -82,7 +82,7 @@ const ModelBasicInfo = ({ modelData, vendorsMap = {}, t }) => {
           </Space>
         )}
       </div>
-    </Card>
+    </div>
   );
 };
 

web/src/components/table/model-pricing/modal/components/ModelEndpoints.jsx

@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Card, Avatar, Typography, Badge } from '@douyinfe/semi-ui';
+import { Avatar, Typography, Badge } from '@douyinfe/semi-ui';
 import { IconLink } from '@douyinfe/semi-icons';
 
 const { Text } = Typography;
@@ -62,7 +62,7 @@ const ModelEndpoints = ({ modelData, endpointMap = {}, t }) => {
   };
 
   return (
-    <Card className='!rounded-2xl shadow-sm border-0 mb-6'>
+    <div>
       <div className='flex items-center mb-4'>
         <Avatar size='small' color='purple' className='mr-2 shadow-md'>
           <IconLink size={16} />
@@ -75,7 +75,7 @@ const ModelEndpoints = ({ modelData, endpointMap = {}, t }) => {
         </div>
       </div>
       {renderAPIEndpoints()}
-    </Card>
+    </div>
   );
 };
 

web/src/components/table/model-pricing/modal/components/ModelPricingTable.jsx

@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Card, Avatar, Typography, Table, Tag } from '@douyinfe/semi-ui';
+import { Avatar, Typography, Table, Tag } from '@douyinfe/semi-ui';
 import { IconCoinMoneyStroked } from '@douyinfe/semi-icons';
 import { calculateModelPrice, getModelPriceItems } from '../../../../../helpers';
 
@@ -166,7 +166,7 @@ const ModelPricingTable = ({
   };
 
   return (
-    <Card className='!rounded-2xl shadow-sm border-0'>
+    <div>
       <div className='flex items-center mb-4'>
         <Avatar size='small' color='orange' className='mr-2 shadow-md'>
           <IconCoinMoneyStroked size={16} />
@@ -194,7 +194,7 @@ const ModelPricingTable = ({
         </div>
       )}
       {renderGroupPriceTable()}
-    </Card>
+    </div>
   );
 };