前端页面部分功能完成测试,需继续完善UI布局和功能

This commit is contained in:
2025-12-28 23:33:14 +08:00
parent 42fcb71bae
commit 27fea6f647
12 changed files with 400 additions and 61 deletions

View File

@@ -0,0 +1,15 @@
# Change: update-user-exam-mobile-ux
## Why
用户端考试页目前以桌面布局为主,移动端点击目标、视觉对比度、切换交互与加载反馈不足,影响可用性与无障碍合规。
## What Changes
- 重构用户端考试页为移动优先响应式布局320px-768px
- 统一交互目标最小可点击区域为 48×48px并优化控件间距以降低误触。
- 增加题目左右滑动手势切换与更轻量的切换过渡≤300ms
- 增强加载状态反馈与题目预加载策略以降低首屏与切换等待。
## Impact
- Affected specs: user-exam-portal
- Affected code: src/pages/QuizPage.tsx

View File

@@ -0,0 +1,23 @@
## MODIFIED Requirements
### Requirement: 考试交互与自动保存
系统 MUST 支持题目导航与按题型清晰呈现(单选/多选/判断/文字题);系统 MUST 自动保存答题进度并在页面刷新后可恢复;系统 MUST 在考试过程中隐藏评分信息(包括题目分值与实时得分),仅在交卷后展示评分详情;系统 MUST 在移动端提供易触达的题号导航与题目切换交互。
#### Scenario: 移动端触控与导航可用
- **GIVEN** 用户在 320px-768px 的移动端屏幕进行考试
- **WHEN** 用户进行题目切换、打开题号导航并跳转到指定题目
- **THEN** 系统 MUST 保证主要交互控件的可点击区域不小于 48×48px
- **AND** 系统 MUST 支持左右滑动手势切换上一题/下一题(边界处不切换)
- **AND** 系统 MUST 提供可见的加载与切换反馈,且过渡动画持续时间 MUST 不超过 300ms
## ADDED Requirements
### Requirement: 考试页面可访问性WCAG 2.1 AA
系统 MUST 满足 WCAG 2.1 AA 的基本可读性与可操作性要求:文本与背景对比度满足最低阈值,交互组件具有可见焦点状态,且支持键盘操作完成主要流程。
#### Scenario: 视觉对比度与焦点可见
- **GIVEN** 用户在考试页浏览题干与选项
- **WHEN** 用户使用键盘在控件间切换焦点
- **THEN** 系统 MUST 提供清晰可见的焦点样式
- **AND** 系统 MUST 确保主要文本与背景对比度满足 WCAG 2.1 AA 的最低要求

View File

@@ -0,0 +1,11 @@
## 1. Implementation
- [ ] 调整 QuizPage 页面结构为移动优先布局并保证 48×48 点击目标
- [ ] 增加答题卡/题号导航的单手可操作入口
- [ ] 增加左右滑动切换题目与键盘可达性
- [ ] 优化加载状态与提交/弃考交互反馈
- [ ] 增加题目预加载与切换动画性能优化
## 2. Verification
- [ ] 通过 npm run check 与 npm run build
- [ ] 覆盖移动端交互相关的自动化测试