diff --git a/docs/student-training-ui-standard.md b/docs/student-training-ui-standard.md index 63a3737..deb9bc4 100644 --- a/docs/student-training-ui-standard.md +++ b/docs/student-training-ui-standard.md @@ -4,7 +4,7 @@ - **唯一标准页**：`/foundation/new-product-survey`（新产品调查与分析）。 - **实现来源**：`src/views/foundation/new-product-survey.vue`。 -- **适用对象**：学生端全部实训任务页，包括产品、渠道、评估、测试等模块；不适用于教师端、平台管理端和登录页。 +- **适用对象**：学生端全部实训任务页，包括产品、渠道、评估、测试等模块；同时适用于学生端考试模块（`/examination/index` 考试考核列表、`/examination/take/:id` 在线作答、`/examination/result/:id` 成绩详情），其差异化组件与令牌登记在第 14 节；不适用于教师端、平台管理端和登录页。 - **目标**：所有实训页面在布局层级、深色主题、文本对比度、表单、表格、按钮及 AI 侧栏上，呈现与标准页同一套产品体验。 > 以后页面改造以本文件为验收依据。若现有页面的业务结构不同，保留业务内容和交互，只将视觉组件收敛到本规范；不使用旧的图片按钮、白底内容卡或浅色文字配浅色背景。 @@ -449,3 +449,93 @@ 3. 只改视觉与布局，不改业务逻辑和持久化。 4. 在本地 Vite 中编译目标页面；可登录时实际检查关键视图。 5. 报告已对齐的项目与仍受业务结构限制的差异。 + +## 14. 学生端考试模块 + +### 14.1 适用场景与令牌 + +适用于 `/examination/index`（考试考核列表）、`/examination/take/:id`（在线作答）、`/examination/result/:id`（成绩详情）。考试页没有步骤导航和 AI 侧栏，业务结构是"题目流 + 答题卡"，因此第 4.5、5、10 节的结构条目不直接套用；其余全部沿用第 2、3、6、7、9、11 节。 + +考试模块的面板材质沿用已上线的考试列表页数值（第 4.5 节 `training-core` 的 `rgba(8,18,28,.60)` 在考试页的深色背景图上对比不足，故保留更实的蓝黑渐变），其余令牌与第 3 节一一对应： + +| 令牌 | 值 | 对应第 3 节 | +| --- | --- | --- | +| `--exam-text` | `#e8f5ff` | 页面主文字 | +| `--exam-text-strong` | `#ffffff` | 强正文 | +| `--exam-secondary` | `#d7ecff` | 次正文 | +| `--exam-muted` | `#8eafc2` | 弱提示 | +| `--exam-accent` | `#71dfff` | 青蓝强调 | +| `--exam-panel` | `linear-gradient(145deg, rgba(6,34,58,.9), rgba(3,15,27,.94))` | 主工作台底色 | +| `--exam-panel-border` | `rgba(49,151,221,.34)` | 常规描边 | +| `--exam-card` | `rgba(1,14,26,.72)` | 深卡片底色（同第 9.1 节资料块） | +| `--exam-card-border` | `rgba(0,180,255,.22)` | 第 9.1 节资料块描边 | +| `--exam-line` | `rgba(127,186,215,.22)` | 第 9 节分隔线 | +| `--exam-ok` / `--exam-bad` / `--exam-pending` | `#57d9a8` / `#ff9b86` / `#7fd0ff` | 结果状态专用，仅用于对错与待评 | +| `--exam-current` | `#ffc861` | 当前题标记，与"已答"语义正交，允许独立色 | +| 圆角 | 面板与卡片 `14px`、选项与输入 `14px`、题号 `8px`、按钮 `999px` | 第 3 节圆角档位 | + +### 14.2 页面框架 + +- 页面根元素必须带 `.exam-page` 类，由 `assets/styles/exam-theme.scss` 提供令牌、面板材质、文字基色和 Element Plus 深色覆盖。 +- 外层面板：内边距 `28px 32px 34px`、圆角 `14px`、`--exam-panel` 底色 + `--exam-panel-border` 描边、下边距不小于 `32px`；不得再套第二层无边界大底板。 +- 页头：左侧标题组（眉题 `12px/800/--exam-accent`、主标题 `28px/800/#f1f8ff`、说明 `14px/--exam-muted`），底部 `1px solid --exam-line` 分割线；页头右侧只放只读信息，不放操作按钮。眉题与说明均由业务数据提供，无有效内容时不渲染该层级，也不保留占位高度（同第 4.4 节）。 +- 在线作答页主体为两列：`250px minmax(0,1fr)`、间距 `22px`；小于等于 `760px` 改单列。 +- 卡片高度由内容决定，禁止用固定 `min-height` 撑出空白底板。 + +### 14.3 答题卡 + +- 适用场景：在线作答与成绩详情页用于快速跳题和查看作答/判分状态。层级为页面框架内的左侧栏，成绩详情页为 `.result-layout` 左列。 +- 结构：`答题卡` 标题 → 按题型的分组（分组眉题 + 题号网格）→ 图例。成绩详情页无分组眉题时直接排布题号网格，不渲染空分组容器。 +- 尺寸与间距：外层用 `--exam-card` 底 + `--exam-card-border` 描边、圆角 `14px`、内边距 `18px`；标题 `16px/800/#ffffff`，与网格间距 `18px`；分组眉题 `13px/700/--exam-muted`，与网格间距 `8px`；分组之间 `16px`；网格 `repeat(5, 1fr)`、间距 `7px`。 +- 题号项：语义化 `button`，`aspect-ratio: 1`、圆角 `8px`、`14px/700`；默认 `--exam-secondary` 文字、透明底、`1px solid rgba(127,186,215,.35)`。 +- 状态：已答为 `rgba(87,217,168,.16)` 底 + `rgba(87,217,168,.55)` 描边 + `#d9fff0` 文字；当前题叠加 `2px solid --exam-current` 外描边（`outline-offset: 1px`）；判对/判错/待评分别用 `--exam-ok`/`--exam-bad`/`--exam-pending` 的 16% 透明底与 55% 透明描边，文字提亮为对应色。Hover 仅提高底色亮度，位移不超过 `1px`。 +- 图例：`12px/--exam-muted`，色块 `10px × 10px`、圆角 `2px`，与文字间距 `5px`，项间距 `18px`，顶部用 `1px solid --exam-line` 与网格分隔。 +- 交互：题号必须可点击并切换当前题，禁止只做视觉态；无题目数据时不渲染答题卡容器。 +- 窄屏：小于等于 `760px` 取消 `position: sticky`，网格改为 `repeat(8, 1fr)` 并全宽排在题目卡之前。 + +### 14.4 考试倒计时 + +- 适用场景：在线作答页页头，用于提示剩余作答时间；只读信息，不是操作按钮。 +- 结构与时序：时钟图标 → `剩余时间` 标签 → 时间数值，横向排列、间距 `8px`，位于页头中部。 +- 字体与色值：图标与标签 `14px/--exam-muted`；数值 `22px/800/#7fe3ff`，必须使用 `font-variant-numeric: tabular-nums` 防止跳动。 +- 状态：剩余时间不多于 `5` 分钟时数值改为 `#ffb35c`；仅允许颜色变化，不得闪烁、抖动或自动轮播（沿用第 5.3 节过渡约束）。时间归零由业务自动交卷，页面不额外做视觉告警。 +- 窄屏：小于等于 `760px` 时倒计时独占页头第二行，左对齐、全宽。 + +### 14.5 题目卡与选项 + +- 层级：位于答题卡右侧的当前题内容卡，使用 `--exam-card` 底、`--exam-card-border` 描边、圆角 `14px`、内边距 `24px 28px 28px`。 +- 头部：左侧题型眉题 `12px/800/--exam-accent`，右侧分值 `14px/800/--exam-secondary`，两端对齐，底部 `1px solid --exam-line`、下内边距 `12px`、与题干间距 `22px`。 +- 题干：`18px/1.7/#eef5ff`，题号与题干同段，长题干自然换行，不截断。 +- 选项：完全执行第 7.3 节——网格排列、间距 `8px`、非选中深色底与 `--exam-muted` 弱文字、选中使用激活标签渐变 `#0a6b9e → #0a5c86` 加白字与 `rgba(92,224,255,.7)` 描边；单项内边距 `14px 16px`、圆角 `14px`、行高 `1.5`、允许换行；选项字母用 `800` 字重与内容之间留 `12px`。判断题为两列。禁止暴露 Element Plus 默认白色选项与蓝色圆点。 +- 简答题文本域与作答文件上传分别执行第 7.2、7.4 节；文本域不得设固定高度底板。 +- 题目资料链接：`--exam-accent` 文字 + 下载图标，图标与文字间距 `6px`，位于题干下方、选项上方。 + +### 14.6 题目导航与交卷 + +- 上一题 / 下一题：按第 6.5 节的固定排版执行——位于题目卡内容之后、与题目卡间距 `22px`、桌面端水平居中、组内间距 `14px`、`min-height: 40px`、内边距 `0 18px`、圆角 `999px`、`14px/800`；上一题为小型轮廓按钮（第 6.1 节色值），下一题为常规主按钮（第 6.2 节渐变）；首题禁用上一题、末题禁用下一题，禁用态 `opacity: .45`。禁止一左一右贴内容卡两端。 +- 交卷：属于成果操作，按第 6.3 节底部大操作区实现——位于题目导航之后、间距 `36px`、桌面端居中、最小宽度 `172px`、高度 `64px`、内边距 `0 28px`、圆角 `6px`、`24px/900`、文字 `#dff7ff`、背景 `rgba(13,64,88,.62)`、描边 `#2c83aa`。不得放在页头，不得使用 `danger` 粉红或白色描边按钮。 +- 交卷确认与自动交卷逻辑保持业务现状，本节只约束承载位置与视觉。 +- 窄屏：小于等于 `900px` 时题目导航纵向全宽排列、间距 `14px`，交卷按钮同样全宽。 + +### 14.7 成绩带与作答详情 + +- 成绩带：位于页头下方的同级统计条，`1.25fr repeat(4, 1fr)` 网格；单元格内边距 `18px`、右侧 `1px solid --exam-line` 分隔；标签 `13px/--exam-muted`，数值 `19px/800/#7fe3ff`。 +- 总分单元格：背景 `rgba(0,127,184,.25)`、描边 `rgba(106,226,255,.45)`（第 9 节步骤芯片同族），数值 `38px/900/#7fe3ff`，单位 `--exam-muted`。 +- 作答详情：题干与选项按第 14.5 节；"你的答案 / 正确答案 / 答案解析"信息块按第 9.1 节资料信息块材质（`--exam-card` 底、`--exam-card-border` 描边、圆角 `14px`、内边距 `16px`），标签 `--exam-muted`、正文 `--exam-secondary`、`line-height: 1.65`；判分状态标签用第 14.1 节状态色，禁止白色标签底。作答附件链接与第 14.5 节题目资料链接同族：文字 `--exam-accent`、无背景无边框、距信息块 `12px`，文件名过长时自然换行，不得裁切。 +- 窄屏：小于等于 `760px` 成绩带改为两列，作答详情与答题卡改为单列且答题卡在前。 + +### 14.8 实现约束 + +- 三页必须共用 `assets/styles/exam-theme.scss` 中 `.exam-page` 的令牌、面板材质、按钮类和 Element Plus 深色覆盖；页面 scoped 样式只保留自身布局，不得再各自定义一套 `--exam-*`（对应第 11 节第 5 条）。 +- 教师端考试页（`views/teacherEnd/exam/*`）不在本节范围内，第 1 节的教师端排除仍然有效。 + +### 14.9 考试列表页（题卡流之外） + +- 适用场景：`/examination/index`，用于按状态浏览可参加的考试、进入作答和查看已结束考试的成绩；它是考试模块的入口页，没有题目卡与答题卡。 +- **页头只读规则**：页头承载主标题 `28px/800/#f1f8ff` 与说明 `14px/--exam-muted`，底部 `1px solid --exam-line` 分割线。页头**不放操作按钮**；唯一允许的例外是成绩/详情类页面左上角的**返回入口**——`el-button text`（`.is-text`），`14px/700`、文字 `--exam-accent`、无背景无边框、Hover 仅提亮为 `#a8efff`，位于主标题上方、独占一行。刷新等数据操作不得放在页头。 +- **状态筛选工具栏**：位于页头分割线下方、与页头间距 `8px`，本身底部再用 `1px solid --exam-line` 收尾。页签使用语义化 `button`，`14px/--exam-muted`，计数 `b` 为 `--exam-secondary/600`、与文字间距 `7px`；激活项文字与下划线用 `--exam-accent`、字重 `600`，下划线高 `3px`、`border-radius: 3px 3px 0 0`、贴住底部分割线；页签横向间距 `30px`。 +- **刷新入口**：允许且只允许一个圆形刷新按钮，位于筛选工具栏右端（`margin-left: auto`、与页签同一行），尺寸 `40px × 40px`、圆角 `50%`，使用第 6.1 节小型轮廓按钮的底色与描边，必须带 `title` 或 `aria-label` 说明用途。 +- **考试行**：三列网格 `78px minmax(0,1fr) 150px`、列间距 `22px`、上下内边距 `22px 8px`，行之间用 `1px solid --exam-line` 分隔；日期块右侧竖线，日期数字 `28px/--exam-accent`、月份 `13px/--exam-muted`；考试名称 `18px/800`，状态标签使用第 14.1 节状态色；行右端为操作位，桌面端右对齐，进入考试/继续考试/查看成绩使用第 6.2 节常规主按钮，"未开始倒计时"和"未参加"为纯文本 `--exam-muted`，不渲染禁用按钮；"已交卷"是唯一的例外，保留禁用态常规主按钮以标记该考试的进入入口已关闭。 +- **窄屏**：小于等于 `900px` 时页面内边距改为 `20px 16px 24px`；小于等于 `650px` 时考试行改两列、操作位移到第二列且左对齐，筛选工具栏间距降为 `14px` 并允许换行，刷新按钮不换行、留在当前行右端。 +- **空数据**：当前筛选无考试时渲染 Element Plus 空状态，说明文字 `--exam-muted`；列表容器不设固定 `min-height`，不得渲染空行骨架或占位卡片（同第 14.2 节）。 +- 考试名称、时间、时长、状态与倒计时均由接口数据提供，本节只定义承载结构与视觉，不固定任何文案。 diff --git a/src/api/exam.js b/src/api/exam.js index 3163111..83cdd3b 100644 --- a/src/api/exam.js +++ b/src/api/exam.js @@ -9,7 +9,7 @@ export const updateQuestion = (id, data) => request({ url: `${base}/teacher/ques export const deleteQuestion = (id) => request({ url: `${base}/teacher/questions/${id}`, method: "delete" }); export const uploadQuestionAttachment = (data) => request({ url: `${base}/teacher/questions/attachment`, method: "post", data, headers: { "Content-Type": "multipart/form-data" } }); export const importQuestions = (data) => request({ url: `${base}/teacher/questions/import`, method: "post", data, headers: { "Content-Type": "multipart/form-data" } }); -export const downloadQuestionTemplate = () => request({ url: `${base}/teacher/questions/template`, method: "get", responseType: "blob" }); +export const downloadQuestionTemplate = (format = "word") => request({ url: `${base}/teacher/questions/template`, method: "get", params: { format }, responseType: "blob" }); export const getTeacherExams = (params) => request({ url: `${base}/teacher`, method: "get", params }); export const getTeacherExam = (id) => request({ url: `${base}/teacher/${id}`, method: "get" }); diff --git a/src/assets/styles/exam-theme.scss b/src/assets/styles/exam-theme.scss new file mode 100644 index 0000000..0999a42 --- /dev/null +++ b/src/assets/styles/exam-theme.scss @@ -0,0 +1,179 @@ +%exam-pill-action { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + height: 40px; + min-height: 40px; + padding: 0 18px; + border-radius: 999px; + font-size: 14px; + font-weight: 800; + cursor: pointer; + transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease; +} + +/* + * 学生端考试模块主题：令牌、面板材质、按钮与 Element Plus 深色覆盖。 + * 规范见 docs/student-training-ui-standard.md 第 14 节；页面 scoped 样式不得再定义另一套 --exam-*。 + */ +.exam-page { + --exam-text: #e8f5ff; + --exam-text-strong: #ffffff; + --exam-secondary: #d7ecff; + --exam-muted: #8eafc2; + --exam-accent: #71dfff; + --exam-panel: linear-gradient(145deg, rgba(6, 34, 58, 0.9), rgba(3, 15, 27, 0.94)); + --exam-panel-border: rgba(49, 151, 221, 0.34); + --exam-card: rgba(1, 14, 26, 0.72); + --exam-card-border: rgba(0, 180, 255, 0.22); + --exam-line: rgba(127, 186, 215, 0.22); + --exam-ok: #57d9a8; + --exam-bad: #ff9b86; + --exam-pending: #7fd0ff; + --exam-current: #ffc861; + --exam-primary-gradient: linear-gradient(110deg, #0b84bd, #096491); + --exam-primary-border: rgba(92, 224, 255, 0.7); + --exam-active-gradient: linear-gradient(110deg, #0a6b9e, #0a5c86); + --exam-outline-bg: rgba(17, 126, 178, 0.36); + --exam-outline-border: rgba(99, 217, 255, 0.55); + + box-sizing: border-box; + color: var(--exam-text); + border: 1px solid var(--exam-panel-border); + border-radius: 14px; + background: var(--exam-panel); + box-shadow: 0 14px 36px rgba(0, 12, 30, 0.38), inset 0 1px 0 rgba(173, 225, 255, 0.08), 0 0 18px rgba(16, 109, 189, 0.25); + + h1, h2, h3 { color: var(--exam-text-strong); } + p { color: var(--exam-muted); } + + /* 第 6.1 节 小型轮廓按钮 */ + .exam-outline-action { + @extend %exam-pill-action; + border: 1px solid var(--exam-outline-border); + background: var(--exam-outline-bg); + color: #e9fbff; + &:hover:not(:disabled) { transform: translateY(-1px); border-color: rgba(116, 235, 255, 0.85); background: rgba(18, 146, 204, 0.5); } + &:disabled { opacity: 0.45; cursor: not-allowed; } + } + + /* 第 6.2 节 常规主按钮 */ + .exam-primary-action { + @extend %exam-pill-action; + border: 1px solid var(--exam-primary-border); + background: var(--exam-primary-gradient); + color: #ffffff; + &:hover:not(:disabled) { transform: translateY(-1px); border-color: rgba(116, 235, 255, 0.85); } + &:disabled { opacity: 0.45; cursor: not-allowed; } + } + + /* 第 6.3 节 底部大操作按钮 */ + .exam-submit-action { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 172px; + height: 64px; + padding: 0 28px; + border: 1px solid #2c83aa; + border-radius: 6px; + background: rgba(13, 64, 88, 0.62); + color: #dff7ff; + font-size: 24px; + font-weight: 900; + cursor: pointer; + transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease; + &:hover { transform: translateY(-1px); border-color: rgba(116, 235, 255, 0.85); background: rgba(16, 82, 112, 0.72); } + } + + /* Element Plus 深色覆盖：第 11 节第 4 条 */ + .el-button { + height: 40px; + padding: 0 18px; + border: 1px solid var(--exam-outline-border); + border-radius: 999px; + background: var(--exam-outline-bg); + color: #e9fbff; + font-size: 14px; + font-weight: 800; + &:hover, &:focus { border-color: rgba(116, 235, 255, 0.85); background: rgba(18, 146, 204, 0.5); color: #f2fdff; } + &.is-circle { width: 40px; padding: 0; border-radius: 50%; } + &.el-button--primary { + border-color: var(--exam-primary-border); + background: var(--exam-primary-gradient); + color: #ffffff; + &:hover, &:focus { background: var(--exam-primary-gradient); color: #ffffff; } + } + &.is-text, &.el-button--text { + height: auto; + padding: 0; + border-color: transparent; + background: none; + color: var(--exam-accent); + font-weight: 700; + &:hover, &:focus { background: none; border-color: transparent; color: #a8efff; } + } + &:disabled { opacity: 0.45; cursor: not-allowed; } + &:disabled:not(.el-button--primary):hover { background: var(--exam-outline-bg); } + } + + .el-tag { + border: 1px solid rgba(106, 226, 255, 0.45); + border-radius: 999px; + background: rgba(0, 127, 184, 0.25); + color: var(--exam-secondary); + &.el-tag--success { border-color: rgba(87, 217, 168, 0.55); background: rgba(87, 217, 168, 0.16); color: #b7f4dc; } + &.el-tag--danger { border-color: rgba(255, 155, 134, 0.55); background: rgba(255, 155, 134, 0.16); color: #ffd3c8; } + &.el-tag--info { border-color: rgba(127, 208, 255, 0.45); background: rgba(127, 208, 255, 0.14); color: #d6efff; } + } + + .el-input__wrapper, .el-textarea__inner { + background: #0f1a24; + box-shadow: 0 0 0 1px rgba(45, 95, 126, 0.95) inset; + border-radius: 14px; + color: var(--exam-text); + } + .el-input__inner { color: var(--exam-text); } + .el-textarea__inner { padding: 12px 14px; line-height: 1.65; } + .el-input__inner::placeholder, .el-textarea__inner::placeholder { color: #8299aa; } + .el-input__wrapper.is-focus, .el-textarea__inner:focus { box-shadow: 0 0 0 1px rgba(92, 224, 255, 0.7) inset, 0 0 0 3px rgba(0, 174, 255, 0.13); } + + /* 第 7.3 节 选项：整行为深色卡，选中用激活渐变，圆点不再是默认蓝色 */ + .el-radio, .el-checkbox { + margin: 0; + height: auto; + padding: 14px 16px; + border: 1px solid rgba(127, 186, 215, 0.35); + border-radius: 14px; + background: var(--exam-card); + white-space: normal; + transition: border-color 0.2s ease, background 0.2s ease; + &:hover { border-color: rgba(99, 217, 255, 0.55); } + .el-radio__inner, .el-checkbox__inner { + width: 18px; + height: 18px; + border: 1px solid rgba(99, 217, 255, 0.55); + background: #0f1a24; + } + .el-radio__inner { border-radius: 50%; } + .el-radio__inner::after { background: var(--exam-accent); } + .el-checkbox__inner { border-radius: 5px; } + .el-checkbox__inner::after { border-color: #04121d; border-width: 2px; } + .el-radio__label, .el-checkbox__label { display: flex; align-items: flex-start; gap: 12px; line-height: 1.5; color: var(--exam-secondary); font-weight: 400; } + &.is-checked { + border-color: var(--exam-primary-border); + background: var(--exam-active-gradient); + .el-radio__label, .el-checkbox__label { color: #ffffff; } + .el-radio__inner, .el-checkbox__inner { border-color: var(--exam-accent); background: #062430; } + } + } + + .el-empty__description p { color: var(--exam-muted); } + .el-loading-mask { background-color: rgba(3, 15, 27, 0.72); } + .el-icon { color: inherit; } +} + +@media (max-width: 900px) { + .exam-page .exam-submit-action { width: 100%; } +} diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue index 86a6fb8..5b33ba6 100644 --- a/src/layout/components/AppMain.vue +++ b/src/layout/components/AppMain.vue @@ -417,6 +417,9 @@ router.beforeEach((to, from, next) => { .teacher-dialog.el-dialog, .teacher-dialog .el-dialog { + width: min(760px, calc(100vw - 32px)); + max-height: calc(100vh - 32px); + overflow: hidden; border: 1px solid rgba(52, 177, 238, 0.42); border-radius: 12px; background: linear-gradient(135deg, rgba(6, 24, 38, 0.98), rgba(4, 13, 24, 0.98)); @@ -443,6 +446,8 @@ router.beforeEach((to, from, next) => { } .teacher-dialog .el-dialog__body { + min-height: 0; + overflow-y: auto; color: #d9efff; background: transparent; } diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index fd9fdc5..9122383 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -138,29 +138,29 @@ const roleText = computed(() => { const studentTopTask = ref(null); -const mentList = ref([ - { name: "首页", path: "/index", icon: HomeFilled }, - { name: "学校管理", path: "/platform-schools/index", role: 1, activePrefix: "/platform-schools" }, - { name: "教师管理", path: "/platform-teachers/index", role: 1, activePrefix: "/platform-teachers" }, - { name: "实训任务管理", path: "/platform-training-task/index", role: 1, activePrefix: "/platform-training-task" }, - { name: "院系管理", path: "/admin-faculty/index", role: 2, activePrefix: "/admin-faculty" }, - { name: "专业管理", path: "/admin-major/index", role: 2, activePrefix: "/admin-major" }, - { name: "班级管理", path: "/admin-class/index", role: 2, activePrefix: "/admin-class" }, - { name: "教师管理", path: "/admin-teacher/index", role: 2, activePrefix: "/admin-teacher" }, - { name: "学生管理", path: "/admin-student/index", role: 2, activePrefix: "/admin-student" }, - { name: "实验报告", path: "/report/index", role: 4, icon: Document }, - { name: "BI可视化", path: "/bi", role: 4, icon: TrendCharts }, - { name: "AI学情分析", path: "/analysis/index", icon: DataLine }, - { name: "AI实训教案", path: "/ai/teaching-plan", role: 3 }, - { name: "院系管理", path: "/school/index", role: 3, teacherMenu: true, activePrefix: "/school" }, - { name: "专业管理", path: "/major/index", role: 3, teacherMenu: true, activePrefix: "/major" }, - { name: "班级管理", path: "/class/index", role: 3, teacherMenu: true, activePrefix: "/class" }, - { name: "教师管理", path: "/teacher/index", role: 3, teacherMenu: true, activePrefix: "/teacher" }, - { name: "学生管理", path: "/student/index", role: 3, teacherMenu: true, activePrefix: "/student" }, - { name: "任务分配", path: "/task/index", role: 3, teacherMenu: true, activePrefix: "/task" }, - { name: "成绩中心", path: "/score/index", role: 3, teacherMenu: true, activePrefix: "/score" }, +const mentList = ref([ + { name: "首页", path: "/index", icon: HomeFilled }, + { name: "学校管理", path: "/platform-schools/index", role: 1, activePrefix: "/platform-schools" }, + { name: "教师管理", path: "/platform-teachers/index", role: 1, activePrefix: "/platform-teachers" }, + { name: "实训任务管理", path: "/platform-training-task/index", role: 1, activePrefix: "/platform-training-task" }, + { name: "院系管理", path: "/admin-faculty/index", role: 2, activePrefix: "/admin-faculty" }, + { name: "专业管理", path: "/admin-major/index", role: 2, activePrefix: "/admin-major" }, + { name: "班级管理", path: "/admin-class/index", role: 2, activePrefix: "/admin-class" }, + { name: "教师管理", path: "/admin-teacher/index", role: 2, activePrefix: "/admin-teacher" }, + { name: "学生管理", path: "/admin-student/index", role: 2, activePrefix: "/admin-student" }, + { name: "考试考核", path: "/examination/index", role: 4, activePrefix: "/examination" }, + { name: "实验报告", path: "/report/index", role: 4, icon: Document }, + { name: "BI可视化", path: "/bi", role: 4, icon: TrendCharts }, + { name: "AI学情分析", path: "/analysis/index", icon: DataLine }, + { name: "AI实训教案", path: "/ai/teaching-plan", role: 3 }, + { name: "院系管理", path: "/school/index", role: 3, teacherMenu: true, activePrefix: "/school" }, + { name: "专业管理", path: "/major/index", role: 3, teacherMenu: true, activePrefix: "/major" }, + { name: "班级管理", path: "/class/index", role: 3, teacherMenu: true, activePrefix: "/class" }, + { name: "教师管理", path: "/teacher/index", role: 3, teacherMenu: true, activePrefix: "/teacher" }, + { name: "学生管理", path: "/student/index", role: 3, teacherMenu: true, activePrefix: "/student" }, + { name: "任务分配", path: "/task/index", role: 3, teacherMenu: true, activePrefix: "/task" }, + { name: "成绩中心", path: "/score/index", role: 3, teacherMenu: true, activePrefix: "/score" }, ]); - const activement = ref(mentList.value[0]); function toggleSideBar() { diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 494a8f4..aa52b61 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -453,7 +453,6 @@ const trainingTaskKeyByPath = { }; const studentCourseBaseNav = [ { title: "AI智能助手", path: "/assistant/index", activePrefix: "/assistant" }, - { title: "考试考核", path: "/examination/index", activePrefix: "/examination" }, ]; const studentTaskSections = ref([]); const currentCourseNav = computed(() => (isTeacherRole.value @@ -496,7 +495,6 @@ const studentIconByPath = { "/task-review/index": "DocumentChecked", "/score/index": "DataBoard", "/exam/index": "Finished", - "/examination/index": "Finished", }; const studentIconBySectionStart = [ { path: "/training/", icon: "Document" }, diff --git a/src/views/teacherEnd/exam/analysis.vue b/src/views/teacherEnd/exam/analysis.vue index 90d93ca..98e24ba 100644 --- a/src/views/teacherEnd/exam/analysis.vue +++ b/src/views/teacherEnd/exam/analysis.vue @@ -23,7 +23,7 @@ function resize() { chart?.resize(); } diff --git a/src/views/teacherEnd/exam/editor.vue b/src/views/teacherEnd/exam/editor.vue index 8e2c9ce..22a5dce 100644 --- a/src/views/teacherEnd/exam/editor.vue +++ b/src/views/teacherEnd/exam/editor.vue @@ -26,7 +26,10 @@

选择试题

勾选题目并设置该题分值，选择结果实时同步到试卷概览

-
导入模板导入 Word 试题
+
+
下载 Word 模板导入 Word 试题
+ 按模板填写后上传，系统会解析题干、选项、答案和解析，并自动选中题目 +
@@ -29,8 +46,8 @@ 编辑 删除 + - @@ -59,12 +76,12 @@ 删除 + - - + {{ item.label }} @@ -102,8 +119,10 @@ import * as examApi from "@/api/exam"; const router = useRouter(); const activeTab = ref("questions"); -const loading = ref(false); const saving = ref(false); const questions = ref([]); const exams = ref([]); const examKeyword = ref(""); +const loading = ref(false); const saving = ref(false); const importing = ref(false); const questions = ref([]); const exams = ref([]); const examKeyword = ref(""); const questionDialog = ref(false); const questionFormRef = ref(); +const importInput = ref(); const importFormat = ref("word"); +const importAccept = computed(() => importFormat.value === "word" ? ".docx" : ".xls,.xlsx"); const typeOptions = [{ label: "单选题", value: "SINGLE" }, { label: "多选题", value: "MULTIPLE" }, { label: "判断题", value: "TRUE_FALSE" }, { label: "简答题", value: "SHORT_ANSWER" }]; const typeName = Object.fromEntries(typeOptions.map((item) => [item.value, item.label])); const typeTone = { SINGLE: "", MULTIPLE: "success", TRUE_FALSE: "warning", SHORT_ANSWER: "info" }; @@ -126,8 +145,10 @@ function deleteOption(index) { const [removed] = questionForm.options.splice(ind async function saveQuestion() { await questionFormRef.value.validate(); if (isChoice.value && (!questionForm.answer.length || questionForm.options.some((item) => !item.content.trim()))) return ElMessage.warning("请补全选项并设置正确答案"); saving.value = true; try { questionForm.id ? await examApi.updateQuestion(questionForm.id, questionForm) : await examApi.createQuestion(questionForm); ElMessage.success("题目已保存"); questionDialog.value = false; loadQuestions(); } finally { saving.value = false; } } async function removeQuestion(row) { await ElMessageBox.confirm("删除后无法恢复，确认删除该题目？", "删除题目", { type: "warning" }); await examApi.deleteQuestion(row.id); ElMessage.success("已删除"); loadQuestions(); } async function uploadMaterial({ file }) { const form = new FormData(); form.append("file", file); const { data } = await examApi.uploadQuestionAttachment(form); questionForm.attachmentName = data.name; questionForm.attachmentUrl = data.url; ElMessage.success("资料已上传"); } -async function doImport({ file }) { const form = new FormData(); form.append("file", file); const { data } = await examApi.importQuestions(form); ElMessage.success(`成功导入 ${data.length} 道题`); loadQuestions(); } -async function downloadTemplate() { saveAs(await examApi.downloadQuestionTemplate(), "考试题库导入模板.docx"); } +function openImportPicker(format) { importFormat.value = format; importInput.value.value = ""; importInput.value.click(); } +async function handleImportFile(event) { const [file] = event.target.files; if (!file) return; await doImport({ file }); } +async function doImport({ file }) { importing.value = true; try { const form = new FormData(); form.append("file", file); const { data } = await examApi.importQuestions(form); ElMessage.success(`成功导入 ${data.length} 道题`); loadQuestions(); } finally { importing.value = false; if (importInput.value) importInput.value.value = ""; } } +async function downloadTemplate(format) { const extension = format === "excel" ? "xlsx" : "docx"; saveAs(await examApi.downloadQuestionTemplate(format), `考试题库${format === "excel" ? "Excel" : "Word"}导入模板.${extension}`); } async function publish(row) { await ElMessageBox.confirm(`确认发布“${row.name}”？发布后将在设定时间自动开始。`, "发布考试", { type: "warning" }); await examApi.publishExam(row.id); ElMessage.success("已发布"); loadExams(); } async function withdraw(row) { await examApi.withdrawExam(row.id); ElMessage.success("已撤回"); loadExams(); } async function removeExam(row) { await ElMessageBox.confirm(`确认永久删除“${row.name}”？仅在已导出全部答卷后允许删除。`, "删除考试", { type: "warning", confirmButtonText: "确认删除" }); await examApi.deleteExam(row.id); ElMessage.success("已删除"); loadExams(); } @@ -137,15 +158,334 @@ function formatTime(value) { return value ? new Date(value).toLocaleString("zh-C diff --git a/src/views/teacherEnd/score/TaskReviewPanel.vue b/src/views/teacherEnd/score/TaskReviewPanel.vue index 36b66bc..514e63c 100644 --- a/src/views/teacherEnd/score/TaskReviewPanel.vue +++ b/src/views/teacherEnd/score/TaskReviewPanel.vue @@ -41,7 +41,7 @@ - +