oadmin/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ refactor(home): redesign homepage layout with centered content and improved responsiveness

Browse Source 
- Remove example image and right-side image section for cleaner layout
- Center all content vertically and horizontally on the page
- Implement comprehensive responsive design using Tailwind CSS breakpoints
  - Typography scales from text-3xl to xl:text-6xl across screen sizes
  - Spacing and padding adjust dynamically (py-12 to lg:py-20)
  - Icon grid adapts from gap-3 to lg:gap-8
- Keep action buttons horizontally aligned on all screen sizes
- Add play icon to "Get Started" button for better UX
- Refactor version display logic:
  - Show version tag only in demo site mode
  - Replace GitHub button text with version number in demo mode
  - Add docs button with same logic as HeaderBar when not in demo mode
- Optimize icon layout with consistent 40px size and responsive containers
- Improve overall mobile-first responsive design from 320px to 1280px+ screens
This commit is contained in:
Apple\Apple
2025-06-09 13:43:50 +08:00
parent 587f420344
commit 7d8a47123d
2 changed files with 53 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
web/public/example.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 550 KiB

114
web/src/pages/Home/index.js
View File

@@ -4,8 +4,7 @@ import { API, showError, isMobile } from '../../helpers';
import { StatusContext } from '../../context/Status'; import { StatusContext } from '../../context/Status';
import { marked } from 'marked'; import { marked } from 'marked';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { IconGithubLogo } from '@douyinfe/semi-icons'; import { IconGithubLogo, IconPlay, IconFile } from '@douyinfe/semi-icons';
import exampleImage from '/example.png';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import NoticeModal from '../../components/layout/NoticeModal'; import NoticeModal from '../../components/layout/NoticeModal';
import { Moonshot, OpenAI, XAI, Zhipu, Volcengine, Cohere, Claude, Gemini, Suno, Minimax, Wenxin, Spark, Qingyan, DeepSeek, Qwen, Midjourney, Grok, AzureAI, Hunyuan, Xinference } from '@lobehub/icons'; import { Moonshot, OpenAI, XAI, Zhipu, Volcengine, Cohere, Claude, Gemini, Suno, Minimax, Wenxin, Spark, Qingyan, DeepSeek, Qwen, Midjourney, Grok, AzureAI, Hunyuan, Xinference } from '@lobehub/icons';
@@ -20,6 +19,7 @@ const Home = () => {
const [noticeVisible, setNoticeVisible] = useState(false); const [noticeVisible, setNoticeVisible] = useState(false);
const isDemoSiteMode = statusState?.status?.demo_site_enabled || false; const isDemoSiteMode = statusState?.status?.demo_site_enabled || false;
const docsLink = statusState?.status?.docs_link || '';
useEffect(() => { useEffect(() => {
const checkNoticeAndShow = async () => { const checkNoticeAndShow = async () => {
@@ -85,132 +85,123 @@ const Home = () => {
{homePageContentLoaded && homePageContent === '' ? ( {homePageContentLoaded && homePageContent === '' ? (
<div className="w-full overflow-x-hidden"> <div className="w-full overflow-x-hidden">
{/* Banner 部分 */} {/* Banner 部分 */}
<div className="w-full border-b border-semi-color-border min-h-[500px] md:h-[650px] lg:h-[750px] relative overflow-x-hidden"> <div className="w-full border-b border-semi-color-border min-h-[500px] md:min-h-[600px] lg:min-h-[700px] relative overflow-x-hidden">
<div className="flex flex-col md:flex-row items-center justify-center h-full px-4 py-8 md:py-0"> <div className="flex items-center justify-center h-full px-4 py-12 md:py-16 lg:py-20">
{/* 左侧内容区 */} {/* 居中内容区 */}
<div className="flex-shrink-0 w-full md:w-[480px] md:mr-[60px] lg:mr-[120px] mb-8 md:mb-0"> <div className="flex flex-col items-center justify-center text-center max-w-4xl mx-auto">
<div className="flex items-center gap-2 justify-center md:justify-start"> <div className="flex flex-col items-center justify-center mb-6 md:mb-8">
<h1 className="text-3xl md:text-4xl lg:text-5xl font-semibold text-semi-color-text-0 w-auto leading-normal md:leading-[67px]"> <h1 className="text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-semibold text-semi-color-text-0 leading-tight">
{statusState?.status?.system_name || 'New API'} {statusState?.status?.system_name || 'New API'}
</h1> </h1>
{statusState?.status?.version && (
<Tag color='light-blue' size='large' shape='circle' className="ml-1">
{statusState.status.version}
</Tag>
)}
</div> </div>
<p className="text-base md:text-lg text-semi-color-text-0 mt-4 md:mt-8 w-full md:w-[480px] leading-7 md:leading-8 text-center md:text-left"> <p className="text-base md:text-lg lg:text-xl text-semi-color-text-0 leading-7 md:leading-8 lg:leading-9 max-w-2xl px-4">
{t('新一代大模型网关与AI资产管理系统，一键接入主流大模型，轻松管理您的AI资产')} {t('新一代大模型网关与AI资产管理系统，一键接入主流大模型，轻松管理您的AI资产')}
</p> </p>
{/* 操作按钮 */} {/* 操作按钮 */}
<div className="mt-6 md:mt-10 flex flex-wrap gap-4 justify-center md:justify-start"> <div className="mt-8 md:mt-10 lg:mt-12 flex flex-row gap-4 justify-center items-center">
<Link to="/console"> <Link to="/console">
<Button theme="solid" type="primary" size="large" className="!rounded-3xl"> <Button theme="solid" type="primary" size="large" className="!rounded-3xl px-8 py-2" icon={<IconPlay />}>
{t('开始使用')} {t('开始使用')}
</Button> </Button>
</Link> </Link>
{isDemoSiteMode && ( {isDemoSiteMode && statusState?.status?.version ? (
<Button <Button
size="large" size="large"
className="flex items-center !rounded-3xl" className="flex items-center !rounded-3xl px-6 py-2"
icon={<IconGithubLogo />} icon={<IconGithubLogo />}
onClick={() => window.open('https://github.com/QuantumNous/new-api', '_blank')} onClick={() => window.open('https://github.com/QuantumNous/new-api', '_blank')}
> >
GitHub {statusState.status.version}
</Button> </Button>
) : (
docsLink && (
<Button
size="large"
className="flex items-center !rounded-3xl px-6 py-2"
icon={<IconFile />}
onClick={() => window.open(docsLink, '_blank')}
>
{t('文档')}
</Button>
)
)} )}
</div> </div>
{/* 框架兼容性图标 */} {/* 框架兼容性图标 */}
<div className="mt-8 md:mt-16"> <div className="mt-12 md:mt-16 lg:mt-20 w-full">
<div className="flex items-center mb-3 justify-center md:justify-start"> <div className="flex items-center mb-6 md:mb-8 justify-center">
<Text type="tertiary" className="text-lg md:text-xl font-light"> <Text type="tertiary" className="text-lg md:text-xl lg:text-2xl font-light">
{t('支持众多的大模型供应商')} {t('支持众多的大模型供应商')}
</Text> </Text>
</div> </div>
<div className="flex flex-wrap items-center relative mt-6 md:mt-8 gap-6 md:gap-8 justify-center md:justify-start"> <div className="flex flex-wrap items-center justify-center gap-3 sm:gap-4 md:gap-6 lg:gap-8 max-w-5xl mx-auto px-4">
<div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center"> <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
<Moonshot size={40} /> <Moonshot size={40} />
</div> </div>
<div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center"> <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
<OpenAI size={40} /> <OpenAI size={40} />
</div> </div>
<div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center"> <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
<XAI size={40} /> <XAI size={40} />
</div> </div>
<div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center"> <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
<Zhipu.Color size={40} /> <Zhipu.Color size={40} />
</div> </div>
<div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center"> <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
<Volcengine.Color size={40} /> <Volcengine.Color size={40} />
</div> </div>
<div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center"> <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
<Cohere.Color size={40} /> <Cohere.Color size={40} />
</div> </div>
<div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center"> <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
<Claude.Color size={40} /> <Claude.Color size={40} />
</div> </div>
<div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center"> <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
<Gemini.Color size={40} /> <Gemini.Color size={40} />
</div> </div>
<div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center"> <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
<Suno size={40} /> <Suno size={40} />
</div> </div>
<div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center"> <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
<Minimax.Color size={40} /> <Minimax.Color size={40} />
</div> </div>
<div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center"> <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
<Wenxin.Color size={40} /> <Wenxin.Color size={40} />
</div> </div>
<div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center"> <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
<Spark.Color size={40} /> <Spark.Color size={40} />
</div> </div>
<div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center"> <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
<Qingyan.Color size={40} /> <Qingyan.Color size={40} />
</div> </div>
<div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center"> <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
<DeepSeek.Color size={40} /> <DeepSeek.Color size={40} />
</div> </div>
<div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center"> <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
<Qwen.Color size={40} /> <Qwen.Color size={40} />
</div> </div>
<div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center"> <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
<Midjourney size={40} /> <Midjourney size={40} />
</div> </div>
<div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center"> <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
<Grok size={40} /> <Grok size={40} />
</div> </div>
<div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center"> <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
<AzureAI.Color size={40} /> <AzureAI.Color size={40} />
</div> </div>
<div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center"> <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
<Hunyuan.Color size={40} /> <Hunyuan.Color size={40} />
</div> </div>
<div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center"> <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
<Xinference.Color size={40} /> <Xinference.Color size={40} />
</div> </div>
<div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center"> <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
<Typography.Text className="!text-2xl font-bold">30+</Typography.Text> <Typography.Text className="!text-lg sm:!text-xl md:!text-2xl lg:!text-3xl font-bold">30+</Typography.Text>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{/* 右侧图片区域 - 在小屏幕上隐藏或调整位置 */}
<div className="flex-shrink-0 relative md:mr-[-200px] lg:mr-[-400px] hidden md:block lg:min-w-[1100px]">
<div className="absolute w-[320px] md:w-[500px] lg:w-[640px] h-[320px] md:h-[500px] lg:h-[640px] left-[-25px] md:left-[-40px] lg:left-[-50px] top-[-10px] md:top-[-15px] lg:top-[-20px] opacity-60"
style={{ filter: 'blur(120px)' }}>
<div className="absolute w-[320px] md:w-[400px] lg:w-[474px] h-[320px] md:h-[400px] lg:h-[474px] top-[80px] md:top-[100px] lg:top-[132px] bg-semi-color-primary rounded-full opacity-30"></div>
<div className="absolute w-[320px] md:w-[400px] lg:w-[474px] h-[320px] md:h-[400px] lg:h-[474px] left-[80px] md:left-[120px] lg:left-[166px] bg-semi-color-tertiary rounded-full opacity-30"></div>
</div>
<img
src={exampleImage}
alt="application demo"
className="relative h-[400px] md:h-[600px] lg:h-[721px] ml-[-15px] md:ml-[-20px] lg:ml-[-30px] mt-[-15px] md:mt-[-20px] lg:mt-[-30px]"
/>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -223,7 +214,7 @@ const Home = () => {
/> />
) : ( ) : (
<div <div
className="text-base md:text-lg p-4 md:p-6 overflow-x-hidden" className="text-base md:text-lg p-4 md:p-6 lg:p-8 overflow-x-hidden max-w-6xl mx-auto"
dangerouslySetInnerHTML={{ __html: homePageContent }} dangerouslySetInnerHTML={{ __html: homePageContent }}
></div> ></div>
)} )}
@@ -234,3 +225,4 @@ const Home = () => {
}; };
export default Home; export default Home;