fix: unify student action buttons

bugfix/ai-assessment-evidence-rescore
陈沅 1 month ago
parent d0221f1c67
commit 42ef061661

@ -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;
}
}

@ -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;

Loading…
Cancel
Save