2026-04-18-22-59-10 - 追加经验记录35：字段下划线默认与占位符居中

工程分析/经验记录.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 的旧代码）。