From 84d5da37dadeb415d654e46a2ef770897eb521ce Mon Sep 17 00:00:00 2001 From: Xin Wang Date: Sat, 7 Feb 2026 23:22:12 +0800 Subject: [PATCH] Update web overview panel --- web/pages/Dashboard.tsx | 562 ++++++++++++++++++++++++++-------------- 1 file changed, 365 insertions(+), 197 deletions(-) diff --git a/web/pages/Dashboard.tsx b/web/pages/Dashboard.tsx index 6b34ff5..d508a9c 100644 --- a/web/pages/Dashboard.tsx +++ b/web/pages/Dashboard.tsx @@ -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('all'); + + const workflowRef = useRef(null); + const aboutRef = useRef(null); const stats = useMemo(() => { return getDashboardStats(timeRange, selectedAssistantId); }, [timeRange, selectedAssistantId]); + const scrollToNext = (ref: React.RefObject) => { + ref.current?.scrollIntoView({ behavior: 'smooth' }); + }; + return ( -
-
- - {/* 1. Utility Row (Top Navigation Actions) */} -
- - -
- - {/* 2. Welcome Header */} -
-
-

- 欢迎, Admin User -

-

- 系统当前运行环境： - - - HEALTHY - -

-
-
- - {/* 3. Section Header: Title + Filters */} -
-
-
- -
-
-

用量标准

- Metrics Overview -
-
- -
-
-
- -
- - -
- -
- -
- {(['week', 'month', 'year'] as const).map((r) => ( - - ))} -
-
-
- - {/* 4. Metrics Grid (Cards) */} -
- } - trend="+12.5% UP" - /> - } - trend="+2.1% UP" - /> - } - trend="-0.5% LOW" - /> - } - trend="+5% STABLE" - /> -
- - {/* 5. Charts Section */} -
- -
-
-

- - 通话趋势 (Performance Insight) -

-

REAL-TIME DATA PROCESSING PIPELINE ENABLED

-
-
-
-
-
- Streaming -
-
-
- -
- -
- - {/* 6. Platform Feature Intro - Updated Background */} -
-
+
+ {/* SECTION 1: METRICS & CHARTS */} +
+
-
-
-
- + {/* 1. Top Utility Row (Separated) */} +
+ + +
+ + {/* 2. Main Dashboard Container */} +
+ {/* Decorative Background for Container */} +
+ + {/* Header Area */} +
+
+
+

+
+ 控制台 +

+ LIVE +
+

+ 实时监控智能体运行状态与业务核心指标 +

+
+ +
+ {/* Create Assistant CTA */} + +
-

关于平台

-
+ + {/* Filters Row */} +
+
+ + Data Overview +
-
-

- AI视频助手是一个领先的多模态智能体管理平台，致力于通过先进的 AI 技术为企业和个人提供高效、低延迟、拟人化的音视频通话解决方案。🚀 -

-
- -
-
-
- 🤖 -

多模态智能体

+
+
+ + +
+
+
+ {(['week', 'month', 'year'] as const).map((r) => ( + + ))} +
-

- 支持构建具备文本对话、高保真语音输出以及双向实时视频通话能力的智能助手，覆盖 7x24h 智能客服场景。 -

-
-
- 📚 -

动态知识检索

-
-

- 深度集成 RAG 技术，允许上传私有 PDF/DOCX 文档，让智能体在通话中基于企业私域知识库提供精准、权威的回复。 -

+ {/* Metrics Grid */} +
+ } + trend="+12.5%" + color="cyan" + /> + } + trend="+2.1%" + color="emerald" + /> + } + trend="-0.5%" + color="blue" + /> + } + trend="+5%" + color="violet" + />
-
-
- 🎙️ -

音色库与克隆

-
-

- 集成多家主流 TTS 引擎，支持极致的声音克隆与微调，为您的品牌定制专属的、富有情感表现力的真人音色。 -

+ {/* Chart Section */} +
+ +
+
+
+

+ + 业务趋势分析 +

+
+
+ + + + + REAL-TIME +
+
+
+ +
+
+
- -
-
- 🛡️ -

端到端测试

-
-

- 内置自动化测试助手，可通过固定流程或 AI 智能模拟用户进行压力测试与逻辑验证，确保发布前的服务稳定性。 -

-
-
-
+ + {/* Scroll Indicator */} +
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" + > + Product Logic + +
+
+ + {/* SECTION 2: WORKFLOW LOGIC */} +
+ {/* Background Grid */} +
+ +
+
+
+ System Architecture +
+

+ 全链路智能体生命周期 +

+

+ 从构建到优化，为您提供一站式 AI 视频通话 解决方案闭环 +

+
+ +
+ {/* Connecting Line (Desktop) */} +
+
+
+ + } + desc="配置人设、知识库与工具链" + color="blue" + /> + } + desc="在线调试、自动化压力测试" + color="yellow" + /> + } + desc="多端分发、API 极速接入" + color="cyan" + /> + } + desc="全量日志、核心指标监控" + color="purple" + /> +
+
+ + {/* Scroll Indicator */} +
scrollToNext(aboutRef)} + className="absolute bottom-10 left-1/2 -translate-x-1/2 cursor-pointer opacity-30 hover:opacity-100 transition-opacity p-4" + > + +
+
+ + {/* SECTION 3: ABOUT */} +
+
+
+
+ + Powered by Gemini 2.0 & WebRTC +
+ +
+

+ 关于 AI 视频助手 +

+

+ 致力打造下一代多模态实时交互体验，让 AI 像真人一样看、听、说。 +

+
+ +
+ } title="多模态融合" desc="文本、音频、视频流实时同步处理，毫秒级响应" /> + } title="私有化知识" desc="深度集成 RAG 技术，确保企业数据安全可控" /> + } title="低延迟架构" desc="全球节点加速，WebRTC 端到端加密传输" /> + } title="极速集成" desc="提供完善的 SDK 与 API 文档，5分钟完成上线" /> +
+
+
+ +
+ © 2024 AI VIDEO ASSISTANT INC. ALL RIGHTS RESERVED. +
+
); }; // --- Sub Components --- -const StatCard: React.FC<{ title: string; value: string; icon: React.ReactNode; trend?: string }> = ({ title, value, icon, trend }) => ( - -
-

{title}

-
- {icon} -
+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 ( +
+ {/* Decorative Background Blob */} +
+ +
+
+
+ {React.cloneElement(icon as React.ReactElement, { className: `w-7 h-7 ${theme.icon}` })} +
+ {trend && ( +
+ {trend} +
+ )} +
+ +
+
+

{title}

+ {subtitle} +
+
+ {value} +
+
+
-
-
{value}
- {trend && ( -

- {trend} -

- )} + ); +}; + +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 ( +
+
+
+ {icon} +
+
+ {step} +
+
+

{title}

+

{desc}

+
+ ); +}; + +const FeatureCard: React.FC<{ icon: React.ReactNode; title: string; desc: string }> = ({ icon, title, desc }) => ( +
+
+ {icon} +
+

{title}

+

{desc}

- ); 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 */} - + @@ -299,7 +467,7 @@ const SimpleAreaChart: React.FC<{ data: { label: string, value: number }[] }> = {/* X-Axis Labels */} -
+
{data.filter((_, i) => i % Math.ceil(data.length / 7) === 0).map((d, i) => ( {d.label} ))}