Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
f006464116 | ||
|
|
9103b13510 | ||
|
|
7090c8efc2 | ||
|
|
67aeafac19 | ||
|
|
ee59706ab9 | ||
|
|
935a29e2f1 | ||
|
|
2040cd042a | ||
|
|
b6b53c42a7 | ||
|
|
695c1c2357 | ||
|
|
ed88a18e03 | ||
|
|
8ee08e08da | ||
|
|
8bd323cc73 |
No files matched your search
@@ -0,0 +1,156 @@
|
|||||||
|
# FlowStack 接口文档
|
||||||
|
|
||||||
|
> 与当前后端代码对齐;所有 `/api/*` 需携带登录 Token,敏感字段只写不回显。
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|---|---|
|
||||||
|
| 文档版本 | v0.4 |
|
||||||
|
| Base URL | `http://<host>:9527` |
|
||||||
|
| 鉴权 | `Authorization: Bearer <token>`(`POST /api/auth/login` 获取,7 天有效) |
|
||||||
|
| 技术栈 | Go gin + SQLite(GORM) |
|
||||||
|
|
||||||
|
**典型接入流程**:登录拿 token → 管理流水线/节点/凭证 → 触发运行 → SSE 看日志 → 查发布记录。
|
||||||
|
|
||||||
|
## 通用约定
|
||||||
|
|
||||||
|
- **鉴权**:除登录、健康检查(`/health`)、入站 Webhook(`/api/hooks/*`)、SSE 日志流外,所有接口需 Bearer Token;用户管理类接口需 admin 角色
|
||||||
|
- **错误格式**:`{"error": "中文错误信息"}`,HTTP 状态码语义化(400 参数错 / 401 未登录 / 403 权限 / 404 不存在 / 409 冲突)
|
||||||
|
- **敏感字段只写不回显**:凭证内容、API Key、Token、Bind 密码等提交后永不返回,响应以 `xxxSet` 布尔表示已配置;**编辑时留空 = 保持原值**
|
||||||
|
- **时间**:ISO 8601 带时区
|
||||||
|
|
||||||
|
## 认证
|
||||||
|
|
||||||
|
| 接口 | 方法 | 说明 |
|
||||||
|
|---|---|---|
|
||||||
|
| `/api/auth/login` | POST | 登录(本地 argon2id 或 LDAP 直连验证),返回签名 token |
|
||||||
|
|
||||||
|
```bash
|
||||||
|
curl -X POST http://localhost:9527/api/auth/login \
|
||||||
|
-H 'Content-Type: application/json' \
|
||||||
|
-d '{"username":"admin","password":"xxx"}'
|
||||||
|
# → {"success":true,"token":"...","username":"admin","role":"admin","expiresAt":"..."}
|
||||||
|
```
|
||||||
|
|
||||||
|
LDAP 用户名在目录验证通过后自动建号/同步(JIT);错误统一返回 401「用户名或密码错误」。
|
||||||
|
|
||||||
|
## 流水线
|
||||||
|
|
||||||
|
| 接口 | 方法 | 说明 |
|
||||||
|
|---|---|---|
|
||||||
|
| `/api/pipelines` | GET | 列表(每条附 `lastRun` 与 `accessLevel`;普通用户仅返回被授权的) |
|
||||||
|
| `/api/pipelines` | POST | 创建(**管理员**) |
|
||||||
|
| `/api/pipelines/:id` | GET | 详情(pipeline + nodes + edges + lastRun + `accessLevel`;需「查看」) |
|
||||||
|
| `/api/pipelines/:id` | PUT | 更新(需「管理」) |
|
||||||
|
| `/api/pipelines/:id` | DELETE | 删除(**管理员**;级联删节点连线) |
|
||||||
|
| `/api/pipelines/:id/nodes` | PUT | 全量保存画布节点(需「管理」) |
|
||||||
|
| `/api/pipelines/:id/edges` | PUT | 全量保存画布连线(需「管理」) |
|
||||||
|
| `/api/pipelines/:id/runs` | POST | 触发运行(需「发布」;body 可带 branch/env/triggerType) |
|
||||||
|
|
||||||
|
`type=jenkins` 且已关联服务器的流水线触发时走真实 Jenkins 引擎(队列→构建→增量日志回传)。
|
||||||
|
|
||||||
|
## 流水线权限
|
||||||
|
|
||||||
|
三级等级:`viewer` 查看 / `operator` 发布 / `owner` 管理;管理员全局豁免。未被授权的普通用户默认不可见任何流水线。
|
||||||
|
|
||||||
|
| 接口 | 方法 | 说明 |
|
||||||
|
|---|---|---|
|
||||||
|
| `/api/me` | GET | 当前会话(username/role/isAdmin) |
|
||||||
|
| `/api/pipeline-roles` | GET | 权限组列表(**管理员**;附 matchedPipelines 匹配数) |
|
||||||
|
| `/api/pipeline-roles` | POST | 创建(name/scopeMode=manual|pattern/pattern/pipelineIds/level/members;pattern 仅支持 `*` 通配符) |
|
||||||
|
| `/api/pipeline-roles/:id` | PUT/DELETE | 更新 / 删除(**管理员**) |
|
||||||
|
| `/api/pipelines/:id/members` | GET | 单流水线直接成员 + 命中的权限组(需「查看」) |
|
||||||
|
| `/api/pipelines/:id/members` | POST | 添加/更新成员等级(需「管理」;body: username/level) |
|
||||||
|
| `/api/pipelines/:id/members/:mid` | DELETE | 移除直接授权(需「管理」) |
|
||||||
|
|
||||||
|
资源(主机/集群/凭证/构建节点/工具/Webhook)、Jenkins 服务器、GitOps、插件与系统设置接口均要求**管理员**。
|
||||||
|
|
||||||
|
## 运行记录
|
||||||
|
|
||||||
|
| 接口 | 方法 | 说明 |
|
||||||
|
|---|---|---|
|
||||||
|
| `/api/runs` | GET | 运行列表(`?pipelineId=&status=`;普通用户仅返回被授权流水线的,每条附 `canRetry`) |
|
||||||
|
| `/api/runs/:runId` | GET | 详情(run + stages + logs;失败含 AI `analysis`;需「查看」) |
|
||||||
|
| `/api/runs/:runId/logs/stream` | GET | SSE 实时日志(需登录:`?token=` 传会话 token 且需「查看」;事件 connected/log) |
|
||||||
|
| `/api/runs/:runId/retry` | POST | 以同分支重新触发(需「发布」) |
|
||||||
|
|
||||||
|
## AI 与批量发布
|
||||||
|
|
||||||
|
| 接口 | 方法 | 说明 |
|
||||||
|
|---|---|---|
|
||||||
|
| `/api/ai/chat` | POST | AI 对话(JSON 返回;未配 LLM 降级规则匹配) |
|
||||||
|
| `/api/ai/chat/stream` | POST | 同上,SSE 流式(delta/done 事件) |
|
||||||
|
| `/api/ai/release` | POST | 按服务名批量触发(未导入的 Jenkins Job 自动建流水线) |
|
||||||
|
| `/api/batch/parse` | POST | 粘贴清单解析预览(纯规则) |
|
||||||
|
|
||||||
|
```bash
|
||||||
|
curl -X POST http://localhost:9527/api/ai/release \
|
||||||
|
-H "Authorization: Bearer $TOKEN" -H 'Content-Type: application/json' \
|
||||||
|
-d '{"jobs":["aiops-backend","aiops-web"],"branch":"test"}'
|
||||||
|
# → {"triggered":[{"job":"aiops-backend","runId":"pr-..."}],"failed":[]}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 资源管理
|
||||||
|
|
||||||
|
| 接口 | 方法 | 说明 |
|
||||||
|
|---|---|---|
|
||||||
|
| `/api/hosts` / `/api/clusters` | CRUD | 主机 / Kubernetes 集群 |
|
||||||
|
| `/api/hosts/:id/test` / `/api/clusters/:id/test` | POST | 真实 TCP 拨号连通测试 |
|
||||||
|
| `/api/credentials` | CRUD | 凭证(内容 AES 加密只写;响应含 `contentSet`) |
|
||||||
|
| `/api/build-nodes` | CRUD | 构建节点 |
|
||||||
|
| `/api/build-nodes/:id/test` | POST | 连通测试(TCP 拨号 22 端口) |
|
||||||
|
| `/api/build-nodes/:id/disk-test` | POST | dd 磁盘性能实测(256MB,本机 exec 或 SSH 远程;返回读写 MB/s) |
|
||||||
|
| `/api/tools` | GET/PUT | 工具清单与安装策略 |
|
||||||
|
| `/api/tools/:id/check` | POST | 真实执行版本探测命令 |
|
||||||
|
| `/api/webhooks` | CRUD + `/:id/test` | 出站 Webhook(HMAC-SHA256 签名发送,配置入口:系统设置→消息通知) |
|
||||||
|
| `/api/hooks/pipeline/:id?token=` | POST | 入站触发流水线(免鉴权,token 校验) |
|
||||||
|
|
||||||
|
## Jenkins
|
||||||
|
|
||||||
|
| 接口 | 方法 | 说明 |
|
||||||
|
|---|---|---|
|
||||||
|
| `/api/jenkins-servers` | CRUD | 服务器管理(Token 加密只写) |
|
||||||
|
| `/api/jenkins-servers/:id/test` | POST | 真实连通测试(crumb + BasicAuth) |
|
||||||
|
| `/api/jenkins-servers/:id/jobs` | GET | 拉取 Job 树(folder 压平) |
|
||||||
|
| `/api/jenkins-servers/:id/import` | POST | 导入 Job 为 jenkins 类型流水线 |
|
||||||
|
|
||||||
|
## GitOps
|
||||||
|
|
||||||
|
| 接口 | 方法 | 说明 |
|
||||||
|
|---|---|---|
|
||||||
|
| `/api/gitops/apps` | GET | 应用列表(含同步/健康状态) |
|
||||||
|
| `/api/gitops/argo/apps` | GET | Argo 风格状态视图 |
|
||||||
|
| `/api/gitops/argo/sync` | POST | 触发同步(状态真实推进) |
|
||||||
|
| `/api/gitops/argo/:app/tree` / `/diff` | GET | 资源树 / 差异对比 |
|
||||||
|
|
||||||
|
## 用户与 LDAP
|
||||||
|
|
||||||
|
| 接口 | 方法 | 说明 |
|
||||||
|
|---|---|---|
|
||||||
|
| `/api/users` | GET/POST | 用户列表 / 创建本地用户(密码留空随机生成并一次性回显) |
|
||||||
|
| `/api/users/:id` | PUT/DELETE | 角色/信息更新 / 删除(不可删最后一个 admin) |
|
||||||
|
| `/api/users/:id/reset-password` | POST | 重置密码(LDAP 用户拒绝) |
|
||||||
|
| `/api/users/ldap-import` | POST | 批量导入(已 LDAP 跳过 / 本地同名转换 / 新建) |
|
||||||
|
| `/api/ldap/users` | POST | LDAP 用户预览(未启用返回 400) |
|
||||||
|
|
||||||
|
## 设置
|
||||||
|
|
||||||
|
| 接口 | 方法 | 说明 |
|
||||||
|
|---|---|---|
|
||||||
|
| `/api/settings` | GET/PUT | 单行设置:主题/通知/工具模式/AI/飞书/LDAP(敏感字段只写) |
|
||||||
|
| `/api/settings/test-llm` | POST | AI 连通测试(支持草稿值,apiKey 留空回退已存) |
|
||||||
|
| `/api/settings/test-lark` | POST | 飞书测试卡片 |
|
||||||
|
| `/api/settings/ldap/test` | POST | LDAP 测试(支持草稿 + 可选测试账号) |
|
||||||
|
| `/api/summary` | GET | 概览统计(侧边栏徽标) |
|
||||||
|
| `/api/docs` | GET | 本文档与使用指南 Markdown |
|
||||||
|
|
||||||
|
## 状态码速查
|
||||||
|
|
||||||
|
| 状态 | 含义 |
|
||||||
|
|---|---|
|
||||||
|
| 400 | 参数错误 / 未启用对应功能 |
|
||||||
|
| 401 | 未登录 / token 过期 / 用户名或密码错误 |
|
||||||
|
| 403 | 需要 admin 角色 / 无该流水线的对应权限等级 |
|
||||||
|
| 404 | 资源不存在 |
|
||||||
|
| 409 | 名称重复等冲突 |
|
||||||
|
|
||||||
|
运行状态枚举:`pending → running → success | failed | cancelled`(Jenkins 队列阶段为 `queued`)。
|
||||||
@@ -0,0 +1,159 @@
|
|||||||
|
# FlowStack 使用指南
|
||||||
|
|
||||||
|
> 一句话读懂每个功能:**是什么 → 怎么用 → 实用技巧**。
|
||||||
|
|
||||||
|
## 快速开始(3 步跑通第一次发布)
|
||||||
|
|
||||||
|
1. **登录**:浏览器打开系统地址,用初始账号登录(初始密码在服务器 `data/initial-admin-password.txt` 或启动日志里)
|
||||||
|
2. **建流水线**:左侧「流水线」→ 新建流水线 → 填名称/仓库/部署方式 → 进入画布,从左侧任务库点选节点(源码→构建→部署)→ 点「保存」
|
||||||
|
3. **发布**:点「保存并运行」或「执行」,画布节点实时推进状态、底部日志滚动;结果可在「发布记录」查看,配置了飞书通知还会收到群卡片
|
||||||
|
|
||||||
|
## 流水线
|
||||||
|
|
||||||
|
**是什么**:把代码从拉取、构建、测试到部署的整个过程固化成一键可重复执行的流程。
|
||||||
|
|
||||||
|
**快速上手配置**:
|
||||||
|
- 画布编排:左侧 Task 任务库点击添加节点,拖拽摆位,从一个节点下方的连接点拖到另一个节点建立执行顺序
|
||||||
|
- 节点配置:点节点弹出右侧属性面板,修改参数(如 Git 仓库地址、镜像名)
|
||||||
|
- 基本信息 / 触发设置 / 变量和缓存 / 发布:编辑器顶部 Tab 切换,各自保存
|
||||||
|
- 触发方式:手动 / Webhook / Git Push / 定时(Cron),Webhook 触发会生成带 token 的调用地址,可直接配到 Git 仓库
|
||||||
|
|
||||||
|
**技巧**:
|
||||||
|
- `type=jenkins` 的流水线由 Jenkins 导入生成,执行时会真实触发 Jenkins 构建并回传日志
|
||||||
|
- 变量与缓存里定义的变量(如 `NODE_VERSION`)可在脚本中引用,配合 nvm 实现按次切换 Node 版本:`nvm install $NODE_VERSION`
|
||||||
|
- 流水线编辑器任务库支持搜索(按任务名/参数过滤)
|
||||||
|
|
||||||
|
## AI 智能助手
|
||||||
|
|
||||||
|
**是什么**:右下角悬浮的对话助手,用自然语言描述就能触发发布,配置 AI 后还能回答系统使用问题。
|
||||||
|
|
||||||
|
**怎么用**:
|
||||||
|
- 输入「发布 cex-agent-server、cex-agent-api 到 pre 分支」→ 出现发布计划卡片 → 确认发布 → 每个服务的运行编号(runId)直接回显
|
||||||
|
- 未在流水线里的 Jenkins Job 会自动创建流水线再触发
|
||||||
|
|
||||||
|
**技巧**:
|
||||||
|
- 在系统设置 → AI 助手里配置大模型(DeepSeek/GLM/Qwen/Kimi/Ollama 预设一键填地址);**不配置也能用**——自动降级为本地规则匹配模式
|
||||||
|
- 发布失败时 AI 自动分析日志尾部(结论/根因/建议),在发布记录展开可见
|
||||||
|
- 流式输出支持「停止」中断长回答
|
||||||
|
|
||||||
|
## 批量发布
|
||||||
|
|
||||||
|
**是什么**:一次把多个服务按顺序或并发发布。
|
||||||
|
|
||||||
|
**怎么用**(粘贴清单模式):
|
||||||
|
```
|
||||||
|
cex-agent-server
|
||||||
|
cex-agent-api
|
||||||
|
cex-agent-admin
|
||||||
|
```
|
||||||
|
粘贴多行服务名 → 选分支(快捷 chips:pre/test/main)→ 解析预览 → 开始串行/并发发布。
|
||||||
|
|
||||||
|
**技巧**:TAG 模式支持「服务名+版本号」成对粘贴(每行一个,或 `name=V1.0`);`#` 开头的行是注释;也可以用 AI 助手一句话触发批量发布。
|
||||||
|
|
||||||
|
## GitOps 部署
|
||||||
|
|
||||||
|
**是什么**:把 Git 仓库当作部署状态的唯一事实来源——改配置就是改 Git,系统负责让集群和仓库保持一致。
|
||||||
|
|
||||||
|
**怎么用**:
|
||||||
|
1. 在 Git 仓库里用 Kustomize/Helm 描述每个应用的部署参数
|
||||||
|
2. 本页登记应用(仓库/路径/集群/命名空间)
|
||||||
|
3. 「同步」把仓库声明推到集群;「资源树」看应用创建了哪些 K8s 资源;「差异对比」看 Git 与集群当前的不一致
|
||||||
|
|
||||||
|
**技巧**:开启自动同步后 Git 提交即自动部署;「待同步」状态说明集群和 Git 有差异,点同步即可收敛。
|
||||||
|
|
||||||
|
## Jenkins 集成
|
||||||
|
|
||||||
|
**是什么**:把现有 Jenkins Job 导入 FlowStack 统一管理,执行时真实触发 Jenkins 并把控制台日志实时回传。
|
||||||
|
|
||||||
|
**怎么用**:左侧「Jenkins导入」→ 添加服务器(地址+用户+API Token)→ 测试连接 → 拉取 Job 树 → 勾选导入 → 在流水线列表出现 `Jenkins` 标记的流水线。
|
||||||
|
|
||||||
|
**技巧**:Token 只写不回显,编辑留空表示不修改;批量发布/AI 助手提到未导入的 Job 会自动创建流水线,无需先来导入页。
|
||||||
|
|
||||||
|
## 构建节点
|
||||||
|
|
||||||
|
**是什么**:执行构建任务的机器,支持标签调度、并发上限和健康检查。
|
||||||
|
|
||||||
|
**怎么用**:添加节点(名称/IP/标签/并发数)→「测试连接」验证可达 →「磁盘性能」跑 dd 实测读写速度(写入/读取 MB/s 直接显示在卡片上)。
|
||||||
|
|
||||||
|
**技巧**:
|
||||||
|
- 本机节点(127.0.0.1)磁盘测试直接本地执行;远程节点需先关联 SSH 凭证
|
||||||
|
- 磁盘速度颜色分级:绿 >200MB/s(SSD 级)、黄 50-200、红 <50(需关注)
|
||||||
|
|
||||||
|
## 工具配置
|
||||||
|
|
||||||
|
**是什么**:构建环境的工具清单与安装策略,Ubuntu 导向。
|
||||||
|
|
||||||
|
**技巧**:
|
||||||
|
- 每个工具带一键复制的安装命令(`apt install ...` / nvm 脚本)
|
||||||
|
- Node 用 nvm 管理:默认版本在此设置,流水线构建时 `nvm install $NODE_VERSION` 灵活切换
|
||||||
|
- 「检测」真实执行版本探测命令(如 `java -version`);「安装」是保守策略——只检测不自动下载
|
||||||
|
- `deploy/Dockerfile.buildnode` 一键构建 Ubuntu 构建节点镜像
|
||||||
|
|
||||||
|
## 飞书 / Lark 通知与 Webhook
|
||||||
|
|
||||||
|
**是什么**:发布成功/失败自动向群推送结果卡片(应用/分支/构建/状态/时间 + 「查看构建详情」按钮直达 Jenkins)。
|
||||||
|
|
||||||
|
**怎么用**:系统设置 → 消息通知 → 填群机器人 Webhook(和可选的签名密钥)→「发送测试卡片」验证。
|
||||||
|
|
||||||
|
**技巧**:
|
||||||
|
- 单条流水线可在「基本信息」里单独填通知 Webhook,优先于全局配置
|
||||||
|
- 通用 Webhook 回调(发给第三方系统,HMAC-SHA256 签名)也在系统设置 → 消息通知里配置
|
||||||
|
|
||||||
|
## 用户与 LDAP
|
||||||
|
|
||||||
|
**是什么**:本地账号 + 企业目录(LDAP/AD)账号统一登录。
|
||||||
|
|
||||||
|
**怎么用**:
|
||||||
|
- 系统设置 → 用户目录:启用 LDAP,填服务器/Bind DN/Base DN → 测试连接(可带测试账号验证)→ 保存
|
||||||
|
- 用户管理页出现「从 LDAP 导入」→ 勾选导入;列表来源徽章区分「本地账号」和「LDAP 导入」
|
||||||
|
|
||||||
|
**技巧**:
|
||||||
|
- LDAP 用户密码在目录中管理(不落库),首登自动建号
|
||||||
|
- 未启用 LDAP 时导入按钮自动隐藏
|
||||||
|
|
||||||
|
## 环境与凭证
|
||||||
|
|
||||||
|
**是什么**:环境管理登记主机与 Kubernetes 集群(真实连通测试);凭证集中保管敏感信息。
|
||||||
|
|
||||||
|
**技巧**:
|
||||||
|
- 凭证内容 AES 加密存储、只写不回显,编辑留空=不修改
|
||||||
|
- SSH 凭证关联构建节点后即可远程磁盘测试
|
||||||
|
|
||||||
|
## 流水线权限
|
||||||
|
|
||||||
|
**是什么**:按流水线控制「谁能看、谁能发布、谁能改」。未被授权的普通用户看不到任何流水线与发布记录(默认拒绝);管理员始终拥有全部权限。
|
||||||
|
|
||||||
|
**三级权限**:
|
||||||
|
|
||||||
|
| 等级 | 能做什么 |
|
||||||
|
|---|---|
|
||||||
|
| 查看 | 看流水线、发布记录、发布成功/失败日志(只读,不能构建) |
|
||||||
|
| 发布 | 查看 + 触发构建、批量发布、失败重试 |
|
||||||
|
| 管理 | 发布 + 编辑流水线配置、管理该流水线的成员授权 |
|
||||||
|
|
||||||
|
**怎么授权(管理员,系统 → 流水线权限)**:
|
||||||
|
- 新建权限组 → **选择流水线**:直接勾选要授权的流水线(推荐,全程点选)
|
||||||
|
- 或 **名称匹配(高级)**:只写 `cex-*` 这类通配符(`*` 代表任意字符,无需正则),一次授权整批,之后新建的同名流水线自动纳入
|
||||||
|
- 选好权限等级,勾选成员,保存即生效
|
||||||
|
- 也可以在单条流水线里:编辑器顶栏「成员」按钮,给个别人单独授权(作为权限组的例外补充)
|
||||||
|
|
||||||
|
**普通用户能看什么**:
|
||||||
|
- 菜单只剩「发布」组(流水线/批量发布/发布记录)和「文档中心」;资源、集成、GitOps、系统管理类菜单全部隐藏(直接输 URL 也会被拦回)
|
||||||
|
- 流水线列表只显示被授权的;按钮按等级显隐:查看级只有只读入口,发布级出现「执行/保存并运行/重试」,管理级才有「保存/成员」
|
||||||
|
- 新建/删除流水线、凭证/主机/集群/构建节点等资源管理仅管理员
|
||||||
|
|
||||||
|
**技巧**:
|
||||||
|
- AI 助手批量发布同样受控:对未授权的 Job 会在结果里明确标注「无该流水线的执行权限」
|
||||||
|
- 构建日志 SSE 已要求登录(`?token=` 传递会话),未登录直接访问返回 401
|
||||||
|
|
||||||
|
## 常见问题
|
||||||
|
|
||||||
|
**初始密码在哪**:服务器 `data/initial-admin-password.txt` 或 `grep -A6 "已生成管理员账号" logs/flowstack.log`
|
||||||
|
|
||||||
|
**默认端口**:9527,可用 `PORT=xxxx ./run.sh` 覆盖
|
||||||
|
|
||||||
|
**页面打不开/跳转循环**:访问一次 `http://<地址>/?_clear=1` 清除浏览器缓存的旧重定向
|
||||||
|
|
||||||
|
**深色模式**:侧边栏底部太阳/月亮按钮,或系统设置 → 通用 → 主题模式(跟随系统可选)
|
||||||
|
|
||||||
|
**API 调用**:见「接口文档」页——所有 `/api/*` 需带登录 token(`Authorization: Bearer <token>`)
|
||||||
@@ -36,6 +36,7 @@ func Init() error {
|
|||||||
|
|
||||||
if err := DB.AutoMigrate(
|
if err := DB.AutoMigrate(
|
||||||
&model.User{},
|
&model.User{},
|
||||||
|
&model.PipelineRole{}, &model.PipelineMember{},
|
||||||
&model.Pipeline{}, &model.PipelineNode{}, &model.PipelineEdge{},
|
&model.Pipeline{}, &model.PipelineNode{}, &model.PipelineEdge{},
|
||||||
&model.PipelineRun{}, &model.RunStage{}, &model.LogEntry{},
|
&model.PipelineRun{}, &model.RunStage{}, &model.LogEntry{},
|
||||||
&model.Application{}, &model.Plugin{},
|
&model.Application{}, &model.Plugin{},
|
||||||
@@ -106,9 +107,9 @@ func seedDemoData() {
|
|||||||
|
|
||||||
log.Println("[seed] 首次启动,写入示例数据…")
|
log.Println("[seed] 首次启动,写入示例数据…")
|
||||||
|
|
||||||
// ---- 流水线 1:aiops-backend(Go + K8s) ----
|
// ---- 流水线 1:aiops-backend(Go + Kubernetes) ----
|
||||||
backend := model.Pipeline{
|
backend := model.Pipeline{
|
||||||
Name: "aiops-backend", Description: "AIOps 后端服务(Go + K8s 滚动发布)",
|
Name: "aiops-backend", Description: "AIOps 后端服务(Go + Kubernetes 滚动发布)",
|
||||||
Type: "native", SourceRepo: "https://gitee.com/attacker/aiops.git", SourceBranch: "master",
|
Type: "native", SourceRepo: "https://gitee.com/attacker/aiops.git", SourceBranch: "master",
|
||||||
DeployType: "k8s", Env: "production",
|
DeployType: "k8s", Env: "production",
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -362,6 +362,7 @@ func AiRelease(hub *Hub) gin.HandlerFunc {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
autoCreate := body.AutoCreate == nil || *body.AutoCreate
|
autoCreate := body.AutoCreate == nil || *body.AutoCreate
|
||||||
|
username, isAdmin := currentUser(c)
|
||||||
|
|
||||||
candidates := allCandidates()
|
candidates := allCandidates()
|
||||||
type triggered struct {
|
type triggered struct {
|
||||||
@@ -378,12 +379,24 @@ func AiRelease(hub *Hub) gin.HandlerFunc {
|
|||||||
var failList []failed
|
var failList []failed
|
||||||
|
|
||||||
for _, name := range body.Jobs {
|
for _, name := range body.Jobs {
|
||||||
|
// 权限预检(operator 及以上):已存在的流水线按完整权限判定;
|
||||||
|
// 未导入的 Jenkins Job 按正则角色命中判定,且必须先于自动创建——避免建出请求者自己都无权可见的流水线
|
||||||
|
var existing model.Pipeline
|
||||||
|
if database.DB.Where("name = ? OR jenkins_job_name = ?", name, name).First(&existing).Error == nil {
|
||||||
|
if pipelineAccessLevel(username, isAdmin, &existing) < LevelRank(LevelOperator) {
|
||||||
|
failList = append(failList, failed{Job: name, Reason: "无该流水线的执行权限"})
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
} else if !isAdmin && roleLevelForName(username, name) < LevelRank(LevelOperator) {
|
||||||
|
failList = append(failList, failed{Job: name, Reason: "无该流水线的执行权限(权限组未匹配该名称)"})
|
||||||
|
continue
|
||||||
|
}
|
||||||
p, created, err := resolvePipeline(name, candidates, autoCreate, body.JenkinsServerID)
|
p, created, err := resolvePipeline(name, candidates, autoCreate, body.JenkinsServerID)
|
||||||
if err != nil {
|
if err != nil {
|
||||||
failList = append(failList, failed{Job: name, Reason: err.Error()})
|
failList = append(failList, failed{Job: name, Reason: err.Error()})
|
||||||
continue
|
continue
|
||||||
}
|
}
|
||||||
run, err := triggerPipelineRun(hub, *p, body.Branch, body.Env, "admin", "batch")
|
run, err := triggerPipelineRun(hub, *p, body.Branch, body.Env, username, "batch")
|
||||||
if err != nil {
|
if err != nil {
|
||||||
failList = append(failList, failed{Job: name, Reason: "触发失败: " + err.Error()})
|
failList = append(failList, failed{Job: name, Reason: "触发失败: " + err.Error()})
|
||||||
continue
|
continue
|
||||||
|
|||||||
@@ -68,23 +68,28 @@ func VerifyToken(token string) (string, error) {
|
|||||||
return parts[0], nil
|
return parts[0], nil
|
||||||
}
|
}
|
||||||
|
|
||||||
// AuthMiddleware 会话鉴权:仅保护 /api/*(豁免登录/入站 Webhook/SSE 日志流);SPA 与静态资源放行
|
// AuthMiddleware 会话鉴权:仅保护 /api/*(豁免登录/入站 Webhook);SPA 与静态资源放行。
|
||||||
|
// SSE 日志流(*/logs/stream)的 EventSource 无法携带 Authorization 头,额外接受 ?token= 查询参数。
|
||||||
func AuthMiddleware() gin.HandlerFunc {
|
func AuthMiddleware() gin.HandlerFunc {
|
||||||
return func(c *gin.Context) {
|
return func(c *gin.Context) {
|
||||||
p := c.Request.URL.Path
|
p := c.Request.URL.Path
|
||||||
if p == "/health" || !strings.HasPrefix(p, "/api/") ||
|
if p == "/health" || !strings.HasPrefix(p, "/api/") ||
|
||||||
p == "/api/auth/login" ||
|
p == "/api/auth/login" ||
|
||||||
strings.HasPrefix(p, "/api/hooks/") ||
|
strings.HasPrefix(p, "/api/hooks/") {
|
||||||
strings.HasSuffix(p, "/logs/stream") {
|
|
||||||
c.Next()
|
c.Next()
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
auth := c.GetHeader("Authorization")
|
token := ""
|
||||||
if !strings.HasPrefix(auth, "Bearer ") {
|
if auth := c.GetHeader("Authorization"); strings.HasPrefix(auth, "Bearer ") {
|
||||||
|
token = strings.TrimPrefix(auth, "Bearer ")
|
||||||
|
} else if strings.HasSuffix(p, "/logs/stream") {
|
||||||
|
token = c.Query("token")
|
||||||
|
}
|
||||||
|
if token == "" {
|
||||||
c.AbortWithStatusJSON(http.StatusUnauthorized, gin.H{"error": "未登录"})
|
c.AbortWithStatusJSON(http.StatusUnauthorized, gin.H{"error": "未登录"})
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
username, err := VerifyToken(strings.TrimPrefix(auth, "Bearer "))
|
username, err := VerifyToken(token)
|
||||||
if err != nil {
|
if err != nil {
|
||||||
c.AbortWithStatusJSON(http.StatusUnauthorized, gin.H{"error": "登录已失效,请重新登录"})
|
c.AbortWithStatusJSON(http.StatusUnauthorized, gin.H{"error": "登录已失效,请重新登录"})
|
||||||
return
|
return
|
||||||
@@ -100,6 +105,15 @@ func AuthMiddleware() gin.HandlerFunc {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Me GET /api/me —— 当前会话信息(前端菜单分级与按钮权限依据)
|
||||||
|
func Me(c *gin.Context) {
|
||||||
|
c.JSON(http.StatusOK, gin.H{
|
||||||
|
"username": c.GetString("username"),
|
||||||
|
"role": c.GetString("role"),
|
||||||
|
"isAdmin": c.GetString("role") == "admin",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
// AdminOnly 管理员专用接口守卫
|
// AdminOnly 管理员专用接口守卫
|
||||||
func AdminOnly() gin.HandlerFunc {
|
func AdminOnly() gin.HandlerFunc {
|
||||||
return func(c *gin.Context) {
|
return func(c *gin.Context) {
|
||||||
|
|||||||
@@ -0,0 +1,31 @@
|
|||||||
|
package handler
|
||||||
|
|
||||||
|
import (
|
||||||
|
"embed"
|
||||||
|
"io/fs"
|
||||||
|
"net/http"
|
||||||
|
"os"
|
||||||
|
"time"
|
||||||
|
|
||||||
|
"github.com/gin-gonic/gin"
|
||||||
|
)
|
||||||
|
|
||||||
|
// GetDocs 返回文档端点:运行目录 docs/ 下同名文件优先(可热更新),否则用内嵌副本。
|
||||||
|
func GetDocs(docsFS embed.FS) gin.HandlerFunc {
|
||||||
|
readDoc := func(name string) string {
|
||||||
|
if data, err := os.ReadFile("docs/" + name); err == nil {
|
||||||
|
return string(data)
|
||||||
|
}
|
||||||
|
if data, err := fs.ReadFile(docsFS, "docs/"+name); err == nil {
|
||||||
|
return string(data)
|
||||||
|
}
|
||||||
|
return ""
|
||||||
|
}
|
||||||
|
return func(c *gin.Context) {
|
||||||
|
c.JSON(http.StatusOK, gin.H{
|
||||||
|
"guide": readDoc("GUIDE.md"),
|
||||||
|
"api": readDoc("API.md"),
|
||||||
|
"updatedAt": time.Now().Format("2006-01-02 15:04:05"),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,226 @@
|
|||||||
|
package handler
|
||||||
|
|
||||||
|
import (
|
||||||
|
"net/http"
|
||||||
|
"regexp"
|
||||||
|
"strings"
|
||||||
|
|
||||||
|
"github.com/gin-gonic/gin"
|
||||||
|
|
||||||
|
"flowstack/internal/database"
|
||||||
|
"flowstack/internal/model"
|
||||||
|
)
|
||||||
|
|
||||||
|
// 三级流水线权限:viewer 查看 / operator 执行 / owner 管理;admin 全局豁免(等级 4)
|
||||||
|
const (
|
||||||
|
LevelViewer = "viewer"
|
||||||
|
LevelOperator = "operator"
|
||||||
|
LevelOwner = "owner"
|
||||||
|
|
||||||
|
adminAccessLevel = 4
|
||||||
|
)
|
||||||
|
|
||||||
|
// LevelRank 数值化权限等级,用于比较
|
||||||
|
func LevelRank(level string) int {
|
||||||
|
switch level {
|
||||||
|
case LevelOwner:
|
||||||
|
return 3
|
||||||
|
case LevelOperator:
|
||||||
|
return 2
|
||||||
|
case LevelViewer:
|
||||||
|
return 1
|
||||||
|
}
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
|
||||||
|
// currentUser 从 AuthMiddleware 注入的上下文取当前用户
|
||||||
|
func currentUser(c *gin.Context) (username string, isAdmin bool) {
|
||||||
|
return c.GetString("username"), c.GetString("role") == "admin"
|
||||||
|
}
|
||||||
|
|
||||||
|
func memberInList(members []string, username string) bool {
|
||||||
|
for _, m := range members {
|
||||||
|
if m == username {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
// globToRegexp 通配符(* 任意字符、? 单字符)转正则,其余字符按字面量——操作员无需正则知识
|
||||||
|
func globToRegexp(glob string) *regexp.Regexp {
|
||||||
|
expr := regexp.QuoteMeta(glob)
|
||||||
|
expr = strings.ReplaceAll(expr, `\*`, `.*`)
|
||||||
|
expr = strings.ReplaceAll(expr, `\?`, `.`)
|
||||||
|
return regexp.MustCompile(expr)
|
||||||
|
}
|
||||||
|
|
||||||
|
// roleMatchPipeline 权限组是否覆盖某流水线:manual 按多选 ID、pattern 按通配符匹配名称
|
||||||
|
func roleMatchPipeline(role *model.PipelineRole, p *model.Pipeline) bool {
|
||||||
|
if role.ScopeMode == "pattern" {
|
||||||
|
if role.Pattern == "" {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
re := globToRegexp(role.Pattern)
|
||||||
|
return re.MatchString(p.Name) || (p.JenkinsJobName != "" && re.MatchString(p.JenkinsJobName))
|
||||||
|
}
|
||||||
|
for _, id := range role.PipelineIDs {
|
||||||
|
if id == p.ID {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
// roleLevelForPipeline 用户通过权限组对某流水线获得的最高等级(manual + pattern 一并计算)
|
||||||
|
func roleLevelForPipeline(username string, p *model.Pipeline) int {
|
||||||
|
if username == "" {
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
var roles []model.PipelineRole
|
||||||
|
database.DB.Find(&roles)
|
||||||
|
best := 0
|
||||||
|
for i := range roles {
|
||||||
|
role := &roles[i]
|
||||||
|
if !memberInList(role.Members, username) {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
if roleMatchPipeline(role, p) {
|
||||||
|
if r := LevelRank(role.Level); r > best {
|
||||||
|
best = r
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return best
|
||||||
|
}
|
||||||
|
|
||||||
|
// roleLevelForName 按名称预检(AI 自动创建前):只有 pattern 模式能命中尚未创建的流水线
|
||||||
|
func roleLevelForName(username string, name string) int {
|
||||||
|
if username == "" {
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
var roles []model.PipelineRole
|
||||||
|
database.DB.Find(&roles)
|
||||||
|
best := 0
|
||||||
|
for _, role := range roles {
|
||||||
|
if !memberInList(role.Members, username) || role.ScopeMode != "pattern" || role.Pattern == "" {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
if globToRegexp(role.Pattern).MatchString(name) {
|
||||||
|
if r := LevelRank(role.Level); r > best {
|
||||||
|
best = r
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return best
|
||||||
|
}
|
||||||
|
|
||||||
|
// pipelineAccessLevel 用户对某流水线的最高权限等级:
|
||||||
|
// admin 豁免 → 单流水线直接成员 → 权限组命中(manual/pattern,取最大值)
|
||||||
|
func pipelineAccessLevel(username string, isAdmin bool, p *model.Pipeline) int {
|
||||||
|
if isAdmin {
|
||||||
|
return adminAccessLevel
|
||||||
|
}
|
||||||
|
best := 0
|
||||||
|
var member model.PipelineMember
|
||||||
|
if err := database.DB.Where("pipeline_id = ? AND username = ?", p.ID, username).First(&member).Error; err == nil {
|
||||||
|
best = LevelRank(member.Level)
|
||||||
|
}
|
||||||
|
if r := roleLevelForPipeline(username, p); r > best {
|
||||||
|
best = r
|
||||||
|
}
|
||||||
|
return best
|
||||||
|
}
|
||||||
|
|
||||||
|
// AccessiblePipelineIDs 列表过滤用:直接成员 ∪ 权限组命中的流水线 ID。
|
||||||
|
// 第二个返回值表示是否需要过滤:admin 返回 (nil, false) 全量可见;
|
||||||
|
// 普通用户返回 (ids, true),ids 可为空 = 无任何可见流水线
|
||||||
|
func AccessiblePipelineIDs(username string, isAdmin bool) ([]uint, bool) {
|
||||||
|
if isAdmin {
|
||||||
|
return nil, false
|
||||||
|
}
|
||||||
|
if username == "" {
|
||||||
|
return []uint{}, true
|
||||||
|
}
|
||||||
|
ids := map[uint]bool{}
|
||||||
|
var memberIDs []uint
|
||||||
|
database.DB.Model(&model.PipelineMember{}).Where("username = ?", username).Pluck("pipeline_id", &memberIDs)
|
||||||
|
for _, id := range memberIDs {
|
||||||
|
ids[id] = true
|
||||||
|
}
|
||||||
|
|
||||||
|
var roles []model.PipelineRole
|
||||||
|
database.DB.Find(&roles)
|
||||||
|
patterns := make([]*regexp.Regexp, 0, len(roles))
|
||||||
|
for i := range roles {
|
||||||
|
role := &roles[i]
|
||||||
|
if !memberInList(role.Members, username) {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
if role.ScopeMode == "pattern" && role.Pattern != "" {
|
||||||
|
patterns = append(patterns, globToRegexp(role.Pattern))
|
||||||
|
} else {
|
||||||
|
for _, id := range role.PipelineIDs {
|
||||||
|
ids[id] = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if len(patterns) > 0 {
|
||||||
|
var pipelines []model.Pipeline
|
||||||
|
database.DB.Select("id", "name", "jenkins_job_name").Find(&pipelines)
|
||||||
|
for _, p := range pipelines {
|
||||||
|
for _, re := range patterns {
|
||||||
|
if re.MatchString(p.Name) || (p.JenkinsJobName != "" && re.MatchString(p.JenkinsJobName)) {
|
||||||
|
ids[p.ID] = true
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
out := make([]uint, 0, len(ids))
|
||||||
|
for id := range ids {
|
||||||
|
out = append(out, id)
|
||||||
|
}
|
||||||
|
return out, true
|
||||||
|
}
|
||||||
|
|
||||||
|
// RequirePipelineAccess 流水线级权限守卫:解析 :id 后按最低等级校验,通过后注入 pipeline
|
||||||
|
func RequirePipelineAccess(minLevel int) gin.HandlerFunc {
|
||||||
|
return func(c *gin.Context) {
|
||||||
|
var p model.Pipeline
|
||||||
|
if err := database.DB.First(&p, c.Param("id")).Error; err != nil {
|
||||||
|
c.AbortWithStatusJSON(http.StatusNotFound, gin.H{"error": "pipeline not found"})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
username, isAdmin := currentUser(c)
|
||||||
|
if pipelineAccessLevel(username, isAdmin, &p) < minLevel {
|
||||||
|
c.AbortWithStatusJSON(http.StatusForbidden, gin.H{"error": "无权访问该流水线"})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
c.Set("pipeline", &p)
|
||||||
|
c.Next()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// RequireRunAccess 运行级权限守卫:runId → run → pipeline 再校验(防 runId 绕过流水线权限)
|
||||||
|
func RequireRunAccess(minLevel int) gin.HandlerFunc {
|
||||||
|
return func(c *gin.Context) {
|
||||||
|
var run model.PipelineRun
|
||||||
|
if err := database.DB.Where("run_id = ?", c.Param("runId")).First(&run).Error; err != nil {
|
||||||
|
c.AbortWithStatusJSON(http.StatusNotFound, gin.H{"error": "run not found"})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
var p model.Pipeline
|
||||||
|
if err := database.DB.First(&p, run.PipelineID).Error; err != nil {
|
||||||
|
c.AbortWithStatusJSON(http.StatusNotFound, gin.H{"error": "pipeline not found"})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
username, isAdmin := currentUser(c)
|
||||||
|
if pipelineAccessLevel(username, isAdmin, &p) < minLevel {
|
||||||
|
c.AbortWithStatusJSON(http.StatusForbidden, gin.H{"error": "无权访问该流水线的运行记录"})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
c.Set("pipeline", &p)
|
||||||
|
c.Next()
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,212 @@
|
|||||||
|
package handler
|
||||||
|
|
||||||
|
import (
|
||||||
|
"net/http"
|
||||||
|
|
||||||
|
"github.com/gin-gonic/gin"
|
||||||
|
|
||||||
|
"flowstack/internal/database"
|
||||||
|
"flowstack/internal/model"
|
||||||
|
)
|
||||||
|
|
||||||
|
// ============================================================
|
||||||
|
// 流水线权限组(默认手动多选流水线;高级模式用 * 通配符匹配名称)—— 仅管理员
|
||||||
|
// ============================================================
|
||||||
|
|
||||||
|
type roleBody struct {
|
||||||
|
Name string `json:"name"`
|
||||||
|
ScopeMode string `json:"scopeMode"` // manual 手动多选 | pattern 名称匹配
|
||||||
|
Pattern string `json:"pattern"` // scopeMode=pattern 时生效,支持 * 通配符
|
||||||
|
PipelineIDs []uint `json:"pipelineIds"`
|
||||||
|
Level string `json:"level"`
|
||||||
|
Members []string `json:"members"`
|
||||||
|
}
|
||||||
|
|
||||||
|
func validateRoleBody(b *roleBody) string {
|
||||||
|
if b.Name == "" {
|
||||||
|
return "名称不能为空"
|
||||||
|
}
|
||||||
|
if b.ScopeMode == "" {
|
||||||
|
b.ScopeMode = "manual"
|
||||||
|
}
|
||||||
|
if b.ScopeMode != "manual" && b.ScopeMode != "pattern" {
|
||||||
|
return "授权范围类型不合法"
|
||||||
|
}
|
||||||
|
if b.ScopeMode == "pattern" && b.Pattern == "" {
|
||||||
|
return "名称匹配需要填写匹配规则,如 cex-*"
|
||||||
|
}
|
||||||
|
if b.ScopeMode == "manual" && len(b.PipelineIDs) == 0 {
|
||||||
|
return "请至少选择一条流水线"
|
||||||
|
}
|
||||||
|
if LevelRank(b.Level) == 0 {
|
||||||
|
return "请选择权限等级"
|
||||||
|
}
|
||||||
|
return ""
|
||||||
|
}
|
||||||
|
|
||||||
|
// ListPipelineRoles GET /api/pipeline-roles —— 附匹配流水线数
|
||||||
|
func ListPipelineRoles(c *gin.Context) {
|
||||||
|
var roles []model.PipelineRole
|
||||||
|
database.DB.Order("id").Find(&roles)
|
||||||
|
var pipelines []model.Pipeline
|
||||||
|
database.DB.Select("id", "name", "jenkins_job_name").Find(&pipelines)
|
||||||
|
|
||||||
|
type roleWithCount struct {
|
||||||
|
model.PipelineRole
|
||||||
|
MatchedPipelines int `json:"matchedPipelines"`
|
||||||
|
}
|
||||||
|
out := make([]roleWithCount, 0, len(roles))
|
||||||
|
for i := range roles {
|
||||||
|
role := &roles[i]
|
||||||
|
n := 0
|
||||||
|
for j := range pipelines {
|
||||||
|
if roleMatchPipeline(role, &pipelines[j]) {
|
||||||
|
n++
|
||||||
|
}
|
||||||
|
}
|
||||||
|
out = append(out, roleWithCount{PipelineRole: *role, MatchedPipelines: n})
|
||||||
|
}
|
||||||
|
c.JSON(http.StatusOK, out)
|
||||||
|
}
|
||||||
|
|
||||||
|
// CreatePipelineRole POST /api/pipeline-roles
|
||||||
|
func CreatePipelineRole(c *gin.Context) {
|
||||||
|
var body roleBody
|
||||||
|
if err := c.ShouldBindJSON(&body); err != nil {
|
||||||
|
c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if msg := validateRoleBody(&body); msg != "" {
|
||||||
|
c.JSON(http.StatusBadRequest, gin.H{"error": msg})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
role := model.PipelineRole{
|
||||||
|
Name: body.Name, ScopeMode: body.ScopeMode, Pattern: body.Pattern,
|
||||||
|
PipelineIDs: body.PipelineIDs, Level: body.Level, Members: body.Members,
|
||||||
|
}
|
||||||
|
if role.PipelineIDs == nil {
|
||||||
|
role.PipelineIDs = []uint{}
|
||||||
|
}
|
||||||
|
if role.Members == nil {
|
||||||
|
role.Members = []string{}
|
||||||
|
}
|
||||||
|
if err := database.DB.Create(&role).Error; err != nil {
|
||||||
|
c.JSON(http.StatusInternalServerError, gin.H{"error": "创建失败(名称可能已存在): " + err.Error()})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
c.JSON(http.StatusOK, role)
|
||||||
|
}
|
||||||
|
|
||||||
|
// UpdatePipelineRole PUT /api/pipeline-roles/:id
|
||||||
|
func UpdatePipelineRole(c *gin.Context) {
|
||||||
|
var role model.PipelineRole
|
||||||
|
if err := database.DB.First(&role, c.Param("id")).Error; err != nil {
|
||||||
|
c.JSON(http.StatusNotFound, gin.H{"error": "权限组不存在"})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
var body roleBody
|
||||||
|
if err := c.ShouldBindJSON(&body); err != nil {
|
||||||
|
c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if msg := validateRoleBody(&body); msg != "" {
|
||||||
|
c.JSON(http.StatusBadRequest, gin.H{"error": msg})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
role.Name, role.ScopeMode, role.Pattern = body.Name, body.ScopeMode, body.Pattern
|
||||||
|
role.PipelineIDs, role.Level, role.Members = body.PipelineIDs, body.Level, body.Members
|
||||||
|
if role.PipelineIDs == nil {
|
||||||
|
role.PipelineIDs = []uint{}
|
||||||
|
}
|
||||||
|
if role.Members == nil {
|
||||||
|
role.Members = []string{}
|
||||||
|
}
|
||||||
|
if err := database.DB.Save(&role).Error; err != nil {
|
||||||
|
c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
c.JSON(http.StatusOK, role)
|
||||||
|
}
|
||||||
|
|
||||||
|
// DeletePipelineRole DELETE /api/pipeline-roles/:id
|
||||||
|
func DeletePipelineRole(c *gin.Context) {
|
||||||
|
database.DB.Delete(&model.PipelineRole{}, c.Param("id"))
|
||||||
|
c.JSON(http.StatusOK, gin.H{"success": true})
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================================
|
||||||
|
// 单流水线成员(云效式直接授权)—— owner 或 admin
|
||||||
|
// ============================================================
|
||||||
|
|
||||||
|
// ListPipelineMembers GET /api/pipelines/:id/members —— 直接成员 + 命中的权限组(只读参考)
|
||||||
|
func ListPipelineMembers(c *gin.Context) {
|
||||||
|
p, _ := c.Get("pipeline")
|
||||||
|
pipeline := p.(*model.Pipeline)
|
||||||
|
|
||||||
|
var members []model.PipelineMember
|
||||||
|
database.DB.Where("pipeline_id = ?", pipeline.ID).Order("id").Find(&members)
|
||||||
|
|
||||||
|
var roles []model.PipelineRole
|
||||||
|
database.DB.Find(&roles)
|
||||||
|
type matchedRole struct {
|
||||||
|
Name string `json:"name"`
|
||||||
|
Level string `json:"level"`
|
||||||
|
Pattern string `json:"pattern"`
|
||||||
|
Mode string `json:"mode"`
|
||||||
|
Members []string `json:"members"`
|
||||||
|
}
|
||||||
|
matched := make([]matchedRole, 0)
|
||||||
|
for i := range roles {
|
||||||
|
role := &roles[i]
|
||||||
|
if roleMatchPipeline(role, pipeline) {
|
||||||
|
matched = append(matched, matchedRole{Name: role.Name, Level: role.Level, Pattern: role.Pattern, Mode: role.ScopeMode, Members: role.Members})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
c.JSON(http.StatusOK, gin.H{"members": members, "matchedRoles": matched})
|
||||||
|
}
|
||||||
|
|
||||||
|
// AddPipelineMember POST /api/pipelines/:id/members —— 已存在则更新等级
|
||||||
|
func AddPipelineMember(c *gin.Context) {
|
||||||
|
p, _ := c.Get("pipeline")
|
||||||
|
pipeline := p.(*model.Pipeline)
|
||||||
|
|
||||||
|
var body struct {
|
||||||
|
Username string `json:"username"`
|
||||||
|
Level string `json:"level"`
|
||||||
|
}
|
||||||
|
if err := c.ShouldBindJSON(&body); err != nil || body.Username == "" {
|
||||||
|
c.JSON(http.StatusBadRequest, gin.H{"error": "请选择用户"})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if LevelRank(body.Level) == 0 {
|
||||||
|
c.JSON(http.StatusBadRequest, gin.H{"error": "请选择权限等级"})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
var user model.User
|
||||||
|
if err := database.DB.Where("username = ?", body.Username).First(&user).Error; err != nil {
|
||||||
|
c.JSON(http.StatusBadRequest, gin.H{"error": "用户不存在(LDAP 用户请先导入或登录一次)"})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
var member model.PipelineMember
|
||||||
|
if err := database.DB.Where("pipeline_id = ? AND username = ?", pipeline.ID, body.Username).First(&member).Error; err == nil {
|
||||||
|
member.Level = body.Level
|
||||||
|
database.DB.Save(&member)
|
||||||
|
c.JSON(http.StatusOK, member)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
member = model.PipelineMember{PipelineID: pipeline.ID, Username: body.Username, Level: body.Level}
|
||||||
|
if err := database.DB.Create(&member).Error; err != nil {
|
||||||
|
c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
c.JSON(http.StatusOK, member)
|
||||||
|
}
|
||||||
|
|
||||||
|
// DeletePipelineMember DELETE /api/pipelines/:id/members/:mid
|
||||||
|
func DeletePipelineMember(c *gin.Context) {
|
||||||
|
p, _ := c.Get("pipeline")
|
||||||
|
pipeline := p.(*model.Pipeline)
|
||||||
|
database.DB.Where("pipeline_id = ? AND id = ?", pipeline.ID, c.Param("mid")).Delete(&model.PipelineMember{})
|
||||||
|
c.JSON(http.StatusOK, gin.H{"success": true})
|
||||||
|
}
|
||||||
@@ -14,10 +14,17 @@ import (
|
|||||||
"flowstack/internal/model"
|
"flowstack/internal/model"
|
||||||
)
|
)
|
||||||
|
|
||||||
// ListPipelines GET /api/pipelines —— 附带每条流水线最近一次运行信息
|
// ListPipelines GET /api/pipelines —— 附带每条流水线最近一次运行信息与当前用户权限等级
|
||||||
func ListPipelines(c *gin.Context) {
|
func ListPipelines(c *gin.Context) {
|
||||||
|
username, isAdmin := currentUser(c)
|
||||||
|
ids, filter := AccessiblePipelineIDs(username, isAdmin)
|
||||||
|
|
||||||
|
q := database.DB.Order("updated_at DESC")
|
||||||
|
if filter {
|
||||||
|
q = q.Where("id IN ?", ids)
|
||||||
|
}
|
||||||
var list []model.Pipeline
|
var list []model.Pipeline
|
||||||
database.DB.Order("updated_at DESC").Find(&list)
|
q.Find(&list)
|
||||||
|
|
||||||
// 每流水线最近一次 run(一次查询取全表后内存分组,数据量小;jianmu 用反规范化表,此处无需)
|
// 每流水线最近一次 run(一次查询取全表后内存分组,数据量小;jianmu 用反规范化表,此处无需)
|
||||||
var runs []model.PipelineRun
|
var runs []model.PipelineRun
|
||||||
@@ -31,11 +38,12 @@ func ListPipelines(c *gin.Context) {
|
|||||||
|
|
||||||
type pipelineWithLastRun struct {
|
type pipelineWithLastRun struct {
|
||||||
model.Pipeline
|
model.Pipeline
|
||||||
LastRun *model.PipelineRun `json:"lastRun"`
|
LastRun *model.PipelineRun `json:"lastRun"`
|
||||||
|
AccessLevel int `json:"accessLevel"` // 1查看 2执行 3管理 4管理员
|
||||||
}
|
}
|
||||||
result := make([]pipelineWithLastRun, 0, len(list))
|
result := make([]pipelineWithLastRun, 0, len(list))
|
||||||
for _, p := range list {
|
for _, p := range list {
|
||||||
item := pipelineWithLastRun{Pipeline: p}
|
item := pipelineWithLastRun{Pipeline: p, AccessLevel: pipelineAccessLevel(username, isAdmin, &p)}
|
||||||
if r, ok := lastByPipeline[p.ID]; ok {
|
if r, ok := lastByPipeline[p.ID]; ok {
|
||||||
item.LastRun = &r
|
item.LastRun = &r
|
||||||
}
|
}
|
||||||
@@ -57,8 +65,10 @@ func GetPipelineDetail(c *gin.Context) {
|
|||||||
database.DB.Where("pipeline_id = ?", p.ID).Find(&edges)
|
database.DB.Where("pipeline_id = ?", p.ID).Find(&edges)
|
||||||
var lastRun model.PipelineRun
|
var lastRun model.PipelineRun
|
||||||
hasRun := database.DB.Where("pipeline_id = ?", p.ID).Order("started_at DESC").First(&lastRun).Error == nil
|
hasRun := database.DB.Where("pipeline_id = ?", p.ID).Order("started_at DESC").First(&lastRun).Error == nil
|
||||||
|
username, isAdmin := currentUser(c)
|
||||||
c.JSON(http.StatusOK, gin.H{
|
c.JSON(http.StatusOK, gin.H{
|
||||||
"pipeline": p, "nodes": nodes, "edges": edges,
|
"pipeline": p, "nodes": nodes, "edges": edges,
|
||||||
|
"accessLevel": pipelineAccessLevel(username, isAdmin, &p),
|
||||||
"lastRun": func() *model.PipelineRun {
|
"lastRun": func() *model.PipelineRun {
|
||||||
if hasRun {
|
if hasRun {
|
||||||
return &lastRun
|
return &lastRun
|
||||||
|
|||||||
@@ -305,6 +305,12 @@ func summarizeCredential(typ, contentJSON string) string {
|
|||||||
return typ + " " + pick("server") + " " + pick("username")
|
return typ + " " + pick("server") + " " + pick("username")
|
||||||
case "git":
|
case "git":
|
||||||
return typ + " " + pick("url", "username")
|
return typ + " " + pick("url", "username")
|
||||||
|
case "kubernetes":
|
||||||
|
mode, _ := m["mode"].(string)
|
||||||
|
if mode == "kubeconfig" {
|
||||||
|
return "K8s Kubeconfig"
|
||||||
|
}
|
||||||
|
return "K8s Token " + pick("namespace") + "@" + pick("apiServer")
|
||||||
case "kubeconfig":
|
case "kubeconfig":
|
||||||
return typ + " (kubeconfig)"
|
return typ + " (kubeconfig)"
|
||||||
case "aksk":
|
case "aksk":
|
||||||
|
|||||||
@@ -29,7 +29,12 @@ func CreateRun(hub *Hub) gin.HandlerFunc {
|
|||||||
}
|
}
|
||||||
_ = c.ShouldBindJSON(&body)
|
_ = c.ShouldBindJSON(&body)
|
||||||
|
|
||||||
run, err := triggerPipelineRun(hub, p, body.Branch, body.Env, body.TriggerBy, body.TriggerType)
|
// 触发人以会话身份为准(服务端可信,覆盖前端传入)
|
||||||
|
triggerBy := c.GetString("username")
|
||||||
|
if triggerBy == "" {
|
||||||
|
triggerBy = body.TriggerBy
|
||||||
|
}
|
||||||
|
run, err := triggerPipelineRun(hub, p, body.Branch, body.Env, triggerBy, body.TriggerType)
|
||||||
if err != nil {
|
if err != nil {
|
||||||
c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
|
c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
|
||||||
return
|
return
|
||||||
@@ -222,9 +227,15 @@ func stageScript(st *model.RunStage) []string {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// ListRuns GET /api/runs?pipelineId=&status=
|
// ListRuns GET /api/runs?pipelineId=&status= —— 按流水线可见性过滤,附 canRetry
|
||||||
func ListRuns(c *gin.Context) {
|
func ListRuns(c *gin.Context) {
|
||||||
|
username, isAdmin := currentUser(c)
|
||||||
|
ids, filter := AccessiblePipelineIDs(username, isAdmin)
|
||||||
|
|
||||||
q := database.DB.Model(&model.PipelineRun{}).Order("started_at DESC").Limit(100)
|
q := database.DB.Model(&model.PipelineRun{}).Order("started_at DESC").Limit(100)
|
||||||
|
if filter {
|
||||||
|
q = q.Where("pipeline_id IN ?", ids)
|
||||||
|
}
|
||||||
if v := c.Query("pipelineId"); v != "" {
|
if v := c.Query("pipelineId"); v != "" {
|
||||||
q = q.Where("pipeline_id = ?", v)
|
q = q.Where("pipeline_id = ?", v)
|
||||||
}
|
}
|
||||||
@@ -233,7 +244,25 @@ func ListRuns(c *gin.Context) {
|
|||||||
}
|
}
|
||||||
var runs []model.PipelineRun
|
var runs []model.PipelineRun
|
||||||
q.Find(&runs)
|
q.Find(&runs)
|
||||||
c.JSON(http.StatusOK, runs)
|
|
||||||
|
type runWithPerm struct {
|
||||||
|
model.PipelineRun
|
||||||
|
CanRetry bool `json:"canRetry"`
|
||||||
|
}
|
||||||
|
levelCache := map[uint]int{}
|
||||||
|
out := make([]runWithPerm, 0, len(runs))
|
||||||
|
for _, r := range runs {
|
||||||
|
lv, ok := levelCache[r.PipelineID]
|
||||||
|
if !ok {
|
||||||
|
var p model.Pipeline
|
||||||
|
if database.DB.First(&p, r.PipelineID).Error == nil {
|
||||||
|
lv = pipelineAccessLevel(username, isAdmin, &p)
|
||||||
|
}
|
||||||
|
levelCache[r.PipelineID] = lv
|
||||||
|
}
|
||||||
|
out = append(out, runWithPerm{PipelineRun: r, CanRetry: lv >= LevelRank(LevelOperator)})
|
||||||
|
}
|
||||||
|
c.JSON(http.StatusOK, out)
|
||||||
}
|
}
|
||||||
|
|
||||||
// GetRun GET /api/runs/:runId
|
// GetRun GET /api/runs/:runId
|
||||||
@@ -316,7 +345,7 @@ func RetryRun(hub *Hub) gin.HandlerFunc {
|
|||||||
c.JSON(http.StatusNotFound, gin.H{"error": "pipeline not found"})
|
c.JSON(http.StatusNotFound, gin.H{"error": "pipeline not found"})
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
run, err := triggerPipelineRun(hub, p, prev.Branch, prev.Env, "admin", "manual")
|
run, err := triggerPipelineRun(hub, p, prev.Branch, prev.Env, c.GetString("username"), "manual")
|
||||||
if err != nil {
|
if err != nil {
|
||||||
c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
|
c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
|
||||||
return
|
return
|
||||||
|
|||||||
@@ -40,6 +40,30 @@ type Pipeline struct {
|
|||||||
UpdatedAt time.Time `json:"updatedAt"`
|
UpdatedAt time.Time `json:"updatedAt"`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// PipelineRole 流水线权限角色:默认手动多选流水线(scopeMode=manual),
|
||||||
|
// 高级模式用通配符 Pattern(scopeMode=pattern,如 cex-*,免正则)批量匹配名称
|
||||||
|
type PipelineRole struct {
|
||||||
|
ID uint `gorm:"primaryKey" json:"id"`
|
||||||
|
Name string `gorm:"uniqueIndex" json:"name"` // 如 cex 发布组
|
||||||
|
ScopeMode string `gorm:"default:manual" json:"scopeMode"` // manual 手动多选 | pattern 名称匹配
|
||||||
|
Pattern string `json:"pattern"` // scopeMode=pattern 时生效,支持 * 通配符
|
||||||
|
PipelineIDs []uint `gorm:"serializer:json" json:"pipelineIds"` // scopeMode=manual 时生效
|
||||||
|
Level string `gorm:"default:viewer" json:"level"` // viewer | operator | owner
|
||||||
|
Members []string `gorm:"serializer:json" json:"members"` // 授权用户名列表
|
||||||
|
CreatedAt time.Time `json:"createdAt"`
|
||||||
|
UpdatedAt time.Time `json:"updatedAt"`
|
||||||
|
}
|
||||||
|
|
||||||
|
// PipelineMember 单流水线直接授权(云效式成员管理,作正则角色的例外补充)
|
||||||
|
type PipelineMember struct {
|
||||||
|
ID uint `gorm:"primaryKey" json:"id"`
|
||||||
|
PipelineID uint `gorm:"uniqueIndex:idx_pipeline_member" json:"pipelineId"`
|
||||||
|
Username string `gorm:"uniqueIndex:idx_pipeline_member" json:"username"`
|
||||||
|
Level string `gorm:"default:viewer" json:"level"` // viewer | operator | owner
|
||||||
|
CreatedAt time.Time `json:"createdAt"`
|
||||||
|
UpdatedAt time.Time `json:"updatedAt"`
|
||||||
|
}
|
||||||
|
|
||||||
// PipelineNode 画布节点(JSON 字段名与前端 React Flow 对齐)
|
// PipelineNode 画布节点(JSON 字段名与前端 React Flow 对齐)
|
||||||
type PipelineNode struct {
|
type PipelineNode struct {
|
||||||
ID uint `gorm:"primaryKey" json:"dbId"`
|
ID uint `gorm:"primaryKey" json:"dbId"`
|
||||||
|
|||||||
+113
-68
@@ -19,6 +19,11 @@ import (
|
|||||||
//go:embed all:static
|
//go:embed all:static
|
||||||
var staticFS embed.FS
|
var staticFS embed.FS
|
||||||
|
|
||||||
|
// 使用指南与接口文档(运行目录 docs/ 优先)
|
||||||
|
//
|
||||||
|
//go:embed docs/GUIDE.md docs/API.md
|
||||||
|
var docsFS embed.FS
|
||||||
|
|
||||||
func main() {
|
func main() {
|
||||||
if err := database.Init(); err != nil {
|
if err := database.Init(); err != nil {
|
||||||
panic("数据库初始化失败: " + err.Error())
|
panic("数据库初始化失败: " + err.Error())
|
||||||
@@ -54,100 +59,140 @@ func main() {
|
|||||||
{
|
{
|
||||||
api.POST("/auth/login", handler.Login)
|
api.POST("/auth/login", handler.Login)
|
||||||
api.POST("/auth/logout", func(c *gin.Context) { c.JSON(200, gin.H{"success": true}) })
|
api.POST("/auth/logout", func(c *gin.Context) { c.JSON(200, gin.H{"success": true}) })
|
||||||
|
api.GET("/me", handler.Me)
|
||||||
|
|
||||||
// 用户管理(管理员)
|
// 用户管理(列表登录即可读——权限成员选择器需要;增删改仅管理员)
|
||||||
|
api.GET("/users", handler.ListUsers)
|
||||||
users := api.Group("/users", handler.AdminOnly())
|
users := api.Group("/users", handler.AdminOnly())
|
||||||
{
|
{
|
||||||
users.GET("", handler.ListUsers)
|
|
||||||
users.POST("", handler.CreateUser)
|
users.POST("", handler.CreateUser)
|
||||||
users.PUT("/:id", handler.UpdateUser)
|
users.PUT("/:id", handler.UpdateUser)
|
||||||
users.DELETE("/:id", handler.DeleteUser)
|
users.DELETE("/:id", handler.DeleteUser)
|
||||||
users.POST("/:id/reset-password", handler.ResetPassword)
|
users.POST("/:id/reset-password", handler.ResetPassword)
|
||||||
users.POST("/ldap-import", handler.LdapImport)
|
users.POST("/ldap-import", handler.LdapImport)
|
||||||
}
|
}
|
||||||
|
// 流水线权限角色(管理员;Jenkins Item-role 正则风格)
|
||||||
|
pipelineRoles := api.Group("/pipeline-roles", handler.AdminOnly())
|
||||||
|
{
|
||||||
|
pipelineRoles.GET("", handler.ListPipelineRoles)
|
||||||
|
pipelineRoles.POST("", handler.CreatePipelineRole)
|
||||||
|
pipelineRoles.PUT("/:id", handler.UpdatePipelineRole)
|
||||||
|
pipelineRoles.DELETE("/:id", handler.DeletePipelineRole)
|
||||||
|
}
|
||||||
api.POST("/ldap/users", handler.AdminOnly(), handler.LdapListUsers)
|
api.POST("/ldap/users", handler.AdminOnly(), handler.LdapListUsers)
|
||||||
api.POST("/settings/ldap/test", handler.AdminOnly(), handler.TestLDAP)
|
api.POST("/settings/ldap/test", handler.AdminOnly(), handler.TestLDAP)
|
||||||
|
api.GET("/docs", handler.GetDocs(docsFS))
|
||||||
|
|
||||||
api.GET("/summary", handler.GetSummary)
|
api.GET("/summary", handler.GetSummary)
|
||||||
api.GET("/settings", handler.GetSettings)
|
api.GET("/settings", handler.AdminOnly(), handler.GetSettings)
|
||||||
api.PUT("/settings", handler.UpdateSettings)
|
api.PUT("/settings", handler.AdminOnly(), handler.UpdateSettings)
|
||||||
api.POST("/settings/test-llm", handler.TestLLM)
|
api.POST("/settings/test-llm", handler.AdminOnly(), handler.TestLLM)
|
||||||
api.POST("/settings/test-lark", handler.TestLark)
|
api.POST("/settings/test-lark", handler.AdminOnly(), handler.TestLark)
|
||||||
|
|
||||||
api.POST("/ai/chat", handler.AiChat)
|
api.POST("/ai/chat", handler.AiChat)
|
||||||
api.POST("/ai/chat/stream", handler.AiChatStream)
|
api.POST("/ai/chat/stream", handler.AiChatStream)
|
||||||
api.POST("/ai/release", handler.AiRelease(hub))
|
api.POST("/ai/release", handler.AiRelease(hub))
|
||||||
api.POST("/batch/parse", handler.BatchParse)
|
api.POST("/batch/parse", handler.BatchParse)
|
||||||
|
|
||||||
|
// 流水线:查看 viewer / 编辑配置 owner / 触发构建 operator;新建与删除仅管理员
|
||||||
api.GET("/pipelines", handler.ListPipelines)
|
api.GET("/pipelines", handler.ListPipelines)
|
||||||
api.POST("/pipelines", handler.CreatePipeline)
|
api.POST("/pipelines", handler.AdminOnly(), handler.CreatePipeline)
|
||||||
api.GET("/pipelines/:id", handler.GetPipelineDetail)
|
api.GET("/pipelines/:id", handler.RequirePipelineAccess(handler.LevelRank(handler.LevelViewer)), handler.GetPipelineDetail)
|
||||||
api.PUT("/pipelines/:id", handler.UpdatePipeline)
|
api.PUT("/pipelines/:id", handler.RequirePipelineAccess(handler.LevelRank(handler.LevelOwner)), handler.UpdatePipeline)
|
||||||
api.DELETE("/pipelines/:id", handler.DeletePipeline)
|
api.DELETE("/pipelines/:id", handler.AdminOnly(), handler.DeletePipeline)
|
||||||
api.PUT("/pipelines/:id/nodes", handler.SaveNodes)
|
api.PUT("/pipelines/:id/nodes", handler.RequirePipelineAccess(handler.LevelRank(handler.LevelOwner)), handler.SaveNodes)
|
||||||
api.PUT("/pipelines/:id/edges", handler.SaveEdges)
|
api.PUT("/pipelines/:id/edges", handler.RequirePipelineAccess(handler.LevelRank(handler.LevelOwner)), handler.SaveEdges)
|
||||||
api.POST("/pipelines/:id/runs", handler.CreateRun(hub))
|
api.POST("/pipelines/:id/runs", handler.RequirePipelineAccess(handler.LevelRank(handler.LevelOperator)), handler.CreateRun(hub))
|
||||||
api.POST("/hooks/pipeline/:id", handler.InboundPipelineHook(hub))
|
api.POST("/hooks/pipeline/:id", handler.InboundPipelineHook(hub))
|
||||||
|
|
||||||
|
// 单流水线成员:查看列表 viewer,增删 owner
|
||||||
|
api.GET("/pipelines/:id/members", handler.RequirePipelineAccess(handler.LevelRank(handler.LevelViewer)), handler.ListPipelineMembers)
|
||||||
|
api.POST("/pipelines/:id/members", handler.RequirePipelineAccess(handler.LevelRank(handler.LevelOwner)), handler.AddPipelineMember)
|
||||||
|
api.DELETE("/pipelines/:id/members/:mid", handler.RequirePipelineAccess(handler.LevelRank(handler.LevelOwner)), handler.DeletePipelineMember)
|
||||||
|
|
||||||
api.GET("/runs", handler.ListRuns)
|
api.GET("/runs", handler.ListRuns)
|
||||||
api.GET("/runs/:runId", handler.GetRun)
|
api.GET("/runs/:runId", handler.RequireRunAccess(handler.LevelRank(handler.LevelViewer)), handler.GetRun)
|
||||||
api.GET("/runs/:runId/logs/stream", handler.StreamLogs(hub))
|
api.GET("/runs/:runId/logs/stream", handler.RequireRunAccess(handler.LevelRank(handler.LevelViewer)), handler.StreamLogs(hub))
|
||||||
api.POST("/runs/:runId/retry", handler.RetryRun(hub))
|
api.POST("/runs/:runId/retry", handler.RequireRunAccess(handler.LevelRank(handler.LevelOperator)), handler.RetryRun(hub))
|
||||||
|
|
||||||
api.GET("/gitops/apps", handler.ListGitOpsApps)
|
// GitOps 部署(全局基础设施操作,未按流水线隔离)→ 管理员
|
||||||
api.GET("/gitops/argo/apps", handler.ArgoList)
|
gitops := api.Group("/gitops", handler.AdminOnly())
|
||||||
api.POST("/gitops/argo/sync", handler.ArgoSync)
|
{
|
||||||
api.GET("/gitops/argo/:appName/tree", handler.ArgoResourceTree)
|
gitops.GET("/apps", handler.ListGitOpsApps)
|
||||||
api.GET("/gitops/argo/:appName/diff", handler.ArgoDiff)
|
gitops.GET("/argo/apps", handler.ArgoList)
|
||||||
|
gitops.POST("/argo/sync", handler.ArgoSync)
|
||||||
|
gitops.GET("/argo/:appName/tree", handler.ArgoResourceTree)
|
||||||
|
gitops.GET("/argo/:appName/diff", handler.ArgoDiff)
|
||||||
|
}
|
||||||
|
|
||||||
api.GET("/plugins", handler.ListPlugins)
|
// 插件市场 → 管理员
|
||||||
api.GET("/plugins/available", handler.AvailablePlugins)
|
plugins := api.Group("/plugins", handler.AdminOnly())
|
||||||
api.POST("/plugins/install", handler.InstallPlugin)
|
{
|
||||||
api.POST("/plugins/:id/toggle", handler.TogglePlugin)
|
plugins.GET("", handler.ListPlugins)
|
||||||
api.DELETE("/plugins/:id", handler.UninstallPlugin)
|
plugins.GET("/available", handler.AvailablePlugins)
|
||||||
|
plugins.POST("/install", handler.InstallPlugin)
|
||||||
|
plugins.POST("/:id/toggle", handler.TogglePlugin)
|
||||||
|
plugins.DELETE("/:id", handler.UninstallPlugin)
|
||||||
|
}
|
||||||
|
|
||||||
api.GET("/hosts", handler.ListHosts)
|
// 资源(主机/集群/凭证/构建节点/工具/Webhook)与 Jenkins 集成 → 管理员
|
||||||
api.POST("/hosts", handler.CreateHost)
|
hosts := api.Group("/hosts", handler.AdminOnly())
|
||||||
api.PUT("/hosts/:id", handler.UpdateHost)
|
{
|
||||||
api.DELETE("/hosts/:id", handler.DeleteHost)
|
hosts.GET("", handler.ListHosts)
|
||||||
api.POST("/hosts/:id/test", handler.TestHost)
|
hosts.POST("", handler.CreateHost)
|
||||||
|
hosts.PUT("/:id", handler.UpdateHost)
|
||||||
api.GET("/clusters", handler.ListClusters)
|
hosts.DELETE("/:id", handler.DeleteHost)
|
||||||
api.POST("/clusters", handler.CreateCluster)
|
hosts.POST("/:id/test", handler.TestHost)
|
||||||
api.PUT("/clusters/:id", handler.UpdateCluster)
|
}
|
||||||
api.DELETE("/clusters/:id", handler.DeleteCluster)
|
clusters := api.Group("/clusters", handler.AdminOnly())
|
||||||
api.POST("/clusters/:id/test", handler.TestCluster)
|
{
|
||||||
|
clusters.GET("", handler.ListClusters)
|
||||||
api.GET("/credentials", handler.ListCredentials)
|
clusters.POST("", handler.CreateCluster)
|
||||||
api.POST("/credentials", handler.CreateCredential)
|
clusters.PUT("/:id", handler.UpdateCluster)
|
||||||
api.PUT("/credentials/:id", handler.UpdateCredential)
|
clusters.DELETE("/:id", handler.DeleteCluster)
|
||||||
api.DELETE("/credentials/:id", handler.DeleteCredential)
|
clusters.POST("/:id/test", handler.TestCluster)
|
||||||
|
}
|
||||||
api.GET("/build-nodes", handler.ListBuildNodes)
|
credentials := api.Group("/credentials", handler.AdminOnly())
|
||||||
api.POST("/build-nodes", handler.CreateBuildNode)
|
{
|
||||||
api.PUT("/build-nodes/:id", handler.UpdateBuildNode)
|
credentials.GET("", handler.ListCredentials)
|
||||||
api.DELETE("/build-nodes/:id", handler.DeleteBuildNode)
|
credentials.POST("", handler.CreateCredential)
|
||||||
api.POST("/build-nodes/:id/test", handler.TestBuildNode)
|
credentials.PUT("/:id", handler.UpdateCredential)
|
||||||
api.POST("/build-nodes/:id/disk-test", handler.TestBuildNodeDisk)
|
credentials.DELETE("/:id", handler.DeleteCredential)
|
||||||
|
}
|
||||||
api.GET("/tools", handler.ListTools)
|
buildNodes := api.Group("/build-nodes", handler.AdminOnly())
|
||||||
api.PUT("/tools/:id", handler.UpdateTool)
|
{
|
||||||
api.POST("/tools/:id/check", handler.CheckTool)
|
buildNodes.GET("", handler.ListBuildNodes)
|
||||||
api.POST("/tools/:id/install", handler.InstallTool)
|
buildNodes.POST("", handler.CreateBuildNode)
|
||||||
|
buildNodes.PUT("/:id", handler.UpdateBuildNode)
|
||||||
api.GET("/webhooks", handler.ListWebhooks)
|
buildNodes.DELETE("/:id", handler.DeleteBuildNode)
|
||||||
api.POST("/webhooks", handler.CreateWebhook)
|
buildNodes.POST("/:id/test", handler.TestBuildNode)
|
||||||
api.PUT("/webhooks/:id", handler.UpdateWebhook)
|
buildNodes.POST("/:id/disk-test", handler.TestBuildNodeDisk)
|
||||||
api.DELETE("/webhooks/:id", handler.DeleteWebhook)
|
}
|
||||||
api.POST("/webhooks/:id/test", handler.TestWebhook)
|
tools := api.Group("/tools", handler.AdminOnly())
|
||||||
|
{
|
||||||
api.GET("/jenkins-servers", handler.ListJenkinsServers)
|
tools.GET("", handler.ListTools)
|
||||||
api.POST("/jenkins-servers", handler.CreateJenkinsServer)
|
tools.PUT("/:id", handler.UpdateTool)
|
||||||
api.PUT("/jenkins-servers/:id", handler.UpdateJenkinsServer)
|
tools.POST("/:id/check", handler.CheckTool)
|
||||||
api.DELETE("/jenkins-servers/:id", handler.DeleteJenkinsServer)
|
tools.POST("/:id/install", handler.InstallTool)
|
||||||
api.POST("/jenkins-servers/:id/test", handler.TestJenkinsServer)
|
}
|
||||||
api.GET("/jenkins-servers/:id/jobs", handler.ListJenkinsJobs)
|
webhooks := api.Group("/webhooks", handler.AdminOnly())
|
||||||
api.POST("/jenkins-servers/:id/import", handler.ImportJenkinsJobs)
|
{
|
||||||
|
webhooks.GET("", handler.ListWebhooks)
|
||||||
|
webhooks.POST("", handler.CreateWebhook)
|
||||||
|
webhooks.PUT("/:id", handler.UpdateWebhook)
|
||||||
|
webhooks.DELETE("/:id", handler.DeleteWebhook)
|
||||||
|
webhooks.POST("/:id/test", handler.TestWebhook)
|
||||||
|
}
|
||||||
|
jenkins := api.Group("/jenkins-servers", handler.AdminOnly())
|
||||||
|
{
|
||||||
|
jenkins.GET("", handler.ListJenkinsServers)
|
||||||
|
jenkins.POST("", handler.CreateJenkinsServer)
|
||||||
|
jenkins.PUT("/:id", handler.UpdateJenkinsServer)
|
||||||
|
jenkins.DELETE("/:id", handler.DeleteJenkinsServer)
|
||||||
|
jenkins.POST("/:id/test", handler.TestJenkinsServer)
|
||||||
|
jenkins.GET("/:id/jobs", handler.ListJenkinsJobs)
|
||||||
|
jenkins.POST("/:id/import", handler.ImportJenkinsJobs)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
distFS, _ := fs.Sub(staticFS, "static")
|
distFS, _ := fs.Sub(staticFS, "static")
|
||||||
|
|||||||
Generated
+32
-51
@@ -44,6 +44,8 @@
|
|||||||
"embla-carousel-react": "^8.6.0",
|
"embla-carousel-react": "^8.6.0",
|
||||||
"input-otp": "^1.5.0",
|
"input-otp": "^1.5.0",
|
||||||
"lucide-react": "^0.562.0",
|
"lucide-react": "^0.562.0",
|
||||||
|
"marked": "^18.1.2",
|
||||||
|
"marked-gfm-heading-id": "^4.1.4",
|
||||||
"next-themes": "^0.4.6",
|
"next-themes": "^0.4.6",
|
||||||
"react": "^19.3.1",
|
"react": "^19.3.1",
|
||||||
"react-day-picker": "^9.14.0",
|
"react-day-picker": "^9.14.0",
|
||||||
@@ -3650,23 +3652,6 @@
|
|||||||
"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
|
"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/ajv": {
|
|
||||||
"version": "8.20.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.20.0.tgz",
|
|
||||||
"integrity": "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==",
|
|
||||||
"extraneous": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"fast-deep-equal": "^3.1.3",
|
|
||||||
"fast-uri": "^3.0.1",
|
|
||||||
"json-schema-traverse": "^1.0.0",
|
|
||||||
"require-from-string": "^2.0.2"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"type": "github",
|
|
||||||
"url": "https://github.com/sponsors/epoberezkin"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/ansi-styles": {
|
"node_modules/ansi-styles": {
|
||||||
"version": "4.3.0",
|
"version": "4.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||||
@@ -4737,23 +4722,6 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/fast-uri": {
|
|
||||||
"version": "3.1.9",
|
|
||||||
"resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.9.tgz",
|
|
||||||
"integrity": "sha512-hS/0Wt3Ya043oKXs0sIxrMpKQITXhMLIrVAKKXi4gozGC9v7YRWVnXIZzjNPTO02M9BdxLCWqK1yRXgNziVyJQ==",
|
|
||||||
"extraneous": true,
|
|
||||||
"funding": [
|
|
||||||
{
|
|
||||||
"type": "github",
|
|
||||||
"url": "https://github.com/sponsors/fastify"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "opencollective",
|
|
||||||
"url": "https://opencollective.com/fastify"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"license": "BSD-3-Clause"
|
|
||||||
},
|
|
||||||
"node_modules/fastq": {
|
"node_modules/fastq": {
|
||||||
"version": "1.20.3",
|
"version": "1.20.3",
|
||||||
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.3.tgz",
|
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.3.tgz",
|
||||||
@@ -4886,6 +4854,12 @@
|
|||||||
"node": ">=6"
|
"node": ">=6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/github-slugger": {
|
||||||
|
"version": "2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-2.0.0.tgz",
|
||||||
|
"integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==",
|
||||||
|
"license": "ISC"
|
||||||
|
},
|
||||||
"node_modules/glob-parent": {
|
"node_modules/glob-parent": {
|
||||||
"version": "6.0.2",
|
"version": "6.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
|
||||||
@@ -5136,13 +5110,6 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/json-schema-traverse": {
|
|
||||||
"version": "1.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
|
|
||||||
"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
|
|
||||||
"extraneous": true,
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/json-stable-stringify-without-jsonify": {
|
"node_modules/json-stable-stringify-without-jsonify": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
|
||||||
@@ -5267,6 +5234,30 @@
|
|||||||
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/marked": {
|
||||||
|
"version": "18.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/marked/-/marked-18.1.2.tgz",
|
||||||
|
"integrity": "sha512-DfOnvLAQ6WYeWxWO1u4RyFOeqyHup6dks5PPqnoFiooU7ipRvidO/2j8plhAHIiZg574E9ZlzSjUiPMLAzFkgg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"bin": {
|
||||||
|
"marked": "bin/marked.js"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 20"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/marked-gfm-heading-id": {
|
||||||
|
"version": "4.1.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/marked-gfm-heading-id/-/marked-gfm-heading-id-4.1.4.tgz",
|
||||||
|
"integrity": "sha512-CspnvVfHSkb/znqdPS4jUR8HtCjq3M/DnrsJCrfLBLvdrgbemmoINKpeWKQYkBiXAoBGejw0cV7xzqrPdup3WA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"github-slugger": "^2.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"marked": ">=13 <19"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/merge2": {
|
"node_modules/merge2": {
|
||||||
"version": "1.4.1",
|
"version": "1.4.1",
|
||||||
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
|
||||||
@@ -6021,16 +6012,6 @@
|
|||||||
"decimal.js-light": "^2.4.1"
|
"decimal.js-light": "^2.4.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/require-from-string": {
|
|
||||||
"version": "2.0.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
|
|
||||||
"integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
|
|
||||||
"extraneous": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"engines": {
|
|
||||||
"node": ">=0.10.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/resolve": {
|
"node_modules/resolve": {
|
||||||
"version": "1.22.13",
|
"version": "1.22.13",
|
||||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.13.tgz",
|
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.13.tgz",
|
||||||
|
|||||||
@@ -48,6 +48,8 @@
|
|||||||
"embla-carousel-react": "^8.6.0",
|
"embla-carousel-react": "^8.6.0",
|
||||||
"input-otp": "^1.5.0",
|
"input-otp": "^1.5.0",
|
||||||
"lucide-react": "^0.562.0",
|
"lucide-react": "^0.562.0",
|
||||||
|
"marked": "^18.1.2",
|
||||||
|
"marked-gfm-heading-id": "^4.1.4",
|
||||||
"next-themes": "^0.4.6",
|
"next-themes": "^0.4.6",
|
||||||
"react": "^19.3.1",
|
"react": "^19.3.1",
|
||||||
"react-day-picker": "^9.14.0",
|
"react-day-picker": "^9.14.0",
|
||||||
|
|||||||
+46
-8
@@ -1,7 +1,7 @@
|
|||||||
import { useState, useCallback, useEffect } from 'react';
|
import { useState, useCallback, useEffect } from 'react';
|
||||||
import { Toaster } from 'sonner';
|
import { Toaster } from 'sonner';
|
||||||
import { useLocation, useNavigate } from 'react-router';
|
import { useLocation, useNavigate } from 'react-router';
|
||||||
import { useQuery } from '@tanstack/react-query';
|
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||||||
import Sidebar from '@/components/Sidebar';
|
import Sidebar from '@/components/Sidebar';
|
||||||
import TopBar from '@/components/TopBar';
|
import TopBar from '@/components/TopBar';
|
||||||
import PipelineFlowEditor from '@/components/flow/PipelineFlowEditor';
|
import PipelineFlowEditor from '@/components/flow/PipelineFlowEditor';
|
||||||
@@ -17,18 +17,26 @@ import ToolConfig from '@/pages/ToolConfig';
|
|||||||
import JenkinsImport from '@/pages/JenkinsImport';
|
import JenkinsImport from '@/pages/JenkinsImport';
|
||||||
import BatchRelease from '@/pages/BatchRelease';
|
import BatchRelease from '@/pages/BatchRelease';
|
||||||
import ReleaseRecords from '@/pages/ReleaseRecords';
|
import ReleaseRecords from '@/pages/ReleaseRecords';
|
||||||
import WebhookConfig from '@/pages/WebhookConfig';
|
|
||||||
import GitOpsDeploy from '@/pages/GitOpsDeploy';
|
import GitOpsDeploy from '@/pages/GitOpsDeploy';
|
||||||
import PluginManager from '@/pages/PluginManager';
|
import PluginManager from '@/pages/PluginManager';
|
||||||
import SystemSettings from '@/pages/SystemSettings';
|
import SystemSettings from '@/pages/SystemSettings';
|
||||||
import AiAssistant from '@/components/ai/AiAssistant';
|
import AiAssistant from '@/components/ai/AiAssistant';
|
||||||
import Login from '@/pages/Login';
|
import Login from '@/pages/Login';
|
||||||
import UserManage from '@/pages/UserManage';
|
import UserManage from '@/pages/UserManage';
|
||||||
|
import Docs from '@/pages/Docs';
|
||||||
|
import PipelineRoles from '@/pages/PipelineRoles';
|
||||||
import { apiClient, auth } from '@/lib/api';
|
import { apiClient, auth } from '@/lib/api';
|
||||||
|
import { useSession } from '@/providers/session';
|
||||||
|
|
||||||
export type ModuleType = 'pipelines' | 'gitops' | 'batch-release' | 'release-records' | 'environments' | 'credentials' | 'build-nodes' | 'tools' | 'jenkins-import' | 'webhooks' | 'plugins' | 'users' | 'settings';
|
export type ModuleType = 'pipelines' | 'gitops' | 'batch-release' | 'release-records' | 'environments' | 'credentials' | 'build-nodes' | 'tools' | 'jenkins-import' | 'plugins' | 'users' | 'docs' | 'settings' | 'pipeline-roles';
|
||||||
export type EditorTab = '基本信息' | '流程配置' | '触发设置' | '变量和缓存' | '发布';
|
export type EditorTab = '基本信息' | '流程配置' | '触发设置' | '变量和缓存' | '发布';
|
||||||
|
|
||||||
|
// 仅管理员可见的模块(资源/集成/系统管理类)
|
||||||
|
const ADMIN_ONLY_MODULES = new Set<ModuleType>([
|
||||||
|
'gitops', 'environments', 'credentials', 'build-nodes', 'tools', 'jenkins-import',
|
||||||
|
'plugins', 'users', 'settings', 'pipeline-roles',
|
||||||
|
]);
|
||||||
|
|
||||||
// 路由 ↔ 模块映射(用户可直接访问 /release、/pipelines/1 等)
|
// 路由 ↔ 模块映射(用户可直接访问 /release、/pipelines/1 等)
|
||||||
const ROUTE_TO_MODULE: Record<string, ModuleType> = {
|
const ROUTE_TO_MODULE: Record<string, ModuleType> = {
|
||||||
'/': 'pipelines',
|
'/': 'pipelines',
|
||||||
@@ -41,10 +49,11 @@ const ROUTE_TO_MODULE: Record<string, ModuleType> = {
|
|||||||
'/build-nodes': 'build-nodes',
|
'/build-nodes': 'build-nodes',
|
||||||
'/tools': 'tools',
|
'/tools': 'tools',
|
||||||
'/jenkins-import': 'jenkins-import',
|
'/jenkins-import': 'jenkins-import',
|
||||||
'/webhooks': 'webhooks',
|
|
||||||
'/plugins': 'plugins',
|
'/plugins': 'plugins',
|
||||||
'/users': 'users',
|
'/users': 'users',
|
||||||
|
'/docs': 'docs',
|
||||||
'/settings': 'settings',
|
'/settings': 'settings',
|
||||||
|
'/pipeline-roles': 'pipeline-roles',
|
||||||
};
|
};
|
||||||
|
|
||||||
const MODULE_TO_ROUTE: Record<ModuleType, string> = {
|
const MODULE_TO_ROUTE: Record<ModuleType, string> = {
|
||||||
@@ -57,16 +66,19 @@ const MODULE_TO_ROUTE: Record<ModuleType, string> = {
|
|||||||
'build-nodes': '/build-nodes',
|
'build-nodes': '/build-nodes',
|
||||||
tools: '/tools',
|
tools: '/tools',
|
||||||
'jenkins-import': '/jenkins-import',
|
'jenkins-import': '/jenkins-import',
|
||||||
webhooks: '/webhooks',
|
|
||||||
plugins: '/plugins',
|
plugins: '/plugins',
|
||||||
users: '/users',
|
users: '/users',
|
||||||
|
docs: '/docs',
|
||||||
settings: '/settings',
|
settings: '/settings',
|
||||||
|
'pipeline-roles': '/pipeline-roles',
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
const queryClient = useQueryClient();
|
||||||
const [loggedIn, setLoggedIn] = useState(!!auth.getToken());
|
const [loggedIn, setLoggedIn] = useState(!!auth.getToken());
|
||||||
|
const { isAdmin, loading: sessionLoading } = useSession();
|
||||||
|
|
||||||
// 未登录访问任何页面 → 跳登录页
|
// 未登录访问任何页面 → 跳登录页
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -85,6 +97,13 @@ export default function App() {
|
|||||||
const [activeModule, setActiveModule] = useState<ModuleType>('pipelines');
|
const [activeModule, setActiveModule] = useState<ModuleType>('pipelines');
|
||||||
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
||||||
|
|
||||||
|
// 普通用户访问管理员模块 → 回流水线列表(菜单已隐藏,此处防直接输 URL)
|
||||||
|
useEffect(() => {
|
||||||
|
if (loggedIn && !sessionLoading && !isAdmin && ADMIN_ONLY_MODULES.has(activeModule)) {
|
||||||
|
navigate('/pipelines', { replace: true });
|
||||||
|
}
|
||||||
|
}, [loggedIn, sessionLoading, isAdmin, activeModule, navigate]);
|
||||||
|
|
||||||
// Pipeline list/editor view toggle
|
// Pipeline list/editor view toggle
|
||||||
const [pipelineView, setPipelineView] = useState<'list' | 'editor'>('list');
|
const [pipelineView, setPipelineView] = useState<'list' | 'editor'>('list');
|
||||||
const [currentPipelineId, setCurrentPipelineId] = useState<number>(1);
|
const [currentPipelineId, setCurrentPipelineId] = useState<number>(1);
|
||||||
@@ -95,6 +114,8 @@ export default function App() {
|
|||||||
// URL → 页面状态(直接输入/刷新/分享链接时恢复)
|
// URL → 页面状态(直接输入/刷新/分享链接时恢复)
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const path = location.pathname.replace(/\/+$/, '') || '/';
|
const path = location.pathname.replace(/\/+$/, '') || '/';
|
||||||
|
// 登录页不参与模块路由(否则与未登录跳转互相重定向形成死循环)
|
||||||
|
if (path === '/login') return;
|
||||||
const editorMatch = path.match(/^\/pipelines\/(\d+)/);
|
const editorMatch = path.match(/^\/pipelines\/(\d+)/);
|
||||||
if (editorMatch) {
|
if (editorMatch) {
|
||||||
setActiveModule('pipelines');
|
setActiveModule('pipelines');
|
||||||
@@ -137,6 +158,8 @@ export default function App() {
|
|||||||
const currentPipeline = pipelines.find((p: any) => p.id === currentPipelineId);
|
const currentPipeline = pipelines.find((p: any) => p.id === currentPipelineId);
|
||||||
const latestStatus = currentRuns[0]?.status as string | undefined;
|
const latestStatus = currentRuns[0]?.status as string | undefined;
|
||||||
const isPipelineRunning = latestStatus === 'running' || latestStatus === 'pending';
|
const isPipelineRunning = latestStatus === 'running' || latestStatus === 'pending';
|
||||||
|
// 当前用户对该流水线的权限等级:1 查看 / 2 执行 / 3 管理 / 4 管理员(列表未加载前按 4 乐观显示,后端强校验)
|
||||||
|
const editorAccessLevel = currentPipeline?.accessLevel ?? 4;
|
||||||
|
|
||||||
const handleSelectPipeline = useCallback((id: string) => {
|
const handleSelectPipeline = useCallback((id: string) => {
|
||||||
setCurrentPipelineId(Number(id) || 1);
|
setCurrentPipelineId(Number(id) || 1);
|
||||||
@@ -183,6 +206,7 @@ export default function App() {
|
|||||||
isRunning={isPipelineRunning}
|
isRunning={isPipelineRunning}
|
||||||
executionStatus={(latestStatus as 'running' | 'success' | 'failed' | 'cancelled') || 'idle'}
|
executionStatus={(latestStatus as 'running' | 'success' | 'failed' | 'cancelled') || 'idle'}
|
||||||
onBack={() => { setPipelineView('list'); navigate('/pipelines'); }}
|
onBack={() => { setPipelineView('list'); navigate('/pipelines'); }}
|
||||||
|
accessLevel={editorAccessLevel}
|
||||||
/>
|
/>
|
||||||
<div className="flex-1 flex overflow-hidden">
|
<div className="flex-1 flex overflow-hidden">
|
||||||
{activeTab === '流程配置' && (
|
{activeTab === '流程配置' && (
|
||||||
@@ -227,14 +251,16 @@ export default function App() {
|
|||||||
return <BatchRelease onViewRecords={() => goToModule('release-records')} />;
|
return <BatchRelease onViewRecords={() => goToModule('release-records')} />;
|
||||||
case 'release-records':
|
case 'release-records':
|
||||||
return <ReleaseRecords />;
|
return <ReleaseRecords />;
|
||||||
case 'webhooks':
|
|
||||||
return <WebhookConfig />;
|
|
||||||
case 'gitops':
|
case 'gitops':
|
||||||
return <GitOpsDeploy />;
|
return <GitOpsDeploy />;
|
||||||
case 'plugins':
|
case 'plugins':
|
||||||
return <PluginManager />;
|
return <PluginManager />;
|
||||||
case 'users':
|
case 'users':
|
||||||
return <UserManage />;
|
return <UserManage />;
|
||||||
|
case 'pipeline-roles':
|
||||||
|
return <PipelineRoles />;
|
||||||
|
case 'docs':
|
||||||
|
return <Docs />;
|
||||||
case 'settings':
|
case 'settings':
|
||||||
return <SystemSettings />;
|
return <SystemSettings />;
|
||||||
default:
|
default:
|
||||||
@@ -243,7 +269,19 @@ export default function App() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
if (!loggedIn || location.pathname === '/login') {
|
if (!loggedIn || location.pathname === '/login') {
|
||||||
return <Login onSuccess={() => { setLoggedIn(true); navigate('/pipelines', { replace: true }); }} />;
|
return (
|
||||||
|
<>
|
||||||
|
<Toaster position="top-right" richColors />
|
||||||
|
<Login
|
||||||
|
onSuccess={() => {
|
||||||
|
setLoggedIn(true);
|
||||||
|
// 刷新会话信息(切换账号后 ['me'] 缓存需要失效)
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['me'] });
|
||||||
|
navigate('/pipelines', { replace: true });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -15,6 +15,8 @@ export default function BasicInfoPanel({ pipelineId }: Props) {
|
|||||||
queryFn: () => apiClient.getPipeline(pipelineId),
|
queryFn: () => apiClient.getPipeline(pipelineId),
|
||||||
});
|
});
|
||||||
const p = detail?.pipeline;
|
const p = detail?.pipeline;
|
||||||
|
// 编辑权限:「管理」等级及以上才能保存
|
||||||
|
const canEdit = (detail?.accessLevel ?? 4) >= 3;
|
||||||
|
|
||||||
const [form, setForm] = useState({ name: '', description: '', sourceRepo: '', sourceBranch: '', deployType: 'host', env: 'staging', notifyWebhookURL: '' });
|
const [form, setForm] = useState({ name: '', description: '', sourceRepo: '', sourceBranch: '', deployType: 'host', env: 'staging', notifyWebhookURL: '' });
|
||||||
|
|
||||||
@@ -56,6 +58,7 @@ export default function BasicInfoPanel({ pipelineId }: Props) {
|
|||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
{p && <span className="text-[11px]" style={{ color: 'var(--text-tertiary)' }}>更新于 {new Date(p.updatedAt).toLocaleString('zh-CN', { hour12: false })}</span>}
|
{p && <span className="text-[11px]" style={{ color: 'var(--text-tertiary)' }}>更新于 {new Date(p.updatedAt).toLocaleString('zh-CN', { hour12: false })}</span>}
|
||||||
|
{canEdit && (
|
||||||
<button
|
<button
|
||||||
onClick={() => saveMutation.mutate(form)}
|
onClick={() => saveMutation.mutate(form)}
|
||||||
disabled={saveMutation.isPending || !form.name}
|
disabled={saveMutation.isPending || !form.name}
|
||||||
@@ -64,6 +67,7 @@ export default function BasicInfoPanel({ pipelineId }: Props) {
|
|||||||
>
|
>
|
||||||
{saveMutation.isPending ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Save className="w-3.5 h-3.5" />}保存
|
{saveMutation.isPending ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Save className="w-3.5 h-3.5" />}保存
|
||||||
</button>
|
</button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -88,7 +92,7 @@ export default function BasicInfoPanel({ pipelineId }: Props) {
|
|||||||
<label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>部署方式</label>
|
<label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>部署方式</label>
|
||||||
<select value={form.deployType} onChange={(e) => set('deployType', e.target.value)} className="w-full px-3 py-2 text-[13px] rounded-md border outline-none" style={inputStyle}>
|
<select value={form.deployType} onChange={(e) => set('deployType', e.target.value)} className="w-full px-3 py-2 text-[13px] rounded-md border outline-none" style={inputStyle}>
|
||||||
<option value="host">主机部署</option>
|
<option value="host">主机部署</option>
|
||||||
<option value="k8s">K8s 部署</option>
|
<option value="k8s">Kubernetes 部署</option>
|
||||||
<option value="gitops">GitOps</option>
|
<option value="gitops">GitOps</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -0,0 +1,212 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
import { Loader2, Trash2, UserPlus } from 'lucide-react';
|
||||||
|
import { apiClient } from '@/lib/api';
|
||||||
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
|
||||||
|
// 三级权限:大白话描述,普通操作员无需理解术语
|
||||||
|
export const LEVEL_OPTIONS = [
|
||||||
|
{ value: 'viewer', label: '查看', desc: '只能看流水线与发布成功/失败日志' },
|
||||||
|
{ value: 'operator', label: '发布', desc: '查看 + 触发构建、批量发布、失败重试' },
|
||||||
|
{ value: 'owner', label: '管理', desc: '发布 + 编辑流水线配置、管理成员' },
|
||||||
|
];
|
||||||
|
|
||||||
|
export function levelLabel(level: string): string {
|
||||||
|
return LEVEL_OPTIONS.find((l) => l.value === level)?.label ?? level;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const levelBadgeStyle: Record<string, { bg: string; color: string }> = {
|
||||||
|
viewer: { bg: '#f6f8fa', color: '#6e7781' },
|
||||||
|
operator: { bg: '#ddf4ff', color: '#0969da' },
|
||||||
|
owner: { bg: '#dafbe1', color: '#1a7f37' },
|
||||||
|
};
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
pipelineId: number;
|
||||||
|
pipelineName?: string;
|
||||||
|
open: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 单流水线成员弹窗:直接添加成员(选用户 + 点选等级),命中的权限组只读展示
|
||||||
|
export default function PipelineMembersDialog({ pipelineId, pipelineName, open, onClose }: Props) {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const [username, setUsername] = useState('');
|
||||||
|
const [level, setLevel] = useState('operator');
|
||||||
|
|
||||||
|
const membersQuery = useQuery({
|
||||||
|
queryKey: ['pipeline-members', pipelineId],
|
||||||
|
queryFn: () => apiClient.listPipelineMembers(pipelineId),
|
||||||
|
enabled: open,
|
||||||
|
});
|
||||||
|
const { data: users } = useQuery({
|
||||||
|
queryKey: ['users'],
|
||||||
|
queryFn: apiClient.listUsers,
|
||||||
|
enabled: open,
|
||||||
|
});
|
||||||
|
|
||||||
|
const invalidate = () => queryClient.invalidateQueries({ queryKey: ['pipeline-members', pipelineId] });
|
||||||
|
|
||||||
|
const addMutation = useMutation({
|
||||||
|
mutationFn: () => apiClient.addPipelineMember(pipelineId, { username, level }),
|
||||||
|
onSuccess: () => {
|
||||||
|
toast.success(`已授权 ${username}`);
|
||||||
|
setUsername('');
|
||||||
|
invalidate();
|
||||||
|
},
|
||||||
|
onError: (err: Error) => toast.error(err.message),
|
||||||
|
});
|
||||||
|
|
||||||
|
const removeMutation = useMutation({
|
||||||
|
mutationFn: (mid: any) => apiClient.deletePipelineMember(pipelineId, mid),
|
||||||
|
onSuccess: () => {
|
||||||
|
toast.success('已移除授权');
|
||||||
|
invalidate();
|
||||||
|
},
|
||||||
|
onError: (err: Error) => toast.error(err.message),
|
||||||
|
});
|
||||||
|
|
||||||
|
const members: any[] = membersQuery.data?.members ?? [];
|
||||||
|
const matchedRoles: any[] = membersQuery.data?.matchedRoles ?? [];
|
||||||
|
const userOptions: any[] = users ?? [];
|
||||||
|
|
||||||
|
const submit = () => {
|
||||||
|
if (!username) {
|
||||||
|
toast.error('请选择用户');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
addMutation.mutate();
|
||||||
|
};
|
||||||
|
|
||||||
|
const inputStyle = { background: 'var(--panel-bg-secondary)', borderColor: 'var(--border-color-light)' };
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={(v) => !v && onClose()}>
|
||||||
|
<DialogContent className="max-w-lg">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle className="text-[15px]">成员授权 — {pipelineName || `流水线 #${pipelineId}`}</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
{/* 添加成员 */}
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>用户</Label>
|
||||||
|
<Select value={username} onValueChange={setUsername}>
|
||||||
|
<SelectTrigger className="h-8 text-[12px]" style={inputStyle}>
|
||||||
|
<SelectValue placeholder="选择用户" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{userOptions.map((u) => (
|
||||||
|
<SelectItem key={u.id} value={u.username} className="text-[12px]">
|
||||||
|
{u.username}{u.nickname ? `(${u.nickname})` : ''}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>权限等级</Label>
|
||||||
|
<div className="flex gap-1">
|
||||||
|
{LEVEL_OPTIONS.map((opt) => (
|
||||||
|
<button
|
||||||
|
key={opt.value}
|
||||||
|
type="button"
|
||||||
|
onClick={() => setLevel(opt.value)}
|
||||||
|
className="flex-1 h-8 text-[12px] rounded-md border transition-colors"
|
||||||
|
style={
|
||||||
|
level === opt.value
|
||||||
|
? { background: 'var(--accent-blue-light)', borderColor: 'var(--accent-blue)', color: 'var(--accent-blue)', fontWeight: 600 }
|
||||||
|
: { background: 'var(--panel-bg-secondary)', borderColor: 'var(--border-color-light)', color: 'var(--text-secondary)' }
|
||||||
|
}
|
||||||
|
title={opt.desc}
|
||||||
|
>
|
||||||
|
{opt.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-[11px]" style={{ color: 'var(--text-tertiary)' }}>
|
||||||
|
{LEVEL_OPTIONS.find((l) => l.value === level)?.desc}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
className="flex items-center gap-1.5 px-3 py-1.5 text-[12px] font-medium rounded-md text-white disabled:opacity-60"
|
||||||
|
style={{ background: 'var(--accent-blue)' }}
|
||||||
|
disabled={addMutation.isPending}
|
||||||
|
onClick={submit}
|
||||||
|
>
|
||||||
|
{addMutation.isPending ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <UserPlus className="w-3.5 h-3.5" />}
|
||||||
|
添加授权
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 已有直接授权 */}
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<div className="text-[12px] font-medium" style={{ color: 'var(--text-secondary)' }}>直接授权({members.length})</div>
|
||||||
|
{membersQuery.isLoading ? (
|
||||||
|
<div className="flex items-center gap-2 py-3 text-[12px]" style={{ color: 'var(--text-tertiary)' }}>
|
||||||
|
<Loader2 className="w-3.5 h-3.5 animate-spin" /> 加载中...
|
||||||
|
</div>
|
||||||
|
) : members.length === 0 ? (
|
||||||
|
<div className="py-2 text-[12px]" style={{ color: 'var(--text-tertiary)' }}>暂无直接授权成员</div>
|
||||||
|
) : (
|
||||||
|
<div className="rounded-md border overflow-hidden" style={{ borderColor: 'var(--border-color-light)' }}>
|
||||||
|
{members.map((m) => {
|
||||||
|
const badge = levelBadgeStyle[m.level] ?? levelBadgeStyle.viewer;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={m.id}
|
||||||
|
className="flex items-center justify-between px-3 py-2 border-b last:border-b-0"
|
||||||
|
style={{ borderColor: 'var(--border-color-light)' }}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-[13px] font-mono" style={{ color: 'var(--text-primary)' }}>{m.username}</span>
|
||||||
|
<span className="text-[11px] px-2 py-[2px] rounded font-medium" style={{ background: badge.bg, color: badge.color }}>
|
||||||
|
{levelLabel(m.level)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
className="p-1 rounded hover:bg-black/5"
|
||||||
|
title="移除授权"
|
||||||
|
disabled={removeMutation.isPending}
|
||||||
|
onClick={() => removeMutation.mutate(m.id)}
|
||||||
|
>
|
||||||
|
<Trash2 className="w-3.5 h-3.5" style={{ color: 'var(--text-tertiary)' }} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 命中的权限组(只读) */}
|
||||||
|
{matchedRoles.length > 0 && (
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<div className="text-[12px] font-medium" style={{ color: 'var(--text-secondary)' }}>命中的权限组(只读,在「流水线权限」页管理)</div>
|
||||||
|
<div className="flex flex-wrap gap-1.5">
|
||||||
|
{matchedRoles.map((r, i) => {
|
||||||
|
const badge = levelBadgeStyle[r.level] ?? levelBadgeStyle.viewer;
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
key={i}
|
||||||
|
className="text-[11px] px-2 py-1 rounded border"
|
||||||
|
style={{ borderColor: 'var(--border-color-light)', color: 'var(--text-secondary)' }}
|
||||||
|
title={r.mode === 'pattern' ? `名称匹配:${r.pattern}` : '手动选择的流水线'}
|
||||||
|
>
|
||||||
|
{r.name} · {r.mode === 'pattern' ? r.pattern : '多选'} ·{' '}
|
||||||
|
<span style={{ color: badge.color }}>{levelLabel(r.level)}</span>
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -44,6 +44,13 @@ export default function ReleasePanel({ pipelineId }: Props) {
|
|||||||
enabled: !!expandedRunId,
|
enabled: !!expandedRunId,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 当前用户对该流水线的权限(详情接口附带):重试需要「执行」等级
|
||||||
|
const { data: pipelineDetail } = useQuery({
|
||||||
|
queryKey: ['pipeline', pipelineId],
|
||||||
|
queryFn: () => apiClient.getPipeline(pipelineId),
|
||||||
|
});
|
||||||
|
const canRun = (pipelineDetail?.accessLevel ?? 4) >= 2;
|
||||||
|
|
||||||
const expandedRun = runs.find((r) => r.runId === expandedRunId);
|
const expandedRun = runs.find((r) => r.runId === expandedRunId);
|
||||||
const isRunning = expandedRun?.status === 'running' || expandedRun?.status === 'pending';
|
const isRunning = expandedRun?.status === 'running' || expandedRun?.status === 'pending';
|
||||||
const { logs: liveLogs, connected } = usePipelineLogs(expandedRunId, !!expandedRunId && isRunning);
|
const { logs: liveLogs, connected } = usePipelineLogs(expandedRunId, !!expandedRunId && isRunning);
|
||||||
@@ -104,7 +111,7 @@ export default function ReleasePanel({ pipelineId }: Props) {
|
|||||||
<span className="text-[11px] w-36 text-right" style={{ color: 'var(--text-tertiary)' }}>
|
<span className="text-[11px] w-36 text-right" style={{ color: 'var(--text-tertiary)' }}>
|
||||||
{new Date(r.startedAt).toLocaleString('zh-CN', { hour12: false })}
|
{new Date(r.startedAt).toLocaleString('zh-CN', { hour12: false })}
|
||||||
</span>
|
</span>
|
||||||
{(r.status === 'failed' || r.status === 'cancelled') && (
|
{(r.status === 'failed' || r.status === 'cancelled') && canRun && (
|
||||||
<button
|
<button
|
||||||
onClick={(e) => { e.stopPropagation(); rerunMutation.mutate(r.runId); }}
|
onClick={(e) => { e.stopPropagation(); rerunMutation.mutate(r.runId); }}
|
||||||
className="p-1 rounded hover:bg-black/5"
|
className="p-1 rounded hover:bg-black/5"
|
||||||
|
|||||||
@@ -10,20 +10,19 @@ import {
|
|||||||
Rocket,
|
Rocket,
|
||||||
Zap,
|
Zap,
|
||||||
History,
|
History,
|
||||||
Webhook,
|
|
||||||
CloudSync,
|
CloudSync,
|
||||||
Puzzle,
|
Puzzle,
|
||||||
Settings,
|
Settings,
|
||||||
|
BookOpen,
|
||||||
Users,
|
Users,
|
||||||
Sun,
|
Sun,
|
||||||
Moon,
|
Moon,
|
||||||
LogOut,
|
LogOut,
|
||||||
|
ShieldCheck,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import { useQuery } from '@tanstack/react-query';
|
|
||||||
import { apiClient } from '@/lib/api';
|
|
||||||
import { useTheme } from '@/providers/theme';
|
import { useTheme } from '@/providers/theme';
|
||||||
|
import { useSession } from '@/providers/session';
|
||||||
type ModuleType = 'pipelines' | 'gitops' | 'batch-release' | 'release-records' | 'environments' | 'credentials' | 'build-nodes' | 'tools' | 'jenkins-import' | 'webhooks' | 'plugins' | 'users' | 'settings';
|
import type { ModuleType } from '@/App';
|
||||||
|
|
||||||
interface SidebarProps {
|
interface SidebarProps {
|
||||||
activeModule: ModuleType;
|
activeModule: ModuleType;
|
||||||
@@ -33,56 +32,56 @@ interface SidebarProps {
|
|||||||
onLogout?: () => void;
|
onLogout?: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const menuGroups: { label: string; items: { id: ModuleType; label: string; icon: typeof GitBranch; badge: string | null }[] }[] = [
|
// adminOnly:普通用户隐藏(资源/集成含敏感配置,系统管理类同理)
|
||||||
|
const menuGroups: { label: string; adminOnly?: boolean; items: { id: ModuleType; label: string; icon: typeof GitBranch; adminOnly?: boolean }[] }[] = [
|
||||||
{
|
{
|
||||||
label: '发布',
|
label: '发布',
|
||||||
items: [
|
items: [
|
||||||
{ id: 'pipelines', label: '流水线', icon: GitBranch, badge: null },
|
{ id: 'pipelines', label: '流水线', icon: GitBranch },
|
||||||
{ id: 'gitops', label: 'GitOps 部署', icon: CloudSync, badge: 'New' },
|
{ id: 'batch-release', label: '批量发布', icon: Zap },
|
||||||
{ id: 'batch-release', label: '批量发布', icon: Zap, badge: null },
|
{ id: 'release-records', label: '发布记录', icon: History },
|
||||||
{ id: 'release-records', label: '发布记录', icon: History, badge: null },
|
{ id: 'gitops', label: 'GitOps 部署', icon: CloudSync, adminOnly: true },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '资源',
|
label: '资源',
|
||||||
|
adminOnly: true,
|
||||||
items: [
|
items: [
|
||||||
{ id: 'environments', label: '环境管理', icon: Server, badge: null },
|
{ id: 'environments', label: '环境管理', icon: Server },
|
||||||
{ id: 'credentials', label: '凭证管理', icon: Key, badge: null },
|
{ id: 'credentials', label: '凭证管理', icon: Key },
|
||||||
{ id: 'build-nodes', label: '构建节点', icon: Cpu, badge: '3' },
|
{ id: 'build-nodes', label: '构建节点', icon: Cpu },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '集成',
|
label: '集成',
|
||||||
|
adminOnly: true,
|
||||||
items: [
|
items: [
|
||||||
{ id: 'jenkins-import', label: 'Jenkins导入', icon: Download, badge: null },
|
{ id: 'jenkins-import', label: 'Jenkins导入', icon: Download },
|
||||||
{ id: 'webhooks', label: 'Webhook', icon: Webhook, badge: null },
|
{ id: 'tools', label: '工具配置', icon: Wrench },
|
||||||
{ id: 'tools', label: '工具配置', icon: Wrench, badge: null },
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '系统',
|
label: '系统',
|
||||||
items: [
|
items: [
|
||||||
{ id: 'plugins', label: '插件市场', icon: Puzzle, badge: '12' },
|
{ id: 'docs', label: '文档中心', icon: BookOpen },
|
||||||
{ id: 'users', label: '用户管理', icon: Users, badge: null },
|
{ id: 'pipeline-roles', label: '流水线权限', icon: ShieldCheck, adminOnly: true },
|
||||||
{ id: 'settings', label: '系统设置', icon: Settings, badge: null },
|
{ id: 'plugins', label: '插件市场', icon: Puzzle, adminOnly: true },
|
||||||
|
{ id: 'users', label: '用户管理', icon: Users, adminOnly: true },
|
||||||
|
{ id: 'settings', label: '系统设置', icon: Settings, adminOnly: true },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export default function Sidebar({ activeModule, onModuleChange, collapsed, onToggleCollapse, onLogout }: SidebarProps) {
|
export default function Sidebar({ activeModule, onModuleChange, collapsed, onToggleCollapse, onLogout }: SidebarProps) {
|
||||||
// 徽标数来自后端真实统计
|
|
||||||
const { data: summary } = useQuery({
|
|
||||||
queryKey: ['summary'],
|
|
||||||
queryFn: apiClient.getSummary,
|
|
||||||
refetchInterval: 15000,
|
|
||||||
});
|
|
||||||
const { toggle: themeToggle, isDark } = useTheme();
|
const { toggle: themeToggle, isDark } = useTheme();
|
||||||
|
const { isAdmin } = useSession();
|
||||||
|
|
||||||
const badgeFor = (id: ModuleType): string | null => {
|
const visibleGroups = menuGroups
|
||||||
if (id === 'build-nodes') return summary?.buildNodes != null ? String(summary.buildNodes) : null;
|
.map((group) => ({
|
||||||
if (id === 'plugins') return summary?.plugins != null ? String(summary.plugins) : null;
|
...group,
|
||||||
return null;
|
items: group.items.filter((item) => isAdmin || !item.adminOnly),
|
||||||
};
|
}))
|
||||||
|
.filter((group) => isAdmin || !group.adminOnly);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
@@ -113,7 +112,7 @@ export default function Sidebar({ activeModule, onModuleChange, collapsed, onTog
|
|||||||
|
|
||||||
{/* Menu groups */}
|
{/* Menu groups */}
|
||||||
<div className="flex-1 py-2 overflow-y-auto custom-scrollbar">
|
<div className="flex-1 py-2 overflow-y-auto custom-scrollbar">
|
||||||
{menuGroups.map((group) => (
|
{visibleGroups.map((group) => (
|
||||||
<div key={group.label} className="mb-2">
|
<div key={group.label} className="mb-2">
|
||||||
{!collapsed && (
|
{!collapsed && (
|
||||||
<div
|
<div
|
||||||
@@ -140,26 +139,9 @@ export default function Sidebar({ activeModule, onModuleChange, collapsed, onTog
|
|||||||
>
|
>
|
||||||
<Icon className="w-[18px] h-[18px] flex-shrink-0" />
|
<Icon className="w-[18px] h-[18px] flex-shrink-0" />
|
||||||
{!collapsed && (
|
{!collapsed && (
|
||||||
<>
|
<span className="text-[13px] font-medium truncate flex-1 text-left">
|
||||||
<span className="text-[13px] font-medium truncate flex-1 text-left">
|
{item.label}
|
||||||
{item.label}
|
</span>
|
||||||
</span>
|
|
||||||
{(() => {
|
|
||||||
const badge = item.badge === 'New' ? 'New' : badgeFor(item.id);
|
|
||||||
if (!badge) return null;
|
|
||||||
return (
|
|
||||||
<span
|
|
||||||
className="text-[9px] px-1 py-[1px] rounded font-medium"
|
|
||||||
style={{
|
|
||||||
background: badge === 'New' ? '#ddf4ff' : 'var(--panel-bg-secondary)',
|
|
||||||
color: badge === 'New' ? 'var(--accent-blue)' : 'var(--text-tertiary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{badge}
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
})()}
|
|
||||||
</>
|
|
||||||
)}
|
)}
|
||||||
{isActive && !collapsed && (
|
{isActive && !collapsed && (
|
||||||
<div
|
<div
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import { ChevronLeft, Save, Play, ChevronDown, Loader2 } from 'lucide-react';
|
import { ChevronLeft, Save, Play, ChevronDown, Loader2, UsersRound } from 'lucide-react';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
|
import PipelineMembersDialog from './PipelineMembersDialog';
|
||||||
|
|
||||||
type EditorTab = '基本信息' | '流程配置' | '触发设置' | '变量和缓存' | '发布';
|
type EditorTab = '基本信息' | '流程配置' | '触发设置' | '变量和缓存' | '发布';
|
||||||
|
|
||||||
@@ -21,6 +22,7 @@ interface TopBarProps {
|
|||||||
isRunning?: boolean;
|
isRunning?: boolean;
|
||||||
executionStatus: 'idle' | 'running' | 'success' | 'failed' | 'cancelled';
|
executionStatus: 'idle' | 'running' | 'success' | 'failed' | 'cancelled';
|
||||||
onBack?: () => void;
|
onBack?: () => void;
|
||||||
|
accessLevel?: number; // 1 查看 / 2 执行 / 3 管理 / 4 管理员
|
||||||
}
|
}
|
||||||
|
|
||||||
const tabs: EditorTab[] = ['基本信息', '流程配置', '触发设置', '变量和缓存', '发布'];
|
const tabs: EditorTab[] = ['基本信息', '流程配置', '触发设置', '变量和缓存', '发布'];
|
||||||
@@ -38,8 +40,10 @@ export default function TopBar({
|
|||||||
isRunning = false,
|
isRunning = false,
|
||||||
executionStatus,
|
executionStatus,
|
||||||
onBack,
|
onBack,
|
||||||
|
accessLevel = 4,
|
||||||
}: TopBarProps) {
|
}: TopBarProps) {
|
||||||
const [pipelineDropdownOpen, setPipelineDropdownOpen] = useState(false);
|
const [pipelineDropdownOpen, setPipelineDropdownOpen] = useState(false);
|
||||||
|
const [membersOpen, setMembersOpen] = useState(false);
|
||||||
|
|
||||||
const statusConfig: Record<string, { color: string; bg: string; label: string } | null> = {
|
const statusConfig: Record<string, { color: string; bg: string; label: string } | null> = {
|
||||||
idle: null,
|
idle: null,
|
||||||
@@ -146,31 +150,56 @@ export default function TopBar({
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Right: Action Buttons */}
|
{/* Right: Action Buttons(按权限等级显隐:保存≥管理、运行≥执行、成员≥管理) */}
|
||||||
<div className="flex items-center gap-2 min-w-[280px] justify-end">
|
<div className="flex items-center gap-2 min-w-[280px] justify-end">
|
||||||
<button
|
{accessLevel >= 3 && (
|
||||||
onClick={onOnlySave}
|
<button
|
||||||
disabled={isSaving}
|
onClick={() => setMembersOpen(true)}
|
||||||
className="flex items-center gap-1.5 px-3 py-1 text-[12px] font-medium rounded-md transition-colors disabled:opacity-50"
|
className="flex items-center gap-1.5 px-3 py-1 text-[12px] font-medium rounded-md transition-colors"
|
||||||
style={{
|
style={{
|
||||||
color: 'var(--text-secondary)',
|
color: 'var(--text-secondary)',
|
||||||
background: 'transparent',
|
background: 'transparent',
|
||||||
border: '1px solid var(--border-color)',
|
border: '1px solid var(--border-color)',
|
||||||
}}
|
}}
|
||||||
>
|
title="管理该流水线的成员授权"
|
||||||
{isSaving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
|
>
|
||||||
仅保存
|
<UsersRound className="w-4 h-4" />
|
||||||
</button>
|
成员
|
||||||
<button
|
</button>
|
||||||
onClick={onSaveAndRun}
|
)}
|
||||||
disabled={isRunning}
|
{accessLevel >= 3 && (
|
||||||
className="flex items-center gap-1.5 px-3 py-1 text-[12px] font-medium rounded-md text-white transition-colors disabled:opacity-60"
|
<button
|
||||||
style={{ background: isRunning ? '#6e7781' : 'var(--accent-blue)' }}
|
onClick={onOnlySave}
|
||||||
>
|
disabled={isSaving}
|
||||||
{isRunning ? <Loader2 className="w-4 h-4 animate-spin" /> : <Play className="w-4 h-4" />}
|
className="flex items-center gap-1.5 px-3 py-1 text-[12px] font-medium rounded-md transition-colors disabled:opacity-50"
|
||||||
{isRunning ? '运行中…' : '保存并运行'}
|
style={{
|
||||||
</button>
|
color: 'var(--text-secondary)',
|
||||||
|
background: 'transparent',
|
||||||
|
border: '1px solid var(--border-color)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{isSaving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
|
||||||
|
仅保存
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{accessLevel >= 2 && (
|
||||||
|
<button
|
||||||
|
onClick={onSaveAndRun}
|
||||||
|
disabled={isRunning}
|
||||||
|
className="flex items-center gap-1.5 px-3 py-1 text-[12px] font-medium rounded-md text-white transition-colors disabled:opacity-60"
|
||||||
|
style={{ background: isRunning ? '#6e7781' : 'var(--accent-blue)' }}
|
||||||
|
>
|
||||||
|
{isRunning ? <Loader2 className="w-4 h-4 animate-spin" /> : <Play className="w-4 h-4" />}
|
||||||
|
{isRunning ? '运行中…' : '保存并运行'}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
<PipelineMembersDialog
|
||||||
|
pipelineId={currentPipelineId}
|
||||||
|
pipelineName={pipelineName}
|
||||||
|
open={membersOpen}
|
||||||
|
onClose={() => setMembersOpen(false)}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -22,6 +22,8 @@ export default function TriggerPanel({ pipelineId }: Props) {
|
|||||||
queryFn: () => apiClient.getPipeline(pipelineId),
|
queryFn: () => apiClient.getPipeline(pipelineId),
|
||||||
});
|
});
|
||||||
const p = detail?.pipeline;
|
const p = detail?.pipeline;
|
||||||
|
// 编辑权限:「管理」等级及以上才能保存
|
||||||
|
const canEdit = (detail?.accessLevel ?? 4) >= 3;
|
||||||
|
|
||||||
const [form, setForm] = useState({ triggerMode: 'manual', cronExpr: '', webhookToken: '', watchBranches: '' });
|
const [form, setForm] = useState({ triggerMode: 'manual', cronExpr: '', webhookToken: '', watchBranches: '' });
|
||||||
const [copied, setCopied] = useState(false);
|
const [copied, setCopied] = useState(false);
|
||||||
@@ -68,6 +70,7 @@ export default function TriggerPanel({ pipelineId }: Props) {
|
|||||||
<div className="rounded-lg border p-6 shadow-sm" style={{ background: 'var(--panel-bg)', borderColor: 'var(--border-color)' }}>
|
<div className="rounded-lg border p-6 shadow-sm" style={{ background: 'var(--panel-bg)', borderColor: 'var(--border-color)' }}>
|
||||||
<div className="flex items-center justify-between mb-5">
|
<div className="flex items-center justify-between mb-5">
|
||||||
<h3 className="text-[14px] font-semibold" style={{ color: 'var(--text-primary)' }}>触发方式</h3>
|
<h3 className="text-[14px] font-semibold" style={{ color: 'var(--text-primary)' }}>触发方式</h3>
|
||||||
|
{canEdit && (
|
||||||
<button
|
<button
|
||||||
onClick={() => saveMutation.mutate(form)}
|
onClick={() => saveMutation.mutate(form)}
|
||||||
disabled={saveMutation.isPending}
|
disabled={saveMutation.isPending}
|
||||||
@@ -76,6 +79,7 @@ export default function TriggerPanel({ pipelineId }: Props) {
|
|||||||
>
|
>
|
||||||
{saveMutation.isPending ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Save className="w-3.5 h-3.5" />}保存
|
{saveMutation.isPending ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Save className="w-3.5 h-3.5" />}保存
|
||||||
</button>
|
</button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-3">
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
|||||||
@@ -28,6 +28,8 @@ export default function VariablesPanel({ pipelineId }: Props) {
|
|||||||
queryFn: () => apiClient.getPipeline(pipelineId),
|
queryFn: () => apiClient.getPipeline(pipelineId),
|
||||||
});
|
});
|
||||||
const p = detail?.pipeline;
|
const p = detail?.pipeline;
|
||||||
|
// 编辑权限:「管理」等级及以上才能保存
|
||||||
|
const canEdit = (detail?.accessLevel ?? 4) >= 3;
|
||||||
|
|
||||||
const [vars, setVars] = useState<VarItem[]>([]);
|
const [vars, setVars] = useState<VarItem[]>([]);
|
||||||
const [caches, setCaches] = useState<CacheItem[]>([]);
|
const [caches, setCaches] = useState<CacheItem[]>([]);
|
||||||
@@ -105,9 +107,13 @@ export default function VariablesPanel({ pipelineId }: Props) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-4 flex justify-end">
|
<div className="mt-4 flex justify-end">
|
||||||
|
{canEdit ? (
|
||||||
<button onClick={() => saveMutation.mutate()} disabled={saveMutation.isPending} className="flex items-center gap-1 px-4 py-1.5 text-[12px] rounded-md text-white disabled:opacity-50" style={{ background: 'var(--accent-blue)' }}>
|
<button onClick={() => saveMutation.mutate()} disabled={saveMutation.isPending} className="flex items-center gap-1 px-4 py-1.5 text-[12px] rounded-md text-white disabled:opacity-50" style={{ background: 'var(--accent-blue)' }}>
|
||||||
{saveMutation.isPending ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Save className="w-3.5 h-3.5" />}保存全部
|
{saveMutation.isPending ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Save className="w-3.5 h-3.5" />}保存全部
|
||||||
</button>
|
</button>
|
||||||
|
) : (
|
||||||
|
<span className="text-[11px]" style={{ color: 'var(--text-tertiary)' }}>只读(需要「管理」权限才能编辑)</span>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -22,7 +22,7 @@ import {
|
|||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||||||
import TektonNode, { type TektonNodeData } from './TektonNode';
|
import TektonNode, { type TektonNodeData } from './TektonNode';
|
||||||
import { apiClient } from '@/lib/api';
|
import { apiClient, auth } from '@/lib/api';
|
||||||
|
|
||||||
interface FlowEditorProps {
|
interface FlowEditorProps {
|
||||||
pipelineId: number;
|
pipelineId: number;
|
||||||
@@ -177,7 +177,9 @@ function FlowEditorInner({ pipelineId, saveSignal = 0, runSignal = 0 }: FlowEdit
|
|||||||
setAllNodeStatus('pending');
|
setAllNodeStatus('pending');
|
||||||
toast.success(`运行已触发 ${run.runId}`, { description: `${nodes.length} 个节点开始执行` });
|
toast.success(`运行已触发 ${run.runId}`, { description: `${nodes.length} 个节点开始执行` });
|
||||||
|
|
||||||
const es = new EventSource(`/api/runs/${run.runId}/logs/stream`);
|
// SSE 无法携带 Authorization 头,token 通过查询参数传递
|
||||||
|
const token = encodeURIComponent(auth.getToken() ?? '');
|
||||||
|
const es = new EventSource(`/api/runs/${run.runId}/logs/stream?token=${token}`);
|
||||||
es.addEventListener('log', (evt) => {
|
es.addEventListener('log', (evt) => {
|
||||||
try {
|
try {
|
||||||
const entry = JSON.parse((evt as MessageEvent).data);
|
const entry = JSON.parse((evt as MessageEvent).data);
|
||||||
@@ -342,9 +344,12 @@ function FlowEditorInner({ pipelineId, saveSignal = 0, runSignal = 0 }: FlowEdit
|
|||||||
{catalogOpen ? <ChevronLeft className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}Task 库
|
{catalogOpen ? <ChevronLeft className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}Task 库
|
||||||
</button>
|
</button>
|
||||||
<div className="flex items-center gap-1.5">
|
<div className="flex items-center gap-1.5">
|
||||||
|
{(pipelineData?.accessLevel ?? 4) >= 3 && (
|
||||||
<button onClick={handleSave} className="flex items-center gap-1 px-3 py-[5px] text-[11px] font-medium rounded-md border transition-colors hover:bg-black/[0.02]" style={{ borderColor: 'var(--border-color-light)', color: 'var(--text-secondary)' }}>
|
<button onClick={handleSave} className="flex items-center gap-1 px-3 py-[5px] text-[11px] font-medium rounded-md border transition-colors hover:bg-black/[0.02]" style={{ borderColor: 'var(--border-color-light)', color: 'var(--text-secondary)' }}>
|
||||||
<Save className="w-3 h-3" />保存
|
<Save className="w-3 h-3" />保存
|
||||||
</button>
|
</button>
|
||||||
|
)}
|
||||||
|
{(pipelineData?.accessLevel ?? 4) >= 2 && (
|
||||||
<button
|
<button
|
||||||
onClick={handleRun}
|
onClick={handleRun}
|
||||||
disabled={isRunning}
|
disabled={isRunning}
|
||||||
@@ -355,6 +360,7 @@ function FlowEditorInner({ pipelineId, saveSignal = 0, runSignal = 0 }: FlowEdit
|
|||||||
? <><CircleDot className="w-3 h-3 animate-spin" />执行中…</>
|
? <><CircleDot className="w-3 h-3 animate-spin" />执行中…</>
|
||||||
: <><Play className="w-3 h-3" />执行</>}
|
: <><Play className="w-3 h-3" />执行</>}
|
||||||
</button>
|
</button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Panel>
|
</Panel>
|
||||||
|
|||||||
+10
-11
@@ -49,7 +49,7 @@ const formatTime = (v: string | null | undefined) => {
|
|||||||
|
|
||||||
const emptyForm = { name: '', url: '', secret: '', events: [] as string[] };
|
const emptyForm = { name: '', url: '', secret: '', events: [] as string[] };
|
||||||
|
|
||||||
export default function WebhookConfig() {
|
export default function WebhookManager() {
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
const [showForm, setShowForm] = useState(false);
|
const [showForm, setShowForm] = useState(false);
|
||||||
const [editingId, setEditingId] = useState<number | null>(null);
|
const [editingId, setEditingId] = useState<number | null>(null);
|
||||||
@@ -137,14 +137,13 @@ export default function WebhookConfig() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="h-full flex flex-col" style={{ background: 'var(--canvas-bg)' }}>
|
<div className="rounded-lg border overflow-hidden" style={{ background: 'var(--panel-bg)', borderColor: 'var(--border-color)' }}>
|
||||||
{/* Header */}
|
{/* Card Header */}
|
||||||
<div className="px-5 py-3 border-b flex items-center justify-between flex-shrink-0" style={{ background: 'var(--panel-bg)', borderColor: 'var(--border-color)' }}>
|
<div className="px-5 py-3 border-b flex items-center justify-between" style={{ borderColor: 'var(--border-color)', background: 'var(--panel-bg-secondary)' }}>
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-2">
|
||||||
<h1 className="text-[15px] font-semibold" style={{ color: 'var(--text-primary)' }}>Webhook 配置</h1>
|
<Webhook className="w-4 h-4" style={{ color: 'var(--accent-blue)' }} />
|
||||||
<span className="text-[11px] px-2 py-[2px] rounded-full font-medium" style={{ background: 'var(--panel-bg-secondary)', color: 'var(--text-tertiary)' }}>
|
<span className="text-[13px] font-semibold" style={{ color: 'var(--text-primary)' }}>Webhook 通知</span>
|
||||||
{webhooks.length}
|
<span className="text-[10px]" style={{ color: 'var(--text-tertiary)' }}>发布事件回调第三方(HMAC-SHA256 签名)</span>
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
onClick={() => { setShowForm(true); setEditingId(null); setEditingSecretSet(false); setForm(emptyForm); }}
|
onClick={() => { setShowForm(true); setEditingId(null); setEditingSecretSet(false); setForm(emptyForm); }}
|
||||||
@@ -155,8 +154,8 @@ export default function WebhookConfig() {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Content */}
|
{/* Body */}
|
||||||
<div className="flex-1 overflow-y-auto custom-scrollbar p-5">
|
<div className="p-5">
|
||||||
{showForm && (
|
{showForm && (
|
||||||
<div className="rounded-lg border p-4 mb-4" style={{ background: 'var(--panel-bg)', borderColor: 'var(--border-color)' }}>
|
<div className="rounded-lg border p-4 mb-4" style={{ background: 'var(--panel-bg)', borderColor: 'var(--border-color)' }}>
|
||||||
<h3 className="text-[14px] font-semibold mb-3" style={{ color: 'var(--text-primary)' }}>{editingId != null ? '编辑 Webhook' : '新建 Webhook'}</h3>
|
<h3 className="text-[14px] font-semibold mb-3" style={{ color: 'var(--text-primary)' }}>{editingId != null ? '编辑 Webhook' : '新建 Webhook'}</h3>
|
||||||
@@ -1,4 +1,5 @@
|
|||||||
import { useEffect, useState, useCallback } from 'react';
|
import { useEffect, useState, useCallback } from 'react';
|
||||||
|
import { auth } from '@/lib/api';
|
||||||
|
|
||||||
export interface LogMessage {
|
export interface LogMessage {
|
||||||
id?: number;
|
id?: number;
|
||||||
@@ -26,7 +27,9 @@ export function usePipelineLogs(runId: string | null, enabled: boolean) {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const es = new EventSource(`/api/runs/${runId}/logs/stream`);
|
// SSE 无法携带 Authorization 头,token 通过查询参数传递(后端校验签名与 viewer 权限)
|
||||||
|
const token = encodeURIComponent(auth.getToken() ?? '');
|
||||||
|
const es = new EventSource(`/api/runs/${runId}/logs/stream?token=${token}`);
|
||||||
|
|
||||||
es.addEventListener('connected', () => setConnected(true));
|
es.addEventListener('connected', () => setConnected(true));
|
||||||
es.addEventListener('log', (evt) => {
|
es.addEventListener('log', (evt) => {
|
||||||
|
|||||||
@@ -351,3 +351,25 @@ textarea:focus {
|
|||||||
.context-menu-item-danger:hover {
|
.context-menu-item-danger:hover {
|
||||||
background: rgba(207, 34, 46, 0.08);
|
background: rgba(207, 34, 46, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ---------- 文档页 Markdown 排版 ---------- */
|
||||||
|
.md-body { font-size: 13px; line-height: 1.75; color: var(--text-primary); }
|
||||||
|
.md-body h1 { font-size: 20px; font-weight: 700; margin: 24px 0 12px; }
|
||||||
|
.md-body h2 { font-size: 16px; font-weight: 700; margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-color-light); scroll-margin-top: 16px; }
|
||||||
|
.md-body h3 { font-size: 14px; font-weight: 600; margin: 16px 0 8px; scroll-margin-top: 16px; }
|
||||||
|
.md-body h4 { font-size: 13px; font-weight: 600; margin: 12px 0 6px; }
|
||||||
|
.md-body p { margin: 8px 0; color: var(--text-secondary); }
|
||||||
|
.md-body strong { color: var(--text-primary); font-weight: 600; }
|
||||||
|
.md-body ul, .md-body ol { margin: 8px 0; padding-left: 22px; color: var(--text-secondary); }
|
||||||
|
.md-body li { margin: 4px 0; }
|
||||||
|
.md-body a { color: var(--accent-blue); text-decoration: none; }
|
||||||
|
.md-body a:hover { text-decoration: underline; }
|
||||||
|
.md-body blockquote { margin: 10px 0; padding: 8px 14px; border-left: 3px solid var(--accent-blue); background: var(--panel-bg-secondary); border-radius: 0 6px 6px 0; color: var(--text-secondary); }
|
||||||
|
.md-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; background: var(--panel-bg-secondary); border: 1px solid var(--border-color-light); border-radius: 4px; padding: 1px 5px; color: var(--accent-purple); }
|
||||||
|
.md-body pre { margin: 10px 0; padding: 12px 14px; background: var(--panel-bg-secondary); border: 1px solid var(--border-color-light); border-radius: 8px; overflow-x: auto; }
|
||||||
|
.md-body pre code { background: transparent; border: none; padding: 0; color: var(--text-primary); font-size: 11.5px; line-height: 1.6; }
|
||||||
|
.md-body table { width: 100%; margin: 10px 0; border-collapse: collapse; font-size: 12px; }
|
||||||
|
.md-body th { text-align: left; padding: 7px 10px; background: var(--panel-bg-secondary); color: var(--text-tertiary); font-weight: 600; border: 1px solid var(--border-color-light); white-space: nowrap; }
|
||||||
|
.md-body td { padding: 6px 10px; border: 1px solid var(--border-color-light); color: var(--text-secondary); vertical-align: top; }
|
||||||
|
.md-body tr:nth-child(even) td { background: color-mix(in srgb, var(--panel-bg-secondary) 45%, transparent); }
|
||||||
|
.md-body hr { border: none; border-top: 1px solid var(--border-color-light); margin: 18px 0; }
|
||||||
@@ -74,6 +74,7 @@ export interface PipelineDetail {
|
|||||||
pipeline: any
|
pipeline: any
|
||||||
nodes: PipelineNodeDTO[]
|
nodes: PipelineNodeDTO[]
|
||||||
edges: PipelineEdgeDTO[]
|
edges: PipelineEdgeDTO[]
|
||||||
|
accessLevel?: number // 1 查看 / 2 执行 / 3 管理 / 4 管理员
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface PipelineRunDTO {
|
export interface PipelineRunDTO {
|
||||||
@@ -178,6 +179,7 @@ export const apiClient = {
|
|||||||
// 用户与会话
|
// 用户与会话
|
||||||
login: (username: string, password: string) =>
|
login: (username: string, password: string) =>
|
||||||
api<any>('/api/auth/login', { method: 'POST', body: JSON.stringify({ username, password }) }),
|
api<any>('/api/auth/login', { method: 'POST', body: JSON.stringify({ username, password }) }),
|
||||||
|
me: () => api<{ username: string; role: string; isAdmin: boolean }>('/api/me'),
|
||||||
listUsers: () => api<any[]>('/api/users'),
|
listUsers: () => api<any[]>('/api/users'),
|
||||||
createUser: (b: any) => api<any>('/api/users', { method: 'POST', body: JSON.stringify(b) }),
|
createUser: (b: any) => api<any>('/api/users', { method: 'POST', body: JSON.stringify(b) }),
|
||||||
updateUser: (id: any, b: any) => api(`/api/users/${id}`, { method: 'PUT', body: JSON.stringify(b) }),
|
updateUser: (id: any, b: any) => api(`/api/users/${id}`, { method: 'PUT', body: JSON.stringify(b) }),
|
||||||
@@ -186,4 +188,15 @@ export const apiClient = {
|
|||||||
ldapListUsers: () => api<any[]>('/api/ldap/users', { method: 'POST' }),
|
ldapListUsers: () => api<any[]>('/api/ldap/users', { method: 'POST' }),
|
||||||
ldapImport: (users: any[]) => api<any>('/api/users/ldap-import', { method: 'POST', body: JSON.stringify({ users }) }),
|
ldapImport: (users: any[]) => api<any>('/api/users/ldap-import', { method: 'POST', body: JSON.stringify({ users }) }),
|
||||||
testLDAP: (body: any) => api<any>('/api/settings/ldap/test', { method: 'POST', body: JSON.stringify(body) }),
|
testLDAP: (body: any) => api<any>('/api/settings/ldap/test', { method: 'POST', body: JSON.stringify(body) }),
|
||||||
|
getDocs: () => api<any>('/api/docs'),
|
||||||
|
// 流水线权限组(管理员)与单流水线成员
|
||||||
|
listPipelineRoles: () => api<any[]>('/api/pipeline-roles'),
|
||||||
|
createPipelineRole: (b: any) => api<any>('/api/pipeline-roles', { method: 'POST', body: JSON.stringify(b) }),
|
||||||
|
updatePipelineRole: (id: any, b: any) => api<any>(`/api/pipeline-roles/${id}`, { method: 'PUT', body: JSON.stringify(b) }),
|
||||||
|
deletePipelineRole: (id: any) => api(`/api/pipeline-roles/${id}`, { method: 'DELETE' }),
|
||||||
|
listPipelineMembers: (pipelineId: number | string) => api<any>(`/api/pipelines/${pipelineId}/members`),
|
||||||
|
addPipelineMember: (pipelineId: number | string, body: { username: string; level: string }) =>
|
||||||
|
api<any>(`/api/pipelines/${pipelineId}/members`, { method: 'POST', body: JSON.stringify(body) }),
|
||||||
|
deletePipelineMember: (pipelineId: number | string, memberId: any) =>
|
||||||
|
api(`/api/pipelines/${pipelineId}/members/${memberId}`, { method: 'DELETE' }),
|
||||||
}
|
}
|
||||||
@@ -299,7 +299,7 @@ export default function BatchRelease({ onViewRecords }: { onViewRecords?: () =>
|
|||||||
<div className="text-[13px] font-medium" style={{ color: 'var(--text-primary)' }}>{p.name}</div>
|
<div className="text-[13px] font-medium" style={{ color: 'var(--text-primary)' }}>{p.name}</div>
|
||||||
<div className="flex items-center gap-1 text-[12px]" style={{ color: 'var(--text-secondary)' }}><GitBranch className="w-3 h-3" /> {p.branch}</div>
|
<div className="flex items-center gap-1 text-[12px]" style={{ color: 'var(--text-secondary)' }}><GitBranch className="w-3 h-3" /> {p.branch}</div>
|
||||||
<div><span className="text-[10px] px-1.5 py-[2px] rounded font-medium" style={{ background: tp.bg, color: tp.color }}>{tp.label}</span></div>
|
<div><span className="text-[10px] px-1.5 py-[2px] rounded font-medium" style={{ background: tp.bg, color: tp.color }}>{tp.label}</span></div>
|
||||||
<div className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>{p.deployType === 'k8s' ? <span className="flex items-center gap-1"><CloudCog className="w-3 h-3" /> K8s</span> : p.deployType === 'gitops' ? <span className="flex items-center gap-1"><CloudCog className="w-3 h-3" /> GitOps</span> : <span className="flex items-center gap-1"><Server className="w-3 h-3" /> 主机</span>}</div>
|
<div className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>{p.deployType === 'k8s' ? <span className="flex items-center gap-1"><CloudCog className="w-3 h-3" /> Kubernetes</span> : p.deployType === 'gitops' ? <span className="flex items-center gap-1"><CloudCog className="w-3 h-3" /> GitOps</span> : <span className="flex items-center gap-1"><Server className="w-3 h-3" /> 主机</span>}</div>
|
||||||
<div className="text-[12px]" style={{ color: 'var(--text-tertiary)' }}>{p.env}</div>
|
<div className="text-[12px]" style={{ color: 'var(--text-tertiary)' }}>{p.env}</div>
|
||||||
<div className="flex items-center gap-1.5">
|
<div className="flex items-center gap-1.5">
|
||||||
<span className={`w-2 h-2 rounded-full ${p.lastStatus === 'running' ? 'animate-pulse' : ''}`} style={{ background: last.color }} />
|
<span className={`w-2 h-2 rounded-full ${p.lastStatus === 'running' ? 'animate-pulse' : ''}`} style={{ background: last.color }} />
|
||||||
@@ -337,7 +337,7 @@ export default function BatchRelease({ onViewRecords }: { onViewRecords?: () =>
|
|||||||
<option value="skip">标记失败并跳过</option>
|
<option value="skip">标记失败并跳过</option>
|
||||||
</select></div>
|
</select></div>
|
||||||
</div>
|
</div>
|
||||||
<div><label className="block text-[12px] font-medium mb-1.5" style={{ color: 'var(--text-secondary)' }}>K8s 就绪检查</label>
|
<div><label className="block text-[12px] font-medium mb-1.5" style={{ color: 'var(--text-secondary)' }}>Kubernetes 就绪检查</label>
|
||||||
<div className="flex items-center gap-4">
|
<div className="flex items-center gap-4">
|
||||||
<label className="flex items-center gap-2 text-[13px] cursor-pointer"><input type="checkbox" checked={checkDeployment} onChange={(e) => setCheckDeployment(e.target.checked)} className="w-4 h-4" style={{ accentColor: 'var(--accent-blue)' }} /><span style={{ color: 'var(--text-primary)' }}>检查 Deployment 副本就绪</span></label>
|
<label className="flex items-center gap-2 text-[13px] cursor-pointer"><input type="checkbox" checked={checkDeployment} onChange={(e) => setCheckDeployment(e.target.checked)} className="w-4 h-4" style={{ accentColor: 'var(--accent-blue)' }} /><span style={{ color: 'var(--text-primary)' }}>检查 Deployment 副本就绪</span></label>
|
||||||
<label className="flex items-center gap-2 text-[13px] cursor-pointer"><input type="checkbox" checked={checkService} onChange={(e) => setCheckService(e.target.checked)} className="w-4 h-4" style={{ accentColor: 'var(--accent-blue)' }} /><span style={{ color: 'var(--text-primary)' }}>检查 Service 可用性</span></label>
|
<label className="flex items-center gap-2 text-[13px] cursor-pointer"><input type="checkbox" checked={checkService} onChange={(e) => setCheckService(e.target.checked)} className="w-4 h-4" style={{ accentColor: 'var(--accent-blue)' }} /><span style={{ color: 'var(--text-primary)' }}>检查 Service 可用性</span></label>
|
||||||
|
|||||||
@@ -6,11 +6,11 @@ import {
|
|||||||
Copy,
|
Copy,
|
||||||
Trash2,
|
Trash2,
|
||||||
Edit2,
|
Edit2,
|
||||||
Shield,
|
|
||||||
GitBranch,
|
GitBranch,
|
||||||
Container,
|
Container,
|
||||||
Cloud,
|
Boxes,
|
||||||
Loader2,
|
Loader2,
|
||||||
|
KeyRound,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
@@ -22,14 +22,15 @@ import { Textarea } from '@/components/ui/textarea';
|
|||||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
|
||||||
const typeConfig: Record<string, { icon: typeof Key; label: string; color: string; bg: string }> = {
|
const typeConfig: Record<string, { icon: typeof Key; label: string; color: string; bg: string }> = {
|
||||||
ssh: { icon: Key, label: 'SSH密钥', color: '#0969da', bg: '#ddf4ff' },
|
ssh: { icon: Key, label: 'SSH 密钥', color: '#0969da', bg: '#ddf4ff' },
|
||||||
password: { icon: Shield, label: '用户名密码', color: '#9a6700', bg: '#fff8c5' },
|
docker: { icon: Container, label: 'Docker 认证', color: '#1a7f37', bg: '#dafbe1' },
|
||||||
docker: { icon: Container, label: 'Docker认证', color: '#1a7f37', bg: '#dafbe1' },
|
git: { icon: GitBranch, label: 'Git 仓库', color: '#8250df', bg: '#fbefff' },
|
||||||
git: { icon: GitBranch, label: 'Git凭证', color: '#8250df', bg: '#fbefff' },
|
kubernetes: { icon: Boxes, label: 'Kubernetes', color: '#bc4c00', bg: '#fff1e5' },
|
||||||
kubeconfig: { icon: Key, label: 'Kubeconfig', color: '#bc4c00', bg: '#fff1e5' },
|
|
||||||
aksk: { icon: Cloud, label: 'AK/SK', color: '#0f766e', bg: '#ccfbf1' },
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 新建可选类型(发布流程所需:ssh / docker / git / kubernetes)
|
||||||
|
const CREATE_TYPES = ['ssh', 'docker', 'git', 'kubernetes'];
|
||||||
|
|
||||||
const fallbackConfig = { icon: Key, label: '其他', color: '#6e7781', bg: '#f6f8fa' };
|
const fallbackConfig = { icon: Key, label: '其他', color: '#6e7781', bg: '#f6f8fa' };
|
||||||
|
|
||||||
function getConfig(type: string) {
|
function getConfig(type: string) {
|
||||||
@@ -45,10 +46,133 @@ interface CredentialForm {
|
|||||||
name: string;
|
name: string;
|
||||||
type: string;
|
type: string;
|
||||||
scope: string;
|
scope: string;
|
||||||
content: string;
|
// ssh
|
||||||
|
privateKey: string; sshUser: string; sshPort: string; sshPassword: string;
|
||||||
|
// docker
|
||||||
|
dockerServer: string; dockerUsername: string; dockerPassword: string;
|
||||||
|
// git
|
||||||
|
gitUrl: string; gitUsername: string; gitToken: string;
|
||||||
|
// kubernetes
|
||||||
|
k8sMode: 'token' | 'kubeconfig';
|
||||||
|
k8sApiServer: string; k8sNamespace: string; k8sToken: string;
|
||||||
|
k8sKubeconfig: string; k8sContext: string;
|
||||||
|
rbacOpen: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const emptyForm: CredentialForm = { name: '', type: 'ssh', scope: '全局', content: '' };
|
const emptyForm: CredentialForm = {
|
||||||
|
name: '', type: 'ssh', scope: '全局',
|
||||||
|
privateKey: '', sshUser: 'root', sshPort: '22', sshPassword: '',
|
||||||
|
dockerServer: '', dockerUsername: '', dockerPassword: '',
|
||||||
|
gitUrl: '', gitUsername: '', gitToken: '',
|
||||||
|
k8sMode: 'token', k8sApiServer: '', k8sNamespace: 'flowstack', k8sToken: '',
|
||||||
|
k8sKubeconfig: '', k8sContext: '',
|
||||||
|
rbacOpen: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
// 按类型组装加密内容 JSON(编辑时仅提交非空字段 = 留空不修改)
|
||||||
|
function buildContent(form: CredentialForm): string | undefined {
|
||||||
|
const has = (s: string) => s && s.trim() !== '';
|
||||||
|
let obj: Record<string, any>;
|
||||||
|
switch (form.type) {
|
||||||
|
case 'ssh':
|
||||||
|
obj = {};
|
||||||
|
if (has(form.privateKey)) obj.private_key = form.privateKey.trim();
|
||||||
|
if (has(form.sshUser)) obj.ssh_user = form.sshUser.trim();
|
||||||
|
if (has(form.sshPort)) obj.ssh_port = Number(form.sshPort) || 22;
|
||||||
|
if (has(form.sshPassword)) obj.password = form.sshPassword;
|
||||||
|
break;
|
||||||
|
case 'docker':
|
||||||
|
obj = {};
|
||||||
|
if (has(form.dockerServer)) obj.server = form.dockerServer.trim();
|
||||||
|
if (has(form.dockerUsername)) obj.username = form.dockerUsername.trim();
|
||||||
|
if (has(form.dockerPassword)) obj.password = form.dockerPassword;
|
||||||
|
break;
|
||||||
|
case 'git':
|
||||||
|
obj = {};
|
||||||
|
if (has(form.gitUrl)) obj.url = form.gitUrl.trim();
|
||||||
|
if (has(form.gitUsername)) obj.username = form.gitUsername.trim();
|
||||||
|
if (has(form.gitToken)) obj.token = form.gitToken;
|
||||||
|
break;
|
||||||
|
case 'kubernetes':
|
||||||
|
obj = { mode: form.k8sMode };
|
||||||
|
if (form.k8sMode === 'token') {
|
||||||
|
if (has(form.k8sApiServer)) obj.apiServer = form.k8sApiServer.trim();
|
||||||
|
if (has(form.k8sNamespace)) obj.namespace = form.k8sNamespace.trim();
|
||||||
|
if (has(form.k8sToken)) obj.token = form.k8sToken.trim();
|
||||||
|
} else {
|
||||||
|
if (has(form.k8sKubeconfig)) obj.kubeconfig = form.k8sKubeconfig.trim();
|
||||||
|
if (has(form.k8sContext)) obj.context = form.k8sContext.trim();
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
const values = Object.values(obj).filter((v) => v !== undefined && v !== '' && v !== 'mode');
|
||||||
|
if (values.length === 0) return undefined;
|
||||||
|
return JSON.stringify(obj);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 命名空间最小授权命令(参考 LokiStack:SA + 命名空间级 Role + 长期 Token)
|
||||||
|
function buildRbacCommand(ns: string): string {
|
||||||
|
const safeNs = (ns && ns.trim()) || 'flowstack';
|
||||||
|
return [
|
||||||
|
"# 1) 一次创建:命名空间 + ServiceAccount + 命名空间级 Role + 长期 Token",
|
||||||
|
"kubectl apply -f - <<'YAML'",
|
||||||
|
"apiVersion: v1",
|
||||||
|
"kind: Namespace",
|
||||||
|
"metadata:",
|
||||||
|
" name: " + safeNs,
|
||||||
|
"---",
|
||||||
|
"apiVersion: v1",
|
||||||
|
"kind: ServiceAccount",
|
||||||
|
"metadata:",
|
||||||
|
" name: flowstack",
|
||||||
|
" namespace: " + safeNs,
|
||||||
|
"---",
|
||||||
|
"apiVersion: rbac.authorization.k8s.io/v1",
|
||||||
|
"kind: Role",
|
||||||
|
"metadata:",
|
||||||
|
" name: flowstack",
|
||||||
|
" namespace: " + safeNs,
|
||||||
|
"rules:",
|
||||||
|
' - apiGroups: [""]',
|
||||||
|
' resources: ["pods", "pods/log", "services", "configmaps", "secrets", "events"]',
|
||||||
|
' verbs: ["get", "list", "watch", "create", "update", "patch", "delete"]',
|
||||||
|
' - apiGroups: ["apps"]',
|
||||||
|
' resources: ["deployments", "statefulsets", "daemonsets"]',
|
||||||
|
' verbs: ["get", "list", "watch", "create", "update", "patch", "delete"]',
|
||||||
|
' - apiGroups: ["networking.k8s.io"]',
|
||||||
|
' resources: ["ingresses"]',
|
||||||
|
' verbs: ["get", "list", "watch", "create", "update", "patch", "delete"]',
|
||||||
|
"---",
|
||||||
|
"apiVersion: rbac.authorization.k8s.io/v1",
|
||||||
|
"kind: RoleBinding",
|
||||||
|
"metadata:",
|
||||||
|
" name: flowstack",
|
||||||
|
" namespace: " + safeNs,
|
||||||
|
"subjects:",
|
||||||
|
" - kind: ServiceAccount",
|
||||||
|
" name: flowstack",
|
||||||
|
" namespace: " + safeNs,
|
||||||
|
"roleRef:",
|
||||||
|
" kind: Role",
|
||||||
|
" name: flowstack",
|
||||||
|
" apiGroup: rbac.authorization.k8s.io",
|
||||||
|
"---",
|
||||||
|
"apiVersion: v1",
|
||||||
|
"kind: Secret",
|
||||||
|
"metadata:",
|
||||||
|
" name: flowstack-token",
|
||||||
|
" namespace: " + safeNs,
|
||||||
|
" annotations:",
|
||||||
|
" kubernetes.io/service-account.name: flowstack",
|
||||||
|
"type: kubernetes.io/service-account-token",
|
||||||
|
"YAML",
|
||||||
|
"",
|
||||||
|
"# 2) 取出长期 Token(不自动过期),粘贴到上方 Token 输入框",
|
||||||
|
"kubectl -n " + safeNs + " get secret flowstack-token -o jsonpath='{.data.token}' | base64 -d",
|
||||||
|
].join("\n");
|
||||||
|
}
|
||||||
|
|
||||||
const inputStyle = {
|
const inputStyle = {
|
||||||
background: 'var(--panel-bg-secondary)',
|
background: 'var(--panel-bg-secondary)',
|
||||||
@@ -81,8 +205,8 @@ export default function CredentialManager() {
|
|||||||
setEditing(cred ?? null);
|
setEditing(cred ?? null);
|
||||||
setForm(
|
setForm(
|
||||||
cred
|
cred
|
||||||
? { name: cred.name ?? '', type: cred.type ?? 'ssh', scope: cred.scope ?? '', content: '' }
|
? { ...emptyForm, name: cred.name ?? '', type: cred.type ?? 'ssh', scope: cred.scope ?? '' }
|
||||||
: emptyForm,
|
: { ...emptyForm },
|
||||||
);
|
);
|
||||||
setDialogOpen(true);
|
setDialogOpen(true);
|
||||||
};
|
};
|
||||||
@@ -114,9 +238,14 @@ export default function CredentialManager() {
|
|||||||
toast.error('请填写凭证名称');
|
toast.error('请填写凭证名称');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
// 内容加密存储(write-only):编辑时留空表示不修改
|
// 内容加密存储(write-only):编辑时字段留空表示不修改
|
||||||
|
const content = buildContent(form);
|
||||||
|
if (!editing && !content) {
|
||||||
|
toast.error('请填写凭证内容');
|
||||||
|
return;
|
||||||
|
}
|
||||||
const body: any = { name: form.name.trim(), type: form.type, scope: form.scope.trim() };
|
const body: any = { name: form.name.trim(), type: form.type, scope: form.scope.trim() };
|
||||||
if (form.content.trim()) body.content = form.content.trim();
|
if (content) body.content = content;
|
||||||
saveMutation.mutate({ id: editing?.id, body });
|
saveMutation.mutate({ id: editing?.id, body });
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -338,14 +467,14 @@ export default function CredentialManager() {
|
|||||||
<div className="grid grid-cols-2 gap-3">
|
<div className="grid grid-cols-2 gap-3">
|
||||||
<div className="space-y-1.5">
|
<div className="space-y-1.5">
|
||||||
<Label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>类型</Label>
|
<Label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>类型</Label>
|
||||||
<Select value={form.type} onValueChange={(v) => setForm({ ...form, type: v })}>
|
<Select value={form.type} onValueChange={(v) => setForm({ ...form, type: v })} disabled={!!editing}>
|
||||||
<SelectTrigger className="h-8 text-[12px]" style={inputStyle}>
|
<SelectTrigger className="h-8 text-[12px]" style={inputStyle}>
|
||||||
<SelectValue placeholder="选择类型" />
|
<SelectValue placeholder="选择类型" />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
{Object.entries(typeConfig).map(([type, config]) => (
|
{CREATE_TYPES.map((type) => (
|
||||||
<SelectItem key={type} value={type} className="text-[12px]">
|
<SelectItem key={type} value={type} className="text-[12px]">
|
||||||
{config.label}
|
{typeConfig[type].label}
|
||||||
</SelectItem>
|
</SelectItem>
|
||||||
))}
|
))}
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
@@ -362,18 +491,157 @@ export default function CredentialManager() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-1.5">
|
{/* ---- 类型化字段(编辑时留空 = 不修改) ---- */}
|
||||||
<Label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>内容</Label>
|
{form.type === 'ssh' && (
|
||||||
<Textarea
|
<>
|
||||||
className="text-[12px] min-h-[88px] font-mono"
|
<div className="space-y-1.5">
|
||||||
style={inputStyle}
|
<Label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>私钥(PEM)</Label>
|
||||||
value={form.content}
|
<Textarea className="text-[11px] min-h-[72px] font-mono" style={inputStyle}
|
||||||
onChange={(e) => setForm({ ...form, content: e.target.value })}
|
value={form.privateKey} onChange={(e) => setForm({ ...form, privateKey: e.target.value })}
|
||||||
placeholder={editing ? '留空表示不修改' : '私钥 / 密码 / Token / kubeconfig / AK·SK 等'}
|
placeholder={editing ? '留空表示不修改' : '-----BEGIN OPENSSH PRIVATE KEY-----\n...'} />
|
||||||
/>
|
</div>
|
||||||
<div className="text-[11px]" style={{ color: 'var(--text-tertiary)' }}>
|
<div className="grid grid-cols-3 gap-3">
|
||||||
内容加密存储,保存后不可查看。
|
<div className="space-y-1.5">
|
||||||
</div>
|
<Label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>用户名</Label>
|
||||||
|
<Input className="h-8 text-[12px]" style={inputStyle} value={form.sshUser}
|
||||||
|
onChange={(e) => setForm({ ...form, sshUser: e.target.value })} placeholder="root" />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>端口</Label>
|
||||||
|
<Input className="h-8 text-[12px]" style={inputStyle} value={form.sshPort}
|
||||||
|
onChange={(e) => setForm({ ...form, sshPort: e.target.value })} placeholder="22" />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>密码(可选)</Label>
|
||||||
|
<Input type="password" className="h-8 text-[12px]" style={inputStyle} value={form.sshPassword}
|
||||||
|
onChange={(e) => setForm({ ...form, sshPassword: e.target.value })} placeholder={editing ? '留空不修改' : '密钥密码'} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{form.type === 'docker' && (
|
||||||
|
<>
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>Registry 地址</Label>
|
||||||
|
<Input className="h-8 text-[12px] font-mono" style={inputStyle} value={form.dockerServer}
|
||||||
|
onChange={(e) => setForm({ ...form, dockerServer: e.target.value })} placeholder="registry.example.com" />
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>用户名</Label>
|
||||||
|
<Input className="h-8 text-[12px]" style={inputStyle} value={form.dockerUsername}
|
||||||
|
onChange={(e) => setForm({ ...form, dockerUsername: e.target.value })} />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>密码 / Token</Label>
|
||||||
|
<Input type="password" className="h-8 text-[12px]" style={inputStyle} value={form.dockerPassword}
|
||||||
|
onChange={(e) => setForm({ ...form, dockerPassword: e.target.value })} placeholder={editing ? '留空不修改' : ''} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{form.type === 'git' && (
|
||||||
|
<>
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>仓库地址</Label>
|
||||||
|
<Input className="h-8 text-[12px] font-mono" style={inputStyle} value={form.gitUrl}
|
||||||
|
onChange={(e) => setForm({ ...form, gitUrl: e.target.value })} placeholder="https://gitee.com/org/repo.git" />
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>用户名</Label>
|
||||||
|
<Input className="h-8 text-[12px]" style={inputStyle} value={form.gitUsername}
|
||||||
|
onChange={(e) => setForm({ ...form, gitUsername: e.target.value })} />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>访问 Token</Label>
|
||||||
|
<Input type="password" className="h-8 text-[12px]" style={inputStyle} value={form.gitToken}
|
||||||
|
onChange={(e) => setForm({ ...form, gitToken: e.target.value })} placeholder={editing ? '留空不修改' : 'Personal Access Token'} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{form.type === 'kubernetes' && (
|
||||||
|
<>
|
||||||
|
<div className="flex items-center rounded-md border overflow-hidden w-fit" style={{ borderColor: 'var(--border-color-light)' }}>
|
||||||
|
{[{ id: 'token', label: 'Token(推荐)' }, { id: 'kubeconfig', label: 'Kubeconfig' }].map((m) => (
|
||||||
|
<button key={m.id} type="button" onClick={() => setForm({ ...form, k8sMode: m.id as 'token' | 'kubeconfig' })}
|
||||||
|
className="px-3 py-[5px] text-[11px] font-medium"
|
||||||
|
style={{ background: form.k8sMode === m.id ? 'var(--accent-blue)' : 'transparent', color: form.k8sMode === m.id ? '#fff' : 'var(--text-secondary)' }}>
|
||||||
|
{m.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{form.k8sMode === 'token' ? (
|
||||||
|
<>
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>API Server</Label>
|
||||||
|
<Input className="h-8 text-[12px] font-mono" style={inputStyle} value={form.k8sApiServer}
|
||||||
|
onChange={(e) => setForm({ ...form, k8sApiServer: e.target.value })} placeholder="https://k8s.example.com:6443" />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>命名空间</Label>
|
||||||
|
<Input className="h-8 text-[12px] font-mono" style={inputStyle} value={form.k8sNamespace}
|
||||||
|
onChange={(e) => setForm({ ...form, k8sNamespace: e.target.value })} placeholder="flowstack" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>Token{editing ? '(留空不修改)' : ''}</Label>
|
||||||
|
<Textarea className="text-[11px] min-h-[64px] font-mono" style={inputStyle}
|
||||||
|
value={form.k8sToken} onChange={(e) => setForm({ ...form, k8sToken: e.target.value })}
|
||||||
|
placeholder="eyJhbGciOiJSUzI1NiIs..." />
|
||||||
|
</div>
|
||||||
|
{/* 命名空间长期授权引导(LokiStack 模式) */}
|
||||||
|
<div className="rounded-md border" style={{ borderColor: 'var(--border-color-light)', background: 'var(--panel-bg-secondary)' }}>
|
||||||
|
<button type="button" onClick={() => setForm({ ...form, rbacOpen: !form.rbacOpen })}
|
||||||
|
className="w-full flex items-center gap-1.5 px-3 py-2 text-[11px] font-medium"
|
||||||
|
style={{ color: 'var(--accent-blue)' }}>
|
||||||
|
<KeyRound className="w-3 h-3" />
|
||||||
|
最小授权命令:只授予「{form.k8sNamespace || 'flowstack'}」命名空间权限(点击展开)
|
||||||
|
</button>
|
||||||
|
{form.rbacOpen && (
|
||||||
|
<div className="px-3 pb-3 space-y-2">
|
||||||
|
<p className="text-[11px]" style={{ color: 'var(--text-tertiary)' }}>
|
||||||
|
在集群执行一次以下命令创建 ServiceAccount + 命名空间级 Role + 长期 Token;Token 泄露只影响该命名空间,不要使用 cluster-admin。
|
||||||
|
</p>
|
||||||
|
<div className="relative">
|
||||||
|
<pre className="text-[10px] font-mono whitespace-pre overflow-x-auto p-2.5 rounded-md max-h-64 overflow-y-auto custom-scrollbar"
|
||||||
|
style={{ background: 'var(--panel-bg)', border: '1px solid var(--border-color-light)', color: 'var(--text-secondary)' }}>
|
||||||
|
{buildRbacCommand(form.k8sNamespace)}
|
||||||
|
</pre>
|
||||||
|
<button type="button"
|
||||||
|
onClick={() => { navigator.clipboard.writeText(buildRbacCommand(form.k8sNamespace)); toast.success('授权命令已复制'); }}
|
||||||
|
className="absolute top-1.5 right-1.5 p-1 rounded" style={{ color: 'var(--text-tertiary)', background: 'var(--panel-bg-secondary)' }} title="复制">
|
||||||
|
<Copy className="w-3 h-3" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<p className="text-[11px]" style={{ color: 'var(--text-tertiary)' }}>
|
||||||
|
Token 长期有效且仅绑定该命名空间 Role;内容加密存储、接口不回明文。轮换:删除 Secret 重建即失效。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>Kubeconfig(整份 YAML{editing ? ',留空不修改' : ''})</Label>
|
||||||
|
<Textarea className="text-[11px] min-h-[110px] font-mono" style={inputStyle}
|
||||||
|
value={form.k8sKubeconfig} onChange={(e) => setForm({ ...form, k8sKubeconfig: e.target.value })}
|
||||||
|
placeholder={'apiVersion: v1\nkind: Config\nclusters:\n- cluster:\n server: https://...'} />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>Context(可选,覆盖默认)</Label>
|
||||||
|
<Input className="h-8 text-[12px] font-mono" style={inputStyle} value={form.k8sContext}
|
||||||
|
onChange={(e) => setForm({ ...form, k8sContext: e.target.value })} />
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<div className="text-[11px]" style={{ color: 'var(--text-tertiary)' }}>
|
||||||
|
内容加密存储,保存后不可查看;编辑时留空表示保持原值。
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<DialogFooter>
|
<DialogFooter>
|
||||||
|
|||||||
@@ -0,0 +1,107 @@
|
|||||||
|
import { useMemo, useState } from 'react';
|
||||||
|
import { BookOpen, RefreshCw, Loader2 } from 'lucide-react';
|
||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import { Marked } from 'marked';
|
||||||
|
import { gfmHeadingId } from 'marked-gfm-heading-id';
|
||||||
|
import { api } from '@/lib/api';
|
||||||
|
|
||||||
|
type DocKind = 'guide' | 'api';
|
||||||
|
|
||||||
|
const meta: Record<DocKind, { title: string; subtitle: string }> = {
|
||||||
|
guide: { title: '使用指南', subtitle: '每个功能一句话讲清:是什么 → 怎么用 → 实用技巧' },
|
||||||
|
api: { title: '接口文档', subtitle: '与当前后端代码对齐;调用需登录 Token,敏感字段只写不回显' },
|
||||||
|
};
|
||||||
|
|
||||||
|
// 从 Markdown 提取 ## 级标题做目录(marked-gfm-heading-id 生成锚点 id)
|
||||||
|
function extractToc(md: string): { text: string; id: string; level: number }[] {
|
||||||
|
const out: { text: string; id: string; level: number }[] = [];
|
||||||
|
for (const line of md.split('\n')) {
|
||||||
|
const m = /^(#{2,3})\s+(.+)$/.exec(line.trim());
|
||||||
|
if (!m) continue;
|
||||||
|
const text = m[2].trim();
|
||||||
|
out.push({ text, id: headingId(text), level: m[1].length });
|
||||||
|
}
|
||||||
|
return out;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 与 marked-gfm-heading-id 的默认 slug 规则保持一致(小写、去标点、空格转 -)
|
||||||
|
function headingId(text: string): string {
|
||||||
|
return text.toLowerCase().replace(/[^\p{L}\p{N}\s-]/gu, '').trim().replace(/\s+/g, '-');
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Docs() {
|
||||||
|
const [kind, setKind] = useState<DocKind>('guide');
|
||||||
|
|
||||||
|
const { data, isLoading, refetch, isRefetching } = useQuery({
|
||||||
|
queryKey: ['docs'],
|
||||||
|
queryFn: () => api<any>('/api/docs'),
|
||||||
|
});
|
||||||
|
|
||||||
|
const raw = (kind === 'guide' ? data?.guide : data?.api) || '';
|
||||||
|
|
||||||
|
const html = useMemo(() => {
|
||||||
|
const marked = new Marked(gfmHeadingId());
|
||||||
|
return marked.parse(raw, { async: false }) as string;
|
||||||
|
}, [raw]);
|
||||||
|
|
||||||
|
const toc = useMemo(() => extractToc(raw), [raw]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="h-full flex flex-col" style={{ background: 'var(--canvas-bg)' }}>
|
||||||
|
{/* Header */}
|
||||||
|
<div className="px-5 py-3 border-b flex items-center justify-between flex-shrink-0" style={{ background: 'var(--panel-bg)', borderColor: 'var(--border-color)' }}>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<BookOpen className="w-4.5 h-4.5" style={{ color: 'var(--accent-blue)' }} />
|
||||||
|
<h1 className="text-[15px] font-semibold" style={{ color: 'var(--text-primary)' }}>文档中心</h1>
|
||||||
|
{/* 指南/接口 切换 */}
|
||||||
|
<div className="flex items-center rounded-md border overflow-hidden ml-2" style={{ borderColor: 'var(--border-color-light)' }}>
|
||||||
|
{(['guide', 'api'] as DocKind[]).map((k) => (
|
||||||
|
<button key={k} onClick={() => setKind(k)} className="px-3 py-[3px] text-[11px] font-medium"
|
||||||
|
style={{ background: kind === k ? 'var(--accent-blue)' : 'transparent', color: kind === k ? '#fff' : 'var(--text-secondary)' }}>
|
||||||
|
{meta[k].title}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button onClick={() => refetch()} className="flex items-center gap-1 px-3 py-[5px] text-[12px] font-medium rounded-md border" style={{ borderColor: 'var(--border-color-light)', color: 'var(--text-secondary)' }}>
|
||||||
|
<RefreshCw className={`w-3.5 h-3.5 ${isRefetching ? 'animate-spin' : ''}`} />刷新
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-1 flex overflow-hidden">
|
||||||
|
{/* 左侧目录 */}
|
||||||
|
<div className="w-56 border-r overflow-y-auto custom-scrollbar flex-shrink-0 py-3" style={{ background: 'var(--panel-bg)', borderColor: 'var(--border-color)' }}>
|
||||||
|
<div className="px-4 pb-2 text-[11px] font-semibold" style={{ color: 'var(--text-tertiary)' }}>目录</div>
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="px-4 py-4 text-[12px]" style={{ color: 'var(--text-tertiary)' }}>加载中…</div>
|
||||||
|
) : (
|
||||||
|
toc.map((t) => (
|
||||||
|
<a key={t.id + t.text} href={`#${t.id}`}
|
||||||
|
className={`block truncate hover:bg-black/[0.03] ${t.level === 3 ? 'pl-7' : 'pl-4'} pr-3 py-[5px] text-[12px]`}
|
||||||
|
style={{ color: t.level === 3 ? 'var(--text-tertiary)' : 'var(--text-secondary)' }}>
|
||||||
|
{t.text}
|
||||||
|
</a>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 右侧内容 */}
|
||||||
|
<div className="flex-1 overflow-y-auto custom-scrollbar">
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="flex items-center justify-center gap-2 py-20 text-[13px]" style={{ color: 'var(--text-tertiary)' }}>
|
||||||
|
<Loader2 className="w-4 h-4 animate-spin" />加载文档中…
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="max-w-3xl mx-auto px-8 py-6">
|
||||||
|
<div className="mb-4 pb-4 border-b" style={{ borderColor: 'var(--border-color)' }}>
|
||||||
|
<h2 className="text-[17px] font-bold" style={{ color: 'var(--text-primary)' }}>{meta[kind].title}</h2>
|
||||||
|
<p className="text-[12px] mt-1" style={{ color: 'var(--text-tertiary)' }}>{meta[kind].subtitle}</p>
|
||||||
|
</div>
|
||||||
|
<div className="md-body" dangerouslySetInnerHTML={{ __html: html }} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -272,7 +272,7 @@ export default function EnvironmentManager() {
|
|||||||
color: activeTab === 'k8s' ? 'var(--accent-blue)' : 'var(--text-secondary)',
|
color: activeTab === 'k8s' ? 'var(--accent-blue)' : 'var(--text-secondary)',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
K8s集群
|
Kubernetes 集群
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -433,7 +433,7 @@ export default function EnvironmentManager() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
/* K8s Clusters */
|
/* Kubernetes 集群 */
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<div className="grid grid-cols-3 gap-3 mb-4">
|
<div className="grid grid-cols-3 gap-3 mb-4">
|
||||||
{clusterStats.map((stat) => (
|
{clusterStats.map((stat) => (
|
||||||
|
|||||||
@@ -3,9 +3,26 @@ import { Rocket, Loader2, KeyRound, User } from 'lucide-react';
|
|||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
import { apiClient, auth } from '@/lib/api';
|
import { apiClient, auth } from '@/lib/api';
|
||||||
|
|
||||||
|
const REMEMBER_KEY = 'flowstack-remember';
|
||||||
|
|
||||||
|
// 记住密码:明文存 localStorage 仅适合内网工具场景;不勾选则彻底不落盘
|
||||||
|
function readRemember(): { username: string; password: string } | null {
|
||||||
|
try {
|
||||||
|
const raw = localStorage.getItem(REMEMBER_KEY);
|
||||||
|
if (!raw) return null;
|
||||||
|
const parsed = JSON.parse(raw);
|
||||||
|
if (parsed?.username && parsed?.password) return parsed;
|
||||||
|
} catch {
|
||||||
|
// 脏数据忽略
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
export default function Login({ onSuccess }: { onSuccess: () => void }) {
|
export default function Login({ onSuccess }: { onSuccess: () => void }) {
|
||||||
const [username, setUsername] = useState('');
|
const remembered = readRemember();
|
||||||
const [password, setPassword] = useState('');
|
const [username, setUsername] = useState(remembered?.username ?? '');
|
||||||
|
const [password, setPassword] = useState(remembered?.password ?? '');
|
||||||
|
const [remember, setRemember] = useState(!!remembered);
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
const submit = async (e?: React.FormEvent) => {
|
const submit = async (e?: React.FormEvent) => {
|
||||||
@@ -18,6 +35,11 @@ export default function Login({ onSuccess }: { onSuccess: () => void }) {
|
|||||||
try {
|
try {
|
||||||
const res = await apiClient.login(username.trim(), password);
|
const res = await apiClient.login(username.trim(), password);
|
||||||
auth.setToken(res.token);
|
auth.setToken(res.token);
|
||||||
|
if (remember) {
|
||||||
|
localStorage.setItem(REMEMBER_KEY, JSON.stringify({ username: username.trim(), password }));
|
||||||
|
} else {
|
||||||
|
localStorage.removeItem(REMEMBER_KEY);
|
||||||
|
}
|
||||||
toast.success(`欢迎,${res.nickname || res.username}`);
|
toast.success(`欢迎,${res.nickname || res.username}`);
|
||||||
onSuccess();
|
onSuccess();
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
@@ -69,6 +91,15 @@ export default function Login({ onSuccess }: { onSuccess: () => void }) {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<label className="flex items-center gap-1.5 cursor-pointer select-none" title="在本机记住账号与密码,公共电脑请勿勾选">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={remember}
|
||||||
|
onChange={(e) => setRemember(e.target.checked)}
|
||||||
|
className="w-3.5 h-3.5 accent-[var(--accent-blue)]"
|
||||||
|
/>
|
||||||
|
<span className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>记住密码</span>
|
||||||
|
</label>
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
|
|||||||
@@ -17,6 +17,7 @@ import {
|
|||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
import { apiClient } from '@/lib/api';
|
import { apiClient } from '@/lib/api';
|
||||||
|
import { useSession } from '@/providers/session';
|
||||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
|
||||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
|
||||||
@@ -77,7 +78,7 @@ const statusConfig: Record<string, { icon: typeof CheckCircle2; color: string; l
|
|||||||
};
|
};
|
||||||
|
|
||||||
const deployTypeConfig: Record<string, { label: string; color: string; bg: string }> = {
|
const deployTypeConfig: Record<string, { label: string; color: string; bg: string }> = {
|
||||||
k8s: { label: 'K8s', color: '#0969da', bg: '#ddf4ff' },
|
k8s: { label: 'Kubernetes', color: '#0969da', bg: '#ddf4ff' },
|
||||||
host: { label: '主机', color: '#1a7f37', bg: '#dafbe1' },
|
host: { label: '主机', color: '#1a7f37', bg: '#dafbe1' },
|
||||||
gitops: { label: 'GitOps', color: '#0e7c7b', bg: '#d5f5f6' },
|
gitops: { label: 'GitOps', color: '#0e7c7b', bg: '#d5f5f6' },
|
||||||
};
|
};
|
||||||
@@ -120,6 +121,7 @@ export default function PipelineList({ onSelectPipeline }: { onSelectPipeline: (
|
|||||||
const [statusFilter, setStatusFilter] = useState<string>('all');
|
const [statusFilter, setStatusFilter] = useState<string>('all');
|
||||||
const [createOpen, setCreateOpen] = useState(false);
|
const [createOpen, setCreateOpen] = useState(false);
|
||||||
const [form, setForm] = useState<CreatePipelineForm>(emptyForm);
|
const [form, setForm] = useState<CreatePipelineForm>(emptyForm);
|
||||||
|
const { isAdmin } = useSession();
|
||||||
|
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
@@ -163,6 +165,8 @@ export default function PipelineList({ onSelectPipeline }: { onSelectPipeline: (
|
|||||||
description: p.description || '',
|
description: p.description || '',
|
||||||
branch: p.sourceBranch || '-',
|
branch: p.sourceBranch || '-',
|
||||||
type: p.type,
|
type: p.type,
|
||||||
|
// 后端附带的当前用户权限等级:1 查看 / 2 执行 / 3 管理 / 4 管理员
|
||||||
|
accessLevel: (p as any).accessLevel ?? 4,
|
||||||
deploy: deployTypeConfig[p.deployType] || fallbackDeploy,
|
deploy: deployTypeConfig[p.deployType] || fallbackDeploy,
|
||||||
// 筛选用映射状态:lastRun 为空记为 pending(未执行)
|
// 筛选用映射状态:lastRun 为空记为 pending(未执行)
|
||||||
mappedStatus: p.lastRun?.status ?? 'pending',
|
mappedStatus: p.lastRun?.status ?? 'pending',
|
||||||
@@ -289,15 +293,17 @@ export default function PipelineList({ onSelectPipeline }: { onSelectPipeline: (
|
|||||||
<List className="w-3.5 h-3.5" style={{ color: 'var(--text-secondary)' }} />
|
<List className="w-3.5 h-3.5" style={{ color: 'var(--text-secondary)' }} />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{/* New pipeline button */}
|
{/* New pipeline button(新建/删除仅管理员) */}
|
||||||
<button
|
{isAdmin && (
|
||||||
className="flex items-center gap-1.5 px-3 py-[6px] text-[13px] font-medium rounded-md text-white"
|
<button
|
||||||
style={{ background: 'var(--accent-blue)' }}
|
className="flex items-center gap-1.5 px-3 py-[6px] text-[13px] font-medium rounded-md text-white"
|
||||||
onClick={() => setCreateOpen(true)}
|
style={{ background: 'var(--accent-blue)' }}
|
||||||
>
|
onClick={() => setCreateOpen(true)}
|
||||||
<Plus className="w-3.5 h-3.5" />
|
>
|
||||||
新建流水线
|
<Plus className="w-3.5 h-3.5" />
|
||||||
</button>
|
新建流水线
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -314,7 +320,11 @@ export default function PipelineList({ onSelectPipeline }: { onSelectPipeline: (
|
|||||||
<Search className="w-5 h-5" style={{ color: 'var(--text-tertiary)' }} />
|
<Search className="w-5 h-5" style={{ color: 'var(--text-tertiary)' }} />
|
||||||
</div>
|
</div>
|
||||||
<p className="text-[13px] font-medium" style={{ color: 'var(--text-secondary)' }}>未找到流水线</p>
|
<p className="text-[13px] font-medium" style={{ color: 'var(--text-secondary)' }}>未找到流水线</p>
|
||||||
<p className="text-[12px] mt-1" style={{ color: 'var(--text-tertiary)' }}>尝试调整搜索条件或新建流水线</p>
|
<p className="text-[12px] mt-1" style={{ color: 'var(--text-tertiary)' }}>
|
||||||
|
{items.length === 0 && !isAdmin
|
||||||
|
? '暂无被授权的流水线,请联系管理员在「流水线权限」中授权'
|
||||||
|
: '尝试调整搜索条件或新建流水线'}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
) : viewMode === 'card' ? (
|
) : viewMode === 'card' ? (
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
|
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
|
||||||
@@ -397,19 +407,21 @@ export default function PipelineList({ onSelectPipeline }: { onSelectPipeline: (
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-0 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0">
|
<div className="flex items-center gap-0 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0">
|
||||||
<button
|
{pipeline.accessLevel >= 2 && (
|
||||||
onClick={(e) => {
|
<button
|
||||||
e.stopPropagation();
|
onClick={(e) => {
|
||||||
runMutation.mutate(pipeline.raw.id);
|
e.stopPropagation();
|
||||||
}}
|
runMutation.mutate(pipeline.raw.id);
|
||||||
className="p-1 rounded hover:bg-black/5"
|
}}
|
||||||
title="执行"
|
className="p-1 rounded hover:bg-black/5"
|
||||||
>
|
title="执行"
|
||||||
<Play className="w-3.5 h-3.5" style={{ color: 'var(--accent-green)' }} />
|
>
|
||||||
</button>
|
<Play className="w-3.5 h-3.5" style={{ color: 'var(--accent-green)' }} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
<button
|
<button
|
||||||
className="p-1 rounded hover:bg-black/5"
|
className="p-1 rounded hover:bg-black/5"
|
||||||
title="配置"
|
title={pipeline.accessLevel >= 3 ? '配置' : '查看'}
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
onSelectPipeline(pipeline.id);
|
onSelectPipeline(pipeline.id);
|
||||||
@@ -417,16 +429,18 @@ export default function PipelineList({ onSelectPipeline }: { onSelectPipeline: (
|
|||||||
>
|
>
|
||||||
<Settings className="w-3.5 h-3.5" style={{ color: 'var(--text-tertiary)' }} />
|
<Settings className="w-3.5 h-3.5" style={{ color: 'var(--text-tertiary)' }} />
|
||||||
</button>
|
</button>
|
||||||
<button
|
{isAdmin && (
|
||||||
className="p-1 rounded hover:bg-black/5"
|
<button
|
||||||
title="删除"
|
className="p-1 rounded hover:bg-black/5"
|
||||||
onClick={(e) => {
|
title="删除"
|
||||||
e.stopPropagation();
|
onClick={(e) => {
|
||||||
handleDelete(pipeline);
|
e.stopPropagation();
|
||||||
}}
|
handleDelete(pipeline);
|
||||||
>
|
}}
|
||||||
<Trash2 className="w-3.5 h-3.5" style={{ color: 'var(--text-tertiary)' }} />
|
>
|
||||||
</button>
|
<Trash2 className="w-3.5 h-3.5" style={{ color: 'var(--text-tertiary)' }} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -506,19 +520,21 @@ export default function PipelineList({ onSelectPipeline }: { onSelectPipeline: (
|
|||||||
<td className="px-4 py-3 text-[12px]" style={{ color: 'var(--text-secondary)' }}>{pipeline.triggerText}</td>
|
<td className="px-4 py-3 text-[12px]" style={{ color: 'var(--text-secondary)' }}>{pipeline.triggerText}</td>
|
||||||
<td className="px-4 py-3">
|
<td className="px-4 py-3">
|
||||||
<div className="flex items-center gap-0">
|
<div className="flex items-center gap-0">
|
||||||
<button
|
{pipeline.accessLevel >= 2 && (
|
||||||
onClick={(e) => {
|
<button
|
||||||
e.stopPropagation();
|
onClick={(e) => {
|
||||||
runMutation.mutate(pipeline.raw.id);
|
e.stopPropagation();
|
||||||
}}
|
runMutation.mutate(pipeline.raw.id);
|
||||||
className="p-1 rounded hover:bg-black/5"
|
}}
|
||||||
title="执行"
|
className="p-1 rounded hover:bg-black/5"
|
||||||
>
|
title="执行"
|
||||||
<Play className="w-3.5 h-3.5" style={{ color: 'var(--accent-green)' }} />
|
>
|
||||||
</button>
|
<Play className="w-3.5 h-3.5" style={{ color: 'var(--accent-green)' }} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
<button
|
<button
|
||||||
className="p-1 rounded hover:bg-black/5"
|
className="p-1 rounded hover:bg-black/5"
|
||||||
title="配置"
|
title={pipeline.accessLevel >= 3 ? '配置' : '查看'}
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
onSelectPipeline(pipeline.id);
|
onSelectPipeline(pipeline.id);
|
||||||
@@ -526,16 +542,18 @@ export default function PipelineList({ onSelectPipeline }: { onSelectPipeline: (
|
|||||||
>
|
>
|
||||||
<Settings className="w-3.5 h-3.5" style={{ color: 'var(--text-tertiary)' }} />
|
<Settings className="w-3.5 h-3.5" style={{ color: 'var(--text-tertiary)' }} />
|
||||||
</button>
|
</button>
|
||||||
<button
|
{isAdmin && (
|
||||||
className="p-1 rounded hover:bg-black/5"
|
<button
|
||||||
title="删除"
|
className="p-1 rounded hover:bg-black/5"
|
||||||
onClick={(e) => {
|
title="删除"
|
||||||
e.stopPropagation();
|
onClick={(e) => {
|
||||||
handleDelete(pipeline);
|
e.stopPropagation();
|
||||||
}}
|
handleDelete(pipeline);
|
||||||
>
|
}}
|
||||||
<Trash2 className="w-3.5 h-3.5" style={{ color: 'var(--text-tertiary)' }} />
|
>
|
||||||
</button>
|
<Trash2 className="w-3.5 h-3.5" style={{ color: 'var(--text-tertiary)' }} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@@ -571,7 +589,7 @@ export default function PipelineList({ onSelectPipeline }: { onSelectPipeline: (
|
|||||||
<input
|
<input
|
||||||
value={form.description}
|
value={form.description}
|
||||||
onChange={(e) => setForm((f) => ({ ...f, description: e.target.value }))}
|
onChange={(e) => setForm((f) => ({ ...f, description: e.target.value }))}
|
||||||
placeholder="例如 Go后端服务 - Docker构建 + K8s部署"
|
placeholder="例如 Go后端服务 - Docker构建 + Kubernetes 部署"
|
||||||
className="w-full px-3 py-[7px] rounded-md border text-[13px] outline-none"
|
className="w-full px-3 py-[7px] rounded-md border text-[13px] outline-none"
|
||||||
style={inputStyle}
|
style={inputStyle}
|
||||||
/>
|
/>
|
||||||
@@ -607,7 +625,7 @@ export default function PipelineList({ onSelectPipeline }: { onSelectPipeline: (
|
|||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent style={{ background: 'var(--panel-bg)', borderColor: 'var(--border-color)' }}>
|
<SelectContent style={{ background: 'var(--panel-bg)', borderColor: 'var(--border-color)' }}>
|
||||||
<SelectItem value="host">主机</SelectItem>
|
<SelectItem value="host">主机</SelectItem>
|
||||||
<SelectItem value="k8s">K8s</SelectItem>
|
<SelectItem value="k8s">Kubernetes</SelectItem>
|
||||||
<SelectItem value="gitops">GitOps</SelectItem>
|
<SelectItem value="gitops">GitOps</SelectItem>
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
|
|||||||
@@ -0,0 +1,488 @@
|
|||||||
|
import { useMemo, useState } from 'react';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import {
|
||||||
|
Plus, Search, Trash2, Edit2, Loader2, ShieldCheck, ListChecks, Wand2, CheckSquare, Square, X,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { apiClient } from '@/lib/api';
|
||||||
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { LEVEL_OPTIONS, levelLabel, levelBadgeStyle } from '@/components/PipelineMembersDialog';
|
||||||
|
|
||||||
|
// 与后端 globToRegexp 语义一致:* 任意字符、? 单字符,其余按字面量(不锚定,部分命中即可)
|
||||||
|
function globMatch(glob: string, s: string): boolean {
|
||||||
|
try {
|
||||||
|
const re = new RegExp(glob.replace(/[.*+?^${}()|[\]\\]/g, '\\$&').replace(/\\\*/g, '.*').replace(/\\\?/g, '.'));
|
||||||
|
return re.test(s);
|
||||||
|
} catch {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
interface RoleForm {
|
||||||
|
name: string;
|
||||||
|
scopeMode: 'manual' | 'pattern';
|
||||||
|
pattern: string;
|
||||||
|
pipelineIds: number[];
|
||||||
|
level: string;
|
||||||
|
members: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const emptyForm: RoleForm = {
|
||||||
|
name: '', scopeMode: 'manual', pattern: '', pipelineIds: [], level: 'operator', members: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
const inputStyle = { background: 'var(--panel-bg-secondary)', borderColor: 'var(--border-color-light)', color: 'var(--text-primary)' };
|
||||||
|
|
||||||
|
export default function PipelineRoles() {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const [dialogOpen, setDialogOpen] = useState(false);
|
||||||
|
const [editing, setEditing] = useState<any>(null);
|
||||||
|
const [form, setForm] = useState<RoleForm>(emptyForm);
|
||||||
|
const [pipelineSearch, setPipelineSearch] = useState('');
|
||||||
|
const [userSearch, setUserSearch] = useState('');
|
||||||
|
|
||||||
|
const rolesQuery = useQuery({ queryKey: ['pipeline-roles'], queryFn: apiClient.listPipelineRoles });
|
||||||
|
const pipelinesQuery = useQuery({ queryKey: ['pipelines'], queryFn: apiClient.listPipelines });
|
||||||
|
const usersQuery = useQuery({ queryKey: ['users'], queryFn: apiClient.listUsers });
|
||||||
|
|
||||||
|
const roles: any[] = rolesQuery.data ?? [];
|
||||||
|
const pipelines: any[] = pipelinesQuery.data ?? [];
|
||||||
|
const users: any[] = usersQuery.data ?? [];
|
||||||
|
|
||||||
|
const invalidate = () => queryClient.invalidateQueries({ queryKey: ['pipeline-roles'] });
|
||||||
|
|
||||||
|
const saveMutation = useMutation({
|
||||||
|
mutationFn: (f: RoleForm) => {
|
||||||
|
const body = { name: f.name.trim(), scopeMode: f.scopeMode, pattern: f.pattern.trim(), pipelineIds: f.pipelineIds, level: f.level, members: f.members };
|
||||||
|
return editing ? apiClient.updatePipelineRole(editing.id, body) : apiClient.createPipelineRole(body);
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
toast.success(editing ? '权限组已更新' : '权限组已创建');
|
||||||
|
invalidate();
|
||||||
|
setDialogOpen(false);
|
||||||
|
},
|
||||||
|
onError: (err: Error) => toast.error(err.message),
|
||||||
|
});
|
||||||
|
|
||||||
|
const deleteMutation = useMutation({
|
||||||
|
mutationFn: (id: any) => apiClient.deletePipelineRole(id),
|
||||||
|
onSuccess: () => {
|
||||||
|
toast.success('权限组已删除');
|
||||||
|
invalidate();
|
||||||
|
},
|
||||||
|
onError: (err: Error) => toast.error(err.message),
|
||||||
|
});
|
||||||
|
|
||||||
|
const openCreate = () => {
|
||||||
|
setEditing(null);
|
||||||
|
setForm(emptyForm);
|
||||||
|
setPipelineSearch('');
|
||||||
|
setUserSearch('');
|
||||||
|
setDialogOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const openEdit = (r: any) => {
|
||||||
|
setEditing(r);
|
||||||
|
setForm({
|
||||||
|
name: r.name, scopeMode: r.scopeMode || 'manual', pattern: r.pattern || '',
|
||||||
|
pipelineIds: (r.pipelineIds ?? []).map(Number), level: r.level, members: r.members ?? [],
|
||||||
|
});
|
||||||
|
setPipelineSearch('');
|
||||||
|
setUserSearch('');
|
||||||
|
setDialogOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const submit = () => {
|
||||||
|
if (!form.name.trim()) {
|
||||||
|
toast.error('请填写名称');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (form.scopeMode === 'manual' && form.pipelineIds.length === 0) {
|
||||||
|
toast.error('请至少勾选一条流水线');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (form.scopeMode === 'pattern' && !form.pattern.trim()) {
|
||||||
|
toast.error('请填写名称匹配规则,如 cex-*');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
saveMutation.mutate(form);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 手动多选列表(带搜索)
|
||||||
|
const filteredPipelines = useMemo(() => {
|
||||||
|
const q = pipelineSearch.toLowerCase();
|
||||||
|
return q ? pipelines.filter((p) => p.name?.toLowerCase().includes(q)) : pipelines;
|
||||||
|
}, [pipelines, pipelineSearch]);
|
||||||
|
|
||||||
|
// 通配符实时预览:命中多少条流水线
|
||||||
|
const patternPreview = useMemo(() => {
|
||||||
|
if (form.scopeMode !== 'pattern' || !form.pattern.trim()) return null;
|
||||||
|
const n = pipelines.filter(
|
||||||
|
(p) => globMatch(form.pattern.trim(), p.name || '') || (p.jenkinsJobName && globMatch(form.pattern.trim(), p.jenkinsJobName)),
|
||||||
|
).length;
|
||||||
|
return n;
|
||||||
|
}, [form.scopeMode, form.pattern, pipelines]);
|
||||||
|
|
||||||
|
const filteredUsers = useMemo(() => {
|
||||||
|
const q = userSearch.toLowerCase();
|
||||||
|
return q ? users.filter((u: any) => u.username?.toLowerCase().includes(q) || u.nickname?.toLowerCase().includes(q)) : users;
|
||||||
|
}, [users, userSearch]);
|
||||||
|
|
||||||
|
const pipelineNameById = useMemo(() => {
|
||||||
|
const m = new Map<number, string>();
|
||||||
|
pipelines.forEach((p) => m.set(Number(p.id), p.name));
|
||||||
|
return m;
|
||||||
|
}, [pipelines]);
|
||||||
|
|
||||||
|
const togglePipeline = (id: number) =>
|
||||||
|
setForm((f) => ({
|
||||||
|
...f,
|
||||||
|
pipelineIds: f.pipelineIds.includes(id) ? f.pipelineIds.filter((x) => x !== id) : [...f.pipelineIds, id],
|
||||||
|
}));
|
||||||
|
const toggleMember = (username: string) =>
|
||||||
|
setForm((f) => ({
|
||||||
|
...f,
|
||||||
|
members: f.members.includes(username) ? f.members.filter((x) => x !== username) : [...f.members, username],
|
||||||
|
}));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="h-full flex flex-col" style={{ background: 'var(--canvas-bg)' }}>
|
||||||
|
{/* Header */}
|
||||||
|
<div className="px-5 py-3 border-b flex items-center justify-between flex-shrink-0" style={{ background: 'var(--panel-bg)', borderColor: 'var(--border-color)' }}>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<h1 className="text-[15px] font-semibold" style={{ color: 'var(--text-primary)' }}>流水线权限</h1>
|
||||||
|
<span className="text-[11px] px-2 py-[2px] rounded-full font-medium" style={{ background: 'var(--panel-bg-secondary)', color: 'var(--text-tertiary)' }}>
|
||||||
|
{roles.length}
|
||||||
|
</span>
|
||||||
|
<span className="text-[11px]" style={{ color: 'var(--text-tertiary)' }}>
|
||||||
|
未被授权的普通用户看不到任何流水线;授权后按等级「查看 / 发布 / 管理」放开
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
className="flex items-center gap-1.5 px-3 py-[6px] text-[13px] font-medium rounded-md text-white"
|
||||||
|
style={{ background: 'var(--accent-blue)' }}
|
||||||
|
onClick={openCreate}
|
||||||
|
>
|
||||||
|
<Plus className="w-3.5 h-3.5" />
|
||||||
|
新建权限组
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Table */}
|
||||||
|
<div className="flex-1 overflow-y-auto custom-scrollbar p-5">
|
||||||
|
{rolesQuery.isLoading ? (
|
||||||
|
<div className="flex items-center justify-center gap-2 py-16 text-[13px]" style={{ color: 'var(--text-tertiary)' }}>
|
||||||
|
<Loader2 className="w-4 h-4 animate-spin" /> 加载中...
|
||||||
|
</div>
|
||||||
|
) : roles.length === 0 ? (
|
||||||
|
<div className="flex flex-col items-center gap-2 py-16">
|
||||||
|
<ShieldCheck className="w-8 h-8" style={{ color: 'var(--text-tertiary)' }} />
|
||||||
|
<div className="text-[13px]" style={{ color: 'var(--text-secondary)' }}>还没有权限组</div>
|
||||||
|
<div className="text-[12px]" style={{ color: 'var(--text-tertiary)' }}>
|
||||||
|
新建一个权限组:勾选流水线 → 选择等级 → 添加成员,全程点选无需输入规则
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="rounded-lg border overflow-hidden" style={{ background: 'var(--panel-bg)', borderColor: 'var(--border-color)' }}>
|
||||||
|
<table className="w-full">
|
||||||
|
<thead>
|
||||||
|
<tr style={{ background: 'var(--panel-bg-secondary)' }}>
|
||||||
|
{['名称', '授权范围', '等级', '成员', '匹配流水线', '操作'].map((h) => (
|
||||||
|
<th key={h} className="text-left px-4 py-2 text-[11px] font-semibold uppercase tracking-wider" style={{ color: 'var(--text-tertiary)' }}>
|
||||||
|
{h}
|
||||||
|
</th>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{roles.map((r) => {
|
||||||
|
const badge = levelBadgeStyle[r.level] ?? levelBadgeStyle.viewer;
|
||||||
|
const memberText = (r.members ?? []).slice(0, 3).join('、') + ((r.members?.length ?? 0) > 3 ? ` 等 ${r.members.length} 人` : '');
|
||||||
|
return (
|
||||||
|
<tr key={r.id} className="border-t hover:bg-black/[0.02] transition-colors" style={{ borderColor: 'var(--border-color-light)' }}>
|
||||||
|
<td className="px-4 py-3">
|
||||||
|
<span className="text-[13px] font-medium" style={{ color: 'var(--text-primary)' }}>{r.name}</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3">
|
||||||
|
{r.scopeMode === 'pattern' ? (
|
||||||
|
<span className="inline-flex items-center gap-1 text-[12px] font-mono px-2 py-[3px] rounded" style={{ background: '#fbefff', color: '#8250df' }}>
|
||||||
|
<Wand2 className="w-3 h-3" />{r.pattern}
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<span className="inline-flex items-center gap-1 text-[12px] px-2 py-[3px] rounded" style={{ background: '#ddf4ff', color: '#0969da' }}>
|
||||||
|
<ListChecks className="w-3 h-3" />{r.pipelineIds?.length ?? 0} 条流水线
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3">
|
||||||
|
<span className="text-[11px] px-2 py-[3px] rounded font-medium" style={{ background: badge.bg, color: badge.color }}>
|
||||||
|
{levelLabel(r.level)}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3 text-[12px]" style={{ color: 'var(--text-secondary)' }}>
|
||||||
|
{r.members?.length ? memberText : <span style={{ color: 'var(--text-tertiary)' }}>—</span>}
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3 text-[12px]" style={{ color: 'var(--text-secondary)' }}>
|
||||||
|
{r.matchedPipelines ?? 0} 条
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3">
|
||||||
|
<div className="flex items-center gap-0">
|
||||||
|
<button className="p-1 rounded hover:bg-black/5" title="编辑" onClick={() => openEdit(r)}>
|
||||||
|
<Edit2 className="w-3.5 h-3.5" style={{ color: 'var(--text-tertiary)' }} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="p-1 rounded hover:bg-black/5"
|
||||||
|
title="删除"
|
||||||
|
onClick={() => {
|
||||||
|
if (window.confirm(`确定删除权限组「${r.name}」?成员将失去对应授权。`)) deleteMutation.mutate(r.id);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Trash2 className="w-3.5 h-3.5" style={{ color: 'var(--text-tertiary)' }} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 新建/编辑弹窗 */}
|
||||||
|
<Dialog open={dialogOpen} onOpenChange={(v) => { setDialogOpen(v); if (!v) setEditing(null); }}>
|
||||||
|
<DialogContent className="max-w-xl max-h-[85vh] overflow-y-auto custom-scrollbar">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle className="text-[15px]">{editing ? '编辑权限组' : '新建权限组'}</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* 名称 */}
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>名称</Label>
|
||||||
|
<Input
|
||||||
|
className="h-8 text-[12px]"
|
||||||
|
style={inputStyle}
|
||||||
|
value={form.name}
|
||||||
|
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
||||||
|
placeholder="如:cex 发布组"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 授权范围 */}
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>授权范围</Label>
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setForm({ ...form, scopeMode: 'manual' })}
|
||||||
|
className="flex items-start gap-2 p-2.5 rounded-md border text-left transition-colors"
|
||||||
|
style={
|
||||||
|
form.scopeMode === 'manual'
|
||||||
|
? { background: 'var(--accent-blue-light)', borderColor: 'var(--accent-blue)' }
|
||||||
|
: { background: 'var(--panel-bg-secondary)', borderColor: 'var(--border-color-light)' }
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<ListChecks className="w-4 h-4 mt-0.5 flex-shrink-0" style={{ color: form.scopeMode === 'manual' ? 'var(--accent-blue)' : 'var(--text-tertiary)' }} />
|
||||||
|
<div>
|
||||||
|
<div className="text-[12px] font-medium" style={{ color: 'var(--text-primary)' }}>选择流水线</div>
|
||||||
|
<div className="text-[11px]" style={{ color: 'var(--text-tertiary)' }}>勾选要授权的流水线,直观不踩坑</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setForm({ ...form, scopeMode: 'pattern' })}
|
||||||
|
className="flex items-start gap-2 p-2.5 rounded-md border text-left transition-colors"
|
||||||
|
style={
|
||||||
|
form.scopeMode === 'pattern'
|
||||||
|
? { background: 'var(--accent-blue-light)', borderColor: 'var(--accent-blue)' }
|
||||||
|
: { background: 'var(--panel-bg-secondary)', borderColor: 'var(--border-color-light)' }
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Wand2 className="w-4 h-4 mt-0.5 flex-shrink-0" style={{ color: form.scopeMode === 'pattern' ? 'var(--accent-blue)' : 'var(--text-tertiary)' }} />
|
||||||
|
<div>
|
||||||
|
<div className="text-[12px] font-medium" style={{ color: 'var(--text-primary)' }}>
|
||||||
|
名称匹配 <span className="text-[10px] px-1 rounded" style={{ background: '#fff8c5', color: '#9a6700' }}>高级</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-[11px]" style={{ color: 'var(--text-tertiary)' }}>用 * 匹配一批,新建同名流水线自动纳入</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{form.scopeMode === 'manual' ? (
|
||||||
|
<div className="rounded-md border" style={{ borderColor: 'var(--border-color-light)' }}>
|
||||||
|
<div className="flex items-center gap-2 px-2.5 py-2 border-b" style={{ borderColor: 'var(--border-color-light)' }}>
|
||||||
|
<Search className="w-3.5 h-3.5 flex-shrink-0" style={{ color: 'var(--text-tertiary)' }} />
|
||||||
|
<input
|
||||||
|
value={pipelineSearch}
|
||||||
|
onChange={(e) => setPipelineSearch(e.target.value)}
|
||||||
|
placeholder="搜索流水线..."
|
||||||
|
className="bg-transparent outline-none flex-1 text-[12px]"
|
||||||
|
style={{ color: 'var(--text-primary)' }}
|
||||||
|
/>
|
||||||
|
<button className="text-[11px] px-1.5 py-[2px] rounded" style={{ color: 'var(--accent-blue)' }} onClick={() => setForm({ ...form, pipelineIds: filteredPipelines.map((p) => Number(p.id)) })}>
|
||||||
|
全选
|
||||||
|
</button>
|
||||||
|
<button className="text-[11px] px-1.5 py-[2px] rounded" style={{ color: 'var(--text-tertiary)' }} onClick={() => setForm({ ...form, pipelineIds: [] })}>
|
||||||
|
清空
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="max-h-44 overflow-y-auto custom-scrollbar">
|
||||||
|
{filteredPipelines.map((p) => {
|
||||||
|
const checked = form.pipelineIds.includes(Number(p.id));
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={p.id}
|
||||||
|
type="button"
|
||||||
|
className="w-full flex items-center gap-2 px-3 py-[7px] text-left hover:bg-black/[0.02] transition-colors"
|
||||||
|
onClick={() => togglePipeline(Number(p.id))}
|
||||||
|
>
|
||||||
|
{checked ? (
|
||||||
|
<CheckSquare className="w-3.5 h-3.5 flex-shrink-0" style={{ color: 'var(--accent-blue)' }} />
|
||||||
|
) : (
|
||||||
|
<Square className="w-3.5 h-3.5 flex-shrink-0" style={{ color: 'var(--text-tertiary)' }} />
|
||||||
|
)}
|
||||||
|
<span className="text-[12px] font-mono truncate" style={{ color: 'var(--text-primary)' }}>{p.name}</span>
|
||||||
|
{p.type === 'jenkins' && (
|
||||||
|
<span className="text-[9px] px-1 rounded flex-shrink-0" style={{ background: '#fbefff', color: '#8250df' }}>Jenkins</span>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{filteredPipelines.length === 0 && (
|
||||||
|
<div className="px-3 py-3 text-[12px]" style={{ color: 'var(--text-tertiary)' }}>没有匹配的流水线</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="px-3 py-1.5 border-t text-[11px]" style={{ borderColor: 'var(--border-color-light)', color: 'var(--text-tertiary)' }}>
|
||||||
|
已选 {form.pipelineIds.length} 条
|
||||||
|
{form.pipelineIds.length > 0 && (
|
||||||
|
<span className="inline-flex flex-wrap gap-1 ml-2 align-middle">
|
||||||
|
{form.pipelineIds.slice(0, 5).map((id) => (
|
||||||
|
<span key={id} className="inline-flex items-center gap-0.5 px-1.5 py-[1px] rounded" style={{ background: 'var(--panel-bg-secondary)' }}>
|
||||||
|
<span className="text-[10px] font-mono" style={{ color: 'var(--text-secondary)' }}>{pipelineNameById.get(id) ?? `#${id}`}</span>
|
||||||
|
<X className="w-2.5 h-2.5 cursor-pointer" style={{ color: 'var(--text-tertiary)' }} onClick={() => togglePipeline(id)} />
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
{form.pipelineIds.length > 5 && <span className="text-[10px]" style={{ color: 'var(--text-tertiary)' }}>…</span>}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Input
|
||||||
|
className="h-8 text-[12px] font-mono"
|
||||||
|
style={inputStyle}
|
||||||
|
value={form.pattern}
|
||||||
|
onChange={(e) => setForm({ ...form, pattern: e.target.value })}
|
||||||
|
placeholder="cex-*"
|
||||||
|
/>
|
||||||
|
<div className="text-[11px]" style={{ color: 'var(--text-tertiary)' }}>
|
||||||
|
只需用 <b>*</b> 代表任意字符,例如 <code>cex-*</code> 授权所有 cex- 开头的流水线,不需要正则表达式。
|
||||||
|
</div>
|
||||||
|
{patternPreview !== null && (
|
||||||
|
<div className="text-[11px]" style={{ color: patternPreview > 0 ? '#1a7f37' : '#cf222e' }}>
|
||||||
|
当前规则命中 {patternPreview} 条流水线{patternPreview === 0 ? '(请检查写法,如 cex-*)' : ''}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 权限等级 */}
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>权限等级</Label>
|
||||||
|
<div className="grid grid-cols-3 gap-2">
|
||||||
|
{LEVEL_OPTIONS.map((opt) => {
|
||||||
|
const active = form.level === opt.value;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={opt.value}
|
||||||
|
type="button"
|
||||||
|
onClick={() => setForm({ ...form, level: opt.value })}
|
||||||
|
className="p-2.5 rounded-md border text-left transition-colors"
|
||||||
|
style={
|
||||||
|
active
|
||||||
|
? { background: 'var(--accent-blue-light)', borderColor: 'var(--accent-blue)' }
|
||||||
|
: { background: 'var(--panel-bg-secondary)', borderColor: 'var(--border-color-light)' }
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div className="text-[12px] font-semibold" style={{ color: active ? 'var(--accent-blue)' : 'var(--text-primary)' }}>{opt.label}</div>
|
||||||
|
<div className="text-[10px] mt-0.5 leading-4" style={{ color: 'var(--text-tertiary)' }}>{opt.desc}</div>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 成员 */}
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>成员({form.members.length} 人)</Label>
|
||||||
|
<div className="rounded-md border" style={{ borderColor: 'var(--border-color-light)' }}>
|
||||||
|
<div className="flex items-center gap-2 px-2.5 py-2 border-b" style={{ borderColor: 'var(--border-color-light)' }}>
|
||||||
|
<Search className="w-3.5 h-3.5 flex-shrink-0" style={{ color: 'var(--text-tertiary)' }} />
|
||||||
|
<input
|
||||||
|
value={userSearch}
|
||||||
|
onChange={(e) => setUserSearch(e.target.value)}
|
||||||
|
placeholder="搜索用户..."
|
||||||
|
className="bg-transparent outline-none flex-1 text-[12px]"
|
||||||
|
style={{ color: 'var(--text-primary)' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="max-h-36 overflow-y-auto custom-scrollbar">
|
||||||
|
{filteredUsers.map((u: any) => {
|
||||||
|
const checked = form.members.includes(u.username);
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={u.id}
|
||||||
|
type="button"
|
||||||
|
className="w-full flex items-center gap-2 px-3 py-[6px] text-left hover:bg-black/[0.02] transition-colors"
|
||||||
|
onClick={() => toggleMember(u.username)}
|
||||||
|
>
|
||||||
|
{checked ? (
|
||||||
|
<CheckSquare className="w-3.5 h-3.5 flex-shrink-0" style={{ color: 'var(--accent-blue)' }} />
|
||||||
|
) : (
|
||||||
|
<Square className="w-3.5 h-3.5 flex-shrink-0" style={{ color: 'var(--text-tertiary)' }} />
|
||||||
|
)}
|
||||||
|
<span className="text-[12px] font-mono" style={{ color: 'var(--text-primary)' }}>{u.username}</span>
|
||||||
|
{u.nickname && <span className="text-[11px] truncate" style={{ color: 'var(--text-tertiary)' }}>{u.nickname}</span>}
|
||||||
|
<span className="ml-auto text-[10px] px-1.5 py-[1px] rounded" style={{ background: 'var(--panel-bg-secondary)', color: 'var(--text-tertiary)' }}>
|
||||||
|
{u.role === 'admin' ? '管理员' : u.authSource === 'ldap' ? 'LDAP' : '本地'}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{filteredUsers.length === 0 && (
|
||||||
|
<div className="px-3 py-3 text-[12px]" style={{ color: 'var(--text-tertiary)' }}>没有匹配的用户</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<button
|
||||||
|
className="px-3 py-1.5 text-[12px] rounded-md border"
|
||||||
|
style={{ background: 'var(--panel-bg-secondary)', borderColor: 'var(--border-color-light)', color: 'var(--text-secondary)' }}
|
||||||
|
onClick={() => setDialogOpen(false)}
|
||||||
|
>
|
||||||
|
取消
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="flex items-center gap-1.5 px-3 py-1.5 text-[12px] font-medium rounded-md text-white disabled:opacity-60"
|
||||||
|
style={{ background: 'var(--accent-blue)' }}
|
||||||
|
disabled={saveMutation.isPending}
|
||||||
|
onClick={submit}
|
||||||
|
>
|
||||||
|
{saveMutation.isPending && <Loader2 className="w-3 h-3 animate-spin" />}
|
||||||
|
{editing ? '保存' : '创建'}
|
||||||
|
</button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -55,6 +55,7 @@ interface RunRecord {
|
|||||||
buildNumber?: number;
|
buildNumber?: number;
|
||||||
externalUrl?: string;
|
externalUrl?: string;
|
||||||
analysis?: string; // 失败时后端自动生成的 AI 失败分析
|
analysis?: string; // 失败时后端自动生成的 AI 失败分析
|
||||||
|
canRetry?: boolean; // 后端按当前用户权限附加:执行等级及以上才允许重试
|
||||||
}
|
}
|
||||||
|
|
||||||
interface RunStage {
|
interface RunStage {
|
||||||
@@ -284,7 +285,7 @@ function ExpandedRecord({ record, activeTab, setActiveTab }: {
|
|||||||
className="flex items-center gap-1 px-3 py-[5px] text-[11px] font-medium rounded-md border transition-colors hover:bg-black/[0.02]" style={{ borderColor: 'var(--border-color-light)', color: 'var(--text-secondary)' }}>
|
className="flex items-center gap-1 px-3 py-[5px] text-[11px] font-medium rounded-md border transition-colors hover:bg-black/[0.02]" style={{ borderColor: 'var(--border-color-light)', color: 'var(--text-secondary)' }}>
|
||||||
<Terminal className="w-3 h-3" />查看日志
|
<Terminal className="w-3 h-3" />查看日志
|
||||||
</button>
|
</button>
|
||||||
{(record.status === 'failed' || record.status === 'cancelled') && (
|
{(record.status === 'failed' || record.status === 'cancelled') && record.canRetry && (
|
||||||
<button
|
<button
|
||||||
onClick={() => retryMutation.mutate()}
|
onClick={() => retryMutation.mutate()}
|
||||||
disabled={retryMutation.isPending}
|
disabled={retryMutation.isPending}
|
||||||
|
|||||||
@@ -1,20 +1,16 @@
|
|||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useRef, useState } from 'react';
|
||||||
import {
|
import {
|
||||||
Palette, Monitor, Moon, Sun,
|
Palette, Monitor, Moon, Sun,
|
||||||
Save, RotateCcw, CheckCircle2, Globe, Bell, Loader2, ExternalLink, ChevronDown, ChevronRight
|
Save, RotateCcw, Globe, Bell, Loader2, ExternalLink, ChevronDown, ChevronRight
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
import { apiClient } from '@/lib/api';
|
import { apiClient } from '@/lib/api';
|
||||||
import { useTheme, type ThemeMode } from '@/providers/theme';
|
import { useTheme, type ThemeMode } from '@/providers/theme';
|
||||||
|
import WebhookManager from '@/components/settings/WebhookManager';
|
||||||
|
|
||||||
interface ThemeConfig {
|
interface ThemeConfig {
|
||||||
mode: 'light' | 'dark' | 'system';
|
mode: 'light' | 'dark' | 'system';
|
||||||
primaryColor: string;
|
|
||||||
fontSize: 'small' | 'medium' | 'large';
|
|
||||||
density: 'compact' | 'comfortable' | 'spacious';
|
|
||||||
sidebarStyle: 'collapsed' | 'icons' | 'full';
|
|
||||||
borderRadius: 'sharp' | 'soft' | 'round';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
interface NotificationConfig {
|
interface NotificationConfig {
|
||||||
@@ -27,11 +23,6 @@ interface NotificationConfig {
|
|||||||
|
|
||||||
const defaultTheme: ThemeConfig = {
|
const defaultTheme: ThemeConfig = {
|
||||||
mode: 'light',
|
mode: 'light',
|
||||||
primaryColor: '#0969da',
|
|
||||||
fontSize: 'medium',
|
|
||||||
density: 'comfortable',
|
|
||||||
sidebarStyle: 'full',
|
|
||||||
borderRadius: 'soft',
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const defaultNotifications: NotificationConfig = {
|
const defaultNotifications: NotificationConfig = {
|
||||||
@@ -54,15 +45,6 @@ function safeParse<T extends object>(raw: unknown, fallback: T): T {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const colorOptions = [
|
|
||||||
{ name: '蓝色', value: '#0969da', class: 'bg-[#0969da]' },
|
|
||||||
{ name: '绿色', value: '#1a7f37', class: 'bg-[#1a7f37]' },
|
|
||||||
{ name: '紫色', value: '#8250df', class: 'bg-[#8250df]' },
|
|
||||||
{ name: '橙色', value: '#bc4c00', class: 'bg-[#bc4c00]' },
|
|
||||||
{ name: '红色', value: '#cf222e', class: 'bg-[#cf222e]' },
|
|
||||||
{ name: '青色', value: '#0e7c7b', class: 'bg-[#0e7c7b]' },
|
|
||||||
];
|
|
||||||
|
|
||||||
// LLM 服务商预设(OpenAI 兼容接口)
|
// LLM 服务商预设(OpenAI 兼容接口)
|
||||||
const LLM_PROVIDERS = [
|
const LLM_PROVIDERS = [
|
||||||
{ id: 'deepseek', label: 'DeepSeek', endpoint: 'https://api.deepseek.com/v1', model: 'deepseek-chat', keyUrl: 'https://platform.deepseek.com/api_keys' },
|
{ id: 'deepseek', label: 'DeepSeek', endpoint: 'https://api.deepseek.com/v1', model: 'deepseek-chat', keyUrl: 'https://platform.deepseek.com/api_keys' },
|
||||||
@@ -88,6 +70,12 @@ export default function SystemSettings() {
|
|||||||
const [notifications, setNotifications] = useState<NotificationConfig>(defaultNotifications);
|
const [notifications, setNotifications] = useState<NotificationConfig>(defaultNotifications);
|
||||||
const [llm, setLlm] = useState({ enabled: false, endpoint: '', model: '', apiKey: '' });
|
const [llm, setLlm] = useState({ enabled: false, endpoint: '', model: '', apiKey: '' });
|
||||||
const [llmProvider, setLlmProvider] = useState('custom');
|
const [llmProvider, setLlmProvider] = useState('custom');
|
||||||
|
// 先测试才能保存:null=未测 true=通过;任何表单修改都会重置
|
||||||
|
const [llmTestOk, setLlmTestOk] = useState<boolean | null>(null);
|
||||||
|
const updateLlm = (patch: Partial<typeof llm>) => {
|
||||||
|
setLlm((prev) => ({ ...prev, ...patch }));
|
||||||
|
setLlmTestOk(null);
|
||||||
|
};
|
||||||
const [lark, setLark] = useState({ enabled: false, webhook: '', secret: '' });
|
const [lark, setLark] = useState({ enabled: false, webhook: '', secret: '' });
|
||||||
const [ldap, setLdap] = useState({
|
const [ldap, setLdap] = useState({
|
||||||
enabled: false,
|
enabled: false,
|
||||||
@@ -108,9 +96,12 @@ export default function SystemSettings() {
|
|||||||
|
|
||||||
const { data: settings } = useQuery({ queryKey: ['settings'], queryFn: apiClient.getSettings });
|
const { data: settings } = useQuery({ queryKey: ['settings'], queryFn: apiClient.getSettings });
|
||||||
|
|
||||||
// 用后端数据初始化表单(仅在数据变化时覆盖本地编辑态)
|
// 用后端数据初始化表单:仅在首次拿到数据时执行一次,
|
||||||
|
// 避免后续 settings 刷新(保存其它配置后 invalidate)把用户正在编辑的表单打回已保存值
|
||||||
|
const initedRef = useRef(false);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!settings) return;
|
if (!settings || initedRef.current) return;
|
||||||
|
initedRef.current = true;
|
||||||
setTheme(safeParse<ThemeConfig>(settings.theme, defaultTheme));
|
setTheme(safeParse<ThemeConfig>(settings.theme, defaultTheme));
|
||||||
setNotifications(safeParse<NotificationConfig>(settings.notification, defaultNotifications));
|
setNotifications(safeParse<NotificationConfig>(settings.notification, defaultNotifications));
|
||||||
setLlm((prev) => ({
|
setLlm((prev) => ({
|
||||||
@@ -237,6 +228,7 @@ export default function SystemSettings() {
|
|||||||
llmApiKey: llm.apiKey || undefined,
|
llmApiKey: llm.apiKey || undefined,
|
||||||
}),
|
}),
|
||||||
onSuccess: (res) => {
|
onSuccess: (res) => {
|
||||||
|
setLlmTestOk(!!res.success);
|
||||||
if (res.success) toast.success('AI 连接成功', { description: res.message });
|
if (res.success) toast.success('AI 连接成功', { description: res.message });
|
||||||
else toast.error('AI 连接失败', { description: res.message });
|
else toast.error('AI 连接失败', { description: res.message });
|
||||||
},
|
},
|
||||||
@@ -261,6 +253,21 @@ export default function SystemSettings() {
|
|||||||
toast.info('已恢复默认设置', { description: '仅本地重置,点击「保存设置」后生效' });
|
toast.info('已恢复默认设置', { description: '仅本地重置,点击「保存设置」后生效' });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 顶部 Tab 分页:通用 / AI 助手 / 消息通知 / 用户目录
|
||||||
|
type SettingsTab = 'general' | 'ai' | 'notify' | 'directory';
|
||||||
|
const [activeTab, setActiveTab] = useState<SettingsTab>('general');
|
||||||
|
|
||||||
|
const aiOn = !!settings?.llmEnabled && !!settings?.llmApiKeySet;
|
||||||
|
const larkOn = !!settings?.larkEnabled && !!settings?.larkWebhook;
|
||||||
|
const ldapOn = !!settings?.ldapEnabled && !!settings?.ldapHost && !!settings?.ldapBindDN && !!settings?.ldapBaseDN;
|
||||||
|
|
||||||
|
const tabs: { id: SettingsTab; label: string; dot?: boolean | null }[] = [
|
||||||
|
{ id: 'general', label: '通用' },
|
||||||
|
{ id: 'ai', label: 'AI 助手', dot: aiOn },
|
||||||
|
{ id: 'notify', label: '消息通知', dot: larkOn },
|
||||||
|
{ id: 'directory', label: '用户目录', dot: ldapOn },
|
||||||
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="h-full flex flex-col" style={{ background: 'var(--canvas-bg)' }}>
|
<div className="h-full flex flex-col" style={{ background: 'var(--canvas-bg)' }}>
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
@@ -273,21 +280,44 @@ export default function SystemSettings() {
|
|||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2">
|
</div>
|
||||||
<button onClick={handleReset} className="flex items-center gap-1 px-3 py-[5px] text-[12px] font-medium rounded-md border" style={{ borderColor: 'var(--border-color-light)', color: 'var(--text-secondary)' }}>
|
|
||||||
<RotateCcw className="w-3.5 h-3.5" />恢复默认
|
{/* Tab 栏(与流水线编辑器 TopBar 同款下划线样式) */}
|
||||||
|
<div className="px-5 border-b flex items-center gap-0 flex-shrink-0" style={{ background: 'var(--panel-bg)', borderColor: 'var(--border-color)' }}>
|
||||||
|
{tabs.map((t) => (
|
||||||
|
<button
|
||||||
|
key={t.id}
|
||||||
|
onClick={() => setActiveTab(t.id)}
|
||||||
|
className="relative px-3 py-2 text-[12px] font-medium flex items-center gap-1.5"
|
||||||
|
style={{ color: activeTab === t.id ? 'var(--accent-blue)' : 'var(--text-secondary)' }}
|
||||||
|
>
|
||||||
|
{t.label}
|
||||||
|
{t.dot != null && (
|
||||||
|
<span className="w-1.5 h-1.5 rounded-full" style={{ background: t.dot ? '#1a7f37' : 'var(--text-tertiary)', opacity: t.dot ? 1 : 0.5 }} title={t.dot ? '已启用' : '未启用'} />
|
||||||
|
)}
|
||||||
|
{activeTab === t.id && (
|
||||||
|
<span className="absolute bottom-0 left-1 right-1 h-0.5 rounded-full" style={{ background: 'var(--accent-blue)' }} />
|
||||||
|
)}
|
||||||
</button>
|
</button>
|
||||||
<button onClick={() => saveMutation.mutate()} disabled={saveMutation.isPending}
|
))}
|
||||||
className="flex items-center gap-1 px-3 py-[5px] text-[12px] font-medium rounded-md text-white disabled:opacity-60" style={{ background: 'var(--accent-blue)' }}>
|
|
||||||
{saveMutation.isPending ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Save className="w-3.5 h-3.5" />}
|
|
||||||
{saveMutation.isPending ? '保存中...' : '保存设置'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Content */}
|
{/* Content */}
|
||||||
<div className="flex-1 overflow-y-auto custom-scrollbar p-5">
|
<div className="flex-1 overflow-y-auto custom-scrollbar p-5">
|
||||||
<div className="max-w-3xl mx-auto space-y-4">
|
<div className="max-w-3xl mx-auto space-y-4">
|
||||||
|
{activeTab === 'general' && (
|
||||||
|
<>
|
||||||
|
{/* 外观主题保存/恢复操作 */}
|
||||||
|
<div className="flex items-center justify-end gap-2">
|
||||||
|
<button onClick={handleReset} className="flex items-center gap-1 px-3 py-[5px] text-[12px] font-medium rounded-md border" style={{ borderColor: 'var(--border-color-light)', color: 'var(--text-secondary)' }}>
|
||||||
|
<RotateCcw className="w-3.5 h-3.5" />恢复默认
|
||||||
|
</button>
|
||||||
|
<button onClick={() => saveMutation.mutate()} disabled={saveMutation.isPending}
|
||||||
|
className="flex items-center gap-1 px-3 py-[5px] text-[12px] font-medium rounded-md text-white disabled:opacity-60" style={{ background: 'var(--accent-blue)' }}>
|
||||||
|
{saveMutation.isPending ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Save className="w-3.5 h-3.5" />}
|
||||||
|
{saveMutation.isPending ? '保存中...' : '保存设置'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
{/* Appearance */}
|
{/* Appearance */}
|
||||||
<div className="rounded-lg border overflow-hidden" style={{ background: 'var(--panel-bg)', borderColor: 'var(--border-color)' }}>
|
<div className="rounded-lg border overflow-hidden" style={{ background: 'var(--panel-bg)', borderColor: 'var(--border-color)' }}>
|
||||||
<div className="px-4 py-2.5 border-b flex items-center gap-2" style={{ borderColor: 'var(--border-color)', background: 'var(--panel-bg-secondary)' }}>
|
<div className="px-4 py-2.5 border-b flex items-center gap-2" style={{ borderColor: 'var(--border-color)', background: 'var(--panel-bg-secondary)' }}>
|
||||||
@@ -316,88 +346,6 @@ export default function SystemSettings() {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Primary color */}
|
|
||||||
<div>
|
|
||||||
<label className="block text-[12px] font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>主题色</label>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{colorOptions.map(c => (
|
|
||||||
<button key={c.value} onClick={() => setTheme(p => ({ ...p, primaryColor: c.value }))}
|
|
||||||
className={`w-8 h-8 rounded-full ${c.class} flex items-center justify-center transition-transform hover:scale-110`}
|
|
||||||
title={c.name}>
|
|
||||||
{theme.primaryColor === c.value && <CheckCircle2 className="w-4 h-4 text-white" />}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Font size */}
|
|
||||||
<div>
|
|
||||||
<label className="block text-[12px] font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>字体大小</label>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{[
|
|
||||||
{ id: 'small', label: '小', size: '12px' },
|
|
||||||
{ id: 'medium', label: '中', size: '14px' },
|
|
||||||
{ id: 'large', label: '大', size: '16px' },
|
|
||||||
].map(f => (
|
|
||||||
<button key={f.id} onClick={() => setTheme(p => ({ ...p, fontSize: f.id as ThemeConfig['fontSize'] }))}
|
|
||||||
className="flex-1 py-[7px] text-[12px] font-medium rounded-md border transition-colors text-center"
|
|
||||||
style={{
|
|
||||||
borderColor: theme.fontSize === f.id ? 'var(--accent-blue)' : 'var(--border-color-light)',
|
|
||||||
background: theme.fontSize === f.id ? 'var(--accent-blue-light)' : 'transparent',
|
|
||||||
color: theme.fontSize === f.id ? 'var(--accent-blue)' : 'var(--text-secondary)',
|
|
||||||
fontSize: f.size,
|
|
||||||
}}>
|
|
||||||
{f.label}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Density */}
|
|
||||||
<div>
|
|
||||||
<label className="block text-[12px] font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>界面密度</label>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{[
|
|
||||||
{ id: 'compact', label: '紧凑' },
|
|
||||||
{ id: 'comfortable', label: '舒适' },
|
|
||||||
{ id: 'spacious', label: '宽松' },
|
|
||||||
].map(d => (
|
|
||||||
<button key={d.id} onClick={() => setTheme(p => ({ ...p, density: d.id as ThemeConfig['density'] }))}
|
|
||||||
className="flex-1 py-[7px] text-[12px] font-medium rounded-md border transition-colors"
|
|
||||||
style={{
|
|
||||||
borderColor: theme.density === d.id ? 'var(--accent-blue)' : 'var(--border-color-light)',
|
|
||||||
background: theme.density === d.id ? 'var(--accent-blue-light)' : 'transparent',
|
|
||||||
color: theme.density === d.id ? 'var(--accent-blue)' : 'var(--text-secondary)',
|
|
||||||
}}>
|
|
||||||
{d.label}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Border radius */}
|
|
||||||
<div>
|
|
||||||
<label className="block text-[12px] font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>圆角风格</label>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{[
|
|
||||||
{ id: 'sharp', label: '直角', radius: '0px' },
|
|
||||||
{ id: 'soft', label: '圆角', radius: '6px' },
|
|
||||||
{ id: 'round', label: '大圆角', radius: '12px' },
|
|
||||||
].map(r => (
|
|
||||||
<button key={r.id} onClick={() => setTheme(p => ({ ...p, borderRadius: r.id as ThemeConfig['borderRadius'] }))}
|
|
||||||
className="flex-1 py-[7px] text-[12px] font-medium border transition-colors"
|
|
||||||
style={{
|
|
||||||
borderColor: theme.borderRadius === r.id ? 'var(--accent-blue)' : 'var(--border-color-light)',
|
|
||||||
background: theme.borderRadius === r.id ? 'var(--accent-blue-light)' : 'transparent',
|
|
||||||
color: theme.borderRadius === r.id ? 'var(--accent-blue)' : 'var(--text-secondary)',
|
|
||||||
borderRadius: r.radius,
|
|
||||||
}}>
|
|
||||||
{r.label}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -478,10 +426,13 @@ export default function SystemSettings() {
|
|||||||
<p className="text-[11px]" style={{ color: 'var(--text-tertiary)' }}>语言与时区暂未生效,仅作展示</p>
|
<p className="text-[11px]" style={{ color: 'var(--text-tertiary)' }}>语言与时区暂未生效,仅作展示</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{activeTab === 'ai' && (
|
||||||
|
<>
|
||||||
{/* AI 助手配置 */}
|
{/* AI 助手配置 */}
|
||||||
<div className="rounded-lg border overflow-hidden mt-4" style={{ background: 'var(--panel-bg)', borderColor: 'var(--border-color)' }}>
|
<div className="rounded-lg border overflow-hidden" style={{ background: 'var(--panel-bg)', borderColor: 'var(--border-color)' }}>
|
||||||
<div className="px-5 py-3 border-b flex items-center justify-between" style={{ borderColor: 'var(--border-color)' }}>
|
<div className="px-5 py-3 border-b flex items-center justify-between" style={{ borderColor: 'var(--border-color)' }}>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<span className="text-[13px] font-semibold" style={{ color: 'var(--text-primary)' }}>AI 助手(智能发布)</span>
|
<span className="text-[13px] font-semibold" style={{ color: 'var(--text-primary)' }}>AI 助手(智能发布)</span>
|
||||||
@@ -492,7 +443,7 @@ export default function SystemSettings() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="p-5 space-y-4">
|
<div className="p-5 space-y-4">
|
||||||
<label className="flex items-center gap-2 cursor-pointer">
|
<label className="flex items-center gap-2 cursor-pointer">
|
||||||
<input type="checkbox" checked={llm.enabled} onChange={(e) => setLlm({ ...llm, enabled: e.target.checked })} />
|
<input type="checkbox" checked={llm.enabled} onChange={(e) => updateLlm({ enabled: e.target.checked })} />
|
||||||
<span className="text-[12px]" style={{ color: 'var(--text-primary)' }}>启用 AI(OpenAI 兼容接口:DeepSeek / GLM / Qwen 等)</span>
|
<span className="text-[12px]" style={{ color: 'var(--text-primary)' }}>启用 AI(OpenAI 兼容接口:DeepSeek / GLM / Qwen 等)</span>
|
||||||
</label>
|
</label>
|
||||||
<div className="space-y-1.5">
|
<div className="space-y-1.5">
|
||||||
@@ -505,7 +456,7 @@ export default function SystemSettings() {
|
|||||||
const preset = LLM_PROVIDERS.find((p) => p.id === id);
|
const preset = LLM_PROVIDERS.find((p) => p.id === id);
|
||||||
if (preset && id !== 'custom') {
|
if (preset && id !== 'custom') {
|
||||||
// 非 custom:自动填入 endpoint/model(用户仍可修改)
|
// 非 custom:自动填入 endpoint/model(用户仍可修改)
|
||||||
setLlm((prev) => ({ ...prev, endpoint: preset.endpoint, model: preset.model }));
|
updateLlm({ endpoint: preset.endpoint, model: preset.model });
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
className="w-full px-3 py-[6px] text-[12px] rounded-md border outline-none"
|
className="w-full px-3 py-[6px] text-[12px] rounded-md border outline-none"
|
||||||
@@ -520,7 +471,7 @@ export default function SystemSettings() {
|
|||||||
<div className="space-y-1.5">
|
<div className="space-y-1.5">
|
||||||
<label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>接口地址</label>
|
<label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>接口地址</label>
|
||||||
<div className="flex items-center gap-1.5">
|
<div className="flex items-center gap-1.5">
|
||||||
<input value={llm.endpoint} onChange={(e) => setLlm({ ...llm, endpoint: e.target.value })} placeholder="https://api.deepseek.com/v1" className="flex-1 min-w-0 px-3 py-[6px] text-[12px] rounded-md border outline-none font-mono" style={{ background: 'var(--panel-bg-secondary)', borderColor: 'var(--border-color-light)', color: 'var(--text-primary)' }} />
|
<input value={llm.endpoint} onChange={(e) => updateLlm({ endpoint: e.target.value })} placeholder="https://api.deepseek.com/v1" className="flex-1 min-w-0 px-3 py-[6px] text-[12px] rounded-md border outline-none font-mono" style={{ background: 'var(--panel-bg-secondary)', borderColor: 'var(--border-color-light)', color: 'var(--text-primary)' }} />
|
||||||
{!!LLM_PROVIDERS.find((p) => p.id === llmProvider)?.keyUrl && (
|
{!!LLM_PROVIDERS.find((p) => p.id === llmProvider)?.keyUrl && (
|
||||||
<a
|
<a
|
||||||
href={LLM_PROVIDERS.find((p) => p.id === llmProvider)!.keyUrl}
|
href={LLM_PROVIDERS.find((p) => p.id === llmProvider)!.keyUrl}
|
||||||
@@ -537,27 +488,46 @@ export default function SystemSettings() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="space-y-1.5">
|
<div className="space-y-1.5">
|
||||||
<label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>模型</label>
|
<label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>模型</label>
|
||||||
<input value={llm.model} onChange={(e) => setLlm({ ...llm, model: e.target.value })} placeholder="deepseek-chat" className="w-full px-3 py-[6px] text-[12px] rounded-md border outline-none font-mono" style={{ background: 'var(--panel-bg-secondary)', borderColor: 'var(--border-color-light)', color: 'var(--text-primary)' }} />
|
<input value={llm.model} onChange={(e) => updateLlm({ model: e.target.value })} placeholder="deepseek-chat" className="w-full px-3 py-[6px] text-[12px] rounded-md border outline-none font-mono" style={{ background: 'var(--panel-bg-secondary)', borderColor: 'var(--border-color-light)', color: 'var(--text-primary)' }} />
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-1.5 col-span-2">
|
<div className="space-y-1.5 col-span-2">
|
||||||
<label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>API Key</label>
|
<label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>API Key</label>
|
||||||
<input type="password" value={llm.apiKey} onChange={(e) => setLlm({ ...llm, apiKey: e.target.value })} placeholder={settings?.llmApiKeySet ? '已配置,留空不修改' : 'sk-...'} className="w-full px-3 py-[6px] text-[12px] rounded-md border outline-none font-mono" style={{ background: 'var(--panel-bg-secondary)', borderColor: 'var(--border-color-light)', color: 'var(--text-primary)' }} />
|
<input type="password" value={llm.apiKey} onChange={(e) => updateLlm({ apiKey: e.target.value })} placeholder={settings?.llmApiKeySet ? '已配置,留空不修改' : 'sk-...'} className="w-full px-3 py-[6px] text-[12px] rounded-md border outline-none font-mono" style={{ background: 'var(--panel-bg-secondary)', borderColor: 'var(--border-color-light)', color: 'var(--text-primary)' }} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-[11px]" style={{ color: 'var(--text-tertiary)' }}>未启用 AI 时,智能助手自动降级为本地规则模式(按服务名匹配,仍可正常发布)</p>
|
<p className="text-[11px]" style={{ color: 'var(--text-tertiary)' }}>未启用 AI 时,智能助手自动降级为本地规则模式(按服务名匹配,仍可正常发布)</p>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<button onClick={() => saveLlmMutation.mutate()} disabled={saveLlmMutation.isPending} className="px-3 py-1 text-[12px] rounded-md text-white disabled:opacity-60" style={{ background: 'var(--accent-blue)' }}>
|
<button
|
||||||
|
onClick={() => saveLlmMutation.mutate()}
|
||||||
|
disabled={saveLlmMutation.isPending || (llm.enabled && llmTestOk !== true)}
|
||||||
|
title={llm.enabled && llmTestOk !== true ? '请先「测试连接」通过后再保存' : undefined}
|
||||||
|
className="px-3 py-1 text-[12px] rounded-md text-white disabled:opacity-50"
|
||||||
|
style={{ background: 'var(--accent-blue)' }}
|
||||||
|
>
|
||||||
{saveLlmMutation.isPending ? '保存中…' : '保存 AI 配置'}
|
{saveLlmMutation.isPending ? '保存中…' : '保存 AI 配置'}
|
||||||
</button>
|
</button>
|
||||||
<button onClick={() => testLlmMutation.mutate()} disabled={testLlmMutation.isPending} className="px-3 py-1 text-[12px] rounded-md border disabled:opacity-60" style={{ borderColor: 'var(--border-color-light)', color: 'var(--text-secondary)' }}>
|
<button onClick={() => testLlmMutation.mutate()} disabled={testLlmMutation.isPending} className="px-3 py-1 text-[12px] rounded-md border disabled:opacity-60" style={{ borderColor: 'var(--border-color-light)', color: 'var(--text-secondary)' }}>
|
||||||
{testLlmMutation.isPending ? '测试中…' : '测试连接(按当前表单直测)'}
|
{testLlmMutation.isPending ? '测试中…' : '测试连接'}
|
||||||
</button>
|
</button>
|
||||||
|
{llm.enabled && llmTestOk === true && (
|
||||||
|
<span className="text-[10px] px-1.5 py-[2px] rounded font-medium" style={{ background: '#dafbe1', color: '#1a7f37' }}>✓ 测试通过,可保存</span>
|
||||||
|
)}
|
||||||
|
{llm.enabled && llmTestOk === false && (
|
||||||
|
<span className="text-[10px] px-1.5 py-[2px] rounded font-medium" style={{ background: '#ffebe9', color: '#cf222e' }}>测试未通过,请检查配置</span>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
{llm.enabled && llmTestOk !== true && (
|
||||||
|
<p className="text-[11px]" style={{ color: 'var(--text-tertiary)' }}>启用 AI 后需先「测试连接」通过才能保存,避免保存不可用配置</p>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{activeTab === 'notify' && (
|
||||||
|
<>
|
||||||
{/* 飞书 / Lark 通知 */}
|
{/* 飞书 / Lark 通知 */}
|
||||||
<div className="rounded-lg border overflow-hidden mt-4" style={{ background: 'var(--panel-bg)', borderColor: 'var(--border-color)' }}>
|
<div className="rounded-lg border overflow-hidden" style={{ background: 'var(--panel-bg)', borderColor: 'var(--border-color)' }}>
|
||||||
<div className="px-5 py-3 border-b flex items-center justify-between" style={{ borderColor: 'var(--border-color)' }}>
|
<div className="px-5 py-3 border-b flex items-center justify-between" style={{ borderColor: 'var(--border-color)' }}>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<span className="text-[13px] font-semibold" style={{ color: 'var(--text-primary)' }}>飞书 / Lark 群通知</span>
|
<span className="text-[13px] font-semibold" style={{ color: 'var(--text-primary)' }}>飞书 / Lark 群通知</span>
|
||||||
@@ -594,8 +564,16 @@ export default function SystemSettings() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4">
|
||||||
|
<WebhookManager />
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{activeTab === 'directory' && (
|
||||||
|
<>
|
||||||
{/* LDAP 目录服务 */}
|
{/* LDAP 目录服务 */}
|
||||||
<div className="rounded-lg border overflow-hidden mt-4" style={{ background: 'var(--panel-bg)', borderColor: 'var(--border-color)' }}>
|
<div className="rounded-lg border overflow-hidden" style={{ background: 'var(--panel-bg)', borderColor: 'var(--border-color)' }}>
|
||||||
<div className="px-5 py-3 border-b flex items-center justify-between" style={{ borderColor: 'var(--border-color)' }}>
|
<div className="px-5 py-3 border-b flex items-center justify-between" style={{ borderColor: 'var(--border-color)' }}>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<span className="text-[13px] font-semibold" style={{ color: 'var(--text-primary)' }}>LDAP 目录服务</span>
|
<span className="text-[13px] font-semibold" style={{ color: 'var(--text-primary)' }}>LDAP 目录服务</span>
|
||||||
@@ -693,6 +671,9 @@ export default function SystemSettings() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -12,7 +12,7 @@ import {
|
|||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
import { apiClient } from '@/lib/api';
|
import { apiClient, auth } from '@/lib/api';
|
||||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
|
||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
@@ -71,6 +71,47 @@ export default function UserManage() {
|
|||||||
const [ldapOpen, setLdapOpen] = useState(false);
|
const [ldapOpen, setLdapOpen] = useState(false);
|
||||||
const [selected, setSelected] = useState<Set<string>>(new Set());
|
const [selected, setSelected] = useState<Set<string>>(new Set());
|
||||||
const [importResult, setImportResult] = useState<ImportResult | null>(null);
|
const [importResult, setImportResult] = useState<ImportResult | null>(null);
|
||||||
|
// 批量删除
|
||||||
|
const [batchIds, setBatchIds] = useState<Set<number>>(new Set());
|
||||||
|
const [batchDeleting, setBatchDeleting] = useState(false);
|
||||||
|
const currentUsername = (() => {
|
||||||
|
try {
|
||||||
|
const token = auth.getToken() || '';
|
||||||
|
const raw = atob(token.replace(/-/g, '+').replace(/_/g, '/'));
|
||||||
|
return raw.split('|')[0];
|
||||||
|
} catch { return ''; }
|
||||||
|
})();
|
||||||
|
|
||||||
|
const toggleBatch = (id: number) => {
|
||||||
|
setBatchIds((prev) => {
|
||||||
|
const next = new Set(prev);
|
||||||
|
if (next.has(id)) next.delete(id); else next.add(id);
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const batchDelete = async () => {
|
||||||
|
const targets = users.filter((u: any) => batchIds.has(u.id));
|
||||||
|
if (targets.length === 0) return;
|
||||||
|
const preview = targets.slice(0, 5).map((u: any) => u.username).join('、') + (targets.length > 5 ? ` 等 ${targets.length} 个` : '');
|
||||||
|
if (!window.confirm(`确定删除 ${preview} 吗?`)) return;
|
||||||
|
setBatchDeleting(true);
|
||||||
|
let ok = 0;
|
||||||
|
const failed: string[] = [];
|
||||||
|
for (const u of targets) {
|
||||||
|
try {
|
||||||
|
await apiClient.deleteUser(u.id);
|
||||||
|
ok++;
|
||||||
|
} catch (err) {
|
||||||
|
failed.push(`${u.username}(${(err as Error).message})`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setBatchDeleting(false);
|
||||||
|
setBatchIds(new Set());
|
||||||
|
invalidateUsers();
|
||||||
|
if (failed.length === 0) toast.success(`已删除 ${ok} 个用户`);
|
||||||
|
else toast.warning(`删除完成:成功 ${ok},失败 ${failed.length}`, { description: failed.join(';') });
|
||||||
|
};
|
||||||
|
|
||||||
const usersQuery = useQuery({ queryKey: ['users'], queryFn: apiClient.listUsers });
|
const usersQuery = useQuery({ queryKey: ['users'], queryFn: apiClient.listUsers });
|
||||||
const { data: settings } = useQuery({ queryKey: ['settings'], queryFn: apiClient.getSettings });
|
const { data: settings } = useQuery({ queryKey: ['settings'], queryFn: apiClient.getSettings });
|
||||||
@@ -80,6 +121,9 @@ export default function UserManage() {
|
|||||||
|
|
||||||
const users: any[] = usersQuery.data ?? [];
|
const users: any[] = usersQuery.data ?? [];
|
||||||
|
|
||||||
|
const selectableUsers = users.filter((u: any) => u.username !== currentUsername);
|
||||||
|
const allChecked = selectableUsers.length > 0 && selectableUsers.every((u: any) => batchIds.has(u.id));
|
||||||
|
|
||||||
const invalidateUsers = () => queryClient.invalidateQueries({ queryKey: ['users'] });
|
const invalidateUsers = () => queryClient.invalidateQueries({ queryKey: ['users'] });
|
||||||
|
|
||||||
// LDAP 预览列表(仅弹窗打开且未进入结果态时请求)
|
// LDAP 预览列表(仅弹窗打开且未进入结果态时请求)
|
||||||
@@ -255,6 +299,17 @@ export default function UserManage() {
|
|||||||
<Plus className="w-3.5 h-3.5" />
|
<Plus className="w-3.5 h-3.5" />
|
||||||
新建用户
|
新建用户
|
||||||
</button>
|
</button>
|
||||||
|
{batchIds.size > 0 && (
|
||||||
|
<button
|
||||||
|
onClick={batchDelete}
|
||||||
|
disabled={batchDeleting}
|
||||||
|
className="flex items-center gap-1.5 px-3 py-[6px] text-[12px] font-medium rounded-md border disabled:opacity-60"
|
||||||
|
style={{ background: '#ffebe9', borderColor: '#cf222e', color: '#cf222e' }}
|
||||||
|
>
|
||||||
|
{batchDeleting ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Trash2 className="w-3.5 h-3.5" />}
|
||||||
|
批量删除({batchIds.size})
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -280,6 +335,14 @@ export default function UserManage() {
|
|||||||
<table className="w-full">
|
<table className="w-full">
|
||||||
<thead>
|
<thead>
|
||||||
<tr style={{ background: 'var(--panel-bg-secondary)' }}>
|
<tr style={{ background: 'var(--panel-bg-secondary)' }}>
|
||||||
|
<th className="w-9 px-3 py-2">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={allChecked}
|
||||||
|
onChange={(e) => setBatchIds(e.target.checked ? new Set(selectableUsers.map((u: any) => u.id)) : new Set())}
|
||||||
|
title="全选(不含当前登录用户)"
|
||||||
|
/>
|
||||||
|
</th>
|
||||||
{['用户名', '昵称', '邮箱', '角色', '来源', '创建时间', '操作'].map((h) => (
|
{['用户名', '昵称', '邮箱', '角色', '来源', '创建时间', '操作'].map((h) => (
|
||||||
<th key={h} className="text-left px-4 py-2 text-[11px] font-semibold uppercase tracking-wider" style={{ color: 'var(--text-tertiary)' }}>
|
<th key={h} className="text-left px-4 py-2 text-[11px] font-semibold uppercase tracking-wider" style={{ color: 'var(--text-tertiary)' }}>
|
||||||
{h}
|
{h}
|
||||||
@@ -294,8 +357,18 @@ export default function UserManage() {
|
|||||||
const isAdmin = u.role === 'admin';
|
const isAdmin = u.role === 'admin';
|
||||||
return (
|
return (
|
||||||
<tr key={u.id} className="border-t hover:bg-black/[0.02] transition-colors" style={{ borderColor: 'var(--border-color-light)' }}>
|
<tr key={u.id} className="border-t hover:bg-black/[0.02] transition-colors" style={{ borderColor: 'var(--border-color-light)' }}>
|
||||||
|
<td className="px-3 py-3">
|
||||||
|
{u.username === currentUsername ? (
|
||||||
|
<input type="checkbox" disabled title="当前登录用户不可删除" />
|
||||||
|
) : (
|
||||||
|
<input type="checkbox" checked={batchIds.has(u.id)} onChange={() => toggleBatch(u.id)} />
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
<td className="px-4 py-3">
|
<td className="px-4 py-3">
|
||||||
<span className="text-[13px] font-medium font-mono" style={{ color: 'var(--text-primary)' }}>{u.username}</span>
|
<span className="text-[13px] font-medium font-mono" style={{ color: 'var(--text-primary)' }}>{u.username}</span>
|
||||||
|
{u.username === currentUsername && (
|
||||||
|
<span className="ml-1.5 text-[10px]" style={{ color: 'var(--text-tertiary)' }}>(当前登录)</span>
|
||||||
|
)}
|
||||||
</td>
|
</td>
|
||||||
<td className="px-4 py-3 text-[12px]" style={{ color: 'var(--text-secondary)' }}>{u.nickname || '—'}</td>
|
<td className="px-4 py-3 text-[12px]" style={{ color: 'var(--text-secondary)' }}>{u.nickname || '—'}</td>
|
||||||
<td className="px-4 py-3 text-[12px]" style={{ color: 'var(--text-secondary)' }}>{u.email || '—'}</td>
|
<td className="px-4 py-3 text-[12px]" style={{ color: 'var(--text-secondary)' }}>{u.email || '—'}</td>
|
||||||
|
|||||||
@@ -0,0 +1,19 @@
|
|||||||
|
import { useQuery } from '@tanstack/react-query'
|
||||||
|
import { apiClient } from '../lib/api'
|
||||||
|
|
||||||
|
// 会话信息(菜单分级、按钮权限的依据)。
|
||||||
|
// 多个组件共享同一 ['me'] 查询缓存;登录成功后由 App invalidate 刷新。
|
||||||
|
export function useSession() {
|
||||||
|
const { data, isLoading } = useQuery({
|
||||||
|
queryKey: ['me'],
|
||||||
|
queryFn: apiClient.me,
|
||||||
|
staleTime: 5 * 60 * 1000,
|
||||||
|
retry: false,
|
||||||
|
})
|
||||||
|
return {
|
||||||
|
username: data?.username ?? '',
|
||||||
|
role: data?.role ?? '',
|
||||||
|
isAdmin: !!data?.isAdmin,
|
||||||
|
loading: isLoading,
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in new issue
Block a user