From a7b9b2492ee7e33b2b0a6815bb9a666b13e05f98 Mon Sep 17 00:00:00 2001 From: QihuAI Design Date: Mon, 13 Jul 2026 16:21:42 +0800 Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E9=A6=96=E9=A1=B5=E6=94=B9?= =?UTF-8?q?=E7=89=88=E2=80=94=E2=80=94Hero=E5=90=88=E5=B9=B6=E5=B9=BF?= =?UTF-8?q?=E5=91=8A=E4=BD=8D(2/3)=E3=80=81=E5=8E=BBPaaS/=E5=8E=BB?= =?UTF-8?q?=E5=AF=B9=E8=AF=9D=E5=8D=A1=E3=80=81=E4=BB=B7=E5=80=BC=E5=8C=BA?= =?UTF-8?q?/=E6=8A=80=E8=83=BD=E6=A6=9C/=E5=BA=94=E7=94=A8=E4=B8=AD?= =?UTF-8?q?=E5=BF=83=E6=96=87=E6=A1=88=E3=80=81=E6=BA=90index.html?= =?UTF-8?q?=E5=8E=BBHashRouter=E8=84=9A=E6=9C=AC=E3=80=81prerender?= =?UTF-8?q?=E5=8E=BB=E9=87=8D=E6=B3=A8=E5=85=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/index.html | 8 +-- frontend/prerender-entry.tsx | 11 ++++ frontend/prerender.js | 22 +++++--- frontend/src/pages/front/LandingPage.css | 23 +++----- frontend/src/pages/front/LandingPage.tsx | 72 ++++++++++-------------- 5 files changed, 64 insertions(+), 72 deletions(-) create mode 100644 frontend/prerender-entry.tsx diff --git a/frontend/index.html b/frontend/index.html index ef9bb6d..8ef8446 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -4,16 +4,10 @@ - Qihu-AIFlow - 智能自动化PaaS平台 + 七虎AI
- diff --git a/frontend/prerender-entry.tsx b/frontend/prerender-entry.tsx new file mode 100644 index 0000000..49a9686 --- /dev/null +++ b/frontend/prerender-entry.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { MemoryRouter } from 'react-router-dom'; +import LandingPage from '@/pages/front/LandingPage'; + +export function App() { + return React.createElement( + MemoryRouter, + { initialEntries: ['/'] }, + React.createElement(LandingPage) + ); +} diff --git a/frontend/prerender.js b/frontend/prerender.js index 13f0b4c..d2514be 100644 --- a/frontend/prerender.js +++ b/frontend/prerender.js @@ -39,9 +39,9 @@ if (html.includes(rootOpen)) { '
' + ssrHtml + '
'); } -// 4) 注入 SEO/GEO 元数据（head 中的 JSON-LD 在 JS 挂载后仍保留；#root 内由组件渲染的 JSON-LD 供非JS爬虫读取） -const title = '七虎AI · 个人体验 AI、办公提效与 AI 创收的一站式 PaaS 平台'; -const desc = '七虎AI 是面向个人与职场用户的 AI PaaS 平台：低价订阅无限 Token、垂直办公模板、可交易技能市场、AI 创作试炼场与低成本养模型，让每个人用 AI 把事做成。'; +// 4) SEO/GEO 元数据：替换已有 title/description（避免重复），再注入 og/canonical/JSON-LD +const title = '七虎AI · 个人体验 AI、办公提效与 AI 创收的一站式平台'; +const desc = '七虎AI 是面向个人与职场用户的 AI 平台：低价订阅无限 Token、垂直办公模板、可交易技能市场、AI 创作试炼场与低成本养模型，让每个人用 AI 把事做成。'; const jsonLd = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', @@ -52,9 +52,15 @@ const jsonLd = { aggregateRating: { '@type': 'AggregateRating', ratingValue: '4.8', reviewCount: '1000' }, url: 'https://ai.qihuyun.com/', }; -const headInject = [ - ` ${title}`, - ` `, +// 替换/新增 title 与 description（避免与源模板重复） +html = html.replace(/[\s\S]*?<\/title>/, ` <title>${title}`); +if (/]*>/, ` `); +} else { + html = html.replace('', ` \n `); +} +// 注入 og / canonical / JSON-LD（仅在尚不存在时，防止重复注入） +const extra = [ ` `, ` `, ` `, @@ -62,7 +68,9 @@ const headInject = [ ` `, ` `, ].join('\n'); -html = html.replace('', headInject + '\n '); +if (!html.includes('rel="canonical"')) { + html = html.replace('', extra + '\n '); +} fs.writeFileSync(path.join(OUT, 'index.html'), html); diff --git a/frontend/src/pages/front/LandingPage.css b/frontend/src/pages/front/LandingPage.css index d33f9b2..5ce91d2 100644 --- a/frontend/src/pages/front/LandingPage.css +++ b/frontend/src/pages/front/LandingPage.css @@ -73,7 +73,7 @@ } .lp-hero-grid { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-2xl); - display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-4xl); align-items: center; + display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-4xl); align-items: center; } .lp-eyebrow { display: inline-block; font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); @@ -89,19 +89,12 @@ .lp-stat-num { font-size: var(--text-xl); font-weight: 800; color: var(--color-text-primary); } .lp-stat-label { font-size: var(--text-sm); color: var(--color-text-tertiary); margin-top: 2px; } -.lp-hero-visual { position: relative; min-height: 320px; display: flex; align-items: center; justify-content: center; } -.lp-hero-glow { - position: absolute; width: 320px; height: 320px; border-radius: 50%; - background: radial-gradient(circle, rgba(91,95,237,.22), transparent 70%); - filter: blur(8px); -} -.lp-hero-card { position: relative; width: 100%; max-width: 380px; border-radius: var(--radius-xl); padding: var(--space-2xl); display: flex; flex-direction: column; gap: var(--space-md); } -.lp-hc-row { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); color: var(--color-text-secondary); font-weight: 500; } -.lp-hc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 3px var(--color-success-light); } -.lp-hc-bubble { background: var(--color-bg-tertiary); border-radius: var(--radius-lg); padding: var(--space-md); font-size: var(--text-sm); color: var(--color-text-primary); } -.lp-hc-bubble-ai { background: var(--color-accent-light); color: var(--color-accent); font-weight: 500; } -.lp-hc-bar { height: 6px; border-radius: var(--radius-full); background: var(--color-bg-tertiary); overflow: hidden; } -.lp-hc-bar > span { display: block; height: 100%; width: 70%; border-radius: var(--radius-full); background: linear-gradient(90deg, #5B5FED, #4F8DF9); } +.lp-hero-ad { display: flex; flex-direction: column; } +.lp-ad-head { display: flex; align-items: baseline; gap: var(--space-md); margin-bottom: var(--space-lg); flex-wrap: wrap; } +.lp-ad-title { font-size: var(--text-lg); font-weight: 700; color: var(--color-text-primary); } +.lp-ad-sub { font-size: var(--text-sm); color: var(--color-text-tertiary); } +.lp-hero-ad .lp-carousel-card { min-height: 300px; } +.lp-hero-ad .lp-cc-content { max-width: 64%; } /* ===== 轮播广告位 ===== */ .lp-band { padding: var(--space-4xl) 0; } @@ -110,7 +103,7 @@ .lp-slide { min-width: 100%; padding: 0 var(--space-xs); } .lp-carousel-card { border-radius: var(--radius-xl); padding: var(--space-4xl); color: #fff; position: relative; overflow: hidden; - display: flex; justify-content: space-between; align-items: center; min-height: 200px; + display: flex; justify-content: space-between; align-items: center; min-height: 280px; box-shadow: var(--shadow-lg); } .lp-cc-content { position: relative; z-index: 2; max-width: 60%; } diff --git a/frontend/src/pages/front/LandingPage.tsx b/frontend/src/pages/front/LandingPage.tsx index 7790623..828a5f9 100644 --- a/frontend/src/pages/front/LandingPage.tsx +++ b/frontend/src/pages/front/LandingPage.tsx @@ -51,11 +51,11 @@ const valueProps = [ title: '可交易的技能市场', kw: 'AI变现', desc: '把自己打磨的技能上架交易，按订阅 / 下载获得收益，能力即资产。' }, { d: <>, - title: 'AI 创作试炼场', kw: '', - desc: '写小说、做漫剧、谱音乐——低成本试错，让创作想法快速跑通。' }, + title: 'AI 创作应用基地', kw: '', + desc: '写小说、做漫剧、谱音乐——在 AI 试炼场低成本试错，让创作想法快速跑通。' }, { d: <>, - title: '低成本养龙虾', kw: '', - desc: '低成本微调 / 托管你的专属模型，把"养模型"变成可负担的日常。' }, + title: '低成本养模型', kw: '', + desc: '低成本微调 / 托管你的专属模型——养马、养龙虾、养螃蟹，把"养模型"变成可负担的日常。' }, ]; const features = [ @@ -64,7 +64,7 @@ const features = [ { d: <>, title: '私有知识库', desc: '上传文档构建专属知识库，AI 回答基于你的内容，更精准可靠。' }, { d: <>, - title: '技能 / 应用市场', desc: '丰富的 Skills、Agent、MCP 应用，即装即用，一键接入工作流。' }, + title: '技能 / 应用中心', desc: '丰富的 Skills、Agent、MCP 应用，即装即用，一键接入工作流。' }, { d: <>, title: 'Token 驾驶舱', desc: '实时监控 Token 消耗，费用透明可控，每一笔都有据可查。' }, { d: <>, @@ -96,10 +96,10 @@ const LandingPage: React.FC = () => { // SEO / GEO：动态写入标题与描述 useEffect(() => { - document.title = '七虎AI · 个人体验 AI、办公提效与 AI 创收的一站式 PaaS 平台'; + document.title = '七虎AI · 个人体验 AI、办公提效与 AI 创收的一站式平台'; let meta = document.querySelector('meta[name="description"]'); if (!meta) { meta = document.createElement('meta'); meta.setAttribute('name', 'description'); document.head.appendChild(meta); } - meta.setAttribute('content', '七虎AI 是面向个人与职场用户的 AI PaaS 平台：低价订阅无限 Token、垂直办公模板、可交易技能市场、AI 创作试炼场与低成本养模型，让每个人用 AI 把事做成。'); + meta.setAttribute('content', '七虎AI 是面向个人与职场用户的 AI 平台：低价订阅无限 Token、垂直办公模板、可交易技能市场、AI 创作试炼场与低成本养模型，让每个人用 AI 把事做成。'); }, []); const goLogin = () => navigate('/login'); @@ -151,7 +151,7 @@ const LandingPage: React.FC = () => { 平台定位 平台价值 热门技能 - 应用市场 + 应用中心 平台能力 @@ -170,7 +170,7 @@ const LandingPage: React.FC = () => { setMobileMenu(false))}>平台定位 setMobileMenu(false))}>平台价值 setMobileMenu(false))}>热门技能 - setMobileMenu(false))}>应用市场 + setMobileMenu(false))}>应用中心 setMobileMenu(false))}>平台能力
@@ -181,19 +181,18 @@ const LandingPage: React.FC = () => {
- {/* Hero */} + {/* Hero：左=标题文案(1/3)，右=精选推荐广告位(2/3) */}
-
AI PaaS 平台

让每个人都能
用 AI 把事做成

七虎AI 是个人体验 AI、办公提效、AI 创收与自我提升的一站式交互平台。 - 低价订阅 无限Token，提供垂直可用的办公模板、可交易的市场与低成本养模型能力。 + 提供垂直可用的办公模板、可交易的市场与低成本养模型能力，帮你把 AI 用进日常。

- +
3,500+活跃用户
@@ -202,27 +201,14 @@ const LandingPage: React.FC = () => {
- {/* Hero 右侧：品牌渐变光斑 + 玻璃卡视觉 */} -
-
-
-
AI 对话进行中
-
帮我把这份文档整理成周报大纲
-
已生成 5 个章节，并附数据看板建议 ✓
-
-
-
-
-
- - {/* 轮播广告位（技能展示） */} - {banners.length > 0 && ( -
-
-
-

精选推荐

-

平台热门技能广告位，提升展现与下载

-
+ {/* Hero 右侧：精选推荐广告位（占 2/3） */} +
+ {banners.length > 0 && ( +
+ 精选推荐 + 热门技能广告位 · 提升展现与下载 +
+ )}
setIsPaused(true)} onMouseLeave={() => setIsPaused(false)}>
{banners.map(b => ( @@ -248,8 +234,8 @@ const LandingPage: React.FC = () => { )}
-
- )} +
+ {/* 平台定位（痛点） */}
@@ -294,7 +280,7 @@ const LandingPage: React.FC = () => {

热门技能榜 · Top 5

-

按下载 / 安装量排行，看看大家都在用哪些能力

+

涵盖 Skills、Agent、MCP 服务，按下载 / 安装量排行，看看大家都在用哪些能力

    {topSkills.map((app, i) => ( @@ -318,12 +304,12 @@ const LandingPage: React.FC = () => {
- {/* 应用市场预览 */} + {/* 应用中心预览 */}
-

应用市场

-

丰富的 Skills、Agent、MCP 应用，一键接入你的工作流

+

应用中心

+

平台为订阅会员提供的免费 AI 应用，帮你快速进入创作与工作场景

{publishedApps.map(app => ( @@ -331,7 +317,7 @@ const LandingPage: React.FC = () => { onKeyDown={e => e.key === 'Enter' && goLogin()}>
{typeLabels[app.type]} - {app.price > 0 && {app.price} 元} + 会员免费

{app.name}

@@ -392,9 +378,9 @@ const LandingPage: React.FC = () => { 七虎AI
-

个人体验 AI、办公提效与 AI 创收的一站式 PaaS 平台。

+

个人体验 AI、办公提效与 AI 创收的一站式平台。

- +