序号	任务名称	任务说明	工作内容
{{ row.no }}	{{ row.taskName }}	{{ row.description }}	</td> </tr> </tbody> </table> </div> <p class="upload-tip">{{ page.processUploadTip }}</p> <div class="upload-action"> <input ref="uploadInputRef" class="hidden-file-input" type="file" accept="image/*,.xlsx,.xls,.pdf" @change="handleProcessFileChange" /> <button type="button" class="upload-btn" :disabled="uploading" @click="triggerUpload"> <el-icon><Upload /></el-icon> {{ uploading ? "上传中..." : "上传产品开发全流程甘特图" }} </button> <span v-if="form.ganttFileName" class="upload-file-name">{{ form.ganttFileName }}</span> </div> </div> <div v-else-if="page.flow?.length" class="flow-rail"> <div v-for="(item, index) in page.flow" :key="item" class="flow-step"> <span>{{ String(index + 1).padStart(2, "0") }}</span> <strong>{{ item }}</strong> </div> </div> <div v-if="page.keyPoints?.length" class="key-point-grid"> <article v-for="item in page.keyPoints" :key="item" class="key-point-card"> {{ item }} </article> </div> </section> <el-form v-if="!processRows.length" class="training-form" label-position="top"> <div class="form-grid"> <el-form-item v-for="field in page.fields" :key="field.key" :label="field.label"> <el-input v-if="field.type === 'textarea'" v-model="form[field.key]" type="textarea" :autosize="{ minRows: 4, maxRows: 8 }" :placeholder="field.placeholder" /> <el-input v-else v-model="form[field.key]" :placeholder="field.placeholder" /> </el-form-item> </div> </el-form> <div v-if="!processRows.length && workRows.length" class="table-panel"> <div class="panel-title"> <h4>{{ page.tableTitle \|\| "实训工作表" }}</h4> <p>请结合自己的产品对象，在每一项后填写分析内容，形成可提交的实训成果。</p> </div> <el-table :data="workRows" border class="training-table"> <el-table-column label="项目" prop="name" width="190" /> <el-table-column label="说明" prop="description" min-width="280" /> <el-table-column label="学生填写" min-width="360"> <template #default="{ row }"> <el-input v-model="row.answer" type="textarea" :autosize="{ minRows: 3, maxRows: 6 }" placeholder="填写本项分析内容" /> </template> </el-table-column> </el-table> </div> <div class="training-actions"> <el-button class="training-action training-action--save" :loading="saving" @click="saveCurrentProgress">保存当前进度</el-button> <el-button class="training-action training-action--submit" :loading="saving" @click="submitTask">提交任务</el-button> <el-button class="training-action training-action--reset" @click="resetTraining">重新实训</el-button> </div> </main> <TrainingAiSidebar :study-tip="`当前任务建议：围绕“${page.title}”先明确产品对象，再按任务流程逐步补全分析内容。`" :progress-items="progressItems" /> </div> </template> <script setup> import { Aim, Clock, DataAnalysis, Download, 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"; const route = useRoute(); const { proxy } = getCurrentInstance(); const pageKey = computed(() => route.meta?.pageKey \|\| route.params?.pageKey); const remoteTask = ref(null); const page = computed(() => mergeTrainingPage(getStudentTrainingPage(pageKey.value), remoteTask.value)); const buildInitialForm = () => Object.fromEntries((page.value.fields \|\| []).map((field) => [field.key, ""])); const buildInitialRows = () => (page.value.tableRows \|\| []).map(([name, description]) => ({ name, description, answer: "", })); const buildInitialProcessRows = () => (page.value.processRows \|\| []).map((row) => ({ ...row, workContent: "", })); const form = ref(buildInitialForm()); const workRows = ref(buildInitialRows()); const processRows = ref(buildInitialProcessRows()); const uploadInputRef = ref(null); const saving = ref(false); const uploading = ref(false); const progressItems = computed(() => [ { text: `进行中：${page.value.title}`, status: "doing" }, { text: "待完成：提交实训成果", status: "" }, { text: "可选：导出实训成果", status: "" }, ]); watch( () => pageKey.value, async () => { await loadRemoteTask(); form.value = buildInitialForm(); workRows.value = buildInitialRows(); processRows.value = buildInitialProcessRows(); await loadSavedAnswer(); }, { immediate: true } ); async function loadRemoteTask() { remoteTask.value = null; if (!pageKey.value) return; try { const res = await getTrainingTaskByKey(pageKey.value); remoteTask.value = res?.data \|\| null; } catch (error) { remoteTask.value = null; } } function mergeTrainingPage(basePage, task) { if (!task) { return basePage; } const goals = parseArray(task.objectives); const flow = parseArray(task.steps); const material = normalizeMaterial(task.materialName, task.materialUrl); return { ...basePage, title: task.taskName \|\| basePage.title, knowledge: task.knowledge \|\| basePage.knowledge, background: task.background \|\| basePage.background, goals: goals.length ? goals : basePage.goals, task: basePage.processRows?.length ? basePage.task : task.requirements \|\| basePage.task, flow: flow.length ? flow : basePage.flow, material, }; } function normalizeMaterial(materialName, materialUrl) { const name = String(materialName \|\| "").trim(); const url = String(materialUrl \|\| "").trim(); if (!name \|\| !url \|\| (name === "案例资料.rar" && url === "/file/example.rar")) { return null; } return { name, url }; } function parseArray(value) { if (Array.isArray(value)) { return value.filter(Boolean); } if (!value) { return []; } try { const parsed = JSON.parse(value); return Array.isArray(parsed) ? parsed.filter(Boolean) : []; } catch (error) { return String(value) .split(/[；;\|｜]/) .map((item) => item.trim()) .filter(Boolean); } } function buildOutcome() { return { title: page.value.title, form: form.value, rows: workRows.value, processRows: processRows.value, file: form.value.ganttFileUrl ? { name: form.value.ganttFileName \|\| "", url: form.value.ganttFileUrl, originalFilename: form.value.ganttOriginalFilename \|\| form.value.ganttFileName \|\| "", } : null, }; } function applySavedAnswer(value) { if (!value) return; try { const parsed = JSON.parse(value); if (parsed?.form) { form.value = { ...form.value, ...parsed.form, }; } if (Array.isArray(parsed?.rows) && parsed.rows.length) { workRows.value = buildInitialRows().map((row, index) => ({ ...row, answer: parsed.rows[index]?.answer \|\| "", })); } if (Array.isArray(parsed?.processRows) && parsed.processRows.length) { const savedByNo = parsed.processRows.reduce((map, row) => { if (row?.no != null) { map[row.no] = row; } return map; }, {}); processRows.value = buildInitialProcessRows().map((row, index) => ({ ...row, workContent: savedByNo[row.no]?.workContent \|\| parsed.processRows[index]?.workContent \|\| "", })); } } catch (error) { // Ignore malformed historical answers. } } async function loadSavedAnswer() { if (!pageKey.value) return; try { const res = await getStudentTrainingAnswer(pageKey.value); const answer = res?.data; if (answer?.step1Answer) { applySavedAnswer(answer.step1Answer); } } catch (error) { // Keep the page usable when the answer endpoint is unavailable. } } function buildAnswerPayload(saveAction = "SAVE") { return { step1Answer: JSON.stringify(buildOutcome()), currentStep: 1, submitted: saveAction === "SUBMIT", saveAction, }; } async function saveAnswer(saveAction = "SAVE") { if (!pageKey.value \|\| saving.value) return; saving.value = true; try { await saveStudentTrainingAnswer(pageKey.value, buildAnswerPayload(saveAction)); proxy?.$modal?.msgSuccess(saveAction === "SUBMIT" ? "提交成功" : "已保存"); } catch (error) { proxy?.$modal?.msgError?.(saveAction === "SUBMIT" ? "提交失败" : "保存失败"); } finally { saving.value = false; } } function saveCurrentProgress() { return saveAnswer("SAVE"); } 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(); processRows.value = buildInitialProcessRows(); try { await saveAnswer("RESET"); } catch (error) { // saveAnswer already reports failures. } } function triggerUpload() { uploadInputRef.value?.click(); } async function handleProcessFileChange(event) { const file = event.target.files?.[0]; if (!file) return; const formData = new FormData(); formData.append("file", file); uploading.value = true; try { const res = await uploadStudentTrainingFile(formData); form.value = { ...form.value, ganttFileName: res?.originalFilename \|\| file.name, ganttOriginalFilename: res?.originalFilename \|\| file.name, ganttFileUrl: res?.url \|\| res?.fileName \|\| "", }; proxy?.$modal?.msgSuccess("文件已上传"); } catch (error) { proxy?.$modal?.msgError?.("文件上传失败"); } finally { uploading.value = false; if (event.target) { event.target.value = ""; } } } function exportOutcome() { const blob = new Blob([JSON.stringify(buildOutcome(), null, 2)], { type: "application/json;charset=utf-8" }); const url = URL.createObjectURL(blob); const link = document.createElement("a"); link.href = url; link.download = `${page.value.title}-实训成果.json`; document.body.appendChild(link); link.click(); document.body.removeChild(link); URL.revokeObjectURL(url); proxy?.$modal?.msgSuccess("导出成功"); } </script> <style lang="scss" scoped> .student-training-page { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(720px, 1fr) 340px; gap: 24px; width: 100%; max-width: 100%; min-height: calc(100vh - 106px); margin: 0; padding: 0 0 32px; color: #e8f7ff; background: transparent; } .training-core, .ai-card { border: 1px solid rgba(0, 180, 255, 0.25); background: rgba(8, 18, 28, 0.6); box-shadow: 0 22px 48px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(169, 229, 255, 0.08); backdrop-filter: blur(8px); } .training-core { padding: 28px; border-radius: 36px; } .task-header { margin-bottom: 24px; } .task-badge { display: inline-flex; margin-bottom: 12px; padding: 4px 14px; border: 1px solid rgba(0, 170, 255, 0.5); border-radius: 30px; color: #d6f6ff; background: rgba(0, 170, 255, 0.2); font-size: 12px; font-weight: 700; } .task-title { margin: 0; color: transparent; background: linear-gradient(135deg, #ffffff, #8bcbff); -webkit-background-clip: text; background-clip: text; font-size: 30px; line-height: 1.3; font-weight: 900; } .goal-bg { margin-bottom: 28px; padding: 16px 20px; border: 1px solid #2d5f7e; border-radius: 24px; background: rgba(0, 35, 55, 0.6); p, li { color: #d7ecff; font-size: 14px; line-height: 1.8; } p, ol { margin: 0; } ol { padding-left: 18px; } } .subtitle-icon { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: #b9e2ff; font-weight: 800; } .subtitle-icon--spaced { margin-top: 12px; } .task-card, .training-form, .table-panel { margin-top: 22px; padding: 22px; border: 1px solid rgba(0, 200, 255, 0.2); border-radius: 28px; background: rgba(0, 20, 35, 0.65); } .workbench-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid rgba(0, 180, 255, 0.2); h3 { margin: 4px 0 8px; color: #ffffff; font-size: 26px; font-weight: 800; } p { margin: 0; color: #b8d5e8; line-height: 1.7; } } .workbench-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 10px; } .material-download { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; min-height: 32px; padding: 0 12px; border: 1px solid rgba(97, 219, 255, 0.55); border-radius: 6px; color: #a9ecff; background: rgba(7, 54, 78, 0.72); font-size: 13px; font-weight: 800; line-height: 1.2; text-decoration: none; &:hover { color: #ffffff; border-color: rgba(119, 232, 255, 0.92); background: rgba(10, 82, 116, 0.82); } } .section-eyebrow { margin: 0; color: #71dfff; font-size: 12px; font-weight: 800; } .flow-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 18px; } .process-training { margin-top: 4px; } .process-intro, .upload-tip { margin: 0 0 18px; color: #d7ecff; font-size: 15px; line-height: 1.8; } .process-table-wrap { overflow-x: auto; border: 1px solid rgba(82, 174, 226, 0.45); border-radius: 20px; background: rgba(0, 13, 24, 0.68); } .process-table { width: 100%; min-width: 1080px; border-collapse: collapse; table-layout: fixed; th { padding: 14px 16px; border-right: 1px solid rgba(134, 220, 255, 0.24); color: #effdff; background: linear-gradient(180deg, #0b7fb3, #075c88); font-size: 16px; font-weight: 900; text-align: center; } td { padding: 16px; border-top: 1px solid rgba(87, 159, 200, 0.38); border-right: 1px solid rgba(87, 159, 200, 0.28); vertical-align: middle; } th:last-child, td:last-child { border-right: 0; } } .serial-col { width: 72px; } .name-col { width: 190px; } .desc-col { width: 280px; } .serial-cell, .task-name-cell { color: #eafaff; font-size: 16px; font-weight: 800; text-align: center; } .desc-cell { color: #d1e8f5; font-size: 14px; line-height: 1.75; text-align: center; } .process-textarea { width: 100%; min-height: 112px; padding: 12px 14px; border: 1px solid rgba(84, 177, 230, 0.62); border-radius: 18px; outline: none; resize: vertical; color: #f4fbff; background: rgba(9, 24, 36, 0.94); line-height: 1.65; transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; &::placeholder { color: #6f8da3; } &:focus { border-color: #5fe7ff; background: rgba(10, 31, 46, 0.98); box-shadow: 0 0 0 3px rgba(34, 207, 255, 0.14); } } .upload-tip { margin-top: 26px; margin-bottom: 22px; } .upload-action { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; } .hidden-file-input { display: none; } .upload-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 26px; border: 1px solid rgba(61, 221, 255, 0.9); border-radius: 12px; color: #ffffff; background: linear-gradient(95deg, #10a7d5, #0878af); box-shadow: 0 12px 24px rgba(0, 138, 220, 0.24); font-size: 15px; font-weight: 900; cursor: pointer; } .upload-file-name { color: #9fe8ff; font-size: 13px; font-weight: 700; } .flow-step, .key-point-card { border: 1px solid rgba(75, 184, 232, 0.24); border-radius: 24px; background: rgba(0, 20, 35, 0.65); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } .flow-step { min-height: 86px; padding: 18px 16px; span { display: block; margin-bottom: 8px; color: #69ddff; font-size: 18px; font-weight: 900; } strong { color: #f1fbff; font-size: 15px; line-height: 1.5; } } .key-point-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 18px; } .key-point-card { padding: 14px; color: #dff8ff; font-weight: 800; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .panel-title { margin-bottom: 16px; h4 { margin: 0 0 8px; color: #ffffff; font-size: 18px; } p { margin: 0; color: #b8d5e8; font-size: 14px; line-height: 1.7; } } :deep(.el-form-item__label) { color: #dff5ff; font-weight: 800; } :deep(.el-input__wrapper), :deep(.el-textarea__inner) { border: 1px solid #2d5f7e; border-radius: 20px; box-shadow: none; background: #0f1a24; } :deep(.el-textarea__inner) { padding: 12px 16px; } :deep(.el-input__inner), :deep(.el-textarea__inner) { color: #f2fbff; } :deep(.el-input__inner::placeholder), :deep(.el-textarea__inner::placeholder) { color: #6f8da3; } .training-table { --el-table-border-color: rgba(77, 167, 220, 0.24); --el-table-header-bg-color: rgba(8, 55, 82, 0.98); --el-table-header-text-color: #eaffff; --el-table-row-hover-bg-color: rgba(21, 107, 151, 0.42); --el-table-bg-color: rgba(1, 14, 26, 0.72); --el-table-tr-bg-color: rgba(1, 14, 26, 0.72); --el-table-text-color: #d7f1ff; border-radius: 22px; overflow: hidden; } .training-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 52px; margin-top: 36px; } .training-actions :deep(.training-action) { min-width: 172px; height: 64px; padding: 0 28px; border: 1px solid #2c83aa; border-radius: 6px; color: #dff7ff; background: rgba(13, 64, 88, 0.62); box-shadow: none; font-size: 24px; font-weight: 900; line-height: 1; letter-spacing: 0; text-shadow: none; } .training-actions :deep(.training-action span) { display: inline-flex; align-items: center; color: inherit; font-size: inherit; line-height: 1; } .training-actions :deep(.training-action--submit), .training-actions :deep(.training-action--reset) { border-color: #2c83aa; color: #dff7ff; background: rgba(13, 64, 88, 0.62); } .training-actions :deep(.training-action:hover:not(.is-disabled)) { border-color: #46b5e7; color: #ffffff; background: rgba(18, 85, 116, 0.78); } @media (max-width: 900px) { .student-training-page { grid-template-columns: 1fr; max-width: 980px; margin: 0 auto; } } @media (max-width: 900px) { .workbench-head { flex-direction: column; } .form-grid { grid-template-columns: 1fr; } } </style>

{{ page.title }}

任务实训