Merge pull request #47 from TeamVastsea/feat-show-score

SnowballXueQiu · web-flow · commit 843a777a122b · 2026-01-22T23:57:28.000+08:00
Feat: show score
diff --git a/api/ScoreApi.ts b/api/ScoreApi.ts
@@ -233,7 +233,8 @@ export interface AnswerInfo {
     survey: number;
     user: number;
     answers: Object;
-    score: null | number;
+    full_scores: null | number;
+    user_scores: null | number;
     update_time: string;
     completed: boolean;
 }
diff --git a/app/(root)/backstage/judge/[answerId]/components/questions.tsx b/app/(root)/backstage/judge/[answerId]/components/questions.tsx
@@ -10,7 +10,7 @@ export default function QuestionCard(props: PageQuestionProps) {
             {!props.checkAccess(JSON.stringify(props.question.condition))
                 ? '(隐藏题目, 用户无需作答)'
                 : null}
-            {generateQuestion(props.question, props.value, props.setValue, true)}
+            {generateQuestion(props.question, props.value, props.setValue, true, props.question.answer?.answer)}
             {props.question.answer?.answer &&
                 <Group>
                     <Text>标准答案：{props.question.answer.answer}</Text>
diff --git a/app/(root)/backstage/judge/[answerId]/page.tsx b/app/(root)/backstage/judge/[answerId]/page.tsx
@@ -147,6 +147,25 @@ export default function JudgeSinglePage({ params }: { params: { answerId: number
         <Center>
           <Title>阅卷系统</Title>
         </Center>
+        <Center>
+          <Stack gap="xs">
+            <Text size="sm" c="dimmed">选择题颜色说明:</Text>
+            <Group gap="md" justify="center">
+              <Group gap={5}>
+                <div style={{ width: 16, height: 16, backgroundColor: 'rgba(255, 0, 0, 0.3)', border: '1px solid rgba(255, 0, 0, 0.5)' }} />
+                <Text size="sm">用户选择但错误</Text>
+              </Group>
+              <Group gap={5}>
+                <div style={{ width: 16, height: 16, backgroundColor: 'rgba(0, 0, 255, 0.3)', border: '1px solid rgba(0, 0, 255, 0.5)' }} />
+                <Text size="sm">用户选择且正确</Text>
+              </Group>
+              <Group gap={5}>
+                <div style={{ width: 16, height: 16, backgroundColor: 'rgba(0, 255, 0, 0.3)', border: '1px solid rgba(0, 255, 0, 0.5)' }} />
+                <Text size="sm">用户未选择但正确</Text>
+              </Group>
+            </Group>
+          </Stack>
+        </Center>
         <Center>
           <Alert
             variant="light"
diff --git a/app/(root)/backstage/judge/page.tsx b/app/(root)/backstage/judge/page.tsx
@@ -25,9 +25,40 @@ export default function SurveyPage() {
     const [page, setPage] = useState(0);
     const [maxPage, setMaxPage] = useState(1);
     const [answers, setAnswers] = useState<AnswerInfo[]>([]);
+    const [initialized, setInitialized] = useState(false);
     const router = useRouter();
 
+    // 从localStorage恢复状态
     useEffect(() => {
+        const saved = localStorage.getItem('judgePageState');
+        if (saved) {
+            try {
+                const state = JSON.parse(saved);
+                setSurveySearch(state.surveySearch || '');
+                setUnconfirmedOnly(state.unconfirmedOnly || false);
+                setPage(state.page || 0);
+            } catch (e) {
+                console.error('Failed to parse saved state:', e);
+            }
+        }
+        setInitialized(true);
+    }, []);
+
+    // 保存状态到localStorage
+    useEffect(() => {
+        if (!initialized) return;
+        
+        const state = {
+            surveySearch,
+            unconfirmedOnly,
+            page,
+        };
+        localStorage.setItem('judgePageState', JSON.stringify(state));
+    }, [surveySearch, unconfirmedOnly, page, initialized]);
+
+    useEffect(() => {
+        if (!initialized) return;
+        
         setSurveysLoading(true);
         ScoreApi.searchAnswerList(page,
             10,
@@ -39,7 +70,7 @@ export default function SurveyPage() {
                 setMaxPage(res.total);
                 setAnswers(res.data);
             });
-    }, [surveySearch, unconfirmedOnly, page]);
+    }, [surveySearch, unconfirmedOnly, page, initialized]);
 
     return (
         <Center>
@@ -62,6 +93,7 @@ export default function SurveyPage() {
                                       onChange={setSurveySearch}
                                     />
                                     <Checkbox
+                                      checked={unconfirmedOnly}
                                       onChange={(e) =>
                                           setUnconfirmedOnly(e.currentTarget.checked)}
                                       label="仅显示未确认的问卷"
@@ -79,6 +111,7 @@ export default function SurveyPage() {
                                                     <Table.Th>问卷ID</Table.Th>
                                                     <Table.Th>用户ID</Table.Th>
                                                     <Table.Th>提交时间</Table.Th>
+                                                    <Table.Th>分数</Table.Th>
                                                     <Table.Th>问卷状态</Table.Th>
                                                 </Table.Tr>
                                             </Table.Thead>
@@ -93,6 +126,7 @@ export default function SurveyPage() {
                                                         <Table.Td>{element.survey}</Table.Td>
                                                         <Table.Td>{element.user}</Table.Td>
                                                         <Table.Td>{element.update_time}</Table.Td>
+                                                        <Table.Td>{element.user_scores}/{element.full_scores}</Table.Td>
                                                         <Table.Td>{element.completed ? '已确认' : '待确认'}</Table.Td>
                                                     </Table.Tr>
                                                 ))}
diff --git a/app/(root)/survey/components/MultipleChoice.tsx b/app/(root)/survey/components/MultipleChoice.tsx
@@ -11,9 +11,32 @@ export function MultipleChoice(props: ChoiceProps) {
         // console.log(JSON.stringify(value));
         props.setValue(JSON.stringify(value));
     }
+    
+    const getCardColor = (index: number) => {
+        if (!props.correctAnswer || !props.disabled) return undefined;
+        
+        const userSelectedArray = props.value === undefined || props.value === '' ? [] : JSON.parse(props.value);
+        const correctArray = JSON.parse(props.correctAnswer);
+        
+        const userSelected = userSelectedArray.includes(index.toString());
+        const isCorrect = correctArray.includes(index.toString());
+        
+        if (userSelected && !isCorrect) return 'rgba(255, 0, 0, 0.1)'; // 红色 - 用户选择但错误
+        if (userSelected && isCorrect) return 'rgba(0, 0, 255, 0.1)'; // 蓝色 - 用户选择且正确
+        if (!userSelected && isCorrect) return 'rgba(0, 255, 0, 0.1)'; // 绿色 - 用户未选择但正确
+        
+        return undefined;
+    };
 
     const cards = data.map(({ title, content }, index) => (
-        <Checkbox.Card className={classes.root} radius="md" value={index.toString()} key={index} disabled={props.disabled}>
+        <Checkbox.Card 
+            className={classes.root} 
+            radius="md" 
+            value={index.toString()} 
+            key={index} 
+            disabled={props.disabled}
+            style={{ backgroundColor: getCardColor(index) }}
+        >
             <Group wrap="nowrap" align="flex-start">
                 <Checkbox.Indicator />
                 <div>
diff --git a/app/(root)/survey/components/SingleChoice.tsx b/app/(root)/survey/components/SingleChoice.tsx
@@ -5,9 +5,29 @@ import type { Value } from '@/api/QuestionApi';
 
 export function SingleChoice(props: ChoiceProps) {
     const data = props.choice;
+    
+    const getCardColor = (index: number) => {
+        if (!props.correctAnswer || !props.disabled) return undefined;
+        
+        const userSelected = props.value === index.toString();
+        const isCorrect = props.correctAnswer === index.toString();
+        
+        if (userSelected && !isCorrect) return 'rgba(255, 0, 0, 0.1)'; // 红色 - 用户选择但错误
+        if (userSelected && isCorrect) return 'rgba(0, 0, 255, 0.1)'; // 蓝色 - 用户选择且正确
+        if (!userSelected && isCorrect) return 'rgba(0, 255, 0, 0.1)'; // 绿色 - 用户未选择但正确
+        
+        return undefined;
+    };
 
     const cards = data.map(({ title, content }, index) => (
-        <Radio.Card className={classes.root} radius="md" value={index.toString()} key={index} disabled={props.disabled}>
+        <Radio.Card 
+            className={classes.root} 
+            radius="md" 
+            value={index.toString()} 
+            key={index} 
+            disabled={props.disabled}
+            style={{ backgroundColor: getCardColor(index) }}
+        >
             <Group wrap="nowrap" align="flex-start">
                 <Radio.Indicator />
                 <div>
@@ -34,4 +54,5 @@ export function SingleChoice(props: ChoiceProps) {
 
 export interface ChoiceProps extends InputProps {
     choice: Value[];
+    correctAnswer?: string;
 }
diff --git a/app/(root)/survey/components/generateQuestion.tsx b/app/(root)/survey/components/generateQuestion.tsx
@@ -11,6 +11,7 @@ export function generateQuestion(
     value: string | undefined,
     setValue: (value: string) => void,
     isDisable: boolean = false,
+    correctAnswer?: string,
 ) {
     const titleContent = (
         <Title order={3}>
@@ -42,6 +43,7 @@ export function generateQuestion(
                       value={value}
                       setValue={setValue}
                       disabled={isDisable}
+                      correctAnswer={correctAnswer}
                     />
                 </div>
             );
@@ -55,6 +57,7 @@ export function generateQuestion(
                       value={value}
                       setValue={setValue}
                       disabled={isDisable}
+                      correctAnswer={correctAnswer}
                     />
                 </div>
             );
