From 244968a1cb7c14fd9f75ddb0b26bf8cabd81f1fe Mon Sep 17 00:00:00 2001
From: zzlgreat <zzlgreat@gmail.com>
Date: Sat, 22 Nov 2025 12:07:55 +0800
Subject: [PATCH] update pay function

---
 package.json                  |   2 +-
 src/views/AgentChat/README.md |  15 +-
 src/views/AgentChat/index.js  | 281 ++++++++++++++++++++--------------
 3 files changed, 174 insertions(+), 124 deletions(-)

diff --git a/package.json b/package.json
index a789ce15..6930f97a 100755
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
     "echarts": "^5.6.0",
     "echarts-for-react": "^3.0.2",
     "echarts-wordcloud": "^2.1.0",
-    "framer-motion": "^4.1.17",
+    "framer-motion": "^12.23.24",
     "fullcalendar": "^5.9.0",
     "globalize": "^1.7.0",
     "history": "^5.3.0",
diff --git a/src/views/AgentChat/README.md b/src/views/AgentChat/README.md
index 5ce9fa6b..a88c22b9 100644
--- a/src/views/AgentChat/README.md
+++ b/src/views/AgentChat/README.md
@@ -7,10 +7,10 @@
 ### 🚀 技术栈
 
 - **Hero UI** - 现代化 React UI 组件库（NextUI 的继任者）
-- **Framer Motion** - 物理动画引擎
+- **Framer Motion 12** - 物理动画引擎（已升级！）
 - **Tailwind CSS** - 原子化 CSS 框架（Hero UI 内置）
 - **Lucide Icons** - 现代化图标库
-- **Chakra UI Toast** - 通知提示（保留）
+- **Chakra UI Toast** - 通知提示（待迁移到 Hero UI Toast）
 
 ### 🎨 视觉特性
 
@@ -19,11 +19,12 @@
    - `backdrop-blur-xl` + 渐变背景
    - 深色模式完美支持
 
-2. **流畅动画**
-   - 侧边栏 Spring 动画滑入/滑出
-   - 消息依次淡入（错开延迟）
-   - 按钮悬停/点击缩放效果
-   - AI 头像持续旋转动画
+2. **流畅动画（Framer Motion 12 物理引擎）**
+   - ✨ 侧边栏 **Spring 弹性动画**滑入/滑出（stiffness: 300, damping: 30）
+   - ✨ 消息 **淡入上移** + **错开延迟**（staggerChildren: 0.05）
+   - ✨ 按钮 **悬停缩放**（1.05x） + **点击压缩**（0.95x）
+   - ✨ AI 头像 **360度持续旋转**（duration: 3s, linear）
+   - ✨ 快捷问题卡片 **退出动画**（AnimatePresence）
 
 3. **渐变色设计**
    - 标题：蓝到紫渐变
diff --git a/src/views/AgentChat/index.js b/src/views/AgentChat/index.js
index fdd8e52b..c09a2d40 100644
--- a/src/views/AgentChat/index.js
+++ b/src/views/AgentChat/index.js
@@ -1,8 +1,9 @@
 // src/views/AgentChat/index.js
 // 超炫酷的 AI 投研助手 - Hero UI 版本
-// 使用 CSS 动画替代 Framer Motion（避免版本冲突）
+// 使用 Framer Motion 物理动画引擎
 
 import React, { useState, useEffect, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
 import {
   Button,
   Card,
@@ -67,6 +68,78 @@ import {
   Rocket,
 } from 'lucide-react';
 
+/**
+ * Framer Motion 动画变体配置
+ */
+const animations = {
+  // 侧边栏滑入动画（带弹性效果）
+  slideInLeft: {
+    initial: { x: -320, opacity: 0 },
+    animate: {
+      x: 0,
+      opacity: 1,
+      transition: {
+        type: 'spring',
+        stiffness: 300,
+        damping: 30,
+      },
+    },
+    exit: {
+      x: -320,
+      opacity: 0,
+      transition: { duration: 0.2 },
+    },
+  },
+  slideInRight: {
+    initial: { x: 320, opacity: 0 },
+    animate: {
+      x: 0,
+      opacity: 1,
+      transition: {
+        type: 'spring',
+        stiffness: 300,
+        damping: 30,
+      },
+    },
+    exit: {
+      x: 320,
+      opacity: 0,
+      transition: { duration: 0.2 },
+    },
+  },
+  // 消息淡入动画（带上移效果）
+  fadeInUp: {
+    initial: { opacity: 0, y: 20 },
+    animate: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        type: 'spring',
+        stiffness: 400,
+        damping: 25,
+      },
+    },
+  },
+  // 列表项淡入（错开延迟）
+  staggerItem: {
+    initial: { opacity: 0, y: 10 },
+    animate: { opacity: 1, y: 0 },
+  },
+  // 父容器错开动画
+  staggerContainer: {
+    animate: {
+      transition: {
+        staggerChildren: 0.05,
+      },
+    },
+  },
+  // 按钮点击动画
+  pressScale: {
+    whileTap: { scale: 0.95 },
+    whileHover: { scale: 1.05 },
+  },
+};
+
 /**
  * 消息类型
  */
@@ -355,7 +428,13 @@ const AgentChat = () => {
     <div className="flex h-screen bg-gradient-to-br from-gray-50 to-blue-50 dark:from-gray-900 dark:to-gray-800 overflow-hidden">
       {/* 左侧栏 */}
       {isLeftSidebarOpen && (
-        <div className="w-80 flex flex-col bg-white/80 dark:bg-gray-800/80 backdrop-blur-xl border-r border-gray-200 dark:border-gray-700 shadow-xl animate-slide-in-left">
+        <motion.div
+          className="w-80 flex flex-col bg-white/80 dark:bg-gray-800/80 backdrop-blur-xl border-r border-gray-200 dark:border-gray-700 shadow-xl"
+          initial="initial"
+          animate="animate"
+          exit="exit"
+          variants={animations.slideInLeft}
+        >
           <div className="p-4 border-b border-gray-200 dark:border-gray-700">
             <div className="flex items-center justify-between mb-3">
               <div className="flex items-center gap-2">
@@ -457,7 +536,7 @@ const AgentChat = () => {
               </div>
             </div>
           </div>
-        </div>
+        </motion.div>
       )}
 
       {/* 中间主聊天区域 */}
@@ -476,12 +555,17 @@ const AgentChat = () => {
                 </Button>
               )}
 
-              <Avatar
-                icon={<Cpu className="w-6 h-6" />}
-                classNames={{
-                  base: 'bg-gradient-to-br from-purple-500 to-pink-500 animate-spin-slow',
-                }}
-              />
+              <motion.div
+                animate={{ rotate: 360 }}
+                transition={{ duration: 3, repeat: Infinity, ease: 'linear' }}
+              >
+                <Avatar
+                  icon={<Cpu className="w-6 h-6" />}
+                  classNames={{
+                    base: 'bg-gradient-to-br from-purple-500 to-pink-500',
+                  }}
+                />
+              </motion.div>
 
               <div>
                 <h1 className="text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
@@ -524,43 +608,66 @@ const AgentChat = () => {
         </div>
 
         <ScrollShadow className="flex-1 p-6">
-          <div className="max-w-4xl mx-auto space-y-4">
-            {messages.map((message) => (
-              <div key={message.id} className="animate-fade-in">
-                <MessageRenderer message={message} userAvatar={user?.avatar} />
-              </div>
-            ))}
+          <motion.div
+            className="max-w-4xl mx-auto space-y-4"
+            variants={animations.staggerContainer}
+            initial="initial"
+            animate="animate"
+          >
+            <AnimatePresence mode="popLayout">
+              {messages.map((message, index) => (
+                <motion.div
+                  key={message.id}
+                  variants={animations.fadeInUp}
+                  initial="initial"
+                  animate="animate"
+                  exit={{ opacity: 0, y: -20 }}
+                  layout
+                >
+                  <MessageRenderer message={message} userAvatar={user?.avatar} />
+                </motion.div>
+              ))}
+            </AnimatePresence>
             <div ref={messagesEndRef} />
-          </div>
+          </motion.div>
         </ScrollShadow>
 
-        {messages.length <= 2 && !isProcessing && (
-          <div className="px-6 py-3 animate-fade-in">
-            <div className="max-w-4xl mx-auto">
+        <AnimatePresence>
+          {messages.length <= 2 && !isProcessing && (
+            <motion.div
+              className="px-6 py-3"
+              variants={animations.fadeInUp}
+              initial="initial"
+              animate="animate"
+              exit={{ opacity: 0, y: 20 }}
+            >
+              <div className="max-w-4xl mx-auto">
               <p className="text-xs text-gray-500 mb-2 font-medium flex items-center gap-1">
                 <Sparkles className="w-3 h-3" />
                 快速开始
               </p>
               <div className="grid grid-cols-2 gap-2">
                 {quickQuestions.map((question, idx) => (
-                  <Button
-                    key={idx}
-                    variant="bordered"
-                    color="primary"
-                    className="w-full justify-start h-auto py-3 hover:scale-105 transition-transform"
-                    onPress={() => {
-                      setInputValue(question.text);
-                      inputRef.current?.focus();
-                    }}
-                  >
-                    <span className="mr-2">{question.emoji}</span>
-                    {question.text}
-                  </Button>
+                  <motion.div key={idx} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
+                    <Button
+                      variant="bordered"
+                      color="primary"
+                      className="w-full justify-start h-auto py-3"
+                      onPress={() => {
+                        setInputValue(question.text);
+                        inputRef.current?.focus();
+                      }}
+                    >
+                      <span className="mr-2">{question.emoji}</span>
+                      {question.text}
+                    </Button>
+                  </motion.div>
                 ))}
               </div>
             </div>
-          </div>
-        )}
+            </motion.div>
+          )}
+        </AnimatePresence>
 
         <div className="bg-white/70 dark:bg-gray-800/70 backdrop-blur-xl border-t border-gray-200 dark:border-gray-700 px-6 py-4">
           <div className="max-w-4xl mx-auto">
@@ -579,18 +686,20 @@ const AgentChat = () => {
                   inputWrapper: 'border-2 hover:border-primary-500 transition-colors',
                 }}
               />
-              <Button
-                isIconOnly
-                color="primary"
-                variant="shadow"
-                size="lg"
-                onPress={handleSendMessage}
-                isLoading={isProcessing}
-                isDisabled={!inputValue.trim() || isProcessing}
-                className="bg-gradient-to-r from-blue-500 to-purple-500 hover:scale-105 transition-transform"
-              >
-                {!isProcessing && <Send className="w-5 h-5" />}
-              </Button>
+              <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
+                <Button
+                  isIconOnly
+                  color="primary"
+                  variant="shadow"
+                  size="lg"
+                  onPress={handleSendMessage}
+                  isLoading={isProcessing}
+                  isDisabled={!inputValue.trim() || isProcessing}
+                  className="bg-gradient-to-r from-blue-500 to-purple-500"
+                >
+                  {!isProcessing && <Send className="w-5 h-5" />}
+                </Button>
+              </motion.div>
             </div>
 
             <div className="flex items-center gap-4 mt-2 text-xs text-gray-500">
@@ -611,7 +720,13 @@ const AgentChat = () => {
 
       {/* 右侧栏 */}
       {isRightSidebarOpen && (
-        <div className="w-80 flex flex-col bg-white/80 dark:bg-gray-800/80 backdrop-blur-xl border-l border-gray-200 dark:border-gray-700 shadow-xl animate-slide-in-right">
+        <motion.div
+          className="w-80 flex flex-col bg-white/80 dark:bg-gray-800/80 backdrop-blur-xl border-l border-gray-200 dark:border-gray-700 shadow-xl"
+          initial="initial"
+          animate="animate"
+          exit="exit"
+          variants={animations.slideInRight}
+        >
           <div className="p-4 border-b border-gray-200 dark:border-gray-700">
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
@@ -709,80 +824,14 @@ const AgentChat = () => {
               </Tab>
             </Tabs>
           </ScrollShadow>
-        </div>
+        </motion.div>
       )}
-
-      <style>{`
-        @keyframes fade-in {
-          from {
-            opacity: 0;
-            transform: translateY(10px);
-          }
-          to {
-            opacity: 1;
-            transform: translateY(0);
-          }
-        }
-
-        @keyframes slide-in-left {
-          from {
-            transform: translateX(-100%);
-            opacity: 0;
-          }
-          to {
-            transform: translateX(0);
-            opacity: 1;
-          }
-        }
-
-        @keyframes slide-in-right {
-          from {
-            transform: translateX(100%);
-            opacity: 0;
-          }
-          to {
-            transform: translateX(0);
-            opacity: 1;
-          }
-        }
-
-        @keyframes spin-slow {
-          from {
-            transform: rotate(0deg);
-          }
-          to {
-            transform: rotate(360deg);
-          }
-        }
-
-        .animate-fade-in {
-          animation: fade-in 0.3s ease-out;
-        }
-
-        .animate-slide-in-left {
-          animation: slide-in-left 0.3s ease-out;
-        }
-
-        .animate-slide-in-right {
-          animation: slide-in-right 0.3s ease-out;
-        }
-
-        .animate-spin-slow {
-          animation: spin-slow 3s linear infinite;
-        }
-
-        .hover\\:scale-102:hover {
-          transform: scale(1.02);
-        }
-
-        .hover\\:scale-105:hover {
-          transform: scale(1.05);
-        }
-      `}</style>
     </div>
   );
 };
 
+export default AgentChat;
+
 /**
  * 消息渲染器
  */