DR03 — 交互规范
版本：V1.1 | 框架：Element Plus
1. 按钮状态规范
| 场景 |
样式 |
色值 |
说明 |
| 主操作（提交/保存/开始） |
el-button type="primary" |
#1677ff |
页面中的主要行动点 |
| 次要操作（取消/返回） |
el-button（默认） |
#ffffff / #606266 |
非主要行动点 |
| 危险操作（删除/驳回） |
el-button type="danger" |
#ff4d4f |
不可逆操作 |
| 文字操作（编辑/查看） |
el-button text |
#1677ff |
表格中操作列 |
| 禁用态 |
el-button disabled |
灰底 #cbd5e1 + 灰字 #64748b |
不可点击状态 |
| 快捷按钮（AI 侧栏） |
el-button size="small" |
默认样式 |
3 个快捷入口 |
关键规则（TOP_CODING_RULES.md 的 G07）：
- 所有可点击的关键交互按钮必须使用蓝色底
#1677ff
disabled 状态变化后，底色必须立即同步变化- 不可用按钮保持
cursor: not-allowed
2. 加载与反馈
| 场景 |
组件 |
行为 |
| 页面加载 |
v-loading |
全屏或区域加载遮罩 |
| 表单提交 |
el-button loading 状态 |
按钮显示转圈，禁止重复点击 |
| 表格查询 |
el-table v-loading |
表格区域加载 |
| 操作成功 |
ElMessage.success |
顶部轻提示，2s 自动消失 |
| 操作失败 |
ElMessage.error |
显示错误信息 |
| 确认操作 |
ElMessageBox.confirm |
弹窗确认（删除/驳回等） |
3. 弹窗使用规范
| 类型 |
组件 |
场景 |
| 表单弹窗 |
el-dialog |
新增/编辑 CRUD |
| 确认弹窗 |
el-message-box |
删除/禁用确认 + 驳回理由输入 |
| 素材提交 |
el-dialog |
员工提交素材建议（MaterialSuggestUpload） |
| 预览弹窗 |
el-dialog + iframe |
PDF 预览 / 视频播放 |
| 选择器弹窗 |
el-dialog + el-tree |
绑定产品/课程选择 |
4. 表单交互规则
5. 表格交互规则
6. AI 聊天框交互规则
| 场景 |
行为 |
| 展开/收起 |
点击右上角 ✕ 收起，底部显示 [🤖 展开AI] 按钮 |
| 发送消息 |
Enter 键或点击发送按钮 |
| 流式响应 |
SSE 实时流式显示，打字机效果 |
| 上下文切换 |
切换页面时自动清理旧上下文，注入新页面上下文 |
| 快捷动作 |
点击快捷按钮触发对应的 API |
| 窗口切换 |
页面路由变化不清空对话历史（全局常驻） |
7. 错误处理交互
| HTTP 状态 |
用户看到 |
行为 |
| 400 参数错误 |
ElMessage.warning + 字段标红 |
表单校验错误 |
| 401 未认证 |
跳转到登录页 |
清除 token 并跳转 |
| 403 无权限 |
ElMessage.warning + 跳转首页 |
前端+后端双重拦截 |
| 404 资源不存在 |
ElMessage.error + 提示 |
— |
| 500 服务器错误 |
ElMessage.error「系统异常，请稍后重试」 |
— |
| 网络断开 |
ElMessage.error「网络连接异常」 |
— |
8. 页面间跳转逻辑
| 来源页面 |
目标页面 |
传递参数 |
方式 |
| 产品详情 |
对应课程 |
courseId |
<router-link> |
| 课程详情 |
对应产品 |
productId |
<router-link> |
| 产品详情 |
向 AI 提问 |
productId + page: "product_detail" |
展开 AI 侧栏 + 自动注入 |
| 课程详情 |
向 AI 提问 |
courseId + page: "course_detail" |
同上 |
| 考试列表 |
考试封面 |
paperId |
router.push |
| 考试封面 |
答题页面 |
paperId |
router.push |
| 考试结果 |
考试记录 |
recordId |
router.push |
9. 素材提交入口（弹窗而非独立页面）
