- HeroSection: 调整标题字体大小与布局,修复缩进一致性 - ToolsSection: 改为 icon+title 同行布局,更新工具内容 - 移除 ChannelPricingCard 编辑图标和未使用导入 - 统一部分标题添加 font-bold 样式 - 临时注释部分展示元素(版权信息、核心价值标签等) Co-Authored-By: Claude <noreply@anthropic.com>feat/alipay-payment
| @@ -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> | ||||
| ), | ), | ||||
| }, | }, | ||||
| @@ -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> | ||||
| @@ -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> | ||||
| {/* 描述 */} | {/* 描述 */} | ||||
| @@ -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 && ( | ||||
| @@ -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"> | ||||
| @@ -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} /> | ||||
| ))} | ))} | ||||
| @@ -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> | ||||
| @@ -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"> | ||||