wx44wx/AI-VideoAssistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update overview

Browse Source
This commit is contained in:
Xin Wang
2026-02-11 14:14:56 +08:00
parent e7605f661b
commit ede12e2df0
1 changed files with 38 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
web/pages/Dashboard.tsx
View File

@@ -38,36 +38,38 @@ export const DashboardPage: React.FC = () => {
return ( return (
<div className="h-[calc(100vh-5rem)] overflow-y-auto snap-y snap-mandatory custom-scrollbar relative scroll-smooth bg-background"> <div className="h-[calc(100vh-5rem)] overflow-y-auto snap-y snap-mandatory custom-scrollbar relative scroll-smooth bg-background">
{/* SECTION 1: METRICS & CHARTS */} <div className="sticky top-0 z-40">
<section className="min-h-full snap-start flex flex-col py-6 relative"> <div className="mx-auto w-full max-w-[1600px] px-6 lg:px-12 pt-3">
<div className="w-full max-w-[1600px] mx-auto px-6 lg:px-12 flex-1 flex flex-col"> <div className="flex justify-end items-center gap-3 rounded-2xl border border-white/5 bg-background/70 px-3 py-2 backdrop-blur-xl">
{/* 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"> <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" /> 开发文档 <HelpCircle className="w-3.5 h-3.5 mr-2 opacity-70" /> 开发文档
</Button> </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"> <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" /> 问题反馈 <Mail className="w-3.5 h-3.5 mr-2 opacity-70" /> 问题反馈
</Button> </Button>
</div> </div>
</div>
</div>
{/* SECTION 1: METRICS & CHARTS */}
<section className="min-h-full snap-start flex flex-col pt-2 pb-5 relative">
<div className="w-full max-w-[1600px] mx-auto px-6 lg:px-12 flex-1 flex flex-col">
{/* 2. Main Dashboard Container */} {/* 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"> <div className="flex-1 bg-card/20 backdrop-blur-sm border border-white/5 rounded-[2rem] px-6 py-5 lg:px-7 lg:py-6 shadow-2xl flex flex-col gap-4 relative overflow-hidden group/dash">
{/* Decorative Background for Container */} {/* 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> <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 */} {/* Header Area */}
<div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 relative z-10"> <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-3 relative z-10">
<div className="space-y-1"> <div className="space-y-1">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<h1 className="text-3xl font-black tracking-tight text-white flex items-center gap-3"> <h1 className="text-2xl lg: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> <div className="h-3 w-3 rounded-full bg-primary shadow-[0_0_15px_rgba(6,182,212,0.8)] animate-pulse"></div>
控制台 控制台
</h1> </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> <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> </div>
<p className="text-muted-foreground text-sm font-medium tracking-wide pl-7 opacity-80"> <p className="text-muted-foreground text-xs lg:text-sm font-medium tracking-wide pl-7 opacity-80">
实时监控智能体运行状态与业务核心指标 实时监控智能体运行状态与业务核心指标
</p> </p>
</div> </div>
@@ -76,7 +78,7 @@ export const DashboardPage: React.FC = () => {
{/* Create Assistant CTA */} {/* Create Assistant CTA */}
<Button <Button
onClick={() => navigate('/assistants')} 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" className="h-9 px-5 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]" /> 创建助手 <Plus className="w-4 h-4 mr-2 stroke-[3]" /> 创建助手
</Button> </Button>
@@ -84,7 +86,7 @@ export const DashboardPage: React.FC = () => {
</div> </div>
{/* Filters Row */} {/* 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 justify-between py-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"> <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" /> <MonitorPlay className="w-4 h-4 text-primary" />
<span>数据总览</span> <span>数据总览</span>
@@ -120,7 +122,7 @@ export const DashboardPage: React.FC = () => {
</div> </div>
{/* Metrics Grid */} {/* Metrics Grid */}
<div className="grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 relative z-10"> <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 relative z-10">
<StatCard <StatCard
title="总通话数量" title="总通话数量"
subtitle="累计呼叫" subtitle="累计呼叫"
@@ -156,12 +158,12 @@ export const DashboardPage: React.FC = () => {
</div> </div>
{/* Chart Section */} {/* Chart Section */}
<div className="flex-1 min-h-[300px] relative z-10"> <div className="flex-1 min-h-[220px] relative z-10">
<Card className="h-full p-6 border-white/5 bg-black/20 shadow-inner relative overflow-hidden group rounded-2xl"> <Card className="h-full p-4 lg:p-5 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 flex-col h-full relative z-10">
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-3">
<div className="space-y-1"> <div className="space-y-1">
<h3 className="text-lg font-bold text-white flex items-center gap-2"> <h3 className="text-base lg:text-lg font-bold text-white flex items-center gap-2">
<BarChart3 className="w-4 h-4 text-primary" /> <BarChart3 className="w-4 h-4 text-primary" />
业务趋势分析 业务趋势分析
</h3> </h3>
@@ -186,7 +188,7 @@ export const DashboardPage: React.FC = () => {
{/* Scroll Indicator */} {/* Scroll Indicator */}
<div <div
onClick={() => scrollToNext(workflowRef)} 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 hover:scale-110" className="absolute bottom-4 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 cursor-pointer group animate-bounce-slow opacity-35 hover:opacity-100 transition-all duration-500 hover:scale-110"
> >
<span className="text-[10px] font-bold text-primary tracking-[0.3em] uppercase group-hover:tracking-[0.5em] transition-all">核心流程</span> <span className="text-[10px] font-bold text-primary tracking-[0.3em] uppercase group-hover:tracking-[0.5em] transition-all">核心流程</span>
<div className="p-2 rounded-full bg-primary/10 border border-primary/20 backdrop-blur-sm group-hover:bg-primary group-hover:text-black transition-colors"> <div className="p-2 rounded-full bg-primary/10 border border-primary/20 backdrop-blur-sm group-hover:bg-primary group-hover:text-black transition-colors">
@@ -342,29 +344,31 @@ const StatCard: React.FC<{
const theme = colors[color]; const theme = colors[color];
return ( 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}`}> <div className={`relative overflow-hidden rounded-2xl border border-white/5 bg-gradient-to-br from-card/80 to-card/40 p-4 transition-all duration-500 group backdrop-blur-md hover:border-white/20 ${theme.glow}`}>
{/* Decorative Background Blob */} {/* 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={`absolute -right-12 -top-12 h-32 w-32 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="relative z-10 flex flex-col justify-between h-full gap-3">
<div className="flex justify-between items-start"> <div className="flex justify-between items-center">
<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}`}> <div className={`p-2.5 rounded-xl border backdrop-blur-md transition-all duration-500 group-hover:scale-105 group-hover:-rotate-3 ${theme.bg} ${theme.border}`}>
{React.cloneElement(icon as React.ReactElement, { className: `w-7 h-7 ${theme.icon}` })} {React.cloneElement(icon as React.ReactElement, { className: `w-5 h-5 ${theme.icon}` })}
</div> </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>
<div className="space-y-1"> <div className="space-y-1">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<h3 className="text-xs font-bold text-muted-foreground uppercase tracking-wider">{title}</h3> <h3 className="text-xs font-bold text-muted-foreground uppercase tracking-wider">{title}</h3>
<span className="text-[10px] text-muted-foreground/40 font-bold hidden group-hover:inline-block transition-all">{subtitle}</span> <span className="text-[10px] text-muted-foreground/40 font-bold hidden lg:inline-block transition-all">{subtitle}</span>
</div> </div>
<div className={`text-5xl font-black text-white tracking-tight tabular-nums transition-colors duration-300 ${theme.text}`}> <div className="flex items-center justify-between gap-2">
{value} <div className={`text-3xl lg:text-[2rem] leading-none font-black text-white tracking-tight tabular-nums transition-colors duration-300 ${theme.text}`}>
{value}
</div>
{trend && (
<div className={`shrink-0 flex items-center gap-1 px-2 py-1 rounded-full text-[10px] font-bold font-mono border backdrop-blur-md ${theme.trend}`}>
<span>{trend}</span>
</div>
)}
</div> </div>
</div> </div>
</div> </div>