diff --git a/src/assets/styles/student-training.scss b/src/assets/styles/student-training.scss index 5e867d1..9bb0e53 100644 --- a/src/assets/styles/student-training.scss +++ b/src/assets/styles/student-training.scss @@ -740,3 +740,129 @@ margin-left: 0 !important; } } + +/* + * 学生端所有步骤底部操作统一为同一视觉与布局契约。 + * 页面可以保留原有的按钮文案和业务处理函数,只需使用任一标准操作容器。 + */ +.student-training-shell .step-actions, +.student-training-shell .step-navigation, +.student-training-shell .footer-actions, +.student-training-shell .training-actions, +.student-training-shell .task-actions, +.student-training-shell .taskfooter { + display: flex !important; + flex-wrap: wrap !important; + align-items: center !important; + justify-content: center !important; + gap: 14px !important; + margin-top: 30px !important; + padding: 0 !important; +} + +.student-training-shell .step-actions > button, +.student-training-shell .step-actions .el-button, +.student-training-shell .step-navigation > button, +.student-training-shell .step-navigation .el-button, +.student-training-shell .footer-actions > button, +.student-training-shell .footer-actions .el-button, +.student-training-shell .training-actions .el-button.training-action, +.student-training-shell .training-actions button.training-action, +.student-training-shell .task-actions > button, +.student-training-shell .taskfooter .el-button { + box-sizing: border-box !important; + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + gap: 8px !important; + min-width: 132px !important; + width: auto !important; + height: 42px !important; + min-height: 42px !important; + margin: 0 !important; + padding: 0 18px !important; + border: 1px solid #2cc9ff !important; + border-radius: var(--student-radius-pill) !important; + color: #dff8ff !important; + background: rgba(8, 87, 121, 0.55) !important; + box-shadow: none !important; + font-size: 15px !important; + font-weight: 800 !important; + line-height: 1 !important; + letter-spacing: 0 !important; +} + +.student-training-shell .step-actions > button:hover:not(:disabled), +.student-training-shell .step-actions .el-button:hover:not(.is-disabled), +.student-training-shell .step-navigation > button:hover:not(:disabled), +.student-training-shell .step-navigation .el-button:hover:not(.is-disabled), +.student-training-shell .footer-actions > button:hover:not(:disabled), +.student-training-shell .footer-actions .el-button:hover:not(.is-disabled), +.student-training-shell .training-actions .el-button.training-action:hover:not(.is-disabled), +.student-training-shell .training-actions button.training-action:hover:not(:disabled), +.student-training-shell .task-actions > button:hover:not(:disabled), +.student-training-shell .taskfooter .el-button:hover:not(.is-disabled) { + border-color: #75e6ff !important; + color: #fff !important; + background: rgba(18, 146, 204, 0.58) !important; + transform: translateY(-1px); +} + +.student-training-shell .step-actions > .btn-primary, +.student-training-shell .step-actions > .primary, +.student-training-shell .step-actions > .action-button.primary, +.student-training-shell .step-actions .step-action--save, +.student-training-shell .step-actions .step-action--next, +.student-training-shell .step-actions .step-action-btn--save, +.student-training-shell .step-actions .step-action-btn--next, +.student-training-shell .step-navigation > .btn-primary, +.student-training-shell .step-navigation > .btn-save, +.student-training-shell .step-navigation > .nav-button--primary, +.student-training-shell .step-navigation > .nav-button--save, +.student-training-shell .footer-actions .el-button--primary, +.student-training-shell .training-actions .training-action--submit, +.student-training-shell .task-actions > .btn-submit, +.student-training-shell .task-actions > .btn-primary, +.student-training-shell .taskfooter .el-button:first-child { + border-color: #36d9ff !important; + color: #fff !important; + background: linear-gradient(110deg, #0eaae4, #0572ac) !important; +} + +.student-training-shell .step-actions > button:disabled, +.student-training-shell .step-actions .el-button.is-disabled, +.student-training-shell .step-navigation > button:disabled, +.student-training-shell .step-navigation .el-button.is-disabled, +.student-training-shell .footer-actions > button:disabled, +.student-training-shell .footer-actions .el-button.is-disabled, +.student-training-shell .training-actions .el-button.is-disabled, +.student-training-shell .task-actions > button:disabled, +.student-training-shell .taskfooter .el-button.is-disabled { + cursor: not-allowed !important; + opacity: .5 !important; + transform: none !important; +} + +@media (max-width: 720px) { + .student-training-shell .step-actions, + .student-training-shell .step-navigation, + .student-training-shell .footer-actions, + .student-training-shell .training-actions, + .student-training-shell .task-actions, + .student-training-shell .taskfooter { + align-items: stretch !important; + } + + .student-training-shell .step-actions > button, + .student-training-shell .step-actions .el-button, + .student-training-shell .step-navigation > button, + .student-training-shell .step-navigation .el-button, + .student-training-shell .footer-actions > button, + .student-training-shell .footer-actions .el-button, + .student-training-shell .training-actions .el-button.training-action, + .student-training-shell .training-actions button.training-action, + .student-training-shell .task-actions > button, + .student-training-shell .taskfooter .el-button { + width: 100% !important; + } +} diff --git a/src/views/components/TrainingTaskToolbar.vue b/src/views/components/TrainingTaskToolbar.vue index 3cfa6d7..7f44839 100644 --- a/src/views/components/TrainingTaskToolbar.vue +++ b/src/views/components/TrainingTaskToolbar.vue @@ -61,11 +61,10 @@ function triggerExistingAction(action) { const labelPriority = { submit: [[/提交任务/], [/完成实训/, /保存并完成/, /校验并完成/]], - reset: [[/重新实训/], [/清空填写/]], + reset: [[/重新实训/], [/清空填写/, /清空本步/]], export: [[/导出实训成果/]], }; - const buttons = Array.from(document.querySelectorAll("button")) - .filter((button) => !button.closest(".training-task-toolbar") && isVisible(button) && !button.disabled); + const buttons = getCurrentTaskActionButtons(); const target = labelPriority[action] .map((matchers) => buttons.find((button) => matchers.some((matcher) => matcher.test(button.innerText || "")))) .find(Boolean); @@ -83,6 +82,18 @@ function triggerExistingAction(action) { ElMessage.warning(messages[action]); } +function getCurrentTaskActionButtons() { + const shell = document.querySelector(".student-training-shell") || document; + const actionAreas = Array.from(shell.querySelectorAll( + ".step-actions, .step-navigation, .footer-actions, .training-actions, .task-actions, .taskfooter, .training-step-area" + )); + const candidates = actionAreas.length + ? actionAreas.flatMap((area) => Array.from(area.querySelectorAll("button"))) + : Array.from(shell.querySelectorAll("button")); + return Array.from(new Set(candidates)) + .filter((button) => !button.closest(".training-task-toolbar") && isVisible(button) && !button.disabled); +} + function isVisible(element) { const style = window.getComputedStyle(element); return style.display !== "none" && style.visibility !== "hidden" && element.getClientRects().length > 0;