Better UX

pages/Dashboard.tsx

@@ -1,6 +1,6 @@
 
 import React, { useState, useMemo } from 'react';
-import { Phone, CheckCircle, Clock, UserCheck, Activity, Filter, ChevronDown, BarChart3, HelpCircle, Mail } from 'lucide-react';
+import { Phone, CheckCircle, Clock, UserCheck, Activity, Filter, ChevronDown, BarChart3, HelpCircle, Mail, Sparkles, Terminal, Box, Zap, ShieldCheck } from 'lucide-react';
 import { Card, Button } from '../components/UI';
 import { mockAssistants, getDashboardStats } from '../services/mockData';
 
@@ -13,35 +13,37 @@ export const DashboardPage: React.FC = () => {
   }, [timeRange, selectedAssistantId]);
 
   return (
-    <div className="min-h-full flex flex-col justify-center animate-in fade-in py-1">
-      <div className="w-full max-w-5xl mx-auto space-y-4 px-2">
+    <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">
+          <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">
+          <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 Row */}
-        <div className="flex flex-col space-y-0.5 text-center md:text-left pt-1">
-          <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>
+        {/* 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 aligned perfectly */}
-        <div className="flex flex-col md:flex-row items-center justify-between border-b border-white/5 pb-3 pt-1 gap-3">
+        {/* 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" />
@@ -52,9 +54,7 @@ export const DashboardPage: React.FC = () => {
               </div>
           </div>
 
-          {/* Filters Group (Aligned Right) */}
           <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">
-              {/* Assistant Selector */}
               <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" />
@@ -74,7 +74,6 @@ export const DashboardPage: React.FC = () => {
 
               <div className="h-3 w-px bg-white/10 mx-0.5"></div>
 
-              {/* Time Range Selector */}
               <div className="flex gap-0.5">
                   {(['week', 'month', 'year'] as const).map((r) => (
                       <button
@@ -135,11 +134,73 @@ export const DashboardPage: React.FC = () => {
                     <span className="text-[9px] font-mono text-primary animate-pulse tracking-widest uppercase">Streaming</span>
                   </div>
               </div>
-              <div className="h-[250px] w-full">
+              <div className="h-[300px] w-full">
                   <SimpleAreaChart data={stats.trend} />
               </div>
           </Card>
         </div>
+
+        {/* 6. Platform Feature Intro - Moved to Bottom, Full Width */}
+        <div className="w-full bg-white/[0.02] 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="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" />
+              </div>
+              <h3 className="text-sm font-bold text-white tracking-wide">关于平台</h3>
+            </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>
+                <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>
+              </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>
+              </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>
     </div>
   );
@@ -169,9 +230,9 @@ const StatCard: React.FC<{ title: string; value: string; icon: React.ReactNode;
 const SimpleAreaChart: React.FC<{ data: { label: string, value: number }[] }> = ({ data }) => {
     if (!data || data.length === 0) return null;
 
-    const height = 250;
-    const width = 1000;
-    const padding = 20;
+    const height = 300;
+    const width = 1400;
+    const padding = 30;
     
     const maxValue = Math.max(...data.map(d => d.value)) * 1.2;
     const points = data.map((d, i) => {