Update web overview panel
This commit is contained in:
Xin Wang
@@ -1,230 +1,398 @@
|
||||
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { Phone, CheckCircle, Clock, UserCheck, Activity, Filter, ChevronDown, BarChart3, HelpCircle, Mail, Sparkles, Terminal, Box, Zap, ShieldCheck } from 'lucide-react';
|
||||
import React, { useState, useMemo, useRef } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Phone, CheckCircle, Clock, UserCheck, Activity, Filter, ChevronDown, BarChart3, HelpCircle, Mail, Sparkles, ArrowDown, Bot, Zap, Rocket, LineChart, Layers, Fingerprint, Network, MonitorPlay, Plus } from 'lucide-react';
|
||||
import { Card, Button } from '../components/UI';
|
||||
import { mockAssistants, getDashboardStats } from '../services/mockData';
|
||||
|
||||
export const DashboardPage: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [timeRange, setTimeRange] = useState<'week' | 'month' | 'year'>('week');
|
||||
const [selectedAssistantId, setSelectedAssistantId] = useState<string>('all');
|
||||
|
||||
const workflowRef = useRef<HTMLDivElement>(null);
|
||||
const aboutRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const stats = useMemo(() => {
|
||||
return getDashboardStats(timeRange, selectedAssistantId);
|
||||
}, [timeRange, selectedAssistantId]);
|
||||
|
||||
const scrollToNext = (ref: React.RefObject<HTMLDivElement>) => {
|
||||
ref.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-full flex flex-col animate-in fade-in py-1">
|
||||
<div className="w-full max-w-[1600px] mx-auto space-y-4 px-2 lg:px-6">
|
||||
|
||||
{/* 1. Utility Row (Top Navigation Actions) */}
|
||||
<div className="flex justify-end items-center gap-2 border-b border-white/[0.03] pb-2">
|
||||
<Button variant="ghost" size="sm" className="h-7 px-2.5 text-[10px] font-bold border border-white/5 hover:bg-primary/10 hover:text-primary transition-all text-white/70">
|
||||
<HelpCircle className="w-3 h-3 mr-1.5 opacity-70" /> 文档
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" className="h-7 px-2.5 text-[10px] font-bold border border-white/5 hover:bg-primary/10 hover:text-primary transition-all text-white/70">
|
||||
<Mail className="w-3 h-3 mr-1.5 opacity-70" /> 联系方式
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 2. Welcome Header */}
|
||||
<div className="flex flex-col space-y-4 text-center md:text-left pt-1">
|
||||
<div className="space-y-0.5">
|
||||
<h1 className="text-2xl font-bold tracking-tight text-white">
|
||||
欢迎, <span className="text-primary">Admin User</span>
|
||||
</h1>
|
||||
<p className="text-muted-foreground flex items-center justify-center md:justify-start text-[11px]">
|
||||
系统当前运行环境：
|
||||
<span className="flex items-center ml-2 text-green-400 text-[10px] font-mono bg-green-400/10 px-1.5 py-0.5 rounded-full border border-green-400/20">
|
||||
<span className="w-1 h-1 rounded-full bg-green-400 animate-pulse mr-1"></span>
|
||||
HEALTHY
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3. Section Header: Title + Filters */}
|
||||
<div className="flex flex-col md:flex-row items-center justify-between border-b border-white/5 pb-3 pt-2 gap-3">
|
||||
<div className="flex items-center space-x-2.5">
|
||||
<div className="p-1 bg-primary/10 rounded-lg">
|
||||
<BarChart3 className="h-3.5 w-3.5 text-primary" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<h2 className="text-sm font-bold text-white tracking-wide leading-none">用量标准</h2>
|
||||
<span className="text-[8px] font-mono text-muted-foreground uppercase tracking-[0.2em] opacity-40 mt-1">Metrics Overview</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1.5 bg-black/20 p-0.5 rounded-lg border border-white/5 shadow-inner scale-95 origin-right">
|
||||
<div className="relative group min-w-[130px]">
|
||||
<div className="absolute left-2.5 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground group-focus-within:text-primary transition-colors">
|
||||
<Filter className="h-2.5 w-2.5" />
|
||||
</div>
|
||||
<select
|
||||
className="w-full bg-transparent border-0 rounded-lg pl-7 pr-6 py-1 text-[10px] font-bold focus:outline-none appearance-none cursor-pointer transition-all text-white/80"
|
||||
value={selectedAssistantId}
|
||||
onChange={(e) => setSelectedAssistantId(e.target.value)}
|
||||
>
|
||||
<option value="all" className="bg-background">所有小助手</option>
|
||||
{mockAssistants.map(a => (
|
||||
<option key={a.id} value={a.id} className="bg-background">{a.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<ChevronDown className="absolute right-1.5 top-1/2 -translate-y-1/2 h-2.5 w-2.5 text-muted-foreground pointer-events-none" />
|
||||
</div>
|
||||
|
||||
<div className="h-3 w-px bg-white/10 mx-0.5"></div>
|
||||
|
||||
<div className="flex gap-0.5">
|
||||
{(['week', 'month', 'year'] as const).map((r) => (
|
||||
<button
|
||||
key={r}
|
||||
onClick={() => setTimeRange(r)}
|
||||
className={`px-2.5 py-0.5 text-[9px] font-black uppercase tracking-tight rounded transition-all ${timeRange === r ? 'bg-primary text-primary-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground hover:bg-white/5'}`}
|
||||
>
|
||||
{r === 'week' ? '周' : r === 'month' ? '月' : '年'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 4. Metrics Grid (Cards) */}
|
||||
<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<StatCard
|
||||
title="通话数量"
|
||||
value={stats.totalCalls.toString()}
|
||||
icon={<Phone className="h-3.5 w-3.5 text-primary" />}
|
||||
trend="+12.5% UP"
|
||||
/>
|
||||
<StatCard
|
||||
title="接通率"
|
||||
value={`${stats.answerRate}%`}
|
||||
icon={<CheckCircle className="h-3.5 w-3.5 text-green-400" />}
|
||||
trend="+2.1% UP"
|
||||
/>
|
||||
<StatCard
|
||||
title="平均时长"
|
||||
value={stats.avgDuration}
|
||||
icon={<Clock className="h-3.5 w-3.5 text-blue-400" />}
|
||||
trend="-0.5% LOW"
|
||||
/>
|
||||
<StatCard
|
||||
title="转人工数"
|
||||
value={stats.humanTransferCount.toString()}
|
||||
icon={<UserCheck className="h-3.5 w-3.5 text-purple-400" />}
|
||||
trend="+5% STABLE"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 5. Charts Section */}
|
||||
<div className="pt-1">
|
||||
<Card className="p-5 border-white/5 bg-card/20 backdrop-blur-sm overflow-hidden shadow-xl">
|
||||
<div className="flex flex-col md:flex-row items-center justify-between mb-6 gap-3">
|
||||
<div className="space-y-0.5 text-center md:text-left">
|
||||
<h3 className="text-base font-bold leading-none flex items-center justify-center md:justify-start text-white">
|
||||
<Activity className="h-4 w-4 text-primary mr-2" />
|
||||
通话趋势 (Performance Insight)
|
||||
</h3>
|
||||
<p className="text-[10px] text-muted-foreground font-mono opacity-40">REAL-TIME DATA PROCESSING PIPELINE ENABLED</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="h-6 w-6 rounded-full border border-primary/20 flex items-center justify-center animate-spin-slow">
|
||||
<div className="h-1 w-1 rounded-full bg-primary shadow-[0_0_8px_rgba(6,182,212,0.8)]"></div>
|
||||
</div>
|
||||
<span className="text-[9px] font-mono text-primary animate-pulse tracking-widest uppercase">Streaming</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-[300px] w-full">
|
||||
<SimpleAreaChart data={stats.trend} />
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 6. Platform Feature Intro - Updated Background */}
|
||||
<div className="w-full bg-card/30 backdrop-blur-sm border border-white/5 rounded-2xl p-6 animate-in slide-in-from-bottom-4 duration-700 shadow-2xl relative overflow-hidden group pb-10 mb-10">
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-primary/5 blur-[100px] -mr-32 -mt-32 rounded-full pointer-events-none group-hover:bg-primary/10 transition-colors"></div>
|
||||
<div className="h-[calc(100vh-5rem)] overflow-y-auto snap-y snap-mandatory custom-scrollbar relative scroll-smooth bg-background">
|
||||
{/* SECTION 1: METRICS & CHARTS */}
|
||||
<section className="min-h-full snap-start flex flex-col py-6 relative">
|
||||
<div className="w-full max-w-[1600px] mx-auto px-6 lg:px-12 flex-1 flex flex-col">
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<div className="p-1.5 bg-primary/20 rounded-lg">
|
||||
<Sparkles className="w-4 h-4 text-primary" />
|
||||
{/* 1. Top Utility Row (Separated) */}
|
||||
<div className="flex justify-end items-center gap-3 mb-4 animate-in fade-in slide-in-from-top-2">
|
||||
<Button variant="ghost" size="sm" className="h-8 px-4 text-xs font-medium border border-white/5 bg-white/5 hover:bg-white/10 hover:text-white transition-all text-white/60 rounded-full">
|
||||
<HelpCircle className="w-3.5 h-3.5 mr-2 opacity-70" /> 开发文档
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" className="h-8 px-4 text-xs font-medium border border-white/5 bg-white/5 hover:bg-white/10 hover:text-white transition-all text-white/60 rounded-full">
|
||||
<Mail className="w-3.5 h-3.5 mr-2 opacity-70" /> 问题反馈
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 2. Main Dashboard Container */}
|
||||
<div className="flex-1 bg-card/20 backdrop-blur-sm border border-white/5 rounded-[2rem] p-8 shadow-2xl flex flex-col gap-8 relative overflow-hidden group/dash">
|
||||
{/* Decorative Background for Container */}
|
||||
<div className="absolute top-0 right-0 w-[500px] h-[500px] bg-primary/5 blur-[120px] rounded-full pointer-events-none -mr-32 -mt-32"></div>
|
||||
|
||||
{/* Header Area */}
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 relative z-10">
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-4">
|
||||
<h1 className="text-3xl font-black tracking-tight text-white flex items-center gap-3">
|
||||
<div className="h-3 w-3 rounded-full bg-primary shadow-[0_0_15px_rgba(6,182,212,0.8)] animate-pulse"></div>
|
||||
控制台
|
||||
</h1>
|
||||
<span className="px-2 py-0.5 rounded text-[10px] font-bold bg-primary/10 text-primary border border-primary/20 tracking-wider">LIVE</span>
|
||||
</div>
|
||||
<p className="text-muted-foreground text-sm font-medium tracking-wide pl-7 opacity-80">
|
||||
实时监控智能体运行状态与业务核心指标
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Create Assistant CTA */}
|
||||
<Button
|
||||
onClick={() => navigate('/assistants')}
|
||||
className="h-10 px-6 rounded-full bg-gradient-to-r from-primary to-blue-600 hover:from-primary/90 hover:to-blue-600/90 shadow-[0_0_20px_rgba(6,182,212,0.3)] border-0 font-bold tracking-wide"
|
||||
>
|
||||
<Plus className="w-4 h-4 mr-2 stroke-[3]" /> 创建助手
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-sm font-bold text-white tracking-wide">关于平台</h3>
|
||||
</div>
|
||||
|
||||
{/* Filters Row */}
|
||||
<div className="flex items-center justify-between pt-2 pb-2 border-b border-white/5 relative z-10">
|
||||
<div className="flex items-center gap-2 text-xs font-bold text-muted-foreground uppercase tracking-widest">
|
||||
<MonitorPlay className="w-4 h-4 text-primary" />
|
||||
<span>Data Overview</span>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<p className="text-sm text-white/80 leading-relaxed font-medium">
|
||||
AI视频助手是一个领先的多模态智能体管理平台，致力于通过先进的 AI 技术为企业和个人提供高效、低延迟、拟人化的音视频通话解决方案。🚀
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div className="space-y-2 group/item">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-lg">🤖</span>
|
||||
<h4 className="text-xs font-bold text-primary uppercase tracking-wider">多模态智能体</h4>
|
||||
<div className="flex items-center gap-3 bg-black/20 p-1 rounded-xl border border-white/10">
|
||||
<div className="relative group min-w-[140px]">
|
||||
<select
|
||||
className="w-full bg-transparent border-0 rounded-lg pl-3 pr-8 py-1.5 text-xs font-bold focus:outline-none appearance-none cursor-pointer transition-all text-white hover:text-primary"
|
||||
value={selectedAssistantId}
|
||||
onChange={(e) => setSelectedAssistantId(e.target.value)}
|
||||
>
|
||||
<option value="all" className="bg-background">全平台概览</option>
|
||||
{mockAssistants.map(a => (
|
||||
<option key={a.id} value={a.id} className="bg-background">{a.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 h-3 w-3 text-muted-foreground pointer-events-none" />
|
||||
</div>
|
||||
<div className="w-px h-4 bg-white/10"></div>
|
||||
<div className="flex gap-1">
|
||||
{(['week', 'month', 'year'] as const).map((r) => (
|
||||
<button
|
||||
key={r}
|
||||
onClick={() => setTimeRange(r)}
|
||||
className={`px-3 py-1 text-[10px] font-bold uppercase tracking-wider rounded-lg transition-all ${timeRange === r ? 'bg-primary text-primary-foreground shadow-sm' : 'text-muted-foreground hover:bg-white/5 hover:text-white'}`}
|
||||
>
|
||||
{r === 'week' ? '本周' : r === 'month' ? '本月' : '全年'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[11px] text-muted-foreground leading-relaxed group-hover:text-white/70 transition-colors">
|
||||
支持构建具备文本对话、高保真语音输出以及双向实时视频通话能力的智能助手，覆盖 7x24h 智能客服场景。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 group/item">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-lg">📚</span>
|
||||
<h4 className="text-xs font-bold text-primary uppercase tracking-wider">动态知识检索</h4>
|
||||
</div>
|
||||
<p className="text-[11px] text-muted-foreground leading-relaxed group-hover:text-white/70 transition-colors">
|
||||
深度集成 RAG 技术，允许上传私有 PDF/DOCX 文档，让智能体在通话中基于企业私域知识库提供精准、权威的回复。
|
||||
</p>
|
||||
{/* Metrics Grid */}
|
||||
<div className="grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 relative z-10">
|
||||
<StatCard
|
||||
title="总通话数量"
|
||||
subtitle="Total Calls"
|
||||
value={stats.totalCalls.toString()}
|
||||
icon={<Phone />}
|
||||
trend="+12.5%"
|
||||
color="cyan"
|
||||
/>
|
||||
<StatCard
|
||||
title="平均接通率"
|
||||
subtitle="Answer Rate"
|
||||
value={`${stats.answerRate}%`}
|
||||
icon={<CheckCircle />}
|
||||
trend="+2.1%"
|
||||
color="emerald"
|
||||
/>
|
||||
<StatCard
|
||||
title="平均通话时长"
|
||||
subtitle="Avg Duration"
|
||||
value={stats.avgDuration}
|
||||
icon={<Clock />}
|
||||
trend="-0.5%"
|
||||
color="blue"
|
||||
/>
|
||||
<StatCard
|
||||
title="转人工服务"
|
||||
subtitle="Human Transfer"
|
||||
value={stats.humanTransferCount.toString()}
|
||||
icon={<UserCheck />}
|
||||
trend="+5%"
|
||||
color="violet"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 group/item">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-lg">🎙️</span>
|
||||
<h4 className="text-xs font-bold text-primary uppercase tracking-wider">音色库与克隆</h4>
|
||||
</div>
|
||||
<p className="text-[11px] text-muted-foreground leading-relaxed group-hover:text-white/70 transition-colors">
|
||||
集成多家主流 TTS 引擎，支持极致的声音克隆与微调，为您的品牌定制专属的、富有情感表现力的真人音色。
|
||||
</p>
|
||||
{/* Chart Section */}
|
||||
<div className="flex-1 min-h-[300px] relative z-10">
|
||||
<Card className="h-full p-6 border-white/5 bg-black/20 shadow-inner relative overflow-hidden group rounded-2xl">
|
||||
<div className="flex flex-col h-full relative z-10">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="space-y-1">
|
||||
<h3 className="text-lg font-bold text-white flex items-center gap-2">
|
||||
<BarChart3 className="w-4 h-4 text-primary" />
|
||||
业务趋势分析
|
||||
</h3>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="relative flex h-2 w-2">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
|
||||
</span>
|
||||
<span className="text-[10px] font-bold text-green-400 font-mono tracking-widest">REAL-TIME</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 w-full relative">
|
||||
<SimpleAreaChart data={stats.trend} />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 group/item">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-lg">🛡️</span>
|
||||
<h4 className="text-xs font-bold text-primary uppercase tracking-wider">端到端测试</h4>
|
||||
</div>
|
||||
<p className="text-[11px] text-muted-foreground leading-relaxed group-hover:text-white/70 transition-colors">
|
||||
内置自动化测试助手，可通过固定流程或 AI 智能模拟用户进行压力测试与逻辑验证，确保发布前的服务稳定性。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scroll Indicator */}
|
||||
<div
|
||||
onClick={() => scrollToNext(workflowRef)}
|
||||
className="absolute bottom-6 left-1/2 -translate-x-1/2 flex flex-col items-center gap-3 cursor-pointer group animate-bounce-slow opacity-40 hover:opacity-100 transition-all duration-500"
|
||||
>
|
||||
<span className="text-[10px] font-mono text-primary tracking-[0.3em] uppercase group-hover:tracking-[0.5em] transition-all">Product Logic</span>
|
||||
<ArrowDown className="w-5 h-5 text-primary" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 2: WORKFLOW LOGIC */}
|
||||
<section
|
||||
ref={workflowRef}
|
||||
className="min-h-full snap-start flex flex-col items-center justify-center py-20 px-6 relative bg-gradient-to-b from-background via-black/40 to-background border-t border-white/5"
|
||||
>
|
||||
{/* Background Grid */}
|
||||
<div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:40px_40px] opacity-50 pointer-events-none"></div>
|
||||
|
||||
<div className="w-full max-w-[1400px] text-center space-y-20 relative z-10">
|
||||
<div className="space-y-6">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-[10px] font-bold tracking-widest uppercase mb-2 border border-primary/20">
|
||||
System Architecture
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl font-black text-white tracking-tight">
|
||||
全链路智能体生命周期
|
||||
</h2>
|
||||
<p className="text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed">
|
||||
从构建到优化，为您提供一站式 <span className="text-primary font-bold">AI 视频通话</span> 解决方案闭环
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 relative px-4 md:px-10">
|
||||
{/* Connecting Line (Desktop) */}
|
||||
<div className="hidden md:block absolute top-14 left-[12%] right-[12%] h-0.5 bg-gradient-to-r from-transparent via-white/10 to-transparent z-0">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-primary/50 to-transparent w-1/2 animate-shimmer"></div>
|
||||
</div>
|
||||
|
||||
<WorkflowStep
|
||||
step="01"
|
||||
title="创建 (Create)"
|
||||
icon={<Bot className="w-8 h-8" />}
|
||||
desc="配置人设、知识库与工具链"
|
||||
color="blue"
|
||||
/>
|
||||
<WorkflowStep
|
||||
step="02"
|
||||
title="测试 (Test)"
|
||||
icon={<Zap className="w-8 h-8" />}
|
||||
desc="在线调试、自动化压力测试"
|
||||
color="yellow"
|
||||
/>
|
||||
<WorkflowStep
|
||||
step="03"
|
||||
title="发布 (Publish)"
|
||||
icon={<Rocket className="w-8 h-8" />}
|
||||
desc="多端分发、API 极速接入"
|
||||
color="cyan"
|
||||
/>
|
||||
<WorkflowStep
|
||||
step="04"
|
||||
title="观察 (Observe)"
|
||||
icon={<LineChart className="w-8 h-8" />}
|
||||
desc="全量日志、核心指标监控"
|
||||
color="purple"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scroll Indicator */}
|
||||
<div
|
||||
onClick={() => scrollToNext(aboutRef)}
|
||||
className="absolute bottom-10 left-1/2 -translate-x-1/2 cursor-pointer opacity-30 hover:opacity-100 transition-opacity p-4"
|
||||
>
|
||||
<ArrowDown className="w-6 h-6 text-white animate-bounce" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 3: ABOUT */}
|
||||
<section
|
||||
ref={aboutRef}
|
||||
className="min-h-full snap-start flex flex-col items-center justify-center py-20 px-6 relative bg-gradient-to-t from-primary/5 to-transparent border-t border-white/5"
|
||||
>
|
||||
<div className="w-full max-w-[1200px] relative">
|
||||
<div className="relative z-10 flex flex-col items-center text-center space-y-10">
|
||||
<div className="inline-flex items-center gap-3 px-5 py-2 rounded-full bg-white/5 border border-white/10 text-xs font-medium text-white/80 hover:bg-white/10 transition-colors cursor-default">
|
||||
<Sparkles className="w-4 h-4 text-primary" />
|
||||
<span>Powered by Gemini 2.0 & WebRTC</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-5xl md:text-6xl font-black text-white tracking-tighter">
|
||||
关于 <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">AI 视频助手</span>
|
||||
</h2>
|
||||
<p className="text-2xl text-muted-foreground max-w-3xl mx-auto leading-relaxed font-light">
|
||||
致力打造下一代多模态实时交互体验，让 AI 像真人一样看、听、说。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 w-full pt-16 text-left">
|
||||
<FeatureCard icon={<Layers className="text-blue-400" />} title="多模态融合" desc="文本、音频、视频流实时同步处理，毫秒级响应" />
|
||||
<FeatureCard icon={<Fingerprint className="text-purple-400" />} title="私有化知识" desc="深度集成 RAG 技术，确保企业数据安全可控" />
|
||||
<FeatureCard icon={<Network className="text-emerald-400" />} title="低延迟架构" desc="全球节点加速，WebRTC 端到端加密传输" />
|
||||
<FeatureCard icon={<Zap className="text-yellow-400" />} title="极速集成" desc="提供完善的 SDK 与 API 文档，5分钟完成上线" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer className="absolute bottom-4 text-[10px] text-muted-foreground opacity-30 font-mono">
|
||||
© 2024 AI VIDEO ASSISTANT INC. ALL RIGHTS RESERVED.
|
||||
</footer>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// --- Sub Components ---
|
||||
|
||||
const StatCard: React.FC<{ title: string; value: string; icon: React.ReactNode; trend?: string }> = ({ title, value, icon, trend }) => (
|
||||
<Card className="p-4 border-white/5 bg-card/30 hover:border-primary/40 hover:bg-card/50 transition-all duration-300 group flex flex-col justify-between min-h-[110px] shadow-lg">
|
||||
<div className="flex flex-row items-center justify-between space-y-0">
|
||||
<h3 className="text-[9px] font-mono font-bold text-muted-foreground uppercase tracking-[0.15em]">{title}</h3>
|
||||
<div className="p-1.5 bg-white/5 rounded-lg group-hover:bg-primary/20 transition-all group-hover:scale-110">
|
||||
{icon}
|
||||
</div>
|
||||
const StatCard: React.FC<{
|
||||
title: string;
|
||||
subtitle: string;
|
||||
value: string;
|
||||
icon: React.ReactNode;
|
||||
trend?: string;
|
||||
color?: 'cyan' | 'emerald' | 'blue' | 'violet'
|
||||
}> = ({ title, subtitle, value, icon, trend, color = 'cyan' }) => {
|
||||
const colors = {
|
||||
cyan: {
|
||||
icon: "text-cyan-400",
|
||||
bg: "bg-cyan-500/10",
|
||||
border: "border-cyan-500/20",
|
||||
glow: "group-hover:shadow-[0_0_30px_-5px_rgba(34,211,238,0.3)]",
|
||||
text: "group-hover:text-cyan-400",
|
||||
trend: "text-cyan-400 bg-cyan-400/10 border-cyan-400/20"
|
||||
},
|
||||
emerald: {
|
||||
icon: "text-emerald-400",
|
||||
bg: "bg-emerald-500/10",
|
||||
border: "border-emerald-500/20",
|
||||
glow: "group-hover:shadow-[0_0_30px_-5px_rgba(52,211,153,0.3)]",
|
||||
text: "group-hover:text-emerald-400",
|
||||
trend: "text-emerald-400 bg-emerald-400/10 border-emerald-400/20"
|
||||
},
|
||||
blue: {
|
||||
icon: "text-blue-400",
|
||||
bg: "bg-blue-500/10",
|
||||
border: "border-blue-500/20",
|
||||
glow: "group-hover:shadow-[0_0_30px_-5px_rgba(96,165,250,0.3)]",
|
||||
text: "group-hover:text-blue-400",
|
||||
trend: "text-blue-400 bg-blue-400/10 border-blue-400/20"
|
||||
},
|
||||
violet: {
|
||||
icon: "text-violet-400",
|
||||
bg: "bg-violet-500/10",
|
||||
border: "border-violet-500/20",
|
||||
glow: "group-hover:shadow-[0_0_30px_-5px_rgba(167,139,250,0.3)]",
|
||||
text: "group-hover:text-violet-400",
|
||||
trend: "text-violet-400 bg-violet-400/10 border-violet-400/20"
|
||||
}
|
||||
};
|
||||
|
||||
const theme = colors[color];
|
||||
|
||||
return (
|
||||
<div className={`relative overflow-hidden rounded-2xl border border-white/5 bg-gradient-to-br from-card/80 to-card/40 p-6 transition-all duration-500 group backdrop-blur-md hover:border-white/20 ${theme.glow}`}>
|
||||
{/* Decorative Background Blob */}
|
||||
<div className={`absolute -right-12 -top-12 h-40 w-40 rounded-full blur-[60px] opacity-0 group-hover:opacity-20 transition-opacity duration-700 ${theme.bg.replace('/10', '')}`} />
|
||||
|
||||
<div className="relative z-10 flex flex-col justify-between h-full gap-8">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className={`p-3.5 rounded-xl border backdrop-blur-md transition-all duration-500 group-hover:scale-110 group-hover:-rotate-3 ${theme.bg} ${theme.border}`}>
|
||||
{React.cloneElement(icon as React.ReactElement, { className: `w-7 h-7 ${theme.icon}` })}
|
||||
</div>
|
||||
{trend && (
|
||||
<div className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold font-mono border backdrop-blur-md ${theme.trend}`}>
|
||||
<span>{trend}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-xs font-bold text-muted-foreground uppercase tracking-wider">{title}</h3>
|
||||
<span className="text-[9px] text-muted-foreground/40 font-mono hidden group-hover:inline-block transition-all">{subtitle}</span>
|
||||
</div>
|
||||
<div className={`text-5xl font-black text-white tracking-tight tabular-nums transition-colors duration-300 ${theme.text}`}>
|
||||
{value}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<div className="text-2xl font-black tracking-tight text-white group-hover:text-primary transition-colors">{value}</div>
|
||||
{trend && (
|
||||
<p className={`text-[8px] font-bold font-mono mt-1 flex items-center ${trend.includes('+') ? 'text-green-400' : 'text-red-400'}`}>
|
||||
<span className="bg-white/5 px-1 rounded-sm mr-1 opacity-70">{trend}</span>
|
||||
</p>
|
||||
)}
|
||||
);
|
||||
};
|
||||
|
||||
const WorkflowStep: React.FC<{ step: string; title: string; desc: string; icon: React.ReactNode; color: 'blue' | 'yellow' | 'cyan' | 'purple' }> = ({ step, title, desc, icon, color }) => {
|
||||
const colors = {
|
||||
blue: "text-blue-400 border-blue-500/30 hover:border-blue-400 hover:shadow-[0_0_30px_rgba(96,165,250,0.3)] bg-blue-500/10",
|
||||
yellow: "text-yellow-400 border-yellow-500/30 hover:border-yellow-400 hover:shadow-[0_0_30px_rgba(250,204,21,0.3)] bg-yellow-500/10",
|
||||
cyan: "text-cyan-400 border-cyan-500/30 hover:border-cyan-400 hover:shadow-[0_0_30px_rgba(34,211,238,0.3)] bg-cyan-500/10",
|
||||
purple: "text-purple-400 border-purple-500/30 hover:border-purple-400 hover:shadow-[0_0_30px_rgba(192,132,252,0.3)] bg-purple-500/10"
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative z-10 flex flex-col items-center text-center group">
|
||||
<div className={`w-24 h-24 rounded-3xl flex items-center justify-center border-2 transition-all duration-500 mb-6 backdrop-blur-xl ${colors[color]} group-hover:scale-110 group-hover:-translate-y-2`}>
|
||||
<div className="transform transition-transform duration-500 group-hover:scale-110 group-hover:rotate-6">
|
||||
{icon}
|
||||
</div>
|
||||
<div className="absolute -top-3 -right-3 w-8 h-8 rounded-full bg-background border border-white/10 flex items-center justify-center text-[10px] font-black font-mono text-muted-foreground shadow-lg">
|
||||
{step}
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-2 group-hover:text-white transition-colors">{title}</h3>
|
||||
<p className="text-sm text-muted-foreground leading-snug max-w-[200px] group-hover:text-white/70 transition-colors">{desc}</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const FeatureCard: React.FC<{ icon: React.ReactNode; title: string; desc: string }> = ({ icon, title, desc }) => (
|
||||
<div className="p-6 rounded-2xl bg-white/[0.03] border border-white/5 hover:bg-white/[0.06] hover:border-white/10 transition-all duration-300 group">
|
||||
<div className="mb-4 p-3 bg-black/20 rounded-xl w-fit group-hover:scale-110 transition-transform duration-300 [&>svg]:w-6 [&>svg]:h-6">
|
||||
{icon}
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-2">{title}</h3>
|
||||
<p className="text-sm text-muted-foreground leading-relaxed">{desc}</p>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
|
||||
const SimpleAreaChart: React.FC<{ data: { label: string, value: number }[] }> = ({ data }) => {
|
||||
@@ -262,7 +430,7 @@ const SimpleAreaChart: React.FC<{ data: { label: string, value: number }[] }> =
|
||||
{/* Area Fill Gradient */}
|
||||
<defs>
|
||||
<linearGradient id="chartGradient" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor="hsl(var(--primary))" stopOpacity="0.3" />
|
||||
<stop offset="0%" stopColor="hsl(var(--primary))" stopOpacity="0.4" />
|
||||
<stop offset="100%" stopColor="hsl(var(--primary))" stopOpacity="0" />
|
||||
</linearGradient>
|
||||
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
@@ -299,7 +467,7 @@ const SimpleAreaChart: React.FC<{ data: { label: string, value: number }[] }> =
|
||||
</svg>
|
||||
|
||||
{/* X-Axis Labels */}
|
||||
<div className="absolute bottom-0 left-0 right-0 flex justify-between px-[3%] text-[8px] text-muted-foreground pointer-events-none font-mono opacity-30 mt-2">
|
||||
<div className="absolute bottom-0 left-0 right-0 flex justify-between px-[3%] text-[9px] text-muted-foreground pointer-events-none font-mono opacity-50 mt-3">
|
||||
{data.filter((_, i) => i % Math.ceil(data.length / 7) === 0).map((d, i) => (
|
||||
<span key={i}>{d.label}</span>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user