67 lines
3.3 KiB
Markdown
67 lines
3.3 KiB
Markdown
# 实现方案 —— 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` 样式时，应使用精确的字符串匹配，避免误伤其他元素。
|