2026-04-18-22-59-10 - 字段默认不下划线、占位符文字居中修复
This commit is contained in:
Administrator
66
工程分析/实现方案-2026-04-18-22-59-10.md
Normal file
66
工程分析/实现方案-2026-04-18-22-59-10.md
Normal file
@@ -0,0 +1,66 @@
|
||||
# 实现方案 —— 2026-04-18-22-59-10
|
||||
|
||||
## 方案目标
|
||||
将字段下划线默认行为改为「默认不显示」，修复占位符提示文字居中问题。
|
||||
|
||||
## 需求 1：所有字段默认打印时不显示下划线
|
||||
|
||||
### 修改文件 1：`src/pages/TemplateManage.tsx`
|
||||
|
||||
1. **新增字段默认状态**：
|
||||
```ts
|
||||
const [newFieldHasUnderline, setNewFieldHasUnderline] = useState(false);
|
||||
```
|
||||
|
||||
2. **编辑字段回显默认值**：在 `startEditField` 或等效函数中：
|
||||
```ts
|
||||
setEditFieldHasUnderline(field.hasUnderline ?? false);
|
||||
```
|
||||
|
||||
3. **插入字段类名判断**：在 `insertSmartField` 中：
|
||||
```ts
|
||||
const underlineClass = field.hasUnderline !== true ? ' no-underline' : '';
|
||||
```
|
||||
|
||||
### 修改文件 2：`src/utils/defaultContent.ts`
|
||||
|
||||
移除 `noUnderlineKeys` 数组，直接在 `smartField()` 中给所有字段加 `.no-underline`：
|
||||
```ts
|
||||
const smartField = (key: string) => {
|
||||
return `<span class="smart-field-wrapper" contenteditable="false" style="white-space:nowrap;position:relative;"><span class="field-value no-underline" data-bind="${key}" contenteditable="true" style="min-width:32px;padding:0 4px;margin:0 2px;border:1px solid #cbd5e1;border-radius:2px;display:inline-block;background:#f8fafc;color:#0f172a;line-height:1.2;font-size:inherit;vertical-align:text-bottom;box-sizing:border-box;min-height:1.2em;outline:none;"> </span><span class="delete-btn" contenteditable="false">×</span></span>​`;
|
||||
};
|
||||
```
|
||||
|
||||
## 需求 2：修复占位符文字偏左
|
||||
|
||||
### 修改文件
|
||||
`src/pages/ReportEditor.tsx`、`src/pages/TemplateManage.tsx`、`src/utils/defaultContent.ts`
|
||||
|
||||
### 修改内容
|
||||
在所有 `.placeholder-text` 的 `style` 属性中追加 `text-align:center;`。
|
||||
|
||||
需要修改的位置：
|
||||
1. `defaultContent.ts`：Logo 占位符 + 6 个表格占位符 + 签名占位符
|
||||
2. `ReportEditor.tsx`：
|
||||
- `handleEditorClick` 删除恢复逻辑中的 `.placeholder-text`
|
||||
- `placeholderModal` 确认插入时的 `.placeholder-text`（table 内 + inline-block）
|
||||
3. `TemplateManage.tsx`：
|
||||
- `handleEditorClick` 删除恢复逻辑中的 `.placeholder-text`
|
||||
- `placeholderModal` 确认插入时的 `.placeholder-text`（table 内 + inline-block）
|
||||
|
||||
统一的新样式：
|
||||
```
|
||||
color:#94a3b8;font-size:11px;pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:block;width:100%;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
|
||||
```
|
||||
|
||||
## 涉及文件及修改点
|
||||
| 文件 | 修改点 |
|
||||
|------|--------|
|
||||
| `src/pages/TemplateManage.tsx` | `newFieldHasUnderline` 默认 `false`；编辑回显默认 `false`；`insertSmartField` 判断逻辑；placeholder-text 样式 |
|
||||
| `src/utils/defaultContent.ts` | `smartField()` 直接加 `.no-underline`；所有 placeholder-text 加 `text-align:center` |
|
||||
| `src/pages/ReportEditor.tsx` | 所有 placeholder-text 加 `text-align:center` |
|
||||
|
||||
## 风险与注意事项
|
||||
1. `smartField()` 中移除 `noUnderlineKeys` 后，所有默认模板字段将统一无下划线。此前通过 `hasUnderline` 配置自定义下划线的机制仍然保留（`field.hasUnderline === true` 时不加 `.no-underline`），只是默认值变为 `false`。
|
||||
2. `text-align:center` 追加时需注意不破坏已有的其他样式属性顺序。
|
||||
3. 批量替换 `placeholder-text` 样式时，应使用精确的字符串匹配，避免误伤其他元素。
|
||||
54
工程分析/测试方案-2026-04-18-22-59-10.md
Normal file
54
工程分析/测试方案-2026-04-18-22-59-10.md
Normal file
@@ -0,0 +1,54 @@
|
||||
# 测试方案 —— 2026-04-18-22-59-10
|
||||
|
||||
## 测试目标
|
||||
验证字段下划线默认行为和占位符文字居中修复。
|
||||
|
||||
## 测试用例
|
||||
|
||||
### TC-1：新增字段默认不下划线
|
||||
**前置条件**：进入模板管理 → 字段管理 → 新增字段。
|
||||
**步骤**：
|
||||
1. 点击「添加字段」。
|
||||
2. 观察「打印时显示下划线」复选框状态。
|
||||
**预期结果**：复选框默认未勾选。
|
||||
|
||||
### TC-2：插入字段默认带 no-underline 类
|
||||
**前置条件**：模板管理中已有字段（默认或新增）。
|
||||
**步骤**：
|
||||
1. 在编辑器中插入任意字段。
|
||||
2. 检查生成的 HTML。
|
||||
**预期结果**：`.field-value` 带有 `.no-underline` 类。
|
||||
|
||||
### TC-3：显式勾选下划线后打印正常显示
|
||||
**前置条件**：某个字段的「打印时显示下划线」已勾选。
|
||||
**步骤**：
|
||||
1. 插入该字段。
|
||||
2. 点击打印预览。
|
||||
**预期结果**：该字段显示下划线，其他未勾选字段不显示。
|
||||
|
||||
### TC-4：默认模板所有字段打印无下划线
|
||||
**前置条件**：新建报告，加载默认模板。
|
||||
**步骤**：
|
||||
1. 点击打印预览。
|
||||
2. 检查「姓名、性别、年龄、科别、床号、住院号」等字段。
|
||||
**预期结果**：所有字段均不显示下划线。
|
||||
|
||||
### TC-5：删除图片后占位符文字居中
|
||||
**前置条件**：模板中有图片占位符，已插入图片。
|
||||
**步骤**：
|
||||
1. 点击图片右上角的「×」删除。
|
||||
**预期结果**：提示文字（如「插入/点击放置图片」或「LOGO」）在虚线框正中心，不偏左。
|
||||
|
||||
### TC-6：不同尺寸占位符文字均居中
|
||||
**前置条件**：模板中有不同尺寸的占位符（65px Logo、200px 表格占位符）。
|
||||
**步骤**：
|
||||
1. 分别检查各占位符的文字位置。
|
||||
**预期结果**：所有占位符文字均绝对居中。
|
||||
|
||||
## 回归测试
|
||||
- 确保字段插入、编辑、删除功能正常。
|
||||
- 确保图片占位符的插入、删除、拖拽功能正常。
|
||||
- 确保打印样式正常。
|
||||
|
||||
## 测试通过标准
|
||||
所有用例均通过，无控制台报错，排版居中对齐准确。
|
||||
32
工程分析/需求分析-2026-04-18-22-59-10.md
Normal file
32
工程分析/需求分析-2026-04-18-22-59-10.md
Normal file
@@ -0,0 +1,32 @@
|
||||
# 需求分析 —— 2026-04-18-22-59-10
|
||||
|
||||
## 需求来源
|
||||
用户希望调整字段默认下划线行为，并修复占位符文字居中的样式问题。
|
||||
|
||||
## 需求概述
|
||||
|
||||
### 需求 1：所有字段默认打印时不显示下划线
|
||||
当前字段管理中，新增字段的「打印时显示下划线」复选框默认勾选（`hasUnderline` 默认为 `true`）。用户希望改为默认不勾选，即所有现有字段和新增字段在打印时默认不显示下划线。
|
||||
|
||||
具体改动点：
|
||||
- `newFieldHasUnderline` 状态默认值从 `true` 改为 `false`
|
||||
- 编辑字段回显时，`hasUnderline` 回退值从 `true` 改为 `false`
|
||||
- `insertSmartField` 中类名判断逻辑改为：只要 `hasUnderline !== true` 就加 `.no-underline`
|
||||
- `defaultContent.ts` 中 `smartField()` 直接给所有字段加 `.no-underline`
|
||||
|
||||
### 需求 2：修复删除图片后占位符文字偏左
|
||||
删除图片后，占位符恢复为默认状态，但提示文字（如「插入/点击放置图片」）在虚线框内偏左，未真正居中。
|
||||
|
||||
原因分析：虽然使用了 `position:absolute + transform:translate(-50%, -50%)`，但 `placeholder-text` 是 `display:block; width:100%` 的块级元素，其内部文本流默认 `text-align:left`，导致文字靠左。
|
||||
|
||||
修复方案：在所有 `.placeholder-text` 的 style 中追加 `text-align:center;`。
|
||||
|
||||
## 涉及文件
|
||||
- `src/pages/TemplateManage.tsx`（需求 1、2）
|
||||
- `src/utils/defaultContent.ts`（需求 1、2）
|
||||
- `src/pages/ReportEditor.tsx`（需求 2）
|
||||
|
||||
## 需求影响范围
|
||||
- 字段管理的默认值和插入逻辑
|
||||
- 默认模板中所有 smartField 的下划线行为
|
||||
- 所有图片占位符的提示文字对齐方式
|
||||
Reference in New Issue
Block a user