Show detailed grade breakdown in student transcript

src/Jiaowu.Api/Controllers/GradesController.cs

@@ -989,6 +989,18 @@ public sealed class GradesController(
                 CourseCode = x.GradeSheet.TeachingTask.Course!.Code,
                 CourseName = x.GradeSheet.TeachingTask.Course.Name,
                 x.GradeSheet.TeachingTask.Course.Credits,
+                x.RegularScore,
+                x.GradeSheet.RegularWeight,
+                ItemScores = x.ItemScores
+                    .OrderBy(itemScore => itemScore.GradeItem!.SortOrder)
+                    .Select(itemScore => new
+                    {
+                        itemScore.GradeItem!.Name,
+                        itemScore.GradeItem!.Weight,
+                        itemScore.Score
+                    }),
+                x.FinalScore,
+                x.GradeSheet.FinalWeight,
                 x.TotalScore,
                 x.GradePoint,
                 x.ExamStatus,

tests/Jiaowu.Api.Tests/GradesPaginationTests.cs

@@ -311,15 +311,25 @@ public sealed class GradesPaginationTests
         var student = new Student { StudentNumber = "202601001", Name = "学生 1", UserId = userId, AdministrativeClassId = administrativeClass.Id, EnrollmentYear = 2026, EnrollmentDate = new DateOnly(2026, 9, 1) };
         var peer = new Student { StudentNumber = "202601002", Name = "学生 2", AdministrativeClassId = administrativeClass.Id, EnrollmentYear = 2026, EnrollmentDate = new DateOnly(2026, 9, 1) };
         var task = new TeachingTask { TaskNumber = "2026-1-CS101-01", Name = "程序设计基础教学班", AcademicTermId = term.Id, CourseId = course.Id, Capacity = 60, Status = TeachingTaskStatus.Closed };
+        var experiment = new GradeItem { Name = "实验", Weight = 20, SortOrder = 0 };
         var sheet = new GradeSheet
         {
             TeachingTaskId = task.Id,
             Status = GradeSheetStatus.Published,
-            RegularWeight = 40,
-            FinalWeight = 60,
+            RegularWeight = 30,
+            FinalWeight = 50,
+            Items = [experiment],
             Records =
             [
-                new GradeRecord { StudentId = student.Id, TotalScore = 80, GradePoint = 3.0m },
+                new GradeRecord
+                {
+                    StudentId = student.Id,
+                    RegularScore = 70,
+                    FinalScore = 90,
+                    TotalScore = 80,
+                    GradePoint = 3.0m,
+                    ItemScores = [new GradeItemScore { GradeItemId = experiment.Id, Score = 85 }]
+                },
                 new GradeRecord { StudentId = peer.Id, TotalScore = 90, GradePoint = 4.0m }
             ]
         };
@@ -343,6 +353,19 @@ public sealed class GradesPaginationTests
         var firstTerm = Assert.Single(trend);
         Assert.Equal("2026—2027 学年第一学期", firstTerm.GetType().GetProperty("TermName")!.GetValue(firstTerm));
         Assert.Equal(3.0m, firstTerm.GetType().GetProperty("Gpa")!.GetValue(firstTerm));
+
+        var transcriptResult = Assert.IsType<OkObjectResult>(await new GradesController(
+            db,
+            new StudentScope(userId)).GetStudentTranscript(term.Id, CancellationToken.None));
+        var transcriptRecord = Assert.Single(ReadItems(transcriptResult.Value!, "Records"));
+        Assert.Equal(70m, transcriptRecord.GetType().GetProperty("RegularScore")!.GetValue(transcriptRecord));
+        Assert.Equal(30m, transcriptRecord.GetType().GetProperty("RegularWeight")!.GetValue(transcriptRecord));
+        Assert.Equal(90m, transcriptRecord.GetType().GetProperty("FinalScore")!.GetValue(transcriptRecord));
+        Assert.Equal(50m, transcriptRecord.GetType().GetProperty("FinalWeight")!.GetValue(transcriptRecord));
+        var itemScore = Assert.Single(ReadItems(transcriptRecord, "ItemScores"));
+        Assert.Equal("实验", itemScore.GetType().GetProperty("Name")!.GetValue(itemScore));
+        Assert.Equal(20m, itemScore.GetType().GetProperty("Weight")!.GetValue(itemScore));
+        Assert.Equal(85m, itemScore.GetType().GetProperty("Score")!.GetValue(itemScore));
     }
 
     private static int ReadInt(object value, string property) =>

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