样式优化

web/src/style.css

@@ -1627,6 +1627,76 @@ body {
   --el-button-disabled-bg-color: #e8edf3;
   --el-button-disabled-border-color: #c5d0dc;
 }
+.el-button--primary {
+  --el-button-text-color: #ffffff;
+  --el-button-bg-color: #233876;
+  --el-button-border-color: #233876;
+  --el-button-hover-text-color: #ffffff;
+  --el-button-hover-bg-color: #2f4a98;
+  --el-button-hover-border-color: #2f4a98;
+  --el-button-active-text-color: #ffffff;
+  --el-button-active-bg-color: #152550;
+  --el-button-active-border-color: #152550;
+  --el-button-disabled-text-color: #566577;
+  --el-button-disabled-bg-color: #e8edf3;
+  --el-button-disabled-border-color: #c5d0dc;
+}
+.el-button--success {
+  --el-button-text-color: #ffffff;
+  --el-button-bg-color: #006f66;
+  --el-button-border-color: #006f66;
+  --el-button-hover-text-color: #ffffff;
+  --el-button-hover-bg-color: #008477;
+  --el-button-hover-border-color: #008477;
+  --el-button-active-text-color: #ffffff;
+  --el-button-active-bg-color: #005951;
+  --el-button-active-border-color: #005951;
+  --el-button-disabled-text-color: #566577;
+  --el-button-disabled-bg-color: #e8edf3;
+  --el-button-disabled-border-color: #c5d0dc;
+}
+.el-button--info {
+  --el-button-text-color: #ffffff;
+  --el-button-bg-color: #46566f;
+  --el-button-border-color: #46566f;
+  --el-button-hover-text-color: #ffffff;
+  --el-button-hover-bg-color: #5a6b86;
+  --el-button-hover-border-color: #5a6b86;
+  --el-button-active-text-color: #ffffff;
+  --el-button-active-bg-color: #344157;
+  --el-button-active-border-color: #344157;
+  --el-button-disabled-text-color: #566577;
+  --el-button-disabled-bg-color: #e8edf3;
+  --el-button-disabled-border-color: #c5d0dc;
+}
+.el-button--warning {
+  --el-button-text-color: #ffffff;
+  --el-button-bg-color: #9a5b00;
+  --el-button-border-color: #9a5b00;
+  --el-button-hover-text-color: #ffffff;
+  --el-button-hover-bg-color: #a66100;
+  --el-button-hover-border-color: #a66100;
+  --el-button-active-text-color: #ffffff;
+  --el-button-active-bg-color: #7d4a00;
+  --el-button-active-border-color: #7d4a00;
+  --el-button-disabled-text-color: #566577;
+  --el-button-disabled-bg-color: #e8edf3;
+  --el-button-disabled-border-color: #c5d0dc;
+}
+.el-button--danger {
+  --el-button-text-color: #ffffff;
+  --el-button-bg-color: #b42318;
+  --el-button-border-color: #b42318;
+  --el-button-hover-text-color: #ffffff;
+  --el-button-hover-bg-color: #cb3127;
+  --el-button-hover-border-color: #cb3127;
+  --el-button-active-text-color: #ffffff;
+  --el-button-active-bg-color: #8f1c14;
+  --el-button-active-border-color: #8f1c14;
+  --el-button-disabled-text-color: #566577;
+  --el-button-disabled-bg-color: #e8edf3;
+  --el-button-disabled-border-color: #c5d0dc;
+}
 .el-button--primary { box-shadow: 0 4px 10px rgba(35, 56, 118, .14); }
 .el-button--primary:hover { box-shadow: 0 6px 14px rgba(35, 56, 118, .2); }
 .el-input__wrapper,

web/src/views/ExperimentGradesView.vue

@@ -1035,8 +1035,9 @@ onMounted(async () => {
 .workbench-head span { color: #5d7c89; font: 700 10px/1.3 Consolas, monospace; }
 .workbench-head h3 { margin: 5px 0; color: var(--grade-ink); font-size: 21px; }
 .workbench-head p { margin: 0; color: var(--muted); }
-.workbench-status { display: grid; justify-items: end; align-content: center; gap: 7px; }
-.workbench-status small { color: var(--muted); }
+.workbench-status { display: grid; justify-items: end; align-content: center; gap: 8px; }
+.workbench-status :deep(.el-tag) { font-weight: 700; letter-spacing: .02em; }
+.workbench-status small { color: #43596c; font-size: 12px; font-weight: 600; }
 .workbench-metrics { margin: 0 18px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #d9e4e6; background: #fff; }
 .workbench-metrics div { padding: 12px 16px; display: grid; gap: 3px; border-right: 1px solid #e2e9eb; }
 .workbench-metrics div:last-child { border-right: 0; }