Bladeren bron

style: 重构首页组件样式与布局

- HeroSection: 调整标题字体大小与布局,修复缩进一致性
- ToolsSection: 改为 icon+title 同行布局,更新工具内容
- 移除 ChannelPricingCard 编辑图标和未使用导入
- 统一部分标题添加 font-bold 样式
- 临时注释部分展示元素(版权信息、核心价值标签等)

Co-Authored-By: Claude <noreply@anthropic.com>
feat/alipay-payment
fengsilin 1 maand geleden
bovenliggende
commit
f700adabb5
12 gewijzigde bestanden met toevoegingen van 50 en 65 verwijderingen
  1. BIN
      web/public/images/create.png
  2. BIN
      web/public/images/openclaw-2.png
  3. BIN
      web/public/images/openclaw-3.jpg
  4. BIN
      web/public/images/openclaw.png
  5. +2
    -7
      web/src/components/table/model-pricing/modal/components/ChannelPricingCard.jsx
  6. +12
    -12
      web/src/pages/Home/components/CTASection.jsx
  7. +5
    -6
      web/src/pages/Home/components/HeroSection.jsx
  8. +5
    -5
      web/src/pages/Home/components/HomePageFooter.jsx
  9. +1
    -1
      web/src/pages/Home/components/PartnersSection.jsx
  10. +21
    -30
      web/src/pages/Home/components/ToolsSection.jsx
  11. +3
    -3
      web/src/pages/Home/components/ValueSection.jsx
  12. +1
    -1
      web/src/pages/Home/components/WorkflowSection.jsx

BIN
web/public/images/create.png Bestand weergeven

Voor Na
Breedte: 852  |  Hoogte: 803  |  Grootte: 19 KiB

BIN
web/public/images/openclaw-2.png Bestand weergeven

Voor Na
Breedte: 815  |  Hoogte: 785  |  Grootte: 23 KiB

BIN
web/public/images/openclaw-3.jpg Bestand weergeven

Voor Na
Breedte: 593  |  Hoogte: 474  |  Grootte: 17 KiB

BIN
web/public/images/openclaw.png Bestand weergeven

Voor Na
Breedte: 224  |  Hoogte: 200  |  Grootte: 7.3 KiB

+ 2
- 7
web/src/components/table/model-pricing/modal/components/ChannelPricingCard.jsx Bestand weergeven

@@ -18,8 +18,8 @@ For commercial licensing, please contact support@quantumnous.com
*/

import React, { useState, useEffect, useMemo } from 'react';
import { Card, Avatar, Typography, Table, Tag, Spin, Tooltip } from '@douyinfe/semi-ui';
import { IconServer, IconEditStroked } from '@douyinfe/semi-icons';
import { Card, Avatar, Typography, Table, Tag, Spin } from '@douyinfe/semi-ui';
import { IconServer } from '@douyinfe/semi-icons';
import { API } from '../../../../../helpers';

const { Text } = Typography;
@@ -139,11 +139,6 @@ const ChannelPricingCard = ({
{tag.name}
</Tag>
))}
{record.hasCustomPricing && (
<Tooltip content={t('已设置自定义定价')}>
<IconEditStroked size='small' style={{ color: 'var(--semi-color-primary)' }} />
</Tooltip>
)}
</div>
),
},


+ 12
- 12
web/src/pages/Home/components/CTASection.jsx Bestand weergeven

@@ -58,18 +58,18 @@ const CTASection = () => {
{t('立即开始')}
</Button>
</Link>
{docsLink && (
<Button
type="primary"
theme="light"
size="large"
className="flex items-center !rounded-3xl px-6 py-2"
icon={<IconFile />}
onClick={() => window.open(docsLink, '_blank')}
>
{t('查看文档')}
</Button>
)}
{/*{docsLink && (*/}
{/* <Button*/}
{/* type="primary"*/}
{/* theme="light"*/}
{/* size="large"*/}
{/* className="flex items-center !rounded-3xl px-6 py-2"*/}
{/* icon={<IconFile />}*/}
{/* onClick={() => window.open(docsLink, '_blank')}*/}
{/* >*/}
{/* {t('查看文档')}*/}
{/* </Button>*/}
{/*)}*/}
</div>
</div>
</div>


+ 5
- 6
web/src/pages/Home/components/HeroSection.jsx Bestand weergeven

@@ -64,13 +64,13 @@ const HeroSection = () => {
},
{
icon: <IconCloudStroked size={18} />,
title: t('智能限流'),
title: t('安全可控'),
description: t('多维策略保障核心业务优先级,避免突发拥堵。'),
},
];

const stats = [
{ value: '30+', label: t('可覆盖模型') },
{ value: '100+', label: t('可覆盖模型') },
{ value: '99.9%', label: t('SLA 可用性') },
{ value: '7', label: t('多区域节点') },
];
@@ -92,13 +92,12 @@ const HeroSection = () => {

{/* 大标题 */}
<div
className={`text-4xl font-bold text-semi-color-text-0 leading-tight md:text-5xl lg:text-6xl ${
className={`text-2xl font-bold text-semi-color-text-0 leading-tight md:text-4xl lg:text-5xl ${
isChinese ? 'tracking-wide md:tracking-wider' : ''
}`}
>
{t('统一的大模型接口网关')}
<br />
<span className="shine-text">{t('链接全球 AI 能力')}</span>
<span className="mb-8 block whitespace-nowrap">{t('统一的大模型接口网关')}</span>
<span className="shine-text block whitespace-nowrap">{t('链接全球 AI 能力')}</span>
</div>

{/* 描述 */}


+ 5
- 5
web/src/pages/Home/components/HomePageFooter.jsx Bestand weergeven

@@ -60,11 +60,11 @@ const HomePageFooter = () => {
<div className="border-t border-semi-color-border pt-6">
<div className="flex flex-col items-center justify-between gap-4 md:flex-row">
{/* 版权信息 */}
<div className="flex flex-col items-center gap-3 md:flex-row">
<span className="text-sm text-semi-color-text-1">
© {currentYear} {systemName}. {t('版权所有')}
</span>
</div>
{/*<div className="flex flex-col items-center gap-3 md:flex-row">*/}
{/* <span className="text-sm text-semi-color-text-1">*/}
{/* © {currentYear} {systemName}. {t('版权所有')}*/}
{/* </span>*/}
{/*</div>*/}

{/* 附加信息 */}
{footerInfo && (


+ 1
- 1
web/src/pages/Home/components/PartnersSection.jsx Bestand weergeven

@@ -76,7 +76,7 @@ const PartnersSection = () => {
<div className="mx-auto w-full max-w-6xl px-5 py-16 md:px-6 lg:px-8">
{/* 标题区域 */}
<div className="text-center">
<Text className="text-sm uppercase tracking-widest text-semi-color-text-2">
<Text className="text-sm font-bold uppercase tracking-widest text-semi-color-text-2">
{t('生态伙伴')}
</Text>
<Title heading={2} className="mt-3 text-3xl font-semibold md:text-4xl">


+ 21
- 30
web/src/pages/Home/components/ToolsSection.jsx Bestand weergeven

@@ -29,33 +29,24 @@ const ToolCard = ({ icon, brand, brandColor, title, description, link, glowClass
};

return (
<div className="group cursor-pointer">
<div className="group cursor-pointer h-full">
<div
className={`rounded-2xl sm:rounded-[2rem] border bg-white border-black/5 p-8 sm:p-10 lg:p-12 shadow-sm transition-all duration-500 hover:shadow-2xl ${brandColorClasses[glowClass]}`}
className={`h-full rounded-2xl sm:rounded-[2rem] border bg-white border-black/5 p-8 sm:p-10 lg:p-12 shadow-sm transition-all duration-500 hover:shadow-2xl ${brandColorClasses[glowClass]}`}
>
{/* Logo */}
<div className="mb-6 sm:mb-8">
{/* Logo + Title */}
<div className="mb-3 sm:mb-4 flex items-center gap-3 sm:gap-4">
<img
src={icon}
alt={title}
className="h-10 w-10 sm:h-12 sm:w-12 object-contain"
className="h-8 w-8 object-contain"
/>
<h3 className="text-xl sm:text-2xl font-bold tracking-tight line-clamp-1">
{title}
</h3>
</div>

{/* Brand Tag */}
<span
className={`mb-4 sm:mb-6 block text-[10px] sm:text-xs font-black uppercase tracking-[0.15em] ${brandColorClasses[brandColor].split(' ')[0]}`}
>
{brand}
</span>

{/* Title */}
<h3 className="mb-3 sm:mb-4 text-xl sm:text-2xl font-bold tracking-tight">
{title}
</h3>

{/* Description */}
<p className="mb-6 sm:mb-8 text-sm sm:text-base font-light leading-relaxed opacity-40">
<p className="mb-6 sm:mb-8 text-sm sm:text-base font-light leading-relaxed opacity-40 line-clamp-3">
{description}
</p>

@@ -81,26 +72,26 @@ const ToolsSection = () => {
icon: '/images/Anthropic.png',
brand: 'Anthropic',
brandColor: 'amber',
title: 'Claude Code',
description: '代码执行能力强劲,高效理解需求,快速生成精准代码。',
title: 'AI编程',
description: '无缝支持AI编程工具,涵盖顶级模型。',
link: '/pricing',
glowClass: 'amber',
},
{
icon: '/images/openai.png',
brand: 'OpenAI',
icon: '/images/create.png',
brand: ' ',
brandColor: 'blue',
title: 'CodeX',
description: '深度思考模式,慢工出细活,复杂逻辑处理更严谨。',
title: '创作',
description: '顶级多模态模型,统一API使用。',
link: '/pricing',
glowClass: 'blue',
},
{
icon: '/images/gemini-ai.png',
brand: 'Google AI',
icon: '/images/openclaw-3.jpg',
brand: 'OpenClaw',
brandColor: 'purple',
title: 'Gemini CLI',
description: '前端能力顶尖,UI/UX 设计与实现一步到位,视觉效果出众。',
title: '龙虾',
description: '无缝接入龙虾,顶级模型构建聪明大脑。',
link: '/pricing',
glowClass: 'purple',
},
@@ -108,7 +99,7 @@ const ToolsSection = () => {

return (
<section className="home-snap-section bg-[var(--semi-color-bg-0)]">
<div className="mx-auto max-w-[1400px] px-4 sm:px-6 lg:px-8">
<div className="mx-auto w-full max-w-6xl px-5 py-16 md:px-6 lg:px-8">
{/* Header */}
<div className="mb-16 flex flex-col items-start justify-between gap-4 sm:mb-20 sm:flex-row sm:items-end sm:gap-6 lg:mb-24">
<h2 className="whitespace-pre-line text-[clamp(1.75rem,5vw,3.5rem)] font-black tracking-[-0.03em]">
@@ -120,7 +111,7 @@ const ToolsSection = () => {
</div>

{/* Cards Grid */}
<div className="grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-3">
<div className="grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-3 items-stretch">
{tools.map((tool, index) => (
<ToolCard key={index} {...tool} />
))}


+ 3
- 3
web/src/pages/Home/components/ValueSection.jsx Bestand weergeven

@@ -64,9 +64,9 @@ const ValueSection = () => {
<div className="mx-auto w-full max-w-6xl px-5 py-16 md:px-6 lg:px-8">
{/* 标题区域 */}
<div>
<Text className="text-sm uppercase tracking-widest text-semi-color-text-2">
{t('核心价值')}
</Text>
{/*<Text className="text-sm uppercase tracking-widest text-semi-color-text-2">*/}
{/* {t('核心价值')}*/}
{/*</Text>*/}
<Title heading={2} className="mt-3 text-3xl font-semibold md:text-4xl">
{t('让团队稳定使用大模型,更快落地 AI 创新')}
</Title>


+ 1
- 1
web/src/pages/Home/components/WorkflowSection.jsx Bestand weergeven

@@ -57,7 +57,7 @@ const WorkflowSection = () => {
<div className="mx-auto w-full max-w-6xl px-5 py-16 md:px-6 lg:px-8">
{/* 标题区域 */}
<div>
<Text className="text-sm uppercase tracking-widest text-semi-color-text-2">
<Text className="text-sm font-bold uppercase tracking-widest text-semi-color-text-2">
{t('工作流')}
</Text>
<Title heading={2} className="mt-3 text-3xl font-semibold md:text-4xl">


Laden…
Annuleren
Opslaan