kaoshi-ui

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 覆盖的真实用户路径通过。