feat(frontend): 首页改版——Hero合并广告位(2/3)、去PaaS/去对话卡、价值区/技能榜/应用中心文案、源index.html去HashRouter脚本、prerender去重注入

frontend/index.html

@@ -4,16 +4,10 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Qihu-AIFlow - 智能自动化PaaS平台</title>
+    <title>七虎AI</title>
   </head>
   <body>
     <div id="root"></div>
-    <script>
-      // HashRouter redirect: ensure hash exists on first load
-      if (!window.location.hash) {
-        window.location.hash = '#/';
-      }
-    </script>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

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)
+  );
+}

frontend/prerender.js

@@ -39,9 +39,9 @@ if (html.includes(rootOpen)) {
     '<div id="root">' + ssrHtml + '</div></body>');
 }
 
-// 4) 注入 SEO/GEO <head> 元数据（head 中的 JSON-LD 在 JS 挂载后仍保留；#root 内由组件渲染的 JSON-LD 供非JS爬虫读取）
+// 4) SEO/GEO <head> 元数据：替换已有 title/description（避免重复），再注入 og/canonical/JSON-LD
-const title = '七虎AI · 个人体验 AI、办公提效与 AI 创收的一站式 PaaS 平台';
+const title = '七虎AI · 个人体验 AI、办公提效与 AI 创收的一站式平台';
-const desc = '七虎AI 是面向个人与职场用户的 AI PaaS 平台：低价订阅无限 Token、垂直办公模板、可交易技能市场、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 与 description（避免与源模板重复）
-  `    <title>${title}</title>`,
+html = html.replace(/<title>[\s\S]*?<\/title>/, `    <title>${title}</title>`);
-  `    <meta name="description" content="${desc}" />`,
+if (/<meta name="description"/.test(html)) {
+  html = html.replace(/<meta name="description"[^>]*>/, `    <meta name="description" content="${desc}" />`);
+} else {
+  html = html.replace('</head>', `    <meta name="description" content="${desc}" />\n  </head>`);
+}
+// 注入 og / canonical / JSON-LD（仅在尚不存在时，防止重复注入）
+const extra = [
   `    <meta property="og:title" content="${title}" />`,
   `    <meta property="og:description" content="${desc}" />`,
   `    <meta property="og:type" content="website" />`,
@@ -62,7 +68,9 @@ const headInject = [
   `    <link rel="canonical" href="https://ai.qihuyun.com/" />`,
   `    <script type="application/ld+json">${JSON.stringify(jsonLd)}</script>`,
 ].join('\n');
-html = html.replace('</head>', headInject + '\n  </head>');
+if (!html.includes('rel="canonical"')) {
+  html = html.replace('</head>', extra + '\n  </head>');
+}
 
 fs.writeFileSync(path.join(OUT, 'index.html'), html);
 

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-ad { display: flex; flex-direction: column; }
-.lp-hero-glow {
+.lp-ad-head { display: flex; align-items: baseline; gap: var(--space-md); margin-bottom: var(--space-lg); flex-wrap: wrap; }
-  position: absolute; width: 320px; height: 320px; border-radius: 50%;
+.lp-ad-title { font-size: var(--text-lg); font-weight: 700; color: var(--color-text-primary); }
-  background: radial-gradient(circle, rgba(91,95,237,.22), transparent 70%);
+.lp-ad-sub { font-size: var(--text-sm); color: var(--color-text-tertiary); }
-  filter: blur(8px);
+.lp-hero-ad .lp-carousel-card { min-height: 300px; }
-}
+.lp-hero-ad .lp-cc-content { max-width: 64%; }
-.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-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%; }

frontend/src/pages/front/LandingPage.tsx

@@ -51,11 +51,11 @@ const valueProps = [
     title: '可交易的技能市场', kw: 'AI变现',
     desc: '把自己打磨的技能上架交易，按订阅 / 下载获得收益，能力即资产。' },
   { d: <><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" /></>,
-    title: 'AI 创作试炼场', kw: '',
+    title: 'AI 创作应用基地', kw: '',
-    desc: '写小说、做漫剧、谱音乐——低成本试错，让创作想法快速跑通。' },
+    desc: '写小说、做漫剧、谱音乐——在 AI 试炼场低成本试错，让创作想法快速跑通。' },
   { d: <><path d="M3 12a9 9 0 1 0 9-9" /><path d="M3 3v6h6" /><path d="M12 7v5l3 3" /></>,
-    title: '低成本养龙虾', kw: '',
+    title: '低成本养模型', kw: '',
-    desc: '低成本微调 / 托管你的专属模型，把"养模型"变成可负担的日常。' },
+    desc: '低成本微调 / 托管你的专属模型——养马、养龙虾、养螃蟹，把"养模型"变成可负担的日常。' },
 ];
 
 const features = [
@@ -64,7 +64,7 @@ const features = [
   { d: <><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" /><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" /></>,
     title: '私有知识库', desc: '上传文档构建专属知识库，AI 回答基于你的内容，更精准可靠。' },
   { d: <><rect x="3" y="3" width="7" height="7" rx="1.2" /><rect x="14" y="3" width="7" height="7" rx="1.2" /><rect x="3" y="14" width="7" height="7" rx="1.2" /><rect x="14" y="14" width="7" height="7" rx="1.2" /></>,
-    title: '技能 / 应用市场', desc: '丰富的 Skills、Agent、MCP 应用，即装即用，一键接入工作流。' },
+    title: '技能 / 应用中心', desc: '丰富的 Skills、Agent、MCP 应用，即装即用，一键接入工作流。' },
   { d: <><circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" /></>,
     title: 'Token 驾驶舱', desc: '实时监控 Token 消耗，费用透明可控，每一笔都有据可查。' },
   { d: <><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M23 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></>,
@@ -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 = () => {
             <a href="#positioning" onClick={anchorClick('positioning')}>平台定位</a>
             <a href="#value" onClick={anchorClick('value')}>平台价值</a>
             <a href="#top" onClick={anchorClick('top')}>热门技能</a>
-            <a href="#market" onClick={anchorClick('market')}>应用市场</a>
+            <a href="#market" onClick={anchorClick('market')}>应用中心</a>
             <a href="#features" onClick={anchorClick('features')}>平台能力</a>
           </nav>
 
@@ -170,7 +170,7 @@ const LandingPage: React.FC = () => {
             <a href="#positioning" onClick={anchorClick('positioning', () => setMobileMenu(false))}>平台定位</a>
             <a href="#value" onClick={anchorClick('value', () => setMobileMenu(false))}>平台价值</a>
             <a href="#top" onClick={anchorClick('top', () => setMobileMenu(false))}>热门技能</a>
-            <a href="#market" onClick={anchorClick('market', () => setMobileMenu(false))}>应用市场</a>
+            <a href="#market" onClick={anchorClick('market', () => setMobileMenu(false))}>应用中心</a>
             <a href="#features" onClick={anchorClick('features', () => setMobileMenu(false))}>平台能力</a>
             <div className="lp-mobile-actions">
               <button className="lp-btn lp-btn-ghost" onClick={() => { setMobileMenu(false); goLogin(); }}>登录</button>
@@ -181,19 +181,18 @@ const LandingPage: React.FC = () => {
       </header>
 
       <main>
-        {/* Hero */}
+        {/* Hero：左=标题文案(1/3)，右=精选推荐广告位(2/3) */}
         <section className="lp-hero">
           <div className="lp-hero-grid">
             <div className="lp-hero-text">
-              <div className="lp-eyebrow">AI PaaS 平台</div>
               <h1 className="lp-title">让每个人都能<br /><span className="lp-accent">用 AI 把事做成</span></h1>
               <p className="lp-desc">
                 七虎AI 是个人体验 AI、办公提效、AI 创收与自我提升的一站式交互平台。
-                低价订阅 <span className="kw">无限Token</span>，提供垂直可用的办公模板、可交易的市场与低成本养模型能力。
+                提供垂直可用的办公模板、可交易的市场与低成本养模型能力，帮你把 AI 用进日常。
               </p>
               <div className="lp-actions">
                 <button className="lp-btn lp-btn-primary lp-btn-lg" onClick={goLogin}>免费开始使用</button>
-                <button className="lp-btn lp-btn-outline lp-btn-lg" onClick={anchorClick('market')}>浏览应用市场</button>
+                <button className="lp-btn lp-btn-outline lp-btn-lg" onClick={anchorClick('market')}>浏览应用中心</button>
               </div>
               <div className="lp-stats">
                 <div><span className="lp-stat-num">3,500+</span><span className="lp-stat-label">活跃用户</span></div>
@@ -202,27 +201,14 @@ const LandingPage: React.FC = () => {
               </div>
             </div>
 
-            {/* Hero 右侧：品牌渐变光斑 + 玻璃卡视觉 */}
+            {/* Hero 右侧：精选推荐广告位（占 2/3） */}
-            <div className="lp-hero-visual" aria-hidden>
+            <div className="lp-hero-ad">
-              <div className="lp-hero-glow" />
+              {banners.length > 0 && (
-              <div className="lp-hero-card glass">
+                <div className="lp-ad-head">
-                <div className="lp-hc-row"><span className="lp-hc-dot" /> AI 对话进行中</div>
+                  <span className="lp-ad-title">精选推荐</span>
-                <div className="lp-hc-bubble">帮我把这份文档整理成周报大纲</div>
+                  <span className="lp-ad-sub">热门技能广告位 · 提升展现与下载</span>
-                <div className="lp-hc-bubble lp-hc-bubble-ai">已生成 5 个章节，并附数据看板建议 ✓</div>
+                </div>
-                <div className="lp-hc-bar"><span /></div>
+              )}
-              </div>
-            </div>
-          </div>
-        </section>
-
-        {/* 轮播广告位（技能展示） */}
-        {banners.length > 0 && (
-          <section className="lp-band">
-            <div className="lp-inner">
-              <div className="lp-section-head">
-                <h2 className="lp-h2">精选推荐</h2>
-                <p className="lp-sub">平台热门技能广告位，提升展现与下载</p>
-              </div>
               <div className="lp-carousel" onMouseEnter={() => setIsPaused(true)} onMouseLeave={() => setIsPaused(false)}>
                 <div className="lp-track" style={{ transform: `translateX(-${currentSlide * 100}%)` }}>
                   {banners.map(b => (
@@ -248,8 +234,8 @@ const LandingPage: React.FC = () => {
                 )}
               </div>
             </div>
-          </section>
+          </div>
-        )}
+        </section>
 
         {/* 平台定位（痛点） */}
         <section className="lp-section" id="positioning">
@@ -294,7 +280,7 @@ const LandingPage: React.FC = () => {
           <div className="lp-inner">
             <div className="lp-section-head">
               <h2 className="lp-h2">热门技能榜 · Top 5</h2>
-              <p className="lp-sub">按下载 / 安装量排行，看看大家都在用哪些能力</p>
+              <p className="lp-sub">涵盖 Skills、Agent、MCP 服务，按下载 / 安装量排行，看看大家都在用哪些能力</p>
             </div>
             <ol className="lp-rank">
               {topSkills.map((app, i) => (
@@ -318,12 +304,12 @@ const LandingPage: React.FC = () => {
           </div>
         </section>
 
-        {/* 应用市场预览 */}
+        {/* 应用中心预览 */}
         <section className="lp-section lp-section-alt" id="market">
           <div className="lp-inner">
             <div className="lp-section-head">
-              <h2 className="lp-h2">应用市场</h2>
+              <h2 className="lp-h2">应用中心</h2>
-              <p className="lp-sub">丰富的 Skills、Agent、MCP 应用，一键接入你的工作流</p>
+              <p className="lp-sub">平台为订阅会员提供的免费 AI 应用，帮你快速进入创作与工作场景</p>
             </div>
             <div className="lp-app-grid">
               {publishedApps.map(app => (
@@ -331,7 +317,7 @@ const LandingPage: React.FC = () => {
                          onKeyDown={e => e.key === 'Enter' && goLogin()}>
                   <div className="lp-app-cover" style={{ background: gradFor(app.id) }}>
                     <span className={`lp-app-badge ${typeBadge[app.type]}`}>{typeLabels[app.type]}</span>
-                    {app.price > 0 && <span className="lp-app-price">{app.price} 元</span>}
+                    <span className="lp-app-price">会员免费</span>
                   </div>
                   <div className="lp-app-body">
                     <h4 className="lp-app-name">{app.name}</h4>
@@ -392,9 +378,9 @@ const LandingPage: React.FC = () => {
                 </svg>
                 <span className="brand-name">七虎AI</span>
               </div>
-              <p>个人体验 AI、办公提效与 AI 创收的一站式 PaaS 平台。</p>
+              <p>个人体验 AI、办公提效与 AI 创收的一站式平台。</p>
             </div>
-            <div className="lp-footer-col"><h4>产品</h4><a href="#features" onClick={anchorClick('features')}>AI 聊天</a><a href="#market" onClick={anchorClick('market')}>应用市场</a><a href="#value" onClick={anchorClick('value')}>技能交易</a></div>
+            <div className="lp-footer-col"><h4>产品</h4><a href="#features" onClick={anchorClick('features')}>AI 聊天</a><a href="#market" onClick={anchorClick('market')}>应用中心</a><a href="#value" onClick={anchorClick('value')}>技能交易</a></div>
             <div className="lp-footer-col"><h4>资源</h4><a href="#top" onClick={anchorClick('top')}>热门技能</a><a href="#positioning" onClick={anchorClick('positioning')}>平台定位</a><a onClick={goLogin} role="button">帮助中心</a></div>
             <div className="lp-footer-col"><h4>公司</h4><a onClick={goLogin} role="button">关于我们</a><a onClick={goLogin} role="button">联系我们</a><a onClick={goLogin} role="button">加入我们</a></div>
           </div>