| name | kaoshi-ui |
| description | 维护 kaoshi 管理端和考试端界面时使用。适用于修改 Vue、Element Plus、页面信息架构、管理表单、题库列表、试题编辑器、组卷页面、考试作答页、成绩页、按钮、空状态、表格、布局或视觉样式；要求按当前产品事实和生产级验收调整 UI。 |
kaoshi UI
UI 修改必须服务当前用户路径：管理端高效维护数据，考试端稳定完成作答。
UI 核心规则
- 默认使用 Element Plus、Vue Router 和项目已有组件模式。
- 表格、分页、表单、上传、选择器、权限多选、弹窗、抽屉、步骤条、标签、答题卡和计时器使用成熟组件承载。
- 页面只做交互编排和展示，复杂业务规则放入可测试模块或后端。
- 保存、发布、提交、导入和删除等命令必须有明确 loading、成功态、失败态和防重复触发。
- 长文本必须换行或省略，按钮和表单项不能被挤压。
- 管理端保持密度适中、可扫描、可批量操作。
- 考试端保持稳定、克制、无干扰。
文件职责
- 单一职责看变化原因，不看行数。
- 超过 300 行必须触发职责审查，但不是自动拆分理由。
- 能一句话说清职责、变化原因一致、内部耦合合理，可以保留。
- 状态管理、规则计算、数据读写、渲染展示、外部接线、错误兼容、业务判断混在一起时，必须拆清边界。
- 不为了拆而拆，不为了省事硬塞。
- Vue 页面负责页面状态和用户交互；复杂业务规则、题型策略、提交 payload 构造和生命周期判断应优先沉到可测试模块或后端。
必读上下文
修改 UI 前读取目标页面、路由配置、API client、状态管理、相关类型和 spec.md 中的当前产品事实。
信息架构
- 系统管理包含用户管理、角色管理和部门管理。
- 考试管理包含题库管理、试题管理和考试管理。
- 考试端包含考试中心、准备考试、在线作答、我的成绩和成绩详情。
- 列表页负责检索、筛选和进入编辑。
- 编辑页负责字段填写、校验、保存和保存后读回。
- 详情页负责只读查看和审计信息。
- 角色权限配置使用复选框、分组、全选和清晰的已选状态。
考试端交互
- 准备页展示考试时间、限时、可考次数和进入作答命令。
- 作答页展示题目、选项、附件、题型、分值、答题卡、进度和提交命令。
- 逐题显示和整卷显示由考试配置决定。
- 随机题序由 attempt 快照决定，刷新后保持稳定。
- 提交后进入结果页或成绩详情，不允许重复提交产生重复成绩。
验证
收尾前检查：
- 文本不溢出。
- 表单错误提示可见。
- 空状态、加载态和失败态存在。
- 保存、发布、提交和导入流程可操作。
- Playwright 覆盖的真实用户路径通过。
