Skip to content

phsl / new-api

Go to a project
Commit d351c616 by t0ng7u
Options

🍭 style(ui): Optimize style layout and improve responsive layout

parent 27fffe0c
Showing with 29 additions and 25 deletions
web/src/components/table/model-pricing/layout/header/PricingCategoryIntro.jsx
...@@ -104,7 +104,7 @@ const PricingCategoryIntro = ({ ...@@ -104,7 +104,7 @@ const PricingCategoryIntro = ({
})); }));
return ( return (
<div className="min-w-16 h-16 rounded-2xl bg-white shadow-sm flex items-center justify-center px-2"> <div className="min-w-16 h-16 rounded-2xl bg-white shadow-md flex items-center justify-center px-2">
<AvatarGroup size="default" overlapFrom='end'> <AvatarGroup size="default" overlapFrom='end'>
{fallbackCategories.map((item) => ( {fallbackCategories.map((item) => (
<Avatar <Avatar
...@@ -122,7 +122,7 @@ const PricingCategoryIntro = ({ ...@@ -122,7 +122,7 @@ const PricingCategoryIntro = ({
} }
return ( return (
<div className="min-w-16 h-16 rounded-2xl bg-white shadow-sm flex items-center justify-center px-2"> <div className="min-w-16 h-16 rounded-2xl bg-white shadow-md flex items-center justify-center px-2">
<AvatarGroup <AvatarGroup
maxCount={4} maxCount={4}
size="default" size="default"
...@@ -162,7 +162,7 @@ const PricingCategoryIntro = ({ ...@@ -162,7 +162,7 @@ const PricingCategoryIntro = ({
// 为具体分类渲染单个图标 // 为具体分类渲染单个图标
const renderCategoryAvatar = (category) => ( const renderCategoryAvatar = (category) => (
<div className="w-16 h-16 rounded-2xl bg-white shadow-sm flex items-center justify-center"> <div className="w-16 h-16 rounded-2xl bg-white shadow-md flex items-center justify-center">
{category.icon && React.cloneElement(category.icon, { size: 40 })} {category.icon && React.cloneElement(category.icon, { size: 40 })}
</div> </div>
); );
...@@ -171,20 +171,22 @@ const PricingCategoryIntro = ({ ...@@ -171,20 +171,22 @@ const PricingCategoryIntro = ({
if (activeKey === 'all') { if (activeKey === 'all') {
return ( return (
<div className='mb-4'> <div className='mb-4'>
<Card className="!rounded-2xl" bodyStyle={{ padding: '24px' }}> <Card className="!rounded-2xl" bodyStyle={{ padding: '16px' }}>
<div className="flex items-start space-x-4"> <div className="flex items-start space-x-3 md:space-x-4">
{/* 全部模型的头像组合 */} {/* 全部模型的头像组合 */}
{renderAllModelsAvatar()} <div className="flex-shrink-0">
{renderAllModelsAvatar()}
</div>
{/* 分类信息 */} {/* 分类信息 */}
<div className="flex-1"> <div className="flex-1 min-w-0">
<div className="flex items-center space-x-3 mb-2"> <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 mb-2">
<h2 className="text-xl font-bold text-gray-900">{modelCategories.all.label}</h2> <h2 className="text-lg sm:text-xl font-bold text-gray-900 truncate">{modelCategories.all.label}</h2>
<Tag color="white" shape="circle" size="small"> <Tag color="white" shape="circle" size="small" className="self-start sm:self-center">
{t('共 {{count}} 个模型', { count: modelCount })} {t('共 {{count}} 个模型', { count: modelCount })}
</Tag> </Tag>
</div> </div>
<p className="text-sm text-gray-600 leading-relaxed"> <p className="text-xs sm:text-sm text-gray-600 leading-relaxed">
{getCategoryDescription(activeKey)} {getCategoryDescription(activeKey)}
</p> </p>
</div> </div>
...@@ -202,20 +204,22 @@ const PricingCategoryIntro = ({ ...@@ -202,20 +204,22 @@ const PricingCategoryIntro = ({
return ( return (
<div className='mb-4'> <div className='mb-4'>
<Card className="!rounded-2xl" bodyStyle={{ padding: '24px' }}> <Card className="!rounded-2xl" bodyStyle={{ padding: '16px' }}>
<div className="flex items-start space-x-4"> <div className="flex items-start space-x-3 md:space-x-4">
{/* 分类图标 */} {/* 分类图标 */}
{renderCategoryAvatar(currentCategory)} <div className="flex-shrink-0">
{renderCategoryAvatar(currentCategory)}
</div>
{/* 分类信息 */} {/* 分类信息 */}
<div className="flex-1"> <div className="flex-1 min-w-0">
<div className="flex items-center space-x-3 mb-2"> <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 mb-2">
<h2 className="text-xl font-bold text-gray-900">{currentCategory.label}</h2> <h2 className="text-lg sm:text-xl font-bold text-gray-900 truncate">{currentCategory.label}</h2>
<Tag color="white" shape="circle" size="small"> <Tag color="white" shape="circle" size="small" className="self-start sm:self-center">
{t('共 {{count}} 个模型', { count: modelCount })} {t('共 {{count}} 个模型', { count: modelCount })}
</Tag> </Tag>
</div> </div>
<p className="text-sm text-gray-600 leading-relaxed"> <p className="text-xs sm:text-sm text-gray-600 leading-relaxed">
{getCategoryDescription(activeKey)} {getCategoryDescription(activeKey)}
</p> </p>
</div> </div>
......
web/src/components/table/model-pricing/layout/header/PricingCategoryIntroSkeleton.jsx
...@@ -25,10 +25,10 @@ const PricingCategoryIntroSkeleton = ({ ...@@ -25,10 +25,10 @@ const PricingCategoryIntroSkeleton = ({
}) => { }) => {
const placeholder = ( const placeholder = (
<div className='mb-4'> <div className='mb-4'>
<Card className="!rounded-2xl" bodyStyle={{ padding: '24px' }}> <Card className="!rounded-2xl" bodyStyle={{ padding: '16px' }}>
<div className="flex items-start space-x-4"> <div className="flex items-start space-x-3 md:space-x-4">
{/* 分类图标骨架 */} {/* 分类图标骨架 */}
<div className="min-w-16 h-16 rounded-2xl bg-white shadow-sm flex items-center justify-center px-2"> <div className="flex-shrink-0 min-w-16 h-16 rounded-2xl bg-white shadow-md flex items-center justify-center px-2">
{isAllModels ? ( {isAllModels ? (
<div className="flex items-center"> <div className="flex items-center">
{Array.from({ length: 5 }).map((_, index) => ( {Array.from({ length: 5 }).map((_, index) => (
...@@ -50,8 +50,8 @@ const PricingCategoryIntroSkeleton = ({ ...@@ -50,8 +50,8 @@ const PricingCategoryIntroSkeleton = ({
</div> </div>
{/* 分类信息骨架 */} {/* 分类信息骨架 */}
<div className="flex-1"> <div className="flex-1 min-w-0">
<div className="flex items-center space-x-3 mb-2"> <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 mb-2">
<Skeleton.Title active style={{ width: 120, height: 24, marginBottom: 0 }} /> <Skeleton.Title active style={{ width: 120, height: 24, marginBottom: 0 }} />
<Skeleton.Button active size="small" style={{ width: 80, height: 20, borderRadius: 12 }} /> <Skeleton.Button active size="small" style={{ width: 80, height: 20, borderRadius: 12 }} />
</div> </div>
......
web/src/components/table/model-pricing/view/card/PricingCardView.jsx
...@@ -26,7 +26,7 @@ import PricingCardSkeleton from './PricingCardSkeleton'; ...@@ -26,7 +26,7 @@ import PricingCardSkeleton from './PricingCardSkeleton';
import { useMinimumLoadingTime } from '../../../../../hooks/common/useMinimumLoadingTime'; import { useMinimumLoadingTime } from '../../../../../hooks/common/useMinimumLoadingTime';
const CARD_STYLES = { const CARD_STYLES = {
container: "w-12 h-12 rounded-2xl flex items-center justify-center relative shadow-sm", container: "w-12 h-12 rounded-2xl flex items-center justify-center relative shadow-md",
icon: "w-8 h-8 flex items-center justify-center", icon: "w-8 h-8 flex items-center justify-center",
selected: "border-blue-500 bg-blue-50", selected: "border-blue-500 bg-blue-50",
default: "border-gray-200 hover:border-gray-300" default: "border-gray-200 hover:border-gray-300"
......
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