109 lines
3.9 KiB
Markdown
109 lines
3.9 KiB
Markdown
# 实现方案 —— 2026-04-18-23-39-35
|
||
|
||
## 方案目标
|
||
修复下划线功能、统一导出文件名、缩紧输入框间距、实现表单逆向联动。
|
||
|
||
## 需求 1：修复下划线勾选状态异常及打印失效
|
||
|
||
### 修改文件 1：`src/types.ts`
|
||
在 `DEFAULT_FORM_FIELDS` 数组中，为所有字段显式设置 `hasUnderline: false`（如果当前为 `true` 或未指定）。
|
||
|
||
### 修改文件 2：`src/pages/TemplateManage.tsx`
|
||
在编辑字段的回显逻辑中：
|
||
```ts
|
||
setEditFieldHasUnderline(field.hasUnderline === true);
|
||
```
|
||
确保 `undefined` 时默认不勾选。
|
||
|
||
### 修改文件 3：`src/utils/print.ts`
|
||
恢复默认显示下划线的白名单机制：
|
||
```css
|
||
@media print {
|
||
.smart-field-wrapper .field-value {
|
||
border: none !important;
|
||
border-bottom: 1px solid #000 !important;
|
||
border-radius: 0 !important;
|
||
background: transparent !important;
|
||
padding: 0 2px 0px 2px !important;
|
||
}
|
||
.smart-field-wrapper .field-value.no-underline {
|
||
border-bottom: none !important;
|
||
}
|
||
}
|
||
```
|
||
|
||
## 需求 2：统一 PDF 和 JSON 导出文件名
|
||
|
||
### 修改文件：`src/utils/print.ts`
|
||
确保 `printDocument` 中：
|
||
1. 保存原始 `document.title`
|
||
2. 设置 `document.title = docTitle`
|
||
3. iframe HTML 中也写入 `<title>${docTitle}</title>`
|
||
4. 打印完成后恢复 `document.title`
|
||
|
||
同时检查 `ReportEditor.tsx` 和 `ReportManage.tsx` 中调用 `printDocument` 时传入的 `docTitle` 是否与 JSON 文件名一致。
|
||
|
||
## 需求 3：缩紧 field-value 内文字间距
|
||
|
||
### 修改文件 1：`src/utils/defaultContent.ts`
|
||
```ts
|
||
// padding:0 4px → padding:0 2px
|
||
// margin:0 2px → margin:0
|
||
// min-width:32px → min-width:24px
|
||
// 增加 text-align:center 让文字居中
|
||
```
|
||
|
||
### 修改文件 2：`src/utils/print.ts`
|
||
同步修改打印样式中的 `.field-value`：
|
||
```css
|
||
.smart-field-wrapper .field-value {
|
||
min-width: 24px;
|
||
padding: 0;
|
||
margin: 0;
|
||
...
|
||
}
|
||
```
|
||
|
||
## 需求 4：ReportEditor 表单逆向联动
|
||
|
||
### 修改文件：`src/pages/ReportEditor.tsx`
|
||
|
||
1. **新增 useEffect 监听 activeFieldKey**：
|
||
```ts
|
||
useEffect(() => {
|
||
if (!editorRef.current) return;
|
||
const allFields = editorRef.current.querySelectorAll('.field-value');
|
||
allFields.forEach(el => {
|
||
(el as HTMLElement).style.backgroundColor = '#f8fafc';
|
||
(el as HTMLElement).style.boxShadow = 'none';
|
||
});
|
||
if (activeFieldKey) {
|
||
const targetEl = editorRef.current.querySelector(`.field-value[data-bind="${activeFieldKey}"]`) as HTMLElement;
|
||
if (targetEl) {
|
||
targetEl.style.backgroundColor = '#eff6ff';
|
||
targetEl.style.boxShadow = '0 0 0 2px #3b82f6';
|
||
targetEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||
}
|
||
}
|
||
}, [activeFieldKey]);
|
||
```
|
||
|
||
2. **右侧表单添加 onFocus/onClick**：
|
||
在右侧表单字段容器的 `onClick` 中增加 `setActiveFieldKey(field.key)`，在 input/select 的 `onFocus` 中也增加 `setActiveFieldKey(field.key)`。
|
||
|
||
## 涉及文件及修改点
|
||
| 文件 | 修改点 |
|
||
|------|--------|
|
||
| `src/types.ts` | DEFAULT_FORM_FIELDS 中 hasUnderline 设为 false |
|
||
| `src/pages/TemplateManage.tsx` | 编辑字段回显逻辑 |
|
||
| `src/utils/print.ts` | 打印下划线白名单机制；document.title 设置；field-value 间距 |
|
||
| `src/utils/defaultContent.ts` | smartField padding/margin 缩小；text-align:center |
|
||
| `src/pages/ReportEditor.tsx` | activeFieldKey useEffect 高亮滚动；表单 onFocus 联动 |
|
||
| `src/pages/ReportManage.tsx` | 检查导出文件名一致性 |
|
||
|
||
## 风险与注意事项
|
||
1. `DEFAULT_FORM_FIELDS` 修改后，现有用户的 localStorage 中已保存的字段配置不会自动更新，需要手动编辑或清除 `formFieldsConfig` 才能看到效果。
|
||
2. `activeFieldKey` 的 useEffect 直接操作 DOM style，需要确保在组件卸载或切换 tab 时清除高亮。
|
||
3. 缩小 padding/margin 后，需要验证在表格单元格（td）内的显示是否正常。
|
||
4. 打印样式中 `.field-value.no-underline` 的优先级必须高于基础 `.field-value` 规则。
|