15 Commits
Author SHA1 Message Date
wangdefa 1fc5d74d8a 发布 v0.7.2
CI / test (push) Successful in 26s
Release / release (push) Successful in 26s
2026-07-16 21:25:40 +08:00
wangdefa 4606fbfd4f 设置页上游预算项、代理状态列、调用日志 Tokens 列宽
CI / test (push) Successful in 26s
2026-07-16 21:20:14 +08:00
wangdefa 0ff0e22e56 发布 v0.7.1
CI / test (push) Successful in 25s
Release / release (push) Successful in 26s
2026-07-16 16:41:03 +08:00
wangdefa 6ea222e5ab 审计日志搜索框:防抖检索、回溯进度与补批封顶
CI / test (push) Successful in 27s
2026-07-16 16:36:42 +08:00
wangdefa b8c0ddda6d 发布 v0.7.0
CI / test (push) Successful in 26s
Release / release (push) Successful in 26s
2026-07-16 12:58:27 +08:00
wangdefa d987400a5b 设置页新增AI Tab:保险丝/grok工具/模型治理迁入
CI / test (push) Successful in 28s
2026-07-16 12:32:21 +08:00
wangdefa 6a7757ae2f 实例VNIC:附加后自动刷新、IPv6限挂载态与脚注修正 2026-07-16 12:32:20 +08:00
wangdefa 78cc2aab56 渠道模型列表弹窗与模型数量列
CI / test (push) Successful in 28s
Release / release (push) Successful in 26s
2026-07-14 19:33:55 +08:00
wangdefa 08fa529348 登录页加载态、日志动作补齐与绑定按钮禁用态
CI / test (push) Successful in 27s
Release / release (push) Successful in 28s
2026-07-14 11:01:09 +08:00
wangdefa e2cdb99194 接入信息补tts端点,可用模型新增过滤弃用开关
CI / test (push) Successful in 25s
Release / release (push) Successful in 25s
- 接入信息展示 POST /tts(xAI 官方格式)
- 可用模型卡片「过滤弃用」NSwitch:GET/PUT /api/v1/ai-settings,切换即时刷新;修复 request body 双重 stringify
- CHANGELOG 0.5.0(0.4.0 已发版冻结)
2026-07-14 09:50:01 +08:00
wangdefa 7f529bd991 AI网关接入信息补齐新端点,CHANGELOG 0.4.0
CI / test (push) Successful in 26s
Release / release (push) Successful in 26s
2026-07-13 20:14:28 +08:00
wangdefa aea00c2382 关于页运行状态、代理关联租户与步进框修复
CI / test (push) Successful in 25s
Release / release (push) Successful in 25s
2026-07-13 12:21:28 +08:00
wangdefa 2ea5b73de2 移除告警规则界面、恢复 Chat 端点并优化列表
CI / test (push) Successful in 25s
Release / release (push) Successful in 26s
2026-07-13 10:08:08 +08:00
Wang Defa 94fbe62e4c 模型黑名单与密钥模型白名单界面、分组填入、删除弹窗排版
CI / test (push) Successful in 27s
Release / release (push) Successful in 26s
2026-07-12 17:44:46 +08:00
Wang Defa 5464d2dfea 发布 0.1.0:通知渠道、告警规则与多项体验修复
CI / test (push) Successful in 27s
Release / release (push) Successful in 26s
2026-07-10 17:31:19 +08:00
83 changed files with 2713 additions and 459 deletions
+4 -1
View File
@@ -19,6 +19,7 @@ jobs:
npm ci
npm run build
cd dist && zip -qr ../dist.zip . && cd ..
sha256sum dist.zip > dist.zip.sha256
- name: 提取 CHANGELOG 版本段作为 Release 描述
run: |
@@ -31,4 +32,6 @@ jobs:
with:
token: ${{ secrets.BUILD_TOKEN }}
body_path: release-notes.md
files: dist.zip
files: |
dist.zip
dist.zip.sha256
+4 -1
View File
@@ -22,6 +22,7 @@ jobs:
npm ci
npm run build
cd dist && zip -qr ../dist.zip . && cd ..
sha256sum dist.zip > dist.zip.sha256
ls -lh dist.zip
- name: 提取 CHANGELOG 版本段作为 Release 描述
@@ -37,4 +38,6 @@ jobs:
with:
token: ${{ github.token }}
body_path: release-notes.md
files: dist.zip
files: |
dist.zip
dist.zip.sha256
+1 -1
View File
@@ -1 +1 @@
0.6.5
0.6.6
@@ -15,7 +15,7 @@ oci-portal-dash/
├── App.vue NConfigProvider 注入 Naive 主题
├── assets/ main.css:Tailwind @theme 设计 token(浅色)+ html.dark 暗色变量覆盖与全局基础样式
├── theme/ tokens.ts(JS 侧 token 唯一来源,含 darkTokens 暗色板)、naive.ts(亮暗两套 themeOverrides 同一工厂生成)
├── types/ api.ts:与 docs/API接口文档.md 一一对应的 DTO 类型
├── types/ api.ts:与后端 swagger(oci-portal/docs/)一一对应的 DTO 类型
├── api/ request 封装(JWT 注入、401 跳登录、错误 hint 拼接)+ 按资源分模块;VITE_MOCK=1 时返回 mock.ts 数据
├── stores/ Pinia:auth(令牌持久化)、app(侧栏收缩、暗色主题:默认跟随系统 + localStorage 记忆,驱动 html.dark 与 Naive darkTheme)、scope(全局作用域:租户/区域/区间,localStorage 按租户记忆)
├── router/ 路由与登录守卫
+1 -1
View File
@@ -27,7 +27,7 @@ Vue 3 + Vite + TypeScript + Naive UI + Tailwind CSS v4 + ECharts + Pinia。Naive
- [ ] 读过 [Directory Structure](./directory-structure.md),文件放对层(views / components / composables / api / stores / types)
- [ ] 涉及颜色、圆角、间距时先看 [Styling & Design Tokens](./styling-design-tokens.md),禁止硬编码 hex
- [ ] 新增请求走 `api/` 统一封装,DTO 类型进 `types/`(与 `docs/API接口文档.md` 一一对应)
- [ ] 新增请求走 `api/` 统一封装,DTO 类型进 `types/`(与后端 swagger `oci-portal/docs/` 一一对应)
- [ ] 出 UI 设计稿前读 `../guides/design-workflow.md`
## Quality Check
+1 -1
View File
@@ -4,7 +4,7 @@
- 开启 `strict`;禁止 `any`,未知类型用 `unknown` 后收窄。
- 对象形状优先 `interface`,联合/工具类型用 `type`;类型导入写 `import type`
- 与后端交互的 DTO 类型集中在 `types/`,字段与 `docs/API接口文档.md` 一一对应,不在组件里手写内联响应类型。
- 与后端交互的 DTO 类型集中在 `types/`,字段与后端 swagger(`oci-portal/docs/`)一一对应,不在组件里手写内联响应类型。
-`const` 对象 + `as const` 代替 `enum`
## Vue 组件
+13 -13
View File
@@ -183,7 +183,7 @@ Complex task: ask the user if you can create a Trellis task and enter the planni
- 1.0 Create task `[required · once]` (only after task-creation consent)
- 1.1 Requirement exploration `[required · repeatable]` (`prd.md`; complex tasks also need `design.md` + `implement.md`)
- 1.2 Research `[optional · repeatable]`
- 1.3 Configure context `[required · once]` — Claude Code, Cursor, OpenCode, Codex, Kiro, Gemini, Qoder, CodeBuddy, Copilot, Droid, Pi, ZCode, Reasonix (sub-agent-dispatch platforms only; inline platforms skip)
- 1.3 Configure context `[required · once]` — Claude Code, Cursor, OpenCode, Codex, Kiro, Gemini, Qoder, CodeBuddy, Copilot, Droid, Pi, Oh My Pi, ZCode, Reasonix (sub-agent-dispatch platforms only; inline platforms skip)
- 1.4 Activate task `[required · once]` (review gate, then `task.py start`; status → in_progress)
- 1.5 Completion criteria
@@ -272,13 +272,13 @@ Code committed. Run `/trellis:finish-work`; if dirty, return to Phase 3.4 first.
When a user request matches one of these intents inside an active task, route first, then load the detailed phase step if needed.
[Claude Code, Cursor, OpenCode, codex-sub-agent, Kiro, Gemini, Qoder, CodeBuddy, Copilot, Droid, Pi, ZCode, Reasonix, Trae]
[Claude Code, Cursor, OpenCode, codex-sub-agent, Kiro, Gemini, Qoder, CodeBuddy, Copilot, Droid, Pi, Oh My Pi, ZCode, Reasonix, Trae]
- Planning or unclear requirements -> `trellis-brainstorm`.
- `in_progress` implementation/check -> dispatch `trellis-implement` / `trellis-check`.
- Repeated debugging -> `trellis-break-loop`; spec updates -> `trellis-update-spec`.
[/Claude Code, Cursor, OpenCode, codex-sub-agent, Kiro, Gemini, Qoder, CodeBuddy, Copilot, Droid, Pi, ZCode, Reasonix, Trae]
[/Claude Code, Cursor, OpenCode, codex-sub-agent, Kiro, Gemini, Qoder, CodeBuddy, Copilot, Droid, Pi, Oh My Pi, ZCode, Reasonix, Trae]
[codex-inline, Kilo, Antigravity, Devin]
@@ -353,7 +353,7 @@ Return to this step whenever requirements change and revise the relevant artifac
Research can happen at any time during requirement exploration. It isn't limited to local code — you can use any available tool (MCP servers, skills, web search, etc.) to look up external information, including third-party library docs, industry practices, API references, etc.
[Claude Code, Cursor, OpenCode, codex-sub-agent, Kiro, Gemini, Qoder, CodeBuddy, Copilot, Droid, Pi, ZCode, Reasonix, Trae]
[Claude Code, Cursor, OpenCode, codex-sub-agent, Kiro, Gemini, Qoder, CodeBuddy, Copilot, Droid, Pi, Oh My Pi, ZCode, Reasonix, Trae]
Spawn the research sub-agent:
@@ -361,7 +361,7 @@ Spawn the research sub-agent:
- **Task description**: Research <specific question>
- **Key requirement**: Research output MUST be persisted to `{TASK_DIR}/research/`
[/Claude Code, Cursor, OpenCode, codex-sub-agent, Kiro, Gemini, Qoder, CodeBuddy, Copilot, Droid, Pi, ZCode, Reasonix, Trae]
[/Claude Code, Cursor, OpenCode, codex-sub-agent, Kiro, Gemini, Qoder, CodeBuddy, Copilot, Droid, Pi, Oh My Pi, ZCode, Reasonix, Trae]
[codex-inline, Kilo, Antigravity, Devin]
@@ -380,7 +380,7 @@ Brainstorm and research can interleave freely — pause to research a technical
#### 1.3 Configure context `[required · once]`
[Claude Code, Cursor, OpenCode, codex-sub-agent, Kiro, Gemini, Qoder, CodeBuddy, Copilot, Droid, Pi, ZCode, Reasonix, Trae]
[Claude Code, Cursor, OpenCode, codex-sub-agent, Kiro, Gemini, Qoder, CodeBuddy, Copilot, Droid, Pi, Oh My Pi, ZCode, Reasonix, Trae]
Curate `implement.jsonl` and `check.jsonl` so the Phase 2 sub-agents get the right spec/research context. These files were seeded on `task create` with a single self-describing `_example` line; your job here is to fill in real entries.
@@ -425,7 +425,7 @@ Ready gate: both `implement.jsonl` and `check.jsonl` must contain at least one r
Skip this step only when both files already have real curated entries.
[/Claude Code, Cursor, OpenCode, codex-sub-agent, Kiro, Gemini, Qoder, CodeBuddy, Copilot, Droid, Pi, ZCode, Reasonix, Trae]
[/Claude Code, Cursor, OpenCode, codex-sub-agent, Kiro, Gemini, Qoder, CodeBuddy, Copilot, Droid, Pi, Oh My Pi, ZCode, Reasonix, Trae]
[codex-inline, Kilo, Antigravity, Devin]
@@ -458,11 +458,11 @@ If `task.py start` errors with a session-identity message (no context key from h
| `design.md` exists (complex tasks) | ✅ |
| `implement.md` exists (complex tasks) | ✅ |
[Claude Code, Cursor, OpenCode, codex-sub-agent, Kiro, Gemini, Qoder, CodeBuddy, Copilot, Droid, Pi, ZCode, Reasonix, Trae]
[Claude Code, Cursor, OpenCode, codex-sub-agent, Kiro, Gemini, Qoder, CodeBuddy, Copilot, Droid, Pi, Oh My Pi, ZCode, Reasonix, Trae]
| `implement.jsonl` and `check.jsonl` each contain at least one real curated entry (seed row does not count) | ✅ |
[/Claude Code, Cursor, OpenCode, codex-sub-agent, Kiro, Gemini, Qoder, CodeBuddy, Copilot, Droid, Pi, ZCode, Reasonix, Trae]
[/Claude Code, Cursor, OpenCode, codex-sub-agent, Kiro, Gemini, Qoder, CodeBuddy, Copilot, Droid, Pi, Oh My Pi, ZCode, Reasonix, Trae]
---
@@ -472,7 +472,7 @@ Goal: turn reviewed planning artifacts into code that passes quality checks.
#### 2.1 Implement `[required · repeatable]`
[Claude Code, Cursor, OpenCode, CodeBuddy, Droid, Pi]
[Claude Code, Cursor, OpenCode, CodeBuddy, Droid, Pi, Oh My Pi]
Spawn the implement sub-agent:
@@ -484,7 +484,7 @@ The platform hook/plugin auto-handles:
- Reads `implement.jsonl` and injects referenced spec/research files into the agent prompt
- Injects `prd.md`, `design.md` if present, and `implement.md` if present
[/Claude Code, Cursor, OpenCode, CodeBuddy, Droid, Pi]
[/Claude Code, Cursor, OpenCode, CodeBuddy, Droid, Pi, Oh My Pi]
[codex-sub-agent, Gemini, Qoder, Copilot, ZCode, Reasonix, Trae]
@@ -526,7 +526,7 @@ The platform prelude auto-handles the context load requirement:
#### 2.2 Quality check `[required · repeatable]`
[Claude Code, Cursor, OpenCode, codex-sub-agent, Kiro, Gemini, Qoder, CodeBuddy, Copilot, Droid, Pi, ZCode, Reasonix, Trae]
[Claude Code, Cursor, OpenCode, codex-sub-agent, Kiro, Gemini, Qoder, CodeBuddy, Copilot, Droid, Pi, Oh My Pi, ZCode, Reasonix, Trae]
Spawn the check sub-agent:
@@ -540,7 +540,7 @@ The check agent's job:
- Auto-fix issues it finds
- Run lint and typecheck to verify
[/Claude Code, Cursor, OpenCode, codex-sub-agent, Kiro, Gemini, Qoder, CodeBuddy, Copilot, Droid, Pi, ZCode, Reasonix, Trae]
[/Claude Code, Cursor, OpenCode, codex-sub-agent, Kiro, Gemini, Qoder, CodeBuddy, Copilot, Droid, Pi, Oh My Pi, ZCode, Reasonix, Trae]
[codex-inline, Kilo, Antigravity, Devin]
+136 -2
View File
@@ -1,8 +1,142 @@
# Changelog
格式遵循 [Keep a Changelog](https://keepachangelog.com/zh-CN/1.1.0/),版本号遵循语义化版本。
格式参考 [Keep a Changelog](https://keepachangelog.com/zh-CN/1.1.0/)(版本段不记日期),版本号遵循语义化版本。
## [0.0.1] - 2026-07-09
## [0.7.2]
### Added
- 设置页 AI Tab「Responses 直通」面板新增「上游无响应预算」输入(30..900 秒,失焦 / 回车提交,即时生效),与流式保险丝同面板并网格对齐
- 代理列表新增「状态」列(检测中 / 正常 / 异常):与地区同源于经代理链路的出口探测,探测失败即视为异常,「重测」联动刷新;页脚说明同步
### Changed
- AI 调用日志 Tokens(入/出)列加宽并禁止换行,大用量流式行不再折行;原「流式保险丝」独立面板并入「Responses 直通」
## [0.7.1]
### Added
- 租户详情 · 审计日志新增搜索框(标签式查询框,样式对齐配额页):500ms 防抖,回车 / 清空即时生效且关键字未变不发起重复请求;匹配事件 / 资源 / 操作者等可见字段,不区分大小写、支持 `*` 通配
- 审计分页状态行新增「已回溯至 …」进度提示;搜索命中稀疏时自动补批封顶(2 次)后停驻,由「加载更早」按钮显式继续,不再无人值守回溯整个保留期
### Changed
- 审计页脚说明同步数据源变更:每批约 200 条、搜索匹配可见字段;详情弹窗原始 JSON 来源标注改为「来自 OCI 审计日志」
### Fixed
- 修复审计列表加载中刷新 / 更换关键字时,在途旧响应混入新信息流的竞态(代次校验丢弃过期响应)
## [0.7.0]
### Added
- 设置页新增「AI」Tab,集中承载 AI 网关运行时设置:
- 流式保险丝:开关 + 阈值输入(KB),关闭时输入框禁用;修改即时生效
- grok 服务端搜索工具:`web_search` / `x_search` 默认注入双开关(仅 `xai.` 前缀模型生效,请求已带同名工具不覆盖)
- 模型治理:过滤弃用开关与模型黑名单管理(列表 / 移出 / 添加)
- 黑名单「添加模型」弹窗:聚合全部渠道的可用模型,按能力分组(对话 / 向量 / 重排 / 语音)、关键字过滤、行内拉黑、已拉黑置灰;目录口径随「过滤弃用」开关
### Changed
- 「过滤弃用」开关与模型黑名单管理自 AI 网关页迁入设置 · AI;AI 网关「可用模型」列表移除 ✕ 拉黑入口(添加统一走设置页弹窗),渠道「模型列表」弹窗内的拉黑保留
### Fixed
- 实例详情网卡(VNIC):附加成功后按「期望卡数 +1」限时轮询(≤90s),新卡自动出现无需手动刷新页面;IPv6 添加 / 删除仅在网卡 ATTACHED 状态提供,修复 DETACHED 网卡仍可点「+ IPv6」;脚注移除误导的 dhclient / netplan 说明(OCI DHCPv4 只服务主网卡)
## [0.6.0]
### Added
- AI 网关渠道表格新增「模型数量」列(与模型列表同口径:排除黑名单、随「过滤弃用」开关)
- 渠道「模型列表」弹窗(替代原「同步模型」按钮,同步入口迁入弹窗):模型按能力分组展示(对话 / 向量 / 重排 / 语音),支持关键字过滤;每行可「测试」(通过即标记「验证模型」徽章并置渠道可用,后续探测优先使用)与「拉黑」(全局黑名单);弃用模型降灰标注,非对话模型不提供测试;操作按钮悬停行时着色,保持列表安静
## [0.5.1]
### Changed
- 设置 · 账号安全绑定入口:已绑定的登录方式按钮置禁用态并显示「已绑定」,解绑后自动恢复可点
### Fixed
- 修复禁用密码登录后登录页闪烁:登录方式加载完成前显示加载态,不再先渲染密码表单再切换,同时消除了闪烁窗口内误提交密码触发 403「密码登录已禁用」日志的问题
- 系统日志「动作」列补齐 26 条缺失描述(退出登录、外部身份登录 / 绑定、修改登录凭据、AI 密钥 / 渠道 / 黑名单 / 网关设置、通知渠道 / 模板、代理导入 / 探测 / 关联租户等)
## [0.5.0]
### Added
- AI 网关「接入信息」新增 `POST /tts` 端点展示(文本转语音 · xAI 官方格式)
- AI 网关「可用模型」新增「过滤弃用」开关:开启后已宣布弃用(即使未退役)的模型从模型列表与路由中排除,状态持久化,切换即时刷新列表
## [0.4.0]
### Added
- AI 网关「接入信息」补齐新端点展示:`POST /audio/speech`(文本转语音 · xAI Voice)、`POST /rerank`(文档重排 · Cohere Rerank)、`POST /moderations`(内容审核 · OCI Guardrails
## [0.3.0]
### Added
- AI 网关端点列表恢复展示 OpenAI Chat Completions 接口(`POST /ai/v1/chat/completions`),标明支持流式与非流式调用
- 租户列表分页支持 10 / 20 / 50 / 100 条每页切换
- 设置 · 关于新增「运行状态」面板:运行时长(随查看自增)与 CPU 均值 / 内存(堆)/ 存储占用 / Goroutines 四格指标,明暗主题与窄屏两列自适应;旧版后端缺运行时字段时面板自动隐藏
- 代理列表新增「关联租户」管理:弹窗回显当前关联名单(支持点 ✕ 移除),多选增删保存即设置全集,选中已关联其他代理的租户时提示保存后改挂
### Changed
- 回传日志告警统一改由「通知管理 → 云端事件」分类推送,租户删除提示同步移除已废弃的告警规则清理项
- 总览页租户测活列表改为限高滚动,「查看全部租户」入口固定展示
- 系统日志、OCI 审计日志与配额表格取消固定高度,分页内容随页面完整展开
- 代理列表「认证」列由用户名明文拼接改为「是 / 否」徽标,悬停「是」显示用户名(无用户名提示仅密码认证)
### Removed
- 移除日志页自定义审计告警规则的管理入口、条件表单及相关前端 API
### Fixed
- 修复租户列表分页状态在页面重绘时丢失,以及筛选后停留在越界页码的问题
- 修复「引导卷(GB)」等可清空数字输入框的步进箭头挤出输入框右缘的错位;清空图标改为悬浮在步进竖栏左侧,输入文本自动避让
## [0.2.0]
### Added
- AI 网关页「模型黑名单」管理:模型列表按厂商手风琴分组展示,可一键拉黑(全渠道剔除)、移除后重新同步渠道恢复
- AI 密钥模型白名单编辑:创建 / 编辑密钥时可限定放行的模型列表(空 = 不限)
- 渠道 / 密钥表单「现有分组」chips:点击即填入分组输入框
### Changed
- 租户删除确认弹窗分段排版(标题 / 面板清理范围 / 云端提示),列表与详情页文案一致
## [0.1.0]
### Added
- 设置页「通知渠道」卡片:Webhook(Slack / 飞书 / 钉钉 / 企微预设)、ntfy、Bark、SMTP 与 Telegram 五渠道管理
- 日志页审计告警规则管理:列表、组合匹配表单与通知模板入口
- 账号安全新增「撤销全部会话」入口
- 租户暂停状态三态展示(详情 / 列表 / 总览)
### Changed
- 实例详情 root 密码默认掩码、点击查看;串口控制台移除「复制 root 密码」
- 修改登录凭据后当前会话无感续期;其余敏感操作同样自动换用新令牌
- 域选择器仅显示域名(去除许可类型后缀)
### Fixed
- 明暗主题扩散切换时的闪烁
- 任务表单数字输入框在 small 尺寸下步进按钮溢出
- 租户详情「用户」「策略」等 Tab 切换域后内容不刷新
- 实例详情区块加载中时禁用头部操作按钮,防误点
## [0.0.1]
首个版本:OCI Portal 前端。
+1 -1
View File
@@ -1,7 +1,7 @@
{
"name": "oci-portal-dash",
"private": true,
"version": "0.1.0",
"version": "0.2.0",
"type": "module",
"scripts": {
"dev": "vite",
+54 -2
View File
@@ -1,5 +1,15 @@
import { request } from './request'
import type { AiCallLog, AiChannel, AiContentLog, AiKey, AiModel, AiModelCacheItem } from '@/types/api'
import type {
AiCallLog,
AiCatalogModel,
AiChannel,
AiContentLog,
AiKey,
AiModel,
AiModelBlacklistItem,
AiModelCacheItem,
AiSettings,
} from '@/types/api'
// ---- 网关密钥 ----
@@ -11,6 +21,8 @@ export interface CreateAiKeyRequest {
name: string
value?: string
group?: string
/** 模型白名单;缺省/空 = 不限 */
models?: string[]
}
/** 创建密钥;key 为明文,仅本次响应返回 */
@@ -20,7 +32,7 @@ export function createAiKey(body: CreateAiKeyRequest): Promise<{ key: string; it
export function updateAiKey(
id: number,
body: { name?: string; enabled?: boolean; group?: string },
body: { name?: string; enabled?: boolean; group?: string; models?: string[] },
): Promise<void> {
return request(`/ai-keys/${id}`, { method: 'PUT', body })
}
@@ -72,12 +84,52 @@ export function syncAiChannelModels(id: number): Promise<AiModelCacheItem[]> {
}).then((r) => r.items)
}
export function listAiChannelModels(id: number): Promise<AiModelCacheItem[]> {
return request<{ items: AiModelCacheItem[] }>(`/ai-channels/${id}/models`).then((r) => r.items)
}
/** 单模型 max_tokens=16 试调;通过即设为该渠道探测验证模型并按需置渠道可用 */
export function testAiChannelModel(id: number, model: string): Promise<AiChannel> {
return request(`/ai-channels/${id}/test-model`, { method: 'POST', body: { model } })
}
// ---- 聚合模型与调用日志 ----
export function listAiModels(): Promise<AiModel[]> {
return request<{ items: AiModel[] }>('/ai-models').then((r) => r.items)
}
/** 聚合模型目录(含能力,启用渠道去重;不受「过滤弃用」影响),黑名单添加弹窗用 */
export function listAiModelCatalog(): Promise<AiCatalogModel[]> {
return request<{ items: AiCatalogModel[] }>('/ai-model-catalog').then((r) => r.items)
}
// ---- 网关全局设置 ----
export function getAiSettings(): Promise<AiSettings> {
return request<AiSettings>('/ai-settings')
}
export function updateAiSettings(body: AiSettings): Promise<AiSettings> {
return request<AiSettings>('/ai-settings', { method: 'PUT', body })
}
// ---- 模型黑名单 ----
export function listAiBlacklist(): Promise<AiModelBlacklistItem[]> {
return request<{ items: AiModelBlacklistItem[] }>('/ai-blacklist').then((r) => r.items)
}
/** 拉黑模型:删除全部渠道缓存中的同名条目,后续同步 / 探测均过滤 */
export function addAiBlacklist(name: string): Promise<void> {
return request('/ai-blacklist', { method: 'POST', body: { name } })
}
/** 移出黑名单:缓存不回填,重新同步 / 探测后恢复入池 */
export function removeAiBlacklist(id: number): Promise<void> {
return request(`/ai-blacklist/${id}`, { method: 'DELETE' })
}
export function listAiCallLogs(params: {
page: number
size: number
+25 -14
View File
@@ -5,6 +5,7 @@ import type {
LoginRequest,
LoginResponse,
OAuthSettings,
SessionRefresh,
TotpSetup,
TotpStatus,
UpdateCredentialsRequest,
@@ -26,6 +27,14 @@ export function logout(): Promise<void> {
return request('/auth/logout', { method: 'POST' })
}
// ---- 会话 ----
/** 撤销全部会话:旧 token 全部失效,响应带操作者的新会话 */
export function revokeSessions(): Promise<SessionRefresh> {
if (mockOn) return mocked({ token: 'mock-token-2', expiresAt: '2099-01-01T00:00:00Z' }, 300)
return request('/auth/revoke-sessions', { method: 'POST' })
}
// ---- 登录凭据 ----
export function getCredentials(): Promise<CredentialsInfo> {
@@ -33,15 +42,15 @@ export function getCredentials(): Promise<CredentialsInfo> {
return request('/auth/credentials')
}
/** 修改用户名 / 密码;成功后旧 token 随即失效,调用方应登出重登 */
export function updateCredentials(body: UpdateCredentialsRequest): Promise<void> {
if (mockOn) return mocked(undefined, 400)
/** 修改用户名 / 密码;成功后旧 token 全部失效,响应带操作者的新会话 */
export function updateCredentials(body: UpdateCredentialsRequest): Promise<SessionRefresh> {
if (mockOn) return mocked({ token: 'mock-token-2', expiresAt: '2099-01-01T00:00:00Z' }, 400)
return request('/auth/credentials', { method: 'PUT', body })
}
/** 保存密码登录禁用开关;开启要求至少绑定一个外部身份(后端 409) */
export function updatePasswordLogin(disabled: boolean): Promise<void> {
if (mockOn) return mocked(undefined, 300)
/** 保存密码登录禁用开关;成功后旧 token 全部失效,响应带新会话 */
export function updatePasswordLogin(disabled: boolean): Promise<SessionRefresh> {
if (mockOn) return mocked({ token: 'mock-token-2', expiresAt: '2099-01-01T00:00:00Z' }, 300)
return request('/auth/password-login', { method: 'PUT', body: { disabled } })
}
@@ -62,14 +71,15 @@ export function setupTotp(): Promise<TotpSetup> {
return request('/auth/totp/setup', { method: 'POST' })
}
export function activateTotp(code: string): Promise<void> {
if (mockOn) return mocked(undefined, 300)
/** 激活两步验证;成功后旧 token 全部失效,响应带新会话 */
export function activateTotp(code: string): Promise<SessionRefresh> {
if (mockOn) return mocked({ token: 'mock-token-2', expiresAt: '2099-01-01T00:00:00Z' }, 300)
return request('/auth/totp/activate', { method: 'POST', body: { code } })
}
/** 停用两步验证;密码或当前验证码任一确认 */
export function disableTotp(body: { password?: string; code?: string }): Promise<void> {
if (mockOn) return mocked(undefined, 300)
/** 停用两步验证;密码或当前验证码任一确认,响应带新会话 */
export function disableTotp(body: { password?: string; code?: string }): Promise<SessionRefresh> {
if (mockOn) return mocked({ token: 'mock-token-2', expiresAt: '2099-01-01T00:00:00Z' }, 300)
return request('/auth/totp/disable', { method: 'POST', body })
}
@@ -92,7 +102,7 @@ export function getOauthProviders(): Promise<{
return request('/auth/oauth/providers')
}
/** 获取授权跳转 URL;bind 模式要求已登录(带 JWT) */
/** 获取授权跳转 URL;bind 模式要求已登录 */
export function getOauthAuthorizeUrl(
provider: string,
mode: 'login' | 'bind',
@@ -111,8 +121,9 @@ export function listIdentities(): Promise<{ items: UserIdentityInfo[] }> {
return request('/auth/identities')
}
export function unbindIdentity(id: number): Promise<void> {
if (mockOn) return mocked(undefined, 300)
/** 解绑外部身份;成功后旧 token 全部失效,响应带新会话 */
export function unbindIdentity(id: number): Promise<SessionRefresh> {
if (mockOn) return mocked({ token: 'mock-token-2', expiresAt: '2099-01-01T00:00:00Z' }, 300)
return request(`/auth/identities/${id}`, { method: 'DELETE' })
}
+6 -1
View File
@@ -1,6 +1,11 @@
import { mockLogEvents, mockLogRelays, mockLogWebhooks } from './mock'
import { mockOn, mocked, request } from './request'
import type { LogEventPage, LogRelayView, LogWebhookInfo, LogWebhookState } from '@/types/api'
import type {
LogEventPage,
LogRelayView,
LogWebhookInfo,
LogWebhookState,
} from '@/types/api'
export interface LogEventParams {
page: number
+3 -2
View File
@@ -113,8 +113,9 @@ export const mockConfigs: OciConfig[] = [
promotionStatus: 'EXPIRED',
multiRegion: true,
multiCompartment: true,
proxyId: null,
proxyName: '',
// 与 mockProxies[0].usedBy = 1 呼应:主号经东京 socks5 出站
proxyId: 1,
proxyName: '东京 socks5',
}),
cfg({
id: 2,
+17 -1
View File
@@ -1,4 +1,4 @@
import { mockProxies } from './mock'
import { mockConfigs, mockProxies } from './mock'
import { mockOn, mocked, request } from './request'
import type { ProxyImportResult, ProxyInfo, ProxyInput } from '@/types/api'
@@ -78,6 +78,22 @@ export function importProxies(text: string): Promise<ProxyImportResult> {
return request('/proxies/import', { method: 'POST', body: { text } })
}
/** 代理侧设置关联租户全集:选中即关联(含从其他代理改挂),未选中即解除 */
export function setProxyTenants(id: number, ociConfigIds: number[]): Promise<{ usedBy: number }> {
if (mockOn) {
const found = mockProxies.find((p) => p.id === id)
if (!found) return Promise.reject(new Error('代理不存在'))
for (const c of mockConfigs) {
if (ociConfigIds.includes(c.id)) Object.assign(c, { proxyId: id, proxyName: found.name })
else if (c.proxyId === id) Object.assign(c, { proxyId: null, proxyName: '' })
}
// 改挂会影响其他代理的引用数,全量重算保持一致
for (const p of mockProxies) p.usedBy = mockConfigs.filter((c) => c.proxyId === p.id).length
return mocked({ usedBy: found.usedBy })
}
return request(`/proxies/${id}/tenants`, { method: 'PUT', body: { ociConfigIds } })
}
/** 手动重测出口地区,同步返回最新视图 */
export function probeProxy(id: number): Promise<ProxyInfo> {
if (mockOn) {
+3 -1
View File
@@ -15,6 +15,8 @@ interface RequestOptions {
method?: string
body?: unknown
query?: Record<string, string | number | boolean | undefined>
/** 附加请求头 */
headers?: Record<string, string>
}
function buildUrl(path: string, query?: RequestOptions['query']): string {
@@ -46,7 +48,7 @@ async function parseError(resp: Response): Promise<never> {
/** 统一请求封装:注入 JWT、401 登出、错误转 ApiError */
export async function request<T>(path: string, opts: RequestOptions = {}): Promise<T> {
const auth = useAuthStore()
const headers: Record<string, string> = { 'Content-Type': 'application/json' }
const headers: Record<string, string> = { 'Content-Type': 'application/json', ...opts.headers }
if (auth.token) headers.Authorization = `Bearer ${auth.token}`
const resp = await fetch(buildUrl(path, opts.query), {
method: opts.method ?? 'GET',
+45
View File
@@ -8,12 +8,15 @@ import {
import { mockOn, mocked, request } from './request'
import type {
AboutInfo,
NotifyChannelItem,
NotifyChannelType,
NotifyEventsSetting,
NotifyTemplateItem,
SecuritySetting,
SystemLogPage,
TaskSetting,
TelegramSetting,
UpdateNotifyChannelBody,
} from '@/types/api'
export function getTelegramSetting(): Promise<TelegramSetting> {
@@ -46,6 +49,37 @@ export function testTelegram(): Promise<void> {
return request('/settings/telegram/test', { method: 'POST' })
}
/** 通知渠道(webhook/ntfy/bark/smtp)脱敏视图列表 */
export function listNotifyChannels(): Promise<NotifyChannelItem[]> {
if (mockOn)
return mocked(
(['webhook', 'ntfy', 'bark', 'smtp'] as NotifyChannelType[]).map((type) => ({
type,
enabled: false,
secretSet: false,
})),
)
return request<{ items: NotifyChannelItem[] }>('/settings/notify-channels').then((r) => r.items)
}
/** 保存单渠道配置,返回全渠道最新视图 */
export function updateNotifyChannel(
type: NotifyChannelType,
body: UpdateNotifyChannelBody,
): Promise<NotifyChannelItem[]> {
if (mockOn) return mocked([], 400)
return request<{ items: NotifyChannelItem[] }>(`/settings/notify-channels/${type}`, {
method: 'PUT',
body,
}).then((r) => r.items)
}
/** 向指定渠道发送测试消息(用已保存配置,不看启用开关) */
export function testNotifyChannel(type: NotifyChannelType): Promise<void> {
if (mockOn) return mocked(undefined, 800)
return request(`/settings/notify-channels/${type}/test`, { method: 'POST' })
}
export function getNotifyEvents(): Promise<NotifyEventsSetting> {
if (mockOn) return mocked({ ...mockNotifyEvents })
return request('/settings/notify-events')
@@ -147,6 +181,17 @@ export function getAbout(): Promise<AboutInfo> {
buildTime: '2026-07-09T12:00Z',
goVersion: 'go1.26.4',
platform: 'linux/amd64',
startedAt: '2026-07-01T08:23:00+08:00',
uptimeSeconds: 1053360, // 12 天 4 小时 36 分
resources: {
cpuAvgPercent: 1.4,
numCpu: 4,
goroutines: 36,
memHeapBytes: 50537000,
memSysBytes: 101187000,
dbEngine: 'sqlite',
dbBytes: 13212000,
},
})
return request('/about')
}
+72 -52
View File
@@ -14,6 +14,7 @@ import { mockOn, mocked, request } from './request'
import type {
AuditEventsResult,
IamUser,
IdentityDomain,
IamUserDetail,
IdentityProvider,
IdentitySetting,
@@ -83,14 +84,25 @@ export function getSubscription(id: number, subscriptionId: string): Promise<Sub
return request(`/oci-configs/${id}/subscriptions/${subscriptionId}`)
}
// ---- 身份域 ----
/** 租户 ACTIVE 身份域列表;空数组表示无域老租户(隐藏选择器走经典路径) */
export function listIdentityDomains(id: number): Promise<IdentityDomain[]> {
if (mockOn)
return mocked([
{ id: 'ocid1.domain.default', displayName: 'Default', homeRegion: 'us-phoenix-1', type: 'DEFAULT', licenseType: 'free' },
{ id: 'ocid1.domain.idcs', displayName: 'OracleIdentityCloudService', homeRegion: 'us-phoenix-1', type: 'SECONDARY', licenseType: 'idcs-foundation' },
])
return request(`/oci-configs/${id}/domains`)
}
// ---- 用户 ----
export function listUsers(id: number): Promise<IamUser[]> {
export function listUsers(id: number, domainId?: string): Promise<IamUser[]> {
if (mockOn) return mocked(mockUsers)
return request(`/oci-configs/${id}/users`)
return request(`/oci-configs/${id}/users`, { query: { domainId } })
}
// 编辑表单预填充用;不在身份域的经典用户返回 inDomain: false
export function getUserDetail(id: number, userId: string): Promise<IamUserDetail> {
export function getUserDetail(id: number, userId: string, domainId?: string): Promise<IamUserDetail> {
if (mockOn)
return mocked(
mockUserDetails[userId] ?? {
@@ -101,7 +113,7 @@ export function getUserDetail(id: number, userId: string): Promise<IamUserDetail
inAdminGroup: false,
},
)
return request(`/oci-configs/${id}/users/${userId}`)
return request(`/oci-configs/${id}/users/${userId}`, { query: { domainId } })
}
export interface CreateUserBody {
@@ -115,10 +127,10 @@ export interface CreateUserBody {
addToAdminGroup?: boolean
}
export function createUser(id: number, body: CreateUserBody): Promise<IamUser> {
export function createUser(id: number, body: CreateUserBody, domainId?: string): Promise<IamUser> {
if (mockOn)
return mocked({ ...mockUsers[2], id: 'ocid1.user..new', name: body.name, email: body.email ?? '' })
return request(`/oci-configs/${id}/users`, { method: 'POST', body })
return request(`/oci-configs/${id}/users`, { method: 'POST', body, query: { domainId } })
}
export interface UpdateUserBody {
@@ -131,29 +143,29 @@ export interface UpdateUserBody {
addToAdminGroup?: boolean
}
export function updateUser(id: number, userId: string, body: UpdateUserBody): Promise<IamUser> {
export function updateUser(id: number, userId: string, body: UpdateUserBody, domainId?: string): Promise<IamUser> {
if (mockOn) {
const u = mockUsers.find((x) => x.id === userId) ?? mockUsers[2]
if (body.description !== undefined) u.description = body.description
if (body.email !== undefined) u.email = body.email
return mocked({ ...u })
}
return request(`/oci-configs/${id}/users/${userId}`, { method: 'PUT', body })
return request(`/oci-configs/${id}/users/${userId}`, { method: 'PUT', body, query: { domainId } })
}
export function deleteUser(id: number, userId: string): Promise<void> {
export function deleteUser(id: number, userId: string, domainId?: string): Promise<void> {
if (mockOn) return mocked(undefined)
return request(`/oci-configs/${id}/users/${userId}`, { method: 'DELETE' })
return request(`/oci-configs/${id}/users/${userId}`, { method: 'DELETE', query: { domainId } })
}
export function resetUserPassword(id: number, userId: string): Promise<{ password: string }> {
export function resetUserPassword(id: number, userId: string, domainId?: string): Promise<{ password: string }> {
if (mockOn) return mocked({ password: 'Xy9#kQ2m$Lp8' })
return request(`/oci-configs/${id}/users/${userId}/reset-password`, { method: 'POST' })
return request(`/oci-configs/${id}/users/${userId}/reset-password`, { method: 'POST', query: { domainId } })
}
export function clearUserMfa(id: number, userId: string): Promise<{ deletedTotpDevices: number }> {
export function clearUserMfa(id: number, userId: string, domainId?: string): Promise<{ deletedTotpDevices: number }> {
if (mockOn) return mocked({ deletedTotpDevices: 1 })
return request(`/oci-configs/${id}/users/${userId}/mfa-devices`, { method: 'DELETE' })
return request(`/oci-configs/${id}/users/${userId}/mfa-devices`, { method: 'DELETE', query: { domainId } })
}
export function deleteUserApiKeys(
@@ -169,26 +181,26 @@ export function deleteUserApiKeys(
}
// ---- 审计日志 ----
/** 实时查询租户 OCI 审计事件:hours ∈ [1,72] 首查;
* 截断续查传上次响应的 start/end 与 nextPage(绝对窗+游标断点续翻) */
/** 批式懒加载查询审计事件:cursor 空自当前时刻首查,
* 非空从上次响应游标向更早续取一批(~200 条,服务端分窗回溯);
* q 为服务端全文检索关键字,仅首查生效(续查沿用游标内嵌关键字) */
export function listAuditEvents(
id: number,
opts: { hours?: number; region?: string; start?: string; end?: string; page?: string } = {},
opts: { region?: string; cursor?: string; limit?: number; q?: string } = {},
): Promise<AuditEventsResult> {
// mock 下选 1 小时窗演示截断提示
if (mockOn)
return mocked(
{
items: mockAuditEvents,
truncated: opts.hours === 1,
start: '2026-07-06T10:00:00Z',
end: '2026-07-07T10:00:00Z',
},
300,
)
const { hours = 24, region, start, end, page } = opts
const query = start && end ? { region, start, end, page } : { hours, region }
return request(`/oci-configs/${id}/audit-events`, { query })
// mock:首批带游标,续查一批后到尽头,演示懒加载链路;q 演示不区分大小写的包含匹配
if (mockOn) {
const kw = (opts.q ?? '').replace(/\*/g, '').toLowerCase()
const items = kw
? mockAuditEvents.filter((e) =>
[e.eventName, e.resourceName, e.principalName, e.ipAddress, e.source].some((v) =>
(v ?? '').toLowerCase().includes(kw),
),
)
: mockAuditEvents
return mocked({ items, cursor: opts.cursor ? undefined : 'mock-cursor', exhausted: !!opts.cursor }, 300)
}
return request(`/oci-configs/${id}/audit-events`, { query: { ...opts } })
}
/** 取回单条审计事件的原始 JSON;404 表示缓存过期且重查未找回(前端降级展示精简字段) */
@@ -201,45 +213,49 @@ export function getAuditEventDetail(
}
// ---- 域设置 ----
export function getNotificationRecipients(id: number): Promise<NotificationRecipients> {
export function getNotificationRecipients(id: number, domainId?: string): Promise<NotificationRecipients> {
if (mockOn) return mocked(mockRecipients)
return request(`/oci-configs/${id}/notification-recipients`)
return request(`/oci-configs/${id}/notification-recipients`, { query: { domainId } })
}
export function updateNotificationRecipients(
id: number,
recipients: string[],
domainId?: string,
): Promise<NotificationRecipients> {
if (mockOn) return mocked({ recipients, testModeEnabled: recipients.length > 0 })
return request(`/oci-configs/${id}/notification-recipients`, {
method: 'PUT',
body: { recipients },
query: { domainId },
})
}
export function listPasswordPolicies(id: number): Promise<PasswordPolicy[]> {
export function listPasswordPolicies(id: number, domainId?: string): Promise<PasswordPolicy[]> {
if (mockOn) return mocked(mockPolicies)
return request(`/oci-configs/${id}/password-policies`)
return request(`/oci-configs/${id}/password-policies`, { query: { domainId } })
}
export function updatePasswordPolicy(
id: number,
policyId: string,
body: { passwordExpiresAfter?: number; minLength?: number; numPasswordsInHistory?: number },
domainId?: string,
): Promise<PasswordPolicy> {
if (mockOn) return mocked({ ...mockPolicies[0], ...body })
return request(`/oci-configs/${id}/password-policies/${policyId}`, { method: 'PUT', body })
return request(`/oci-configs/${id}/password-policies/${policyId}`, { method: 'PUT', body, query: { domainId } })
}
// ---- 身份设置 ----
export function getIdentitySetting(id: number): Promise<IdentitySetting> {
export function getIdentitySetting(id: number, domainId?: string): Promise<IdentitySetting> {
if (mockOn) return mocked({ ...mockIdentitySetting })
return request(`/oci-configs/${id}/identity-settings`)
return request(`/oci-configs/${id}/identity-settings`, { query: { domainId } })
}
export function updateIdentitySetting(
id: number,
primaryEmailRequired: boolean,
domainId?: string,
): Promise<IdentitySetting> {
if (mockOn) {
mockIdentitySetting.primaryEmailRequired = primaryEmailRequired
@@ -248,10 +264,11 @@ export function updateIdentitySetting(
return request(`/oci-configs/${id}/identity-settings`, {
method: 'PUT',
body: { primaryEmailRequired },
query: { domainId },
})
}
export async function downloadSamlMetadata(id: number): Promise<void> {
export async function downloadSamlMetadata(id: number, domainId?: string): Promise<void> {
if (mockOn) {
const blob = new Blob(['<mock-saml-metadata/>'], { type: 'application/xml' })
triggerDownload(blob, 'oci-domain-saml-metadata.xml')
@@ -259,7 +276,8 @@ export async function downloadSamlMetadata(id: number): Promise<void> {
}
const { useAuthStore } = await import('@/stores/auth')
const auth = useAuthStore()
const resp = await fetch(`/api/v1/oci-configs/${id}/saml-metadata`, {
const qs = domainId ? `?domainId=${encodeURIComponent(domainId)}` : ''
const resp = await fetch(`/api/v1/oci-configs/${id}/saml-metadata${qs}`, {
headers: auth.token ? { Authorization: `Bearer ${auth.token}` } : {},
})
if (!resp.ok) throw new Error(`下载失败(${resp.status}`)
@@ -293,7 +311,7 @@ export interface CreateIdpBody {
jitMapEmail?: boolean
}
export function createIdp(id: number, body: CreateIdpBody): Promise<IdentityProvider> {
export function createIdp(id: number, body: CreateIdpBody, domainId?: string): Promise<IdentityProvider> {
if (mockOn) {
const created = {
...mockIdps[1],
@@ -304,41 +322,43 @@ export function createIdp(id: number, body: CreateIdpBody): Promise<IdentityProv
mockIdps.push(created)
return mocked(created, 900)
}
return request(`/oci-configs/${id}/identity-providers`, { method: 'POST', body })
return request(`/oci-configs/${id}/identity-providers`, { method: 'POST', body, query: { domainId } })
}
export function listIdps(id: number): Promise<IdentityProvider[]> {
export function listIdps(id: number, domainId?: string): Promise<IdentityProvider[]> {
if (mockOn) return mocked(mockIdps)
return request(`/oci-configs/${id}/identity-providers`)
return request(`/oci-configs/${id}/identity-providers`, { query: { domainId } })
}
export function activateIdp(id: number, idpId: string, enabled: boolean): Promise<IdentityProvider> {
export function activateIdp(id: number, idpId: string, enabled: boolean, domainId?: string): Promise<IdentityProvider> {
if (mockOn) return mocked({ ...mockIdps[0], enabled })
return request(`/oci-configs/${id}/identity-providers/${idpId}/activate`, {
method: 'POST',
body: { enabled },
query: { domainId },
})
}
export function deleteIdp(id: number, idpId: string): Promise<void> {
export function deleteIdp(id: number, idpId: string, domainId?: string): Promise<void> {
if (mockOn) return mocked(undefined)
return request(`/oci-configs/${id}/identity-providers/${idpId}`, { method: 'DELETE' })
return request(`/oci-configs/${id}/identity-providers/${idpId}`, { method: 'DELETE', query: { domainId } })
}
export function listSignOnRules(id: number): Promise<SignOnRule[]> {
export function listSignOnRules(id: number, domainId?: string): Promise<SignOnRule[]> {
if (mockOn) return mocked(mockSignOnRules)
return request(`/oci-configs/${id}/sign-on-rules`)
return request(`/oci-configs/${id}/sign-on-rules`, { query: { domainId } })
}
export function createSignOnExemption(id: number, identityProviderId: string): Promise<SignOnRule> {
export function createSignOnExemption(id: number, identityProviderId: string, domainId?: string): Promise<SignOnRule> {
if (mockOn) return mocked(mockSignOnRules[0])
return request(`/oci-configs/${id}/sign-on-exemptions`, {
method: 'POST',
body: { identityProviderId },
query: { domainId },
})
}
export function deleteSignOnExemption(id: number, ruleId: string): Promise<void> {
export function deleteSignOnExemption(id: number, ruleId: string, domainId?: string): Promise<void> {
if (mockOn) return mocked(undefined)
return request(`/oci-configs/${id}/sign-on-exemptions/${ruleId}`, { method: 'DELETE' })
return request(`/oci-configs/${id}/sign-on-exemptions/${ruleId}`, { method: 'DELETE', query: { domainId } })
}
+39 -1
View File
@@ -136,7 +136,9 @@ body {
width: 26px;
margin: 0;
display: grid;
grid-template-rows: 1fr 1fr;
/* minmax(0,…) 允许行收缩:small 尺寸下按钮固有高度(18px)大于半行,
1fr 的隐式 min-height:auto 会把行撑爆,下箭头溢出框外 */
grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
border-left: 1px solid var(--color-line-soft);
}
.app-input-number .n-input__suffix > :last-child {
@@ -158,6 +160,7 @@ body {
--n-text-color-focus: var(--color-ink);
width: 100%;
height: 100%;
min-height: 0;
border-radius: inherit;
color: var(--color-ink-3);
}
@@ -165,6 +168,19 @@ body {
background: var(--color-wash);
color: var(--color-ink);
}
/* clearable 时 naive-ui 在 suffix 首位多渲染 .n-base-clear,会被上面的
2 行网格自动排进隐式第 2 列、把 26px 竖栏撑爆(箭头溢出框外)——
绝对定位使其脱离网格流,悬浮在竖栏左侧;文本区同步加宽避让清空图标 */
.app-input-number .n-input__suffix .n-base-clear {
position: absolute;
right: 100%;
top: 50%;
transform: translateY(-50%);
margin-right: 5px;
}
.app-input-number .n-input:has(.n-base-clear) .n-input-wrapper {
padding-right: 52px;
}
/* useToast 可展开详情:toast 内嵌代码块(标签 + 复制 + 内滚 pre)。
message 经 teleport 渲染于 body,组件 scoped 样式不可达,故置于全局。 */
@@ -258,3 +274,25 @@ body {
}
}
}
/* 明暗主题扩散切换(useThemeRipple):关掉 View Transitions 默认交叉淡入,
由 JS 在 ::view-transition-new(root) 上做以触发点为圆心的 clip-path 揭示;
旧快照垫底不动,blend 还原为普通覆盖,避免半透明混色。 */
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
mix-blend-mode: normal;
}
::view-transition-old(root) {
z-index: 1;
}
::view-transition-new(root) {
z-index: 2;
}
/* 扩散进行中禁掉页面自身的过渡:new 快照是实时层,Naive 等组件的
0.3s 颜色渐变会在扩散圆内继续播放,叠加揭示动画表现为闪烁/渗色。 */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
transition: none !important;
}
+87 -19
View File
@@ -1,30 +1,98 @@
<script setup lang="ts">
// 项目 logo:星爆贴纸(波普风,十二角星爆 + O!)。
// 固定品牌色值不走 CSS 变量——favicon 与深浅主题共用同一套颜色。
// 项目 logo:波普贴纸,双款式跟随 app store(burst 星爆 / seal 波浪封印,
// 设置 · 关于点击 logo 切换)。固定品牌色值不走 CSS 变量——favicon 与深浅主题共用同一套颜色。
import { computed } from 'vue'
import { useAppStore } from '@/stores/app'
withDefaults(defineProps<{ size?: number }>(), { size: 48 })
const BURST =
'M24 5 L27.9 9.5 L33.5 7.5 L34.6 13.4 L40.5 14.5 L38.5 20.1 L43 24 L38.5 27.9 ' +
'L40.5 33.5 L34.6 34.6 L33.5 40.5 L27.9 38.5 L24 43 L20.1 38.5 L14.5 40.5 L13.4 34.6 ' +
'L7.5 33.5 L9.5 27.9 L5 24 L9.5 20.1 L7.5 14.5 L13.4 13.4 L14.5 7.5 L20.1 9.5 Z'
// 十二瓣扇贝圆(经典价签贴纸),内圈虚线封印
const SEAL =
'M39.5 19.9 A5.8 5.8 0 0 0 35.3 12.7 A5.8 5.8 0 0 0 28.1 8.5 A5.8 5.8 0 0 0 19.9 8.5 ' +
'A5.8 5.8 0 0 0 12.7 12.7 A5.8 5.8 0 0 0 8.5 19.9 A5.8 5.8 0 0 0 8.5 28.1 ' +
'A5.8 5.8 0 0 0 12.7 35.3 A5.8 5.8 0 0 0 19.9 39.5 A5.8 5.8 0 0 0 28.1 39.5 ' +
'A5.8 5.8 0 0 0 35.3 35.3 A5.8 5.8 0 0 0 39.5 28.1 A5.8 5.8 0 0 0 39.5 19.9 Z'
const VARIANTS = {
burst: { d: BURST, strokeWidth: 2.6, textY: 28.8, fontSize: 13, ring: false },
seal: { d: SEAL, strokeWidth: 2.4, textY: 28.6, fontSize: 12.5, ring: true },
} as const
const app = useAppStore()
const v = computed(() => VARIANTS[app.logoVariant])
</script>
<template>
<svg :width="size" :height="size" viewBox="0 0 48 48" aria-hidden="true">
<g transform="rotate(-8 24 24)">
<path :d="BURST" fill="#3A2418" transform="translate(1.9,2.4)"></path>
<path :d="BURST" fill="#C96442" stroke="#FFFDF7" stroke-width="2.6" stroke-linejoin="round"></path>
<text
x="24"
y="28.8"
text-anchor="middle"
font-family="Georgia,'Times New Roman',serif"
font-size="13"
font-weight="900"
fill="#FAF3E3"
>
O!
</text>
</g>
</svg>
<span class="logo-wrap" :style="{ width: `${size}px`, height: `${size}px` }">
<Transition name="logo-slide">
<svg :key="app.logoVariant" :width="size" :height="size" viewBox="0 0 48 48" aria-hidden="true">
<g transform="rotate(-8 24 24)">
<path :d="v.d" fill="#3A2418" transform="translate(1.9,2.4)"></path>
<path :d="v.d" fill="#C96442" stroke="#FFFDF7" :stroke-width="v.strokeWidth" stroke-linejoin="round"></path>
<circle
v-if="v.ring"
cx="24"
cy="24"
r="12.5"
fill="none"
stroke="#FAF3E3"
stroke-width="1"
stroke-dasharray="2.4 2.6"
opacity="0.7"
></circle>
<text
x="24"
:y="v.textY"
text-anchor="middle"
font-family="Georgia,'Times New Roman',serif"
:font-size="v.fontSize"
font-weight="900"
fill="#FAF3E3"
>
O!
</text>
</g>
</svg>
</Transition>
</span>
</template>
<style scoped>
/* 款式切换:旧款右滑淡出、新款自左滑入(整体从左到右);
离开元素绝对定位避免过渡期双元素撑开布局 */
.logo-wrap {
position: relative;
display: inline-block;
line-height: 0;
}
.logo-slide-enter-active,
.logo-slide-leave-active {
transition:
transform 0.35s ease,
opacity 0.35s ease;
}
.logo-slide-leave-active {
position: absolute;
left: 0;
top: 0;
}
.logo-slide-enter-from {
transform: translateX(-45%);
opacity: 0;
}
.logo-slide-leave-to {
transform: translateX(45%);
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
.logo-slide-enter-active,
.logo-slide-leave-active {
transition: none;
}
}
</style>
+11 -5
View File
@@ -1,7 +1,7 @@
<script setup lang="ts">
/** 租户失联占位:租户详情各 tab 与实例 / 网络 / 存储等资源页在
* 当前租户失联时整体替换内容区,避免各处「无数据」/ 报错造成误判。 */
defineProps<{ lastError?: string }>()
/** 租户失联/暂停占位:租户详情各 tab 与实例 / 网络 / 存储等资源页在
* 当前租户不可用时整体替换内容区,避免各处「无数据」/ 报错造成误判。 */
defineProps<{ lastError?: string; suspended?: boolean }>()
</script>
<template>
@@ -23,12 +23,18 @@ defineProps<{ lastError?: string }>()
<line x1="16" y1="19" x2="16" y2="22" />
<line x1="19" y1="16" x2="22" y2="16" />
</svg>
<div class="text-sm font-semibold text-ink-2">租户已失联</div>
<div class="text-sm font-semibold text-ink-2">
{{ suspended ? '租户已被云端暂停' : '租户已失联' }}
</div>
<div v-if="lastError" class="mono max-w-130 text-xs break-all whitespace-pre-wrap text-ink-3">
{{ lastError }}
</div>
<div class="max-w-95 text-[12.5px] text-ink-3">
请检查 API Key 是否有效修复后在租户页重新测活
{{
suspended
? '账户被 Oracle 暂停(欠费 / 封禁 / 终止),请到官方控制台或工单处理,恢复后重新测活'
: '请检查 API Key 是否有效,修复后在租户页重新测活'
}}
</div>
</div>
</template>
+2 -2
View File
@@ -1,13 +1,13 @@
<script setup lang="ts">
import { useMessage } from 'naive-ui'
import { computed, ref } from 'vue'
import { useToast } from '@/composables/useToast'
/** 拖拽或点击上传的文本文件选择区;文件内容仅在浏览器本地读取。
* compact:单行紧凑形态,用于表单内与其他字段并排。 */
const props = defineProps<{ accept?: string; label?: string; hint?: string; compact?: boolean }>()
const emit = defineEmits<{ load: [text: string, name: string] }>()
const message = useMessage()
const message = useToast()
const inputEl = ref<HTMLInputElement>()
const fileName = ref('')
const dragging = ref(false)
+3 -2
View File
@@ -1,6 +1,7 @@
<script setup lang="ts">
import { NButton, useMessage } from 'naive-ui'
import { NButton } from 'naive-ui'
import { computed } from 'vue'
import { useToast } from '@/composables/useToast'
/** 统一的 JSON 展示块:美化缩进 + 语法高亮 + 复制;三个日志详情共用。
* 传 title 时渲染工具栏头(左标签 + meta + 右复制按钮),否则复制按钮浮动。
@@ -14,7 +15,7 @@ const props = defineProps<{
wide?: boolean
}>()
const message = useMessage()
const message = useToast()
const pretty = computed(() => {
const v = props.value
+3 -2
View File
@@ -1,11 +1,12 @@
<script setup lang="ts">
import { NButton, NIcon, useMessage } from 'naive-ui'
import { NButton, NIcon } from 'naive-ui'
import { truncOcid } from '@/composables/useFormat'
import { useToast } from '@/composables/useToast'
const props = defineProps<{ ocid: string }>()
const message = useMessage()
const message = useToast()
async function copy() {
await navigator.clipboard.writeText(props.ocid)
+201
View File
@@ -0,0 +1,201 @@
<script setup lang="ts">
import { NButton, NInput, NModal, useDialog } from 'naive-ui'
import { computed, ref, watch } from 'vue'
import {
addAiBlacklist,
listAiChannelModels,
syncAiChannelModels,
testAiChannelModel,
} from '@/api/aigateway'
import { useToast } from '@/composables/useToast'
import type { AiChannel, AiModelCacheItem } from '@/types/api'
const props = defineProps<{ show: boolean; channel: AiChannel | null }>()
const emit = defineEmits<{ 'update:show': [boolean]; changed: [] }>()
const toast = useToast()
const dialog = useDialog()
const rows = ref<AiModelCacheItem[]>([])
const loading = ref(false)
const syncing = ref(false)
const testing = ref('')
const filter = ref('')
/** 本地镜像验证模型:测试通过即时高亮,不等父级刷新 */
const probeModel = ref('')
const CAP_ORDER = ['CHAT', 'EMBEDDING', 'RERANK', 'TTS']
const CAP_LABEL: Record<string, string> = { CHAT: '对话', EMBEDDING: '向量', RERANK: '重排', TTS: '语音' }
/** 按能力分组 + 关键字过滤;仅对话组提供「测试」入口 */
const groups = computed(() => {
const kw = filter.value.trim().toLowerCase()
const buckets = new Map<string, AiModelCacheItem[]>()
for (const r of rows.value) {
if (kw && !r.name.toLowerCase().includes(kw)) continue
const cap = r.capability || 'CHAT'
buckets.set(cap, [...(buckets.get(cap) ?? []), r])
}
const order = [...CAP_ORDER, ...[...buckets.keys()].filter((c) => !CAP_ORDER.includes(c))]
return order
.filter((cap) => buckets.has(cap))
.map((cap) => ({ cap, label: CAP_LABEL[cap] ?? cap, items: buckets.get(cap)! }))
})
const shownCount = computed(() => groups.value.reduce((n, g) => n + g.items.length, 0))
watch(
() => props.show,
(show) => {
if (show && props.channel) {
probeModel.value = props.channel.probeModel
filter.value = ''
void reload()
}
},
)
async function reload() {
if (!props.channel) return
loading.value = true
try {
rows.value = await listAiChannelModels(props.channel.id)
} catch (e) {
toast.error(e instanceof Error ? e.message : '加载失败')
} finally {
loading.value = false
}
}
async function doSync() {
if (!props.channel) return
syncing.value = true
try {
rows.value = await syncAiChannelModels(props.channel.id)
toast.success(`已同步 ${rows.value.length} 个模型`)
emit('changed')
} catch (e) {
toast.error(e instanceof Error ? e.message : '同步失败')
} finally {
syncing.value = false
}
}
async function doTest(name: string) {
if (!props.channel || testing.value) return
testing.value = name
try {
const ch = await testAiChannelModel(props.channel.id, name)
probeModel.value = ch.probeModel
toast.success('测试通过', '已设为该渠道探测验证模型,后续探测优先使用')
emit('changed')
} catch (e) {
toast.error(e instanceof Error ? e.message : '测试失败')
} finally {
testing.value = ''
}
}
function confirmBlacklist(name: string) {
dialog.warning({
title: '拉黑模型',
content: `${name}」将从全部渠道剔除,同步与探测不再入库;可在模型黑名单中移出后重新同步恢复。`,
positiveText: '拉黑',
negativeText: '取消',
onPositiveClick: async () => {
try {
await addAiBlacklist(name)
toast.success('已拉黑')
void reload()
emit('changed')
} catch (e) {
toast.error(e instanceof Error ? e.message : '拉黑失败')
}
},
})
}
</script>
<template>
<NModal
:show="show"
preset="card"
:style="{ width: '640px', maxWidth: 'calc(100vw - 24px)' }"
@update:show="emit('update:show', $event)"
>
<template #header>
<div>
<div class="text-[15px] leading-tight font-semibold">模型列表</div>
<div class="mono mt-1 text-xs font-normal text-ink-3">{{ channel?.name ?? '' }}</div>
</div>
</template>
<div class="flex items-center gap-2 pb-2">
<NInput v-model:value="filter" size="small" placeholder="过滤模型名…" clearable class="min-w-0 flex-1" />
<span class="flex-none text-xs whitespace-nowrap text-ink-3">
{{ filter ? `${shownCount} / ${rows.length}` : `${rows.length} 个模型` }}
</span>
<NButton size="small" :loading="syncing" @click="doSync">同步模型</NButton>
</div>
<div class="-mx-2 max-h-[58vh] overflow-y-auto">
<div v-if="loading" class="py-10 text-center text-xs text-ink-3">加载中</div>
<template v-else>
<template v-for="g in groups" :key="g.cap">
<div class="px-3 pt-3 pb-1 text-[11.5px] font-semibold tracking-wide text-ink-3">
{{ g.label }} <span class="font-normal">· {{ g.items.length }}</span>
</div>
<div
v-for="r in g.items"
:key="r.name"
class="group flex items-center gap-2 rounded-lg px-3 py-[5px] hover:bg-row-hover"
>
<span
class="mono min-w-0 truncate text-[13px]"
:class="r.deprecatedAt ? 'text-ink-3' : ''"
:title="r.modelOcid"
>
{{ r.name }}
</span>
<span
v-if="r.name === probeModel"
class="flex flex-none items-center gap-1 rounded-[5px] bg-info/15 px-1.5 py-px text-[10.5px] font-medium text-info"
>
<span class="h-[5px] w-[5px] rounded-full bg-info" />验证模型
</span>
<span v-if="r.deprecatedAt" class="flex-none text-[11px] text-warn">弃用</span>
<span class="min-w-0 flex-1" />
<button
v-if="g.cap === 'CHAT'"
type="button"
class="flex-none cursor-pointer rounded-[5px] px-1.5 py-0.5 text-xs hover:bg-accent/10"
:class="testing === r.name ? 'text-accent' : 'text-ink-3/70 group-hover:text-accent'"
:disabled="!!testing"
@click="doTest(r.name)"
>
{{ testing === r.name ? '测试中…' : '测试' }}
</button>
<button
type="button"
class="flex-none cursor-pointer rounded-[5px] px-1.5 py-0.5 text-xs text-ink-3/70 group-hover:text-err hover:bg-err/10"
@click="confirmBlacklist(r.name)"
>
拉黑
</button>
</div>
</template>
<div v-if="!shownCount" class="py-10 text-center text-xs text-ink-3">
{{ rows.length ? '无匹配模型' : '暂无模型缓存,点击右上同步模型拉取' }}
</div>
</template>
</div>
<div class="mt-1 border-t border-line-soft pt-2.5 text-[11.5px] leading-relaxed text-ink-3">
<span class="font-medium text-ink-2">测试</span>: max_tokens=16
试调,通过即设为该渠道探测验证模型(后续探测优先使用)并置渠道可用 ·
<span class="font-medium text-ink-2">拉黑</span>:全局生效,从全部渠道剔除 ·
非对话模型不提供测试
</div>
</NModal>
</template>
+35 -22
View File
@@ -1,9 +1,11 @@
<script setup lang="ts">
import { NButton, NDataTable, NInput, NSelect, NTooltip, useDialog, useMessage, type DataTableColumns } from 'naive-ui'
import { NButton, NDataTable, NInput, NSelect, NTooltip, useDialog, type DataTableColumns } from 'naive-ui'
import { computed, h, reactive, ref } from 'vue'
import { createAiChannel, deleteAiChannel, probeAiChannel, syncAiChannelModels, updateAiChannel } from '@/api/aigateway'
import { createAiChannel, deleteAiChannel, probeAiChannel, updateAiChannel } from '@/api/aigateway'
import { listCachedRegions } from '@/api/configs'
import AiChannelModelsModal from '@/components/ai/AiChannelModelsModal.vue'
import GroupChips from '@/components/ai/GroupChips.vue'
import AppInputNumber from '@/components/AppInputNumber.vue'
import FormField from '@/components/FormField.vue'
import FormModal from '@/components/FormModal.vue'
@@ -15,10 +17,11 @@ import { useToast } from '@/composables/useToast'
import { useScopeStore } from '@/stores/scope'
import type { AiChannel, AiProbeStatus } from '@/types/api'
defineProps<{ channels: AiChannel[]; loading: boolean }>()
const props = defineProps<{ channels: AiChannel[]; loading: boolean }>()
const emit = defineEmits<{ changed: [] }>()
const message = useMessage()
const groupHints = computed(() => [...new Set(props.channels.map((c) => c.group).filter(Boolean))])
const toast = useToast()
const dialog = useDialog()
const scope = useScopeStore()
@@ -67,7 +70,7 @@ async function submit() {
try {
if (editing.value) {
await updateAiChannel(editing.value.id, { name: form.name, group: form.group, priority: form.priority, weight: form.weight })
message.success('已更新渠道')
toast.success('已更新渠道')
showForm.value = false
emit('changed')
} else {
@@ -77,11 +80,11 @@ async function submit() {
})
showForm.value = false
emit('changed')
message.success('渠道已添加,正在探测…')
toast.success('渠道已添加,正在探测…')
void doProbe(ch.id)
}
} catch (e) {
message.error(e instanceof Error ? e.message : '保存失败')
toast.error(e instanceof Error ? e.message : '保存失败')
} finally {
submitting.value = false
}
@@ -95,35 +98,34 @@ async function doProbe(id: number) {
const ch = await probeAiChannel(id)
const meta = ch.probeStatus ? PROBE_META[ch.probeStatus as Exclude<AiProbeStatus, ''>] : null
if (ch.probeStatus === 'ok') {
message.success('探测完成:可用')
toast.success('探测完成:可用')
} else {
toast.warning(`探测完成:${meta?.label ?? ch.probeStatus}`, ch.probeError || undefined)
}
} catch (e) {
message.error(e instanceof Error ? e.message : '探测失败')
toast.error(e instanceof Error ? e.message : '探测失败')
} finally {
probing.value.delete(id)
emit('changed')
}
}
async function doSync(id: number) {
try {
const models = await syncAiChannelModels(id)
message.success(`已同步 ${models.length} 个模型`)
emit('changed')
} catch (e) {
message.error(e instanceof Error ? e.message : '同步失败')
}
// ---- 模型列表弹窗 ----
const showModels = ref(false)
const modelsChannel = ref<AiChannel | null>(null)
function openModels(ch: AiChannel) {
modelsChannel.value = ch
showModels.value = true
}
async function toggle(ch: AiChannel) {
try {
await updateAiChannel(ch.id, { enabled: !ch.enabled })
message.success(ch.enabled ? '已停用' : '已启用')
toast.success(ch.enabled ? '已停用' : '已启用')
emit('changed')
} catch (e) {
message.error(e instanceof Error ? e.message : '操作失败')
toast.error(e instanceof Error ? e.message : '操作失败')
}
}
@@ -135,7 +137,7 @@ function confirmRemove(ch: AiChannel) {
negativeText: '取消',
onPositiveClick: async () => {
await deleteAiChannel(ch.id)
message.success('已删除')
toast.success('已删除')
emit('changed')
},
})
@@ -176,12 +178,16 @@ const columns = computed<DataTableColumns<AiChannel>>(() => [
},
{ title: '优先级', key: 'priority', width: 76, render: (r) => h('span', { class: 'mono text-[13px]' }, String(r.priority)) },
{ title: '权重', key: 'weight', width: 66, render: (r) => h('span', { class: 'mono text-[13px]' }, String(r.weight)) },
{
title: '模型数量', key: 'modelCount', width: 86,
render: (r) => h('span', { class: r.modelCount ? 'mono text-[13px]' : 'text-xs text-ink-3' }, String(r.modelCount ?? 0)),
},
{ title: '探测状态', key: 'probeStatus', width: 120, render: probeCell },
{
title: '操作', key: 'actions', width: 250,
render: (r) => h('div', { class: 'flex items-center gap-0.5' }, [
h(NButton, { size: 'tiny', quaternary: true, type: 'primary', loading: probing.value.has(r.id), onClick: () => doProbe(r.id) }, { default: () => '探测' }),
h(NButton, { size: 'tiny', quaternary: true, type: 'primary', onClick: () => doSync(r.id) }, { default: () => '同步模型' }),
h(NButton, { size: 'tiny', quaternary: true, type: 'primary', onClick: () => openModels(r) }, { default: () => '模型列表' }),
h(NButton, { size: 'tiny', quaternary: true, onClick: () => toggle(r) }, { default: () => (r.enabled ? '停用' : '启用') }),
h(NButton, { size: 'tiny', quaternary: true, type: 'primary', onClick: () => openEdit(r) }, { default: () => '编辑' }),
h(NButton, { size: 'tiny', quaternary: true, type: 'error', onClick: () => confirmRemove(r) }, { default: () => '删除' }),
@@ -203,10 +209,16 @@ const columns = computed<DataTableColumns<AiChannel>>(() => [
</div>
<NDataTable :columns="columns" :data="channels" :loading="loading" :bordered="false" size="small" />
<div class="border-t border-line-soft bg-wash px-4.5 py-2.5 text-xs leading-relaxed text-ink-3">
探测三步:列模型(服务可见性) 同步模型缓存 max_tokens=1 试调(配额)· 探测成功自动复位熔断 ·
探测三步:列模型(服务可见性) 同步模型缓存 max_tokens=16 试调(配额)· 探测成功自动复位熔断 ·
有渠道时系统自动维护AI渠道探测后台任务(每天 00:00 逐渠道探测,渠道清空自动暂停)
</div>
<AiChannelModelsModal
v-model:show="showModels"
:channel="modelsChannel"
@changed="emit('changed')"
/>
<FormModal
v-model:show="showForm"
:title="editing ? '编辑渠道' : '添加渠道'"
@@ -234,6 +246,7 @@ const columns = computed<DataTableColumns<AiChannel>>(() => [
<div class="grid grid-cols-3 gap-3">
<FormField label="分组" hint="分组供密钥定向路由;留空归入默认分组">
<NInput v-model:value="form.group" placeholder="默认" />
<GroupChips :groups="groupHints" @pick="form.group = $event" />
</FormField>
<FormField label="优先级" hint="数字小优先">
<AppInputNumber v-model:value="form.priority" :min="1" />
+48 -21
View File
@@ -1,39 +1,44 @@
<script setup lang="ts">
import { NButton, NDataTable, NInput, useDialog, useMessage, type DataTableColumns } from 'naive-ui'
import { NButton, NDataTable, NInput, NSelect, NTooltip, useDialog, type DataTableColumns } from 'naive-ui'
import { computed, h, reactive, ref } from 'vue'
import { createAiKey, deleteAiKey, updateAiKey, updateAiKeyContentLog } from '@/api/aigateway'
import GroupChips from '@/components/ai/GroupChips.vue'
import AppInputNumber from '@/components/AppInputNumber.vue'
import FormField from '@/components/FormField.vue'
import FormModal from '@/components/FormModal.vue'
import StatusBadge from '@/components/StatusBadge.vue'
import { fmtTime } from '@/composables/useFormat'
import type { AiKey } from '@/types/api'
import type { AiKey, AiModel } from '@/types/api'
import { useToast } from '@/composables/useToast'
const props = defineProps<{ keys: AiKey[]; loading: boolean; groups: string[] }>()
const props = defineProps<{ keys: AiKey[]; loading: boolean; groups: string[]; models: AiModel[] }>()
const emit = defineEmits<{ changed: [] }>()
const message = useMessage()
const message = useToast()
const dialog = useDialog()
// ---- 新建 / 编辑弹窗 ----
const showForm = ref(false)
const editing = ref<AiKey | null>(null)
const submitting = ref(false)
const form = reactive({ name: '', value: '', group: '' })
const form = reactive({ name: '', value: '', group: '', models: [] as string[] })
function openCreate() {
editing.value = null
Object.assign(form, { name: '', value: '', group: '' })
Object.assign(form, { name: '', value: '', group: '', models: [] })
showForm.value = true
}
function openEdit(key: AiKey) {
editing.value = key
Object.assign(form, { name: key.name, value: '', group: key.group })
Object.assign(form, { name: key.name, value: '', group: key.group, models: key.models ?? [] })
showForm.value = true
}
/** 限制模型下拉选项:聚合模型列表;tag 模式允许手输未同步模型 */
const modelOptions = computed(() => props.models.map((m) => ({ label: m.id, value: m.id })))
// 创建成功后明文只在此弹窗展示一次
const createdKey = ref('')
const showCreated = ref(false)
@@ -42,10 +47,13 @@ async function submit() {
submitting.value = true
try {
if (editing.value) {
await updateAiKey(editing.value.id, { name: form.name, group: form.group })
await updateAiKey(editing.value.id, { name: form.name, group: form.group, models: form.models })
message.success('已更新密钥')
} else {
const { key } = await createAiKey({ name: form.name, value: form.value || undefined, group: form.group || undefined })
const { key } = await createAiKey({
name: form.name, value: form.value || undefined, group: form.group || undefined,
models: form.models.length ? form.models : undefined,
})
createdKey.value = key
showCreated.value = true
}
@@ -117,6 +125,21 @@ function confirmRemove(key: AiKey) {
const groupHints = computed(() => props.groups.filter(Boolean))
// modelsCell 渲染模型白名单列:空 = 不限;非空显示数量,悬浮列明细
function modelsCell(r: AiKey) {
const list = r.models ?? []
if (!list.length) return h('span', { class: 'text-xs text-ink-3' }, '不限')
return h(
NTooltip,
{ style: { maxWidth: '320px' } },
{
trigger: () =>
h('span', { class: 'cursor-help rounded-[5px] bg-info/15 px-2 py-0.5 text-xs font-medium text-info' }, `${list.length}`),
default: () => h('span', { class: 'text-xs leading-relaxed whitespace-pre-wrap break-all' }, list.join('\n')),
},
)
}
const columns = computed<DataTableColumns<AiKey>>(() => [
{ title: '名称', key: 'name', width: 220, ellipsis: { tooltip: true }, render: (r) => h('span', { class: 'text-[13px] font-medium' }, r.name) },
{ title: '密钥', key: 'tail', width: 120, render: (r) => h('span', { class: 'mono text-[13px] text-ink-2' }, `……${r.tail}`) },
@@ -126,6 +149,7 @@ const columns = computed<DataTableColumns<AiKey>>(() => [
? h('span', { class: 'rounded-[5px] bg-info/15 px-2 py-0.5 text-xs font-medium text-info' }, r.group)
: h('span', { class: 'text-xs text-ink-3' }, '不限'),
},
{ title: '模型', key: 'models', width: 90, render: modelsCell },
{
title: '状态', key: 'enabled', width: 100,
render: (r) => h(StatusBadge, r.enabled ? { kind: 'run', label: '启用' } : { kind: 'stop', label: '已禁用' }),
@@ -169,18 +193,21 @@ const columns = computed<DataTableColumns<AiKey>>(() => [
</FormField>
<FormField label="渠道分组" hint="选择分组后,该密钥的调用只在该分组的渠道内负载均衡;留空不限分组">
<NInput v-model:value="form.group" placeholder="留空 = 不限(全部渠道)" />
<div v-if="groupHints.length" class="mt-1.5 flex flex-wrap items-center gap-1.5">
<span class="text-xs text-ink-3">现有分组:</span>
<button
v-for="g in groupHints"
:key="g"
type="button"
class="cursor-pointer rounded-[5px] border border-line bg-card px-2 py-0.5 text-xs text-ink-2 hover:border-accent hover:text-accent"
@click="form.group = g"
>
{{ g }}
</button>
</div>
<GroupChips :groups="groupHints" @pick="form.group = $event" />
</FormField>
<FormField
label="限制模型"
hint="非空时该密钥仅能调用所选模型,/v1/models 同步只返回交集;可手输未同步的模型名;留空不限"
>
<NSelect
v-model:value="form.models"
:options="modelOptions"
multiple
filterable
clearable
tag
placeholder="留空 = 不限(全部模型)"
/>
</FormField>
<FormField v-if="!editing" label="自定义密钥值" hint="至少 8 位;仅测试场景建议自定义">
<NInput v-model:value="form.value" placeholder="留空自动生成 sk- 开头随机密钥(推荐)" />
+20
View File
@@ -0,0 +1,20 @@
<script setup lang="ts">
// 现有分组提示行:点击 chip 将分组名填入外部输入框;无分组时整行不渲染
defineProps<{ groups: string[] }>()
defineEmits<{ pick: [group: string] }>()
</script>
<template>
<div v-if="groups.length" class="mt-1.5 flex flex-wrap items-center gap-1.5">
<span class="text-xs text-ink-3">现有分组:</span>
<button
v-for="g in groups"
:key="g"
type="button"
class="cursor-pointer rounded-[5px] border border-line bg-card px-2 py-0.5 text-xs text-ink-2 hover:border-accent hover:text-accent"
@click="$emit('pick', g)"
>
{{ g }}
</button>
</div>
</template>
+3 -2
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { NInput, NSelect, useMessage } from 'naive-ui'
import { NInput, NSelect } from 'naive-ui'
import { computed, reactive, watch } from 'vue'
import { ref } from 'vue'
@@ -12,11 +12,12 @@ import ToggleCard from '@/components/ToggleCard.vue'
import { useProxyOptions } from '@/composables/useProxyOptions'
import { useScopeStore } from '@/stores/scope'
import type { OciConfigSummary } from '@/types/api'
import { useToast } from '@/composables/useToast'
const props = defineProps<{ show: boolean; config: OciConfigSummary | null }>()
const emit = defineEmits<{ 'update:show': [boolean]; updated: [] }>()
const message = useMessage()
const message = useToast()
const submitting = ref(false)
const form = reactive({
+3 -2
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { NInput, NSelect, NTabPane, NTabs, useMessage } from 'naive-ui'
import { NInput, NSelect, NTabPane, NTabs } from 'naive-ui'
import { computed, reactive, ref, watch } from 'vue'
import { importConfig } from '@/api/configs'
@@ -11,11 +11,12 @@ import ToggleCard from '@/components/ToggleCard.vue'
import { useProxyOptions } from '@/composables/useProxyOptions'
import { useScopeStore } from '@/stores/scope'
import type { ImportConfigRequest } from '@/types/api'
import { useToast } from '@/composables/useToast'
const props = defineProps<{ show: boolean }>()
const emit = defineEmits<{ 'update:show': [boolean]; imported: [] }>()
const message = useMessage()
const message = useToast()
const mode = ref<'ini' | 'fields'>('ini')
const submitting = ref(false)
+3 -2
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { NInput, NSelect, useMessage, type SelectOption } from 'naive-ui'
import { NInput, NSelect, type SelectOption } from 'naive-ui'
import { computed, ref, watch } from 'vue'
import { attachVnic } from '@/api/instances'
@@ -9,6 +9,7 @@ import FormModal from '@/components/FormModal.vue'
import ToggleCard from '@/components/ToggleCard.vue'
import { useAsync } from '@/composables/useAsync'
import { shortAd } from '@/composables/useFormat'
import { useToast } from '@/composables/useToast'
const props = defineProps<{
show: boolean
@@ -21,7 +22,7 @@ const props = defineProps<{
const emit = defineEmits<{ 'update:show': [boolean]; attached: [] }>()
const message = useMessage()
const message = useToast()
const submitting = ref(false)
const subnetId = ref<string | null>(null)
const displayName = ref('')
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { NCheckbox, NSelect, useMessage, type SelectGroupOption } from 'naive-ui'
import { NCheckbox, NSelect, type SelectGroupOption } from 'naive-ui'
import { computed, ref, watch } from 'vue'
import { listBootVolumes } from '@/api/bootVolumes'
@@ -7,6 +7,7 @@ import { attachVolume, listVolumes } from '@/api/instances'
import FormField from '@/components/FormField.vue'
import FormModal from '@/components/FormModal.vue'
import { useAsync } from '@/composables/useAsync'
import { useToast } from '@/composables/useToast'
const props = defineProps<{
show: boolean
@@ -19,7 +20,7 @@ const props = defineProps<{
const emit = defineEmits<{ 'update:show': [boolean]; attached: [] }>()
const message = useMessage()
const message = useToast()
const submitting = ref(false)
const volumeId = ref<string | null>(null)
const readOnly = ref(false)
+3 -2
View File
@@ -1,15 +1,16 @@
<script setup lang="ts">
import { NInput, useMessage } from 'naive-ui'
import { NInput } from 'naive-ui'
import { computed, ref, watch } from 'vue'
import { createConsoleConnection } from '@/api/instances'
import FormField from '@/components/FormField.vue'
import FormModal from '@/components/FormModal.vue'
import { useToast } from '@/composables/useToast'
const props = defineProps<{ show: boolean; cfgId: number; instanceId: string; region?: string }>()
const emit = defineEmits<{ 'update:show': [boolean]; created: [] }>()
const message = useMessage()
const message = useToast()
const submitting = ref(false)
const publicKey = ref('')
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { NInput, useMessage } from 'naive-ui'
import { NInput } from 'naive-ui'
import { computed, reactive, ref, watch } from 'vue'
import { createInstances } from '@/api/instances'
@@ -8,6 +8,7 @@ import FormField from '@/components/FormField.vue'
import FormModal from '@/components/FormModal.vue'
import InstanceSpecForm from '@/components/instance/InstanceSpecForm.vue'
import { defaultResourceName } from '@/composables/useFormat'
import { useToast } from '@/composables/useToast'
/** 租户 / 区间 / 区域直接使用父页面当前值,不在表单中出现 */
const props = defineProps<{
@@ -18,7 +19,7 @@ const props = defineProps<{
}>()
const emit = defineEmits<{ 'update:show': [boolean]; created: [] }>()
const message = useMessage()
const message = useToast()
const submitting = ref(false)
const specForm = ref<InstanceType<typeof InstanceSpecForm> | null>(null)
@@ -1,6 +1,4 @@
<script setup lang="ts">
import { useMessage } from 'naive-ui'
import AppInputNumber from '@/components/AppInputNumber.vue'
import { reactive, ref, watch } from 'vue'
@@ -8,6 +6,7 @@ import { updateBootVolume } from '@/api/bootVolumes'
import FormField from '@/components/FormField.vue'
import FormModal from '@/components/FormModal.vue'
import type { BootVolume } from '@/types/api'
import { useToast } from '@/composables/useToast'
const props = defineProps<{
show: boolean
@@ -17,7 +16,7 @@ const props = defineProps<{
}>()
const emit = defineEmits<{ 'update:show': [boolean]; updated: [] }>()
const message = useMessage()
const message = useToast()
const submitting = ref(false)
const form = reactive({ sizeInGBs: 50, vpusPerGB: 10 })
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { NSelect, useMessage } from 'naive-ui'
import { NSelect } from 'naive-ui'
import { computed, ref, watch } from 'vue'
import { listBootVolumes } from '@/api/bootVolumes'
@@ -7,6 +7,7 @@ import { replaceBootVolume } from '@/api/instances'
import FormField from '@/components/FormField.vue'
import FormModal from '@/components/FormModal.vue'
import { useAsync } from '@/composables/useAsync'
import { useToast } from '@/composables/useToast'
const props = defineProps<{
show: boolean
@@ -18,7 +19,7 @@ const props = defineProps<{
const emit = defineEmits<{ 'update:show': [boolean]; replaced: [] }>()
const message = useMessage()
const message = useToast()
const submitting = ref(false)
const bootVolumeId = ref<string | null>(null)
+3 -2
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { NSelect, useMessage } from 'naive-ui'
import { NSelect } from 'naive-ui'
import { computed, reactive, ref, watch } from 'vue'
import { listShapes, updateInstance } from '@/api/instances'
@@ -7,6 +7,7 @@ import AppInputNumber from '@/components/AppInputNumber.vue'
import FormField from '@/components/FormField.vue'
import FormModal from '@/components/FormModal.vue'
import { useAsync } from '@/composables/useAsync'
import { useToast } from '@/composables/useToast'
const props = defineProps<{
show: boolean
@@ -20,7 +21,7 @@ const props = defineProps<{
const emit = defineEmits<{ 'update:show': [boolean]; resized: [] }>()
const message = useMessage()
const message = useToast()
const submitting = ref(false)
const form = reactive({ shape: props.shape, ocpus: props.ocpus, memoryInGBs: props.memoryInGBs })
+5 -12
View File
@@ -2,11 +2,12 @@
import { FitAddon } from '@xterm/addon-fit'
import { Terminal } from '@xterm/xterm'
import '@xterm/xterm/css/xterm.css'
import { NSpin, useMessage } from 'naive-ui'
import { NSpin } from 'naive-ui'
import { nextTick, onBeforeUnmount, ref, watch } from 'vue'
import { consoleSessionWsUrl, createConsoleSession, deleteConsoleSession } from '@/api/instances'
import { useAuthStore } from '@/stores/auth'
import { useToast } from '@/composables/useToast'
const props = defineProps<{
show: boolean
@@ -14,12 +15,11 @@ const props = defineProps<{
instanceId: string
region?: string
instanceName?: string
rootPassword?: string
}>()
const emit = defineEmits<{ 'update:show': [boolean] }>()
const message = useMessage()
const message = useToast()
const auth = useAuthStore()
const termEl = ref<HTMLDivElement | null>(null)
@@ -153,12 +153,6 @@ function syncWinsize() {
term.focus()
}
async function copyRootPassword() {
await navigator.clipboard.writeText(props.rootPassword ?? '')
message.success('已复制 root 密码')
term?.focus()
}
function reconnect() {
teardown()
void open()
@@ -250,7 +244,6 @@ onBeforeUnmount(teardown)
</span>
<span v-if="phase === 'creating'" class="text-xs">准备连接中</span>
<div class="flex-1" />
<button v-if="rootPassword" class="ser-btn" @click="copyRootPassword">复制 root 密码</button>
<button class="ser-btn" :disabled="phase !== 'connected'" @click="pasteFromClipboard">
粘贴
</button>
@@ -299,8 +292,8 @@ onBeforeUnmount(teardown)
<template v-else-if="phase === 'closed'">
<div class="max-w-[80%] break-all text-center">{{ error || '连接已关闭' }}</div>
<div class="max-w-[80%] text-center text-xs leading-relaxed">
串口登录需实例本地账户密码SSH 公钥无效创建实例时若启用随机 root
密码可从顶栏复制无密码也可查看启动日志或经 GRUB 单用户模式救援
串口登录需实例本地账户密码SSH 公钥无效随机 root 密码可在实例详情
验证身份后查看无密码也可查看启动日志或经 GRUB 单用户模式救援
</div>
<button class="ser-btn !border !border-[#3a3835] !px-3 !py-1" @click="reconnect">
重新连接
+22 -7
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { NButton, NPopconfirm, NSpin, useMessage } from 'naive-ui'
import { NButton, NPopconfirm, NSpin } from 'naive-ui'
import { computed, ref } from 'vue'
@@ -10,6 +10,7 @@ import LifecycleBadge from '@/components/LifecycleBadge.vue'
import OcidText from '@/components/OcidText.vue'
import { useAsync } from '@/composables/useAsync'
import { ATTACHMENT_TRANSIENT_STATES, useTransientPoll } from '@/composables/useTransientPoll'
import { useToast } from '@/composables/useToast'
/** 网卡(VNIC)区块:每卡一主行 + IPv6 副行;IPv6 增删按卡操作。
* 删除复用实例级接口(后端按地址遍历全部网卡),添加走 per-VNIC 接口。 */
@@ -23,12 +24,18 @@ const props = defineProps<{
const emit = defineEmits<{ changed: [] }>()
const message = useMessage()
const message = useToast()
const vnics = useAsync(() => listVnics(props.cfgId, props.instanceId, props.region))
/** 附加已受理但 OCI 挂载列表有可见性延迟:限时轮询等新卡入列,入列后交由过渡态轮询接管 */
const expectAtLeast = ref(0)
let expectUntil = 0
useTransientPoll(
() => vnics.data.value,
(list) => !!list?.some((v) => ATTACHMENT_TRANSIENT_STATES.includes(v.lifecycleState)),
(list) =>
!!list?.some((v) => ATTACHMENT_TRANSIENT_STATES.includes(v.lifecycleState)) ||
((list?.length ?? 0) < expectAtLeast.value && Date.now() < expectUntil),
() => void vnics.run({ silent: true }),
)
@@ -43,6 +50,12 @@ function refresh() {
emit('changed')
}
function onAttached() {
expectAtLeast.value = (vnics.data.value ?? []).length + 1
expectUntil = Date.now() + 90_000
refresh()
}
async function doDetach(attachmentId: string) {
detaching.value = attachmentId
try {
@@ -173,7 +186,7 @@ defineExpose({ refresh: () => vnics.run() })
<td colspan="6" class="px-4.5 pt-0 pb-2.5">
<div class="flex flex-wrap items-center gap-1.5">
<span class="text-[10.5px] font-medium tracking-wider text-ink-3">IPV6</span>
<template v-if="v.vnicId">
<template v-if="v.vnicId && v.lifecycleState === 'ATTACHED'">
<span
v-for="addr in v.ipv6Addresses ?? []"
:key="addr"
@@ -203,7 +216,9 @@ defineExpose({ refresh: () => vnics.run() })
+ IPv6
</NButton>
</template>
<span v-else class="text-xs text-ink-3"> · 附加完成后可添加</span>
<span v-else class="text-xs text-ink-3">
{{ v.vnicId ? '网卡未在挂载状态,不可操作 IPv6' : '无 · 附加完成后可添加' }}
</span>
</div>
</td>
</tr>
@@ -220,7 +235,7 @@ defineExpose({ refresh: () => vnics.run() })
<FootNote>
附加须实例运行中且 shape 有空余 VNIC 配额 · 主网卡不可分离 · 每卡 IPv6
可多个要求所在子网已启用 IPv6· 次要网卡在 OS 内需自行配置 IPdhclient / netplan
可多个要求所在子网已启用 IPv6
</FootNote>
<AttachVnicModal
@@ -229,7 +244,7 @@ defineExpose({ refresh: () => vnics.run() })
:instance-id="instanceId"
:region="region"
:attached-count="(vnics.data.value ?? []).length"
@attached="refresh"
@attached="onAttached"
/>
</div>
</template>
+5 -4
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { NDataTable, NModal, NTooltip, useMessage, type DataTableColumns } from 'naive-ui'
import { NDataTable, NModal, NTooltip, type DataTableColumns } from 'naive-ui'
import { computed, h, onMounted, reactive, ref } from 'vue'
import { listAiCallLogs, listAiContentLogs } from '@/api/aigateway'
@@ -9,8 +9,9 @@ import StatusBadge from '@/components/StatusBadge.vue'
import { useAutoRefresh } from '@/composables/useAutoRefresh'
import { fmtTime } from '@/composables/useFormat'
import type { AiCallLog, AiContentLog } from '@/types/api'
import { useToast } from '@/composables/useToast'
const message = useMessage()
const message = useToast()
const rows = ref<AiCallLog[]>([])
const loading = ref(false)
@@ -68,7 +69,7 @@ function statusCell(row: AiCallLog) {
function tokensCell(row: AiCallLog) {
if (row.errMsg && !row.totalTokens) return h('span', { class: 'text-[13px] text-ink-3' }, '—')
const flow = row.stream ? ' · 流' : ''
return h('span', { class: 'mono text-[13px]' }, `${row.promptTokens} / ${row.completionTokens}${flow}`)
return h('span', { class: 'mono text-[13px] whitespace-nowrap' }, `${row.promptTokens} / ${row.completionTokens}${flow}`)
}
const columns: DataTableColumns<AiCallLog> = [
@@ -78,7 +79,7 @@ const columns: DataTableColumns<AiCallLog> = [
{ title: '模型', key: 'model', minWidth: 220, ellipsis: { tooltip: true }, render: (r) => h('span', { class: 'mono text-xs' }, r.model) },
{ title: '渠道', key: 'channelName', minWidth: 180, ellipsis: { tooltip: true }, render: (r) => h('span', { class: 'text-[13px]' }, r.channelName || '—') },
{ title: '状态', key: 'status', width: 80, render: statusCell },
{ title: 'Tokens(入/出)', key: 'tokens', width: 150, render: tokensCell },
{ title: 'Tokens(入/出)', key: 'tokens', width: 190, render: tokensCell },
{ title: '耗时', key: 'latencyMs', width: 80, render: (r) => h('span', { class: 'mono text-[13px]' }, fmtLatency(r.latencyMs)) },
{ title: '重试', key: 'retries', width: 60, render: (r) => h('span', { class: 'mono text-[13px]' }, String(r.retries)) },
]
+15 -12
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { NDataTable, NModal, NPopover, useMessage, type DataTableColumns } from 'naive-ui'
import { NDataTable, NModal, NPopover, type DataTableColumns } from 'naive-ui'
import { computed, h, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
@@ -18,8 +18,9 @@ import { useAsync } from '@/composables/useAsync'
import { useRegionAlias } from '@/composables/useRegionAlias'
import { useScopeStore } from '@/stores/scope'
import type { LogEvent, OciConfigSummary } from '@/types/api'
import { useToast } from '@/composables/useToast'
const message = useMessage()
const message = useToast()
const router = useRouter()
const scope = useScopeStore()
const { alias: regionAlias } = useRegionAlias()
@@ -219,16 +220,18 @@ useAutoRefresh(() => load(true))
OCI 侧推送的关键审计事件(Connector Hub Notifications 面板 webhook)
</div>
</div>
<TenantPicker
v-model:value="cfgFilter"
size="small"
clearable
placeholder="全部租户"
class="w-52"
:configs="scope.configs.data ?? []"
:loading="scope.configs.loading"
@update:value="onFilter"
/>
<div class="flex flex-wrap items-center gap-2">
<TenantPicker
v-model:value="cfgFilter"
size="small"
clearable
placeholder="全部租户"
class="w-52"
:configs="scope.configs.data ?? []"
:loading="scope.configs.loading"
@update:value="onFilter"
/>
</div>
</div>
<NDataTable
remote
+3 -3
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { NDataTable, NInput, NModal, useMessage, type DataTableColumns } from 'naive-ui'
import { NDataTable, NInput, NModal, type DataTableColumns } from 'naive-ui'
import { computed, h, reactive, ref } from 'vue'
import { listSystemLogs } from '@/api/settings'
@@ -12,8 +12,9 @@ import { actionLabel } from '@/composables/useActionLabel'
import { useAutoRefresh } from '@/composables/useAutoRefresh'
import { fmtTime } from '@/composables/useFormat'
import type { SystemLog } from '@/types/api'
import { useToast } from '@/composables/useToast'
const message = useMessage()
const message = useToast()
const rows = ref<SystemLog[]>([])
const loading = ref(false)
@@ -184,7 +185,6 @@ useAutoRefresh(() => load(true))
:loading="loading"
:pagination="pagination"
:scroll-x="880"
:max-height="480"
:row-key="(r: SystemLog) => r.id"
:row-props="rowProps"
/>
+3 -2
View File
@@ -1,11 +1,12 @@
<script setup lang="ts">
import { NCheckbox, NInput, useMessage } from 'naive-ui'
import { NCheckbox, NInput } from 'naive-ui'
import { computed, reactive, ref, watch } from 'vue'
import { createVcn } from '@/api/networks'
import FormField from '@/components/FormField.vue'
import FormModal from '@/components/FormModal.vue'
import { defaultResourceName } from '@/composables/useFormat'
import { useToast } from '@/composables/useToast'
/** 租户 / 区间 / 区域直接使用父页面当前值,不在表单中出现 */
const props = defineProps<{
@@ -16,7 +17,7 @@ const props = defineProps<{
}>()
const emit = defineEmits<{ 'update:show': [boolean]; created: [] }>()
const message = useMessage()
const message = useToast()
const submitting = ref(false)
const blank = {
+39 -11
View File
@@ -7,7 +7,6 @@ import {
NPopconfirm,
NRadioButton,
NRadioGroup,
useMessage,
type DataTableColumns,
} from 'naive-ui'
import { computed, h, onUnmounted, ref } from 'vue'
@@ -23,10 +22,13 @@ import {
import AppInputNumber from '@/components/AppInputNumber.vue'
import FootNote from '@/components/FootNote.vue'
import FormField from '@/components/FormField.vue'
import ProxyTenantsModal from '@/components/proxy/ProxyTenantsModal.vue'
import StatusBadge from '@/components/StatusBadge.vue'
import { useAsync } from '@/composables/useAsync'
import type { ProxyImportResult, ProxyInfo } from '@/types/api'
import { useToast } from '@/composables/useToast'
const message = useMessage()
const message = useToast()
const proxies = useAsync(listProxies)
const rows = computed(() => proxies.data.value?.items ?? [])
@@ -120,6 +122,15 @@ async function remove(row: ProxyInfo) {
}
}
// ---- 关联租户管理 ----
const showTenants = ref(false)
const tenantsFor = ref<ProxyInfo | null>(null)
function openTenants(row: ProxyInfo) {
tenantsFor.value = row
showTenants.value = true
}
// ---- 手动重测出口地区 ----
const probingIds = ref(new Set<number>())
@@ -179,6 +190,13 @@ function renderGeo(row: ProxyInfo) {
return h('span', { class: 'text-[13px]' }, row.city ? `${row.country}·${row.city}` : row.country)
}
/** 状态单元格:与地区探测同源 —— 探测经该代理链路发起,失败即代理不可用 */
function renderStatus(row: ProxyInfo) {
if (!row.geoAt) return h(StatusBadge, { kind: 'check', label: '检测中' })
const ok = !!row.country
return h(StatusBadge, { kind: ok ? 'run' : 'term', label: ok ? '正常' : '异常' })
}
// 新增 / 批量导入入口由页面标题行触发(ProxyListView),这里暴露打开方法
defineExpose({ openCreate, openImport })
@@ -204,16 +222,19 @@ const columns: DataTableColumns<ProxyInfo> = [
render: (row) => h('span', { class: 'mono text-[12.5px] text-ink-2' }, `${row.host}:${row.port}`),
},
{ title: '地区', key: 'geo', minWidth: 120, render: renderGeo },
{ title: '状态', key: 'status', width: 88, render: renderStatus },
{
title: '认证',
key: 'username',
width: 110,
render: (row) =>
h(
'span',
{ class: 'text-[12.5px] text-ink-2' },
row.username ? `${row.username}${row.passwordSet ? ' / ●●●' : ''}` : row.passwordSet ? '●●●' : '无',
),
width: 76,
render: (row) => {
const has = !!row.username || row.passwordSet
// 悬停「是」可见用户名(无用户名则提示仅密码)
const title = has ? (row.username ? `用户名 ${row.username}` : '仅密码认证') : undefined
return h('span', { title }, [
h(StatusBadge, { kind: has ? 'run' : 'check', label: has ? '是' : '否', dot: false }),
])
},
},
{
title: '关联租户',
@@ -225,7 +246,7 @@ const columns: DataTableColumns<ProxyInfo> = [
{
title: '操作',
key: 'actions',
width: 168,
width: 236,
render: (row) =>
h('div', { class: 'flex items-center gap-1' }, [
h(
@@ -233,6 +254,7 @@ const columns: DataTableColumns<ProxyInfo> = [
{ size: 'tiny', quaternary: true, loading: probingIds.value.has(row.id), onClick: () => probe(row) },
() => '重测',
),
h(NButton, { size: 'tiny', quaternary: true, onClick: () => openTenants(row) }, () => '关联租户'),
h(NButton, { size: 'tiny', quaternary: true, onClick: () => openEdit(row) }, () => '编辑'),
h(
NPopconfirm,
@@ -258,9 +280,15 @@ const columns: DataTableColumns<ProxyInfo> = [
:row-key="(r: ProxyInfo) => r.id"
/>
<FootNote>
支持 SOCKS5 / HTTP / HTTPS;密码 AES 加密存储、不回显明文;地区为经代理实测的出口位置(ip-api.com),创建后自动检测;被租户关联的代理不可删除,请先解除关联
支持 SOCKS5 / HTTP / HTTPS;密码 AES 加密存储、不回显明文;地区与状态为经代理实测的出口探测结果(ip-api.com),创建后自动检测,探测失败即视为异常,可点「重测」复查;被租户关联的代理不可删除,请先解除关联
</FootNote>
<ProxyTenantsModal
v-model:show="showTenants"
:proxy="tenantsFor"
@saved="void proxies.run({ silent: true })"
/>
<NModal
v-model:show="showForm"
preset="card"
+130
View File
@@ -0,0 +1,130 @@
<script setup lang="ts">
import { NButton, NModal } from 'naive-ui'
import { computed, ref, watch } from 'vue'
import { listConfigs } from '@/api/configs'
import { setProxyTenants } from '@/api/proxies'
import FormField from '@/components/FormField.vue'
import TenantPicker from '@/components/TenantPicker.vue'
import { useAsync } from '@/composables/useAsync'
import type { ProxyInfo } from '@/types/api'
import { useToast } from '@/composables/useToast'
/** 代理侧关联租户管理:打开时回显当前关联名单,多选增删,保存即设置全集
* (选中即关联,含从其他代理改挂;取消选中即解除)。 */
const props = defineProps<{ show: boolean; proxy: ProxyInfo | null }>()
const emit = defineEmits<{ 'update:show': [boolean]; saved: [] }>()
const message = useToast()
const configs = useAsync(listConfigs, false)
const selected = ref<number[]>([])
const saving = ref(false)
watch(
() => props.show,
async (v) => {
if (!v || !props.proxy) return
selected.value = []
await configs.run()
const pid = props.proxy.id
selected.value = (configs.data.value ?? []).filter((c) => c.proxyId === pid).map((c) => c.id)
},
)
const all = computed(() => configs.data.value ?? [])
/** 当前选中名单(打开时即已关联名单),chips 展示并支持点 × 移除 */
const picked = computed(() => all.value.filter((c) => selected.value.includes(c.id)))
/** 选中但已挂其他代理的租户:保存即改挂,给出警示 */
const rebinding = computed(() =>
picked.value.filter((c) => c.proxyId !== null && c.proxyId !== props.proxy?.id),
)
function removeOne(id: number) {
selected.value = selected.value.filter((v) => v !== id)
}
async function save() {
if (!props.proxy) return
saving.value = true
try {
const res = await setProxyTenants(props.proxy.id, selected.value)
message.success(`已更新关联,当前 ${res.usedBy} 个租户经此代理出站`)
emit('update:show', false)
emit('saved')
} catch (e) {
message.error(e instanceof Error ? e.message : '保存失败')
} finally {
saving.value = false
}
}
</script>
<template>
<NModal
:show="show"
preset="card"
:title="`关联租户 · ${proxy?.name ?? ''}`"
:style="{ width: '480px', maxWidth: 'calc(100vw - 24px)' }"
@update:show="emit('update:show', $event)"
>
<FormField label="关联租户" hint="选中即关联,取消选中即解除;关联后租户全部 SDK 请求经此代理出站">
<TenantPicker
v-model:values="selected"
multiple
:configs="all"
:loading="configs.loading.value"
placeholder="选择要关联的租户"
/>
</FormField>
<div v-if="picked.length" class="mb-3 flex flex-wrap gap-1.5">
<span
v-for="c in picked"
:key="c.id"
class="inline-flex items-center gap-1 rounded-full border border-line bg-wash px-2.5 py-0.5 text-[11.5px] font-medium text-ink-2"
>
{{ c.alias }}
<button
type="button"
class="cursor-pointer text-ink-3 hover:text-err"
:aria-label="`移除 ${c.alias}`"
@click="removeOne(c.id)"
>
</button>
</span>
</div>
<div v-else class="mb-3 text-xs text-ink-3">暂无租户关联此代理</div>
<div
v-if="rebinding.length"
class="mb-3 flex items-start gap-2 rounded-lg border border-warn/30 bg-warn/10 px-3 py-2.5 text-xs leading-relaxed"
>
<svg
class="mt-0.5 h-[14px] w-[14px] flex-none text-warn"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z" />
<path d="M12 9v4M12 17h.01" />
</svg>
<span>
<template v-for="(c, i) in rebinding" :key="c.id">
<template v-if="i > 0"></template>
<b>{{ c.alias }}</b>
<span v-if="c.proxyName" class="text-ink-3">现挂 {{ c.proxyName }}</span>
</template>
已关联其他代理,保存后将改挂到本代理
</span>
</div>
<div class="mt-1 flex items-center gap-2">
<NButton size="small" type="primary" :loading="saving" @click="save">保存</NButton>
<NButton size="small" quaternary @click="emit('update:show', false)">取消</NButton>
</div>
</NModal>
</template>
+134 -2
View File
@@ -1,12 +1,17 @@
<script setup lang="ts">
import { NButton, NSpin } from 'naive-ui'
import { onMounted, ref } from 'vue'
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { getAbout } from '@/api/settings'
import AppLogo from '@/components/AppLogo.vue'
import { fmtBytes, fmtTime } from '@/composables/useFormat'
import { useParticles } from '@/composables/useParticles'
import { useAppStore } from '@/stores/app'
import type { AboutInfo } from '@/types/api'
// 点击 logo 在星爆 / 波浪封印两款间切换(全局生效并记忆)
const app = useAppStore()
// GitHub 仓库地址;空串时按钮禁用并显示占位
const REPO_URL = 'https://github.com/wangdefaa/oci-portal'
@@ -16,15 +21,56 @@ const loading = ref(true)
const pcanvas = ref<HTMLCanvasElement | null>(null)
useParticles(pcanvas, { count: 26 })
// 运行时长随查看自增:记录拉取时刻,30s 粒度刷新本地流逝时间
const loadedAt = ref(0)
const nowTick = ref(0)
let upTimer: ReturnType<typeof setInterval> | null = null
onMounted(async () => {
try {
info.value = await getAbout()
loadedAt.value = nowTick.value = Date.now()
upTimer = setInterval(() => (nowTick.value = Date.now()), 30_000)
} catch {
/* 构建信息加载失败不阻塞页面,chips 显示占位 */
} finally {
loading.value = false
}
})
onUnmounted(() => {
if (upTimer) clearInterval(upTimer)
})
/** 运行时长分段:天(为 0 时省略)/ 小时 / 分 */
const uptimeParts = computed(() => {
const base = info.value?.uptimeSeconds
if (base === undefined) return []
const sec = base + Math.max(0, (nowTick.value - loadedAt.value) / 1000)
const d = Math.floor(sec / 86400)
const h = Math.floor((sec % 86400) / 3600)
const parts: { v: number; u: string }[] = []
if (d > 0) parts.push({ v: d, u: '天' })
if (d > 0 || h > 0) parts.push({ v: h, u: '小时' })
parts.push({ v: Math.floor((sec % 3600) / 60), u: '分' })
return parts
})
const DB_LABEL: Record<string, string> = { sqlite: 'SQLite', mysql: 'MySQL', postgres: 'PostgreSQL' }
/** 四格资源指标:值与单位拆开渲染,sub 为口径说明 */
const statCells = computed(() => {
const r = info.value?.resources
if (!r) return []
const heap = fmtBytes(r.memHeapBytes).split(' ')
const store = r.dbBytes >= 0 ? fmtBytes(r.dbBytes).split(' ') : ['—', '']
const db = DB_LABEL[r.dbEngine] ?? r.dbEngine
return [
{ label: 'CPU 均值', value: String(r.cpuAvgPercent), unit: '%', sub: `${r.numCpu} 核 · 占单核百分比` },
{ label: '内存(堆)', value: heap[0], unit: heap[1], sub: `向系统申请 ${fmtBytes(r.memSysBytes)}` },
{ label: '存储占用', value: store[0], unit: store[1], sub: r.dbBytes >= 0 ? `${db} 含 WAL 日志` : `${db} 外部数据库,不可度量` },
{ label: 'Goroutines', value: String(r.goroutines), unit: '', sub: '运行时并发任务数' },
]
})
function fmtBuild(t: string) {
return t ? t.replace('T', ' ').replace('Z', ' UTC') : '—'
@@ -45,7 +91,15 @@ function openRepo() {
<canvas ref="pcanvas" class="absolute inset-0 h-full w-full"></canvas>
</div>
<div class="relative">
<span class="floaty mx-auto block w-fit"><AppLogo :size="84" /></span>
<button
type="button"
class="floaty logo-btn mx-auto block w-fit"
title="切换 logo 款式"
aria-label="切换 logo 款式"
@click="app.toggleLogoVariant()"
>
<AppLogo :size="84" />
</button>
<div class="mt-5 font-serif text-[34px] leading-tight font-semibold">OCI Portal</div>
<div class="mt-1 text-[13px] text-ink-3">OCI 账号批量管理面板 · 自托管</div>
<div v-if="loading" class="mt-6 flex justify-center"><NSpin size="small" /></div>
@@ -57,6 +111,40 @@ function openRepo() {
</div>
</div>
<!-- 运行状态:运行时长随查看自增,资源指标为进程自启动累计口径 -->
<div v-if="info?.resources" class="panel">
<div
class="flex items-center justify-between gap-3 border-b border-line-soft px-5 py-3.5 max-md:flex-col max-md:items-start max-md:gap-1"
>
<div class="flex items-center gap-2">
<span class="live-dot"></span>
<span class="text-[13px] font-semibold">运行状态</span>
</div>
<span class="text-xs text-ink-3">
{{ fmtTime(info.startedAt) }} 启动 · 指标为进程自启动累计口径
</span>
</div>
<div class="px-5 pt-[22px] pb-5">
<div class="text-xs font-medium text-ink-2">运行时间</div>
<div class="mt-1.5 text-[38px] leading-[1.1] font-semibold tracking-[-0.6px]">
<template v-for="p in uptimeParts" :key="p.u"
>{{ p.v }}<span class="uptime-unit">{{ p.u }}</span></template
>
</div>
</div>
<div class="mx-5 h-px bg-line-soft"></div>
<div class="grid grid-cols-4 max-md:grid-cols-2">
<div v-for="c in statCells" :key="c.label" class="statcell flex flex-col gap-[5px] px-5 pt-4 pb-[18px]">
<div class="text-xs font-medium text-ink-2">{{ c.label }}</div>
<div class="text-[26px] leading-[1.15] font-semibold tracking-[-0.3px]">
<span>{{ c.value }}</span
><span v-if="c.unit" class="ml-0.5 text-sm font-medium text-ink-2">{{ c.unit }}</span>
</div>
<div class="text-[11.5px] text-ink-3">{{ c.sub }}</div>
</div>
</div>
</div>
<!-- GitHub 仓库 -->
<div class="panel flex items-center gap-3.5 px-5 py-4">
<span class="flex h-10 w-10 flex-none items-center justify-center rounded-[9px] bg-wash">
@@ -76,6 +164,35 @@ function openRepo() {
</template>
<style scoped>
.live-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-ok);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-ok) 18%, transparent);
}
.uptime-unit {
margin: 0 8px 0 3px;
font-size: 16px;
font-weight: 500;
letter-spacing: 0;
color: var(--color-ink-2);
}
.uptime-unit:last-of-type {
margin-right: 0;
}
/* 四格分栏:桌面竖线分隔;窄屏 2 列换行时第二行改上边框接续 */
.statcell + .statcell {
border-left: 1px solid var(--color-line-soft);
}
@media (width < 768px) {
.statcell:nth-child(3) {
border-left: none;
}
.statcell:nth-child(n + 3) {
border-top: 1px solid var(--color-line-soft);
}
}
.chip {
display: inline-flex;
align-items: center;
@@ -98,6 +215,21 @@ function openRepo() {
border-radius: 50%;
border: 1.5px dashed color-mix(in srgb, var(--color-line) 70%, var(--color-accent) 30%);
}
/* logo 即款式开关:去按钮底色,悬停轻微放大提示可点 */
.logo-btn {
cursor: pointer;
border: none;
background: none;
padding: 0;
line-height: 0;
transition: scale 0.25s ease;
}
.logo-btn:hover {
scale: 1.06;
}
.logo-btn:active {
scale: 0.96;
}
@media (prefers-reduced-motion: no-preference) {
.spin {
animation: about-sp 52s linear infinite;
+58 -12
View File
@@ -1,11 +1,12 @@
<script setup lang="ts">
import { NButton, NInput, NModal, NPopconfirm, NQrCode, NSpin, NSwitch, useMessage } from 'naive-ui'
import { NButton, NInput, NModal, NPopconfirm, NQrCode, NSpin, NSwitch } from 'naive-ui'
import { computed, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import {
activateTotp,
disableTotp,
revokeSessions,
getCredentials,
getOAuthSettings,
getOauthAuthorizeUrl,
@@ -24,12 +25,17 @@ import { useAsync } from '@/composables/useAsync'
import { useAppStore } from '@/stores/app'
import { useAuthStore } from '@/stores/auth'
import { fmtTime } from '@/composables/useFormat'
import type { TotpSetup, UpdateOAuthRequest } from '@/types/api'
import type { SessionRefresh, TotpSetup, UpdateOAuthRequest } from '@/types/api'
import { useToast } from '@/composables/useToast'
const message = useMessage()
const message = useToast()
const router = useRouter()
const auth = useAuthStore()
const app = useAppStore()
/** 敏感操作响应携带新会话时无感替换;204 降级(undefined)交由 401 流程重登 */
function applySession(r: SessionRefresh) {
if (r?.token) auth.setSession(r.token, r.expiresAt)
}
const providerLabels: Record<string, string> = { github: 'GitHub', oidc: 'OIDC 单点登录' }
@@ -69,7 +75,7 @@ async function confirmTotpActivate() {
}
totpBusy.value = true
try {
await activateTotp(totpActivateCode.value)
applySession(await activateTotp(totpActivateCode.value))
message.success('两步验证已启用,下次登录需输入动态验证码')
showTotpSetup.value = false
totpPending.value = null
@@ -86,7 +92,7 @@ async function confirmTotpDisable() {
totpBusy.value = true
try {
// 6 位纯数字按验证码提交,其余按密码
await disableTotp(/^\d{6}$/.test(input) ? { code: input } : { password: input })
applySession(await disableTotp(/^\d{6}$/.test(input) ? { code: input } : { password: input }))
message.success('两步验证已停用')
totpDisableInput.value = ''
showTotpDisable.value = false
@@ -151,15 +157,22 @@ async function saveCredentials() {
const { nameChanged, pwChanged } = credChanges.value
savingCred.value = true
try {
await updateCredentials({
const refresh = await updateCredentials({
...(nameChanged ? { newUsername: credForm.newUsername.trim() } : {}),
...(pwChanged ? { newPassword: credForm.newPassword } : {}),
currentPassword: credForm.currentPassword,
})
message.success('登录凭据已更新,请使用新凭据重新登录')
showCredModal.value = false
auth.logout()
void router.push('/login')
if (refresh?.token) {
// 版本递增使其余会话全部失效;当前会话经新 token 无感延续
applySession(refresh)
message.success('登录凭据已更新,其他已登录会话已全部失效')
void creds.run({ silent: true })
} else {
message.success('登录凭据已更新,请使用新凭据重新登录')
auth.logout()
void router.push('/login')
}
} catch (e) {
message.error(e instanceof Error ? e.message : '保存失败')
} finally {
@@ -171,7 +184,7 @@ async function saveCredentials() {
async function togglePasswordLogin(disabled: boolean) {
togglingPwLogin.value = true
try {
await updatePasswordLogin(disabled)
applySession(await updatePasswordLogin(disabled))
message.success(disabled ? '已禁用密码登录,仅外部身份可登录' : '已恢复密码登录')
} catch (e) {
message.error(e instanceof Error ? e.message : '操作失败')
@@ -191,6 +204,11 @@ const bindableProviders = computed(() => {
return out
})
/** 已绑定的 provider 集合;绑定入口按钮据此禁用,解绑后自动恢复 */
const boundProviders = computed(
() => new Set((identities.data.value?.items ?? []).map((it) => it.provider)),
)
async function bindProvider(provider: string) {
binding.value = provider
try {
@@ -204,7 +222,7 @@ async function bindProvider(provider: string) {
async function removeIdentity(id: number) {
try {
await unbindIdentity(id)
applySession(await unbindIdentity(id))
message.success('已解绑;该身份后续无法登录面板')
void identities.run()
} catch (e) {
@@ -212,6 +230,21 @@ async function removeIdentity(id: number) {
}
}
// ---- 撤销全部会话:令牌版本递增,除本会话(换新)外全部立即失效 ----
const revoking = ref(false)
async function revokeAllSessions() {
revoking.value = true
try {
applySession(await revokeSessions())
message.success('已撤销全部会话;其他设备须重新登录')
} catch (e) {
message.error(e instanceof Error ? e.message : '操作失败')
} finally {
revoking.value = false
}
}
// ---- 登录方式配置(OAuth provider):表格 + 弹窗增改;禁用仅隐藏登录入口,删除清全部配置 ----
type ProviderType = 'github' | 'oidc'
@@ -419,6 +452,18 @@ async function deleteProvider(p: ProviderType) {
<NButton size="tiny" quaternary @click="openCredModal">修改</NButton>
</div>
<div class="flex items-center justify-between gap-3 border-b border-line-soft py-2.5">
<div class="min-w-0">
<div class="text-[13px] font-medium">撤销全部会话</div>
<div class="mt-0.5 text-xs text-ink-3">
怀疑令牌泄露时使用;其他设备与旧令牌立即失效,本会话自动换新
</div>
</div>
<NButton size="tiny" type="error" quaternary :loading="revoking" @click="revokeAllSessions">
撤销
</NButton>
</div>
<div class="flex items-center justify-between gap-3 border-b border-line-soft py-2.5">
<div class="min-w-0">
<div class="text-[13px] font-medium">禁用密码登录</div>
@@ -467,9 +512,10 @@ async function deleteProvider(p: ProviderType) {
:key="p"
size="small"
:loading="binding === p"
:disabled="boundProviders.has(p)"
@click="bindProvider(p)"
>
绑定 {{ displayNameOf(p) }}
{{ boundProviders.has(p) ? '已绑定' : '绑定' }} {{ displayNameOf(p) }}
</NButton>
<span class="text-xs text-ink-3">将跳转到对应平台授权</span>
</div>
+264
View File
@@ -0,0 +1,264 @@
<script setup lang="ts">
import { NButton, NInputNumber, NSpin, NSwitch } from 'naive-ui'
import { reactive, ref, watch } from 'vue'
import { getAiSettings, listAiBlacklist, removeAiBlacklist, updateAiSettings } from '@/api/aigateway'
import BlacklistAddModal from '@/components/settings/BlacklistAddModal.vue'
import { useAsync } from '@/composables/useAsync'
import { fmtTime } from '@/composables/useFormat'
import { useToast } from '@/composables/useToast'
import type { AiSettings } from '@/types/api'
const toast = useToast()
const settings = useAsync(getAiSettings)
const blacklist = useAsync(listAiBlacklist)
/** 本地表单镜像:开关即时提交,数字输入失焦/回车提交 */
const form = reactive<AiSettings>({
filterDeprecated: false,
streamGuardEnabled: true,
streamGuardKB: 60,
grokWebSearch: true,
grokXSearch: true,
upstreamWaitSeconds: 300,
})
watch(
() => settings.data.value,
(v) => {
if (v) Object.assign(form, v)
},
{ immediate: true },
)
const saving = ref(false)
/** 全量 PUT;失败回滚到服务端最新值 */
async function save() {
saving.value = true
try {
Object.assign(form, await updateAiSettings({ ...form }))
toast.success('已保存,即时生效')
} catch (e) {
toast.error(e instanceof Error ? e.message : '保存失败')
void settings.run({ silent: true })
} finally {
saving.value = false
}
}
function setField<K extends keyof AiSettings>(key: K, value: AiSettings[K]) {
form[key] = value
void save()
}
/** 阈值失焦/回车提交;NInputNumber 已按 min/max 收敛 */
function commitGuardKB(v: number | null) {
if (v == null || v === form.streamGuardKB) return
setField('streamGuardKB', v)
}
/** 上游无响应预算失焦/回车提交 */
function commitUpstreamWait(v: number | null) {
if (v == null || v === form.upstreamWaitSeconds) return
setField('upstreamWaitSeconds', v)
}
const removing = ref(0)
async function doRemove(id: number, name: string) {
removing.value = id
try {
await removeAiBlacklist(id)
toast.success(`已移出黑名单:${name},重新同步渠道后恢复`)
void blacklist.run({ silent: true })
} catch (e) {
toast.error(e instanceof Error ? e.message : '移出失败')
} finally {
removing.value = 0
}
}
const showAdd = ref(false)
function onBlacklistChanged() {
void blacklist.run({ silent: true })
}
</script>
<template>
<div v-if="settings.loading.value && !settings.data.value" class="panel flex max-w-[880px] items-center justify-center py-20">
<NSpin size="small" />
</div>
<div v-else class="flex max-w-[880px] flex-col gap-4">
<!-- Responses 直通防护 -->
<div class="panel">
<div class="border-b border-line-soft px-4.5 py-3.5">
<div class="text-sm font-semibold">Responses 直通</div>
</div>
<div class="px-4.5">
<div class="flex items-center justify-between gap-3 border-b border-line-soft py-3.5">
<div class="min-w-0">
<div class="text-[13px] font-medium">流式保险丝:instructions + tools 阈值</div>
<div class="mt-0.5 text-xs text-ink-3">
系统提示与工具定义合计超过阈值的流式请求,预防性改走非流式上游并合成
SSE:丢增量输出,保会话不中断
</div>
</div>
<div class="flex flex-none items-center gap-3">
<NInputNumber
:value="form.streamGuardKB"
:min="1"
:max="1024"
:show-button="false"
:disabled="!form.streamGuardEnabled"
size="small"
class="w-24"
:update-value-on-input="false"
@update:value="commitGuardKB"
>
<template #suffix><span class="text-xs text-ink-3">KB</span></template>
</NInputNumber>
<NSwitch
:value="form.streamGuardEnabled"
size="small"
:loading="saving"
@update:value="(v: boolean) => setField('streamGuardEnabled', v)"
/>
</div>
</div>
<div class="flex items-center justify-between gap-3 py-3.5">
<div class="min-w-0">
<div class="text-[13px] font-medium">上游无响应预算</div>
<div class="mt-0.5 text-xs text-ink-3">
非流式为单次尝试总超时,流式为等待响应头上限,响应头到达后不限制流时长;
multi-agent / 搜索类模型单次调用可达 3 分钟,建议 300
</div>
</div>
<div class="flex flex-none items-center gap-3">
<NInputNumber
:value="form.upstreamWaitSeconds"
:min="30"
:max="900"
:show-button="false"
size="small"
class="w-24"
:update-value-on-input="false"
@update:value="commitUpstreamWait"
>
<template #suffix><span class="text-xs text-ink-3"></span></template>
</NInputNumber>
<!-- 隐形开关与上一行等宽占位,保证两行输入框网格对齐 -->
<NSwitch class="invisible" size="small" aria-hidden="true" />
</div>
</div>
</div>
<div class="border-t border-line-soft bg-wash px-4.5 py-2.5 text-xs leading-relaxed text-ink-3">
修改即时生效,无需重启 · 仅作用于 Responses 直通面;Chat / Messages 已有断流自动重做兜底
</div>
</div>
<!-- grok 服务端搜索工具 -->
<div class="panel">
<div class="border-b border-line-soft px-4.5 py-3.5">
<div class="text-sm font-semibold">grok 服务端搜索工具</div>
<div class="mt-0.5 text-xs text-ink-3">
仅对 <span class="mono">xai.</span> 前缀模型的对话请求生效;请求 tools
已包含同名工具时保持原样,不覆盖参数
</div>
</div>
<div class="px-4.5">
<div class="flex items-center justify-between gap-3 border-b border-line-soft py-3">
<div class="text-[13px] font-medium">默认开启 web_search</div>
<NSwitch
:value="form.grokWebSearch"
size="small"
:loading="saving"
@update:value="(v: boolean) => setField('grokWebSearch', v)"
/>
</div>
<div class="flex items-center justify-between gap-3 py-3">
<div class="text-[13px] font-medium">默认开启 x_search</div>
<NSwitch
:value="form.grokXSearch"
size="small"
:loading="saving"
@update:value="(v: boolean) => setField('grokXSearch', v)"
/>
</div>
</div>
</div>
<!-- 模型治理( AI 网关页迁入) -->
<div class="panel">
<div class="border-b border-line-soft px-4.5 py-3.5">
<div class="text-sm font-semibold">模型治理</div>
</div>
<div class="px-4.5 pb-4">
<div class="flex items-center justify-between gap-3 border-b border-line-soft py-3.5">
<div class="min-w-0">
<div class="text-[13px] font-medium">过滤弃用模型</div>
<div class="mt-0.5 text-xs text-ink-3">
开启后,已宣布弃用(即使未退役)的模型从模型列表与路由中排除;关闭恢复展示
</div>
</div>
<NSwitch
:value="form.filterDeprecated"
size="small"
:loading="saving"
@update:value="(v: boolean) => setField('filterDeprecated', v)"
/>
</div>
<div class="flex items-center justify-between gap-3 pt-3.5 pb-1">
<div class="min-w-0">
<div class="text-[13px] font-medium">模型黑名单</div>
<div class="mt-0.5 text-xs text-ink-3">
命中的模型从模型列表与路由排除,重新同步渠道后移出才恢复
</div>
</div>
<NButton size="tiny" quaternary type="primary" @click="showAdd = true"> 添加模型</NButton>
</div>
<table class="mt-1.5 w-full border-collapse">
<thead>
<tr class="border-y border-line-soft text-left text-xs font-medium text-ink-3">
<th class="w-[52%] px-3 py-2">模型</th>
<th class="px-3 py-2">加入时间</th>
<th class="w-22 px-3 py-2">操作</th>
</tr>
</thead>
<tbody>
<tr
v-for="b in blacklist.data.value ?? []"
:key="b.id"
class="border-b border-line-soft last:border-b-0"
>
<td class="px-3 py-2"><span class="mono text-[13px]">{{ b.name }}</span></td>
<td class="px-3 py-2 text-xs text-ink-3">{{ fmtTime(b.createdAt) }}</td>
<td class="px-3 py-2">
<NButton
size="tiny"
quaternary
type="error"
:loading="removing === b.id"
@click="doRemove(b.id, b.name)"
>
移出
</NButton>
</td>
</tr>
<tr v-if="!(blacklist.data.value ?? []).length">
<td colspan="3" class="px-3 py-6 text-center text-xs text-ink-3">
黑名单为空;点右上 添加模型从聚合模型目录选择
</td>
</tr>
</tbody>
</table>
</div>
</div>
<BlacklistAddModal
v-model:show="showAdd"
:blacklisted="(blacklist.data.value ?? []).map((b) => b.name)"
@changed="onBlacklistChanged"
/>
</div>
</template>
@@ -0,0 +1,137 @@
<script setup lang="ts">
import { NInput, NModal } from 'naive-ui'
import { computed, ref, watch } from 'vue'
import { addAiBlacklist, listAiModelCatalog } from '@/api/aigateway'
import { useToast } from '@/composables/useToast'
import type { AiCatalogModel } from '@/types/api'
const props = defineProps<{ show: boolean; blacklisted: string[] }>()
const emit = defineEmits<{ 'update:show': [boolean]; changed: [] }>()
const toast = useToast()
const rows = ref<AiCatalogModel[]>([])
const loading = ref(false)
const adding = ref('')
const filter = ref('')
const CAP_ORDER = ['CHAT', 'EMBEDDING', 'RERANK', 'TTS']
const CAP_LABEL: Record<string, string> = { CHAT: '对话', EMBEDDING: '向量', RERANK: '重排', TTS: '语音' }
const bannedSet = computed(() => new Set(props.blacklisted))
/** 按能力分组 + 关键字过滤,与渠道「模型列表」弹窗同构 */
const groups = computed(() => {
const kw = filter.value.trim().toLowerCase()
const buckets = new Map<string, AiCatalogModel[]>()
for (const r of rows.value) {
if (kw && !r.name.toLowerCase().includes(kw)) continue
buckets.set(r.capability, [...(buckets.get(r.capability) ?? []), r])
}
const order = [...CAP_ORDER, ...[...buckets.keys()].filter((c) => !CAP_ORDER.includes(c))]
return order
.filter((cap) => buckets.has(cap))
.map((cap) => ({ cap, label: CAP_LABEL[cap] ?? cap, items: buckets.get(cap)! }))
})
const shownCount = computed(() => groups.value.reduce((n, g) => n + g.items.length, 0))
watch(
() => props.show,
(show) => {
if (show) {
filter.value = ''
void reload()
}
},
)
async function reload() {
loading.value = true
try {
rows.value = await listAiModelCatalog()
} catch (e) {
toast.error(e instanceof Error ? e.message : '加载失败')
} finally {
loading.value = false
}
}
/** 弹窗即添加场景,意图明确不做二次确认;可在黑名单中移出恢复 */
async function doBan(name: string) {
if (adding.value) return
adding.value = name
try {
await addAiBlacklist(name)
toast.success(`已拉黑:${name}`)
emit('changed')
} catch (e) {
toast.error(e instanceof Error ? e.message : '拉黑失败')
} finally {
adding.value = ''
}
}
</script>
<template>
<NModal
:show="show"
preset="card"
:style="{ width: '640px', maxWidth: 'calc(100vw - 24px)' }"
@update:show="emit('update:show', $event)"
>
<template #header>
<div>
<div class="text-[15px] leading-tight font-semibold">添加到模型黑名单</div>
<div class="mt-1 text-xs font-normal text-ink-3">聚合全部渠道的可用模型</div>
</div>
</template>
<div class="flex items-center gap-2 pb-2">
<NInput v-model:value="filter" size="small" placeholder="过滤模型名…" clearable class="min-w-0 flex-1" />
<span class="flex-none text-xs whitespace-nowrap text-ink-3">
{{ filter ? `${shownCount} / ${rows.length}` : `${rows.length} 个模型` }}
</span>
</div>
<div class="-mx-2 max-h-[58vh] overflow-y-auto">
<div v-if="loading" class="py-10 text-center text-xs text-ink-3">加载中</div>
<template v-else>
<template v-for="g in groups" :key="g.cap">
<div class="px-3 pt-3 pb-1 text-[11.5px] font-semibold tracking-wide text-ink-3">
{{ g.label }} <span class="font-normal">· {{ g.items.length }}</span>
</div>
<div
v-for="r in g.items"
:key="r.name"
class="group flex items-center gap-2 rounded-lg px-3 py-[5px] hover:bg-row-hover"
>
<span class="mono min-w-0 truncate text-[13px]" :class="bannedSet.has(r.name) ? 'text-ink-3/60' : ''">
{{ r.name }}
</span>
<span class="min-w-0 flex-1" />
<span v-if="bannedSet.has(r.name)" class="flex-none px-1.5 text-xs text-ink-3/50">已拉黑</span>
<button
v-else
type="button"
class="flex-none cursor-pointer rounded-[5px] px-1.5 py-0.5 text-xs text-ink-3/70 group-hover:text-err hover:bg-err/10"
:disabled="!!adding"
@click="doBan(r.name)"
>
{{ adding === r.name ? '拉黑中…' : '拉黑' }}
</button>
</div>
</template>
<div v-if="!shownCount" class="py-10 text-center text-xs text-ink-3">
{{ rows.length ? '无匹配模型' : '暂无模型缓存,先在 AI 网关同步渠道模型' }}
</div>
</template>
</div>
<div class="mt-1 border-t border-line-soft pt-2.5 text-[11.5px] leading-relaxed text-ink-3">
<span class="font-medium text-ink-2">拉黑</span>:全局生效,从全部渠道剔除 ·
移出后重新同步渠道恢复 · 已拉黑的模型置灰
</div>
</NModal>
</template>
@@ -0,0 +1,282 @@
<script setup lang="ts">
import { NButton, NCollapseTransition, NInput, NSwitch } from 'naive-ui'
import { computed, reactive, ref, watch } from 'vue'
import { testNotifyChannel, updateNotifyChannel } from '@/api/settings'
import AppInputNumber from '@/components/AppInputNumber.vue'
import FormField from '@/components/FormField.vue'
import { useToast } from '@/composables/useToast'
import type { NotifyChannelItem, NotifyChannelType } from '@/types/api'
const props = defineProps<{ item: NotifyChannelItem }>()
const emit = defineEmits<{ saved: [NotifyChannelItem[]] }>()
const message = useToast()
/** 渠道展示元数据:图标字符 + 名称 + 一句话说明 + 密文字段文案 */
const CHANNEL_META: Record<
NotifyChannelType,
{ icon: string; name: string; hint: string; secretLabel?: string; secretHint?: string }
> = {
webhook: {
icon: 'W',
name: 'Webhook',
hint: '通用 HTTP POST,可对接飞书 / 钉钉 / Slack / 企业微信机器人',
},
ntfy: {
icon: 'N',
name: 'ntfy',
hint: '开源推送服务,官方 ntfy.sh 或自建服务端',
secretLabel: 'Access Token',
secretHint: '服务端开启鉴权时填写;留空表示沿用已保存值',
},
bark: {
icon: 'B',
name: 'Bark',
hint: 'iOS 推送,官方 api.day.app 或自建服务端',
secretLabel: 'Device Key',
secretHint: 'Bark App 内的设备 key;留空表示沿用已保存值',
},
smtp: {
icon: 'M',
name: 'SMTP 邮件',
hint: '465 端口走隐式 TLS,其余端口自动 STARTTLS',
secretLabel: '密码',
secretHint: 'SMTP 授权码或密码;留空表示沿用已保存值',
},
}
/** Webhook body 模板预设(占位符 {{title}} / {{text}} 发送时替换并做 JSON 转义) */
const WEBHOOK_PRESETS = [
{ label: 'Slack', tpl: '{"text": "{{title}}\\n{{text}}"}' },
{ label: '飞书', tpl: '{"msg_type": "text", "content": {"text": "{{title}}\\n{{text}}"}}' },
{ label: '钉钉', tpl: '{"msgtype": "text", "text": {"content": "{{title}}\\n{{text}}"}}' },
{ label: '企业微信', tpl: '{"msgtype": "text", "text": {"content": "{{title}}\\n{{text}}"}}' },
]
const meta = computed(() => CHANNEL_META[props.item.type])
const expanded = ref(false)
const saving = ref(false)
const testing = ref(false)
const form = reactive({
enabled: false,
url: '',
bodyTemplate: '',
server: '',
topic: '',
host: '',
port: 587 as number | null,
username: '',
from: '',
to: '',
secret: '',
})
// 服务端数据到达/保存后回填;密文字段不回明文,输入框留空表示沿用
watch(
() => props.item,
(it) => {
form.enabled = it.enabled
form.url = it.url ?? ''
form.bodyTemplate = it.bodyTemplate ?? ''
form.server = it.server ?? ''
form.topic = it.topic ?? ''
form.host = it.host ?? ''
form.port = it.port || 587
form.username = it.username ?? ''
form.from = it.from ?? ''
form.to = it.to ?? ''
form.secret = ''
},
{ immediate: true },
)
const secretPlaceholder = computed(() =>
props.item.secretSet
? `已配置${props.item.secretTail ? `(尾号 ${props.item.secretTail}` : ''},留空沿用`
: '',
)
async function save() {
saving.value = true
try {
const secret = form.secret.trim()
const items = await updateNotifyChannel(props.item.type, {
enabled: form.enabled,
url: form.url.trim(),
bodyTemplate: form.bodyTemplate,
server: form.server.trim(),
topic: form.topic.trim(),
host: form.host.trim(),
port: form.port ?? 0,
username: form.username.trim(),
from: form.from.trim(),
to: form.to.trim(),
// 留空表示沿用已保存的密文字段
...(secret ? { secret } : {}),
})
message.success(`${meta.value.name} 配置已保存`)
form.secret = ''
emit('saved', items)
} catch (e) {
message.error(e instanceof Error ? e.message : '保存失败')
} finally {
saving.value = false
}
}
async function sendTest() {
testing.value = true
try {
await testNotifyChannel(props.item.type)
message.success(`测试消息已发送,请在 ${meta.value.name} 侧查收`)
} catch (e) {
message.error(e instanceof Error ? e.message : '发送失败')
} finally {
testing.value = false
}
}
</script>
<template>
<div class="border-b border-line-soft last:border-b-0">
<button
type="button"
class="flex w-full cursor-pointer items-center gap-3 px-4.5 py-3.5 text-left"
@click="expanded = !expanded"
>
<span
class="flex h-8.5 w-8.5 flex-none items-center justify-center rounded-full bg-wash text-[15px] font-bold text-ink-2"
>
{{ meta.icon }}
</span>
<div class="min-w-0 flex-1">
<div class="flex flex-wrap items-center gap-2">
<span class="text-[13px] font-medium">{{ meta.name }}</span>
<span
class="inline-flex items-center gap-1.5 rounded-full bg-wash px-2 py-px text-[11.5px] text-ink-2"
>
<span
class="h-1.5 w-1.5 rounded-full"
:class="item.enabled ? 'bg-ok' : 'bg-ink-3/50'"
/>
{{ item.enabled ? '已启用' : '未启用' }}
</span>
</div>
<div class="mt-0.5 text-xs text-ink-3">{{ meta.hint }}</div>
</div>
<span class="text-xs text-ink-3">{{ expanded ? '收起' : '配置' }}</span>
</button>
<NCollapseTransition :show="expanded">
<div class="px-4.5 pb-3.5">
<div class="mb-3 flex items-center justify-between rounded-lg bg-wash px-3 py-2">
<span class="text-[12.5px]">启用该渠道</span>
<NSwitch v-model:value="form.enabled" size="small" />
</div>
<!-- Webhook -->
<template v-if="item.type === 'webhook'">
<FormField label="Webhook URL" hint="机器人/集成的完整回调地址,含鉴权参数">
<NInput v-model:value="form.url" placeholder="https://open.feishu.cn/open-apis/bot/v2/hook/…" />
</FormField>
<FormField
label="Body 模板"
hint="发送时 {{title}} / {{text}} 按 JSON 字符串转义后替换;留空按 Slack 形状发送"
>
<div class="mb-1.5 flex flex-wrap gap-1.5">
<NButton
v-for="p in WEBHOOK_PRESETS"
:key="p.label"
size="tiny"
quaternary
type="primary"
@click="form.bodyTemplate = p.tpl"
>
{{ p.label }}
</NButton>
</div>
<NInput
v-model:value="form.bodyTemplate"
type="textarea"
:autosize="{ minRows: 2, maxRows: 5 }"
class="mono"
:placeholder="WEBHOOK_PRESETS[0].tpl"
/>
</FormField>
</template>
<!-- ntfy -->
<template v-else-if="item.type === 'ntfy'">
<div class="grid grid-cols-2 gap-3 max-md:grid-cols-1">
<FormField label="服务端" hint="留空用官方 ntfy.sh">
<NInput v-model:value="form.server" placeholder="https://ntfy.sh" />
</FormField>
<FormField label="Topic" hint="订阅的主题名">
<NInput v-model:value="form.topic" placeholder="oci-portal" />
</FormField>
</div>
<FormField :label="meta.secretLabel!" :hint="meta.secretHint">
<NInput
v-model:value="form.secret"
type="password"
show-password-on="click"
:placeholder="secretPlaceholder || 'tk_…(可选)'"
/>
</FormField>
</template>
<!-- Bark -->
<template v-else-if="item.type === 'bark'">
<FormField label="服务端" hint="留空用官方 api.day.app">
<NInput v-model:value="form.server" placeholder="https://api.day.app" />
</FormField>
<FormField :label="meta.secretLabel!" :hint="meta.secretHint">
<NInput
v-model:value="form.secret"
type="password"
show-password-on="click"
:placeholder="secretPlaceholder || 'Bark App 内复制'"
/>
</FormField>
</template>
<!-- SMTP -->
<template v-else>
<div class="grid grid-cols-2 gap-3 max-md:grid-cols-1">
<FormField label="主机">
<NInput v-model:value="form.host" placeholder="smtp.example.com" />
</FormField>
<FormField label="端口" hint="465 隐式 TLS,587 STARTTLS">
<AppInputNumber v-model:value="form.port" :min="1" :max="65535" class="!w-full" />
</FormField>
<FormField label="用户名" hint="留空表示免认证">
<NInput v-model:value="form.username" placeholder="user@example.com" />
</FormField>
<FormField :label="meta.secretLabel!" :hint="meta.secretHint">
<NInput
v-model:value="form.secret"
type="password"
show-password-on="click"
:placeholder="secretPlaceholder || 'SMTP 授权码'"
/>
</FormField>
<FormField label="发件人">
<NInput v-model:value="form.from" placeholder="noreply@example.com" />
</FormField>
<FormField label="收件人">
<NInput v-model:value="form.to" placeholder="me@example.com" />
</FormField>
</div>
</template>
<div class="mt-1 flex items-center gap-2">
<NButton size="small" type="primary" :loading="saving" @click="save">保存</NButton>
<NButton size="small" :loading="testing" @click="sendTest">发送测试消息</NButton>
<span class="text-xs text-ink-3">测试使用已保存的配置,修改后请先保存</span>
</div>
</div>
</NCollapseTransition>
</div>
</template>
@@ -1,9 +1,10 @@
<script setup lang="ts">
import { NButton, NInput, NModal, useMessage } from 'naive-ui'
import { NButton, NInput, NModal } from 'naive-ui'
import { computed, ref, watch } from 'vue'
import { testNotifyTemplate, updateNotifyTemplate } from '@/api/settings'
import type { NotifyTemplateItem } from '@/types/api'
import { useToast } from '@/composables/useToast'
const props = defineProps<{
show: boolean
@@ -18,7 +19,7 @@ const emit = defineEmits<{
saved: [kind: string, template: string]
}>()
const message = useMessage()
const message = useToast()
const draft = ref('')
const saving = ref(false)
const testing = ref(false)
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { NSelect, useMessage } from 'naive-ui'
import { NSelect } from 'naive-ui'
import { computed, ref, watch } from 'vue'
import { attachBootVolume, listInstances } from '@/api/instances'
@@ -8,6 +8,7 @@ import FormModal from '@/components/FormModal.vue'
import { shortAd } from '@/composables/useFormat'
import { useAsync } from '@/composables/useAsync'
import type { BootVolume } from '@/types/api'
import { useToast } from '@/composables/useToast'
const props = defineProps<{
show: boolean
@@ -17,7 +18,7 @@ const props = defineProps<{
}>()
const emit = defineEmits<{ 'update:show': [boolean]; attached: [] }>()
const message = useMessage()
const message = useToast()
const submitting = ref(false)
const instanceId = ref<string | null>(null)
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { NInput, useMessage } from 'naive-ui'
import { NInput } from 'naive-ui'
import AppInputNumber from '@/components/AppInputNumber.vue'
import { computed, reactive, ref, watch } from 'vue'
@@ -8,6 +8,7 @@ import { updateBootVolume } from '@/api/bootVolumes'
import FormField from '@/components/FormField.vue'
import FormModal from '@/components/FormModal.vue'
import type { BootVolume, UpdateBootVolumeRequest } from '@/types/api'
import { useToast } from '@/composables/useToast'
const props = defineProps<{
show: boolean
@@ -17,7 +18,7 @@ const props = defineProps<{
}>()
const emit = defineEmits<{ 'update:show': [boolean]; updated: [] }>()
const message = useMessage()
const message = useToast()
const submitting = ref(false)
const form = reactive({ displayName: '', sizeInGBs: 50, vpusPerGB: 10 })
+3 -2
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { NInput, NSelect, useMessage } from 'naive-ui'
import { NInput, NSelect } from 'naive-ui'
import { computed, nextTick, reactive, ref, watch } from 'vue'
import { listCachedCompartments, listCachedRegions, listConfigs } from '@/api/configs'
@@ -15,6 +15,7 @@ import TenantPicker from '@/components/TenantPicker.vue'
import { defaultResourceName } from '@/composables/useFormat'
import { useAsync } from '@/composables/useAsync'
import type { Task, TaskType } from '@/types/api'
import { useToast } from '@/composables/useToast'
/** task 传入即为编辑模式:回填全部字段,任务类型锁定不可切换 */
const props = defineProps<{ show: boolean; task?: Task | null }>()
@@ -29,7 +30,7 @@ const TYPE_CARDS: { value: TaskType; title: string; desc: string }[] = [
{ value: 'snatch', title: '抢机', desc: '容量不足时反复尝试创建,抢满自停' },
]
const message = useMessage()
const message = useToast()
const submitting = ref(false)
const specForm = ref<InstanceType<typeof InstanceSpecForm> | null>(null)
+120 -50
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { NButton, NDataTable, NModal, NSelect, useMessage, type DataTableColumns } from 'naive-ui'
import { NButton, NDataTable, NInput, NInputGroup, NInputGroupLabel, NModal, type DataTableColumns } from 'naive-ui'
import { computed, h, onMounted, reactive, ref, watch } from 'vue'
import { getAuditEventDetail, listAuditEvents } from '@/api/tenant'
@@ -11,17 +11,54 @@ import StatusBadge from '@/components/StatusBadge.vue'
import { eventLabel } from '@/composables/useEventLabel'
import { fmtTime } from '@/composables/useFormat'
import type { AuditEvent } from '@/types/api'
import { useToast } from '@/composables/useToast'
const props = defineProps<{ cfgId: number }>()
const message = useMessage()
const message = useToast()
const hours = ref(24)
const hourOptions = [
{ label: '近 1 小时', value: 1 },
{ label: '近 6 小时', value: 6 },
{ label: '近 24 小时', value: 24 },
{ label: '近 72 小时', value: 72 },
]
const loading = ref(false)
const loadingMore = ref(false)
const error = ref('')
const rows = ref<AuditEvent[]>([])
// 服务端分窗回溯游标:空且 exhausted 表示已到 365 天保留期尽头
const cursor = ref('')
const exhausted = ref(false)
// 服务端全文检索关键字;变化即重置信息流
const q = ref('')
// 已完整回溯到的时刻(比它更新的时段已扫完),检索命中稀疏时给用户方位感
const scannedThrough = ref('')
// 信息流代次:刷新/换关键字自增,用于丢弃仍在途的过期响应
let gen = 0
let qTimer: ReturnType<typeof setTimeout> | undefined
// 当前信息流对应的关键字;回车/防抖只在关键字实际变化时才重查,避免重复请求
let loadedQ: string | null = null
// 连续自动补批计数:搜索命中稀疏时封顶,不能无人值守扫完整个保留期
let autoFills = 0
const maxAutoFills = 2
// 关键字防抖:停止输入 500ms 后按新关键字重查;回车/清空即时生效
watch(q, () => {
clearTimeout(qTimer)
if (q.value.trim() === loadedQ) return
qTimer = setTimeout(() => void load(), 500)
})
/** 回车/清空的即时提交:关键字未变则不发起重复搜索 */
function submitSearch() {
clearTimeout(qTimer)
if (q.value.trim() !== loadedQ) void load()
}
const pageCount = computed(() => Math.max(1, Math.ceil(rows.value.length / pagination.pageSize)))
const hasMore = computed(() => cursor.value !== '' && !exhausted.value)
/** 回溯进度 = min(游标窗上界, 已加载最旧事件):窗内续翻时游标上界还停在窗口右缘,
* 直接展示会显示成当前时刻;两者取更早才反映真实扫描位置 */
const scanProgress = computed(() => {
const oldest = rows.value.length ? (rows.value[rows.value.length - 1].eventTime ?? '') : ''
if (!scannedThrough.value || !oldest) return scannedThrough.value || oldest
return scannedThrough.value < oldest ? scannedThrough.value : oldest
})
/** 受控分页:字面量对象会在重渲染时被重建导致页大小切换失效 */
const pagination = reactive({
@@ -29,8 +66,31 @@ const pagination = reactive({
pageSize: 20,
showSizePicker: true,
pageSizes: [20, 50, 100],
/** 状态行:加载中/尽头给文案;停驻且还有更早数据时给「加载更早」按钮,
* 自动补批封顶后由用户显式接力,不会无人值守扫完整个保留期 */
prefix: () => {
const parts = [`已加载 ${rows.value.length}`]
if (scanProgress.value && !exhausted.value) parts.push(`已回溯至 ${fmtTime(scanProgress.value)}`)
if (exhausted.value) parts.push('已到 365 天保留期尽头')
const text = parts.join(' · ')
if (loadingMore.value) return `${text} · 正在加载更早…`
if (!hasMore.value) return text
return h('span', { class: 'inline-flex items-center gap-1.5' }, [
`${text} ·`,
h(
NButton,
{ size: 'tiny', quaternary: true, type: 'primary', onClick: () => { autoFills = 0; void fetchBatch() } },
{ default: () => '加载更早' },
),
])
},
onUpdatePage: (p: number) => {
pagination.page = p
// 懒加载触发点:翻到已加载数据的最后一页即向后端续取一批(用户动作,重置自动补批额度)
if (p >= pageCount.value) {
autoFills = 0
void fetchBatch()
}
},
onUpdatePageSize: (ps: number) => {
pagination.pageSize = ps
@@ -38,55 +98,62 @@ const pagination = reactive({
},
})
const loading = ref(false)
const loadingMore = ref(false)
const error = ref('')
const rows = ref<AuditEvent[]>([])
const truncated = ref(false)
const nextPage = ref('')
// 本次查询的绝对时间窗:续查游标绑定查询参数,必须原样带回
const win = ref<{ start: string; end: string } | null>(null)
/** 重置信息流:回到最新一批(刷新按钮与关键字变化共用) */
async function load() {
clearTimeout(qTimer)
const g = ++gen
loadedQ = q.value.trim()
autoFills = 0
loading.value = true
error.value = ''
rows.value = []
cursor.value = ''
exhausted.value = false
scannedThrough.value = ''
pagination.page = 1
try {
const r = await listAuditEvents(props.cfgId, { hours: hours.value })
rows.value = r.items
truncated.value = r.truncated
nextPage.value = r.nextPage ?? ''
win.value = { start: r.start, end: r.end }
pagination.page = 1
} catch (e) {
error.value = e instanceof Error ? e.message : '查询失败'
await fetchBatch(true)
} finally {
loading.value = false
if (g === gen) loading.value = false
}
}
/** 截断续查:同一绝对窗带游标断点续翻,追加去重后按时间重排 */
async function loadMore() {
if (!win.value || !nextPage.value || loadingMore.value) return
/** 向更早方向续取一批(~200 条):追加去重后按时间重排;
* 末页不满且还有更早数据时自动补一批,避免首屏残页;
* 代次不符的在途响应直接丢弃,防止旧关键字结果混入新信息流 */
async function fetchBatch(first = false) {
if (!first && (loadingMore.value || !hasMore.value)) return
const g = gen
loadingMore.value = true
try {
const r = await listAuditEvents(props.cfgId, { ...win.value, page: nextPage.value })
const r = await listAuditEvents(props.cfgId, { cursor: cursor.value || undefined, q: q.value.trim() || undefined })
if (g !== gen) return
const seen = new Set(rows.value.map((e) => e.eventId))
rows.value = [...rows.value, ...r.items.filter((e) => !seen.has(e.eventId))].sort((a, b) =>
(b.eventTime ?? '').localeCompare(a.eventTime ?? ''),
)
truncated.value = r.truncated
nextPage.value = r.nextPage ?? ''
cursor.value = r.cursor ?? ''
exhausted.value = r.exhausted
scannedThrough.value = r.scannedThrough ?? ''
} catch (e) {
// 追加失败不清空已有列表;游标过期时提示重新查询
message.error(e instanceof Error ? e.message : '继续加载失败,请刷新重新查询')
if (g !== gen) return
if (first) {
error.value = e instanceof Error ? e.message : '查询失败'
} else {
// 追加失败不清空已有列表;游标过期时提示刷新重来
message.error(e instanceof Error ? e.message : '继续加载失败,请刷新重新查询')
}
} finally {
loadingMore.value = false
if (g === gen) loadingMore.value = false
}
// 首屏残页自动补批:封顶 maxAutoFills 次,命中稀疏时停驻等用户点「加载更早」
if (g === gen && hasMore.value && rows.value.length < pagination.pageSize && autoFills < maxAutoFills) {
autoFills++
void fetchBatch()
}
}
onMounted(() => void load())
// 切换时间窗自动重查并回到第一页
watch(hours, () => void load())
// ---- 行点击详情:原始 JSON 懒取(命中服务端缓存秒开,过期走小窗重查) ----
const detail = ref<AuditEvent | null>(null)
@@ -202,16 +269,19 @@ const columns: DataTableColumns<AuditEvent> = [
<div class="panel">
<div class="flex flex-wrap items-center gap-2.5 border-b border-line-soft px-4.5 py-3">
<div class="text-sm font-semibold">审计日志</div>
<template v-if="truncated">
<StatusBadge kind="warn" label="结果已截断" />
<NButton v-if="nextPage" size="tiny" :loading="loadingMore" @click="loadMore">
继续加载更早
</NButton>
</template>
<StatusBadge v-if="exhausted" kind="run" label="已加载全部保留期数据" :dot="false" />
<div class="flex-1" />
<div class="w-32 max-md:w-full">
<NSelect v-model:value="hours" size="small" :options="hourOptions" />
</div>
<NInputGroup class="!w-76 max-lg:!w-full">
<NInputGroupLabel size="small">搜索</NInputGroupLabel>
<NInput
v-model:value="q"
size="small"
clearable
placeholder="事件 / 资源 / 操作者,支持 *"
@keydown.enter="submitSearch()"
@clear="submitSearch()"
/>
</NInputGroup>
<NButton size="small" :loading="loading" @click="load()">刷新</NButton>
</div>
@@ -228,14 +298,14 @@ const columns: DataTableColumns<AuditEvent> = [
:loading="loading"
:pagination="pagination"
:scroll-x="820"
:max-height="480"
:row-props="rowProps"
/>
<FootNote>
OCI Audit 免费且默认开启事件保留 365 无需在云端做任何配置 ·
实时查询不入库事件通常延迟数分钟可见 ·
已默认过滤遥测噪声SummarizeMetricsData与内网地址发起的服务互调 ·
单次最多翻 10 截断时点继续加载更早断点续查 · 点击行查看完整详情
从最新事件起每批约 200 翻到末页自动向更早加载空档期自动扩窗回溯 ·
搜索匹配事件 / 资源 / 操作者等可见字段不区分大小写支持 * 通配命中较少时自动补两批后停驻加载更早继续回溯 · 点击行查看完整详情
</FootNote>
<NModal v-model:show="showDetail" preset="card" closable :style="{ width: '720px', maxWidth: 'calc(100vw - 24px)' }">
@@ -261,7 +331,7 @@ const columns: DataTableColumns<AuditEvent> = [
v-if="detailRaw"
:value="detailRaw"
title="原始 JSON"
meta="来自 Audit SDK"
meta="来自 OCI 审计日志"
max-height="36vh"
wide
/>
+7 -6
View File
@@ -1,16 +1,17 @@
<script setup lang="ts">
import { NCheckbox, NInput, NSelect, NSwitch, useMessage } from 'naive-ui'
import { NCheckbox, NInput, NSelect, NSwitch } from 'naive-ui'
import { computed, reactive, ref, watch } from 'vue'
import { createIdp, getIdentitySetting, type CreateIdpBody } from '@/api/tenant'
import FilePicker from '@/components/FilePicker.vue'
import FormField from '@/components/FormField.vue'
import FormModal from '@/components/FormModal.vue'
import { useToast } from '@/composables/useToast'
const props = defineProps<{ show: boolean; cfgId: number }>()
const props = defineProps<{ show: boolean; cfgId: number; domainId?: string }>()
const emit = defineEmits<{ 'update:show': [boolean]; created: [] }>()
const message = useMessage()
const message = useToast()
const submitting = ref(false)
// 「用户需要提供主电子邮件地址」开启时 JIT 必须映射邮箱
const primaryEmailRequired = ref(false)
@@ -32,7 +33,7 @@ const userAttrOptions = [
]
// 默认值与控制台一致:名称 ID 格式「无」、NameID 映射用户名、
// JIT 开启建用户不更新、分配 Administrators
// JIT 开启建用户不更新、分配租户管理员
const blank = {
name: '',
metadata: '',
@@ -103,7 +104,7 @@ function buildBody(): CreateIdpBody {
async function submit() {
submitting.value = true
try {
const created = await createIdp(props.cfgId, buildBody())
const created = await createIdp(props.cfgId, buildBody(), props.domainId)
message.success(`IdP「${created.name}」已创建(禁用态),激活后显示到登录页`)
emit('update:show', false)
emit('created')
@@ -199,7 +200,7 @@ async function submit() {
<NCheckbox v-model:checked="form.jitCreate">首次联邦登录时自动创建用户</NCheckbox>
<NCheckbox v-model:checked="form.jitUpdate">每次登录时按断言更新既有用户</NCheckbox>
<NCheckbox v-model:checked="form.jitAssignAdminGroup">
JIT 用户加入 Administrators
JIT 用户加入租户管理员
</NCheckbox>
<NCheckbox
v-model:checked="form.jitMapEmail"
+12 -11
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { NButton, NDataTable, NPopconfirm, NSwitch, useDialog, useMessage, type DataTableColumns } from 'naive-ui'
import { NButton, NDataTable, NPopconfirm, NSwitch, useDialog, type DataTableColumns } from 'naive-ui'
import { h, ref } from 'vue'
import {
@@ -16,13 +16,14 @@ import StatusBadge from '@/components/StatusBadge.vue'
import IdpFormModal from '@/components/tenant/IdpFormModal.vue'
import { useAsync } from '@/composables/useAsync'
import type { IdentityProvider, SignOnRule } from '@/types/api'
import { useToast } from '@/composables/useToast'
const props = defineProps<{ cfgId: number }>()
const props = defineProps<{ cfgId: number; domainId?: string }>()
const message = useMessage()
const message = useToast()
const dialog = useDialog()
const idps = useAsync(() => listIdps(props.cfgId))
const rules = useAsync(() => listSignOnRules(props.cfgId))
const idps = useAsync(() => listIdps(props.cfgId, props.domainId))
const rules = useAsync(() => listSignOnRules(props.cfgId, props.domainId))
const showCreate = ref(false)
async function act(fn: () => Promise<unknown>, ok: string) {
@@ -74,7 +75,7 @@ const idpColumns: DataTableColumns<IdentityProvider> = [
size: 'small',
value: row.enabled,
onUpdateValue: (v: boolean) =>
act(() => activateIdp(props.cfgId, row.id, v), v ? '已激活并显示到登录页' : '已停用'),
act(() => activateIdp(props.cfgId, row.id, v, props.domainId), v ? '已激活并显示到登录页' : '已停用'),
}),
h(
NButton,
@@ -123,7 +124,7 @@ const ruleColumns: DataTableColumns<SignOnRule> = [
NPopconfirm,
{
onPositiveClick: () =>
act(() => deleteSignOnExemption(props.cfgId, row.id), '已删除免 MFA 规则并恢复优先级'),
act(() => deleteSignOnExemption(props.cfgId, row.id, props.domainId), '已删除免 MFA 规则并恢复优先级'),
},
{
trigger: () =>
@@ -136,7 +137,7 @@ const ruleColumns: DataTableColumns<SignOnRule> = [
async function doDownloadMetadata() {
try {
await downloadSamlMetadata(props.cfgId)
await downloadSamlMetadata(props.cfgId, props.domainId)
message.success('SAML 元数据已下载')
} catch (e) {
message.error(e instanceof Error ? e.message : '下载失败')
@@ -154,7 +155,7 @@ function confirmDeleteIdp(row: IdentityProvider) {
positiveText: '确认删除',
negativeText: '取消',
onPositiveClick: () =>
act(() => deleteIdp(props.cfgId, row.id), `已删除 IdP「${row.name}」及其关联规则`),
act(() => deleteIdp(props.cfgId, row.id, props.domainId), `已删除 IdP「${row.name}」及其关联规则`),
})
}
@@ -165,7 +166,7 @@ function addExemption() {
return
}
void act(
() => createSignOnExemption(props.cfgId, enabled.id),
() => createSignOnExemption(props.cfgId, enabled.id, props.domainId),
`已为 ${enabled.name} 创建免 MFA 规则并置顶`,
)
}
@@ -211,6 +212,6 @@ function addExemption() {
</FootNote>
</div>
<IdpFormModal v-model:show="showCreate" :cfg-id="cfgId" @created="idps.run()" />
<IdpFormModal v-model:show="showCreate" :cfg-id="cfgId" :domain-id="domainId" @created="idps.run()" />
</div>
</template>
+10 -8
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { NButton, NDynamicTags, NPopconfirm, NSpin, NSwitch, useMessage } from 'naive-ui'
import { NButton, NDynamicTags, NPopconfirm, NSpin, NSwitch } from 'naive-ui'
import { computed, ref, watch } from 'vue'
import {
@@ -22,14 +22,15 @@ import StatusBadge from '@/components/StatusBadge.vue'
import PolicyEditModal from '@/components/tenant/PolicyEditModal.vue'
import { useAsync } from '@/composables/useAsync'
import type { PasswordPolicy } from '@/types/api'
import { useToast } from '@/composables/useToast'
const props = defineProps<{ cfgId: number }>()
const props = defineProps<{ cfgId: number; domainId?: string }>()
const message = useMessage()
const message = useToast()
const policies = useAsync(() => listPasswordPolicies(props.cfgId))
const recipients = useAsync(() => getNotificationRecipients(props.cfgId))
const identity = useAsync(() => getIdentitySetting(props.cfgId))
const policies = useAsync(() => listPasswordPolicies(props.cfgId, props.domainId))
const recipients = useAsync(() => getNotificationRecipients(props.cfgId, props.domainId))
const identity = useAsync(() => getIdentitySetting(props.cfgId, props.domainId))
const webhook = useAsync(() => getLogWebhook(props.cfgId))
const relay = useAsync(() => getLogRelay(props.cfgId))
const savingIdentity = ref(false)
@@ -114,7 +115,7 @@ watch(
async function saveRecipients() {
saving.value = true
try {
await updateNotificationRecipients(props.cfgId, emails.value)
await updateNotificationRecipients(props.cfgId, emails.value, props.domainId)
message.success(emails.value.length ? '通知收件人已保存' : '已关闭 test mode,恢复默认发送')
void recipients.run()
} catch (e) {
@@ -127,7 +128,7 @@ async function saveRecipients() {
async function toggleEmailRequired(v: boolean) {
savingIdentity.value = true
try {
await updateIdentitySetting(props.cfgId, v)
await updateIdentitySetting(props.cfgId, v, props.domainId)
message.success(v ? '已开启:添加用户 / JIT 预配必须提供邮箱' : '已关闭:邮箱变为可选')
void identity.run()
} catch (e) {
@@ -402,6 +403,7 @@ function policyDesc(p: PasswordPolicy): string {
<PolicyEditModal
v-model:show="showPolicyEdit"
:cfg-id="cfgId"
:domain-id="domainId"
:policy="editingPolicy"
@updated="policies.run()"
/>
+5 -4
View File
@@ -1,19 +1,20 @@
<script setup lang="ts">
import { NSwitch, useMessage } from 'naive-ui'
import { NSwitch } from 'naive-ui'
import { reactive, ref, watch } from 'vue'
import { updatePasswordPolicy } from '@/api/tenant'
import FormModal from '@/components/FormModal.vue'
import type { PasswordPolicy } from '@/types/api'
import { useToast } from '@/composables/useToast'
const props = defineProps<{ show: boolean; cfgId: number; policy: PasswordPolicy | null }>()
const props = defineProps<{ show: boolean; cfgId: number; domainId?: string; policy: PasswordPolicy | null }>()
const emit = defineEmits<{ 'update:show': [boolean]; updated: [] }>()
// 关闭开关时写回的控制台默认值
const DEFAULT_EXPIRES_DAYS = 120
const DEFAULT_HISTORY_COUNT = 4
const message = useMessage()
const message = useToast()
const submitting = ref(false)
const form = reactive({ neverExpires: true, allowReuse: true })
@@ -45,7 +46,7 @@ async function submit() {
}
submitting.value = true
try {
await updatePasswordPolicy(props.cfgId, props.policy.id, body)
await updatePasswordPolicy(props.cfgId, props.policy.id, body, props.domainId)
message.success('密码策略已更新')
emit('update:show', false)
emit('updated')
-1
View File
@@ -222,7 +222,6 @@ const columns = computed(() => (withAvail.value ? [...baseColumns, ...availColum
:loading="limits.loading.value"
:pagination="pagination"
:scroll-x="withAvail ? 660 : 380"
:max-height="440"
:row-key="(r: LimitItem) => r.name + (r.availabilityDomain ?? '')"
/>
<FootNote>
@@ -1,11 +1,12 @@
<script setup lang="ts">
import { NCheckbox, NSelect, useMessage } from 'naive-ui'
import { NCheckbox, NSelect } from 'naive-ui'
import { computed, ref, watch } from 'vue'
import { listRegions, subscribeRegion } from '@/api/configs'
import FormField from '@/components/FormField.vue'
import FormModal from '@/components/FormModal.vue'
import { useAsync } from '@/composables/useAsync'
import { useToast } from '@/composables/useToast'
const props = defineProps<{
show: boolean
@@ -16,7 +17,7 @@ const props = defineProps<{
}>()
const emit = defineEmits<{ 'update:show': [boolean]; subscribed: [] }>()
const message = useMessage()
const message = useToast()
const submitting = ref(false)
const regionKey = ref<string | null>(null)
const acknowledged = ref(false)
+21 -16
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { NCheckbox, NInput, useMessage } from 'naive-ui'
import { NCheckbox, NInput } from 'naive-ui'
import { computed, reactive, ref, watch } from 'vue'
import {
@@ -12,12 +12,13 @@ import {
import FormField from '@/components/FormField.vue'
import FormModal from '@/components/FormModal.vue'
import type { IamUser, IamUserDetail } from '@/types/api'
import { useToast } from '@/composables/useToast'
// user 非空即编辑模式:打开时拉取域档案预填充,提交只发送与原值不同的字段
const props = defineProps<{ show: boolean; cfgId: number; user?: IamUser | null }>()
const props = defineProps<{ show: boolean; cfgId: number; domainId?: string; user?: IamUser | null }>()
const emit = defineEmits<{ 'update:show': [boolean]; created: [] }>()
const message = useMessage()
const message = useToast()
const submitting = ref(false)
// 域开启「用户需要提供主电子邮件地址」时邮箱必填
const emailRequired = ref(false)
@@ -57,7 +58,7 @@ watch(
async function loadIdentitySetting() {
try {
emailRequired.value = (await getIdentitySetting(props.cfgId)).primaryEmailRequired
emailRequired.value = (await getIdentitySetting(props.cfgId, props.domainId)).primaryEmailRequired
} catch {
emailRequired.value = false
}
@@ -67,7 +68,7 @@ async function loadIdentitySetting() {
async function loadDetail(userId: string) {
detailLoading.value = true
try {
const d = await getUserDetail(props.cfgId, userId)
const d = await getUserDetail(props.cfgId, userId, props.domainId)
if (props.user?.id !== userId) return
detail.value = d
if (!d.inDomain) return
@@ -139,20 +140,24 @@ async function submitEdit(u: IamUser) {
emit('update:show', false)
return
}
await updateUser(props.cfgId, u.id, body)
await updateUser(props.cfgId, u.id, body, props.domainId)
message.success(`用户「${u.name}」已更新`)
}
async function submitCreate() {
const created = await createUser(props.cfgId, {
name: form.name.trim(),
givenName: form.givenName.trim(),
familyName: form.familyName.trim(),
email: form.email.trim() || undefined,
description: form.description.trim() || undefined,
grantDomainAdmin: form.grantDomainAdmin,
addToAdminGroup: form.addToAdminGroup,
})
const created = await createUser(
props.cfgId,
{
name: form.name.trim(),
givenName: form.givenName.trim(),
familyName: form.familyName.trim(),
email: form.email.trim() || undefined,
description: form.description.trim() || undefined,
grantDomainAdmin: form.grantDomainAdmin,
addToAdminGroup: form.addToAdminGroup,
},
props.domainId,
)
message.success(`用户「${created.name}」已创建,可再执行「重置密码」下发初始密码`)
}
@@ -225,7 +230,7 @@ async function submit() {
{{ editing ? '身份域管理员' : '添加到身份域管理员' }}
</NCheckbox>
<NCheckbox v-model:checked="form.addToAdminGroup" :disabled="classicUser || detailLoading">
{{ editing ? '管理员组Administrators成员' : '添加到管理员组Administrators' }}
{{ editing ? '租户管理员组成员' : '添加到租户管理员组' }}
</NCheckbox>
<div v-if="adminHint" class="text-xs text-ink-3">{{ adminHint }}</div>
</div>
+9 -7
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { NButton, NDataTable, NPopconfirm, useDialog, useMessage, type DataTableColumns } from 'naive-ui'
import { NButton, NDataTable, NPopconfirm, useDialog, type DataTableColumns } from 'naive-ui'
import { h, ref } from 'vue'
import { clearUserMfa, deleteUser, deleteUserApiKeys, listUsers, resetUserPassword } from '@/api/tenant'
@@ -9,12 +9,13 @@ import UserFormModal from '@/components/tenant/UserFormModal.vue'
import { fmtTime } from '@/composables/useFormat'
import { useAsync } from '@/composables/useAsync'
import type { IamUser } from '@/types/api'
import { useToast } from '@/composables/useToast'
const props = defineProps<{ cfgId: number }>()
const props = defineProps<{ cfgId: number; domainId?: string }>()
const message = useMessage()
const message = useToast()
const dialog = useDialog()
const users = useAsync(() => listUsers(props.cfgId))
const users = useAsync(() => listUsers(props.cfgId, props.domainId))
const showForm = ref(false)
const editingUser = ref<IamUser | null>(null)
@@ -48,13 +49,13 @@ function confirmDelete(row: IamUser) {
]),
positiveText: '确认删除',
negativeText: '取消',
onPositiveClick: () => act(() => deleteUser(props.cfgId, row.id), `已删除用户 ${row.name}`),
onPositiveClick: () => act(() => deleteUser(props.cfgId, row.id, props.domainId), `已删除用户 ${row.name}`),
})
}
async function resetPwd(row: IamUser) {
try {
const { password } = await resetUserPassword(props.cfgId, row.id)
const { password } = await resetUserPassword(props.cfgId, row.id, props.domainId)
dialog.success({
title: '一次性密码',
content: () =>
@@ -119,7 +120,7 @@ const columns: DataTableColumns<IamUser> = [
NPopconfirm,
{
onPositiveClick: () =>
act(() => clearUserMfa(props.cfgId, row.id), `已清除 ${row.name} 的全部 MFA`),
act(() => clearUserMfa(props.cfgId, row.id, props.domainId), `已清除 ${row.name} 的全部 MFA`),
},
{
trigger: () => h(NButton, { size: 'tiny', quaternary: true }, { default: () => '清 MFA' }),
@@ -169,6 +170,7 @@ const columns: DataTableColumns<IamUser> = [
<UserFormModal
v-model:show="showForm"
:cfg-id="cfgId"
:domain-id="domainId"
:user="editingUser"
@created="users.run()"
/>
+25
View File
@@ -4,6 +4,11 @@
*/
const exact: Record<string, string> = {
'POST /api/v1/auth/login': '登录面板',
'POST /api/v1/auth/logout': '退出登录',
'GET /api/v1/auth/oauth/:provider/callback': '外部身份登录 / 绑定',
'PUT /api/v1/auth/credentials': '修改登录凭据',
'PUT /api/v1/auth/password-login': '切换密码登录开关',
'POST /api/v1/auth/revoke-sessions': '撤销全部会话',
'POST /api/v1/auth/totp/setup': '发起两步验证绑定',
'POST /api/v1/auth/totp/activate': '启用两步验证',
'POST /api/v1/auth/totp/disable': '停用两步验证',
@@ -42,6 +47,26 @@ const exact: Record<string, string> = {
'DELETE /api/v1/tasks/:id': '删除后台任务',
'POST /api/v1/tasks/:id/run': '手动执行任务',
'POST /api/v1/webhooks/oci-logs/:secret': '回传消息投递',
'POST /api/v1/ai-keys': '创建网关密钥',
'PUT /api/v1/ai-keys/:id': '修改网关密钥',
'DELETE /api/v1/ai-keys/:id': '删除网关密钥',
'PUT /api/v1/ai-keys/:id/content-log': '设置密钥内容留痕',
'POST /api/v1/ai-channels': '创建网关渠道',
'PUT /api/v1/ai-channels/:id': '修改网关渠道',
'DELETE /api/v1/ai-channels/:id': '删除网关渠道',
'POST /api/v1/ai-channels/:id/probe': '探测网关渠道',
'POST /api/v1/ai-channels/:id/sync-models': '同步渠道模型',
'POST /api/v1/ai-channels/:id/test-model': '测试渠道模型',
'POST /api/v1/ai-blacklist': '拉黑模型',
'DELETE /api/v1/ai-blacklist/:id': '移出模型黑名单',
'PUT /api/v1/ai-settings': '保存网关设置',
'PUT /api/v1/settings/notify-channels/:type': '保存通知渠道配置',
'POST /api/v1/settings/notify-channels/:type/test': '发送通知测试消息',
'PUT /api/v1/settings/notify-templates/:kind': '保存通知模板',
'POST /api/v1/settings/notify-templates/:kind/test': '发送模板测试消息',
'POST /api/v1/proxies/import': '批量导入代理',
'POST /api/v1/proxies/:id/probe': '探测代理',
'PUT /api/v1/proxies/:id/tenants': '设置代理关联租户',
}
/** 资源段兜底词典:精确表未命中时以「动词 + 资源」组合 */
+17
View File
@@ -0,0 +1,17 @@
import type { AliveStatus } from '@/types/api'
/** 测活状态 → 展示标签与徽标语义;suspended 来自云端账户能力接口的暂停标记 */
export const aliveStatusMeta: Record<
AliveStatus,
{ label: string; kind: 'run' | 'term' | 'warn' | 'check' }
> = {
alive: { label: '存活', kind: 'run' },
dead: { label: '失联', kind: 'term' },
suspended: { label: '暂停', kind: 'warn' },
unknown: { label: '未测', kind: 'check' },
}
/** 兜底取值:后端新增状态时前端旧包不至于崩 */
export function aliveMeta(status: string) {
return aliveStatusMeta[status as AliveStatus] ?? aliveStatusMeta.unknown
}
+61
View File
@@ -0,0 +1,61 @@
import { nextTick } from 'vue'
import { useAppStore } from '@/stores/app'
/** 扩散揭示时长;与 main.css 中 view-transition 的默认动画禁用配套 */
const RIPPLE_DURATION = 560
/** 进行中标志:扩散未结束时忽略再次触发,防止打断上一个 transition 造成瞬跳闪烁 */
let rippling = false
/** 明暗主题切换,新主题以触发元素为圆心向外扩散揭示(View Transitions);
* 浏览器不支持或用户偏好减少动效时退化为直接切换 */
export function useThemeRipple() {
const app = useAppStore()
async function toggleDarkFrom(e: MouseEvent) {
const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches
if (typeof document.startViewTransition !== 'function' || reduced) {
app.toggleDark()
return
}
if (rippling) return
rippling = true
const { x, y } = originOf(e)
// 回调内等 nextTick:html.dark 由 store watcher 刷新,须在快照回调结束前落地。
// theme-switching 禁掉页面自身的颜色 transition:::view-transition-new(root)
// 是新 DOM 的实时替身,组件残留的渐变会在扩散圆内继续播放,观感即闪烁。
const transition = document.startViewTransition(async () => {
document.documentElement.classList.add('theme-switching')
app.toggleDark()
await nextTick()
})
try {
await transition.ready
const radius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y))
document.documentElement.animate(
{ clipPath: [`circle(0px at ${x}px ${y}px)`, `circle(${radius}px at ${x}px ${y}px)`] },
{ duration: RIPPLE_DURATION, easing: 'ease-in-out', pseudoElement: '::view-transition-new(root)' },
)
} finally {
void transition.finished.finally(() => {
document.documentElement.classList.remove('theme-switching')
rippling = false
})
}
}
return { toggleDarkFrom }
}
/** 扩散圆心:优先触发元素几何中心(键盘触发 clientX/Y 为 0 也稳),兜底点击坐标 */
function originOf(e: MouseEvent): { x: number; y: number } {
const el = e.currentTarget
if (el instanceof Element) {
const rect = el.getBoundingClientRect()
if (rect.width || rect.height) {
return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }
}
}
return { x: e.clientX, y: e.clientY }
}
+16
View File
@@ -4,6 +4,17 @@ import { h, ref, type Ref, type VNodeChild } from 'vue'
type ToastKind = 'error' | 'warning'
const AUTO_CLOSE_MS = 8000
/** 超过此长度的消息自动折叠成「标题 + 展开详情」 */
const LONG_TEXT = 64
/** 长错误提炼标题:优先 hint 分隔符(request.ts 的「hinterror」),次选首个冒号操作前缀,兜底截断 */
function summarize(text: string): string {
const bar = text.indexOf('')
if (bar > 0 && bar <= 40) return text.slice(0, bar)
const colon = text.search(/|: /)
if (colon > 0 && colon <= 40) return text.slice(0, colon)
return [...text].slice(0, 40).join('') + '…'
}
function renderDetail(kind: ToastKind, detail: string, copied: Ref<boolean>): VNodeChild {
return h('div', { class: 'toast-code' }, [
@@ -51,6 +62,11 @@ export function useToast() {
const message = useMessage()
function show(kind: ToastKind, text: string, detail?: string) {
// 未显式给 detail 的超长消息(如 OCI 透传错误)自动折叠,避免整段撑爆 toast
if (!detail && text.length > LONG_TEXT) {
detail = text
text = summarize(text)
}
if (!detail) {
message[kind](text)
return
-1
View File
@@ -225,7 +225,6 @@ async function logout() {
:instance-id="consoleStore.instanceId"
:region="consoleStore.region"
:instance-name="consoleStore.instanceName"
:root-password="consoleStore.rootPassword"
/>
</div>
</template>
+18 -1
View File
@@ -2,6 +2,10 @@ import { defineStore } from 'pinia'
import { ref, watch } from 'vue'
const DARK_KEY = 'oci-portal:dark'
const LOGO_KEY = 'oci-portal:logo'
/** logo 款式:burst 星爆(现款)/ seal 波浪封印 */
export type LogoVariant = 'burst' | 'seal'
function initialDark(): boolean {
const saved = localStorage.getItem(DARK_KEY)
@@ -9,6 +13,10 @@ function initialDark(): boolean {
return window.matchMedia('(prefers-color-scheme: dark)').matches
}
function initialLogo(): LogoVariant {
return localStorage.getItem(LOGO_KEY) === 'seal' ? 'seal' : 'burst'
}
/** 跨页面共享的界面状态:侧栏收缩、明暗主题 */
export const useAppStore = defineStore('app', () => {
const sidebarCollapsed = ref(false)
@@ -25,6 +33,11 @@ export const useAppStore = defineStore('app', () => {
{ immediate: true },
)
/** logo 款式:默认星爆,设置 · 关于点击 logo 切换后按选择记忆 */
const logoVariant = ref<LogoVariant>(initialLogo())
watch(logoVariant, (v) => localStorage.setItem(LOGO_KEY, v))
function toggleSidebar() {
sidebarCollapsed.value = !sidebarCollapsed.value
}
@@ -33,5 +46,9 @@ export const useAppStore = defineStore('app', () => {
dark.value = !dark.value
}
return { sidebarCollapsed, toggleSidebar, dark, toggleDark }
function toggleLogoVariant() {
logoVariant.value = logoVariant.value === 'burst' ? 'seal' : 'burst'
}
return { sidebarCollapsed, toggleSidebar, dark, toggleDark, logoVariant, toggleLogoVariant }
})
+1 -4
View File
@@ -6,7 +6,6 @@ interface SerialTarget {
instanceId: string
region?: string
instanceName?: string
rootPassword?: string
}
/** 全局串行控制台面板状态:面板挂在 AppLayout,切换路由不销毁会话 */
@@ -16,7 +15,6 @@ export const useConsoleStore = defineStore('console', () => {
const instanceId = ref('')
const region = ref<string | undefined>(undefined)
const instanceName = ref('')
const rootPassword = ref('')
/** 打开串行终端;已开着且换了实例时先关旧会话再开新 */
async function openSerial(target: SerialTarget) {
@@ -29,7 +27,6 @@ export const useConsoleStore = defineStore('console', () => {
instanceId.value = target.instanceId
region.value = target.region
instanceName.value = target.instanceName ?? ''
rootPassword.value = target.rootPassword ?? ''
show.value = true
}
@@ -37,5 +34,5 @@ export const useConsoleStore = defineStore('console', () => {
show.value = false
}
return { show, cfgId, instanceId, region, instanceName, rootPassword, openSerial, close }
return { show, cfgId, instanceId, region, instanceName, openSerial, close }
})
+110 -9
View File
@@ -16,6 +16,10 @@ export interface LoginResponse {
expiresAt: string
}
/** 敏感操作成功后随响应下发的新会话(旧 token 已全部失效);
* 204 降级时为 undefined,前端按会话失效走重新登录 */
export type SessionRefresh = LoginResponse | undefined
/** 两步验证状态 */
export interface TotpStatus {
enabled: boolean
@@ -83,7 +87,7 @@ export interface OauthProviderInfo {
// ---- API Key 配置(租户)----
export type AccountType = 'paid' | 'trial' | 'free' | 'unknown'
export type AliveStatus = 'alive' | 'dead' | 'unknown'
export type AliveStatus = 'alive' | 'dead' | 'suspended' | 'unknown'
/** 列表接口(GET /oci-configs)的瘦身摘要:只含列表页与全局选择器消费的字段 */
export interface OciConfigSummary {
@@ -538,6 +542,16 @@ export interface CostItem {
unit: string
}
// ---- 身份域 ----
// 租户 ACTIVE 身份域;后端只下发元数据,SCIM 端点 URL 由后端解析
export interface IdentityDomain {
id: string
displayName: string
homeRegion: string
type: string
licenseType: string
}
// ---- 租户用户管理 ----
export interface IamUser {
id: string
@@ -579,15 +593,14 @@ export interface AuditEvent {
requestPath: string
}
// truncated 为 true 表示服务端翻页到限(10 页)被截断;nextPage 为续查游标,
// 配合 start/end 绝对时间窗可断点加载更早的事件
// 批式懒加载响应:cursor 供下一批续查原样带回;
// cursor 为空且 exhausted 为 true 表示已回溯到 365 天保留期尽头;
// scannedThrough 为已完整回溯到的时刻(比它更新的时段已扫完),用于进度提示
export interface AuditEventsResult {
items: AuditEvent[]
truncated: boolean
nextPage?: string
/** 本次实际查询的绝对窗(RFC3339),续查必须原样带回 */
start: string
end: string
cursor?: string
exhausted: boolean
scannedThrough?: string
}
// ---- 域通知与密码策略 ----
@@ -724,6 +737,41 @@ export interface TelegramSetting {
tokenTail: string
}
/** 通知渠道类型(Telegram 沿用独立接口,不在此枚举) */
export type NotifyChannelType = 'webhook' | 'ntfy' | 'bark' | 'smtp'
/** 通知渠道脱敏视图;密文字段(ntfy token / bark key / smtp 密码)只回 set/tail */
export interface NotifyChannelItem {
type: NotifyChannelType
enabled: boolean
url?: string
bodyTemplate?: string
server?: string
topic?: string
host?: string
port?: number
username?: string
from?: string
to?: string
secretSet: boolean
secretTail?: string
}
/** 保存单渠道配置;secret 缺省沿用已存值,空串清除 */
export interface UpdateNotifyChannelBody {
enabled: boolean
url?: string
bodyTemplate?: string
server?: string
topic?: string
host?: string
port?: number
username?: string
from?: string
to?: string
secret?: string
}
/** 通知事件开关(通知管理);存量部署未保存过时后端按全开返回 */
export interface NotifyEventsSetting {
/** 任务由成功转失败时推送 */
@@ -874,6 +922,8 @@ export interface AiKey {
name: string
tail: string
group: string
/** 模型白名单;null/空 = 不限,非空时网关仅放行列表内模型 */
models: string[] | null
enabled: boolean
lastUsedAt: string | null
/** 内容日志开启截止时间;null = 永关(默认,红线),开启必须限时到期自动停写 */
@@ -898,8 +948,12 @@ export interface AiChannel {
lastProbeAt: string | null
probeStatus: AiProbeStatus
probeError: string
/** 用户测试通过后固定的探测验证模型;探测时置于候选首位 */
probeModel: string
createdAt: string
updatedAt: string
/** 渠道模型缓存计数(列表查询回填) */
modelCount: number
}
/** 聚合可用模型(OpenAI /models 形态) */
@@ -916,7 +970,36 @@ export interface AiModelCacheItem {
modelOcid: string
name: string
vendor: string
capability: string
syncedAt: string
deprecatedAt: string | null
retiredAt: string | null
}
/** 模型黑名单条目:拉黑即全渠道剔除,同步 / 探测不再入库 */
/** AI 网关全局设置 */
export interface AiSettings {
filterDeprecated: boolean
/** Responses 流式保险丝:instructions+tools 合计超阈值改非流式上游并合成 SSE */
streamGuardEnabled: boolean
streamGuardKB: number
/** grok(xai. 前缀)服务端搜索工具默认注入;请求已带同名工具时不覆盖 */
grokWebSearch: boolean
grokXSearch: boolean
/** 上游无响应预算(秒):非流式为单次尝试总超时,流式为等待响应头上限;限 30..900 */
upstreamWaitSeconds: number
}
/** 聚合模型目录条目(黑名单添加弹窗):能力为 CHAT / EMBEDDING / RERANK / TTS */
export interface AiCatalogModel {
name: string
capability: string
}
export interface AiModelBlacklistItem {
id: number
name: string
createdAt: string
}
/** 调用日志:仅元数据与 token 用量 */
@@ -960,10 +1043,28 @@ export interface AiContentLog {
}
// ---- 关于 ----
/** GET /about:构建与运行环境信息 */
/** 进程资源占用快照,指标为自启动累计口径 */
export interface AboutResources {
/** CPU 自启动均值,占单核百分比(多核并行可超 100) */
cpuAvgPercent: number
numCpu: number
goroutines: number
/** Go 堆在用字节数 */
memHeapBytes: number
/** 向系统申请的总字节数 */
memSysBytes: number
dbEngine: string
/** 数据库磁盘占用;-1 表示外部数据库不可度量 */
dbBytes: number
}
/** GET /about:构建与运行环境信息;运行时字段旧版后端可能缺失 */
export interface AboutInfo {
version: string
buildTime: string
goVersion: string
platform: string
startedAt?: string
uptimeSeconds?: number
resources?: AboutResources
}
+23 -10
View File
@@ -1,13 +1,17 @@
<script setup lang="ts">
import { NButton, useMessage } from 'naive-ui'
import { computed, ref } from 'vue'
import { listAiChannels, listAiKeys, listAiModels } from '@/api/aigateway'
import {
listAiChannels,
listAiKeys,
listAiModels,
} from '@/api/aigateway'
import AiChannelPanel from '@/components/ai/AiChannelPanel.vue'
import AiKeyPanel from '@/components/ai/AiKeyPanel.vue'
import { useAsync } from '@/composables/useAsync'
import { useToast } from '@/composables/useToast'
const message = useMessage()
const message = useToast()
const keys = useAsync(listAiKeys)
const channels = useAsync(listAiChannels)
@@ -20,6 +24,10 @@ const endpoints = [
{ method: 'POST', path: '/responses', note: 'OpenAI Responses · 无状态子集' },
{ method: 'POST', path: '/messages', note: 'Claude · 流式/非流式' },
{ method: 'POST', path: '/embeddings', note: 'OpenAI Embeddings · 向量化' },
{ method: 'POST', path: '/audio/speech', note: '文本转语音 · xAI Voice' },
{ method: 'POST', path: '/tts', note: '文本转语音 · xAI 官方格式' },
{ method: 'POST', path: '/rerank', note: '文档重排 · Cohere Rerank' },
{ method: 'POST', path: '/moderations', note: '内容审核 · OCI Guardrails' },
{ method: 'GET', path: '/models', note: '模型列表(按密钥分组过滤)' },
]
@@ -143,16 +151,20 @@ function refreshChannels() {
v-if="expandedVendor === g.vendor"
class="flex max-h-36 flex-wrap content-start gap-1.5 overflow-y-auto pb-2 pl-5"
>
<button
<span
v-for="id in g.ids"
:key="id"
type="button"
class="mono cursor-pointer rounded-[5px] border border-line bg-card px-2 py-0.5 text-[11.5px] hover:border-accent hover:text-accent"
:title="`复制 ${id}`"
@click="copyModel(id)"
class="mono inline-flex items-center overflow-hidden rounded-[5px] border border-line bg-card text-[11.5px]"
>
{{ id }}
</button>
<button
type="button"
class="cursor-pointer py-0.5 pr-1 pl-2 hover:text-accent"
:title="`复制 ${id}`"
@click="copyModel(id)"
>
{{ id }}
</button>
</span>
</div>
</div>
<div v-if="models.data.value && !models.data.value.length" class="py-2 text-xs text-ink-3">
@@ -169,6 +181,7 @@ function refreshChannels() {
:keys="keys.data.value ?? []"
:loading="keys.loading.value"
:groups="groups"
:models="models.data.value ?? []"
@changed="keys.run({ silent: true })"
/>
+2 -2
View File
@@ -7,7 +7,6 @@ import {
NInputGroupLabel,
NPopconfirm,
NSelect,
useMessage,
type DataTableColumns,
} from 'naive-ui'
import { computed, h, ref, watch } from 'vue'
@@ -24,6 +23,7 @@ import { fmtTime, shortAd, truncOcid, vpusLabel } from '@/composables/useFormat'
import { useAsync } from '@/composables/useAsync'
import { useScopeStore } from '@/stores/scope'
import type { BootVolume } from '@/types/api'
import { useToast } from '@/composables/useToast'
interface BvRow extends BootVolume {
cfgId: number
@@ -31,7 +31,7 @@ interface BvRow extends BootVolume {
/** 租户 / 区域 / 区间来自侧栏全局作用域 */
const scope = useScopeStore()
const message = useMessage()
const message = useToast()
/** 当前作用域租户失联时整页替换占位,不发起资源请求 */
const isDead = computed(() => scope.currentConfig?.aliveStatus === 'dead')
+56 -12
View File
@@ -6,7 +6,6 @@ import {
NPopconfirm,
NSpin,
useDialog,
useMessage,
type DataTableColumns,
} from 'naive-ui'
import { computed, h, ref, watch } from 'vue'
@@ -49,10 +48,11 @@ import {
useTransientPoll,
} from '@/composables/useTransientPoll'
import type { BootVolume, ConsoleConnection, PowerAction, VolumeAttachment } from '@/types/api'
import { useToast } from '@/composables/useToast'
const route = useRoute()
const router = useRouter()
const message = useMessage()
const message = useToast()
const dialog = useDialog()
const { alias: regionAlias } = useRegionAlias()
@@ -133,10 +133,23 @@ const isStopped = computed(() => instance.data.value?.lifecycleState === 'STOPPE
const isEnded = computed(() =>
['TERMINATED', 'TERMINATING'].includes(instance.data.value?.lifecycleState ?? ''),
)
// 区块数据首次加载中禁用对应头部按钮(loading && !data:静默轮询刷新不闪禁用态)
const bvLoading = computed(
() => (bvAtts.loading.value || bvDetails.loading.value) && !bvDetails.data.value,
)
const volLoading = computed(() => volAtts.loading.value && !volAtts.data.value)
const consolesLoading = computed(() => consoles.loading.value && !consoles.data.value)
const attachedVolumeIds = computed(() => (volAtts.data.value ?? []).map((a) => a.volumeId))
/** 创建时若选了随机密码,密码写在 TAG RootPassword 中,这里回显 */
const rootPassword = computed(() => instance.data.value?.freeformTags?.RootPassword ?? '')
// 密码默认掩码(S-01),点击查看后本页会话内保持可见
const pwdRevealed = ref(false)
function revealRootPassword() {
pwdRevealed.value = true
}
async function copyRootPassword() {
await navigator.clipboard.writeText(rootPassword.value)
@@ -181,7 +194,6 @@ function openSerial() {
instanceId: instanceId.value,
region: region.value,
instanceName: instance.data.value?.displayName,
rootPassword: rootPassword.value,
})
}
@@ -492,10 +504,28 @@ const consoleColumns: DataTableColumns<ConsoleConnection> = [
>
<div class="w-22 flex-none text-xs text-ink-3 max-md:w-auto">ROOT 密码</div>
<div class="flex min-w-0 flex-1 items-center gap-1.5">
<code class="mono truncate text-[13px]" :title="rootPassword">{{ rootPassword }}</code>
<NButton size="tiny" quaternary type="primary" @click="copyRootPassword">
复制
</NButton>
<template v-if="pwdRevealed">
<code class="mono truncate text-[13px]" :title="rootPassword">{{ rootPassword }}</code>
<NButton size="tiny" quaternary type="primary" @click="copyRootPassword">
复制
</NButton>
</template>
<template v-else>
<code class="mono text-[13px] tracking-widest select-none"></code>
<NButton
size="tiny"
quaternary
type="primary"
title="验证身份后查看"
@click="revealRootPassword"
>
<svg class="mr-1 h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
查看
</NButton>
</template>
</div>
</div>
<div class="flex gap-3 py-2.5 max-md:flex-col max-md:gap-0.5">
@@ -593,7 +623,7 @@ const consoleColumns: DataTableColumns<ConsoleConnection> = [
<div class="text-sm font-semibold">引导卷</div>
<NButton
size="small"
:disabled="!isStopped || isEnded"
:disabled="!isStopped || isEnded || bvLoading"
:title="isStopped ? '' : '替换引导卷须实例处于 STOPPED'"
@click="showReplaceBv = true"
>
@@ -661,7 +691,12 @@ const consoleColumns: DataTableColumns<ConsoleConnection> = [
<div class="panel">
<div class="flex items-center justify-between border-b border-line-soft px-4.5 py-3.5">
<div class="text-sm font-semibold">块存储卷</div>
<NButton size="small" type="primary" :disabled="isEnded" @click="showAttachVol = true">
<NButton
size="small"
type="primary"
:disabled="isEnded || volLoading"
@click="showAttachVol = true"
>
附加块卷
</NButton>
</div>
@@ -682,11 +717,20 @@ const consoleColumns: DataTableColumns<ConsoleConnection> = [
<div class="flex items-center justify-between border-b border-line-soft px-4.5 py-3.5">
<div class="text-sm font-semibold">控制台连接(VNC / 串口)</div>
<div class="flex items-center gap-2">
<NButton size="small" type="primary" :disabled="isEnded" @click="openSerial">
<NButton
size="small"
type="primary"
:disabled="isEnded || consolesLoading"
@click="openSerial"
>
串行终端
</NButton>
<NButton size="small" :disabled="isEnded" @click="openVnc">网页 VNC</NButton>
<NButton size="small" :disabled="isEnded" @click="showConsole = true">创建连接</NButton>
<NButton size="small" :disabled="isEnded || consolesLoading" @click="openVnc">
网页 VNC
</NButton>
<NButton size="small" :disabled="isEnded || consolesLoading" @click="showConsole = true">
创建连接
</NButton>
</div>
</div>
<NDataTable
+2 -2
View File
@@ -6,7 +6,6 @@ import {
NInputGroup,
NInputGroupLabel,
NSelect,
useMessage,
type DataTableColumns,
} from 'naive-ui'
import { computed, h, ref, watch } from 'vue'
@@ -22,13 +21,14 @@ import { useAsync } from '@/composables/useAsync'
import { INSTANCE_TRANSIENT_STATES, useTransientPoll } from '@/composables/useTransientPoll'
import { useScopeStore } from '@/stores/scope'
import type { Instance, PowerAction } from '@/types/api'
import { useToast } from '@/composables/useToast'
interface InstanceRow extends Instance {
cfgId: number
cfgAlias: string
}
const message = useMessage()
const message = useToast()
const { alias } = useRegionAlias()
/** 租户 / 区域 / 区间来自侧栏全局作用域,页内只做区间切换与搜索 */
+38 -2
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { NButton, NInput } from 'naive-ui'
import { NButton, NInput, NSpin } from 'naive-ui'
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
@@ -8,12 +8,15 @@ import { ApiError } from '@/api/request'
import AppLogo from '@/components/AppLogo.vue'
import FullPageBackdrop from '@/components/FullPageBackdrop.vue'
import OauthProviderIcon from '@/components/OauthProviderIcon.vue'
import { useThemeRipple } from '@/composables/useThemeRipple'
import { useAuthStore } from '@/stores/auth'
import type { OauthProviderInfo } from '@/types/api'
const auth = useAuthStore()
const route = useRoute()
const router = useRouter()
// 点击 logo 切换明暗主题,新主题自 logo 向外扩散
const { toggleDarkFrom } = useThemeRipple()
const username = ref('admin')
const password = ref('')
@@ -27,6 +30,8 @@ const errorMsg = ref('')
const providers = ref<OauthProviderInfo[]>([])
// 密码登录已禁用(设置里开启且存在可用外部身份):隐藏用户名密码表单
const passwordLoginDisabled = ref(false)
// 登录方式加载中:providers 返回前不渲染表单,避免「先见密码表单再消失」的闪烁与误提交
const bootLoading = ref(true)
// 左侧品牌区功能徽章:各自不同周期/幅度/相位上下浮动(不规律观感)
const featureChips = [
@@ -44,6 +49,8 @@ onMounted(async () => {
passwordLoginDisabled.value = r.passwordLoginDisabled && r.providers.length > 0
} catch {
/* 登录页容忍 provider 列表加载失败 */
} finally {
bootLoading.value = false
}
})
@@ -123,7 +130,15 @@ async function oauthLogin(provider: string) {
<div class="fpb-ring fpb-ring-dash" style="width: 430px; height: 430px; left: calc(50% - 215px); top: calc(50% - 215px)"></div>
</div>
<div class="flex items-center gap-3">
<span class="floaty flex-none"><AppLogo :size="58" /></span>
<button
type="button"
class="floaty logo-btn flex-none"
title="切换明暗主题"
aria-label="切换明暗主题"
@click="toggleDarkFrom"
>
<AppLogo :size="58" />
</button>
<span>
<span class="block font-serif text-2xl font-semibold">OCI Portal</span>
<span class="mt-px block text-[12.5px] text-ink-3">自托管 · Self-hosted</span>
@@ -144,6 +159,11 @@ async function oauthLogin(provider: string) {
<div class="rounded-[14px] border border-line bg-card px-[30px] pt-[30px] pb-7 shadow-[0_18px_50px_rgba(20,20,19,.10),0_2px_8px_rgba(20,20,19,.05)]">
<div class="font-serif text-[19px] font-semibold">欢迎回来</div>
<div v-if="bootLoading" class="flex items-center justify-center py-14">
<NSpin size="small" />
</div>
<template v-else>
<div
v-if="errorMsg"
class="mt-4 flex items-start gap-2 rounded-md border border-err/30 bg-err/10 px-3 py-2 text-[12.5px] text-err"
@@ -216,6 +236,7 @@ async function oauthLogin(provider: string) {
由管理员在 设置 · 账号安全 中管理
</div>
</template>
</template>
</div>
</div>
</div>
@@ -240,6 +261,21 @@ async function oauthLogin(provider: string) {
height: 7px;
border-radius: 50%;
}
/* logo 即主题开关:去按钮底色,悬停轻微放大提示可点 */
.logo-btn {
cursor: pointer;
border: none;
background: none;
padding: 0;
line-height: 0;
transition: scale 0.25s ease;
}
.logo-btn:hover {
scale: 1.06;
}
.logo-btn:active {
scale: 0.96;
}
@media (prefers-reduced-motion: no-preference) {
.floaty {
animation: login-fl 7s ease-in-out infinite;
+18 -10
View File
@@ -6,6 +6,7 @@ import { getOverview, listConfigs } from '@/api/configs'
import { listTaskLogs, listTasks } from '@/api/tasks'
import CostChart from '@/components/CostChart.vue'
import EmptyCard from '@/components/EmptyCard.vue'
import { aliveMeta } from '@/composables/useAliveStatus'
import { fmtRelative } from '@/composables/useFormat'
import { useRegionAlias } from '@/composables/useRegionAlias'
import { useAsync } from '@/composables/useAsync'
@@ -162,7 +163,8 @@ const currencySymbol = computed(() => {
{{ ov?.tenants.alive ?? 0 }}/{{ ov?.tenants.total ?? 0 }} 存活
</div>
</div>
<div class="px-4.5 py-1.5">
<!-- 限高内部滚动:租户多时不撑高整行,底部露半行暗示可滚 -->
<div class="max-h-90 overflow-y-auto px-4.5 py-1.5">
<div
v-for="c in configs.data.value ?? []"
:key="c.id"
@@ -175,19 +177,25 @@ const currencySymbol = computed(() => {
<div class="flex w-14 flex-none items-center gap-1.5 text-[12.5px]">
<span
class="h-1.5 w-1.5 rounded-full"
:class="c.aliveStatus === 'alive' ? 'bg-ok' : 'bg-err'"
:class="
c.aliveStatus === 'alive'
? 'bg-ok'
: c.aliveStatus === 'suspended'
? 'bg-warn'
: 'bg-err'
"
/>
{{ c.aliveStatus === 'alive' ? '存活' : '失联' }}
{{ aliveMeta(c.aliveStatus).label }}
</div>
<div class="w-18 flex-none text-right text-xs text-ink-3">{{ fmtRelative(c.lastVerifiedAt) }}</div>
</div>
<div class="py-2.5 text-center">
<RouterLink
class="text-[13px] font-medium text-accent hover:text-accent-hover"
:to="{ name: 'tenants' }"
>查看全部租户</RouterLink
>
</div>
</div>
<div class="border-t border-line-soft py-2.5 text-center">
<RouterLink
class="text-[13px] font-medium text-accent hover:text-accent-hover"
:to="{ name: 'tenants' }"
>查看全部租户</RouterLink
>
</div>
</div>
</div>
+51 -6
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { NButton, NInput, NSpin, NSwitch, NTabPane, NTabs, useMessage } from 'naive-ui'
import { NButton, NInput, NSpin, NSwitch, NTabPane, NTabs } from 'naive-ui'
import { computed, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
@@ -8,6 +8,7 @@ import {
getSecuritySetting,
getTaskSetting,
getTelegramSetting,
listNotifyChannels,
listNotifyTemplates,
testTelegram,
updateNotifyEvents,
@@ -19,28 +20,49 @@ import AppInputNumber from '@/components/AppInputNumber.vue'
import FootNote from '@/components/FootNote.vue'
import FormField from '@/components/FormField.vue'
import AboutTab from '@/components/settings/AboutTab.vue'
import AiSettingsTab from '@/components/settings/AiSettingsTab.vue'
import AccountSecurityCard from '@/components/settings/AccountSecurityCard.vue'
import NotifyChannelCard from '@/components/settings/NotifyChannelCard.vue'
import NotifyTemplateModal from '@/components/settings/NotifyTemplateModal.vue'
import { useAsync } from '@/composables/useAsync'
import type { NotifyEventsSetting, NotifyTemplateItem, SecuritySetting } from '@/types/api'
import type {
NotifyChannelItem,
NotifyEventsSetting,
NotifyTemplateItem,
SecuritySetting,
} from '@/types/api'
import { useAuthStore } from '@/stores/auth'
import { useToast } from '@/composables/useToast'
const message = useMessage()
const message = useToast()
const route = useRoute()
const router = useRouter()
const auth = useAuthStore()
// 设置页以 tab 组织:通知(管理 + 方式)/ 任务(抢机熔断阈值)/ 安全(WAF/网络/账号)
const tab = ref('notify')
// OAuth 绑定回跳:成功/失败提示后清理 query,并停在安全 tab
// OAuth 绑定回跳:成功/失败提示后清理 query,并停在安全 tab;
// 绑定使令牌版本递增,fragment 携带的新 token 须先落地,否则后续请求 401
onMounted(() => {
const { oauth, oauthError } = route.query
if (oauth !== 'bound' && !oauthError) return
consumeBindToken()
tab.value = 'security'
if (oauth === 'bound') message.success('外部身份绑定成功')
if (typeof oauthError === 'string' && oauthError) message.error(oauthError)
void router.replace({ query: {} })
})
/** 消费绑定回跳 fragment 中的新会话 token(无感换发,不进服务端日志) */
function consumeBindToken() {
const hash = window.location.hash
if (!hash.startsWith('#oauthToken=')) return
const token = decodeURIComponent(hash.slice('#oauthToken='.length))
history.replaceState(null, '', window.location.pathname + window.location.search)
if (token) auth.setSession(token, new Date(Date.now() + 24 * 3600e3).toISOString())
}
// ---- 通知管理:按事件类型的推送开关 ----
const events = useAsync(getNotifyEvents)
const eventForm = ref<NotifyEventsSetting>({
@@ -138,6 +160,14 @@ async function saveEvents() {
}
}
// ---- 通知方式:多渠道(webhook/ntfy/bark/smtp)----
const channels = useAsync(listNotifyChannels)
/** 渠道保存接口回全渠道最新视图,就地覆盖免二次拉取 */
function onChannelsSaved(items: NotifyChannelItem[]) {
channels.data.value = items
}
// ---- 通知方式:Telegram 渠道配置 ----
const setting = useAsync(getTelegramSetting)
const enabled = ref(false)
@@ -310,6 +340,7 @@ async function sendTest() {
<NTabPane name="notify" tab="通知" />
<NTabPane name="task" tab="任务" />
<NTabPane name="security" tab="安全" />
<NTabPane name="ai" tab="AI" />
<NTabPane name="about" tab="关于" />
</NTabs>
@@ -431,13 +462,24 @@ async function sendTest() {
拉进群 浏览器打开 api.telegram.org/bot&lt;token&gt;/getUpdates
message.chat.id 即为 chat_id
</FootNote>
<!-- 多渠道: Telegram 并存,可同时启用任意多个 -->
<div class="border-t border-line-soft">
<NotifyChannelCard
v-for="ch in channels.data.value ?? []"
:key="ch.type"
:item="ch"
@saved="onChannelsSaved"
/>
</div>
</div>
<div class="panel px-4.5 py-3.5">
<div class="text-[13px] font-semibold">送达规则</div>
<div class="mt-1.5 text-xs leading-relaxed text-ink-3">
发送为异步10 秒超时失败仅记后端日志不影响任务执行同一事件按状态变化去重
会刷屏云端事件另受日志回传链路约束未建链路的租户不产生该类通知
事件同时投递到全部已启用渠道发送为异步10 秒超时单渠道失败仅记后端日志
影响其他渠道与任务执行同一事件按状态变化去重不会刷屏
云端事件另受日志回传链路约束未建链路的租户不产生该类通知
</div>
</div>
</div>
@@ -618,6 +660,9 @@ async function sendTest() {
</div>
</div>
<!-- AI:网关运行时设置(保险丝 / grok 工具默认 / 模型治理) -->
<AiSettingsTab v-else-if="tab === 'ai'" />
<!-- 关于:构建信息与项目主页(v-else-if 挂载时才启动粒子动画) -->
<AboutTab v-else-if="tab === 'about'" />
+3 -2
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { NButton, NSpin, useDialog, useMessage } from 'naive-ui'
import { NButton, NSpin, useDialog } from 'naive-ui'
import { computed, onUnmounted, ref } from 'vue'
import { RouterLink, useRoute, useRouter } from 'vue-router'
@@ -12,10 +12,11 @@ import { parseSnatch, scopeCfgIds, STATUS_META, TYPE_LABEL } from '@/components/
import { fmtRelative, fmtTime, regionCity } from '@/composables/useFormat'
import { useAsync } from '@/composables/useAsync'
import { useScopeStore } from '@/stores/scope'
import { useToast } from '@/composables/useToast'
const route = useRoute()
const router = useRouter()
const message = useMessage()
const message = useToast()
const dialog = useDialog()
const scope = useScopeStore()
+3 -2
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { NButton, NSpin, useDialog, useMessage } from 'naive-ui'
import { NButton, NSpin, useDialog } from 'naive-ui'
import { computed, onUnmounted, ref } from 'vue'
import { deleteTask, listTasks, runTask, updateTask } from '@/api/tasks'
@@ -10,8 +10,9 @@ import { parseSnatch } from '@/components/task/taskDisplay'
import { useAsync } from '@/composables/useAsync'
import { useScopeStore } from '@/stores/scope'
import type { Task } from '@/types/api'
import { useToast } from '@/composables/useToast'
const message = useMessage()
const message = useToast()
const dialog = useDialog()
const scope = useScopeStore()
+65 -15
View File
@@ -1,9 +1,10 @@
<script setup lang="ts">
import { NButton, NPopconfirm, NSpin, NTabPane, NTabs, NTooltip, useMessage } from 'naive-ui'
import { computed, ref } from 'vue'
import { NButton, NPopconfirm, NSelect, NSpin, NTabPane, NTabs, NTooltip } from 'naive-ui'
import { computed, ref, watch } from 'vue'
import { RouterLink, useRoute, useRouter } from 'vue-router'
import { deleteConfig, getConfig, verifyConfig } from '@/api/configs'
import { listIdentityDomains } from '@/api/tenant'
import AccountTypeBadge from '@/components/AccountTypeBadge.vue'
import AuditLogTab from '@/components/tenant/AuditLogTab.vue'
import CostTab from '@/components/tenant/CostTab.vue'
@@ -15,15 +16,17 @@ import QuotaTab from '@/components/tenant/QuotaTab.vue'
import StatusBadge from '@/components/StatusBadge.vue'
import SubsTab from '@/components/tenant/SubsTab.vue'
import UsersTab from '@/components/tenant/UsersTab.vue'
import { aliveMeta } from '@/composables/useAliveStatus'
import { fmtTime } from '@/composables/useFormat'
import { useRegionAlias } from '@/composables/useRegionAlias'
import { useAsync } from '@/composables/useAsync'
import { useScopeStore } from '@/stores/scope'
import { useToast } from '@/composables/useToast'
const scope = useScopeStore()
const route = useRoute()
const router = useRouter()
const message = useMessage()
const message = useToast()
const { alias: regionAlias } = useRegionAlias()
const cfgId = computed(() => Number(route.params.id))
@@ -32,8 +35,33 @@ const verifying = ref(false)
const config = useAsync(() => getConfig(cfgId.value))
/** 失联租户各 tab 拉不到云端数据,内容区整体换失联占位 */
const isDead = computed(() => config.data.value?.aliveStatus === 'dead')
/** 失联/暂停租户各 tab 拉不到云端数据,内容区整体换占位 */
const isBlocked = computed(() =>
['dead', 'suspended'].includes(config.data.value?.aliveStatus ?? ''),
)
// ---- 身份域:用户 / IDP / 其他 三个 tab 共享的域上下文 ----
// 拉取失败(无权限/老租户)静默降级:不显示选择器,各 tab 走缺省 Default 路径
const domains = useAsync(async () => {
try {
return await listIdentityDomains(cfgId.value)
} catch {
return []
}
})
const domainId = ref<string | undefined>(undefined)
watch(domains.data, (list) => {
if (!list?.length) return
const preferred = list.find((d) => d.displayName === 'Default') ?? list[0]
domainId.value ??= preferred.id
})
const domainOptions = computed(
() => domains.data.value?.map((d) => ({ label: d.displayName, value: d.id })) ?? [],
)
/** 域选择器只在多域租户的域相关 tab 显示 */
const showDomainPicker = computed(
() => (domains.data.value?.length ?? 0) > 1 && ['users', 'idp', 'misc'].includes(tab.value),
)
async function verify() {
verifying.value = true
@@ -53,7 +81,7 @@ async function verify() {
async function remove() {
try {
await deleteConfig(cfgId.value)
message.success('已删除(仅移除本面板配置,不影响云端资源)')
message.success('已删除租户及关联本地数据,OCI 云端资源未受影响')
void scope.refreshConfigs()
void router.push({ name: 'tenants' })
} catch (e) {
@@ -88,19 +116,22 @@ async function remove() {
<div class="flex flex-wrap items-center gap-3">
<h1 class="page-title">{{ config.data.value.alias }}</h1>
<NTooltip
v-if="isDead && config.data.value.lastError"
v-if="isBlocked && config.data.value.lastError"
trigger="hover"
placement="top-start"
>
<template #trigger>
<StatusBadge kind="term" label="失联" />
<StatusBadge
:kind="aliveMeta(config.data.value.aliveStatus).kind"
:label="aliveMeta(config.data.value.aliveStatus).label"
/>
</template>
<div class="max-w-80 text-xs">{{ config.data.value.lastError }}</div>
</NTooltip>
<StatusBadge
v-else
:kind="config.data.value.aliveStatus === 'alive' ? 'run' : 'term'"
:label="config.data.value.aliveStatus === 'alive' ? '存活' : '失联'"
:kind="aliveMeta(config.data.value.aliveStatus).kind"
:label="aliveMeta(config.data.value.aliveStatus).label"
/>
<AccountTypeBadge :type="config.data.value.accountType" />
<div class="flex-1" />
@@ -109,7 +140,15 @@ async function remove() {
<template #trigger>
<NButton size="small" type="error" ghost>删除租户</NButton>
</template>
删除{{ config.data.value.alias }}仅移除本面板配置与快照不影响云端资源
<div class="max-w-80 text-[13px] leading-relaxed">
<div class="font-medium">删除{{ config.data.value.alias }}</div>
<div class="mt-1 text-xs text-ink-3">
将清理面板内关联数据后台任务测活 / 成本快照回传事件Webhook 密钥与 AI 渠道
</div>
<div class="mt-0.5 text-xs text-ink-3">
OCI 云端资源不受影响云端日志回传链路请先在其他页销毁
</div>
</div>
</NPopconfirm>
</div>
@@ -140,19 +179,30 @@ async function remove() {
<NTabPane name="subs" tab="订阅" />
<NTabPane name="audit" tab="审计日志" />
<NTabPane name="misc" tab="其他" />
<template #suffix>
<!-- 多域租户:用户/IDP/其他 tab 按选中域读写 -->
<div v-if="showDomainPicker" class="w-64 max-md:w-44">
<NSelect v-model:value="domainId" size="small" :options="domainOptions" placeholder="身份域" />
</div>
</template>
</NTabs>
</div>
<template v-if="config.data.value">
<DeadPlaceholder v-if="isDead" :last-error="config.data.value.lastError" />
<DeadPlaceholder
v-if="isBlocked"
:last-error="config.data.value.lastError"
:suspended="config.data.value.aliveStatus === 'suspended'"
/>
<template v-else>
<QuotaTab v-if="tab === 'quota'" :cfg-id="cfgId" />
<IdpTab v-else-if="tab === 'idp'" :cfg-id="cfgId" />
<UsersTab v-else-if="tab === 'users'" :cfg-id="cfgId" />
<!-- 域相关 tab domainId key:切域整组件重挂载,状态与数据全量刷新 -->
<IdpTab v-else-if="tab === 'idp'" :key="`idp-${domainId ?? ''}`" :cfg-id="cfgId" :domain-id="domainId" />
<UsersTab v-else-if="tab === 'users'" :key="`users-${domainId ?? ''}`" :cfg-id="cfgId" :domain-id="domainId" />
<CostTab v-else-if="tab === 'cost'" :cfg-id="cfgId" />
<SubsTab v-else-if="tab === 'subs'" :cfg-id="cfgId" :account-type="config.data.value.accountType" />
<AuditLogTab v-else-if="tab === 'audit'" :cfg-id="cfgId" />
<MiscTab v-else :cfg-id="cfgId" />
<MiscTab v-else :key="`misc-${domainId ?? ''}`" :cfg-id="cfgId" :domain-id="domainId" />
</template>
</template>
</div>
+44 -12
View File
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { NButton, NDataTable, NInput, NInputGroup, NInputGroupLabel, NPopconfirm, NPopover, NSelect, NTooltip, useMessage, type DataTableColumns } from 'naive-ui'
import { computed, h, ref, type VNodeChild } from 'vue'
import { NButton, NDataTable, NInput, NInputGroup, NInputGroupLabel, NPopconfirm, NPopover, NSelect, NTooltip, type DataTableColumns } from 'naive-ui'
import { computed, h, reactive, ref, watch, type VNodeChild } from 'vue'
import { RouterLink, useRouter } from 'vue-router'
import { listAiChannels } from '@/api/aigateway'
@@ -11,13 +11,15 @@ import EditConfigModal from '@/components/config/EditConfigModal.vue'
import ImportConfigModal from '@/components/config/ImportConfigModal.vue'
import StatusBadge from '@/components/StatusBadge.vue'
import { parseSnatch, scopeCfgIds, STATUS_META, TYPE_LABEL } from '@/components/task/taskDisplay'
import { aliveMeta } from '@/composables/useAliveStatus'
import { fmtRelative, fmtTime } from '@/composables/useFormat'
import { useRegionAlias } from '@/composables/useRegionAlias'
import { useAsync } from '@/composables/useAsync'
import { useScopeStore } from '@/stores/scope'
import type { AccountType, OciConfigSummary, Task } from '@/types/api'
import { useToast } from '@/composables/useToast'
const message = useMessage()
const message = useToast()
const router = useRouter()
const { alias: regionAlias } = useRegionAlias()
const scope = useScopeStore()
@@ -61,6 +63,25 @@ const filtered = computed(() => {
)
})
/** 客户端分页:字面量对象会在重渲染时被重建导致状态丢失,须用 reactive 受控 */
const pagination = reactive({
page: 1,
pageSize: 10,
showSizePicker: true,
pageSizes: [10, 20, 50, 100],
onUpdatePage: (p: number) => {
pagination.page = p
},
onUpdatePageSize: (ps: number) => {
pagination.pageSize = ps
pagination.page = 1
},
})
/** 搜索或分组过滤变化后回第 1 页,避免停留在越界页码 */
watch([keyword, groupFilter], () => {
pagination.page = 1
})
/** 任务是否作用于该租户:抢机看目标租户;AI 探测看号池渠道(仅入池租户);
* 测活 / 成本看范围(空 = 全部租户) */
function taskTouchesCfg(task: Task, cfgId: number): boolean {
@@ -104,7 +125,7 @@ function setGlobal(row: OciConfigSummary) {
async function remove(row: OciConfigSummary) {
try {
await deleteConfig(row.id)
message.success(`已删除「${row.alias}(仅移除本面板配置,不影响云端资源)`)
message.success(`已删除「${row.alias}及关联本地数据,OCI 云端资源未受影响`)
reloadConfigs()
} catch (e) {
message.error(e instanceof Error ? e.message : '删除失败')
@@ -125,13 +146,11 @@ function renderTenant(row: OciConfigSummary): VNodeChild {
])
}
/** 状态列:仅徽标;失联且有错误详情时 hover 徽标以 tooltip 展示完整 lastError */
/** 状态列:仅徽标;失联/暂停且有错误详情时 hover 徽标以 tooltip 展示完整 lastError */
function renderStatus(row: OciConfigSummary): VNodeChild {
const badge = h(StatusBadge, {
kind: row.aliveStatus === 'alive' ? 'run' : row.aliveStatus === 'dead' ? 'term' : 'check',
label: row.aliveStatus === 'alive' ? '存活' : row.aliveStatus === 'dead' ? '失联' : '未测',
})
if (row.aliveStatus !== 'dead' || !row.lastError) return badge
const meta = aliveMeta(row.aliveStatus)
const badge = h(StatusBadge, { kind: meta.kind, label: meta.label })
if (!['dead', 'suspended'].includes(row.aliveStatus) || !row.lastError) return badge
return h(
NTooltip,
{ trigger: 'hover', placement: 'top-start' },
@@ -221,7 +240,20 @@ function renderActions(row: OciConfigSummary): VNodeChild {
{
trigger: () =>
h(NButton, { size: 'tiny', quaternary: true, type: 'error' }, { default: () => '删除' }),
default: () => `删除「${row.alias}」?仅移除本面板配置与快照,不影响云端资源。`,
default: () =>
h('div', { class: 'max-w-80 text-[13px] leading-relaxed' }, [
h('div', { class: 'font-medium' }, `删除「${row.alias}」?`),
h(
'div',
{ class: 'mt-1 text-xs text-ink-3' },
'将清理面板内关联数据:后台任务、测活 / 成本快照、回传事件、Webhook 密钥与 AI 渠道。',
),
h(
'div',
{ class: 'mt-0.5 text-xs text-ink-3' },
'OCI 云端资源不受影响;云端日志回传链路请先在「其他」页销毁。',
),
]),
},
),
])
@@ -319,7 +351,7 @@ const columns = computed<DataTableColumns<OciConfigSummary>>(() => [
:columns="columns"
:data="filtered"
:loading="configs.loading.value"
:pagination="{ pageSize: 10 }"
:pagination="pagination"
:scroll-x="1200"
:row-key="(r: OciConfigSummary) => r.id"
/>
+2 -2
View File
@@ -4,7 +4,6 @@ import {
NDataTable,
NPopconfirm,
NSpin,
useMessage,
type DataTableColumns,
} from 'naive-ui'
import { computed, h, ref } from 'vue'
@@ -18,10 +17,11 @@ import StatusBadge from '@/components/StatusBadge.vue'
import { fmtTime } from '@/composables/useFormat'
import { useAsync } from '@/composables/useAsync'
import type { Ipv6Step, SecurityList, Subnet } from '@/types/api'
import { useToast } from '@/composables/useToast'
const route = useRoute()
const router = useRouter()
const message = useMessage()
const message = useToast()
const cfgId = computed(() => Number(route.params.cfgId))
const vcnId = computed(() => String(route.params.vcnId))
-1
View File
@@ -7,7 +7,6 @@
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}