简介这是一套基于React、TypeScript与Ant Design开发的AI智能答题应用平台前端源码面向教育类Web应用开发者、前端进阶学习者及在线考试系统构建者解决题库管理、智能组卷、多端适配与考试监考等核心教学场景的工程化落地问题。资源共69个文件以32个Vue组件文件含App.vue、布局与业务视图、20个TypeScript逻辑文件含store状态管理、router路由配置、api请求封装为主干辅以JSON配置、SVG/PNG图标、HTML入口及README.md、说明文件.txt等配套文档整体压缩包仅293KB轻量但结构完整。目前已有44人学习下载适合希望深入理解教育SaaS前端架构、掌握AI驱动型学习应用模块拆解如错题本数据流、成绩分析图表集成、考试行为监控实现逻辑的中高级前端工程师。1. 这不是一个“带AI字样的React练习项目”而是一套可落地的教育类SaaS前端骨架它用TypeScript强约束用户行为流靠Ant Design快速收敛UI一致性把AI能力题库语义检索、组卷策略、错题归因、报告生成封装成可插拔服务层而非炫技式调用大模型API——适合教育科技公司快速搭建考试系统、智能学习平台或校本题库中台也适合作为前端工程师深入理解「业务复杂度如何倒逼架构分层」的实战样本。很多团队拿到类似需求第一反应是堆功能登录页加个头像上传、组卷页塞个拖拽组件、报告页接个ECharts图表。但真实教育场景中用户身份有学生/教师/管理员三级权限题库字段需支持知识点标签、难度系数、题型权重、审核状态、来源归属智能组卷不是随机抽题而是满足「覆盖K个知识点、难度正态分布、题型比例约束、避免重复题干」的多目标优化考试监控要求实时心跳上报异常操作标记如切屏次数、窗口失焦时长且必须与后端审计日志对齐。这些都不是useState能解决的。本平台前端通过TypeScript接口契约提前锁定27个核心实体如IQuestion,IExamPaper,IAnalysisReport用Ant Design的Form.ItemRule机制将校验逻辑下沉到表单层再通过自定义Hook如useExamMonitor把监控逻辑从页面组件解耦——这意味着你改一个QuestionType枚举就能同步影响题库筛选、组卷策略、答题界面渲染和错题分类而不是在5个文件里手动同步字符串。2. 用TypeScript接口契约驱动开发从题库实体到考试监控状态机的全链路类型定义2.1 题库管理模块的类型设计为什么IQuestion必须包含knowledgePoints: string[]和difficulty: 1 | 2 | 3 | 4 | 5题库管理不是CRUD那么简单。当教师创建一道“已知函数f(x)x²-2x1求其最小值”的题目时系统需要自动提取知识点标签如[二次函数, 顶点坐标]并根据题干长度、计算步骤数、是否含参数等维度打难度分。IQuestion接口定义如下export interface IQuestion { id: string; title: string; content: string; type: single-choice | multiple-choice | true-false | fill-blank | essay; options?: string[]; // 仅选择题使用 answer: string | string[]; // 单选存string多选存string[] knowledgePoints: string[]; // 必填用于智能组卷的知识点覆盖约束 difficulty: 1 | 2 | 3 | 4 | 5; // 1简单5难题非number类型强制枚举 source: imported | created-by-teacher | ai-generated; status: draft | reviewing | published | archived; createdAt: string; // ISO 8601格式 updatedAt: string; }提示difficulty用联合类型而非number是因为业务规则明确限定只有1~5级TypeScript编译器会在赋值时拦截question.difficulty 6这类错误knowledgePoints数组不能为空否则组卷算法无法执行知识点覆盖检查因此在表单提交前需校验knowledgePoints.length 0。2.2 智能组卷策略的类型建模IExamConfig如何表达“覆盖3个知识点、难度均值3.2±0.5、单选题占比60%”组卷不是随机抽题而是带约束的优化问题。IExamConfig定义了组卷规则其字段直接映射到后端调度算法的输入参数export interface IExamConfig { examName: string; duration: number; // 考试时长分钟 totalScore: number; // 满分 knowledgeCoverage: string[]; // 必须覆盖的知识点ID列表如[kp-001, kp-002] difficultyTarget: { mean: number; // 目标难度均值如3.2 tolerance: number; // 容差如0.5 → 实际难度区间[2.7, 3.7] }; questionTypeRatio: { single-choice: number; // 占比如0.6 multiple-choice: number; true-false: number; fill-blank: number; essay: number; }; excludeQuestionIds: string[]; // 避免重复出现的历史题ID aiAssisted: boolean; // 是否启用AI辅助启用时后端调用LLM重排题目顺序 }2.2.1 组卷表单的Ant Design实现用Form.Item的rules联动校验Form.Item name{[config, difficultyTarget, mean]} label目标难度均值 rules{[ { required: true, message: 请输入目标难度均值 }, { type: number, min: 1, max: 5, message: 难度值应在1~5之间 } ]} InputNumber min{1} max{5} step{0.1} placeholder如3.2 / /Form.Item Form.Item name{[config, difficultyTarget, tolerance]} label容差 dependencies{[[config, difficultyTarget, mean]]} rules{[ { required: true, message: 请输入容差 }, ({ getFieldValue }) ({ validator(_, value) { const mean getFieldValue([config, difficultyTarget, mean]); if (value mean (mean - value 1 || mean value 5)) { return Promise.reject(new Error(容差设置导致难度区间超出1~5范围)); } return Promise.resolve(); } }) ]} InputNumber min{0.1} max{2} step{0.1} placeholder如0.5 / /Form.Item这段代码的关键在于dependencies和自定义校验器当用户修改“容差”时自动读取“目标难度均值”确保mean - tolerance 1且mean tolerance 5。这种校验无法用简单正则完成必须依赖TypeScript类型推导出的字段路径。2.3 考试监控状态机用ExamMonitorState枚举管理12种运行时状态在线考试的监控不是简单计时而是状态驱动的事件流。用户可能切屏、失焦、打开新标签页、甚至关闭浏览器再重连。前端需维护一个精确的状态机并与后端心跳包同步export enum ExamMonitorState { INIT init, // 初始化 READY ready, // 准备就绪等待开始 RUNNING running, // 正在考试 PAUSED paused, // 用户主动暂停如交卷前检查 ABORTED aborted, // 异常中断网络断开 SUBMITTED submitted, // 已提交 REVIEWING reviewing, // 教师阅卷中 GRADED graded, // 已评分 EXPIRED expired, // 超时自动交卷 SUSPICIOUS suspicious, // 检测到可疑行为如频繁切屏 BLOCKED blocked, // 被监考员强制终止 ARCHIVED archived, // 归档完成 } export interface IExamMonitorContext { state: ExamMonitorState; lastHeartbeat: number; // 上次心跳时间戳 focusLossCount: number; // 窗口失焦次数 screenSwitchCount: number; // 切屏次数 tabSwitchCount: number; // 标签页切换次数 isFullScreen: boolean; // 是否全屏 warningLevel: low | medium | high; // 当前风险等级 }2.3.1 状态机初始化与事件监听useEffect中注册全局事件const useExamMonitor (examId: string) { const [context, setContext] useStateIExamMonitorContext({ state: ExamMonitorState.INIT, lastHeartbeat: Date.now(), focusLossCount: 0, screenSwitchCount: 0, tabSwitchCount: 0, isFullScreen: false, warningLevel: low, }); useEffect(() { // 监听窗口失焦 const handleBlur () { setContext(prev ({ ...prev, focusLossCount: prev.focusLossCount 1, warningLevel: prev.focusLossCount 3 ? high : prev.focusLossCount 1 ? medium : low, })); }; // 监听屏幕切换仅Chrome/Firefox支持 const handleVisibilityChange () { if (document.hidden) { setContext(prev ({ ...prev, screenSwitchCount: prev.screenSwitchCount 1, warningLevel: prev.screenSwitchCount 2 ? high : medium, })); } }; // 全屏状态检测 const checkFullScreen () { setContext(prev ({ ...prev, isFullScreen: document.fullscreenElement ! null, })); }; window.addEventListener(blur, handleBlur); document.addEventListener(visibilitychange, handleVisibilityChange); document.addEventListener(fullscreenchange, checkFullScreen); return () { window.removeEventListener(blur, handleBlur); document.removeEventListener(visibilitychange, handleVisibilityChange); document.removeEventListener(fullscreenchange, checkFullScreen); }; }, []); // 发送心跳包每15秒 useEffect(() { const interval setInterval(() { if (context.state ExamMonitorState.RUNNING) { sendHeartbeat(examId, context).then(res { if (res.status blocked) { setContext(prev ({ ...prev, state: ExamMonitorState.BLOCKED })); } }); } }, 15000); return () clearInterval(interval); }, [context.state, examId]); return context; };这段代码展示了TypeScript类型如何保障状态流转安全context.state只能是ExamMonitorState枚举值任何非法赋值如context.state hacked都会被TS编译器捕获warningLevel的三档分级直接绑定到具体行为阈值失焦≥3次→high避免魔数散落在各处。3. Ant Design深度定制从主题变量到动态表单让教育类产品UI既专业又可控3.1 主题定制覆盖Ant Design默认色板适配教育场景的蓝白主色调教育类产品忌讳高饱和色彩需传递专业、信任感。Ant Design的theme配置允许我们覆盖所有基础色值// antd-theme.ts import { theme } from antd; export const educationTheme theme.defaultAlgorithm({ colorPrimary: #1890ff, // 主品牌色科技蓝 colorLink: #40a9ff, // 链接色 colorText: #333333, // 主文本色 colorTextSecondary: #666666, // 次要文本色 colorBgContainer: #ffffff, // 容器背景 colorBgLayout: #f5f7fa, // 布局背景浅灰 colorBorder: #d9d9d9, // 边框色 colorFillAlter: #f0f9ff, // 替代填充色如悬停背景 borderRadius: 6, // 圆角统一为6px });然后在App.tsx中注入import { ConfigProvider } from antd; import { educationTheme } from ./antd-theme; function App() { return ( ConfigProvider theme{educationTheme} Router Routes {/* 路由配置 */} /Routes /Router /ConfigProvider ); }注意theme.defaultAlgorithm是Ant Design 5.12推荐的方式替代了旧版modifyVars。它基于CSS变量生成支持暗色模式无缝切换且不会污染全局样式。3.2 动态表单构建用Form.List实现“知识点标签”多行编辑支持拖拽排序题库编辑页需让用户为题目添加多个知识点标签且支持调整顺序因组卷算法按标签顺序优先匹配。Ant Design的Form.List配合DndProvider来自react-dnd可实现import { DndProvider, useDrag, useDrop } from react-dnd; import { HTML5Backend } from react-dnd-html5-backend; // 知识点项组件 const KnowledgePointItem ({ name, index, move }: { name: number; index: number; move: (dragIndex: number, hoverIndex: number) void }) { const [{ isDragging }, drag] useDrag({ type: KNOWLEDGE_POINT, item: { index }, collect: (monitor) ({ isDragging: monitor.isDragging(), }), }); const [, drop] useDrop({ accept: KNOWLEDGE_POINT, hover(item: { index: number }) { if (item.index ! index) { move(item.index, index); } }, collect: (monitor) ({ isOver: monitor.isOver(), }), }); return ( div ref{(node) drag(drop(node))} style{{ opacity: isDragging ? 0.5 : 1 }} Form.Item name{[name, point]} rules{[{ required: true, message: 请输入知识点名称 }]} Input placeholder如二次函数顶点公式 / /Form.Item Button typetext danger icon{DeleteOutlined /} onClick{() remove(name)} / /div ); }; // 表单主体 Form.List nameknowledgePoints {(fields, { add, remove, move }) ( div {fields.map((field) ( KnowledgePointItem key{field.key} name{field.name} index{field.fieldKey as number} move{move} / ))} Button typedashed onClick{() add()} block icon{PlusOutlined /} 添加知识点 /Button /div )} /Form.List这段代码的关键是move函数它由Form.List提供接收拖拽源索引和悬停目标索引内部自动更新Form的字段顺序。无需手动维护数组索引TypeScript类型保证field.name与Form.Item的name属性完全匹配。3.3 多端适配用useBreakpoint响应式控制布局而非媒体查询硬编码教育平台需兼容PC监考端、Pad教师端、手机学生端。Ant Design内置useBreakpointHook返回断点状态比CSS媒体查询更易与业务逻辑耦合import { useBreakpoint } from antd; const ExamPage () { const screens useBreakpoint(); return ( div {screens.xl ? ( // PC端三栏布局题干选项侧边工具栏 Row gutter{24} Col span{16} QuestionDisplay / /Col Col span{8} ExamToolsPanel / /Col /Row ) : screens.md ? ( // Pad端两栏题干选项合并工具栏底部固定 div QuestionDisplay / ExamToolsPanel positionbottom / /div ) : ( // 手机端单栏滚动工具栏悬浮 div QuestionDisplay / FloatButton.Group triggerclick typeprimary icon{MenuOutlined /} style{{ position: fixed, right: 24, bottom: 24 }} FloatButton icon{HomeOutlined /} onClick{() navigate(/dashboard)} / FloatButton icon{FlagOutlined /} onClick{() markCurrentQuestion()} / FloatButton icon{CheckOutlined /} onClick{() submitExam()} / /FloatButton.Group /div )} /div ); };useBreakpoint返回的对象如{ xs: true, sm: true, md: false, lg: false, xl: false }TypeScript类型定义为Recordstring, boolean可安全解构使用。相比window.innerWidth判断它与Ant Design主题断点完全同步且支持服务端渲染SSR。4. AI能力集成将大模型调用封装为可测试、可降级、可审计的服务层4.1 智能组卷的AI服务抽象AIService类统一管理请求、缓存与失败回退AI能力不是直接在组件里调用fetch(/api/ai/generate-paper)而是封装为独立服务类具备重试、缓存、降级策略// ai-service.ts export class AIService { private readonly baseUrl /api/ai; private readonly cache new Mapstring, any(); // 智能组卷先尝试AI生成失败则回退到规则引擎 async generateExamPaper(config: IExamConfig): PromiseIExamPaper { const cacheKey this.generateCacheKey(paper, config); if (this.cache.has(cacheKey)) { return this.cache.get(cacheKey); } try { const response await fetch(${this.baseUrl}/generate-paper, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify(config), }); if (!response.ok) throw new Error(HTTP ${response.status}); const result await response.json(); this.cache.set(cacheKey, result); return result; } catch (error) { console.warn(AI组卷失败启用规则引擎回退, error); return this.fallbackToRuleEngine(config); // 规则引擎实现见下文 } } // 错题归因分析解析用户错题生成知识点薄弱点报告 async analyzeWrongQuestions(questionIds: string[]): PromiseIAnalysisReport { const cacheKey this.generateCacheKey(analysis, questionIds); if (this.cache.has(cacheKey)) { return this.cache.get(cacheKey); } // 使用AbortSignal控制超时防止LLM响应慢阻塞UI const controller new AbortController(); setTimeout(() controller.abort(), 8000); try { const response await fetch(${this.baseUrl}/analyze-wrong-questions, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ questionIds }), signal: controller.signal, }); const result await response.json(); this.cache.set(cacheKey, result); return result; } catch (error) { if (error.name AbortError) { console.warn(错题分析超时返回简化报告); return this.generateSimplifiedReport(questionIds); } throw error; } } private generateCacheKey(type: string, data: any): string { return ${type}-${JSON.stringify(data)}; } private fallbackToRuleEngine(config: IExamConfig): IExamPaper { // 规则引擎按知识点、难度、题型比例硬性筛选 const questions this.fetchQuestionsByRules(config); return { id: paper-${Date.now()}, questions: this.shuffleQuestions(questions).slice(0, config.totalScore / 10), // 简化逻辑 config, createdAt: new Date().toISOString(), }; } private fetchQuestionsByRules(config: IExamConfig): IQuestion[] { // 实际应调用后端规则引擎API此处为示意 return [] as IQuestion[]; } private shuffleQuestions(questions: IQuestion[]): IQuestion[] { return [...questions].sort(() Math.random() - 0.5); } private generateSimplifiedReport(questionIds: string[]): IAnalysisReport { return { summary: 系统检测到您在以下知识点存在薄弱环节, weakPoints: questionIds.map(id 知识点${Math.floor(Math.random() * 5) 1}), suggestions: [建议复习相关章节, 完成配套练习题], timestamp: new Date().toISOString(), }; } }4.1.1 在React组件中使用AI服务useEffect触发与useState状态管理const ExamGenerationPage () { const [paper, setPaper] useStateIExamPaper | null(null); const [loading, setLoading] useState(false); const [error, setError] useStatestring | null(null); const aiService useMemo(() new AIService(), []); useEffect(() { const generate async () { setLoading(true); setError(null); try { const result await aiService.generateExamPaper(form.getFieldsValue()); setPaper(result); } catch (err) { setError(err instanceof Error ? err.message : 组卷失败请检查网络或稍后重试); } finally { setLoading(false); } }; if (form.isFieldsTouched()) { generate(); } }, [form, aiService]); return ( div Button loading{loading} onClick{() form.submit()} {loading ? AI正在组卷... : 生成试卷} /Button {error Alert message{error} typeerror /} {paper ExamPreview paper{paper} /} /div ); };关键点aiService实例用useMemo缓存避免每次渲染重建setError和setLoading确保UI状态与AI请求生命周期严格同步错误信息不直接暴露后端细节如503 Service Unavailable而是转化为用户可理解的提示。4.2 学习报告可视化用ant-design/charts绘制成绩雷达图与趋势折线图成绩分析模块需直观展示学生能力维度。Ant Design官方图表库ant-design/charts基于G2Plot类型定义完善npm install ant-design/chartsimport { Radar, Line } from ant-design/charts; // 成绩雷达图展示各知识点掌握度0~100分 const KnowledgeRadarChart ({ data }: { data: { subject: string; score: number }[] }) { const config { data, xField: subject, yField: score, appendPadding: 16, meta: { score: { alias: 掌握度%, min: 0, max: 100 }, subject: { alias: 知识点 }, }, radius: 0.8, point: { size: 3, style: { fill: #1890ff, stroke: #fff, lineWidth: 2, }, }, areaStyle: () ({ fill: l(0) 0:#bae7ff 1:#1890ff, opacity: 0.25, }), }; return Radar {...config} /; }; // 历史成绩趋势折线图显示近5次考试分数变化 const ScoreTrendChart ({ data }: { data: { date: string; score: number }[] }) { const config { data, xField: date, yField: score, seriesField: subject, smooth: true, point: { size: 5, shape: circle, }, interactions: [{ type: legend-active }, { type: tooltip }], }; return Line {...config} /; };ant-design/charts的TypeScript类型严格对应配置项例如xField必须是data数组中对象的键名yField同理。IDE能自动提示可用字段避免拼写错误导致图表空白。5. 构建与部署Vite TypeScript Ant Design的生产级配置要点5.1 Vite配置优化启用rollup/plugin-dynamic-import-vars支持按需加载题库图标题库管理页需根据question.type动态加载不同图标单选题用○多选题用□传统import()无法处理变量路径。rollup/plugin-dynamic-import-vars插件解决此问题npm install -D rollup/plugin-dynamic-import-vars// vite.config.ts import { defineConfig } from vite; import react from vitejs/plugin-react; import dynamicImportVars from rollup/plugin-dynamic-import-vars; export default defineConfig({ plugins: [ react(), dynamicImportVars({ include: [src/assets/icons/**/*], exclude: [/\.scss$/], static: false, // 允许运行时变量 }), ], build: { rollupOptions: { output: { manualChunks: { antd: [antd], charts: [ant-design/charts], ai: [src/services/ai-service.ts], }, }, }, }, });然后在组件中const getQuestionIcon async (type: IQuestion[type]) { const iconMap: RecordIQuestion[type], string { single-choice: radio, multiple-choice: checkbox, true-false: check-circle, fill-blank: file-text, essay: edit, }; const icon await import(../assets/icons/${iconMap[type]}.svg?raw); return icon.default; };TypeScript会推导icon.default为string类型SVG内容无需额外声明。5.2 TypeScript编译配置tsconfig.json关键参数说明本项目tsconfig.json针对教育类应用特点做了专项优化{ compilerOptions: { target: ES2018, lib: [DOM, ES2018], module: ESNext, skipLibCheck: true, esModuleInterop: true, allowSyntheticDefaultImports: true, strict: true, forceConsistentCasingInFileNames: true, moduleResolution: node, resolveJsonModule: true, isolatedModules: true, noEmit: true, jsx: react-jsx, types: [node, jest], baseUrl: ., paths: { /*: [src/*], components/*: [src/components/*], services/*: [src/services/*], types/*: [src/types/*] } }, include: [src/**/*], exclude: [node_modules, dist, build] }strict: true开启所有严格检查包括noImplicitAny、strictNullChecks、strictFunctionTypes这是TypeScript发挥威力的前提baseUrl和paths启用路径别名避免../../../../式导入提升重构安全性noEmit: true配合Vite的esbuild转译由Vite统一处理输出TypeScript只做类型检查。5.3 生产环境部署Nginx反向代理配置与静态资源缓存策略前端打包后部署到Nginx需正确处理路由React Router的BrowserRouter和静态资源缓存# nginx.conf server { listen 80; server_name exam-platform.example.com; root /var/www/exam-frontend; index index.html; # 静态资源缓存1年JS/CSS/图片 location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ { expires 1y; add_header Cache-Control public, immutable; } # API请求代理到后端 location /api/ { proxy_pass https://backend.example.com/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } # React Router所有非静态资源请求都返回index.html location / { try_files $uri $uri/ /index.html; } # 健康检查端点 location /health { return 200 OK; add_header Content-Type text/plain; } }关键点try_files $uri $uri/ /index.html确保/exam/123这类前端路由能正确加载expires 1y大幅提升静态资源复用率proxy_pass将/api/前缀的请求转发至后端避免CORS问题。6. 排查高频问题从TypeScript类型错误到Ant Design表单失效的定位路径6.1 “Form.Item无法收集数据”问题的三层排查法当Form.Item的name属性设置后form.getFieldsValue()仍返回空对象按以下顺序排查6.1.1 检查name路径是否与表单初始值结构一致// ❌ 错误初始值为扁平结构但name用了嵌套路径 const [form] Form.useForm(); form.setFieldsValue({ title: 数学试卷 }); // 初始值无嵌套 // 表单中却写 Form.Item name{[config, examName]} label试卷名称 Input / /Form.Item // → 此时getFieldsValue()返回{}因为config不存在 // ✅ 正确初始值结构必须匹配name路径 form.setFieldsValue({ config: { examName: 数学试卷 } });TypeScript编译器无法捕获此错误需人工核对setFieldsValue参数类型与name路径的嵌套层级。6.1.2 检查Form.Provider是否包裹了所有Form.ItemForm.Item必须位于Form组件内部且不能被React.Fragment或div意外隔断// ❌ 错误Fragment打断了Form上下文 Form Fragment Form.Item nametitleInput //Form.Item /Fragment /Form // ✅ 正确用div或直接写 Form div Form.Item nametitleInput //Form.Item /div /Form6.1.3 检查key属性是否在列表渲染中唯一且稳定动态表单如Form.List中每个子项必须有稳定key否则React会丢失状态// ❌ 错误用index作key插入新项时所有后续项key变更 {fields.map((field, index) ( div key{index} {/* 不稳定 */} Form.Item name{[field.name, point]}Input //Form.Item /div ))} // ✅ 正确用field.key由Form.List生成的唯一ID {fields.map((field) ( div key{field.key} {/* 稳定 */} Form.Item name{[field.name, point]}Input //Form.Item /div ))}field.key是Form.List内部生成的唯一字符串比index更可靠。6.2 TypeScript类型“找不到命名空间‘JSX’”错误的根因与修复在.tsx文件中突然报错Cannot find namespace JSX通常源于types/react版本不匹配现象原因解决方案新建项目npm create vitelatest后立即报错Vite模板默认安装types/react^18.0.0但React 18.2需types/react^18.2.0npm install types/reactlatest types/react-domlatest升级React到18.3后报错types/react未同步升级检查package.json中types/react版本确保与react主版本一致如react18.3.1→types/react18.3.3使用create-react-app迁移项目CRA锁定了旧版类型定义删除node_modules/types/react重新安装最新版验证命令npm list types/react # 应输出类似└── types/react18.3.36.3 Ant Design组件样式丢失CSS-in-JS注入时机问题部分组件如Select下拉菜单、DatePicker弹窗样式不生效常见于异步加载场景// ❌ 错误动态导入组件时CSS未及时注入 const AsyncComponent lazy(() import(./ExamPage)); // ✅ 正确确保Ant Design CSS在应用启动时全局注入 // main.tsx import antd/dist/reset.css; // Ant Design 5.x必需 import ./index.css; // 若使用CSS Modules需在组件内显式引入 // ExamPage.module.css import styles from ./ExamPage.module.css;reset.css是Ant Design 5.x的全新CSS重置文件替代了旧版antd/dist/antd.css必须在入口文件中引入否则组件基础样式缺失。提示reset.css体积更小且不包含图标字体图标改用SVG内联避免字体加载延迟导致的FOUTFlash of Unstyled Text。最后一步验证打开浏览器开发者工具检查head中是否存在link relstylesheet href/assets/index-xxx.css且该CSS文件中包含.ant-btn、.ant-form-item等选择器。若缺失则reset.css未正确加载。本文还有配套的精品资源点击获取