qyyfw/qihuaiflow
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): HashRouter->BrowserRouter 干净URL可独立索引 + 静态预渲染(SSR注入#root/robots/sitemap) + logo回顶

Browse Source
This commit is contained in:
QihuAI Design committed 2026-07-13 15:01:53 +08:00
1 parent a1bea39d9f
commit d404aa4e29
12 files changed
+5859 -5607
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/pages/front/LandingPage.tsx
+340 -302
View File
@@ -4,39 +4,85 @@ import { mockAdBanners, mockApps } from '@/mock/data';
import type { AdBanner, MarketApp } from '@/types';
import './LandingPage.css';
const SVGIcon: React.FC<{ children: React.ReactNode; size?: number }> = ({ children, size = 16 }) => (
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
{children}
</svg>
/* ---------- 内联 Lucide 风格图标（满足"用 Lucide 图标、禁 emoji"铁律） ---------- */
const Icon: React.FC<{ d: React.ReactNode; size?: number }> = ({ d, size = 20 }) => (
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">{d}</svg>
);
/* ---------- 品牌同系渐变（仅靛蓝→青蓝，无第三色相） ---------- */
const appGradients: Record<string, string> = {
a1: 'linear-gradient(135deg,#5B5FED 0%,#4F8DF9 100%)',
a2: 'linear-gradient(135deg,#6366F1 0%,#60A5FA 100%)',
a3: 'linear-gradient(135deg,#5B5FED 0%,#818CF8 100%)',
a4: 'linear-gradient(135deg,#4F8DF9 0%,#38BDF8 100%)',
a5: 'linear-gradient(135deg,#6366F1 0%,#7DD3FC 100%)',
a6: 'linear-gradient(135deg,#5B5FED 0%,#A78BFA 100%)',
a7: 'linear-gradient(135deg,#4F8DF9 0%,#818CF8 100%)',
a8: 'linear-gradient(135deg,#6366F1 0%,#4F8DF9 100%)',
};
const gradFor = (id: string) => appGradients[id] || 'linear-gradient(135deg,#5B5FED 0%,#4F8DF9 100%)';
const typeLabels: Record<string, string> = { skill: 'Skill', agent: 'Agent', mcp: 'MCP' };
const typeColors: Record<string, string> = { skill: '#10B981', agent: '#5B5FED', mcp: '#F59E0B' };
const typeBadge: Record<string, string> = {
skill: 'badge-skill', agent: 'badge-agent', mcp: 'badge-mcp',
};
/* ---------- 文案数据（来自用户原始需求提炼） ---------- */
const painPoints = [
{ d: <><path d="M12 1v22" /><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" /></>,
title: '大模型 API 贵且复杂', desc: '多家模型计费规则不一、调用门槛高，个人与小企业难以低成本接入。' },
{ d: <><path d="M12 20h9" /><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z" /></>,
title: 'Prompt 难调试', desc: '缺乏可视化编排与复用，效果全靠手感，团队无法沉淀最佳实践。' },
{ d: <><ellipse cx="12" cy="5" rx="9" ry="3" /><path d="M3 5v14c0 1.7 4 3 9 3s9-1.3 9-3V5" /><path d="M3 12c0 1.7 4 3 9 3s9-1.3 9-3" /></>,
title: '数据孤岛', desc: '知识散落在文档、表格、聊天记录里，AI 答非所问，价值无法被激活。' },
{ d: <><path d="M3 3v18h18" /><path d="m19 9-5 5-4-4-3 3" /></>,
title: '个人开发者无变现渠道', desc: '做出好用的 AI 能力却找不到分发与交易场景，难以转化为收入。' },
];
const valueProps = [
{ d: <><path d="M12 1v22" /><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" /></>,
title: '低价订阅 · 无限 Token', kw: '无限Token',
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: '垂直可用办公模板', kw: '办公提效',
desc: '写 PPT、出投标书、做运营、排版公众号——开箱即用的模板，把重复劳动交给 AI。' },
{ d: <><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z" /><path d="M3 6h18" /><path d="M16 10a4 4 0 0 1-8 0" /></>,
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: '',
desc: '写小说、做漫剧、谱音乐——低成本试错，让创作想法快速跑通。' },
{ d: <><path d="M3 12a9 9 0 1 0 9-9" /><path d="M3 3v6h6" /><path d="M12 7v5l3 3" /></>,
title: '低成本养龙虾', kw: '',
desc: '低成本微调 / 托管你的专属模型，把"养模型"变成可负担的日常。' },
];
const features = [
{ d: <><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" /></>,
title: '多模型 AI 对话', desc: 'DeepSeek / Qwen / 国际模型自由切换，按需选用最优模型。' },
{ 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 应用，即装即用，一键接入工作流。' },
{ 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" /></>,
title: 'IM 频道绑定', desc: '微信 / 企微 / 飞书 / QQ 多平台绑定，AI 助手融入日常工作流。' },
{ d: <><polyline points="16 3 21 3 21 8" /><line x1="4" y1="20" x2="21" y2="3" /><polyline points="21 16 21 21 16 21" /><line x1="15" y1="15" x2="21" y2="21" /><line x1="4" y1="4" x2="9" y2="9" /></>,
title: '自动化任务编排', desc: '关键词触发、定时执行等自动化任务，让 AI 按你的节奏工作。' },
];
const LandingPage: React.FC = () => {
const navigate = useNavigate();
const [currentSlide, setCurrentSlide] = useState(0);
const [isPaused, setIsPaused] = useState(false);
const [mobileMenu, setMobileMenu] = useState(false);
const banners = mockAdBanners.filter(b => b.status === 'active');
const publishedApps = mockApps.filter(a => a.status === 'published');
const [appTypeFilter, setAppTypeFilter] = useState<'' | 'skill' | 'agent' | 'mcp'>('');
const [toastMsg, setToastMsg] = useState('');
const topSkills = [...publishedApps].sort((a, b) => b.installCount - a.installCount).slice(0, 5);
const filteredApps = appTypeFilter
? publishedApps.filter(a => a.type === appTypeFilter)
: publishedApps;
const showToast = (msg: string) => {
setToastMsg(msg);
setTimeout(() => setToastMsg(''), 2000);
};
const handleAppClick = (appName: string) => {
showToast(`"${appName}" 需登录后使用，即将跳转登录页`);
setTimeout(() => navigate('/login'), 800);
};
// Auto rotate carousel
const nextSlide = useCallback(() => {
if (banners.length === 0) return;
setCurrentSlide(prev => (prev + 1) % banners.length);
@@ -44,323 +90,315 @@ const LandingPage: React.FC = () => {
useEffect(() => {
if (banners.length <= 1 || isPaused) return;
const timer = setInterval(nextSlide, 4000);
const timer = setInterval(nextSlide, 4500);
return () => clearInterval(timer);
}, [banners.length, isPaused, nextSlide]);
const goToSlide = (idx: number) => setCurrentSlide(idx);
// SEO / GEO：动态写入标题与描述
useEffect(() => {
document.title = '七虎AI · 个人体验 AI、办公提效与 AI 创收的一站式 PaaS 平台';
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 把事做成。');
}, []);
const getGradient = (app: MarketApp): string => {
const gradients: Record<string, string> = {
a1: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
a2: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
a3: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
a4: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
a5: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
a6: 'linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%)',
a8: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)',
};
return gradients[app.id] || 'linear-gradient(135deg, #5B5FED 0%, #A78BFA 100%)';
const goLogin = () => navigate('/login');
// 点击 logo 回到首页顶部（.lp 是滚动容器，用 scrollTo 而非 window）
const goTop = () => {
const el = document.querySelector('.lp') as HTMLElement | null;
if (el) el.scrollTo({ top: 0, behavior: 'smooth' });
else window.scrollTo({ top: 0, behavior: 'smooth' });
};
// HashRouter 下原生 <a href="#id"> 会被当成路由路径解析，导致菜单失效；
// 故改为编程式滚动 + preventDefault，仅在 LandingPage 内部滚动容器内跳转。
const anchorClick = (id: string, after?: () => void) => (e: React.MouseEvent) => {
e.preventDefault();
document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
after?.();
};
const jsonLd = {
'@context': 'https://schema.org',
'@type': 'SoftwareApplication',
name: '七虎AI',
applicationCategory: 'BusinessApplication',
operatingSystem: 'Web',
offers: { '@type': 'Offer', price: '0', priceCurrency: 'CNY' },
aggregateRating: { '@type': 'AggregateRating', ratingValue: '4.8', reviewCount: '1000' },
};
return (
<div className="landing-page">
{/* Toast notification */}
{toastMsg && (
<div className="landing-toast">{toastMsg}</div>
)}
<div className="lp">
{/* JSON-LD 富媒体摘要（SEO / GEO） */}
<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
{/* Hero / Nav bar */}
<header className="landing-header">
<div className="landing-header-inner">
<div className="landing-brand">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
<rect width="32" height="32" rx="8" fill="#5B5FED"/>
<path d="M8 20V12l4 4 4-4v8" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
<path d="M6 22h20" stroke="white" strokeWidth="1.5" strokeLinecap="round" opacity="0.5"/>
{/* 浮层玻璃顶栏 */}
<header className="lp-header glass">
<div className="lp-header-inner">
<div className="lp-brand" onClick={goTop} role="button" tabIndex={0}
onKeyDown={e => e.key === 'Enter' && goTop()} aria-label="回到顶部">
<svg width="30" height="30" viewBox="0 0 32 32" fill="none" aria-hidden>
<rect width="32" height="32" rx="8" fill="#5B5FED" />
<path d="M8 20V12l4 4 4-4v8" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
<path d="M6 22h20" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" opacity="0.5" />
</svg>
<span className="brand-name">Qihu-AIFlow</span>
<span className="brand-name">七虎AI</span>
</div>
<nav className="landing-nav-links">
<a href="#market">应用市场</a>
<a href="#features">平台能力</a>
<nav className="lp-nav" aria-label="主导航">
<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="#features" onClick={anchorClick('features')}>平台能力</a>
</nav>
<div className="landing-header-actions">
<button className="landing-btn landing-btn-outline" onClick={() => navigate('/login')}>登录</button>
<button className="landing-btn landing-btn-primary" onClick={() => navigate('/login')}>免费注册</button>
<div className="lp-header-actions">
<button className="lp-btn lp-btn-ghost" onClick={goLogin}>登录</button>
<button className="lp-btn lp-btn-primary" onClick={goLogin}>免费注册</button>
</div>
<button className="lp-menu-toggle" aria-label="菜单" onClick={() => setMobileMenu(v => !v)}>
<Icon d={mobileMenu ? <><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></> : <><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" /></>} size={22} />
</button>
</div>
{mobileMenu && (
<div className="lp-mobile-menu">
<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="#features" onClick={anchorClick('features', () => setMobileMenu(false))}>平台能力</a>
<div className="lp-mobile-actions">
<button className="lp-btn lp-btn-ghost" onClick={() => { setMobileMenu(false); goLogin(); }}>登录</button>
<button className="lp-btn lp-btn-primary" onClick={() => { setMobileMenu(false); goLogin(); }}>免费注册</button>
</div>
</div>
)}
</header>
{/* Hero Section */}
<section className="landing-hero">
<div className="landing-hero-content">
<h1 className="hero-title">
用 <span className="hero-accent">AI</span> 构建你的<br/>智能自动化工作流
</h1>
<p className="hero-desc">
Qihu-AIFlow 是一站式AI智能自动化PaaS平台，集成多模态大模型、知识库管理、应用市场，
让每个人都能轻松搭建属于自己的AI自动化SOP。
</p>
<div className="hero-actions">
<button className="landing-btn landing-btn-primary landing-btn-lg" onClick={() => navigate('/login')}>
免费开始使用
</button>
<button className="landing-btn landing-btn-outline landing-btn-lg" onClick={() => { document.getElementById('market')?.scrollIntoView({ behavior: 'smooth' }); }}>
浏览应用市场
</button>
</div>
<div className="hero-stats">
<div className="hero-stat">
<span className="stat-number">3,500+</span>
<span className="stat-label">活跃用户</span>
<main>
{/* Hero */}
<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>，提供垂直可用的办公模板、可交易的市场与低成本养模型能力。
</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>
</div>
<div className="lp-stats">
<div><span className="lp-stat-num">3,500+</span><span className="lp-stat-label">活跃用户</span></div>
<div><span className="lp-stat-num">120+</span><span className="lp-stat-label">应用 / Skills</span></div>
<div><span className="lp-stat-num">99.8%</span><span className="lp-stat-label">服务可用率</span></div>
</div>
</div>
<div className="hero-stat">
<span className="stat-number">120+</span>
<span className="stat-label">应用/Skills</span>
</div>
<div className="hero-stat">
<span className="stat-number">99.8%</span>
<span className="stat-label">服务可用率</span>
</div>
</div>
</div>
</section>
{/* Carousel Section */}
{banners.length > 0 && (
<section className="landing-banners">
<div className="landing-section-inner">
<h2 className="section-title">推荐应用</h2>
<div
className="carousel-container"
onMouseEnter={() => setIsPaused(true)}
onMouseLeave={() => setIsPaused(false)}
>
<div className="carousel-track" style={{ transform: `translateX(-${currentSlide * 100}%)` }}>
{banners.map(banner => (
<div key={banner.id} className="carousel-slide">
<div className="carousel-card" style={{ background: banner.linkAppId ? getGradient({ id: banner.linkAppId } as MarketApp) : 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }}>
<div className="carousel-card-content">
<div className="carousel-badge">推荐</div>
<h3 className="carousel-title">{banner.title}</h3>
{banner.linkAppName && (
<p className="carousel-subtitle">立即体验 {banner.linkAppName}</p>
)}
<button
className="carousel-cta"
onClick={() => navigate('/login')}
>
查看详情
<SVGIcon size={14}><polyline points="9 18 15 12 9 6"/></SVGIcon>
</button>
</div>
<div className="carousel-card-visual">
<div className="visual-circle c1"/>
<div className="visual-circle c2"/>
<div className="visual-circle c3"/>
</div>
</div>
</div>
))}
{/* Hero 右侧：品牌渐变光斑 + 玻璃卡视觉 */}
<div className="lp-hero-visual" aria-hidden>
<div className="lp-hero-glow" />
<div className="lp-hero-card glass">
<div className="lp-hc-row"><span className="lp-hc-dot" /> AI 对话进行中</div>
<div className="lp-hc-bubble">帮我把这份文档整理成周报大纲</div>
<div className="lp-hc-bubble lp-hc-bubble-ai">已生成 5 个章节，并附数据看板建议 ✓</div>
<div className="lp-hc-bar"><span /></div>
</div>
{/* Dots */}
{banners.length > 1 && (
<div className="carousel-dots">
{banners.map((_, idx) => (
<button
key={idx}
className={`carousel-dot ${idx === currentSlide ? 'active' : ''}`}
onClick={() => goToSlide(idx)}
/>
))}
</div>
)}
{/* Arrows */}
{banners.length > 1 && (
<>
<button
className="carousel-arrow carousel-arrow-left"
onClick={() => setCurrentSlide(prev => (prev - 1 + banners.length) % banners.length)}
>
<SVGIcon size={20}><polyline points="15 18 9 12 15 6"/></SVGIcon>
</button>
<button
className="carousel-arrow carousel-arrow-right"
onClick={() => nextSlide()}
>
<SVGIcon size={20}><polyline points="9 18 15 12 9 6"/></SVGIcon>
</button>
</>
)}
</div>
</div>
</section>
)}
{/* Market Preview Section */}
<section className="landing-market" id="market">
<div className="landing-section-inner">
<div className="section-header">
<h2 className="section-title">应用市场</h2>
<p className="section-desc">丰富的 Skills、Agent、MCP 应用，一键接入你的工作流</p>
{/* 轮播广告位（技能展示） */}
{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 => (
<div key={b.id} className="lp-slide">
<div className="lp-carousel-card" style={{ background: gradFor(b.linkAppId || 'a1') }}>
<div className="lp-cc-content">
<div className="lp-cc-badge">推荐</div>
<h3 className="lp-cc-title">{b.title}</h3>
{b.linkAppName && <p className="lp-cc-sub">立即体验 {b.linkAppName}</p>}
<button className="lp-cc-cta" onClick={goLogin}>查看详情 <Icon d={<polyline points="9 18 15 12 9 6" />} size={14} /></button>
</div>
<div className="lp-cc-visual"><span className="c1" /><span className="c2" /><span className="c3" /></div>
</div>
</div>
))}
</div>
{banners.length > 1 && (
<>
<button className="lp-arrow lp-arrow-l" onClick={() => setCurrentSlide(p => (p - 1 + banners.length) % banners.length)} aria-label="上一张"><Icon d={<polyline points="15 18 9 12 15 6" />} size={20} /></button>
<button className="lp-arrow lp-arrow-r" onClick={nextSlide} aria-label="下一张"><Icon d={<polyline points="9 18 15 12 9 6" />} size={20} /></button>
<div className="lp-dots">{banners.map((_, i) => (<button key={i} className={`lp-dot ${i === currentSlide ? 'on' : ''}`} onClick={() => setCurrentSlide(i)} aria-label={`第${i + 1}张`} />))}</div>
</>
)}
</div>
</div>
</section>
)}
{/* 平台定位（痛点） */}
<section className="lp-section" id="positioning">
<div className="lp-inner">
<div className="lp-section-head">
<h2 className="lp-h2">我们解决什么</h2>
<p className="lp-sub">七虎AI 帮你绕过个人与职场使用 AI 时最高频的痛点</p>
</div>
<div className="lp-grid lp-grid-4">
{painPoints.map((p, i) => (
<article key={i} className="lp-pain">
<div className="lp-pain-icon"><Icon d={p.d} size={24} /></div>
<h3 className="lp-pain-title">{p.title}</h3>
<p className="lp-pain-desc">{p.desc}</p>
</article>
))}
</div>
</div>
</section>
{/* Type Filter */}
<div className="market-filter-tabs">
<button
className={`filter-tab ${appTypeFilter === '' ? 'active' : ''}`}
onClick={() => setAppTypeFilter('')}
>全部</button>
<button
className={`filter-tab ${appTypeFilter === 'skill' ? 'active' : ''}`}
onClick={() => setAppTypeFilter('skill')}
>Skills</button>
<button
className={`filter-tab ${appTypeFilter === 'agent' ? 'active' : ''}`}
onClick={() => setAppTypeFilter('agent')}
>Agent</button>
<button
className={`filter-tab ${appTypeFilter === 'mcp' ? 'active' : ''}`}
onClick={() => setAppTypeFilter('mcp')}
>MCP</button>
{/* 平台价值 */}
<section className="lp-section lp-section-alt" id="value">
<div className="lp-inner">
<div className="lp-section-head">
<h2 className="lp-h2">在七虎AI 你能获得</h2>
<p className="lp-sub">降低订阅成本、提供无限 Token、垂直模板与可交易市场</p>
</div>
<div className="lp-grid lp-grid-5">
{valueProps.map((v, i) => (
<article key={i} className="lp-value">
<div className="lp-value-icon"><Icon d={v.d} size={24} /></div>
<h3 className="lp-value-title">{v.kw ? <>{v.title.replace(v.kw, '')}<span className="kw"> {v.kw}</span></> : v.title}</h3>
<p className="lp-value-desc">{v.desc}</p>
</article>
))}
</div>
</div>
</section>
{/* App Grid */}
<div className="market-app-grid">
{filteredApps.map(app => (
<div key={app.id} className="market-app-card" onClick={() => handleAppClick(app.name)}>
<div className="app-card-cover" style={{ background: getGradient(app) }}>
<span className="app-card-type-badge" style={{ background: typeColors[app.type] }}>
{typeLabels[app.type]}
{/* 热门技能榜 Top5 */}
<section className="lp-section" id="top">
<div className="lp-inner">
<div className="lp-section-head">
<h2 className="lp-h2">热门技能榜 · Top 5</h2>
<p className="lp-sub">按下载 / 安装量排行，看看大家都在用哪些能力</p>
</div>
<ol className="lp-rank">
{topSkills.map((app, i) => (
<li key={app.id} className="lp-rank-item" onClick={goLogin} role="button" tabIndex={0}
onKeyDown={e => e.key === 'Enter' && goLogin()}>
<span className={`lp-rank-no ${i === 0 ? 'top' : ''}`}>{i + 1}</span>
<span className="lp-rank-cover" style={{ background: gradFor(app.id) }}>
<span className={`lp-rank-badge ${typeBadge[app.type]}`}>{typeLabels[app.type]}</span>
</span>
{app.price > 0 && (
<span className="app-card-price">{app.price} 元</span>
)}
</div>
<div className="app-card-body">
<h4 className="app-card-name">{app.name}</h4>
<p className="app-card-desc">{app.description}</p>
<div className="app-card-meta">
<span className="app-card-rating">
<SVGIcon size={12}><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"/></SVGIcon>
{app.ratingAvg > 0 ? app.ratingAvg : '-'}
</span>
<span className="app-card-installs">{app.installCount.toLocaleString()} 次安装</span>
<span className="lp-rank-main">
<span className="lp-rank-name">{app.name}</span>
<span className="lp-rank-desc">{app.description}</span>
</span>
<span className="lp-rank-meta">
<span className="lp-rank-installs"><Icon 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" />} size={13} /> {app.installCount.toLocaleString()}</span>
<span className="lp-rank-rating">{(app.ratingAvg > 0 ? app.ratingAvg : '—')}</span>
</span>
</li>
))}
</ol>
</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>
<p className="lp-sub">丰富的 Skills、Agent、MCP 应用，一键接入你的工作流</p>
</div>
<div className="lp-app-grid">
{publishedApps.map(app => (
<article key={app.id} className="lp-app-card" onClick={goLogin} role="button" tabIndex={0}
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>}
</div>
</div>
</div>
))}
</div>
<div className="market-more">
<button className="landing-btn landing-btn-outline" onClick={() => navigate('/login')}>
登录查看更多应用
<SVGIcon size={14}><polyline points="9 18 15 12 9 6"/></SVGIcon>
</button>
</div>
</div>
</section>
{/* Features Section */}
<section className="landing-features" id="features">
<div className="landing-section-inner">
<div className="section-header">
<h2 className="section-title">平台核心能力</h2>
<p className="section-desc">从对话到自动化，Qihu-AIFlow 为你提供完整的 AI 工作流解决方案</p>
</div>
<div className="features-grid">
<div className="feature-card">
<div className="feature-icon">
<SVGIcon size={28}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></SVGIcon>
</div>
<h3 className="feature-title">多模型AI对话</h3>
<p className="feature-desc">支持GPT-4o、DeepSeek-R1、Qwen-Max等多种大模型自由切换，按需使用最优模型</p>
<div className="lp-app-body">
<h4 className="lp-app-name">{app.name}</h4>
<p className="lp-app-desc">{app.description}</p>
<div className="lp-app-meta">
<span><Icon 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" />} size={12} /> {app.ratingAvg > 0 ? app.ratingAvg : '-'}</span>
<span>{app.installCount.toLocaleString()} 次安装</span>
</div>
</div>
</article>
))}
</div>
<div className="feature-card">
<div className="feature-icon">
<SVGIcon size={28}><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"/></SVGIcon>
</div>
<h3 className="feature-title">私有知识库</h3>
<p className="feature-desc">上传文档构建专属知识库，AI回答基于你的内容，更精准可靠</p>
</div>
<div className="feature-card">
<div className="feature-icon">
<SVGIcon size={28}><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"/></SVGIcon>
</div>
<h3 className="feature-title">应用市场</h3>
<p className="feature-desc">丰富的Skills、Agent、MCP应用，一站式接入工作流，即装即用</p>
</div>
<div className="feature-card">
<div className="feature-icon">
<SVGIcon size={28}><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></SVGIcon>
</div>
<h3 className="feature-title">Token驾驶舱</h3>
<p className="feature-desc">实时监控Token消耗，费用透明可控，每一笔都有据可查</p>
</div>
<div className="feature-card">
<div className="feature-icon">
<SVGIcon size={28}><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"/></SVGIcon>
</div>
<h3 className="feature-title">IM频道绑定</h3>
<p className="feature-desc">支持飞书、钉钉、微信等多平台绑定，AI助手融入日常工作流</p>
</div>
<div className="feature-card">
<div className="feature-icon">
<SVGIcon size={28}><polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/><polyline points="21 16 21 21 16 21"/><line x1="15" y1="15" x2="21" y2="21"/><line x1="4" y1="4" x2="9" y2="9"/></SVGIcon>
</div>
<h3 className="feature-title">自动化任务编排</h3>
<p className="feature-desc">创建关键词触发、定时执行等自动化任务，让AI按你的节奏工作</p>
<div className="lp-more">
<button className="lp-btn lp-btn-outline" onClick={goLogin}>登录查看更多应用 <Icon d={<polyline points="9 18 15 12 9 6" />} size={14} /></button>
</div>
</div>
</div>
</section>
</section>
{/* CTA Section */}
<section className="landing-cta">
<div className="landing-section-inner">
<h2 className="cta-title">准备好开始了吗？</h2>
<p className="cta-desc">免费注册即可体验全部功能，无需任何技术背景</p>
<button className="landing-btn landing-btn-primary landing-btn-lg" onClick={() => navigate('/login')}>
免费注册，立即体验
</button>
</div>
</section>
{/* 平台能力 */}
<section className="lp-section" id="features">
<div className="lp-inner">
<div className="lp-section-head">
<h2 className="lp-h2">平台核心能力</h2>
<p className="lp-sub">从对话到自动化，七虎AI 提供完整的 AI 工作流解决方案</p>
</div>
<div className="lp-grid lp-grid-3">
{features.map((f, i) => (
<article key={i} className="lp-feature">
<div className="lp-feature-icon"><Icon d={f.d} size={26} /></div>
<h3 className="lp-feature-title">{f.title}</h3>
<p className="lp-feature-desc">{f.desc}</p>
</article>
))}
</div>
</div>
</section>
{/* Footer */}
<footer className="landing-footer">
<div className="landing-section-inner">
<div className="footer-content">
<div className="footer-brand">
<div className="landing-brand">
<svg width="28" height="28" viewBox="0 0 32 32" fill="none">
<rect width="32" height="32" rx="8" fill="#5B5FED"/>
<path d="M8 20V12l4 4 4-4v8" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
{/* CTA */}
<section className="lp-cta">
<div className="lp-inner">
<h2 className="lp-cta-title">准备好开始了吗？</h2>
<p className="lp-cta-desc">免费注册即可体验全部功能，无需任何技术背景</p>
<button className="lp-btn lp-btn-primary lp-btn-lg" onClick={goLogin}>免费注册，立即体验</button>
</div>
</section>
</main>
{/* Footer（SEO 链接 + 富媒体） */}
<footer className="lp-footer">
<div className="lp-inner">
<div className="lp-footer-grid">
<div className="lp-footer-brand">
<div className="lp-brand" onClick={goTop} role="button" tabIndex={0}
onKeyDown={e => e.key === 'Enter' && goTop()} aria-label="回到顶部">
<svg width="26" height="26" viewBox="0 0 32 32" fill="none" aria-hidden>
<rect width="32" height="32" rx="8" fill="#5B5FED" />
<path d="M8 20V12l4 4 4-4v8" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
</svg>
<span className="brand-name" style={{ color: 'var(--color-text-primary)' }}>Qihu-AIFlow</span>
</div>
<p style={{ color: 'var(--color-text-tertiary)', fontSize: 'var(--text-sm)', marginTop: 'var(--space-md)' }}>
AI智能自动化PaaS平台
</p>
</div>
<div className="footer-links">
<div className="footer-col">
<h4>产品</h4>
<a>AI聊天</a>
<a>知识库</a>
<a>应用市场</a>
</div>
<div className="footer-col">
<h4>支持</h4>
<a>帮助文档</a>
<a>API参考</a>
<a>联系我们</a>
<span className="brand-name">七虎AI</span>
</div>
<p>个人体验 AI、办公提效与 AI 创收的一站式 PaaS 平台。</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="#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>
<div className="footer-bottom">
<span>Qihu-AIFlow 2026. All rights reserved.</span>
</div>
<div className="lp-footer-bottom">© 2026 七虎AI · 让每个人都能用 AI 把事做成</div>
</div>
</footer>
</div>