DevOps 运维平台前端

Vue 3 + Vite + TypeScript 实现的 DevOps 运维控制台第一阶段,用于管理本地项目和 DevOps 平台自身的发布状态、Jenkins/Gitea/通知平台/LLM 接入状态、发布步骤轨迹和 Agent 辅助能力。

当前范围

  • 登录、总览、项目配置、成员权限、发布中心、运行记录、系统配置,以及全局右侧 Agent 抽屉。
  • 所有项目、发布、refs、流程和集成状态均调用 devops-platform-api,前端不再提供本地 mock 数据降级。
  • 总览页提供值班焦点、优先 Run 队列、项目发布健康、项目环境摘要和跨页快捷入口,用于快速定位失败发布、项目阻断、配置缺口和通知 outbox 风险。
  • 成员权限页调用后端 /members/messages,展示账号/构建权限/安全状态概览,支持角色、启停、安全状态和关键词筛选,并维护普通成员账号、项目权限、密码重置和平台消息。
  • 项目配置提供项目可发布性概览、项目/仓库搜索、发布态/权限筛选、Gitea/Jenkins/Webhook 诊断展开和发布/运行记录上下文跳转。
  • 发布中心包含项目、环境、后端返回的 ref/tag、备注、发布前检查、生产发布回滚/窗口/通知确认、触发、取消、重试和 Jenkins 状态同步入口。
  • 运行记录展示状态概览、项目/环境/状态/关键词筛选、Jenkins queue/build、Build URL、开始/结束时间、执行提示、失败摘要和日志摘要,并提供超级管理员导入 Jenkins 直接构建记录的入口。
  • 系统配置页展示集成配置、Agent 密钥状态、通知 outbox 和审计日志概览,支持通知投递与审计记录筛选,用于定位配置缺失、通知失败和敏感操作。
  • 发布步骤轨迹区使用后端 run steps 作为状态来源,左侧展示节点输出或 Jenkins 构建日志,右侧粘性展示进度统计、节点时间线和详情面板。
  • Agent 作为全局工具从顶部打开,只包含发布风险摘要、失败诊断、Runbook 问答、发布说明草稿和事故复盘草稿,并通过后端 Agent API 创建调用记录。

技术栈

  • Vue 3
  • Vite
  • TypeScript
  • Element Plus
  • Pinia
  • Vue Router
  • Axios

本地启动

pnpm install
pnpm dev

本地前端默认监听 http://localhost:4301。如使用 VITE_API_BASE_URL=http://localhost:4300,浏览器会直接请求本地 API;如不设置该变量,Vite 会把 /api 默认代理到 http://localhost:4300,并自动去掉 /api 前缀。需要通过 /api 代理联调远端 API 时,可临时设置 DEVOPS_API_PROXY_TARGET=https://devops.mrzhan.top/api

构建检查

pnpm build

API 契约来源

接口入口为 src/services/devopsApi.ts,只调用后端统一 envelope 响应;后端不可用时页面应暴露真实接口错误,不伪造项目、运行记录或 refs。后续以 /Users/mac033/Desktop/my-project/devops-platform-docs/devops-platform-implementation-tracker.md 中的产品约束和后端 OpenAPI 为准继续收敛字段。

通知平台配置方案见 docs/notification-platform-config.md,包含企业微信、飞书和通用 webhook 的后端变量、安全边界与验证步骤。/settings 页面支持展示后端返回的变量说明字段,用于 hover 查看每个变量含义,并通过 /agent/config 维护后端保存的模型 baseURL、model 和 key。

浏览器端不得保存或直连以下密钥和服务:

  • Jenkins token
  • Gitea token
  • 通知 webhook
  • LLM API key/baseURL/model

发布步骤边界

  • 前端只负责后端 run.steps 的状态、节点详情和日志展示,不渲染流程图 XML。
  • 后端返回的节点标识在前端统一映射为 run.steps[].nodeId,用于步骤选择、详情定位和日志联动。
  • 流程推进、失败停留、审计日志和状态机由后端负责。

Agent 边界

前端不提供泛聊天入口。Agent 入口仅围绕 DevOps 运维场景:

  • 发布风险摘要
  • 失败诊断
  • Runbook 问答
  • 发布说明草稿
  • 事故复盘草稿

模型调用、脱敏、审计、白名单知识库和密钥管理由后端代理实现。

开源许可

本仓库使用 MIT License。提交公开仓库前请确认 .env、部署密钥和真实第三方 token 未进入 Git 历史或提交内容。

S
Description
DevOps platform devops-platform-web
Readme MIT 777 KiB
Languages
Vue 73%
TypeScript 25.8%
CSS 1.1%
HTML 0.1%