From 48337c382ce2bcc5669ada43f45bfbb92fa8c6ac Mon Sep 17 00:00:00 2001 From: Administrator Date: Sat, 18 Apr 2026 23:02:11 +0800 Subject: [PATCH] =?UTF-8?q?2026-04-18-22-59-10=20-=20=E5=AD=97=E6=AE=B5?= =?UTF-8?q?=E9=BB=98=E8=AE=A4=E4=B8=8D=E4=B8=8B=E5=88=92=E7=BA=BF=E3=80=81?= =?UTF-8?q?=E5=8D=A0=E4=BD=8D=E7=AC=A6=E6=96=87=E5=AD=97=E5=B1=85=E4=B8=AD?= =?UTF-8?q?=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/ReportEditor.tsx | 6 +-- src/pages/TemplateManage.tsx | 12 ++--- src/utils/defaultContent.ts | 20 ++++--- 工程分析/实现方案-2026-04-18-22-59-10.md | 66 ++++++++++++++++++++++++ 工程分析/测试方案-2026-04-18-22-59-10.md | 54 +++++++++++++++++++ 工程分析/需求分析-2026-04-18-22-59-10.md | 32 ++++++++++++ 6 files changed, 170 insertions(+), 20 deletions(-) create mode 100644 工程分析/实现方案-2026-04-18-22-59-10.md create mode 100644 工程分析/测试方案-2026-04-18-22-59-10.md create mode 100644 工程分析/需求分析-2026-04-18-22-59-10.md diff --git a/src/pages/ReportEditor.tsx b/src/pages/ReportEditor.tsx index a31d823..d29371f 100644 --- a/src/pages/ReportEditor.tsx +++ b/src/pages/ReportEditor.tsx @@ -426,7 +426,7 @@ export default function ReportEditor() { const text = w > 0 && w < 80 ? '插图' : '插入/点击放置图片'; placeholder.innerHTML = ` × - ${text} + ${text} `; placeholder.style.border = '1px dashed #cbd5e1'; placeholder.style.background = '#f8fafc'; @@ -2036,13 +2036,13 @@ export default function ReportEditor() { let html: string; if (inTable) { const styleStr = 'position:relative;display:flex;align-items:center;justify-content:center;border:1px dashed #cbd5e1;background:#f8fafc;cursor:pointer;width:100%;height:100%;max-width:200px;max-height:200px;min-height:60px;margin:0 auto;'; - html = `
×${hintText}
`; + html = `
×${hintText}
`; } else { let styleStr = 'display:inline-block;text-align:center;border:1px dashed #cbd5e1;background:#f8fafc;vertical-align:middle;margin:0 4px;cursor:pointer;position:relative;'; styleStr += `width:${w}px;height:${h}px;max-width:${w}px;max-height:${h}px;line-height:${h}px;`; const showShortText = w > 0 && w < 80; const text = showShortText ? '插图' : hintText; - html = `×${text}​`; + html = `×${text}​`; } execCmd('insertHTML', html); setPlaceholderModal({...placeholderModal, isOpen: false}); diff --git a/src/pages/TemplateManage.tsx b/src/pages/TemplateManage.tsx index 7270e8c..83788e5 100644 --- a/src/pages/TemplateManage.tsx +++ b/src/pages/TemplateManage.tsx @@ -37,11 +37,11 @@ export default function TemplateManage() { const [editFieldTimeFormat, setEditFieldTimeFormat] = useState(''); const [editFieldTimeDefault, setEditFieldTimeDefault] = useState<'current' | 'specific'>('specific'); const [editFieldFixedTimeValue, setEditFieldFixedTimeValue] = useState(''); - const [editFieldHasUnderline, setEditFieldHasUnderline] = useState(true); + const [editFieldHasUnderline, setEditFieldHasUnderline] = useState(false); const [newFieldTimeFormat, setNewFieldTimeFormat] = useState('YYYY年MM月DD日'); const [newFieldTimeDefault, setNewFieldTimeDefault] = useState<'current' | 'specific'>('specific'); const [newFieldFixedTimeValue, setNewFieldFixedTimeValue] = useState(''); - const [newFieldHasUnderline, setNewFieldHasUnderline] = useState(true); + const [newFieldHasUnderline, setNewFieldHasUnderline] = useState(false); const [customTimeFormats, setCustomTimeFormats] = useState([]); const [formatDropdownOpen, setFormatDropdownOpen] = useState(false); const [newFormatDropdownOpen, setNewFormatDropdownOpen] = useState(false); @@ -422,7 +422,7 @@ export default function TemplateManage() { } pushHistory(); - const underlineClass = field.hasUnderline === false ? ' no-underline' : ''; + const underlineClass = field.hasUnderline !== true ? ' no-underline' : ''; const html = ` ×​`; const sel = window.getSelection(); @@ -984,7 +984,7 @@ export default function TemplateManage() { setEditFieldTimeFormat(field.timeFormat || ''); setEditFieldTimeDefault(field.timeDefault || 'specific'); setEditFieldFixedTimeValue(field.fixedTimeValue || ''); - setEditFieldHasUnderline(field.hasUnderline !== false); + setEditFieldHasUnderline(field.hasUnderline ?? false); const target = e.currentTarget; setTimeout(() => { target.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); @@ -1449,13 +1449,13 @@ export default function TemplateManage() { let html: string; if (inTable) { const styleStr = 'position:relative;display:flex;align-items:center;justify-content:center;border:1px dashed #cbd5e1;background:#f8fafc;cursor:pointer;width:100%;height:100%;max-width:200px;max-height:200px;min-height:60px;margin:0 auto;'; - html = `
×${hintText}
`; + html = `
×${hintText}
`; } else { let styleStr = 'display:inline-block;text-align:center;border:1px dashed #cbd5e1;background:#f8fafc;vertical-align:middle;margin:0 4px;cursor:pointer;position:relative;'; styleStr += `width:${w}px;height:${h}px;max-width:${w}px;max-height:${h}px;line-height:${h}px;`; const showShortText = w > 0 && w < 80; const text = showShortText ? '插图' : hintText; - html = `×${text}​`; + html = `×${text}​`; } const wrapper = document.createElement('div'); wrapper.innerHTML = html; diff --git a/src/utils/defaultContent.ts b/src/utils/defaultContent.ts index 92d8a97..9648bb4 100644 --- a/src/utils/defaultContent.ts +++ b/src/utils/defaultContent.ts @@ -1,14 +1,12 @@ -const noUnderlineKeys = ['patientName', 'patientGender', 'patientAge', 'department', 'bedNumber', 'hospitalId']; const smartField = (key: string) => { - const noUlClass = noUnderlineKeys.includes(key) ? ' no-underline' : ''; - return ` ×​`; + return ` ×​`; }; export const defaultReportContent = `
× - LOGO + LOGO
西 安 交 通 大 学 第 一 附 属 医 院
@@ -83,21 +81,21 @@ export const defaultReportContent = `
× - 插入/点击放置图片 + 插入/点击放置图片

图A 腹腔镜探查

× - 插入/点击放置图片 + 插入/点击放置图片

图B 胆囊管夹闭与离断

× - 插入/点击放置图片 + 插入/点击放置图片

图C 胆囊动脉夹闭与离断

@@ -106,21 +104,21 @@ export const defaultReportContent = `
× - 插入/点击放置图片 + 插入/点击放置图片

图D 胆囊剥离与床面止血

× - 插入/点击放置图片 + 插入/点击放置图片

图E 胆囊取出与钛夹确认

× - 插入/点击放置图片 + 插入/点击放置图片

图F 止血材料覆盖及检查

@@ -145,7 +143,7 @@ export const defaultReportContent = `

- 手术者签名：×插入/点击放置图片 + 手术者签名：×插入/点击放置图片

 

diff --git a/工程分析/实现方案-2026-04-18-22-59-10.md b/工程分析/实现方案-2026-04-18-22-59-10.md new file mode 100644 index 0000000..be25198 --- /dev/null +++ b/工程分析/实现方案-2026-04-18-22-59-10.md @@ -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 ` ×​`; +}; +``` + +## 需求 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` 样式时，应使用精确的字符串匹配，避免误伤其他元素。 diff --git a/工程分析/测试方案-2026-04-18-22-59-10.md b/工程分析/测试方案-2026-04-18-22-59-10.md new file mode 100644 index 0000000..4a7985b --- /dev/null +++ b/工程分析/测试方案-2026-04-18-22-59-10.md @@ -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. 分别检查各占位符的文字位置。 +**预期结果**：所有占位符文字均绝对居中。 + +## 回归测试 +- 确保字段插入、编辑、删除功能正常。 +- 确保图片占位符的插入、删除、拖拽功能正常。 +- 确保打印样式正常。 + +## 测试通过标准 +所有用例均通过，无控制台报错，排版居中对齐准确。 diff --git a/工程分析/需求分析-2026-04-18-22-59-10.md b/工程分析/需求分析-2026-04-18-22-59-10.md new file mode 100644 index 0000000..14a07f2 --- /dev/null +++ b/工程分析/需求分析-2026-04-18-22-59-10.md @@ -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 的下划线行为 +- 所有图片占位符的提示文字对齐方式