feat: 完善发布运维前端体验

This commit is contained in:
湛兮
2026-06-12 17:53:41 +08:00
parent 3c964b68ed
commit 94649fe604
16 changed files with 428 additions and 277 deletions
+5 -6
View File
@@ -1,6 +1,6 @@
# DevOps 运维平台前端
Vue 3 + Vite + TypeScript 实现的 DevOps 运维控制台第一阶段,用于管理本地项目和 DevOps 平台自身的发布状态、Jenkins/Gitea/通知平台/LLM 接入状态、BPMN 流程展示和 Agent 辅助能力。
Vue 3 + Vite + TypeScript 实现的 DevOps 运维控制台第一阶段,用于管理本地项目和 DevOps 平台自身的发布状态、Jenkins/Gitea/通知平台/LLM 接入状态、发布步骤轨迹和 Agent 辅助能力。
## 当前范围
@@ -12,7 +12,7 @@ Vue 3 + Vite + TypeScript 实现的 DevOps 运维控制台第一阶段,用于
- 发布中心包含项目、环境、后端返回的 ref/tag、备注、发布前检查、生产发布回滚/窗口/通知确认、触发、取消、重试和 Jenkins 状态同步入口。
- 运行记录展示状态概览、项目/环境/状态/关键词筛选、Jenkins queue/build、Build URL、开始/结束时间、执行提示、失败摘要和日志摘要,并提供超级管理员导入 Jenkins 直接构建记录的入口。
- 系统配置页展示集成配置、Agent 密钥状态、通知 outbox 和审计日志概览,支持通知投递与审计记录筛选,用于定位配置缺失、通知失败和敏感操作。
- BPMN 状态区使用后端流程 XML 和 run steps 作为状态来源,左侧展示节点输出或 Jenkins 构建日志,右侧粘性展示进度统计、节点时间线和详情面板。
- 发布步骤轨迹区使用后端 run steps 作为状态来源,左侧展示节点输出或 Jenkins 构建日志,右侧粘性展示进度统计、节点时间线和详情面板。
- Agent 作为全局工具从顶部打开,只包含发布风险摘要、失败诊断、Runbook 问答、发布说明草稿和事故复盘草稿,并通过后端 Agent API 创建调用记录。
## 技术栈
@@ -24,7 +24,6 @@ Vue 3 + Vite + TypeScript 实现的 DevOps 运维控制台第一阶段,用于
- Pinia
- Vue Router
- Axios
- bpmn-js
## 本地启动
@@ -54,10 +53,10 @@ pnpm build
- 通知 webhook
- LLM API key/baseURL/model
## BPMN 边界
## 发布步骤边界
- 前端只负责 BPMN XML 展示和节点状态高亮
- `run.steps[].bpmnNodeId` 必须与 BPMN XML 节点 id 一致
- 前端只负责后端 `run.steps` 的状态、节点详情和日志展示,不渲染流程图 XML
- 后端返回的节点标识在前端统一映射为 `run.steps[].nodeId`,用于步骤选择、详情定位和日志联动
- 流程推进、失败停留、审计日志和状态机由后端负责。
## Agent 边界