Show detailed grade breakdown in student transcript

web/src/views/GradesView.vue

@@ -462,6 +462,23 @@ function isFailingScore(score: number | string | null | undefined) {
   return score != null && score !== '' && Number(score) < 60
 }
 
+function transcriptComponents(record: any) {
+  return [
+    { name: '平时分', weight: record.regularWeight, score: record.regularScore },
+    ...(record.itemScores ?? []).map((item: any) => ({
+      name: item.name,
+      weight: item.weight,
+      score: item.score,
+    })),
+    { name: '期末分', weight: record.finalWeight, score: record.finalScore },
+  ].filter((item) => Number(item.weight) > 0)
+}
+
+function formatScore(score: number | string | null | undefined) {
+  if (score == null || score === '') return '—'
+  return Number(score).toFixed(1).replace(/\.0$/, '')
+}
+
 function itemScore(record: any, gradeItemId: string) {
   return record.itemScores?.find((itemScore: any) => itemScore.gradeItemId === gradeItemId)
 }
@@ -563,6 +580,27 @@ onMounted(async () => {
             <small>绩点 {{ record.gradePoint ?? '—' }}</small>
             <span class="card-entry">查看成绩分析 <el-icon><ArrowRight /></el-icon></span>
           </div>
+          <section
+            v-if="transcriptComponents(record).length"
+            class="grade-breakdown"
+            :aria-label="`${record.courseName}的成绩构成`"
+          >
+            <div class="grade-breakdown-label">成绩构成</div>
+            <div class="grade-formula">
+              <template v-for="(component, index) in transcriptComponents(record)" :key="`${component.name}-${index}`">
+                <div class="grade-formula-component">
+                  <span class="component-name">{{ component.name }} {{ component.weight }}%</span>
+                  <strong>{{ formatScore(component.score) }} × {{ component.weight }}%</strong>
+                </div>
+                <span v-if="index < transcriptComponents(record).length - 1" class="formula-operator">+</span>
+              </template>
+              <span class="formula-operator equals">=</span>
+              <div class="grade-formula-total">
+                <span>总分</span>
+                <strong>{{ formatScore(record.totalScore) }}</strong>
+              </div>
+            </div>
+          </section>
         </article>
         <el-empty v-if="!transcript.records.length" description="本学期暂无已发布成绩" />
       </section>
@@ -946,6 +984,66 @@ onMounted(async () => {
 .transcript-course-card:hover { transform: translateY(-2px); border-color: #91a8c8; box-shadow: 0 10px 24px rgb(31 66 112 / 9%); }
 .transcript-course-card:focus-visible { outline: 2px solid #315a9b; outline-offset: 3px; }
 .card-entry { display: inline-flex !important; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 8px; color: #315a9b !important; font-size: 10px !important; font-weight: 700; }
+.grade-breakdown {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: 70px minmax(0, 1fr);
+  gap: 16px;
+  padding-top: 15px;
+  border-top: 1px solid #e7ebf1;
+}
+.grade-breakdown-label {
+  padding-top: 5px;
+  color: #657386;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: .08em;
+}
+.grade-formula {
+  display: flex;
+  align-items: stretch;
+  gap: 8px;
+  min-width: 0;
+  overflow-x: auto;
+  padding-bottom: 2px;
+}
+.grade-formula-component {
+  flex: 0 0 auto;
+  min-width: 132px;
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  background: linear-gradient(#f7f9fc 50%, #fff 50%);
+  box-shadow: inset 0 1px #d9e1eb, inset 0 -1px #d9e1eb;
+}
+.component-name {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px 10px 5px;
+  color: #405875;
+  border-bottom: 1px solid #d9e1eb;
+  font-size: 11px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+.grade-formula-component strong, .grade-formula-total strong {
+  color: #233d68;
+  font: 700 14px/1.25 Consolas, "Courier New", monospace;
+  white-space: nowrap;
+}
+.grade-formula-component strong { display: flex; align-items: center; justify-content: center; padding: 6px 10px; }
+.formula-operator { flex: 0 0 26px; align-self: center; color: #8190a3; font: 400 20px/1 Georgia, serif; text-align: center; }
+.formula-operator.equals { color: #315a9b; }
+.grade-formula-total {
+  flex: 0 0 auto;
+  min-width: 88px;
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  background: #eaf5f3;
+  box-shadow: inset 0 1px #9fcfc7, inset 0 -1px #9fcfc7;
+}
+.grade-formula-total span { display: flex; align-items: center; justify-content: center; padding: 6px 10px 5px; color: #176b70; border-bottom: 1px solid #9fcfc7; font-size: 11px; font-weight: 700; }
+.grade-formula-total strong { display: flex; align-items: center; justify-content: center; padding: 6px 10px; color: #176b70; font-size: 19px; }
 
 /* Preview total score */
 .total-score.preview {
@@ -980,6 +1078,8 @@ onMounted(async () => {
 .grade-record-toolbar > span { margin-left: auto; color: var(--muted); font-size: 11px; }
 .grade-record-pagination { justify-content: flex-end; padding: 14px 16px; border-top: 1px solid var(--line); }
 @media (max-width: 760px) {
+  .grade-breakdown { grid-template-columns: 1fr; gap: 7px; }
+  .grade-breakdown-label { padding-top: 0; }
   .grade-record-toolbar > span { width: 100%; margin-left: 0; }
   .grade-record-pagination { justify-content: center; }
   .experiment-import { width: 100%; padding-right: 0; padding-bottom: 8px; border-right: 0; border-bottom: 1px solid var(--line); }