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,6 +169,9 @@ defineExpose({ getDocumentElement })
</button> </button>
</div> </div>
<!-- 操作按钮常驻顶部,文书在自己的滚动区里滚:
长文书不再把整页顶下去,左栏与按钮也不会滚出视野 -->
<div class="detail-body">
<!-- 任务接口只返回模板版本哈希,正文由 API 层按哈希补回; <!-- 任务接口只返回模板版本哈希,正文由 API 层按哈希补回;
补不到时如实提示并给出占位版式,不退化成"看起来像真文书"的假纸样 --> 补不到时如实提示并给出占位版式,不退化成"看起来像真文书"的假纸样 -->
<SigningDocumentInteractive <SigningDocumentInteractive
@@ -196,6 +199,7 @@ defineExpose({ getDocumentElement })
:can-download="canDownloadArtifact" :can-download="canDownloadArtifact"
@download="emit('downloadArtifact', $event)" @download="emit('downloadArtifact', $event)"
/> />
</div>
</template> </template>
<div v-else class="detail-empty"> <div v-else class="detail-empty">
@@ -207,12 +211,25 @@ defineExpose({ getDocumentElement })
<style scoped> <style scoped>
.detail-panel { .detail-panel {
display: flex;
flex: 1; flex: 1;
min-width: 0; 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 { .task-actions {
display: flex; display: flex;
flex-shrink: 0;
gap: 10px; gap: 10px;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
@@ -272,7 +289,8 @@ defineExpose({ getDocumentElement })
.detail-empty { .detail-empty {
display: grid; display: grid;
min-height: 560px; flex: 1;
min-height: 0;
padding: 40px 24px; padding: 40px 24px;
color: var(--mut); color: var(--mut);
text-align: center; text-align: center;
@@ -296,7 +314,8 @@ defineExpose({ getDocumentElement })
.detail-loading { .detail-loading {
display: flex; display: flex;
min-height: 680px; flex: 1;
min-height: 0;
flex-direction: column; flex-direction: column;
gap: 14px; gap: 14px;
} }
@@ -316,7 +335,7 @@ defineExpose({ getDocumentElement })
.detail-loading__paper { .detail-loading__paper {
flex: 1; flex: 1;
min-height: 560px; min-height: 0;
} }
@keyframes skeleton-shimmer { @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) { @media (max-width: 700px) {
.task-action-meta { .task-action-meta {
width: 100%; width: 100%;
@@ -126,12 +126,16 @@ function getVisitClass(type: SigningTaskRecord['visitType']) {
<style scoped> <style scoped>
.task-list-panel { .task-list-panel {
display: flex;
width: 400px; width: 400px;
min-height: 0;
flex-direction: column;
flex-shrink: 0; flex-shrink: 0;
} }
.task-list-heading { .task-list-heading {
display: flex; display: flex;
flex-shrink: 0;
align-items: center; align-items: center;
padding: 10px 14px; padding: 10px 14px;
margin-bottom: 12px; margin-bottom: 12px;
@@ -150,8 +154,10 @@ function getVisitClass(type: SigningTaskRecord['visitType']) {
font-size: 12px; font-size: 12px;
} }
/* 列表自己滚:高度由工作区剩余空间决定,不再按 100vh 硬算 */
.task-items { .task-items {
max-height: calc(100vh - 270px); flex: 1;
min-height: 0;
padding-right: 3px; padding-right: 3px;
overflow-y: auto; overflow-y: auto;
} }
@@ -314,6 +320,7 @@ function getVisitClass(type: SigningTaskRecord['visitType']) {
.task-pagination { .task-pagination {
display: flex; display: flex;
flex-shrink: 0;
gap: 8px; gap: 8px;
align-items: center; align-items: center;
padding: 9px 10px; padding: 9px 10px;
@@ -399,7 +406,9 @@ function getVisitClass(type: SigningTaskRecord['visitType']) {
width: 100%; width: 100%;
} }
/* 窄屏堆叠后父级不再锁高度,列表要自己给个上限,否则整页被拉得很长 */
.task-items { .task-items {
flex: none;
max-height: 420px; max-height: 420px;
} }
} }
@@ -918,12 +918,22 @@ onMounted(() => {
</template> </template>
<style scoped> <style scoped>
/* 工作区吃满可视高度:文书在自己的滚动区里滚,页面本身不再滚。
外层 Container 仍是滚动容器,这里只是不去撑高它 */
.signing-page { .signing-page {
display: flex;
width: 100%; width: 100%;
max-width: 1600px; max-width: 1600px;
height: 100%;
min-height: 0;
flex-direction: column;
margin: 0 auto; margin: 0 auto;
} }
.signing-page > * {
flex-shrink: 0;
}
.page-intro { .page-intro {
display: flex; display: flex;
gap: 20px; gap: 20px;
@@ -963,8 +973,11 @@ onMounted(() => {
.task-workspace { .task-workspace {
display: flex; display: flex;
flex: 1;
gap: 16px; gap: 16px;
align-items: flex-start; align-items: stretch;
/* 视口过矮时保底:宁可让外层滚动,也不把工作区压到看不见文书 */
min-height: 400px;
} }
.task-workspace > * { .task-workspace > * {
@@ -972,8 +985,14 @@ onMounted(() => {
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
/* 窄屏两栏改上下堆叠,此时不再锁死高度,交回外层自然滚动 */
.signing-page {
height: auto;
}
.task-workspace { .task-workspace {
flex-direction: column; flex-direction: column;
min-height: 0;
} }
.task-workspace > * { .task-workspace > * {