沃巴蒂
ff22ed3a8b
本次同步 09-12 至 09-28 的代码变更，主要内容： 新增功能 - 修改密码：后端新增 ChangePasswordRequest DTO 与UserController/UserService 对应接口，前端新增 ChangePasswordDialog 并在 Header 接入入口 - 文件预览组件重构：file-preview 目录拆分出 VideoPreview（支持 blobUrl 直传）、 ImagePreview、AudioPreview，index.tsx 统一调度各类型预览器 - 新增 my_ops 算子模块：markitdown_parser、mineru_pdf_parser、text_quality_evaluator - 新增 tools/minio-file-server MinIO 文件服务 功能增强 - 数据清洗：cleaning_task_service/scheduler/routes 重构， data_juicer_executor 与 wrapper 增强，OperatorTable/LogsTable/TaskDetail 同步调整 - 数据标注：annotation sync.py、project.py 接口与schema 更新 - 数据采集、算子市场、首页与菜单路由相关页面调整 - DataJuicer 算子接入（useOperatorOperations、dj_ops_schema） 结构调整 - deepflow/ 更名为 deep-flow/（419 个文件重命名） - 新增 helm 部署编排、GitHub Actions 之外的自建镜像构建脚本 未纳入本次提交 - scripts-backup/、runtime/python-executor-backup/、components_backup/（备份目录） - *.backup*、__pycache__ 产物 - zh_core_web_sm-3.8.0-py3-none-any.whl（46MB 构建产物） - DataX/（内嵌独立仓库，远程亦未收录其源码）
131 lines
3.8 KiB
Markdown
131 lines
3.8 KiB
Markdown
# 深度思考块功能实现总结
|
|
|
|
## 🎯 实现的功能
|
|
|
|
### 核心特性
|
|
1. **智能展示逻辑**: 深度思考过程初始展开，计划内容开始时自动折叠
|
|
2. **分阶段显示**: 思考阶段只显示思考块，思考结束后才显示计划卡片
|
|
3. **动态主题**: 思考阶段使用蓝色主题，完成后切换为默认主题
|
|
4. **流式支持**: 实时展示推理内容的流式传输
|
|
5. **优雅交互**: 平滑的动画效果和状态切换
|
|
|
|
### 交互流程
|
|
```
|
|
用户发送问题 (启用深度思考)
|
|
↓
|
|
开始接收 reasoning_content
|
|
↓
|
|
思考块自动展开 + primary 主题 + 加载动画
|
|
↓
|
|
推理内容流式更新
|
|
↓
|
|
开始接收 content (计划内容)
|
|
↓
|
|
思考块自动折叠 + 主题切换
|
|
↓
|
|
计划卡片优雅出现 (动画效果)
|
|
↓
|
|
计划内容保持流式更新 (标题→思路→步骤)
|
|
↓
|
|
完成 (用户可手动展开思考块)
|
|
```
|
|
|
|
## 🔧 技术实现
|
|
|
|
### 数据结构扩展
|
|
- `Message` 接口添加 `reasoningContent` 和 `reasoningContentChunks` 字段
|
|
- `MessageChunkEvent` 接口添加 `reasoning_content` 字段
|
|
- 消息合并逻辑支持推理内容的流式处理
|
|
|
|
### 组件架构
|
|
- `ThoughtBlock`: 可折叠的思考块组件
|
|
- `PlanCard`: 更新后的计划卡片，集成思考块
|
|
- 智能状态管理和条件渲染
|
|
|
|
### 状态管理
|
|
```typescript
|
|
// 关键状态逻辑
|
|
const hasMainContent = message.content && message.content.trim() !== "";
|
|
const isThinking = reasoningContent && !hasMainContent;
|
|
const shouldShowPlan = hasMainContent; // 有内容就显示，保持流式效果
|
|
```
|
|
|
|
### 自动折叠逻辑
|
|
```typescript
|
|
React.useEffect(() => {
|
|
if (hasMainContent && !hasAutoCollapsed) {
|
|
setIsOpen(false);
|
|
setHasAutoCollapsed(true);
|
|
}
|
|
}, [hasMainContent, hasAutoCollapsed]);
|
|
```
|
|
|
|
## 🎨 视觉设计
|
|
|
|
### 统一设计语言
|
|
- **字体系统**: 使用 `font-semibold` 与 CardTitle 保持一致
|
|
- **圆角规范**: 采用 `rounded-xl` 与其他卡片组件统一
|
|
- **间距标准**: 使用 `px-6 py-4` 内边距，`mb-6` 外边距
|
|
- **图标尺寸**: 18px 大脑图标，与文字比例协调
|
|
|
|
### 思考阶段样式
|
|
- Primary 主题色边框和背景
|
|
- Primary 色图标和文字
|
|
- 标准边框样式
|
|
- 加载动画
|
|
|
|
### 完成阶段样式
|
|
- 默认 border 和 card 背景
|
|
- muted-foreground 图标
|
|
- 80% 透明度文字
|
|
- 静态图标
|
|
|
|
### 动画效果
|
|
- 展开/折叠动画
|
|
- 主题切换过渡
|
|
- 颜色变化动画
|
|
|
|
## 📁 文件更改
|
|
|
|
### 核心文件
|
|
1. `web/src/core/messages/types.ts` - 消息类型扩展
|
|
2. `web/src/core/api/types.ts` - API 事件类型扩展
|
|
3. `web/src/core/messages/merge-message.ts` - 消息合并逻辑
|
|
4. `web/src/core/store/store.ts` - 状态管理更新
|
|
5. `web/src/app/chat/components/message-list-view.tsx` - 主要组件实现
|
|
|
|
### 测试和文档
|
|
1. `web/public/mock/reasoning-example.txt` - 测试数据
|
|
2. `web/docs/thought-block-feature.md` - 功能文档
|
|
3. `web/docs/testing-thought-block.md` - 测试指南
|
|
4. `web/docs/interaction-flow-test.md` - 交互流程测试
|
|
|
|
## 🧪 测试方法
|
|
|
|
### 快速测试
|
|
```
|
|
访问: http://localhost:3000?mock=reasoning-example
|
|
发送任意消息，观察交互流程
|
|
```
|
|
|
|
### 完整测试
|
|
1. 启用深度思考模式
|
|
2. 配置 reasoning 模型
|
|
3. 发送复杂问题
|
|
4. 验证完整交互流程
|
|
|
|
## 🔄 兼容性
|
|
|
|
- ✅ 向后兼容：无推理内容时正常显示
|
|
- ✅ 渐进增强：功能仅在有推理内容时激活
|
|
- ✅ 优雅降级：推理内容为空时不显示思考块
|
|
|
|
## 🚀 使用建议
|
|
|
|
1. **启用深度思考**: 点击"Deep Thinking"按钮
|
|
2. **观察流程**: 注意思考块的自动展开和折叠
|
|
3. **手动控制**: 可随时点击思考块标题栏控制展开/折叠
|
|
4. **查看推理**: 展开思考块查看完整的推理过程
|
|
|
|
这个实现完全满足了用户的需求，提供了直观、流畅的深度思考过程展示体验。
|