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/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>