feat(channel-monitor): request templates with snapshot apply + headers/body override

Problem:
Upstream channels can reject monitor probes based on client fingerprint
(e.g. "only Claude Code clients allowed"). The monitor had no way to
customize the outgoing request to bypass such restrictions.

Solution:
Introduce reusable request templates that carry extra_headers plus an
optional body override; monitors reference a template and receive a
snapshot copy on apply. Template edits do NOT auto-propagate — users
must click "apply to associated monitors" to refresh snapshots, so a
bad template edit cannot instantly break all production monitors.

Data model (migration 112):
- channel_monitor_request_templates: id, name, provider, description,
  extra_headers jsonb, body_override_mode ('off'|'merge'|'replace'),
  body_override jsonb. Unique (provider, name).
- channel_monitors: +template_id (FK, ON DELETE SET NULL), +extra_headers,
  +body_override_mode, +body_override (the three runtime snapshot fields).

Checker (channel_monitor_checker.go):
- callProvider + runCheckForModel accept a CheckOptions carrying the
  snapshot fields. mergeHeaders applies user headers on top of adapter
  defaults (forbidden list: Host / Content-Length / Transfer-Encoding /
  Connection / Content-Encoding).
- buildRequestBody:
    off     -> adapter default body
    merge   -> shallow-merge over default; per-provider deny list
               (model/messages/contents) protects the challenge contract
    replace -> user body verbatim
- Replace mode skips challenge validation; instead HTTP 2xx + non-empty
  extracted response text = operational, empty = failed.
- 4 new unit tests cover all three modes + replace/empty-response case.

Admin API:
- /admin/channel-monitor-templates CRUD + /:id/apply (overwrite snapshot
  on all template_id=id monitors, returns affected count).
- channel_monitor request/response DTOs gain the 4 new fields.

Frontend:
- channelMonitorTemplate.ts API client.
- MonitorAdvancedRequestConfig.vue shared component for headers textarea
  + body mode radio + body JSON editor; used by both template and monitor
  forms.
- MonitorTemplateManagerDialog.vue: provider tabs, list/create/edit/
  delete/apply, live "associated monitors" count per row.
- MonitorFiltersBar: new 模板管理 button next to 新增监控.
- MonitorFormDialog: collapsible 高级 section with template dropdown
  (filtered by form.provider, clears on provider change) + embedded
  AdvancedRequestConfig. Picking a template copies its fields into the
  form (snapshot semantics mirrored on the client).
- i18n zh/en entries for all new copy.

chore: bump version to 0.1.114.32
This commit is contained in:
erio
2026-04-21 14:14:49 +08:00
parent 0c48f08f5c
commit a296425994
53 changed files with 8318 additions and 394 deletions

View File

@@ -95,6 +95,35 @@
<label class="input-label mb-0">{{ t('admin.channelMonitor.form.enabled') }}</label>
<Toggle v-model="form.enabled" />
</div>
<!-- 高级设置区请求模板 + 自定义 headers/body -->
<details class="rounded-lg border border-gray-200 bg-gray-50/50 p-3 dark:border-dark-700 dark:bg-dark-900/30">
<summary class="cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
{{ t('admin.channelMonitor.advanced.section') }}
</summary>
<p class="mt-1 text-xs text-gray-400">{{ t('admin.channelMonitor.advanced.sectionHint') }}</p>
<div class="mt-4 space-y-4">
<div>
<label class="input-label">{{ t('admin.channelMonitor.templateField.label') }}</label>
<Select
v-model="templateSelectValue"
:options="templateOptions"
:placeholder="t('admin.channelMonitor.templateField.placeholder')"
/>
<p class="mt-1 text-xs text-gray-400">{{ t('admin.channelMonitor.templateField.applyHint') }}</p>
</div>
<MonitorAdvancedRequestConfig
:extra-headers="form.extra_headers"
:body-override-mode="form.body_override_mode"
:body-override="form.body_override"
@update:extra-headers="form.extra_headers = $event"
@update:body-override-mode="form.body_override_mode = $event"
@update:body-override="form.body_override = $event"
/>
</div>
</details>
</form>
<template #footer>
@@ -136,17 +165,21 @@ import { adminAPI } from '@/api/admin'
import { keysAPI } from '@/api/keys'
import { userGroupsAPI } from '@/api/groups'
import type {
BodyOverrideMode,
ChannelMonitor,
CreateParams,
Provider,
UpdateParams,
} from '@/api/admin/channelMonitor'
import type { ChannelMonitorTemplate } from '@/api/admin/channelMonitorTemplate'
import type { ApiKey } from '@/types'
import BaseDialog from '@/components/common/BaseDialog.vue'
import Toggle from '@/components/common/Toggle.vue'
import Select from '@/components/common/Select.vue'
import ModelTagInput from '@/components/admin/channel/ModelTagInput.vue'
import { getPlatformTextClass } from '@/components/admin/channel/types'
import MonitorKeyPickerDialog from '@/components/admin/monitor/MonitorKeyPickerDialog.vue'
import MonitorAdvancedRequestConfig from '@/components/admin/monitor/MonitorAdvancedRequestConfig.vue'
import ProviderIcon from '@/components/user/monitor/ProviderIcon.vue'
import { useChannelMonitorFormat } from '@/composables/useChannelMonitorFormat'
import {
@@ -198,11 +231,16 @@ interface MonitorForm {
group_name: string
interval_seconds: number
enabled: boolean
// 高级设置快照
template_id: number | null
extra_headers: Record<string, string>
body_override_mode: BodyOverrideMode
body_override: Record<string, unknown> | null
}
const form = reactive<MonitorForm>({
name: '',
provider: PROVIDER_OPENAI,
provider: PROVIDER_ANTHROPIC,
endpoint: '',
api_key: '',
primary_model: '',
@@ -210,6 +248,57 @@ const form = reactive<MonitorForm>({
group_name: '',
interval_seconds: systemDefaultInterval.value,
enabled: true,
template_id: null,
extra_headers: {},
body_override_mode: 'off',
body_override: null,
})
// 可用模板列表(进入 dialog 时一次性拉取 cache按 provider 过滤)。
const templatesCache = ref<ChannelMonitorTemplate[]>([])
const templatesLoading = ref(false)
const templateOptions = computed(() => {
const items = templatesCache.value.filter((t) => t.provider === form.provider)
return [
{ value: '', label: t('admin.channelMonitor.templateField.none') },
...items.map((t) => ({ value: String(t.id), label: t.name })),
]
})
async function loadTemplates() {
if (templatesCache.value.length > 0) return
templatesLoading.value = true
try {
const { items } = await adminAPI.channelMonitorTemplate.list()
templatesCache.value = items
} catch (err: unknown) {
// 模板拉取失败不阻塞监控表单,用户可以不选模板
console.warn('load monitor templates failed', err)
} finally {
templatesLoading.value = false
}
}
// 模板下拉绑定value 是 stringSelect 组件约束),需要与 number | null 互转。
const templateSelectValue = computed<string>({
get: () => (form.template_id == null ? '' : String(form.template_id)),
set: (raw: string) => {
if (raw === '') {
form.template_id = null
return
}
const id = Number(raw)
if (!Number.isFinite(id)) return
form.template_id = id
// 应用模板 = 拷贝快照
const tpl = templatesCache.value.find((t) => t.id === id)
if (tpl) {
form.extra_headers = { ...(tpl.extra_headers || {}) }
form.body_override_mode = tpl.body_override_mode
form.body_override = tpl.body_override ? { ...tpl.body_override } : null
}
},
})
interface ProviderOption {
@@ -218,8 +307,8 @@ interface ProviderOption {
}
const providerOptions = computed<ProviderOption[]>(() => [
{ value: PROVIDER_OPENAI, label: t('monitorCommon.providers.openai') },
{ value: PROVIDER_ANTHROPIC, label: t('monitorCommon.providers.anthropic') },
{ value: PROVIDER_OPENAI, label: t('monitorCommon.providers.openai') },
{ value: PROVIDER_GEMINI, label: t('monitorCommon.providers.gemini') },
])
@@ -227,13 +316,15 @@ const providerOptions = computed<ProviderOption[]>(() => [
// Editing mode loads api_key='' via loadFromMonitor and only sets it on user
// typing, so clearing on provider change is always a safe no-op until the user
// picks a new key.
// 同时清空 template_id模板有 provider 归属,跨平台不通用)。
watch(() => form.provider, () => {
form.api_key = ''
form.template_id = null
})
function resetForm() {
form.name = ''
form.provider = PROVIDER_OPENAI
form.provider = PROVIDER_ANTHROPIC
form.endpoint = ''
form.api_key = ''
form.primary_model = ''
@@ -241,6 +332,10 @@ function resetForm() {
form.group_name = ''
form.interval_seconds = systemDefaultInterval.value
form.enabled = true
form.template_id = null
form.extra_headers = {}
form.body_override_mode = 'off'
form.body_override = null
}
function loadFromMonitor(m: ChannelMonitor) {
@@ -253,13 +348,19 @@ function loadFromMonitor(m: ChannelMonitor) {
form.group_name = m.group_name || ''
form.interval_seconds = m.interval_seconds || systemDefaultInterval.value
form.enabled = m.enabled
form.template_id = m.template_id ?? null
form.extra_headers = { ...(m.extra_headers || {}) }
form.body_override_mode = m.body_override_mode || 'off'
form.body_override = m.body_override ? { ...m.body_override } : null
}
// Re-sync form whenever the dialog is opened or the target monitor changes.
// 同时拉取模板列表cache 过的话一次性返回)。
watch(
() => [props.show, props.monitor] as const,
([show, m]) => {
if (!show) return
void loadTemplates()
if (m) loadFromMonitor(m)
else resetForm()
},
@@ -310,6 +411,10 @@ function buildPayload(): CreateParams {
group_name: form.group_name.trim(),
enabled: form.enabled,
interval_seconds: form.interval_seconds,
template_id: form.template_id,
extra_headers: form.extra_headers,
body_override_mode: form.body_override_mode,
body_override: form.body_override,
}
}
@@ -329,9 +434,14 @@ async function handleSubmit() {
const target = editing.value
if (target) {
const { api_key, ...rest } = buildPayload()
const req: UpdateParams = rest
const req: UpdateParams = { ...rest }
// Only send api_key if user typed a new value
if (api_key) req.api_key = api_key
// template_id=null 用 clear_template=true 明确告诉后端清空pointer 语义)
if (form.template_id == null) {
req.clear_template = true
delete req.template_id
}
await adminAPI.channelMonitor.update(target.id, req)
appStore.showSuccess(t('admin.channelMonitor.updateSuccess'))
} else {