|
|
|
|
@ -1,8 +1,23 @@
|
|
|
|
|
<template>
|
|
|
|
|
<!--
|
|
|
|
|
教师端任务评阅右侧预览（脱离 Layout 的独立路由，不渲染顶栏/侧栏）。
|
|
|
|
|
|
|
|
|
|
必须补齐 .studentLayout 与 section.app-main 两级祖先：
|
|
|
|
|
学生端实训页的「新版皮肤」全部以
|
|
|
|
|
#app .studentLayout section.app-main:has(.xxx-page) …
|
|
|
|
|
作为样式门控前缀。本路由没有走 Layout，天然缺少这两级祖先，
|
|
|
|
|
会导致这些新样式集体失配，页面静默退化到全局旧版样式
|
|
|
|
|
（步骤导航变 100% 宽竖排、步骤说明文字重新出现、动作按钮配色不一致）。
|
|
|
|
|
这里只补空壳容器，不引入顶栏、侧栏或 TagsView。
|
|
|
|
|
-->
|
|
|
|
|
<div class="studentLayout student-task-preview-root">
|
|
|
|
|
<section class="app-main">
|
|
|
|
|
<main ref="previewRoot" class="student-task-readonly-preview" @click.capture="guardPreviewInteraction" @keydown.capture="guardPreviewInteraction">
|
|
|
|
|
<component v-if="previewComponent" :is="previewComponent" v-bind="previewProps" />
|
|
|
|
|
<el-empty v-else :description="emptyDescription" :image-size="112" />
|
|
|
|
|
</main>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
@ -126,6 +141,7 @@ function isStepNavigation(element) {
|
|
|
|
|
.student-task-readonly-preview :deep(.workbench-head),
|
|
|
|
|
.student-task-readonly-preview :deep(.workbench-head--actions-only),
|
|
|
|
|
.student-task-readonly-preview :deep(.workbench-actions),
|
|
|
|
|
.student-task-readonly-preview :deep(.task-action-strip),
|
|
|
|
|
.student-task-readonly-preview :deep(.training-task-toolbar),
|
|
|
|
|
.student-task-readonly-preview :deep(.training-legacy-actions),
|
|
|
|
|
.student-task-readonly-preview :deep(.new-product-survey-toolbar),
|
|
|
|
|
@ -232,6 +248,7 @@ function isStepNavigation(element) {
|
|
|
|
|
|
|
|
|
|
/* ===== 6. 步骤内容卡片：保留学生端白卡 + 灰边样式 ===== */
|
|
|
|
|
.student-task-readonly-preview :deep(.step-card),
|
|
|
|
|
.student-task-readonly-preview :deep(.industry-step-card),
|
|
|
|
|
.student-task-readonly-preview :deep(.process-step-card),
|
|
|
|
|
.student-task-readonly-preview :deep(.factor-step-card),
|
|
|
|
|
.student-task-readonly-preview :deep(.step-content > .step-card),
|
|
|
|
|
@ -268,3 +285,49 @@ function isStepNavigation(element) {
|
|
|
|
|
.student-task-readonly-preview :deep(.el-popper),
|
|
|
|
|
.student-task-readonly-preview :deep(.el-overlay) { display: none !important; }
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
非 scoped：补齐 .studentLayout / section.app-main 空壳祖先之后，
|
|
|
|
|
需要压掉布局级背景与内边距；同时复位窄屏媒体查询。
|
|
|
|
|
|
|
|
|
|
选择器统一带 #app + .student-task-preview-root，确保 ID 级特异性高于
|
|
|
|
|
student-training.scss / sidebar.scss 里的
|
|
|
|
|
#app .studentLayout .app-main:has(.student-training-shell) …
|
|
|
|
|
这类规则，避免预览壳被学生端布局背景与内边距污染。
|
|
|
|
|
-->
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
#app .studentLayout.student-task-preview-root {
|
|
|
|
|
min-height: 0 !important;
|
|
|
|
|
background: #ffffff !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#app .studentLayout.student-task-preview-root .app-main,
|
|
|
|
|
#app .studentLayout.student-task-preview-root .app-main:has(.student-training-shell) {
|
|
|
|
|
height: auto !important;
|
|
|
|
|
min-height: 0 !important;
|
|
|
|
|
padding: 0 !important;
|
|
|
|
|
overflow: visible !important;
|
|
|
|
|
background: #ffffff !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
评阅预览的 iframe 宽度约 1000px（左栏 440~520px + 右栏自适应），
|
|
|
|
|
会命中 student-training.scss 的 @media (max-width: 1100px)：
|
|
|
|
|
.student-training-shell .step-indicator { flex-direction: column }
|
|
|
|
|
#app .student-training-shell .step-tab { width: 100% }
|
|
|
|
|
后者带 #app（ID 级特异性），会压过本组件 :deep() 里的宽度覆盖，
|
|
|
|
|
于是预览里的步骤胶囊被撑成整行、只剩第一个可见（横向滚动条）。
|
|
|
|
|
预览需要呈现学生端「桌面端」外观，这里用更高特异性把宽度复位。
|
|
|
|
|
*/
|
|
|
|
|
#app .student-task-preview-root .step-indicator .step-tab,
|
|
|
|
|
#app .student-task-preview-root .step-tabs .step-tab,
|
|
|
|
|
#app .student-task-preview-root .comprehensive-step-strip .step-tab,
|
|
|
|
|
#app .student-task-preview-root .training-intro__steps .step-tab,
|
|
|
|
|
#app .student-task-preview-root .step-indicator .flow-pill,
|
|
|
|
|
#app .student-task-preview-root .flow-steps .flow-pill,
|
|
|
|
|
#app .student-task-preview-root .flow-rail .flow-step,
|
|
|
|
|
#app .student-task-preview-root .training-actions .el-button.training-action,
|
|
|
|
|
#app .student-task-preview-root .training-actions button.training-action {
|
|
|
|
|
width: auto !important;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
