From b15e8212526fd54a00acbe43a2911dd931445dff Mon Sep 17 00:00:00 2001
From: Developer <dev@aurak.local>
Date: Thu, 21 May 2026 15:42:59 +0800
Subject: [PATCH] feat: enriched certificate with template name, dimension
 scores, question details + Modal UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- generateCertificate: return templateName, questionDetails, dimensionScores
- Frontend: replace alert() with certificate Modal showing level, scores, dimensions, questions
- Status label: change from '已验证' to '合格'
---
 server/src/assessment/assessment.service.ts | 15 +++++-
 web/components/views/AssessmentView.tsx     | 60 ++++++++++++++++++++-
 web/utils/translations.ts                   |  6 +--
 3 files changed, 75 insertions(+), 6 deletions(-)

diff --git a/server/src/assessment/assessment.service.ts b/server/src/assessment/assessment.service.ts
index d7396c3..f91e4db 100644
--- a/server/src/assessment/assessment.service.ts
+++ b/server/src/assessment/assessment.service.ts
@@ -1500,6 +1500,13 @@ const initialState: Partial<EvaluationState> = {
     const level = this.determineLevel(session.finalScore || 0);
     const qrCode = `cert://${sessionId}-${Date.now()}`;
 
+    const questionDetails = (session.questions_json || []).map((q: any, i: number) => ({
+      index: i + 1,
+      questionText: q.questionText?.substring(0, 100) || '',
+      questionType: q.questionType || 'SHORT_ANSWER',
+      dimension: q.dimension || '',
+    }));
+
     const certificate = this.certificateRepository.create({
       userId,
       sessionId,
@@ -1512,7 +1519,13 @@ const initialState: Partial<EvaluationState> = {
       passed: (session as any).passed || false,
     });
 
-    return this.certificateRepository.save(certificate);
+    const saved = await this.certificateRepository.save(certificate);
+    return {
+      ...saved,
+      templateName: session.template?.name || session.templateJson?.name || '-',
+      userName: session.user?.displayName || session.user?.username || '',
+      questionDetails,
+    } as any;
   }
 
   private determineLevel(score: number): string {
diff --git a/web/components/views/AssessmentView.tsx b/web/components/views/AssessmentView.tsx
index 4197d76..f3516d9 100644
--- a/web/components/views/AssessmentView.tsx
+++ b/web/components/views/AssessmentView.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
 import {
     Brain,
     Send,
@@ -54,6 +55,8 @@ export const AssessmentView: React.FC<AssessmentViewProps> = ({
     const [timeCheck, setTimeCheck] = useState<{ totalTimeRemaining: number; questionTimeRemaining: number; isTotalTimeout: boolean; isQuestionTimeout: boolean } | null>(null);
     const [selectedChoice, setSelectedChoice] = useState<string | null>(null);
     const [autoSubmitted, setAutoSubmitted] = useState(false);
+    const [showCertModal, setShowCertModal] = useState(false);
+    const [certData, setCertData] = useState<any>(null);
     const isTimedOut = timeCheck?.isTotalTimeout || timeCheck?.isQuestionTimeout;
 
     const messagesEndRef = useRef<HTMLDivElement>(null);
@@ -640,7 +643,7 @@ export const AssessmentView: React.FC<AssessmentViewProps> = ({
                                     })}
                                 </div>
                                 <button
-                                    onClick={handleSubmitAnswer}
+                                    onClick={() => handleSubmitAnswer()}
                                     disabled={!selectedChoice || isLoading || isTimedOut}
                                     className={cn(
                                         "w-full mt-3 h-14 flex items-center justify-center gap-2 rounded-2xl transition-all shadow-lg text-white font-bold",
@@ -965,7 +968,8 @@ export const AssessmentView: React.FC<AssessmentViewProps> = ({
                                         if (!session) return;
                                         try {
                                             const cert = await assessmentService.getCertificate(session.id);
-                                            alert(`${t('certificate')}: ${cert.level}\n${t('totalScore')}: ${cert.totalScore}\n${t('passed')}: ${cert.passed ? t('yes') : t('no')}`);
+                                            setCertData(cert);
+                                            setShowCertModal(true);
                                         } catch (err) {
                                             console.error('Failed to get certificate:', err);
                                         }
@@ -986,6 +990,58 @@ export const AssessmentView: React.FC<AssessmentViewProps> = ({
         <div className="flex flex-col h-full bg-white animate-in flex-1">
             {renderHeader()}
 
+            {showCertModal && certData && createPortal(
+                <div className="fixed inset-0 z-[1000] flex items-center justify-center p-4">
+                    <div className="absolute inset-0 bg-slate-900/40 backdrop-blur-sm" onClick={() => setShowCertModal(false)} />
+                    <div className="relative bg-white rounded-3xl shadow-2xl max-w-lg w-full p-8 max-h-[80vh] overflow-y-auto">
+                        <button onClick={() => setShowCertModal(false)} className="absolute top-4 right-4 p-2 text-slate-400 hover:text-slate-600 rounded-xl hover:bg-slate-100">
+                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M5 5L15 15M15 5L5 15" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
+                        </button>
+                        <div className="flex flex-col items-center text-center mb-6">
+                            <Award size={40} className="text-indigo-600 mb-3" />
+                            <h3 className="text-2xl font-black text-slate-900">{certData.level}</h3>
+                            <p className="text-sm text-slate-500 font-medium mt-1">{certData.templateName || '-'}</p>
+                        </div>
+                        <div className="grid grid-cols-2 gap-4 mb-6">
+                            <div className="bg-slate-50 rounded-2xl p-4 text-center">
+                                <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">总分</span>
+                                <p className="text-xl font-black text-slate-900 mt-1">{certData.totalScore}/10</p>
+                            </div>
+                            <div className="bg-slate-50 rounded-2xl p-4 text-center">
+                                <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">结果</span>
+                                <p className={`text-xl font-black mt-1 ${certData.passed ? 'text-emerald-600' : 'text-rose-600'}`}>{certData.passed ? '合格' : '不合格'}</p>
+                            </div>
+                        </div>
+                        {certData.dimensionScores && (
+                            <div className="mb-6">
+                                <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">维度得分</span>
+                                <div className="mt-2 space-y-1.5">
+                                    {Object.entries(certData.dimensionScores).map(([dim, score]: [string, any]) => (
+                                        <div key={dim} className="flex items-center justify-between text-sm">
+                                            <span className="font-medium text-slate-600">{dim}</span>
+                                            <span className="font-black text-slate-900">{score}/10</span>
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        )}
+                        {certData.questionDetails && (
+                            <div>
+                                <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">题目列表</span>
+                                <div className="mt-2 space-y-1">
+                                    {certData.questionDetails.map((qd: any) => (
+                                        <div key={qd.index} className="text-xs text-slate-600 truncate">
+                                            <span className="font-bold text-slate-400">#{qd.index}</span> {qd.questionText}
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </div>,
+                document.body
+            )}
+
             <AnimatePresence mode="wait">
                 {error && (
                     <motion.div
diff --git a/web/utils/translations.ts b/web/utils/translations.ts
index b2b778f..26ad3df 100644
--- a/web/utils/translations.ts
+++ b/web/utils/translations.ts
@@ -819,7 +819,7 @@ export const translations = {
     questionBasis: "出题依据",
     viewBasis: "查看依据",
     hideBasis: "隐藏依据",
-    verified: "已验证",
+    verified: "合格",
     fail: "失败",
     comprehensiveMasteryReport: "综合能力报告",
     newAssessmentSession: "新评测会话",
@@ -1832,7 +1832,7 @@ export const translations = {
     questionBasis: "Question Basis",
     viewBasis: "View Basis",
     hideBasis: "Hide Basis",
-    verified: "Verified",
+    verified: "Qualified",
     fail: "Fail",
     comprehensiveMasteryReport: "Comprehensive Mastery Report",
     newAssessmentSession: "New Assessment Session",
@@ -2847,7 +2847,7 @@ export const translations = {
     questionBasis: "出題の根拠",
     viewBasis: "根拠を表示",
     hideBasis: "根拠を非表示",
-    verified: "検証済み",
+    verified: "合格",
     fail: "失敗",
     comprehensiveMasteryReport: "包括的習熟度レポート",
     newAssessmentSession: "新しいアセスメントセッション",