devops-platform-web/README.md

# DevOps 运维平台前端

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

## 当前范围

- 登录、总览、项目配置、成员权限、发布中心、运行记录、系统配置，以及全局右侧 Agent 抽屉。
- 所有项目、发布、refs、流程和集成状态均调用 `devops-platform-api`，前端不再提供本地 mock 数据降级。
- 成员权限页调用后端 `/members` 和 `/messages`，维护普通成员账号、项目权限、密码重置和平台消息。
- 发布中心包含项目、环境、ref/tag、备注、生产二次确认、触发、取消、重试和 Jenkins 状态同步入口。
- 运行记录展示 Jenkins queue/build、Build URL、开始/结束时间、执行提示、失败摘要和日志摘要。
- BPMN Viewer 使用 `bpmn-js` 渲染后端流程 XML，并通过进度统计、节点状态 badge、右侧时间线和详情面板展示 queued/running/success/failed/skipped/canceled 状态。
- Agent 作为全局工具从顶部打开，只包含发布风险摘要、失败诊断、Runbook 问答、发布说明草稿，并通过后端 Agent API 创建调用记录。

## 技术栈

- Vue 3
- Vite
- TypeScript
- Element Plus
- Pinia
- Vue Router
- Axios
- bpmn-js

## 本地启动

```bash
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`。

## 构建检查

```bash
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](docs/notification-platform-config.md)，包含企业微信、飞书和通用 webhook 的后端变量、安全边界与验证步骤。`/settings` 页面支持展示后端返回的变量说明字段，用于 hover 查看每个变量含义，并通过 `/agent/config` 维护后端保存的模型 baseURL、model 和 key。

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

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

## BPMN 边界

- 前端只负责 BPMN XML 展示和节点状态高亮。
- `run.steps[].bpmnNodeId` 必须与 BPMN XML 节点 id 一致。
- 流程推进、失败停留、审计日志和状态机由后端负责。

## Agent 边界

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

- 发布风险摘要
- 失败诊断
- Runbook 问答
- 发布说明草稿

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