fix: 5项交互修复 - 删除图片恢复虚线框、prompt文案统一、移除overflow、多选输入解耦、label加可多选

过往经验/经验记录.md

@@ -398,3 +398,42 @@ if ((settings.autoInsertDelay || 0) > 0) {
 - 存储层的异常捕获**绝不应静默吞掉**，至少要输出日志，必要时还应弹出用户提示。
 - 对于需要存储大量图片的医疗/图文报告系统，应将 `localStorage` 逐步迁移到 `IndexedDB`，从根本上解除 5MB 容量瓶颈。
 - 在开发测试阶段，应使用高分辨率视频和大批量关键帧进行压力测试，提前暴露存储容量问题。
+
+
+---
+
+## 记录 14：5 项交互修复（虚线框恢复、prompt 文案、删除按钮、多选输入、label 提示）
+
+**A. 具体问题**
+用户提出 5 个修复需求：
+1. 删除 `image-placeholder` 中的图片后，虚线框消失——`fillPlaceholderSrc` 中设置了 `border='none'`，但删除图片的代码没有恢复；
+2. `ReportEditor.tsx` 的 `insertImage` prompt 文案仍显示旧版 "用英文逗号分隔"，未同步修改；
+3. 新生成的 `image-placeholder` 右上角红色 `×` 显示不完全——`ReportEditor.tsx` 的 `insertImage` 中 `overflow:hidden` 未移除；
+4. 多选框无法输入 `,`、`;`、`，`、`、` 等分隔符——`onChange` 实时调用 `parseMultiInput` + `filter(Boolean)`，末尾的分隔符被瞬间吃掉；
+5. 多选框 label 缺少 "（可多选）" 提示。
+
+**B. 产生问题原因**
+1. 上批次修改时，`ReportEditor.tsx` 的 `insertImage` 替换未成功匹配（旧字符串与文件实际内容有微小差异），导致该函数保留了旧代码。删除图片逻辑同样缺少 border/background 恢复。
+2. `overflow:hidden` 仅在新版 `TemplateManage.tsx` 中被移除，`ReportEditor.tsx` 中仍保留。
+3. 多选框使用受控 `value={displayText}` + `onChange={handleMultiChange}`，每次输入都会触发 `split(/[,，;；、]/)` 和 `filter(Boolean)`。当用户输入一个逗号时，split 产生空字符串，filter 将其过滤，输入框值立即回退到无逗号状态。
+4. label 渲染时直接使用 `{field.label}`，未追加多选提示。
+
+**C. 解决问题方案**
+1. **恢复虚线框**：在 `ReportEditor.tsx` 和 `TemplateManage.tsx` 的删除图片分支中，增加：
+   ```ts
+   placeholder.style.border = '1px dashed #cbd5e1';
+   placeholder.style.background = '#f8fafc';
+   ```
+2. **修正 prompt 文案**：将 `ReportEditor.tsx` 的 `insertImage` 重写为与 `TemplateManage.tsx` 一致的新版逻辑（`*` 分隔 + while 循环校验）。
+3. **移除 overflow:hidden**：从 `ReportEditor.tsx` 的 `styleStr` 中删除 `overflow:hidden;`。
+4. **多选输入解耦**：引入本地状态 `multiInputText: Record<string, string>`，
+   - `onChange` 仅更新 `multiInputText`，不触发拆分；
+   - `onBlur` 和 `Enter` 时才调用 `handleMultiCommit` 执行 `split` + `filter(Boolean)` + 保存新选项；
+   - 输入框 `value` 优先读取 `multiInputText[field.key]`，无本地缓存时回退到 `displayText`。
+5. **label 追加提示**：`{field.label}（可多选）`。
+
+**D. 后续如何避免问题**
+- 同类型函数在多个文件中存在时，务必逐个文件 grep 确认修改结果，不能假设一次替换就能覆盖所有实例。
+- 任何 "实时解析输入" 的逻辑都必须警惕 `filter(Boolean)` 对空字符串的过滤效应——如果允许用户输入分隔符，应使用独立状态缓存原始输入，仅在确认时（blur/enter）执行解析。
+- `StrReplaceFile` 的批量替换若返回 "Applied N edit(s) with M total replacement(s)" 且 M < N，应立即检查未匹配的文件，避免遗漏。
+