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>
--- a/frontend/src/components/layout/AppSidebar.vue
+++ b/frontend/src/components/layout/AppSidebar.vue
@@ -611,7 +611,9 @@ const userNavItems = computed((): NavItem[] => {
    { path: '/dashboard', label: t('nav.dashboard'), icon: DashboardIcon },
    { path: '/keys', label: t('nav.apiKeys'), icon: KeyIcon },
    { path: '/usage', label: t('nav.usage'), icon: ChartIcon, hideInSimpleMode: true },
-    { path: '/monitor', label: t('nav.channelStatus'), icon: SignalIcon },
+    ...(appStore.cachedPublicSettings?.channel_monitor_enabled
+      ? [{ path: '/monitor', label: t('nav.channelStatus'), icon: SignalIcon }]
+      : []),
    { path: '/subscriptions', label: t('nav.mySubscriptions'), icon: CreditCardIcon, hideInSimpleMode: true },
    ...(appStore.cachedPublicSettings?.payment_enabled
      ? [
@@ -650,7 +652,9 @@ const personalNavItems = computed((): NavItem[] => {
  const items: NavItem[] = [
    { path: '/keys', label: t('nav.apiKeys'), icon: KeyIcon },
    { path: '/usage', label: t('nav.usage'), icon: ChartIcon, hideInSimpleMode: true },
-    { path: '/monitor', label: t('nav.channelStatus'), icon: SignalIcon },
+    ...(appStore.cachedPublicSettings?.channel_monitor_enabled
+      ? [{ path: '/monitor', label: t('nav.channelStatus'), icon: SignalIcon }]
+      : []),
    { path: '/subscriptions', label: t('nav.mySubscriptions'), icon: CreditCardIcon, hideInSimpleMode: true },
    ...(appStore.cachedPublicSettings?.payment_enabled
      ? [
@@ -715,7 +719,9 @@ const adminNavItems = computed((): NavItem[] => {
      expandOnly: true,
      children: [
        { path: '/admin/channels/pricing', label: t('nav.channelPricing'), icon: PriceTagIcon },
-        { path: '/admin/channels/monitor', label: t('nav.channelMonitor'), icon: SignalIcon },
+        ...(appStore.cachedPublicSettings?.channel_monitor_enabled
+          ? [{ path: '/admin/channels/monitor', label: t('nav.channelMonitor'), icon: SignalIcon }]
+          : []),
      ],
    },
    { path: '/admin/subscriptions', label: t('nav.subscriptions'), icon: CreditCardIcon, hideInSimpleMode: true },
--- a/frontend/src/composables/useChannelMonitorFormat.ts
+++ b/frontend/src/composables/useChannelMonitorFormat.ts
@@ -76,6 +76,32 @@ export function useChannelMonitorFormat() {
    }
  }

+  /**
+   * Tailwind class for a provider radio-button-style picker (active/inactive state).
+   * Reuses the same emerald/orange/sky palette as providerBadgeClass to keep
+   * visual semantics consistent across badges and pickers.
+   */
+  function providerPickerClass(p: Provider | string, active: boolean): string {
+    switch (p) {
+      case PROVIDER_OPENAI:
+        return active
+          ? 'border-emerald-500 bg-emerald-50 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300 dark:border-emerald-400'
+          : 'border-gray-200 bg-white text-gray-600 hover:border-emerald-300 hover:text-emerald-700 dark:border-dark-700 dark:bg-dark-800 dark:text-gray-400 dark:hover:border-emerald-500/50'
+      case PROVIDER_ANTHROPIC:
+        return active
+          ? 'border-orange-500 bg-orange-50 text-orange-700 dark:bg-orange-500/15 dark:text-orange-300 dark:border-orange-400'
+          : 'border-gray-200 bg-white text-gray-600 hover:border-orange-300 hover:text-orange-700 dark:border-dark-700 dark:bg-dark-800 dark:text-gray-400 dark:hover:border-orange-500/50'
+      case PROVIDER_GEMINI:
+        return active
+          ? 'border-sky-500 bg-sky-50 text-sky-700 dark:bg-sky-500/15 dark:text-sky-300 dark:border-sky-400'
+          : 'border-gray-200 bg-white text-gray-600 hover:border-sky-300 hover:text-sky-700 dark:border-dark-700 dark:bg-dark-800 dark:text-gray-400 dark:hover:border-sky-500/50'
+      default:
+        return active
+          ? 'border-gray-400 bg-gray-50 text-gray-700 dark:border-dark-500 dark:bg-dark-700 dark:text-gray-200'
+          : 'border-gray-200 bg-white text-gray-600 hover:border-gray-300 dark:border-dark-700 dark:bg-dark-800 dark:text-gray-400'
+    }
+  }
+
  function formatLatency(ms: number | null | undefined): string {
    if (ms == null) return t('monitorCommon.latencyEmpty')
    return String(Math.round(ms))
@@ -110,6 +136,7 @@ export function useChannelMonitorFormat() {
    statusBadgeClass,
    providerLabel,
    providerBadgeClass,
+    providerPickerClass,
    formatLatency,
    formatPercent,
    formatAvailability,
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -2137,7 +2137,7 @@ export default {
      form: {
        name: 'Name',
        namePlaceholder: 'Enter monitor name',
-        provider: 'Provider',
+        provider: 'Platform',
        endpoint: 'Endpoint',
        endpointPlaceholder: 'https://api.example.com',
        useCurrentDomain: 'Use current service',
--- a/frontend/src/i18n/locales/zh.ts
+++ b/frontend/src/i18n/locales/zh.ts
@@ -2216,7 +2216,7 @@ export default {
      form: {
        name: '名称',
        namePlaceholder: '输入监控名称',
-        provider: '供应商',
+        provider: '平台',
        endpoint: '上游地址',
        endpointPlaceholder: 'https://api.example.com',
        useCurrentDomain: '使用当前服务',
--- a/frontend/src/utils/maskApiKey.ts
+++ b/frontend/src/utils/maskApiKey.ts
@@ -0,0 +1,6 @@
+// Mask an API key for display: reveals first 6 + last 4; short keys (≤12) show `first 4 + ***`.
+export function maskApiKey(key: string): string {
+  if (!key) return ''
+  if (key.length <= 12) return `${key.slice(0, 4)}***`
+  return `${key.slice(0, 6)}...${key.slice(-4)}`
+}
--- a/frontend/src/views/user/ChannelStatusView.vue
+++ b/frontend/src/views/user/ChannelStatusView.vue
@@ -160,14 +160,34 @@ watch(items, () => {
  void ensureDetailsForWindow()
 })

+function startTimer() {
+  if (countdownTimer !== undefined) return
+  countdownTimer = setInterval(tick, 1000) as unknown as number
+}
+
+function stopTimer() {
+  if (countdownTimer !== undefined) {
+    clearInterval(countdownTimer)
+    countdownTimer = undefined
+  }
+}
+
+watch(
+  () => appStore.cachedPublicSettings?.channel_monitor_enabled,
+  (enabled) => {
+    if (enabled === false) stopTimer()
+    else startTimer()
+  },
+)
+
 // ── Lifecycle ──
 onMounted(() => {
  void reload(false)
-  countdownTimer = setInterval(tick, 1000) as unknown as number
+  if (appStore.cachedPublicSettings?.channel_monitor_enabled !== false) startTimer()
 })

 onBeforeUnmount(() => {
-  if (countdownTimer !== undefined) clearInterval(countdownTimer)
+  stopTimer()
  if (abortController) abortController.abort()
 })
 </script>
--- a/frontend/src/views/user/KeysView.vue
+++ b/frontend/src/views/user/KeysView.vue
@@ -61,7 +61,7 @@
          <template #cell-key="{ value, row }">
            <div class="flex items-center gap-2">
              <code class="code text-xs">
-                {{ maskKey(value) }}
+                {{ maskApiKey(value) }}
              </code>
              <button
                @click="copyToClipboard(value, row.id)"
@@ -1072,6 +1072,7 @@ import TablePageLayout from '@/components/layout/TablePageLayout.vue'
 import type { Column } from '@/components/common/types'
 import type { BatchApiKeyUsageStats } from '@/api/usage'
 import { formatDateTime } from '@/utils/format'
+import { maskApiKey } from '@/utils/maskApiKey'

 // Helper to format date for datetime-local input
 const formatDateTimeLocal = (isoDate: string): string => {
@@ -1260,11 +1261,6 @@ const filteredGroupOptions = computed(() => {
  })
 })

-const maskKey = (key: string): string => {
-  if (key.length <= 12) return key
-  return `${key.slice(0, 8)}...${key.slice(-4)}`
-}
-
 const copyToClipboard = async (text: string, keyId: number) => {
  const success = await clipboardCopy(text, t('keys.copied'))
  if (success) {