feat: release chat and mindspace UI updates

2026-06-27 21:57:21 +08:00
parent c924b2bb77
commit 8264e71f9e
24 changed files with 2042 additions and 209 deletions
@@ -0,0 +1,110 @@
+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>
+  );
+}