From e1193212b50c292468a284bb397b7f6fa0ded466 Mon Sep 17 00:00:00 2001
From: erio <asakifeng@gmail.com>
Date: Tue, 21 Apr 2026 15:37:57 +0800
Subject: [PATCH] feat(monitor): switch headers input to key-value rows
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- AdvancedRequestConfig 把 headers textarea 换成行式：每行 name 输入 + value 输入
  + 删除按钮，底部「+ 添加 Header」。直观区分名/值，不用再一行 "Key: Value" 自己拆。
- 校验下放到行级：name 含空格或冒号才报错，未填仅占位不报错（避免输入时频繁红字）。
- 外部 props 同值不回写，避免 commit 后行被重排。
- chore: 移除 CLAUDE.md 里 silentflower remote 行（不再追踪）。
---
 .../monitor/MonitorAdvancedRequestConfig.vue  | 137 +++++++++++++-----
 frontend/src/i18n/locales/en.ts               |   6 +-
 frontend/src/i18n/locales/zh.ts               |   6 +-
 3 files changed, 111 insertions(+), 38 deletions(-)

diff --git a/frontend/src/components/admin/monitor/MonitorAdvancedRequestConfig.vue b/frontend/src/components/admin/monitor/MonitorAdvancedRequestConfig.vue
index fb503a49..0d6b4ace 100644
--- a/frontend/src/components/admin/monitor/MonitorAdvancedRequestConfig.vue
+++ b/frontend/src/components/admin/monitor/MonitorAdvancedRequestConfig.vue
@@ -1,15 +1,52 @@
 <template>
   <div class="space-y-4">
-    <!-- Headers textarea -->
+    <!-- Headers key-value rows -->
     <div>
       <label class="input-label">{{ t('admin.channelMonitor.advanced.headers') }}</label>
-      <textarea
-        v-model="headersText"
-        rows="4"
-        :placeholder="t('admin.channelMonitor.advanced.headersPlaceholder')"
-        class="input font-mono text-xs"
-        @blur="commitHeaders"
-      />
+      <div class="space-y-1.5">
+        <div
+          v-for="(row, i) in headerRows"
+          :key="i"
+          class="flex items-center gap-2"
+        >
+          <input
+            v-model="row.name"
+            type="text"
+            spellcheck="false"
+            :placeholder="t('admin.channelMonitor.advanced.headerNamePlaceholder')"
+            class="input w-52 flex-none font-mono text-xs"
+            @blur="commitHeaders"
+          />
+          <input
+            v-model="row.value"
+            type="text"
+            spellcheck="false"
+            :placeholder="t('admin.channelMonitor.advanced.headerValuePlaceholder')"
+            class="input flex-1 font-mono text-xs"
+            @blur="commitHeaders"
+          />
+          <button
+            type="button"
+            class="flex-none rounded p-1 text-gray-400 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-500/10 dark:hover:text-red-400"
+            :title="t('common.delete')"
+            @click="removeRow(i)"
+          >
+            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        <button
+          type="button"
+          class="inline-flex items-center gap-1 rounded border border-dashed border-gray-300 px-2 py-1 text-xs text-gray-500 hover:border-primary-400 hover:text-primary-600 dark:border-dark-600 dark:text-gray-400 dark:hover:border-primary-500 dark:hover:text-primary-400"
+          @click="addRow"
+        >
+          <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+          </svg>
+          {{ t('admin.channelMonitor.advanced.headerAddRow') }}
+        </button>
+      </div>
       <p v-if="headersError" class="mt-1 text-xs text-red-500">{{ headersError }}</p>
       <p v-else class="mt-1 text-xs text-gray-400">
         {{ t('admin.channelMonitor.advanced.headersHint') }}
@@ -85,51 +122,79 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 
-// ---- Headers textarea (Key: Value per line) ----
-const headersText = ref(serializeHeaders(props.extraHeaders))
+// ---- Headers key-value rows ----
+interface HeaderRow {
+  name: string
+  value: string
+}
+
+const headerRows = ref<HeaderRow[]>(toRows(props.extraHeaders))
 const headersError = ref('')
 
 watch(
   () => props.extraHeaders,
   (v) => {
-    // 外部重置时（如切换平台 / 应用模板）同步文本
-    headersText.value = serializeHeaders(v)
+    // 外部重置时（切换平台 / 应用模板）同步行。
+    // 同值不回写，避免每次 commit 都把行重排。
+    if (!isSameHeaderMap(toMap(headerRows.value), v)) {
+      headerRows.value = toRows(v)
+    }
     headersError.value = ''
   },
 )
 
+function toRows(h: Record<string, string>): HeaderRow[] {
+  const entries = Object.entries(h || {})
+  if (entries.length === 0) return [{ name: '', value: '' }]
+  return entries.map(([name, value]) => ({ name, value }))
+}
+
+function toMap(rows: HeaderRow[]): Record<string, string> {
+  const out: Record<string, string> = {}
+  for (const row of rows) {
+    const name = row.name.trim()
+    if (name === '') continue
+    out[name] = row.value
+  }
+  return out
+}
+
+function isSameHeaderMap(a: Record<string, string>, b: Record<string, string>): boolean {
+  const ak = Object.keys(a)
+  const bk = Object.keys(b || {})
+  if (ak.length !== bk.length) return false
+  for (const k of ak) {
+    if (a[k] !== b[k]) return false
+  }
+  return true
+}
+
 function commitHeaders() {
-  const parsed = parseHeaders(headersText.value)
-  if (parsed.error) {
-    headersError.value = parsed.error
-    return
+  // 空白 name + 空白 value 的行允许保留作为"占位新行"，不报错；
+  // name 非空但 value 为空（或反之）都视为用户正在编辑，同样不报错。
+  // 只在 name 里含冒号这种明显不合法时兜一下。
+  for (const row of headerRows.value) {
+    const name = row.name.trim()
+    if (name === '') continue
+    if (name.includes(':') || /\s/.test(name)) {
+      headersError.value = t('admin.channelMonitor.advanced.headerNameInvalid', { name })
+      return
+    }
   }
   headersError.value = ''
-  emit('update:extraHeaders', parsed.headers)
+  emit('update:extraHeaders', toMap(headerRows.value))
 }
 
-function serializeHeaders(h: Record<string, string>): string {
-  return Object.entries(h || {})
-    .map(([k, v]) => `${k}: ${v}`)
-    .join('\n')
+function addRow() {
+  headerRows.value.push({ name: '', value: '' })
 }
 
-function parseHeaders(raw: string): { headers: Record<string, string>; error: string } {
-  const result: Record<string, string> = {}
-  const lines = raw.split(/\r?\n/).map((l) => l.trim()).filter(Boolean)
-  for (const line of lines) {
-    const idx = line.indexOf(':')
-    if (idx <= 0) {
-      return { headers: {}, error: t('admin.channelMonitor.advanced.headersParseError', { line }) }
-    }
-    const key = line.slice(0, idx).trim()
-    const value = line.slice(idx + 1).trim()
-    if (!key) {
-      return { headers: {}, error: t('admin.channelMonitor.advanced.headersParseError', { line }) }
-    }
-    result[key] = value
+function removeRow(index: number) {
+  headerRows.value.splice(index, 1)
+  if (headerRows.value.length === 0) {
+    headerRows.value.push({ name: '', value: '' })
   }
-  return { headers: result, error: '' }
+  commitHeaders()
 }
 
 // ---- Body mode + JSON ----
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index d26462b3..eb401ae2 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -2163,7 +2163,11 @@ export default {
         sectionHint: 'Customize request headers and body to bypass upstream client-detection (e.g. "only Claude Code clients allowed").',
         headers: 'Custom request headers',
         headersPlaceholder: 'User-Agent: claude-cli/1.0.83 (external, cli)\nx-app: cli\nanthropic-beta: claude-code-20250219',
-        headersHint: 'One Key: Value per line; merged on top of adapter defaults (user wins). Hop-by-hop headers (Host / Content-Length / ...) are ignored.',
+        headerNamePlaceholder: 'Header name',
+        headerValuePlaceholder: 'Value',
+        headerAddRow: 'Add header',
+        headerNameInvalid: 'Header name cannot contain whitespace or colon: {name}',
+        headersHint: 'Merged on top of adapter defaults (user wins). Hop-by-hop headers (Host / Content-Length / ...) are ignored.',
         headersParseError: 'Cannot parse line: {line}',
         bodyMode: 'Body handling',
         bodyModeOff: 'Default',
diff --git a/frontend/src/i18n/locales/zh.ts b/frontend/src/i18n/locales/zh.ts
index 9ac1c20f..d38b5034 100644
--- a/frontend/src/i18n/locales/zh.ts
+++ b/frontend/src/i18n/locales/zh.ts
@@ -2242,7 +2242,11 @@ export default {
         sectionHint: '自定义请求头和请求体，用于突破上游的客户端识别限制（如仅允许 Claude Code 客户端）。',
         headers: '自定义请求头',
         headersPlaceholder: 'User-Agent: claude-cli/1.0.83 (external, cli)\nx-app: cli\nanthropic-beta: claude-code-20250219',
-        headersHint: '每行一对 Key: Value；会与默认请求头合并，用户值优先。hop-by-hop 类 header（Host/Content-Length/...）会被忽略。',
+        headerNamePlaceholder: 'Header 名',
+        headerValuePlaceholder: 'Value',
+        headerAddRow: '添加 Header',
+        headerNameInvalid: 'Header 名不能包含空格或冒号：{name}',
+        headersHint: '与默认请求头合并，用户值优先。hop-by-hop 类 header（Host/Content-Length/...）会被忽略。',
         headersParseError: '无法解析这一行：{line}',
         bodyMode: '请求体处理',
         bodyModeOff: '默认',