36 lines
2.7 KiB
Markdown
36 lines
2.7 KiB
Markdown
# 需求分析 — 2026-04-17-23-38-34
|
||
|
||
## 原始需求摘要
|
||
|
||
1. **时间格式输入框改造**：`template-manage` 字段管理中，时间字段的格式输入当前使用原生 `<input list="...">` + `<datalist>`，浏览器兼容性和交互体验不佳。希望改造为类似单选下拉框的自定义组件，既能下拉选择已有格式，又能手写输入并自动记忆新格式。
|
||
|
||
2. **表格内插入图片占位符修复**：在 `template-manage` 编辑器表格中点击"插入图片占位符"后，HTML 结构被破坏——外层 `<span class="image-placeholder">` 丢失，仅剩内部子元素被分散到 `<td>` 中。且表格内占位符应默认自适应单元格大小（最大不超过 200×200px）。
|
||
|
||
3. **打印第二页页边距太小**：`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 调整 |
|
||
|
||
## 待确认问题
|
||
|
||
无（用户已明确需求，且本次无需人工确认）。
|