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

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

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">
+      <div v-else class="max-h-96 overflow-auto rounded-lg border border-gray-200 dark:border-dark-600">
-        <button
+        <table class="w-full text-sm">
-          v-for="k in keys"
+          <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"
-          type="button"
+              class="cursor-pointer hover:bg-gray-50 dark:hover:bg-dark-700"
               @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>
+              <td class="px-3 py-2 font-medium text-gray-900 dark:text-white">{{ k.name }}</td>
-          <div class="font-mono text-xs text-gray-500 dark:text-gray-400">{{ maskKey(k.key) }}</div>
+              <td class="px-3 py-2 font-mono text-xs text-gray-500 dark:text-gray-400">{{ maskApiKey(k.key) }}</td>
-        </button>
+              <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 {
+const search = ref('')
-  if (!key) return ''
+
-  if (key.length <= 12) return `${key.slice(0, 4)}***`
+watch(() => props.show, (shown) => {
-  return `${key.slice(0, 6)}...${key.slice(-4)}`
+  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>

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 },

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,

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',

frontend/src/i18n/locales/zh.ts

@@ -2216,7 +2216,7 @@ export default {
       form: {
         name: '名称',
         namePlaceholder: '输入监控名称',
-        provider: '供应商',
+        provider: '平台',
         endpoint: '上游地址',
         endpointPlaceholder: 'https://api.example.com',
         useCurrentDomain: '使用当前服务',

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)}`
+}

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>

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) {