fix(signing): 修复长文书滚动布局

This commit is contained in:
yelan
2026-09-22 10:31:08 +08:00
parent b967077873
commit 93fb5fd2c4
3 changed files with 92 additions and 32 deletions
@@ -169,33 +169,37 @@ defineExpose({ getDocumentElement })
</button>
</div>
<!-- 任务接口只返回模板版本哈希,正文由 API 层按哈希补回;
补不到时如实提示并给出占位版式,不退化成"看起来像真文书"的假纸样 -->
<SigningDocumentInteractive
v-if="task.documentContentHtml"
ref="documentRef"
:task="task"
:interactive="allowLocalSigning && task.status !== 'signed' && task.status !== 'void'"
:signature-injections="signatureInjections"
@selection-change="emit('selectionChange', $event)"
@field-change="(answers, progress) => emit('fieldChange', answers, progress)"
@signature-request="emit('signatureRequest', $event)"
/>
<SigningDocumentPreview v-else :task="task" />
<TaskAuditTimeline
v-if="canViewAudit"
:events="auditEvents"
:loading="auditLoading"
:error="auditError"
/>
<SigningArtifactList
v-if="canViewArtifacts"
:artifacts="artifacts"
:loading="artifactsLoading"
:error="artifactsError"
:can-download="canDownloadArtifact"
@download="emit('downloadArtifact', $event)"
/>
<!-- 操作按钮常驻顶部,文书在自己的滚动区里滚:
长文书不再把整页顶下去,左栏与按钮也不会滚出视野 -->
<div class="detail-body">
<!-- 任务接口只返回模板版本哈希,正文由 API 层按哈希补回;
补不到时如实提示并给出占位版式,不退化成"看起来像真文书"的假纸样 -->
<SigningDocumentInteractive
v-if="task.documentContentHtml"
ref="documentRef"
:task="task"
:interactive="allowLocalSigning && task.status !== 'signed' && task.status !== 'void'"
:signature-injections="signatureInjections"
@selection-change="emit('selectionChange', $event)"
@field-change="(answers, progress) => emit('fieldChange', answers, progress)"
@signature-request="emit('signatureRequest', $event)"
/>
<SigningDocumentPreview v-else :task="task" />
<TaskAuditTimeline
v-if="canViewAudit"
:events="auditEvents"
:loading="auditLoading"
:error="auditError"
/>
<SigningArtifactList
v-if="canViewArtifacts"
:artifacts="artifacts"
:loading="artifactsLoading"
:error="artifactsError"
:can-download="canDownloadArtifact"
@download="emit('downloadArtifact', $event)"
/>
</div>
</template>
<div v-else class="detail-empty">
@@ -207,12 +211,25 @@ defineExpose({ getDocumentElement })
<style scoped>
.detail-panel {
display: flex;
flex: 1;
min-width: 0;
min-height: 0;
flex-direction: column;
}
/* 文书 + 留痕 + 产物的滚动区:flex 子项必须 min-height: 0 才肯被压到内容高度以下,
否则它会撑到内容高度,overflow 永远触发不了(与用户权限面板同一处理) */
.detail-body {
flex: 1;
min-height: 0;
padding-right: 3px;
overflow-y: auto;
}
.task-actions {
display: flex;
flex-shrink: 0;
gap: 10px;
align-items: center;
flex-wrap: wrap;
@@ -272,7 +289,8 @@ defineExpose({ getDocumentElement })
.detail-empty {
display: grid;
min-height: 560px;
flex: 1;
min-height: 0;
padding: 40px 24px;
color: var(--mut);
text-align: center;
@@ -296,7 +314,8 @@ defineExpose({ getDocumentElement })
.detail-loading {
display: flex;
min-height: 680px;
flex: 1;
min-height: 0;
flex-direction: column;
gap: 14px;
}
@@ -316,7 +335,7 @@ defineExpose({ getDocumentElement })
.detail-loading__paper {
flex: 1;
min-height: 560px;
min-height: 0;
}
@keyframes skeleton-shimmer {
@@ -329,6 +348,19 @@ defineExpose({ getDocumentElement })
}
}
@media (max-width: 1200px) {
/* 窄屏堆叠后不再锁高度,恢复自然流式布局,由外层滚动 */
.detail-body {
flex: none;
overflow: visible;
}
.detail-empty,
.detail-loading {
min-height: 560px;
}
}
@media (max-width: 700px) {
.task-action-meta {
width: 100%;
@@ -126,12 +126,16 @@ function getVisitClass(type: SigningTaskRecord['visitType']) {
<style scoped>
.task-list-panel {
display: flex;
width: 400px;
min-height: 0;
flex-direction: column;
flex-shrink: 0;
}
.task-list-heading {
display: flex;
flex-shrink: 0;
align-items: center;
padding: 10px 14px;
margin-bottom: 12px;
@@ -150,8 +154,10 @@ function getVisitClass(type: SigningTaskRecord['visitType']) {
font-size: 12px;
}
/* 列表自己滚:高度由工作区剩余空间决定,不再按 100vh 硬算 */
.task-items {
max-height: calc(100vh - 270px);
flex: 1;
min-height: 0;
padding-right: 3px;
overflow-y: auto;
}
@@ -314,6 +320,7 @@ function getVisitClass(type: SigningTaskRecord['visitType']) {
.task-pagination {
display: flex;
flex-shrink: 0;
gap: 8px;
align-items: center;
padding: 9px 10px;
@@ -399,7 +406,9 @@ function getVisitClass(type: SigningTaskRecord['visitType']) {
width: 100%;
}
/* 窄屏堆叠后父级不再锁高度,列表要自己给个上限,否则整页被拉得很长 */
.task-items {
flex: none;
max-height: 420px;
}
}
@@ -918,12 +918,22 @@ onMounted(() => {
</template>
<style scoped>
/* 工作区吃满可视高度:文书在自己的滚动区里滚,页面本身不再滚。
外层 Container 仍是滚动容器,这里只是不去撑高它 */
.signing-page {
display: flex;
width: 100%;
max-width: 1600px;
height: 100%;
min-height: 0;
flex-direction: column;
margin: 0 auto;
}
.signing-page > * {
flex-shrink: 0;
}
.page-intro {
display: flex;
gap: 20px;
@@ -963,8 +973,11 @@ onMounted(() => {
.task-workspace {
display: flex;
flex: 1;
gap: 16px;
align-items: flex-start;
align-items: stretch;
/* 视口过矮时保底:宁可让外层滚动,也不把工作区压到看不见文书 */
min-height: 400px;
}
.task-workspace > * {
@@ -972,8 +985,14 @@ onMounted(() => {
}
@media (max-width: 1200px) {
/* 窄屏两栏改上下堆叠,此时不再锁死高度,交回外层自然滚动 */
.signing-page {
height: auto;
}
.task-workspace {
flex-direction: column;
min-height: 0;
}
.task-workspace > * {