pj0235-eai_agentplatform/docs/08_Design_Rules/DR03_交互规则.md

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. 表单交互规则

// 通用规则
- 必填字段标红色 *
- 提交前校验（el-form :rules）
- 提交按钮 disable 直到表单合法
- 提交中按钮 loading，禁止重复点击
- 成功后关闭弹窗 + 刷新表格
- 失败后保持弹窗，显示错误信息

5. 表格交互规则

// 通用规则
- 支持分页（el-pagination）
- 支持筛选栏（过滤条件）
- 操作列放最右侧，统一宽度
- 表格行 hover 高亮
- 长文本省略显示（show-overflow-tooltip）
- 空数据展示「暂无数据」

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. 素材提交入口（弹窗而非独立页面）

素材提交仅在以下页面以弹窗形式出现：
- 公司介绍培训页面 → 点击「提交素材建议」
- 产品详情页面 → 点击「提交素材建议」
- 课程详情页面 → 点击「提交素材建议」

弹窗内容：
  文件上传 + 备注说明
  不提供独立页面访问