fix: align comprehensive toolbar layout

bugfix/ai-assessment-evidence-rescore
陈沅 1 month ago
parent 2d772a3fc8
commit 2dd597f16f

@ -6,24 +6,20 @@
<h1 class="task-title">{{ page.title }}</h1>
</section>
<TrainingTaskBrief :background="page.background" :goals="page.goals" :requirements="page.requirements" :show-material="false" />
<TrainingTaskBrief :background="page.background" :goals="page.goals" :requirements="page.requirements" :show-toolbar="false" />
<section class="task-card">
<div class="workbench-head workbench-head--actions-only">
<div class="workbench-actions">
<el-button
class="material-download"
:plain="!page.material?.url"
@click="handleMaterialDownload"
>
<el-icon><Download /></el-icon>
{{ page.material?.name || "案例文档" }}
</el-button>
<el-button class="outline-action" @click="exportOutcome">
<el-icon><Download /></el-icon>
导出实训成果
</el-button>
</div>
<div class="workbench-head">
<div>
<p class="workbench-eyebrow">COMPREHENSIVE TRAINING · WORKFLOW</p>
<h2>{{ activeStepName || page.title }}</h2>
</div>
<TrainingTaskToolbar
class="comprehensive-training-toolbar"
:material-name="page.material?.name"
:material-url="page.material?.url"
:on-export="exportOutcome"
/>
</div>
<nav v-if="isComprehensiveTurnNavigation" class="comprehensive-turn-nav" aria-label="实训步骤">
@ -414,12 +410,13 @@
</template>
<script setup>
import { Download, Upload } from "@element-plus/icons-vue";
import { Upload } from "@element-plus/icons-vue";
import { getTrainingTaskByKey } from "@/api/trainingTask";
import { getStudentTrainingAnswer, saveStudentTrainingAnswer, uploadStudentTrainingFile } from "@/api/studentTrainingAnswer";
import { getStudentTrainingPage } from "./studentTrainingPages";
import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue";
import TrainingTaskBrief from "@/views/components/TrainingTaskBrief.vue";
import TrainingTaskToolbar from "@/views/components/TrainingTaskToolbar.vue";
import { isStudentDemo } from "@/utils/studentDemo";
const route = useRoute();
@ -1536,24 +1533,6 @@ function submitTask() {
return saveAnswer("SUBMIT");
}
function handleMaterialDownload() {
const material = page.value.material;
if (!material?.url) {
proxy?.$modal?.msgWarning?.("暂无案例文档");
return;
}
const link = document.createElement("a");
link.href = material.url;
link.target = "_blank";
link.rel = "noopener";
if (material.name) {
link.download = material.name;
}
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
async function resetTraining() {
form.value = buildInitialForm();
workRows.value = buildInitialRows();
@ -1755,6 +1734,7 @@ function exportOutcome() {
padding-bottom: 18px;
border-bottom: 1px solid rgba(0, 180, 255, 0.2);
h2,
h3 {
margin: 4px 0 8px;
color: #ffffff;
@ -1772,6 +1752,21 @@ function exportOutcome() {
}
}
.workbench-eyebrow {
margin: 0 0 6px !important;
color: #59dcff !important;
font-size: 12px !important;
font-weight: 800 !important;
letter-spacing: 0.1em;
line-height: 1.4 !important;
}
.comprehensive-training-toolbar {
flex: 0 0 auto;
max-width: 100%;
justify-content: flex-end;
}
.workbench-actions {
display: flex;
flex: 0 0 auto;
@ -2540,6 +2535,11 @@ function exportOutcome() {
flex-direction: column;
}
.comprehensive-training-toolbar {
width: 100%;
justify-content: flex-start;
}
.form-grid {
grid-template-columns: 1fr;
}
@ -2643,13 +2643,6 @@ function exportOutcome() {
}
.workbench-head--actions-only {
justify-content: flex-end;
margin-bottom: 18px;
padding-bottom: 0;
border-bottom: 0;
}
.comprehensive-step-card {
margin-top: 32px;
padding: 22px;

Loading…
Cancel
Save