fix(signing): 修复长文书滚动布局
This commit is contained in:
@@ -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 > * {
|
||||
|
||||
Reference in New Issue
Block a user