3.3 KiB
3.3 KiB
实现方案 —— 2026-04-18-22-59-10
方案目标
将字段下划线默认行为改为「默认不显示」,修复占位符提示文字居中问题。
需求 1:所有字段默认打印时不显示下划线
修改文件 1:src/pages/TemplateManage.tsx
-
新增字段默认状态:
const [newFieldHasUnderline, setNewFieldHasUnderline] = useState(false); -
编辑字段回显默认值:在
startEditField或等效函数中:setEditFieldHasUnderline(field.hasUnderline ?? false); -
插入字段类名判断:在
insertSmartField中:const underlineClass = field.hasUnderline !== true ? ' no-underline' : '';
修改文件 2:src/utils/defaultContent.ts
移除 noUnderlineKeys 数组,直接在 smartField() 中给所有字段加 .no-underline:
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;。
需要修改的位置:
defaultContent.ts:Logo 占位符 + 6 个表格占位符 + 签名占位符ReportEditor.tsx:handleEditorClick删除恢复逻辑中的.placeholder-textplaceholderModal确认插入时的.placeholder-text(table 内 + inline-block)
TemplateManage.tsx:handleEditorClick删除恢复逻辑中的.placeholder-textplaceholderModal确认插入时的.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 |
风险与注意事项
smartField()中移除noUnderlineKeys后,所有默认模板字段将统一无下划线。此前通过hasUnderline配置自定义下划线的机制仍然保留(field.hasUnderline === true时不加.no-underline),只是默认值变为false。text-align:center追加时需注意不破坏已有的其他样式属性顺序。- 批量替换
placeholder-text样式时,应使用精确的字符串匹配,避免误伤其他元素。