fix: 可视化编辑模式去除 doc-edit-page 大内边距

- DocRenderer 移出 .doc-edit-page 容器,使用独立的 .doc-visual-wrap
- 避免 iframe 内部 padding 与外部 padding 叠加导致可视区域过小
This commit is contained in:
zwt13703 2026-07-06 00:43:39 +08:00
parent e247f0db73
commit 027eb32044
1 changed files with 20 additions and 13 deletions

View File

@ -97,7 +97,19 @@
</div> </div>
<div class="center-scroll"> <div class="center-scroll">
<div class="doc-edit-page"> <div v-if="editorMode === 'visual'" class="doc-visual-wrap">
<DocRenderer
ref="docRendererRef"
:key="previewKey"
:html-content="previewHtml"
:blocks="previewBlocks"
initial-mode="select"
@block-select="onBlockSelect"
@block-set-ai="onBlockSetAI"
@block-set-fixed="onBlockSetFixed"
/>
</div>
<div v-else class="doc-edit-page">
<template v-if="editorMode === 'paragraph'"> <template v-if="editorMode === 'paragraph'">
<div v-for="paragraph in paragraphs" :key="paragraph.id" :id="`paraBlock${paragraph.id}`" :class="['para-block', { selected: selectedId === paragraph.id }]" @click="selectPara(paragraph.id)"> <div v-for="paragraph in paragraphs" :key="paragraph.id" :id="`paraBlock${paragraph.id}`" :class="['para-block', { selected: selectedId === paragraph.id }]" @click="selectPara(paragraph.id)">
<span class="para-block-actions" @click.stop> <span class="para-block-actions" @click.stop>
@ -119,18 +131,6 @@
<p v-else class="empty-text">点击左侧配置此段落</p> <p v-else class="empty-text">点击左侧配置此段落</p>
</div> </div>
</template> </template>
<template v-else-if="editorMode === 'visual'">
<DocRenderer
ref="docRendererRef"
:key="previewKey"
:html-content="previewHtml"
:blocks="previewBlocks"
initial-mode="select"
@block-select="onBlockSelect"
@block-set-ai="onBlockSetAI"
@block-set-fixed="onBlockSetFixed"
/>
</template>
<template v-else> <template v-else>
<div <div
v-for="paragraph in paragraphs" v-for="paragraph in paragraphs"
@ -1088,6 +1088,13 @@ onMounted(async () => {
flex-shrink: 0; flex-shrink: 0;
} }
.doc-visual-wrap {
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
}
.para-block { .para-block {
position: relative; position: relative;
padding: 8px; padding: 8px;