Increase overview UX
This commit is contained in:
Xin Wang
@@ -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 gap-2 text-xs font-bold text-muted-foreground uppercase tracking-widest">
|
||||
<MonitorPlay className="w-4 h-4 text-primary" />
|
||||
<span>Data Overview</span>
|
||||
<span>数据总览</span>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<StatCard
|
||||
title="总通话数量"
|
||||
subtitle="Total Calls"
|
||||
subtitle="累计呼叫"
|
||||
value={stats.totalCalls.toString()}
|
||||
icon={<Phone />}
|
||||
trend="+12.5%"
|
||||
@@ -116,7 +116,7 @@ export const DashboardPage: React.FC = () => {
|
||||
/>
|
||||
<StatCard
|
||||
title="平均接通率"
|
||||
subtitle="Answer Rate"
|
||||
subtitle="接听占比"
|
||||
value={`${stats.answerRate}%`}
|
||||
icon={<CheckCircle />}
|
||||
trend="+2.1%"
|
||||
@@ -124,7 +124,7 @@ export const DashboardPage: React.FC = () => {
|
||||
/>
|
||||
<StatCard
|
||||
title="平均通话时长"
|
||||
subtitle="Avg Duration"
|
||||
subtitle="持续时间"
|
||||
value={stats.avgDuration}
|
||||
icon={<Clock />}
|
||||
trend="-0.5%"
|
||||
@@ -132,7 +132,7 @@ export const DashboardPage: React.FC = () => {
|
||||
/>
|
||||
<StatCard
|
||||
title="转人工服务"
|
||||
subtitle="Human Transfer"
|
||||
subtitle="人工介入"
|
||||
value={stats.humanTransferCount.toString()}
|
||||
icon={<UserCheck />}
|
||||
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="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>
|
||||
<span className="text-[10px] font-bold text-green-400 font-mono tracking-widest">实时</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 w-full relative">
|
||||
@@ -171,10 +171,12 @@ export const DashboardPage: React.FC = () => {
|
||||
{/* 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"
|
||||
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>
|
||||
<ArrowDown className="w-5 h-5 text-primary" />
|
||||
<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">
|
||||
<ArrowDown className="w-5 h-5" />
|
||||
</div>
|
||||
</div>
|
||||
</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="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>
|
||||
@@ -207,28 +206,28 @@ export const DashboardPage: React.FC = () => {
|
||||
|
||||
<WorkflowStep
|
||||
step="01"
|
||||
title="创建 (Create)"
|
||||
title="创建智能体"
|
||||
icon={<Bot className="w-8 h-8" />}
|
||||
desc="配置人设、知识库与工具链"
|
||||
color="blue"
|
||||
/>
|
||||
<WorkflowStep
|
||||
step="02"
|
||||
title="测试 (Test)"
|
||||
title="调试与测试"
|
||||
icon={<Zap className="w-8 h-8" />}
|
||||
desc="在线调试、自动化压力测试"
|
||||
color="yellow"
|
||||
/>
|
||||
<WorkflowStep
|
||||
step="03"
|
||||
title="发布 (Publish)"
|
||||
title="发布上线"
|
||||
icon={<Rocket className="w-8 h-8" />}
|
||||
desc="多端分发、API 极速接入"
|
||||
color="cyan"
|
||||
/>
|
||||
<WorkflowStep
|
||||
step="04"
|
||||
title="观察 (Observe)"
|
||||
title="监控运营"
|
||||
icon={<LineChart className="w-8 h-8" />}
|
||||
desc="全量日志、核心指标监控"
|
||||
color="purple"
|
||||
@@ -239,8 +238,9 @@ export const DashboardPage: React.FC = () => {
|
||||
{/* 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"
|
||||
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" />
|
||||
</div>
|
||||
</section>
|
||||
@@ -252,12 +252,8 @@ export const DashboardPage: React.FC = () => {
|
||||
>
|
||||
<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">
|
||||
<div className="space-y-4 mt-8">
|
||||
<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>
|
||||
@@ -276,7 +272,7 @@ export const DashboardPage: React.FC = () => {
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</section>
|
||||
</div>
|
||||
@@ -350,7 +346,7 @@ const StatCard: React.FC<{
|
||||
<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>
|
||||
<span className="text-[10px] text-muted-foreground/40 font-bold 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}
|
||||
|
||||
Reference in New Issue
Block a user