feat(channel-monitor): gate UI by feature switch + polish form UX

- AppSidebar 三处菜单项（管理端渠道监控、用户端/个人页渠道状态）按 channel_monitor_enabled 条件展开，关闭时隐藏 - ChannelStatusView setInterval 随开关启停：关闭 clearInterval，开启/未知态自动启动，避免禁用功能后仍在轮询 - MonitorFormDialog provider Select 改为 3 色单选按钮（openai=emerald / anthropic=orange / gemini=sky），i18n 文案供应商 → 平台 / Provider → Platform - MonitorKeyPickerDialog 按钮列表改为 name/key/group 三列表格 + 搜索框，按 key.group.platform === provider 过滤，避免跨平台误选 - form.provider 变化时清空 api_key，修复切换平台仍保留旧 key 的错配 bug - providerPickerClass 抽取到 useChannelMonitorFormat composable，统一 emerald/orange/sky 颜色语义，消除硬编码 Tailwind class 重复 - maskApiKey 工具函数统一（utils/maskApiKey.ts），KeysView 与 MonitorKeyPickerDialog 共用 slice(0,6)...slice(-4) 策略 - bump version to 0.1.114.27
2026-04-21 01:42:58 +08:00
parent 0d01bd908e
commit ba98243cc2
9 changed files with 165 additions and 35 deletions
--- a/frontend/src/components/admin/monitor/MonitorFormDialog.vue
+++ b/frontend/src/components/admin/monitor/MonitorFormDialog.vue
@@ -13,7 +13,20 @@

      <div>
        <label class="input-label">{{ t('admin.channelMonitor.form.provider') }} <span class="text-red-500">*</span></label>
-        <Select v-model="form.provider" :options="providerOptions" />
+        <div class="grid grid-cols-3 gap-3">
+          <button
+            v-for="opt in providerOptions"
+            :key="opt.value"
+            type="button"
+            :aria-pressed="form.provider === opt.value"
+            class="flex items-center justify-center gap-2 rounded-lg border-2 px-3 py-2.5 text-sm font-medium transition-colors"
+            :class="providerPickerClass(opt.value, form.provider === opt.value)"
+            @click="form.provider = opt.value"
+          >
+            <ProviderIcon :provider="opt.value" :size="18" />
+            <span>{{ opt.label }}</span>
+          </button>
+        </div>
      </div>

      <div>
@@ -99,6 +112,7 @@
    :show="showKeyPicker"
    :loading="myKeysLoading"
    :keys="myActiveKeys"
+    :provider="form.provider"
    @close="showKeyPicker = false"
    @pick="pickMyKey"
  />
@@ -119,10 +133,11 @@ import type {
 } from '@/api/admin/channelMonitor'
 import type { ApiKey } from '@/types'
 import BaseDialog from '@/components/common/BaseDialog.vue'
-import Select from '@/components/common/Select.vue'
 import Toggle from '@/components/common/Toggle.vue'
 import ModelTagInput from '@/components/admin/channel/ModelTagInput.vue'
 import MonitorKeyPickerDialog from '@/components/admin/monitor/MonitorKeyPickerDialog.vue'
+import ProviderIcon from '@/components/user/monitor/ProviderIcon.vue'
+import { useChannelMonitorFormat } from '@/composables/useChannelMonitorFormat'
 import {
  PROVIDER_OPENAI,
  PROVIDER_ANTHROPIC,
@@ -142,6 +157,7 @@ const emit = defineEmits<{

 const { t } = useI18n()
 const appStore = useAppStore()
+const { providerPickerClass } = useChannelMonitorFormat()

 // System-configured default interval for new monitors. Falls back to the static
 // constant when public settings haven't loaded yet or store the legacy 0 value.
@@ -184,12 +200,25 @@ const form = reactive<MonitorForm>({
  enabled: true,
 })

-const providerOptions = computed(() => [
+interface ProviderOption {
+  value: Provider
+  label: string
+}
+
+const providerOptions = computed<ProviderOption[]>(() => [
  { value: PROVIDER_OPENAI, label: t('monitorCommon.providers.openai') },
  { value: PROVIDER_ANTHROPIC, label: t('monitorCommon.providers.anthropic') },
  { value: PROVIDER_GEMINI, label: t('monitorCommon.providers.gemini') },
 ])

+// Clear api_key whenever provider changes to avoid cross-provider key mismatch.
+// 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.
+watch(() => form.provider, () => {
+  form.api_key = ''
+})
+
 function resetForm() {
  form.name = ''
  form.provider = PROVIDER_OPENAI
--- a/frontend/src/components/admin/monitor/MonitorKeyPickerDialog.vue
+++ b/frontend/src/components/admin/monitor/MonitorKeyPickerDialog.vue
@@ -2,30 +2,59 @@
  <BaseDialog
    :show="show"
    :title="t('admin.channelMonitor.form.selectKeyTitle')"
-    width="normal"
+    width="wide"
    @close="$emit('close')"
  >
    <div class="space-y-3">
      <p class="text-xs text-gray-500 dark:text-gray-400">
        {{ t('admin.channelMonitor.form.selectKeyHint') }}
      </p>
+
+      <div class="relative">
+        <input
+          v-model="search"
+          type="text"
+          class="input pl-9"
+          :placeholder="t('keys.searchPlaceholder')"
+        />
+        <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="11" cy="11" r="8" /><path d="m21 21-4.35-4.35" />
+        </svg>
+      </div>
+
      <div v-if="loading" class="py-6 text-center text-sm text-gray-500">
        {{ t('common.loading') }}
      </div>
-      <div v-else-if="keys.length === 0" class="py-6 text-center text-sm text-gray-500">
+      <div v-else-if="filteredKeys.length === 0" class="py-6 text-center text-sm text-gray-500">
        {{ t('admin.channelMonitor.form.noActiveKey') }}
      </div>
-      <div v-else class="max-h-72 space-y-1 overflow-auto">
-        <button
-          v-for="k in keys"
-          :key="k.id"
-          type="button"
-          @click="$emit('pick', k)"
-          class="block w-full rounded-lg border border-gray-200 px-3 py-2 text-left text-sm transition-colors hover:bg-gray-50 dark:border-dark-600 dark:hover:bg-dark-700"
-        >
-          <div class="font-medium text-gray-900 dark:text-white">{{ k.name }}</div>
-          <div class="font-mono text-xs text-gray-500 dark:text-gray-400">{{ maskKey(k.key) }}</div>
-        </button>
+      <div v-else class="max-h-96 overflow-auto rounded-lg border border-gray-200 dark:border-dark-600">
+        <table class="w-full text-sm">
+          <thead class="bg-gray-50 dark:bg-dark-800 sticky top-0 z-10">
+            <tr class="text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
+              <th class="px-3 py-2">{{ t('common.name') }}</th>
+              <th class="px-3 py-2">{{ t('keys.apiKey') }}</th>
+              <th class="px-3 py-2">{{ t('keys.group') }}</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200 dark:divide-dark-700">
+            <tr
+              v-for="k in filteredKeys"
+              :key="k.id"
+              class="cursor-pointer hover:bg-gray-50 dark:hover:bg-dark-700"
+              @click="$emit('pick', k)"
+            >
+              <td class="px-3 py-2 font-medium text-gray-900 dark:text-white">{{ k.name }}</td>
+              <td class="px-3 py-2 font-mono text-xs text-gray-500 dark:text-gray-400">{{ maskApiKey(k.key) }}</td>
+              <td class="px-3 py-2">
+                <span v-if="k.group" class="inline-flex items-center rounded-md bg-gray-100 px-2 py-0.5 text-xs text-gray-700 dark:bg-dark-700 dark:text-gray-300">
+                  {{ k.group.name }}
+                </span>
+                <span v-else class="text-xs text-gray-400">—</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
      </div>
    </div>
    <template #footer>
@@ -39,14 +68,18 @@
 </template>

 <script setup lang="ts">
+import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import type { ApiKey } from '@/types'
+import type { Provider } from '@/api/admin/channelMonitor'
 import BaseDialog from '@/components/common/BaseDialog.vue'
+import { maskApiKey } from '@/utils/maskApiKey'

-defineProps<{
+const props = defineProps<{
  show: boolean
  loading: boolean
  keys: ApiKey[]
+  provider: Provider
 }>()

 defineEmits<{
@@ -56,9 +89,22 @@ defineEmits<{

 const { t } = useI18n()

-function maskKey(key: string): string {
-  if (!key) return ''
-  if (key.length <= 12) return `${key.slice(0, 4)}***`
-  return `${key.slice(0, 6)}...${key.slice(-4)}`
-}
+const search = ref('')
+
+watch(() => props.show, (shown) => {
+  if (!shown) search.value = ''
+})
+
+const filteredKeys = computed<ApiKey[]>(() => {
+  const q = search.value.trim().toLowerCase()
+  return props.keys.filter((k) => {
+    if (k.group?.platform !== props.provider) return false
+    if (!q) return true
+    return (
+      k.name.toLowerCase().includes(q) ||
+      k.key.toLowerCase().includes(q) ||
+      (k.group?.name || '').toLowerCase().includes(q)
+    )
+  })
+})
 </script>