john
111 lines
3.2 KiB
TypeScript
111 lines
3.2 KiB
TypeScript
import { motion } from 'framer-motion';
|
||
import {
|
||
PenSquare,
|
||
Code2,
|
||
BarChart3,
|
||
FileText,
|
||
Bot,
|
||
} from 'lucide-react';
|
||
import { TKMindAvatar } from './TKMindAvatar';
|
||
|
||
const features = [
|
||
{ icon: PenSquare, text: '写作创作' },
|
||
{ icon: Code2, text: '编程开发' },
|
||
{ icon: BarChart3, text: '数据分析' },
|
||
{ icon: FileText, text: '文档总结' },
|
||
{ icon: Bot, text: '自动执行' },
|
||
];
|
||
|
||
export function ChatWelcomePanel({ compact }: { compact?: boolean }) {
|
||
if (compact) {
|
||
return (
|
||
<div className="empty-state empty-state-compact">
|
||
<TKMindAvatar />
|
||
<h2>TKMind</h2>
|
||
<p>继续和空间里的 Agent 对话</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="welcome-panel">
|
||
<div className="welcome-panel-content">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: -15 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5 }}
|
||
className="welcome-panel-avatar-wrap"
|
||
>
|
||
<TKMindAvatar size="lg" className="welcome-panel-avatar" />
|
||
</motion.div>
|
||
|
||
<motion.h2
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ delay: 0.15 }}
|
||
className="welcome-panel-brand"
|
||
>
|
||
TKMind智趣
|
||
</motion.h2>
|
||
|
||
<motion.h1
|
||
initial={{ opacity: 0, y: 18 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.25 }}
|
||
className="welcome-panel-headline"
|
||
>
|
||
<span className="welcome-panel-headline-base">你的全能</span>
|
||
<span className="welcome-panel-headline-gradient">AI 助手</span>
|
||
</motion.h1>
|
||
|
||
<motion.p
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ delay: 0.4 }}
|
||
className="welcome-panel-subtitle"
|
||
>
|
||
想到什么，就发什么。
|
||
</motion.p>
|
||
|
||
<motion.p
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ delay: 0.55 }}
|
||
className="welcome-panel-description"
|
||
>
|
||
写作创作、编程开发、数据分析、文档总结、自动执行任务，统统交给 TKMind 智趣。
|
||
</motion.p>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ delay: 0.7 }}
|
||
className="welcome-panel-actions"
|
||
>
|
||
{features.map((item) => {
|
||
const Icon = item.icon;
|
||
return (
|
||
<div key={item.text} className="welcome-panel-pill">
|
||
<span className="welcome-panel-pill-icon" aria-hidden="true">
|
||
<Icon size={22} strokeWidth={2} />
|
||
</span>
|
||
<span>{item.text}</span>
|
||
</div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ delay: 0.95 }}
|
||
className="welcome-panel-hint"
|
||
>
|
||
<div className="welcome-panel-hint-arrow">↓</div>
|
||
<div className="text-base">在下方输入你的问题或任务</div>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|