feat(文档库): 编辑器内渲染占位符与勾选框胶囊

2026-09-18 13:03:11 +08:00
parent 8b1cbee16f
commit 9062d0b3c5
8 changed files with 841 additions and 11 deletions
@@ -59,6 +59,37 @@ VITE_MOCK_DOCUMENTS=false VITE_MOCK_SIGNING=false npx vite --port 5199
 VERIFY_URL=http://127.0.0.1:5199/ node scripts/verify-pages.cjs
 ```

+## verify-editor-marks.cjs — 占位符 / 勾选框胶囊验证
+
+**为什么需要**：占位符胶囊（`utils/signing-editor-marks`）是**只改渲染、不改数据**的实现——
+它靠 wangEditor 的 `decorate` 把文本切成叶子再挂样式。这种写法有两类问题编译期完全看不出来：
+
+- 叶子切分 / 样式挂载没生效 → 胶囊根本没渲染出来（看起来"功能没做"）；
+- 装饰破坏了 Slate 的光标偏移计算 → 点击胶囊后光标落点错位、编辑时字符插到别处。
+
+所以必须真实打开编辑器，一边看渲染一边点进去打字。
+
+**用法**（登录步骤同 `verify-pages.cjs`，注意端口要和实际 dev server 一致）：
+
+```bash
+node scripts/login.cjs              # 抓验证码，看图认数字
+node scripts/login.cjs 8944         # 登录
+VERIFY_URL=http://127.0.0.1:5174/ node scripts/verify-editor-marks.cjs
+```
+
+脚本会：打开文档库 → 新增文档（弹出 Word 编辑器）→ 依次插入 3 个占位符与 2 个勾选框 →
+输出编辑区探针（胶囊数量/文案/配色/类型角标）与「占位符检查」面板文案 →
+点进胶囊中部插入一个 `X`，验证字符确实落在占位符内部。
+
+**两个关键断言**：
+
+- `panelText` 显示「N 个填写项」——面板读的就是 `editor.getHtml()` 的序列化结果，
+  能数出填写项即证明**底层仍是 `｛…｝` 纯文本**，保存 / 签署链路的口径没被改动；
+- 点进胶囊后插入 `X` 得到 `｛患者X签名｝`——证明装饰没有破坏光标偏移计算。
+
+截图：`04-editor-marks.png`（整窗）、`04b-editor-marks-zoom.png`（编辑区 4 倍放大，用来核对胶囊细节）、
+`05-editor-marks-caret.png`（插入字符后）。
+
 ## 踩过的坑

 改脚本前先读这段，都是实际踩出来的。