style(clinical-web): 调整文档编辑区页边距与占位符对齐

2026-09-14 10:34:21 +08:00
parent c9ea89d819
commit 7478bf04f1
1 changed files with 17 additions and 0 deletions
@@ -117,11 +117,28 @@ onBeforeUnmount(() => {
 }

 .pane-content {
+  /* 编辑区左右页边距，模拟 Word 文档版心：宽屏约 96px，窄窗口自动收窄 */
+  --pane-gutter: clamp(20px, 8%, 96px);
+
  flex: 1;
  min-height: 340px;
  overflow: auto;
 }

+/* WangEditor 默认 [data-slate-editor] 只有 padding: 0 10px，正文会贴着边框；
+   这里补上左右留白，粘贴的 Word 正文才呈现"纸张版心"的观感 */
+.pane-content :deep([data-slate-editor]) {
+  padding: 0 var(--pane-gutter);
+}
+
+/* 占位符绝对定位于 .w-e-text-container（而非编辑区），不跟随上面的 padding，
+   需单独对齐到同一版心，否则空文档时提示文字会贴左边框 */
+.pane-content :deep(.w-e-text-placeholder) {
+  right: var(--pane-gutter);
+  left: var(--pane-gutter);
+  width: auto;
+}
+
 /* 粘贴的 Word 表格：解除绝对列宽、允许单元格换行，
   超出容器时横向滚动而不是被裁切 */
 .pane-content :deep(table) {