feat(exam): 增加试卷结果分页查询接口及前端显示功能

- 新增ExamWordsResultReqVO和ExamWordsResultRspVO用于请求与响应封装 - ExamWordsController新增getExamWordsResult方法支持分页查询试卷结果 - ExamWordsJudgeService接口及实现中添加分页获取试卷结果方法及统计总数 - Mapper层添加分页查询和统计的SQL语句支持 - Vue前端uploadpng页面优化为两列布局，新增结果集表格与分页控件 - 上传功能改用自定义http-request，上传后自动刷新结果列表 - Class页面调整布局增加额外展示内容 - 删除未使用接口ExamWordsJudge接口及相关引用 - 重命名ExamWordsJudge相关类和测试类以统一命名规范
2025-12-14 12:49:53 +08:00
parent 9a11a7c094
commit c1b3c92244
24 changed files with 904 additions and 38 deletions
--- a/enlish-service/src/main/java/com/yinlihupo/enlish/service/controller/ExamWordsController.java
+++ b/enlish-service/src/main/java/com/yinlihupo/enlish/service/controller/ExamWordsController.java
@@ -5,11 +5,17 @@ import com.deepoove.poi.XWPFTemplate;
 import com.deepoove.poi.config.Configure;
 import com.deepoove.poi.plugin.table.LoopRowTableRenderPolicy;
 import com.yinlihupo.enlish.service.domain.dataobject.ExamWordsDO;
+import com.yinlihupo.enlish.service.domain.dataobject.ExamWordsJudgeResultDO;
 import com.yinlihupo.enlish.service.domain.dataobject.VocabularyBankDO;
 import com.yinlihupo.enlish.service.model.bo.Word;
+import com.yinlihupo.enlish.service.model.vo.exam.ExamWordsResultReqVO;
+import com.yinlihupo.enlish.service.model.vo.exam.ExamWordsResultRspVO;
 import com.yinlihupo.enlish.service.model.vo.exam.GenerateExamWordsReqVO;
+import com.yinlihupo.enlish.service.service.ExamWordsJudgeService;
 import com.yinlihupo.enlish.service.service.ExamWordsService;
 import com.yinlihupo.enlish.service.service.VocabularyService;
+import com.yinlihupo.framework.biz.operationlog.aspect.ApiOperationLog;
+import com.yinlihupo.framework.common.response.PageResponse;
 import com.yinlihupo.framework.common.response.Response;
 import jakarta.annotation.Resource;
 import jakarta.servlet.http.HttpServletResponse;
@@ -38,6 +44,8 @@ public class ExamWordsController {
    private VocabularyService vocabularyService;
    @Value("${templates.word}")
    private String templateWordPath;
+    @Resource
+    private ExamWordsJudgeService examWordsJudgeService;

    @PostMapping("genexam")
    public void generateFeltExamWords(@RequestBody GenerateExamWordsReqVO generateExamWordsReqVO, HttpServletResponse response) {
@@ -112,4 +120,26 @@ public class ExamWordsController {
            return Response.fail("保存失败: " + e.getMessage());
        }
    }
+
+    @PostMapping("get")
+    @ApiOperationLog(description = "获取试卷结果集合")
+    PageResponse<ExamWordsResultRspVO> getExamWordsResult(@RequestBody ExamWordsResultReqVO examWordsResultReqVO) {
+        Integer page = examWordsResultReqVO.getPage();
+        Integer size = examWordsResultReqVO.getSize();
+        Integer total = examWordsJudgeService.getExamWordsJudgeResultCount();
+        List<ExamWordsJudgeResultDO> examWordsJudgeResult = examWordsJudgeService.getExamWordsJudgeResult(page, size);
+        List<ExamWordsResultRspVO> list = examWordsJudgeResult.stream().map(examWordsJudgeResultDO -> ExamWordsResultRspVO
+                .builder()
+                .id(examWordsJudgeResultDO.getId())
+                .studentId(examWordsJudgeResultDO.getStudentId())
+                .examWordsId(examWordsJudgeResultDO.getExamWordsId())
+                .startDate(examWordsJudgeResultDO.getStartDate())
+                .correctWordCount(examWordsJudgeResultDO.getCorrectWordCount())
+                .wrongWordCount(examWordsJudgeResultDO.getWrongWordCount())
+                .isFinished(examWordsJudgeResultDO.getIsFinished())
+                .errorMsg(examWordsJudgeResultDO.getErrorMsg())
+                .build()
+        ).toList();
+        return PageResponse.success(list, page, total, size);
+    }
 }
--- a/enlish-service/src/main/java/com/yinlihupo/enlish/service/domain/mapper/ExamWordsJudgeResultDOMapper.java
+++ b/enlish-service/src/main/java/com/yinlihupo/enlish/service/domain/mapper/ExamWordsJudgeResultDOMapper.java
@@ -14,4 +14,8 @@ public interface ExamWordsJudgeResultDOMapper {
    int updateErrorMsg(@Param("id") Integer id, @Param("errorMsg") String errorMsg);

    int updateExamWordsJudgeResultDO(@Param("examWordsJudgeResultDO") ExamWordsJudgeResultDO examWordsJudgeResultDO);
+
+    List<ExamWordsJudgeResultDO> selectByPage(@Param("startIndex") Integer startIndex, @Param("pageSize") Integer pageSize);
+
+    Integer selectCount();
 }
--- a/enlish-service/src/main/java/com/yinlihupo/enlish/service/model/vo/exam/ExamWordsResultReqVO.java
+++ b/enlish-service/src/main/java/com/yinlihupo/enlish/service/model/vo/exam/ExamWordsResultReqVO.java
@@ -0,0 +1,16 @@
+package com.yinlihupo.enlish.service.model.vo.exam;
+
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+@AllArgsConstructor
+@NoArgsConstructor
+@Data
+@Builder
+public class ExamWordsResultReqVO {
+
+    private Integer page;
+    private Integer size;
+}
--- a/enlish-service/src/main/java/com/yinlihupo/enlish/service/model/vo/exam/ExamWordsResultRspVO.java
+++ b/enlish-service/src/main/java/com/yinlihupo/enlish/service/model/vo/exam/ExamWordsResultRspVO.java
@@ -0,0 +1,32 @@
+package com.yinlihupo.enlish.service.model.vo.exam;
+
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+import java.time.LocalDateTime;
+
+@AllArgsConstructor
+@NoArgsConstructor
+@Data
+@Builder
+public class ExamWordsResultRspVO {
+    private Integer id;
+
+    private String ansSheetPath;
+
+    private Integer studentId;
+
+    private Integer examWordsId;
+
+    private Integer correctWordCount;
+
+    private Integer wrongWordCount;
+
+    private Integer isFinished;
+
+    private LocalDateTime startDate;
+
+    private String errorMsg;
+}
--- a/enlish-service/src/main/java/com/yinlihupo/enlish/service/service/ExamWordsJudge.java
+++ b/enlish-service/src/main/java/com/yinlihupo/enlish/service/service/ExamWordsJudge.java
@@ -1,6 +0,0 @@
-package com.yinlihupo.enlish.service.service;
-
-public interface ExamWordsJudge {
-
-    void judgeExamWords(int count);
-}
--- a/enlish-service/src/main/java/com/yinlihupo/enlish/service/service/ExamWordsJudgeService.java
+++ b/enlish-service/src/main/java/com/yinlihupo/enlish/service/service/ExamWordsJudgeService.java
@@ -0,0 +1,14 @@
+package com.yinlihupo.enlish.service.service;
+
+import com.yinlihupo.enlish.service.domain.dataobject.ExamWordsJudgeResultDO;
+
+import java.util.List;
+
+public interface ExamWordsJudgeService {
+
+    void judgeExamWords(int count);
+
+    List<ExamWordsJudgeResultDO> getExamWordsJudgeResult(Integer page, Integer pageSize);
+
+    Integer getExamWordsJudgeResultCount();
+}
--- a/enlish-service/src/main/java/com/yinlihupo/enlish/service/service/judge/ExamWordsJudgeServiceImpl.java
+++ b/enlish-service/src/main/java/com/yinlihupo/enlish/service/service/judge/ExamWordsJudgeServiceImpl.java
@@ -10,7 +10,7 @@ import com.yinlihupo.enlish.service.domain.mapper.StudentExamWordsDOMapper;
 import com.yinlihupo.enlish.service.domain.mapper.WordMasteryLogDOMapper;
 import com.yinlihupo.enlish.service.model.bo.CoordinatesXY;
 import com.yinlihupo.enlish.service.model.bo.StudentExamId;
-import com.yinlihupo.enlish.service.service.ExamWordsJudge;
+import com.yinlihupo.enlish.service.service.ExamWordsJudgeService;
 import com.yinlihupo.enlish.service.utils.PngUtil;
 import jakarta.annotation.Resource;
 import lombok.extern.slf4j.Slf4j;
@@ -25,7 +25,7 @@ import java.util.List;

@Service
@Slf4j
-public class ExamWordsJudgeImpl implements ExamWordsJudge {
+public class ExamWordsJudgeServiceImpl implements ExamWordsJudgeService {


    @Resource
@@ -129,4 +129,14 @@ public class ExamWordsJudgeImpl implements ExamWordsJudge {
            }
        }
    }
+
+    @Override
+    public List<ExamWordsJudgeResultDO> getExamWordsJudgeResult(Integer page, Integer pageSize) {
+        return examWordsJudgeResultDOMapper.selectByPage((page - 1) * pageSize, pageSize);
+    }
+
+    @Override
+    public Integer getExamWordsJudgeResultCount() {
+        return examWordsJudgeResultDOMapper.selectCount();
+    }
 }
--- a/enlish-service/src/main/resources/mapper/ExamWordsJudgeResultDOMapper.xml
+++ b/enlish-service/src/main/resources/mapper/ExamWordsJudgeResultDOMapper.xml
@@ -50,5 +50,16 @@
        where id = #{examWordsJudgeResultDO.id}
    </update>

+    <select id="selectByPage" resultMap="BaseResultMap">
+        select *
+        from exam_words_judge_result
+        order by start_date
+        limit #{startIndex}, #{pageSize}
+    </select>
+
+    <select id="selectCount" resultType="java.lang.Integer">
+        select count(1)
+        from exam_words_judge_result
+    </select>

 </mapper>
--- a/enlish-service/src/test/java/com/yinlihupo/enlish/service/service/exam/ExamWordsJudgeServiceTest.java
+++ b/enlish-service/src/test/java/com/yinlihupo/enlish/service/service/exam/ExamWordsJudgeServiceTest.java
@@ -0,0 +1,30 @@
+package com.yinlihupo.enlish.service.service.exam;
+
+import com.yinlihupo.enlish.service.domain.dataobject.ExamWordsJudgeResultDO;
+import com.yinlihupo.enlish.service.service.ExamWordsJudgeService;
+import jakarta.annotation.Resource;
+import lombok.extern.slf4j.Slf4j;
+import org.junit.jupiter.api.Test;
+import org.springframework.boot.test.context.SpringBootTest;
+
+import java.util.List;
+
+@SpringBootTest
+@Slf4j
+public class ExamWordsJudgeServiceTest {
+
+
+    @Resource
+    private ExamWordsJudgeService examWordsJudgeService;
+
+    @Test
+    public void judgeExamWords() {
+        examWordsJudgeService.judgeExamWords(1);
+    }
+
+    @Test
+    public void selectExamWordsJudgeResult() {
+        List<ExamWordsJudgeResultDO> examWordsJudgeResult = examWordsJudgeService.getExamWordsJudgeResult(1, 10);
+        log.info("examWordsJudgeResult:{}", examWordsJudgeResult);
+    }
+}
--- a/enlish-service/src/test/java/com/yinlihupo/enlish/service/service/exam/ExamWordsJudgeTest.java
+++ b/enlish-service/src/test/java/com/yinlihupo/enlish/service/service/exam/ExamWordsJudgeTest.java
@@ -1,19 +0,0 @@
-package com.yinlihupo.enlish.service.service.exam;
-
-import com.yinlihupo.enlish.service.service.ExamWordsJudge;
-import jakarta.annotation.Resource;
-import org.junit.jupiter.api.Test;
-import org.springframework.boot.test.context.SpringBootTest;
-
-@SpringBootTest
-public class ExamWordsJudgeTest {
-
-
-    @Resource
-    private ExamWordsJudge examWordsJudge;
-
-    @Test
-    public void judgeExamWords() {
-        examWordsJudge.judgeExamWords(1);
-    }
-}
--- a/enlish-vue/package-lock.json
+++ b/enlish-vue/package-lock.json
@@ -8,8 +8,11 @@
            "name": "enlish-vue",
            "version": "0.0.0",
            "dependencies": {
+                "axios": "^1.13.2",
                "element-plus": "^2.12.0",
                "flowbite": "^1.8.1",
+                "nprogress": "^0.2.0",
+                "pinia": "^3.0.4",
                "vue": "^3.5.24",
                "vue-router": "^4.6.4"
            },
@@ -59,7 +62,6 @@
            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz",
            "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==",
            "license": "MIT",
-            "peer": true,
            "dependencies": {
                "@babel/types": "^7.28.5"
            },
@@ -1082,6 +1084,30 @@
            "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
            "license": "MIT"
        },
+        "node_modules/@vue/devtools-kit": {
+            "version": "7.7.9",
+            "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.9.tgz",
+            "integrity": "sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==",
+            "license": "MIT",
+            "dependencies": {
+                "@vue/devtools-shared": "^7.7.9",
+                "birpc": "^2.3.0",
+                "hookable": "^5.5.3",
+                "mitt": "^3.0.1",
+                "perfect-debounce": "^1.0.0",
+                "speakingurl": "^14.0.1",
+                "superjson": "^2.2.2"
+            }
+        },
+        "node_modules/@vue/devtools-shared": {
+            "version": "7.7.9",
+            "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.9.tgz",
+            "integrity": "sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==",
+            "license": "MIT",
+            "dependencies": {
+                "rfdc": "^1.4.1"
+            }
+        },
        "node_modules/@vue/reactivity": {
            "version": "3.5.25",
            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.25.tgz",
@@ -1280,6 +1306,12 @@
            "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==",
            "license": "MIT"
        },
+        "node_modules/asynckit": {
+            "version": "0.4.0",
+            "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+            "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+            "license": "MIT"
+        },
        "node_modules/autoprefixer": {
            "version": "10.4.22",
            "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.22.tgz",
@@ -1318,6 +1350,17 @@
                "postcss": "^8.1.0"
            }
        },
+        "node_modules/axios": {
+            "version": "1.13.2",
+            "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
+            "integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
+            "license": "MIT",
+            "dependencies": {
+                "follow-redirects": "^1.15.6",
+                "form-data": "^4.0.4",
+                "proxy-from-env": "^1.1.0"
+            }
+        },
        "node_modules/baseline-browser-mapping": {
            "version": "2.9.7",
            "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.7.tgz",
@@ -1341,6 +1384,15 @@
                "url": "https://github.com/sponsors/sindresorhus"
            }
        },
+        "node_modules/birpc": {
+            "version": "2.9.0",
+            "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.9.0.tgz",
+            "integrity": "sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==",
+            "license": "MIT",
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
        "node_modules/braces": {
            "version": "3.0.3",
            "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
@@ -1389,6 +1441,19 @@
                "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
            }
        },
+        "node_modules/call-bind-apply-helpers": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+            "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+            "license": "MIT",
+            "dependencies": {
+                "es-errors": "^1.3.0",
+                "function-bind": "^1.1.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
        "node_modules/camelcase-css": {
            "version": "2.0.1",
            "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
@@ -1458,6 +1523,18 @@
                "node": ">= 6"
            }
        },
+        "node_modules/combined-stream": {
+            "version": "1.0.8",
+            "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+            "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+            "license": "MIT",
+            "dependencies": {
+                "delayed-stream": "~1.0.0"
+            },
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
        "node_modules/commander": {
            "version": "4.1.1",
            "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -1475,6 +1552,21 @@
            "dev": true,
            "license": "MIT"
        },
+        "node_modules/copy-anything": {
+            "version": "4.0.5",
+            "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-4.0.5.tgz",
+            "integrity": "sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==",
+            "license": "MIT",
+            "dependencies": {
+                "is-what": "^5.2.0"
+            },
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/mesqueeb"
+            }
+        },
        "node_modules/cssesc": {
            "version": "3.0.0",
            "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -1518,6 +1610,15 @@
                }
            }
        },
+        "node_modules/delayed-stream": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+            "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.4.0"
+            }
+        },
        "node_modules/didyoumean": {
            "version": "1.2.2",
            "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -1532,6 +1633,20 @@
            "dev": true,
            "license": "MIT"
        },
+        "node_modules/dunder-proto": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+            "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+            "license": "MIT",
+            "dependencies": {
+                "call-bind-apply-helpers": "^1.0.1",
+                "es-errors": "^1.3.0",
+                "gopd": "^1.2.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
        "node_modules/electron-to-chromium": {
            "version": "1.5.267",
            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.267.tgz",
@@ -1576,6 +1691,51 @@
                "url": "https://github.com/fb55/entities?sponsor=1"
            }
        },
+        "node_modules/es-define-property": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+            "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/es-errors": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+            "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/es-object-atoms": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+            "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+            "license": "MIT",
+            "dependencies": {
+                "es-errors": "^1.3.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/es-set-tostringtag": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+            "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+            "license": "MIT",
+            "dependencies": {
+                "es-errors": "^1.3.0",
+                "get-intrinsic": "^1.2.6",
+                "has-tostringtag": "^1.0.2",
+                "hasown": "^2.0.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
        "node_modules/esbuild": {
            "version": "0.25.12",
            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
@@ -1735,6 +1895,42 @@
                "mini-svg-data-uri": "^1.4.3"
            }
        },
+        "node_modules/follow-redirects": {
+            "version": "1.15.11",
+            "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+            "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
+            "funding": [
+                {
+                    "type": "individual",
+                    "url": "https://github.com/sponsors/RubenVerborgh"
+                }
+            ],
+            "license": "MIT",
+            "engines": {
+                "node": ">=4.0"
+            },
+            "peerDependenciesMeta": {
+                "debug": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/form-data": {
+            "version": "4.0.5",
+            "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
+            "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
+            "license": "MIT",
+            "dependencies": {
+                "asynckit": "^0.4.0",
+                "combined-stream": "^1.0.8",
+                "es-set-tostringtag": "^2.1.0",
+                "hasown": "^2.0.2",
+                "mime-types": "^2.1.12"
+            },
+            "engines": {
+                "node": ">= 6"
+            }
+        },
        "node_modules/fraction.js": {
            "version": "5.3.4",
            "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
@@ -1768,12 +1964,48 @@
            "version": "1.1.2",
            "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
            "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-            "dev": true,
            "license": "MIT",
            "funding": {
                "url": "https://github.com/sponsors/ljharb"
            }
        },
+        "node_modules/get-intrinsic": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+            "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+            "license": "MIT",
+            "dependencies": {
+                "call-bind-apply-helpers": "^1.0.2",
+                "es-define-property": "^1.0.1",
+                "es-errors": "^1.3.0",
+                "es-object-atoms": "^1.1.1",
+                "function-bind": "^1.1.2",
+                "get-proto": "^1.0.1",
+                "gopd": "^1.2.0",
+                "has-symbols": "^1.1.0",
+                "hasown": "^2.0.2",
+                "math-intrinsics": "^1.1.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/get-proto": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+            "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+            "license": "MIT",
+            "dependencies": {
+                "dunder-proto": "^1.0.1",
+                "es-object-atoms": "^1.0.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
        "node_modules/glob-parent": {
            "version": "6.0.2",
            "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -1787,11 +2019,49 @@
                "node": ">=10.13.0"
            }
        },
+        "node_modules/gopd": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+            "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/has-symbols": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+            "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/has-tostringtag": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+            "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+            "license": "MIT",
+            "dependencies": {
+                "has-symbols": "^1.0.3"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
        "node_modules/hasown": {
            "version": "2.0.2",
            "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
            "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-            "dev": true,
            "license": "MIT",
            "dependencies": {
                "function-bind": "^1.1.2"
@@ -1800,6 +2070,12 @@
                "node": ">= 0.4"
            }
        },
+        "node_modules/hookable": {
+            "version": "5.5.3",
+            "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
+            "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
+            "license": "MIT"
+        },
        "node_modules/is-binary-path": {
            "version": "2.1.0",
            "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -1862,6 +2138,18 @@
                "node": ">=0.12.0"
            }
        },
+        "node_modules/is-what": {
+            "version": "5.5.0",
+            "resolved": "https://registry.npmjs.org/is-what/-/is-what-5.5.0.tgz",
+            "integrity": "sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/mesqueeb"
+            }
+        },
        "node_modules/jiti": {
            "version": "1.21.7",
            "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
@@ -1952,6 +2240,15 @@
                "@jridgewell/sourcemap-codec": "^1.5.5"
            }
        },
+        "node_modules/math-intrinsics": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+            "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
        "node_modules/memoize-one": {
            "version": "6.0.0",
            "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
@@ -1995,6 +2292,27 @@
                "url": "https://github.com/sponsors/jonschlinkert"
            }
        },
+        "node_modules/mime-db": {
+            "version": "1.52.0",
+            "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+            "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/mime-types": {
+            "version": "2.1.35",
+            "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+            "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+            "license": "MIT",
+            "dependencies": {
+                "mime-db": "1.52.0"
+            },
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
        "node_modules/mini-svg-data-uri": {
            "version": "1.4.4",
            "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
@@ -2004,6 +2322,12 @@
                "mini-svg-data-uri": "cli.js"
            }
        },
+        "node_modules/mitt": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+            "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+            "license": "MIT"
+        },
        "node_modules/mlly": {
            "version": "1.8.0",
            "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.0.tgz",
@@ -2106,6 +2430,12 @@
            "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==",
            "license": "BSD-3-Clause"
        },
+        "node_modules/nprogress": {
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+            "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==",
+            "license": "MIT"
+        },
        "node_modules/object-assign": {
            "version": "4.1.1",
            "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -2140,6 +2470,12 @@
            "dev": true,
            "license": "MIT"
        },
+        "node_modules/perfect-debounce": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
+            "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
+            "license": "MIT"
+        },
        "node_modules/picocolors": {
            "version": "1.1.1",
            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -2169,6 +2505,36 @@
                "node": ">=0.10.0"
            }
        },
+        "node_modules/pinia": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.4.tgz",
+            "integrity": "sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==",
+            "license": "MIT",
+            "dependencies": {
+                "@vue/devtools-api": "^7.7.7"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/posva"
+            },
+            "peerDependencies": {
+                "typescript": ">=4.5.0",
+                "vue": "^3.5.11"
+            },
+            "peerDependenciesMeta": {
+                "typescript": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/pinia/node_modules/@vue/devtools-api": {
+            "version": "7.7.9",
+            "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.9.tgz",
+            "integrity": "sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==",
+            "license": "MIT",
+            "dependencies": {
+                "@vue/devtools-kit": "^7.7.9"
+            }
+        },
        "node_modules/pirates": {
            "version": "4.0.7",
            "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
@@ -2354,6 +2720,12 @@
            "dev": true,
            "license": "MIT"
        },
+        "node_modules/proxy-from-env": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+            "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+            "license": "MIT"
+        },
        "node_modules/quansync": {
            "version": "0.2.11",
            "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.11.tgz",
@@ -2460,6 +2832,12 @@
                "node": ">=0.10.0"
            }
        },
+        "node_modules/rfdc": {
+            "version": "1.4.1",
+            "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+            "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+            "license": "MIT"
+        },
        "node_modules/rollup": {
            "version": "4.53.3",
            "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.53.3.tgz",
@@ -2542,6 +2920,15 @@
                "node": ">=0.10.0"
            }
        },
+        "node_modules/speakingurl": {
+            "version": "14.0.1",
+            "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz",
+            "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
+            "license": "BSD-3-Clause",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
        "node_modules/strip-literal": {
            "version": "3.1.0",
            "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-3.1.0.tgz",
@@ -2578,6 +2965,18 @@
                "node": ">=16 || 14 >=14.17"
            }
        },
+        "node_modules/superjson": {
+            "version": "2.2.6",
+            "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.6.tgz",
+            "integrity": "sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==",
+            "license": "MIT",
+            "dependencies": {
+                "copy-anything": "^4"
+            },
+            "engines": {
+                "node": ">=16"
+            }
+        },
        "node_modules/supports-preserve-symlinks-flag": {
            "version": "1.0.0",
            "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
--- a/enlish-vue/package.json
+++ b/enlish-vue/package.json
@@ -9,8 +9,11 @@
        "preview": "vite preview"
    },
    "dependencies": {
+        "axios": "^1.13.2",
        "element-plus": "^2.12.0",
        "flowbite": "^1.8.1",
+        "nprogress": "^0.2.0",
+        "pinia": "^3.0.4",
        "vue": "^3.5.24",
        "vue-router": "^4.6.4"
    },
--- a/enlish-vue/src/App.vue
+++ b/enlish-vue/src/App.vue
@@ -1,11 +1,16 @@
-<script setup>

-</script>

 <template>
 	<router-view></router-view>
 </template>

-<style scoped>
+<script setup>

+</script>
+
+<style>
+/* 自定义顶部加载 Loading 颜色 */
+#nprogress .bar {
+	background: #409eff !important;
+}
 </style>
--- a/enlish-vue/src/api/exam.js
+++ b/enlish-vue/src/api/exam.js
@@ -0,0 +1,12 @@
+import axios from "@/axios";
+
+export function uploadExamWordsPng(data) {
+    return axios.post('/exam/words/genexam', data)
+}
+
+export function getExamWordsResult(page, size) {
+    return axios.post('/exam/words/get', {
+        page: page,
+        size: size
+    })
+}
--- a/enlish-vue/src/axios.js
+++ b/enlish-vue/src/axios.js
@@ -0,0 +1,10 @@
+import axios from "axios";
+
+// 创建 Axios 实例
+const instance = axios.create({
+    baseURL: "/api", // 你的 API 基础 URL
+    timeout: 7000, // 请求超时时间
+})
+
+// 暴露出去
+export default instance;
--- a/enlish-vue/src/composables/util.js
+++ b/enlish-vue/src/composables/util.js
@@ -0,0 +1,21 @@
+import 'element-plus/es/components/message/style/css'
+import nprogress from "nprogress"
+// 消息提示
+export function showMessage(message = '提示内容', type = 'success', customClass = '') {
+    return ElMessage({
+        type: type,
+        message,
+        customClass,
+    })
+}
+
+// 显示页面加载 Loading
+export function showPageLoading() {
+    nprogress.start()
+}
+
+// 隐藏页面加载 Loading
+export function hidePageLoading() {
+    nprogress.done()
+}
+
--- a/enlish-vue/src/layouts/components/Header.vue
+++ b/enlish-vue/src/layouts/components/Header.vue
@@ -0,0 +1,80 @@
+<template>
+    <header>
+        <nav class="bg-white border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800">
+            <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
+                <a href="#" class="flex items-center">
+                    <img src="https://flowbite.com/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
+                    <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
+                </a>
+                <div class="flex items-center lg:order-2">
+                    <a href="#"
+                        class="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">Log
+                        in</a>
+                    <a href="#"
+                        class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800">Get
+                        started</a>
+                    <button data-collapse-toggle="mobile-menu-2" type="button"
+                        class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+                        aria-controls="mobile-menu-2" aria-expanded="false">
+                        <span class="sr-only">Open main menu</span>
+                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                            <path fill-rule="evenodd"
+                                d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+                                clip-rule="evenodd"></path>
+                        </svg>
+                        <svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <path fill-rule="evenodd"
+                                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                                clip-rule="evenodd"></path>
+                        </svg>
+                    </button>
+                </div>
+                <div class="hidden justify-between items-center w-full lg:flex lg:w-auto lg:order-1" id="mobile-menu-2">
+                    <ul class="flex flex-col mt-4 font-medium lg:flex-row lg:space-x-8 lg:mt-0">
+                        <li>
+                            <a href="#"
+                                class="block py-2 pr-4 pl-3 text-white rounded bg-primary-700 lg:bg-transparent lg:text-primary-700 lg:p-0 dark:text-white"
+                                aria-current="page">Home</a>
+                        </li>
+                        <li>
+                            <router-link
+                                to="/class"
+                                class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">
+                                班级
+                            </router-link>
+                        </li>
+                        <li>
+                            <a href="#"
+                                class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">
+                                Marketplace
+                                </a>
+                        </li>
+                        <li>
+                            <a href="#"
+                                class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">
+                                Features
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#"
+                                class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">
+                                Team
+                            </a>
+                        </li>
+                        <li>
+                            <router-link
+                                to="/uploadpng"
+                                class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">
+                                上传图片
+                            </router-link>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    </header>
+</template>
+
+<script setup>
+</script>
--- a/enlish-vue/src/main.js
+++ b/enlish-vue/src/main.js
@@ -1,8 +1,13 @@
 import '@/assets/main.css'
-import { createApp } from 'vue'
-import App from '@/App.vue'
+import 'nprogress/nprogress.css'
 // 导入路由
 import router from '@/router'
+// 导入全局路由守卫
+import '@/permission'
+
+import { createApp } from 'vue'
+import App from '@/App.vue'
+

 const app = createApp(App)

--- a/enlish-vue/src/pages/class.vue
+++ b/enlish-vue/src/pages/class.vue
@@ -0,0 +1,26 @@
+<template>
+    <div class="common-layout">
+        <el-container>
+            <el-header>
+                <Header></Header>
+            </el-header>
+
+            <el-main>
+                <div class="flex">
+                    <div>
+                        班级
+                    </div>
+
+                    <div>
+                        hellow
+                    </div>
+                </div>
+            </el-main>
+
+        </el-container>
+    </div>
+</template>
+
+<script setup>
+import Header from '@/layouts/components/Header.vue'
+</script>
--- a/enlish-vue/src/pages/index.vue
+++ b/enlish-vue/src/pages/index.vue
@@ -1,4 +1,26 @@
+
 <template>
-    
+    <div class="common-layout">
+        <el-container>
+            <el-header>
+                <Header></Header>
+            </el-header>
+
+            <el-container>
+                <el-aside width="200px">
+                    Aside
+                </el-aside>
+
+                <el-main>
+                    Main
+                </el-main>
+            </el-container>
+
+        </el-container>
+    </div>
 </template>

+<script setup>
+import Header from '@/layouts/components/Header.vue'
+
+</script>
--- a/enlish-vue/src/pages/uploadpng.vue
+++ b/enlish-vue/src/pages/uploadpng.vue
@@ -0,0 +1,113 @@
+<template>
+    <div class="common-layout">
+        <el-container>
+            <el-header>
+                <Header></Header>
+            </el-header>
+
+            <el-main class="p-4">
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+                        <div class="text-lg font-semibold mb-4">上传图片</div>
+                        <el-upload
+                            :show-file-list="false"
+                            :http-request="doUpload"
+                            accept="image/*"
+                        >
+                            <el-button type="primary">选择图片并上传</el-button>
+                        </el-upload>
+                    </div>
+                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+                        <div class="text-lg font-semibold mb-4">结果集</div>
+                        <el-table
+                            :data="list"
+                            border
+                            class="w-full"
+                            v-loading="loading"
+                        >
+                            <el-table-column prop="id" label="ID" width="80" />
+                            <el-table-column prop="studentId" label="学生ID" width="100" />
+                            <el-table-column prop="examWordsId" label="试题ID" width="100" />
+                            <el-table-column prop="correctWordCount" label="正确词数" width="110" />
+                            <el-table-column prop="wrongWordCount" label="错误词数" width="110" />
+                            <el-table-column label="完成状态" width="110">
+                                <template #default="{ row }">
+                                    <el-tag :type="row.isFinished === 1 ? 'success' : 'info'">
+                                        {{ row.isFinished === 1 ? '已完成' : '未完成' }}
+                                    </el-tag>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="startDate" label="开始时间" min-width="160" />
+                            <el-table-column prop="errorMsg" label="错误信息" min-width="160" />
+                        </el-table>
+                        <div class="mt-4 flex justify-end">
+                            <el-pagination
+                                background
+                                layout="prev, pager, next, sizes, total"
+                                :total="totalCount"
+                                :page-size="pageSize"
+                                :current-page="pageNo"
+                                @current-change="handlePageChange"
+                                @size-change="handleSizeChange"
+                            />
+                        </div>
+                    </div>
+                </div>
+            </el-main>
+
+        </el-container>
+    </div>
+</template>
+
+
+<script setup>
+import Header from '@/layouts/components/Header.vue'
+import { ref, onMounted } from 'vue'
+import { uploadExamWordsPng, getExamWordsResult } from '@/api/exam'
+
+const list = ref([])
+const pageNo = ref(1)
+const pageSize = ref(10)
+const totalCount = ref(0)
+const loading = ref(false)
+
+async function fetchList() {
+    loading.value = true
+    try {
+        const res = await getExamWordsResult(pageNo.value, pageSize.value)
+        const d = res.data
+        list.value = Array.isArray(d.data) ? d.data : []
+        totalCount.value = d.totalCount || 0
+        pageNo.value = d.pageNo || pageNo.value
+        pageSize.value = d.pageSize || pageSize.value
+    } finally {
+        loading.value = false
+    }
+}
+
+function handlePageChange(p) {
+    pageNo.value = p
+    fetchList()
+}
+function handleSizeChange(s) {
+    pageSize.value = s
+    pageNo.value = 1
+    fetchList()
+}
+
+async function doUpload(options) {
+    const file = options.file
+    const formData = new FormData()
+    formData.append('file', file)
+    await uploadExamWordsPng(formData)
+    ElMessage.success('上传成功，已开始生成结果')
+    fetchList()
+}
+
+onMounted(() => {
+    fetchList()
+})
+</script>
+
+<style scoped>
+</style>
--- a/enlish-vue/src/permission.js
+++ b/enlish-vue/src/permission.js
@@ -0,0 +1,23 @@
+import router from '@/router/index'
+
+import { showMessage } from '@/composables/util'
+import { showPageLoading, hidePageLoading } from '@/composables/util'
+
+// 全局路由前置守卫
+router.beforeEach((to, from, next) => {
+    console.log('==> 全局路由前置守卫')
+    // 展示页面加载 Loading
+    showPageLoading()
+	next()
+})
+
+// 全局路由后置守卫
+router.afterEach((to, from) => {
+    // 动态设置页面 Title
+    let title = (to.meta.title ? to.meta.title : '') + ' - Weblog'
+    document.title = title
+
+    // 隐藏页面加载 Loading
+    hidePageLoading()
+})
+
--- a/enlish-vue/src/router/index.js
+++ b/enlish-vue/src/router/index.js
@@ -1,4 +1,6 @@
 import Index from '@/pages/index.vue'
+import Uploadpng from '@/pages/uploadpng.vue'
+import Class from '@/pages/class.vue'
 import { createRouter, createWebHashHistory } from 'vue-router'

 // 统一在这里声明所有路由
@@ -7,7 +9,21 @@ const routes = [
        path: '/', // 路由地址
        component: Index, // 对应组件
        meta: { // meta 信息
-            title: 'Weblog 首页' // 页面标题
+            title: '首页' // 页面标题
+        }
+    },
+    {
+        path: '/uploadpng', // 路由地址
+        component: Uploadpng, // 对应组件
+        meta: { // meta 信息
+            title: '上传图片' // 页面标题
+        }
+    },
+    {
+        path: '/class', // 路由地址
+        component: Class, // 对应组件
+        meta: { // meta 信息
+            title: '班级' // 页面标题
        }
    }
 ]
--- a/enlish-vue/vite.config.js
+++ b/enlish-vue/vite.config.js
@@ -22,5 +22,14 @@ export default defineConfig({
 			// 定义一个别名 '@'，该别名对应于当前 JavaScript 模块文件所在目录下的 'src' 目录的绝对文件路径。
 			'@': fileURLToPath(new URL('./src', import.meta.url))
 		}
-	}
+	},
+	server: {
+		proxy: {
+			'/api': {
+				target: 'http://localhost:8080',
+				changeOrigin: true,
+				rewrite: (path) => path.replace(/^\/api/, ''),
+			},
+		}
+	},
 })