@gientech/modual 2.0.8 → 2.0.9

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

@@ -0,0 +1,359 @@
+# 用户输入换行格式保持优化方案
+
+## 问题描述
+
+用户输入包含换行格式的内容时，提交后显示变成了一行，中间有一些空格，换行格式丢失。
+
+## 问题分析
+
+### 完整数据流追踪
+
+#### 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. **类型安全**：确保内容始终是字符串类型
+