2.7 KiB
2.7 KiB
需求分析 — 2026-04-17-23-38-34
原始需求摘要
-
时间格式输入框改造：
template-manage字段管理中，时间字段的格式输入当前使用原生<input list="...">+<datalist>，浏览器兼容性和交互体验不佳。希望改造为类似单选下拉框的自定义组件，既能下拉选择已有格式，又能手写输入并自动记忆新格式。 -
表格内插入图片占位符修复：在
template-manage编辑器表格中点击"插入图片占位符"后，HTML 结构被破坏——外层<span class="image-placeholder">丢失，仅剩内部子元素被分散到<td>中。且表格内占位符应默认自适应单元格大小（最大不超过 200×200px）。 -
打印第二页页边距太小：
report-editor/report-view点击打印时，第二页及后续页面的上下边距几乎为 0，内容紧贴纸张边缘。当前@page { margin: 0 }+body { padding: 10mm }的组合仅在文档首尾生效一次，分页后无padding。
需求拆解
功能点
- F1：
TemplateManage.tsx中编辑字段和新增字段的时间格式输入，从原生input[list]+datalist改造为自定义下拉组件（input + 绝对定位 ul 列表）。支持点击展开下拉、点击选项填充、手写输入、blur/Enter 时自动保存新格式到customTimeFormats。 - F2：
TemplateManage.tsx和ReportEditor.tsx的insertImage函数，在插入前检测当前光标是否位于<td>/<th>内。若在表格内，使用块级<div>作为外层容器（避免浏览器 execCommand 修正破坏结构），并设置width:100%;height:100%;max-width:200px;max-height:200px;实现自适应。不在表格内时保持现有<span>行内结构。 - F3：
src/utils/print.ts中，将@page { margin: 0 }+body { padding: 10mm }改为@page { margin: 15mm 10mm }+body { padding: 0 }，使每一页物理纸张都有独立的上下 15mm / 左右 10mm 留白。同步调整.content的 width 为100%。
非功能点
- 向后兼容：已保存的模板/报告中已有的
image-placeholder结构不受影响。 - 下拉组件的
z-index需确保覆盖在滚动容器之上。 - 打印样式调整应同时兼顾
.image-placeholder在打印时的隐藏逻辑。
影响范围预估
| 模块 | 影响程度 | 说明 |
|---|---|---|
src/pages/TemplateManage.tsx |
高 | 时间格式自定义下拉组件（编辑+新增两处）；insertImage 表格检测与分支逻辑 |
src/pages/ReportEditor.tsx |
中 | insertImage 表格检测与分支逻辑 |
src/utils/print.ts |
低 | @page margin 与 body padding 调整 |
待确认问题
无（用户已明确需求，且本次无需人工确认）。