2026-04-17-23-12-52 - 修复时间字段24h脏数据、格式选项分类过滤、字段管理编辑面板滚动对齐

工程分析/经验记录.md

@@ -817,3 +817,40 @@ if ((settings.autoInsertDelay || 0) > 0) {
 - 当字段配置了「固定默认值」或「自动填充当前值」时，必须在所有「创建新数据」的入口（初始 state、切换模板、重置表单等）中显式遍历字段配置并注入，不能依赖单个 `useEffect` 来兜底——因为 `useEffect` 的触发条件可能与数据创建时机不一致。
 - 对于「格式→UI 形态」的联动判断，应使用**包含性判断**（`includes`）而非**精确匹配**，以兼容用户自定义格式。如果判断逻辑较为复杂，建议抽离为独立工具函数（如 `is12HourFormat(fmt: string): boolean`）。
 - 当某个字段在初始化时被赋予了「看似合理的默认值」（如 `surgeryDate: new Date()`），必须评估这是否会拦截后续基于字段配置的自动填充逻辑。若会拦截，应改为空值并在最后做兜底赋值。
+
+
+---
+
+## 记录 27：DEFAULT_FORM_FIELDS 遗留 '24h' 默认值导致报告显示异常 + 格式选项未分类 + 编辑面板点击失效
+
+**A. 具体问题**
+1. `template-manage` 字段管理中，时间字段的格式 datalist 只显示 `YYYY-MM-DD` 和 `24h`，缺少 `YYYY年MM月DD日` 和 `HH:mm`/`hh:mm A`。
+2. `report-editor` 中手术终止时间 smart field 显示为 "24h" 字样，而非正常时间值。
+3. `template-manage` 字段管理中，点击底部字段进入编辑模式后，部分输入框/下拉框点击无响应，需手动滚动后才能获取焦点。
+
+**B. 产生问题原因**
+1. **`DEFAULT_FORM_FIELDS` 遗留旧值**：`types.ts` 中 `startTime` 和 `endTime` 的 `timeFormat` 仍被硬编码为 `'24h'`（历史遗留简写别名）。当新用户登录或重置系统时，该值被加载到 `formFieldsConfig` 中。`ReportEditor.tsx` 的 `formatTimeDisplay` 函数用 `'24h'` 作为格式模板进行 token 替换，但 `'24h'` 中不含 `HH`/`hh`/`mm`/`A` 等任何可替换 token，函数直接原样返回 `'24h'`，导致编辑器中显示 "24h"。
+2. **`customTimeFormats` 未按类型过滤**：`TemplateManage.tsx` 的 datalist 直接渲染了 `customTimeFormats` 数组中的所有格式（日期和时间混在一起）。当用户编辑 time 字段时，会看到 `YYYY-MM-DD` 等日期格式；编辑 date 字段时，会看到 `HH:mm` 等时间格式，选项混乱。
+3. **布局突变导致点击穿透失效**：字段管理列表位于 `overflow-y-auto` 滚动容器内。点击字段卡片后，内部编辑表单展开，高度瞬间增加。若卡片原本位于可视区域底部边缘，新出现的输入框可能刚好处于容器裁剪区域之外，浏览器 hit-testing 无法将点击事件正确路由到输入框上。
+
+**C. 解决问题方案**
+1. **修正默认值**：`types.ts` 中 `startTime`/`endTime` 的 `timeFormat` 从 `'24h'` 改为 `'HH:mm'`。
+2. **兼容兜底**：`ReportEditor.tsx` 的 `formatTimeDisplay` 开头增加 `if (fmt === '24h') fmt = 'HH:mm';`，防止已有用户的 `formFieldsConfig` 中仍残留 `'24h'` 导致显示异常。
+3. **清理旧缓存**：`TemplateManage.tsx` 初始化 `customTimeFormats` 时，对 `savedFormats` 增加 `.filter(f => f !== '24h' && f !== '12h')`，自动清理历史遗留的无效旧格式。
+4. **按类型过滤 datalist**：编辑字段和新增字段的 format `<datalist>` 渲染时，增加 `.filter`：
+   ```ts
+   .filter(fmt => {
+     const isDateFormat = /YYYY|MM|DD/.test(fmt);
+     const isTimeFormat = /HH|hh|mm|A/.test(fmt);
+     if (field.type === 'date') return isDateFormat;
+     if (field.type === 'time') return isTimeFormat;
+     return true;
+   })
+   ```
+5. **自动滚动对齐**：字段卡片 `onClick` 中，在设置完编辑状态后增加 `setTimeout(() => { e.currentTarget.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); }, 50);`，确保编辑面板展开后卡片位于可视区域内。
+
+**D. 后续如何避免问题**
+- 当将格式简写别名（如 `'24h'`）迁移为标准 token 格式（如 `'HH:mm'`）时，必须**全局搜索**所有硬编码默认值（`DEFAULT_FORM_FIELDS`、测试数据、mock 数据等），确保源头不再产生脏数据。
+- `customTimeFormats` 这类用户可扩展的缓存数组，在初始化时应建立**无效值清理机制**，防止历史版本残留的数据污染后续 UI。
+- `datalist` / `select` 的选项如果存在明显的类型分组（日期 vs 时间），应在渲染层做过滤，而不是将所有选项平铺展示。
+- 任何在滚动容器内通过点击展开/折叠的交互组件，都应考虑增加 `scrollIntoView` 兜底，防止布局突变导致的点击失效问题。