Просмотр исходного кода

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

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

Co-Authored-By: Claude <noreply@anthropic.com>
feat/alipay-payment
fengsilin 1 месяц назад
Родитель
Сommit
f700adabb5
12 измененных файлов: 50 добавлений и 65 удалений
  1. Двоичные данные
      web/public/images/create.png
  2. Двоичные данные
      web/public/images/openclaw-2.png
  3. Двоичные данные
      web/public/images/openclaw-3.jpg
  4. Двоичные данные
      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

Двоичные данные
web/public/images/create.png Просмотреть файл

До После
Ширина: 852  |  Высота: 803  |  Размер: 19 KiB

Двоичные данные
web/public/images/openclaw-2.png Просмотреть файл

До После
Ширина: 815  |  Высота: 785  |  Размер: 23 KiB

Двоичные данные
web/public/images/openclaw-3.jpg Просмотреть файл

До После
Ширина: 593  |  Высота: 474  |  Размер: 17 KiB

Двоичные данные
web/public/images/openclaw.png Просмотреть файл

До После
Ширина: 224  |  Высота: 200  |  Размер: 7.3 KiB

+ 2
- 7
web/src/components/table/model-pricing/modal/components/ChannelPricingCard.jsx Просмотреть файл

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


import React, { useState, useEffect, useMemo } from 'react'; 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'; import { API } from '../../../../../helpers';


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


+ 12
- 12
web/src/pages/Home/components/CTASection.jsx Просмотреть файл

@@ -58,18 +58,18 @@ const CTASection = () => {
{t('立即开始')} {t('立即开始')}
</Button> </Button>
</Link> </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> </div>
</div> </div>


+ 5
- 6
web/src/pages/Home/components/HeroSection.jsx Просмотреть файл

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


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


{/* 大标题 */} {/* 大标题 */}
<div <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' : '' 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> </div>


{/* 描述 */} {/* 描述 */}


+ 5
- 5
web/src/pages/Home/components/HomePageFooter.jsx Просмотреть файл

@@ -60,11 +60,11 @@ const HomePageFooter = () => {
<div className="border-t border-semi-color-border pt-6"> <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 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 && ( {footerInfo && (


+ 1
- 1
web/src/pages/Home/components/PartnersSection.jsx Просмотреть файл

@@ -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="mx-auto w-full max-w-6xl px-5 py-16 md:px-6 lg:px-8">
{/* 标题区域 */} {/* 标题区域 */}
<div className="text-center"> <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('生态伙伴')} {t('生态伙伴')}
</Text> </Text>
<Title heading={2} className="mt-3 text-3xl font-semibold md:text-4xl"> <Title heading={2} className="mt-3 text-3xl font-semibold md:text-4xl">


+ 21
- 30
web/src/pages/Home/components/ToolsSection.jsx Просмотреть файл

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


return ( return (
<div className="group cursor-pointer">
<div className="group cursor-pointer h-full">
<div <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 <img
src={icon} src={icon}
alt={title} 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> </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 */} {/* 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} {description}
</p> </p>


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


return ( return (
<section className="home-snap-section bg-[var(--semi-color-bg-0)]"> <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 */} {/* 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"> <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]"> <h2 className="whitespace-pre-line text-[clamp(1.75rem,5vw,3.5rem)] font-black tracking-[-0.03em]">
@@ -120,7 +111,7 @@ const ToolsSection = () => {
</div> </div>


{/* Cards Grid */} {/* 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) => ( {tools.map((tool, index) => (
<ToolCard key={index} {...tool} /> <ToolCard key={index} {...tool} />
))} ))}


+ 3
- 3
web/src/pages/Home/components/ValueSection.jsx Просмотреть файл

@@ -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 className="mx-auto w-full max-w-6xl px-5 py-16 md:px-6 lg:px-8">
{/* 标题区域 */} {/* 标题区域 */}
<div> <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"> <Title heading={2} className="mt-3 text-3xl font-semibold md:text-4xl">
{t('让团队稳定使用大模型,更快落地 AI 创新')} {t('让团队稳定使用大模型,更快落地 AI 创新')}
</Title> </Title>


+ 1
- 1
web/src/pages/Home/components/WorkflowSection.jsx Просмотреть файл

@@ -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 className="mx-auto w-full max-w-6xl px-5 py-16 md:px-6 lg:px-8">
{/* 标题区域 */} {/* 标题区域 */}
<div> <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('工作流')} {t('工作流')}
</Text> </Text>
<Title heading={2} className="mt-3 text-3xl font-semibold md:text-4xl"> <Title heading={2} className="mt-3 text-3xl font-semibold md:text-4xl">


Загрузка…
Отмена
Сохранить