diff --git a/工程分析/经验记录.md b/工程分析/经验记录.md index 08c970a..c327433 100644 --- a/工程分析/经验记录.md +++ b/工程分析/经验记录.md @@ -1075,3 +1075,32 @@ if ((settings.autoInsertDelay || 0) > 0) { - 当扩展数据类型(如 Template 接口)时,应评估是否需要同步修改所有使用该类型的持久化/序列化逻辑(如 storage 读写、导入/导出)。 - 默认模板中的占位符结构必须与运行时插入逻辑保持完全一致(`display`、居中方式、`data-mode` 等),任何差异都可能导致交互体验不一致。 - 新增文件上传/导入功能时,必须在 onChange 事件末尾清空 `e.target.value = ''`,否则同一文件无法重复选择。 + +--- + +## 记录 35:字段默认不下划线与占位符文字居中修复 + +**A. 具体问题** +1. 模板管理中新增字段时,「打印时显示下划线」复选框默认勾选,用户希望改为默认不勾选。 +2. 删除图片占位符中的图片后,提示文字(如「插入/点击放置图片」)在虚线框内偏左,未真正居中。 + +**B. 产生问题原因** +1. `newFieldHasUnderline` 和 `editFieldHasUnderline` 的 `useState` 默认值为 `true`;`insertSmartField` 中的判断逻辑是 `field.hasUnderline === false ? ' no-underline' : ''`,导致只有显式关闭时才无下划线。 +2. 虽然给 `.placeholder-text` 使用了 `position:absolute + transform:translate(-50%, -50%)` 实现居中,但元素本身设置了 `display:block; width:100%`,其内部文本流默认 `text-align:left`,导致文字靠左。 +3. 上一轮对 `TemplateManage.tsx` 中 `handleEditorClick` 删除恢复逻辑的修改未完全生效,该文件中的删除恢复逻辑仍使用旧代码(无 absolute 定位、无尺寸恢复)。 + +**C. 解决问题方案** +1. **字段默认不下划线**: + - `src/pages/TemplateManage.tsx`:`newFieldHasUnderline` 和 `editFieldHasUnderline` 默认值从 `true` 改为 `false` + - `src/pages/TemplateManage.tsx`:`insertSmartField` 中判断改为 `field.hasUnderline !== true ? ' no-underline' : ''` + - `src/pages/TemplateManage.tsx`:编辑字段回显改为 `field.hasUnderline ?? false` + - `src/utils/defaultContent.ts`:移除 `noUnderlineKeys` 数组,`smartField()` 直接给所有字段加 `.no-underline` +2. **占位符文字居中**: + - 在所有 `.placeholder-text` 的 style 中追加 `text-align:center;` + - 修改范围覆盖 `src/utils/defaultContent.ts`(8 个占位符)、`src/pages/ReportEditor.tsx`(3 处)、`src/pages/TemplateManage.tsx`(3 处) + - 补全 `TemplateManage.tsx` 中 `handleEditorClick` 删除恢复逻辑的旧代码,添加 absolute 居中、尺寸恢复、`text-align:center` + +**D. 后续如何避免问题** +- 当修改默认值(如 `useState(true)` → `useState(false)`)时,应同时检查所有回显/回退逻辑(如 `field.hasUnderline !== false` → `field.hasUnderline ?? false`),确保数据兼容性。 +- 使用 `display:block; width:100%` 的绝对居中元素,必须显式设置 `text-align:center;` 以控制内部文本流的对齐方向。 +- 批量替换字符串时,应通过 grep 验证所有匹配位置是否都已更新,避免遗漏(如此次 `TemplateManage.tsx` 中 handleEditorClick 的旧代码)。