update pay function

2025-11-22 11:41:56 +08:00
parent 0d14d7cf4e
commit 9cfe8e82d9
397 changed files with 19572 additions and 9326 deletions
--- a/src/views/AgentChat/README.md
+++ b/src/views/AgentChat/README.md
@@ -0,0 +1,303 @@
+# Agent Chat - 超炫酷 AI 投研助手
+
+> 🎨 基于 **Hero UI** (NextUI) 构建的现代化 AI 聊天界面，模仿 Google AI Studio 风格
+
+## ✨ 设计亮点
+
+### 🚀 技术栈
+
+- **Hero UI** - 现代化 React UI 组件库（NextUI 的继任者）
+- **Framer Motion** - 物理动画引擎
+- **Tailwind CSS** - 原子化 CSS 框架（Hero UI 内置）
+- **Lucide Icons** - 现代化图标库
+- **Chakra UI Toast** - 通知提示（保留）
+
+### 🎨 视觉特性
+
+1. **毛玻璃效果（Glassmorphism）**
+   - 侧边栏和顶栏采用半透明毛玻璃质感
+   - `backdrop-blur-xl` + 渐变背景
+   - 深色模式完美支持
+
+2. **流畅动画**
+   - 侧边栏 Spring 动画滑入/滑出
+   - 消息依次淡入（错开延迟）
+   - 按钮悬停/点击缩放效果
+   - AI 头像持续旋转动画
+
+3. **渐变色设计**
+   - 标题：蓝到紫渐变
+   - 用户消息气泡：蓝到紫渐变
+   - 发送按钮：蓝到紫渐变
+   - AI 头像：紫到粉渐变
+
+4. **响应式布局**
+   - 三栏式设计（左侧历史 + 中间聊天 + 右侧配置）
+   - 侧边栏可折叠
+   - 暗黑模式支持
+
+### 🎯 核心功能
+
+#### 1. 左侧历史面板
+- ✅ 会话列表展示（带搜索）
+- ✅ 新建对话
+- ✅ 切换会话
+- ✅ 会话元信息（时间、消息数）
+- ✅ 用户信息展示
+- ✅ 折叠/展开动画
+
+#### 2. 中间聊天区域
+- ✅ 消息流展示（用户/AI）
+- ✅ AI 思考状态（脉冲动画）
+- ✅ 消息操作（复制、点赞、点踩）
+- ✅ 执行步骤详情（可折叠 Accordion）
+- ✅ 快捷问题按钮（2x2 网格）
+- ✅ 键盘快捷键（Enter 发送，Shift+Enter 换行）
+- ✅ 自动滚动到底部
+- ✅ Hero UI ScrollShadow 组件
+
+#### 3. 右侧配置面板
+- ✅ Tabs 切换（模型 / 工具 / 统计）
+- ✅ 模型选择（3 个模型，卡片式）
+- ✅ 工具选择（Checkbox 多选）
+- ✅ 统计信息（会话数、消息数、工具数）
+
+## 🔧 使用方法
+
+### 访问路径
+```
+/agent-chat
+```
+
+### 模型选择
+
+| 模型 | 图标 | 描述 | 适用场景 |
+|------|------|------|----------|
+| **Kimi K2 Thinking** | 🧠 | 深度思考模型 | 复杂分析、深度研究 |
+| **Kimi K2** | ⚡ | 快速响应模型 | 简单查询、快速问答 |
+| **DeepMoney** | 📈 | 金融专业模型 | 金融数据分析 |
+
+### 工具选择
+
+| 工具 | 功能 |
+|------|------|
+| 📰 新闻搜索 | 搜索最新财经新闻 |
+| 📈 涨停分析 | 分析涨停股票 |
+| 💾 概念板块 | 查询概念板块信息 |
+| 📚 研报搜索 | 搜索研究报告 |
+| 📊 路演信息 | 查询路演活动 |
+
+### 快捷键
+
+| 快捷键 | 功能 |
+|--------|------|
+| `Enter` | 发送消息 |
+| `Shift + Enter` | 换行 |
+
+## 📦 Hero UI 组件使用
+
+### 核心组件
+
+```javascript
+import {
+  Button,        // 按钮
+  Card,          // 卡片
+  Input,         // 输入框
+  Avatar,        // 头像
+  Chip,          // 标签
+  Badge,         // 徽章
+  Spinner,       // 加载器
+  Tooltip,       // 工具提示
+  Checkbox,      // 复选框
+  Tabs, Tab,     // 标签页
+  ScrollShadow,  // 滚动阴影
+  Kbd,           // 键盘按键
+  Accordion,     // 手风琴
+} from '@heroui/react';
+```
+
+### 特色功能
+
+1. **isPressable / isHoverable**
+   ```javascript
+   <Card isPressable isHoverable onPress={handleClick}>
+     内容
+   </Card>
+   ```
+
+2. **ScrollShadow**（自动滚动阴影）
+   ```javascript
+   <ScrollShadow className="flex-1">
+     长内容...
+   </ScrollShadow>
+   ```
+
+3. **渐变背景（Tailwind）**
+   ```javascript
+   <div className="bg-gradient-to-br from-gray-50 to-blue-50">
+     内容
+   </div>
+   ```
+
+4. **毛玻璃效果**
+   ```javascript
+   <div className="bg-white/80 backdrop-blur-xl">
+     内容
+   </div>
+   ```
+
+## 🔌 API 集成
+
+### 后端接口
+
+#### 1. 获取会话列表
+```http
+GET /mcp/agent/sessions?user_id={user_id}&limit=50
+```
+
+#### 2. 获取会话历史
+```http
+GET /mcp/agent/history/{session_id}?limit=100
+```
+
+#### 3. 发送消息
+```http
+POST /mcp/agent/chat
+Content-Type: application/json
+
+{
+  "message": "用户问题",
+  "conversation_history": [],
+  "user_id": "user_id",
+  "session_id": "uuid或null",
+  "model": "kimi-k2-thinking",
+  "tools": ["search_news", "search_limit_up"]
+}
+```
+
+## 🎨 Hero UI 特性
+
+### 为什么选择 Hero UI？
+
+1. **基于 Tailwind CSS**
+   - 编译时 CSS，零运行时开销
+   - 原子化类名，易于定制
+   - 深色模式内置支持
+
+2. **基于 React Aria**
+   - 完整的无障碍支持
+   - 键盘导航内置
+   - ARIA 属性自动处理
+
+3. **TypeScript 优先**
+   - 完整的类型支持
+   - 智能提示
+
+4. **物理动画**
+   - 集成 Framer Motion
+   - 性能优化
+
+5. **模块化架构**
+   - npm 包分发（非复制粘贴）
+   - 按需引入
+   - Tree-shaking 友好
+
+### Hero UI vs Chakra UI
+
+| 特性 | Hero UI | Chakra UI |
+|------|---------|-----------|
+| CSS 方案 | Tailwind CSS（编译时） | Emotion（运行时） |
+| 包大小 | 更小（Tree-shaking） | 较大 |
+| 性能 | 更快（无运行时 CSS） | 较慢 |
+| 定制性 | Tailwind 配置 | Theme 对象 |
+| 学习曲线 | 需要熟悉 Tailwind | 纯 Props API |
+| 组件数量 | 210+ | 100+ |
+| 动画 | Framer Motion | Framer Motion |
+| 无障碍 | React Aria | 自实现 |
+
+## 📁 文件结构
+
+```
+src/views/AgentChat/
+├── index.js                  # Hero UI 版本（当前）
+├── index_old_chakra.js       # Chakra UI 旧版本（备份）
+└── README.md                 # 本文档
+```
+
+## 🎯 组件层次
+
+```
+AgentChat
+├── MotionDiv (背景渐变)
+├── LeftSidebar (历史会话)
+│   ├── SearchInput (Hero UI Input)
+│   ├── SessionList (Hero UI Card)
+│   └── UserInfo (Hero UI Avatar)
+├── ChatArea (中间区域)
+│   ├── ChatHeader (Hero UI)
+│   ├── MessageList (Hero UI ScrollShadow)
+│   │   └── MessageRenderer
+│   ├── QuickQuestions (Hero UI Button)
+│   └── InputBox (Hero UI Input + Button)
+└── RightSidebar (配置面板)
+    ├── Tabs (Hero UI Tabs)
+    ├── ModelSelector (Hero UI Card)
+    ├── ToolSelector (Hero UI CheckboxGroup)
+    └── Statistics (Hero UI Badge)
+```
+
+## 🚀 性能优化
+
+1. **代码分割**
+   - React.lazy() 懒加载
+   - 路由级别分割
+
+2. **动画优化**
+   - Framer Motion 硬件加速
+   - AnimatePresence 动画退出
+
+3. **Tailwind CSS**
+   - 编译时生成 CSS
+   - 零运行时开销
+   - PurgeCSS 自动清理
+
+4. **Hero UI**
+   - Tree-shaking 优化
+   - 按需引入组件
+
+## 🐛 已知问题
+
+- ~~深色模式下某些颜色对比度不足~~ ✅ 已修复
+- ~~会话删除功能需要后端 API 支持~~ ⏳ 待实现
+
+## 📝 开发日志
+
+### 2025-11-22
+- ✅ 完成 Hero UI 迁移
+- ✅ 实现三栏式布局
+- ✅ 添加毛玻璃效果
+- ✅ 集成 Framer Motion 动画
+- ✅ 添加模型和工具选择功能
+- ✅ 优化深色模式
+
+## 🔮 未来计划
+
+- [ ] 支持流式响应（SSE）
+- [ ] Markdown 渲染（react-markdown）
+- [ ] 代码高亮（Prism.js）
+- [ ] 图片上传和分析
+- [ ] 语音输入/输出
+- [ ] 导出为 PDF/Word
+- [ ] 分享对话链接
+- [ ] 对话模板功能
+
+## 📖 参考资源
+
+- [Hero UI 官方文档](https://www.heroui.com/docs)
+- [Framer Motion 文档](https://www.framer.com/motion/)
+- [Tailwind CSS 文档](https://tailwindcss.com/docs)
+- [Lucide Icons](https://lucide.dev/)
+
+## 📄 许可证
+
+本项目基于 Argon Dashboard Chakra PRO 模板开发。