fix(editor): Checkbox点击失效 + AI全局上下文注入
- 将'允许修改正文'复选框从id/htmlFor绑定改为label直接包裹input,增加e.stopPropagation防止事件冒泡被拦截 - handleAIGenerate中新增editorRef.current.innerText作为全局上下文注入prompt - currentHtml增加过滤​零宽字符 - 优化systemPrompt,明确告知大模型全局参考内容+目标区域源码的双信息源结构
This commit is contained in:
25
工程分析/经验记录.md
25
工程分析/经验记录.md
@@ -625,3 +625,28 @@ ReportEditor 采用 `useRef` 作为自动保存的数据快照机制(避免 Re
|
||||
**D. 后续如何避免问题**
|
||||
- 新增任何 `useState` 时,除了问自己「是否已加入 stateRef / saveDraftToStorage / state→ref effect」,还必须**逐个审查所有 draft 恢复分支**,确认恢复逻辑完整。
|
||||
- 调用多模型兼容的 OpenAI 格式 API 时,必须根据「是否有图片附件」动态决定 `content` 的类型(`string` vs `array`),不能无条件发送数组。
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 记录 29:Checkbox 在复杂 React 组件树中点击失效 + AI 上下文缺失
|
||||
|
||||
**A. 具体问题**
|
||||
1. AI 面板底部的「允许修改正文」复选框无法点击切换。
|
||||
2. AI 无法回答编辑器中已有的报告内容(如「气腹压力是多少」),表现得像「瞎子」。
|
||||
|
||||
**B. 产生问题原因**
|
||||
1. **Checkbox 失效**:使用了独立的 `<input id="x">` + `<label htmlFor="x">` 组合。在复杂的 contentEditable 编辑器 + React 重渲染环境中,`id`/`htmlFor` 的绑定可能因事件冒泡、DOM 结构覆盖或 React 的 reconciliation 导致点击事件无法正确路由到 input。
|
||||
2. **AI 上下文缺失**:`handleAIGenerate` 只向大模型发送了「目标 AI 区域的 HTML 源码」。当该区域为空或信息在其他区域时,大模型收到的上下文只有用户指令,自然无法回答。
|
||||
|
||||
**C. 解决问题方案**
|
||||
1. **Checkbox 修复**:将 `div > input + label` 改为 `label > input + span`,让 label 直接包裹 input,天然扩大点击区域并避免 `id`/`htmlFor` 绑定冲突;`onChange` 中增加 `e.stopPropagation()` 防止事件冒泡被外层拦截。
|
||||
2. **AI 上下文增强**:
|
||||
- 新增 `globalContextText = editorRef.current?.innerText || ''`,将编辑器完整纯文本作为全局背景知识注入 prompt
|
||||
- `currentHtml` 增加 `.replace(/​/g, '').trim()` 过滤零宽字符
|
||||
- 重构 prompt 结构:先放「全局参考内容」,再放「目标区域源码」,最后放「医生指令」
|
||||
- 同步优化 systemPrompt,明确告知大模型有两个信息源
|
||||
|
||||
**D. 后续如何避免问题**
|
||||
- 在复杂 React 组件(尤其是与 contentEditable 共存)中使用 Checkbox 时,**优先使用 `<label>` 直接包裹 `<input>`** 的写法,避免依赖 `id`/`htmlFor`。
|
||||
- 向大模型发送局部修改请求时,**必须同时提供全局上下文**,否则 AI 无法基于文档其他部分的信息进行推理和修改。
|
||||
|
||||
Reference in New Issue
Block a user