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

Increase overview UX

Browse Source
This commit is contained in:
Xin Wang
2026-02-07 23:57:16 +08:00
parent 84d5da37da
commit 803f7185c0
1 changed files with 20 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
web/pages/Dashboard.tsx
View File

@@ -72,7 +72,7 @@ export const DashboardPage: React.FC = () => {
<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 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"> <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>Data Overview</span> <span>数据总览</span>
</div> </div>
<div className="flex items-center gap-3 bg-black/20 p-1 rounded-xl border border-white/10"> <div className="flex items-center gap-3 bg-black/20 p-1 rounded-xl border border-white/10">
@@ -108,7 +108,7 @@ export const DashboardPage: React.FC = () => {
<div className="grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 relative z-10"> <div className="grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 relative z-10">
<StatCard <StatCard
title="总通话数量" title="总通话数量"
subtitle="Total Calls" subtitle="累计呼叫"
value={stats.totalCalls.toString()} value={stats.totalCalls.toString()}
icon={<Phone />} icon={<Phone />}
trend="+12.5%" trend="+12.5%"
@@ -116,7 +116,7 @@ export const DashboardPage: React.FC = () => {
/> />
<StatCard <StatCard
title="平均接通率" title="平均接通率"
subtitle="Answer Rate" subtitle="接听占比"
value={`${stats.answerRate}%`} value={`${stats.answerRate}%`}
icon={<CheckCircle />} icon={<CheckCircle />}
trend="+2.1%" trend="+2.1%"
@@ -124,7 +124,7 @@ export const DashboardPage: React.FC = () => {
/> />
<StatCard <StatCard
title="平均通话时长" title="平均通话时长"
subtitle="Avg Duration" subtitle="持续时间"
value={stats.avgDuration} value={stats.avgDuration}
icon={<Clock />} icon={<Clock />}
trend="-0.5%" trend="-0.5%"
@@ -132,7 +132,7 @@ export const DashboardPage: React.FC = () => {
/> />
<StatCard <StatCard
title="转人工服务" title="转人工服务"
subtitle="Human Transfer" subtitle="人工介入"
value={stats.humanTransferCount.toString()} value={stats.humanTransferCount.toString()}
icon={<UserCheck />} icon={<UserCheck />}
trend="+5%" trend="+5%"
@@ -156,7 +156,7 @@ export const DashboardPage: React.FC = () => {
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span> <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 className="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
</span> </span>
<span className="text-[10px] font-bold text-green-400 font-mono tracking-widest">REAL-TIME</span> <span className="text-[10px] font-bold text-green-400 font-mono tracking-widest">实时</span>
</div> </div>
</div> </div>
<div className="flex-1 w-full relative"> <div className="flex-1 w-full relative">
@@ -171,10 +171,12 @@ 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" 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"
> >
<span className="text-[10px] font-mono text-primary tracking-[0.3em] uppercase group-hover:tracking-[0.5em] transition-all">Product Logic</span> <span className="text-[10px] font-bold text-primary tracking-[0.3em] uppercase group-hover:tracking-[0.5em] transition-all">核心流程</span>
<ArrowDown className="w-5 h-5 text-primary" /> <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">
<ArrowDown className="w-5 h-5" />
</div>
</div> </div>
</section> </section>
@@ -188,9 +190,6 @@ export const DashboardPage: React.FC = () => {
<div className="w-full max-w-[1400px] text-center space-y-20 relative z-10"> <div className="w-full max-w-[1400px] text-center space-y-20 relative z-10">
<div className="space-y-6"> <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 className="text-4xl md:text-5xl font-black text-white tracking-tight">
全链路智能体生命周期 全链路智能体生命周期
</h2> </h2>
@@ -207,28 +206,28 @@ export const DashboardPage: React.FC = () => {
<WorkflowStep <WorkflowStep
step="01" step="01"
title="创建 (Create)" title="创建智能体"
icon={<Bot className="w-8 h-8" />} icon={<Bot className="w-8 h-8" />}
desc="配置人设、知识库与工具链" desc="配置人设、知识库与工具链"
color="blue" color="blue"
/> />
<WorkflowStep <WorkflowStep
step="02" step="02"
title="测试 (Test)" title="调试与测试"
icon={<Zap className="w-8 h-8" />} icon={<Zap className="w-8 h-8" />}
desc="在线调试、自动化压力测试" desc="在线调试、自动化压力测试"
color="yellow" color="yellow"
/> />
<WorkflowStep <WorkflowStep
step="03" step="03"
title="发布 (Publish)" title="发布上线"
icon={<Rocket className="w-8 h-8" />} icon={<Rocket className="w-8 h-8" />}
desc="多端分发、API 极速接入" desc="多端分发、API 极速接入"
color="cyan" color="cyan"
/> />
<WorkflowStep <WorkflowStep
step="04" step="04"
title="观察 (Observe)" title="监控运营"
icon={<LineChart className="w-8 h-8" />} icon={<LineChart className="w-8 h-8" />}
desc="全量日志、核心指标监控" desc="全量日志、核心指标监控"
color="purple" color="purple"
@@ -239,8 +238,9 @@ export const DashboardPage: React.FC = () => {
{/* Scroll Indicator */} {/* Scroll Indicator */}
<div <div
onClick={() => scrollToNext(aboutRef)} 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" className="absolute bottom-10 left-1/2 -translate-x-1/2 cursor-pointer opacity-30 hover:opacity-100 transition-opacity p-4 flex flex-col items-center gap-2 hover:scale-110 duration-300"
> >
<span className="text-[10px] text-muted-foreground tracking-widest font-bold">了解更多</span>
<ArrowDown className="w-6 h-6 text-white animate-bounce" /> <ArrowDown className="w-6 h-6 text-white animate-bounce" />
</div> </div>
</section> </section>
@@ -252,12 +252,8 @@ export const DashboardPage: React.FC = () => {
> >
<div className="w-full max-w-[1200px] relative"> <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="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"> <div className="space-y-4 mt-8">
<h2 className="text-5xl md:text-6xl font-black text-white tracking-tighter"> <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> 关于 <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">AI 视频助手</span>
</h2> </h2>
@@ -276,7 +272,7 @@ export const DashboardPage: React.FC = () => {
</div> </div>
<footer className="absolute bottom-4 text-[10px] text-muted-foreground opacity-30 font-mono"> <footer className="absolute bottom-4 text-[10px] text-muted-foreground opacity-30 font-mono">
© 2024 AI VIDEO ASSISTANT INC. ALL RIGHTS RESERVED. © 2024 AI 视频助手. 保留所有权利.
</footer> </footer>
</section> </section>
</div> </div>
@@ -350,7 +346,7 @@ const StatCard: React.FC<{
<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-[9px] text-muted-foreground/40 font-mono hidden group-hover:inline-block transition-all">{subtitle}</span> <span className="text-[10px] text-muted-foreground/40 font-bold hidden group-hover: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={`text-5xl font-black text-white tracking-tight tabular-nums transition-colors duration-300 ${theme.text}`}>
{value} {value}