@gientech/modual 2.0.9 → 2.0.10

package//346/215/242/350/241/214/346/240/274/345/274/217/344/277/235/346/214/201/344/274/230/345/214/226/346/226/271/346/241/210.md

@@ -1,359 +0,0 @@
-# 用户输入换行格式保持优化方案
-
-## 问题描述
-
-用户输入包含换行格式的内容时，提交后显示变成了一行，中间有一些空格，换行格式丢失。
-
-## 问题分析
-
-### 完整数据流追踪
-
-#### 1. 输入阶段 (`apps/AIChat/src/components/Sender/index.tsx`)
-- **第225-228行**：`handleInput` 直接使用 `e.target.value`，通过 `eventsEmit('sender:change', e.target.value)` 传递
-- **第231-237行**：`handlePaste` 处理粘贴事件，确保粘贴内容中的换行符被正确保留
-- **第232-256行**：`handleKeyDown` 处理换行逻辑，支持 Shift+Enter 和 Ctrl/Cmd+Enter
-- **第254行**：发送时触发 `eventsEmit('sender:send')`，**未传递内容参数**
-- **第520-525行**：textarea 添加 `whiteSpace: 'pre-wrap'` 样式，确保 textarea 本身也保留换行格式
-- **状态**：✅ 输入阶段保持原始格式，无 trim 操作
-- **支持场景**：
-  - ✅ 手动输入换行（Shift+Enter 或 Ctrl/Cmd+Enter）
-  - ✅ 从外部复制粘贴包含换行的内容
-
-#### 2. 状态同步阶段 (`apps/AIChat/src/core/AiChat.tsx`)
-- **第172-175行**：`sender:change` 事件直接设置 `setInputValue(payload)`，无 trim
-- **第220行**：`sender:send` 事件中，使用 `content: inputValue` 直接传递
-- **状态**：✅ 状态同步阶段保持原始格式，无 trim 操作
-
-#### 3. 业务层处理 (`gientech/src/modules/chat/index.tsx`)
-- **第968行**：`addEmptyMessage` 使用 `content: data.content || data.text || ''`
-- **第1132行、1192行**：`api_startChat_re` 调用时使用 `content: data.content || data.text || ''`
-- **状态**：✅ 业务层直接传递，无 trim 操作
-
-#### 4. API 调用阶段 (`gientech/src/utils/gientechCommon/hooks/AichatUseController.tsx`)
-- **第180行**：使用 `JSON.stringify(params)` 序列化请求体
-- **JSON.stringify 行为**：✅ 会保留换行符 `\n`（作为转义字符 `\\n` 或直接保留）
-- **状态**：✅ API 调用阶段理论上应保留格式
-
-#### 5. 渲染阶段 (`apps/Rtext/src/adopters/ChatMessageAdapter.tsx`)
-- **第1132-1145行**：`processedContent` 简单转换为字符串
-- **第2804行**：渲染为 `<div>{processedContent}</div>`
-- **问题所在**：`.message-text` 样式缺少 `white-space: pre-wrap`，导致浏览器默认行为忽略换行符
-
-### 根本原因
-
-**双重问题**：
-1. **渲染层问题**：`.message-text` 没有设置 `white-space: pre-wrap`，浏览器默认的 `white-space: normal` 会将：
-   - 多个连续空格合并为一个
-   - 换行符（`\n`）转换为空格
-   - 导致用户输入的换行格式丢失
-
-2. **数据流保障**：虽然当前代码没有显式的 trim 操作，但需要确保整个数据流中内容不被意外处理
-
-## 解决方案
-
-### 方案一：CSS 样式修复 + 数据流保障（推荐）
-
-**优点**：
-- 修改最小，影响范围可控
-- 不改变数据流和业务逻辑
-- 性能最优
-- 双重保障，确保格式完整保留
-
-**修改位置**：
-1. `apps/Rtext/src/adopters/ChatMessageAdapter.tsx` - 渲染样式修复
-2. `gientech/src/modules/chat/index.tsx` - 数据流保障（可选，防御性代码）
-
-**具体修改**：
-
-#### 1. 渲染层样式修复
-
-在 `.message-text` 样式中添加 `white-space: pre-wrap`，保留换行和空格，同时允许自动换行。
-
-```typescript
-.message-text {
-  width: 100%;
-  line-height: 1.6;
-  white-space: pre-wrap; /* 保留换行和空格格式 */
-  border-radius: 0.5rem;
-  min-height: ${props => props.$isUser ? 'auto' : '40px'};
-  font-size: 0.875rem;
-}
-```
-
-#### 2. 数据流保障（防御性代码）
-
-在 `sendMessageWithSessionId` 函数中，确保内容不被意外处理：
-
-```typescript
-function sendMessageWithSessionId(
-  sessionId: string,
-  data: any,
-  clearFn: () => void,
-  configIdOverride?: string
-) {
-  // ... 现有代码 ...
-  
-  // 确保内容保持原始格式，不进行任何 trim 或替换
-  const rawContent = data.content || data.text || '';
-  // 明确保留换行符和空格，不进行任何处理
-  const preservedContent = typeof rawContent === 'string' ? rawContent : String(rawContent);
-  
-  addEmptyMessage({
-    content: preservedContent, // 使用保留格式的内容
-    queryId,
-    currentFiles: localCurrentFiles,
-    filePaths: localCurrentFiles ? JSON.stringify(localCurrentFiles) : undefined,
-  });
-  
-  // ... 后续代码中，使用 preservedContent 替代 data.content || data.text || ''
-  api_startChat_re({
-    configId: configIdToUse,
-    content: preservedContent, // 使用保留格式的内容
-    // ... 其他参数
-  });
-}
-```
-
-### 方案二：内容预处理（备选）
-
-如果方案一无法完全解决问题，可以考虑在渲染前将换行符转换为 `<br>` 标签。
-
-**修改位置**：
-- `apps/Rtext/src/adopters/ChatMessageAdapter.tsx` 的 `processedContent` 处理逻辑
-
-**具体修改**：
-```typescript
-const processedContent = useMemo(() => {
-  if (typeof content === 'string') {
-    // 如果是用户消息且为 plainText，保留换行格式
-    if (isUser && contentType === 'plainText') {
-      return content.split('\n').map((line, idx, arr) => (
-        <React.Fragment key={idx}>
-          {line}
-          {idx < arr.length - 1 && <br />}
-        </React.Fragment>
-      ));
-    }
-    return content;
-  }
-  // ... 其他处理逻辑
-}, [content, defaultAnswer, isUser, contentType]);
-```
-
-**注意**：此方案需要修改渲染部分，将 `<div>{processedContent}</div>` 改为直接渲染 `processedContent`。
-
-## 推荐实施方案
-
-**采用方案一**，原因：
-1. 最简单直接
-2. 符合 HTML/CSS 标准做法
-3. 不影响现有逻辑
-4. 性能最优
-
-## 涉及修改的组件和功能
-
-### 1. 核心修改
-
-#### `apps/Rtext/src/adopters/ChatMessageAdapter.tsx`
-- **位置**：第 309-316 行，`.message-text` 样式定义
-- **修改内容**：添加 `white-space: pre-wrap;`
-- **影响范围**：所有使用 `ChatMessageAdapter` 渲染的用户消息
-- **风险等级**：低（仅影响样式，不改变数据流）
-
-### 2. 验证点
-
-#### `apps/AIChat/src/components/Sender/index.tsx`
-- **验证**：确认发送时 `localValue` 未被 trim
-- **当前状态**：✅ 已确认无 trim 操作（第 254 行直接发送 `localValue`）
-
-#### `apps/AIChat/src/core/AiChat.tsx`
-- **验证**：确认 `inputValue` 传递时未被处理
-- **当前状态**：✅ 已确认直接传递 `inputValue`（第 220 行）
-
-#### `gientech/src/modules/chat/index.tsx`
-- **验证**：确认 `handleSenderSend` 中 `data.content` 未被处理
-- **当前状态**：✅ 已确认直接使用 `data.content || data.text || ''`（第 968 行）
-
-## 实施步骤
-
-### 步骤一：修复输入层样式（必须）
-
-**文件**：`apps/AIChat/src/components/Sender/index.tsx`
-
-1. 添加粘贴事件处理：
-```typescript
-// 处理粘贴事件，确保粘贴内容中的换行符被正确保留
-const handlePaste = (e: React.ClipboardEvent<HTMLTextAreaElement>) => {
-  // 让浏览器默认处理粘贴，textarea 会自动保留换行符
-  // 这里不需要阻止默认行为，只需要确保粘贴后触发高度调整
-  setTimeout(() => {
-    adjustTextareaHeight();
-  }, 0);
-};
-```
-
-2. 在 textarea 上添加样式和事件：
-```typescript
-<textarea
-  ref={textareaRef}
-  value={localValue}
-  onChange={handleInput}
-  onPaste={handlePaste}  // 新增
-  onKeyDown={handleKeyDown}
-  onFocus={handleFocus}
-  style={{
-    backgroundColor: 'transparent',
-    color: textColor,
-    whiteSpace: 'pre-wrap', // 新增：确保 textarea 本身也保留换行格式
-  }}
-/>
-```
-
-### 步骤二：修复渲染层样式（必须）
-
-**文件**：`apps/Rtext/src/adopters/ChatMessageAdapter.tsx`
-
-```typescript
-.message-text {
-  width: 100%;
-  line-height: 1.6;
-  white-space: pre-wrap; /* 保留换行和空格格式 */
-  border-radius: 0.5rem;
-  min-height: ${props => props.$isUser ? 'auto' : '40px'};
-  font-size: 0.875rem;
-}
-```
-
-### 步骤三：添加数据流保障（推荐，防御性代码）
-
-**文件**：`gientech/src/modules/chat/index.tsx`
-
-在 `sendMessageWithSessionId` 函数中，明确保留内容格式：
-
-```typescript
-function sendMessageWithSessionId(
-  sessionId: string,
-  data: any,
-  clearFn: () => void,
-  configIdOverride?: string
-) {
-  const queryId = 'query-' + uid(32);
-  const conv = conversationList.find(c => c.sessionId === sessionId);
-  const configIdToUse = configIdOverride || conv?.configId || currentChatData.configId;
-  const label = data && data.content ? data.content.slice(0, 20) : '未命名会话';
-  
-  // === 新增：明确保留内容格式，不进行任何处理 ===
-  const rawContent = data.content || data.text || '';
-  const preservedContent = typeof rawContent === 'string' ? rawContent : String(rawContent);
-  
-  // ... 文件处理逻辑 ...
-  
-  addEmptyMessage({
-    content: preservedContent, // 使用保留格式的内容
-    queryId,
-    currentFiles: localCurrentFiles,
-    filePaths: localCurrentFiles ? JSON.stringify(localCurrentFiles) : undefined,
-  });
-  
-  // ... 后续所有使用 content 的地方，都使用 preservedContent
-  api_startChat_re({
-    configId: configIdToUse,
-    content: preservedContent, // 确保格式完整传递到后端
-    fileUids: serverUids, // 或 []
-    lastDate: now,
-    name: label,
-    queryId: queryId,
-    sessionId: String(sessionId || ''),
-    type: 'text',
-    audioUrl: '',
-    enableThinking: !!senderSwitchValues.reasoning,
-    enableWebsearch: !!senderSwitchValues.netSearch,
-    qaChannel: senderSwitchValues.qaChannel,
-  } as any, ...);
-}
-```
-
-### 步骤四：测试验证
-
-1. **前端显示测试**
-   - 测试用户手动输入多行文本（Shift+Enter 换行）
-   - 测试用户从外部复制粘贴包含换行的内容（如从 Word、记事本、网页等）
-   - 测试用户输入包含多个空格的内容
-   - 测试用户输入包含制表符的内容
-   - 验证发送后显示格式与输入一致
-
-2. **后端数据测试**
-   - 使用浏览器开发者工具检查 Network 请求
-   - 验证请求体中的 `content` 字段是否包含换行符 `\n`
-   - 验证后端接收到的数据格式是否正确
-
-3. **兼容性检查**
-   - 检查是否影响 AI 消息的显示（AI 消息使用 `contentType="stream"`，不受影响）
-   - 检查是否影响其他使用 `ChatMessageAdapter` 的场景
-
-## 预期效果
-
-### 前端显示
-- ✅ 用户输入的换行格式完整保留
-- ✅ 用户输入的多个空格完整保留
-- ✅ 不影响现有功能
-- ✅ 不影响 AI 消息的渲染
-
-### 后端数据
-- ✅ 提交给后端的数据包含完整的换行符 `\n`
-- ✅ JSON 序列化后换行符正确保留（`\n` 在 JSON 中是有效字符）
-- ✅ 后端接收到的 `content` 字段格式与用户输入一致
-
-## 注意事项
-
-1. **`white-space: pre-wrap` 特性**：
-   - 保留换行符和空格
-   - 允许文本自动换行（与 `pre` 的区别）
-   - 适合聊天场景
-
-2. **如果遇到问题**：
-   - 如果 `pre-wrap` 导致某些场景显示异常，可以考虑使用 `pre-line`（只保留换行，合并空格）
-   - 或者针对用户消息单独设置样式
-
-3. **向后兼容**：
-   - 此修改不影响现有数据
-   - 只影响新消息的显示方式
-   - 历史消息也会受益于此修改
-
-## 相关文件清单
-
-### 需要修改的文件
-- ✅ `apps/AIChat/src/components/Sender/index.tsx` - **已修改**：添加 `handlePaste` 和 `whiteSpace: 'pre-wrap'`
-- ✅ `apps/Rtext/src/adopters/ChatMessageAdapter.tsx` - **已修改**：添加 `white-space: pre-wrap !important`
-- ✅ `gientech/src/modules/chat/index.tsx` - **已修改**：添加数据流保障代码
-
-### 已验证无需修改的文件
-- ✅ `apps/AIChat/src/components/Sender/index.tsx` - 已验证无 trim 操作
-- ✅ `apps/AIChat/src/core/AiChat.tsx` - 已验证直接传递 `inputValue`
-- ✅ `gientech/src/utils/gientechCommon/hooks/AichatUseController.tsx` - 已验证使用 `JSON.stringify`，理论上保留格式
-
-## 数据流保障说明
-
-### JSON.stringify 对换行符的处理
-
-`JSON.stringify` 在序列化字符串时：
-- 换行符 `\n` 会被保留为 `\n`（在 JSON 字符串中）
-- 多个空格会被保留
-- 制表符 `\t` 会被保留为 `\t`
-
-**示例**：
-```javascript
-const content = "第一行\n第二行\n  多个空格";
-JSON.stringify({ content });
-// 结果: '{"content":"第一行\\n第二行\\n  多个空格"}'
-// 注意：JSON 字符串中的 \n 会被转义为 \\n，但后端解析后会恢复为 \n
-```
-
-### 防御性代码的作用
-
-虽然当前代码没有显式的 trim 操作，但添加防御性代码可以：
-1. **明确意图**：代码明确表达"保留原始格式"的意图
-2. **防止未来误改**：如果未来有人修改代码，看到明确的注释和变量名，会意识到需要保留格式
-3. **便于调试**：如果出现问题，可以快速定位到 `preservedContent` 变量
-4. **类型安全**：确保内容始终是字符串类型
-