Skip to content

phsl / new-api

Go to a project
Commit d385d7ab by CaIon
Options

feat: replace Card components with divs for improved layout consistency

parent d66311e9
Showing with 55 additions and 41 deletions
web/src/components/table/model-pricing/modal/ModelDetailSideSheet.jsx
...@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com ...@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
*/ */
import React from 'react'; 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 { IconClose } from '@douyinfe/semi-icons';
import { useIsMobile } from '../../../../hooks/common/useIsMobile'; import { useIsMobile } from '../../../../hooks/common/useIsMobile';
...@@ -72,7 +72,7 @@ const ModelDetailSideSheet = ({ ...@@ -72,7 +72,7 @@ const ModelDetailSideSheet = ({
} }
onCancel={onClose} onCancel={onClose}
> >
<div className='p-2'> <div style={{ paddingTop: 16, paddingBottom: 16 }}>
{!modelData && ( {!modelData && (
<div className='flex justify-center items-center py-10'> <div className='flex justify-center items-center py-10'>
<Text type='secondary'>{t('加载中...')}</Text> <Text type='secondary'>{t('加载中...')}</Text>
...@@ -80,34 +80,48 @@ const ModelDetailSideSheet = ({ ...@@ -80,34 +80,48 @@ const ModelDetailSideSheet = ({
)} )}
{modelData && ( {modelData && (
<> <>
<ModelBasicInfo <div style={{ padding: '0 24px' }}>
modelData={modelData} <ModelBasicInfo
vendorsMap={vendorsMap} modelData={modelData}
t={t} vendorsMap={vendorsMap}
/> t={t}
<ModelEndpoints />
modelData={modelData} </div>
endpointMap={endpointMap} <Divider margin={16} />
t={t} <div style={{ padding: '0 24px' }}>
/> <ModelEndpoints
{modelData.billing_mode === 'tiered_expr' && modelData.billing_expr && ( modelData={modelData}
<DynamicPricingBreakdown endpointMap={endpointMap}
billingExpr={modelData.billing_expr}
t={t} 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 <Divider margin={16} />
modelData={modelData} <div style={{ padding: '0 24px' }}>
groupRatio={groupRatio} <ModelPricingTable
currency={currency} modelData={modelData}
siteDisplayType={siteDisplayType} groupRatio={groupRatio}
tokenUnit={tokenUnit} currency={currency}
displayPrice={displayPrice} siteDisplayType={siteDisplayType}
showRatio={showRatio} tokenUnit={tokenUnit}
usableGroup={usableGroup} displayPrice={displayPrice}
autoGroups={autoGroups} showRatio={showRatio}
t={t} usableGroup={usableGroup}
/> autoGroups={autoGroups}
t={t}
/>
</div>
<Divider margin={16} />
</> </>
)} )}
</div> </div>
......
web/src/components/table/model-pricing/modal/components/DynamicPricingBreakdown.jsx
...@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com ...@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
*/ */
import React from 'react'; 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 { IconPriceTag } from '@douyinfe/semi-icons';
import { parseTiersFromExpr } from '../../../../../helpers'; import { parseTiersFromExpr } from '../../../../../helpers';
import { BILLING_VARS } from '../../../../../constants'; import { BILLING_VARS } from '../../../../../constants';
...@@ -100,7 +100,7 @@ export default function DynamicPricingBreakdown({ billingExpr, t }) { ...@@ -100,7 +100,7 @@ export default function DynamicPricingBreakdown({ billingExpr, t }) {
if (!hasTiers && !hasRules) { if (!hasTiers && !hasRules) {
return ( return (
<Card className='!rounded-2xl shadow-sm border-0'> <div>
<div className='flex items-center mb-3'> <div className='flex items-center mb-3'>
<Avatar size='small' color='amber' className='mr-2 shadow-md'> <Avatar size='small' color='amber' className='mr-2 shadow-md'>
<IconPriceTag size={16} /> <IconPriceTag size={16} />
...@@ -110,7 +110,7 @@ export default function DynamicPricingBreakdown({ billingExpr, t }) { ...@@ -110,7 +110,7 @@ export default function DynamicPricingBreakdown({ billingExpr, t }) {
<div className='text-sm text-gray-500'> <div className='text-sm text-gray-500'>
<code style={{ fontSize: 12, wordBreak: 'break-all' }}>{billingExpr}</code> <code style={{ fontSize: 12, wordBreak: 'break-all' }}>{billingExpr}</code>
</div> </div>
</Card> </div>
); );
} }
...@@ -148,7 +148,7 @@ export default function DynamicPricingBreakdown({ billingExpr, t }) { ...@@ -148,7 +148,7 @@ export default function DynamicPricingBreakdown({ billingExpr, t }) {
: []; : [];
return ( return (
<Card className='!rounded-2xl shadow-sm border-0'> <div>
<div className='flex items-center mb-4'> <div className='flex items-center mb-4'>
<Avatar size='small' color='amber' className='mr-2 shadow-md'> <Avatar size='small' color='amber' className='mr-2 shadow-md'>
<IconPriceTag size={16} /> <IconPriceTag size={16} />
...@@ -202,6 +202,6 @@ export default function DynamicPricingBreakdown({ billingExpr, t }) { ...@@ -202,6 +202,6 @@ export default function DynamicPricingBreakdown({ billingExpr, t }) {
</div> </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 ...@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
*/ */
import React from 'react'; 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 { IconInfoCircle } from '@douyinfe/semi-icons';
import { stringToColor } from '../../../../../helpers'; import { stringToColor } from '../../../../../helpers';
...@@ -58,7 +58,7 @@ const ModelBasicInfo = ({ modelData, vendorsMap = {}, t }) => { ...@@ -58,7 +58,7 @@ const ModelBasicInfo = ({ modelData, vendorsMap = {}, t }) => {
}; };
return ( return (
<Card className='!rounded-2xl shadow-sm border-0 mb-6'> <div>
<div className='flex items-center mb-4'> <div className='flex items-center mb-4'>
<Avatar size='small' color='blue' className='mr-2 shadow-md'> <Avatar size='small' color='blue' className='mr-2 shadow-md'>
<IconInfoCircle size={16} /> <IconInfoCircle size={16} />
...@@ -82,7 +82,7 @@ const ModelBasicInfo = ({ modelData, vendorsMap = {}, t }) => { ...@@ -82,7 +82,7 @@ const ModelBasicInfo = ({ modelData, vendorsMap = {}, t }) => {
</Space> </Space>
)} )}
</div> </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 ...@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
*/ */
import React from 'react'; 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'; import { IconLink } from '@douyinfe/semi-icons';
const { Text } = Typography; const { Text } = Typography;
...@@ -62,7 +62,7 @@ const ModelEndpoints = ({ modelData, endpointMap = {}, t }) => { ...@@ -62,7 +62,7 @@ const ModelEndpoints = ({ modelData, endpointMap = {}, t }) => {
}; };
return ( return (
<Card className='!rounded-2xl shadow-sm border-0 mb-6'> <div>
<div className='flex items-center mb-4'> <div className='flex items-center mb-4'>
<Avatar size='small' color='purple' className='mr-2 shadow-md'> <Avatar size='small' color='purple' className='mr-2 shadow-md'>
<IconLink size={16} /> <IconLink size={16} />
...@@ -75,7 +75,7 @@ const ModelEndpoints = ({ modelData, endpointMap = {}, t }) => { ...@@ -75,7 +75,7 @@ const ModelEndpoints = ({ modelData, endpointMap = {}, t }) => {
</div> </div>
</div> </div>
{renderAPIEndpoints()} {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 ...@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
*/ */
import React from 'react'; 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 { IconCoinMoneyStroked } from '@douyinfe/semi-icons';
import { calculateModelPrice, getModelPriceItems } from '../../../../../helpers'; import { calculateModelPrice, getModelPriceItems } from '../../../../../helpers';
...@@ -166,7 +166,7 @@ const ModelPricingTable = ({ ...@@ -166,7 +166,7 @@ const ModelPricingTable = ({
}; };
return ( return (
<Card className='!rounded-2xl shadow-sm border-0'> <div>
<div className='flex items-center mb-4'> <div className='flex items-center mb-4'>
<Avatar size='small' color='orange' className='mr-2 shadow-md'> <Avatar size='small' color='orange' className='mr-2 shadow-md'>
<IconCoinMoneyStroked size={16} /> <IconCoinMoneyStroked size={16} />
...@@ -194,7 +194,7 @@ const ModelPricingTable = ({ ...@@ -194,7 +194,7 @@ const ModelPricingTable = ({
</div> </div>
)} )}
{renderGroupPriceTable()} {renderGroupPriceTable()}
</Card> </div>
); );
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment