feat(classes): optimize teacher dashboard ui and implement grade management

src/modules/homework/components/homework-assignment-question-error-detail-panel.tsx

@@ -92,59 +92,63 @@ export function HomeworkAssignmentQuestionErrorDetailPanel({
   const errorRate = selected?.errorRate ?? 0
 
   return (
-    <div className="flex h-full flex-col overflow-hidden rounded-md border bg-card">
-      <div className="border-b px-4 py-3">
-        <div className="text-sm font-medium">错题详情</div>
-        {selected ? (
-          <div className="mt-2 flex items-center gap-3">
-            <div className="shrink-0">
-              <ErrorRatePieChart errorRate={errorRate} />
-            </div>
-            <div className="min-w-0 flex-1 grid gap-1 text-xs text-muted-foreground">
-              <div className="flex items-center justify-between">
-                <span>错误人数</span>
-                <span className="tabular-nums text-foreground">{errorCount}</span>
-              </div>
-              <div className="flex items-center justify-between">
-                <span>错误率</span>
-                <span className="tabular-nums text-foreground">{(errorRate * 100).toFixed(1)}%</span>
-              </div>
-              <div className="flex items-center justify-between">
-                <span>统计样本</span>
-                <span className="tabular-nums text-foreground">{gradedSampleCount}</span>
-              </div>
-            </div>
-          </div>
-        ) : (
-          <div className="mt-2 text-xs text-muted-foreground">请选择左侧题目</div>
-        )}
+    <div className="flex h-full flex-col overflow-hidden bg-muted/5">
+      <div className="border-b px-6 py-4 bg-muted/5">
+        <div className="text-sm font-medium">Error Analysis</div>
       </div>
-
-      <div className="flex-1 overflow-hidden">
-        <ScrollArea className="h-full p-4">
-          {!selected ? (
-            <div className="text-sm text-muted-foreground">暂无数据</div>
-          ) : wrongAnswers.length === 0 ? (
-            <div className="text-sm text-muted-foreground">暂无错误答案</div>
-          ) : (
-            <div className="space-y-2">
-              <div className="text-xs text-muted-foreground">错误答案列表（可滚动）</div>
-              <div className="space-y-2">
-                {wrongAnswers.map((item, idx) => (
-                  <div key={`${selected.questionId}-${idx}`} className="rounded-md border bg-muted/20 px-3 py-2">
-                    <div className="flex items-start gap-3">
-                      <div className="w-24 shrink-0 text-xs text-muted-foreground truncate">{item.studentName}</div>
-                      <div className="min-w-0 flex-1 text-sm wrap-break-word whitespace-pre-wrap">
-                        {formatAnswer(item.answerContent, selected)}
-                      </div>
-                    </div>
+      <ScrollArea className="flex-1">
+        <div className="p-6 space-y-6">
+          {selected ? (
+            <>
+              <div className="flex items-center gap-4 p-4 bg-background rounded-lg border shadow-sm">
+                <div className="shrink-0">
+                  <ErrorRatePieChart errorRate={errorRate} />
+                </div>
+                <div className="min-w-0 flex-1 grid gap-1">
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-muted-foreground">Question</span>
+                    <span className="font-medium">Q{selected.questionId.slice(-4)}</span>
                   </div>
-                ))}
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-muted-foreground">Errors</span>
+                    <span className="font-medium text-destructive">
+                      {errorCount} <span className="text-muted-foreground text-xs">/ {gradedSampleCount}</span>
+                    </span>
+                  </div>
+                </div>
               </div>
+
+              <div className="space-y-4">
+                <div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Wrong Answers ({wrongAnswers.length})</div>
+                {wrongAnswers.length === 0 ? (
+                  <div className="text-sm text-muted-foreground italic py-4 text-center bg-background rounded-md border border-dashed">
+                    No wrong answers recorded.
+                  </div>
+                ) : (
+                  <div className="space-y-3">
+                    {wrongAnswers.map((wa, i) => (
+                      <div key={i} className="rounded-md border bg-background p-3 text-sm shadow-sm">
+                        <div className="mb-1 flex items-center justify-between">
+                          <span className="text-xs font-medium text-muted-foreground">Student Answer</span>
+                          <span className="text-xs text-muted-foreground">{wa.count ?? 1} student{(wa.count ?? 1) > 1 ? "s" : ""}</span>
+                        </div>
+                        <div className="font-medium text-destructive break-words">
+                          {formatAnswer(wa.answerContent, selected)}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </>
+          ) : (
+            <div className="flex h-full flex-col items-center justify-center text-center text-muted-foreground py-12">
+              <p>Select a question from the left</p>
+              <p className="text-xs mt-1">to view error analysis</p>
             </div>
           )}
-        </ScrollArea>
-      </div>
+        </div>
+      </ScrollArea>
     </div>
   )
 }