设置页新增AI Tab:保险丝/grok工具/模型治理迁入

src/api/aigateway.ts

@@ -1,6 +1,7 @@
 import { request } from './request'
 import type {
   AiCallLog,
+  AiCatalogModel,
   AiChannel,
   AiContentLog,
   AiKey,
@@ -98,6 +99,11 @@ export function listAiModels(): Promise<AiModel[]> {
   return request<{ items: AiModel[] }>('/ai-models').then((r) => r.items)
 }
 
+/** 聚合模型目录(含能力,启用渠道去重;不受「过滤弃用」影响),黑名单添加弹窗用 */
+export function listAiModelCatalog(): Promise<AiCatalogModel[]> {
+  return request<{ items: AiCatalogModel[] }>('/ai-model-catalog').then((r) => r.items)
+}
+
 // ---- 网关全局设置 ----
 
 export function getAiSettings(): Promise<AiSettings> {

src/components/instance/VnicPanel.vue

@@ -27,9 +27,15 @@ const emit = defineEmits<{ changed: [] }>()
 const message = useToast()
 const vnics = useAsync(() => listVnics(props.cfgId, props.instanceId, props.region))
 
+/** 附加已受理但 OCI 挂载列表有可见性延迟：限时轮询等新卡入列，入列后交由过渡态轮询接管 */
+const expectAtLeast = ref(0)
+let expectUntil = 0
+
 useTransientPoll(
   () => vnics.data.value,
-  (list) => !!list?.some((v) => ATTACHMENT_TRANSIENT_STATES.includes(v.lifecycleState)),
+  (list) =>
+    !!list?.some((v) => ATTACHMENT_TRANSIENT_STATES.includes(v.lifecycleState)) ||
+    ((list?.length ?? 0) < expectAtLeast.value && Date.now() < expectUntil),
   () => void vnics.run({ silent: true }),
 )
 
@@ -44,6 +50,12 @@ function refresh() {
   emit('changed')
 }
 
+function onAttached() {
+  expectAtLeast.value = (vnics.data.value ?? []).length + 1
+  expectUntil = Date.now() + 90_000
+  refresh()
+}
+
 async function doDetach(attachmentId: string) {
   detaching.value = attachmentId
   try {
@@ -174,7 +186,7 @@ defineExpose({ refresh: () => vnics.run() })
               <td colspan="6" class="px-4.5 pt-0 pb-2.5">
                 <div class="flex flex-wrap items-center gap-1.5">
                   <span class="text-[10.5px] font-medium tracking-wider text-ink-3">IPV6</span>
-                  <template v-if="v.vnicId">
+                  <template v-if="v.vnicId && v.lifecycleState === 'ATTACHED'">
                     <span
                       v-for="addr in v.ipv6Addresses ?? []"
                       :key="addr"
@@ -204,7 +216,9 @@ defineExpose({ refresh: () => vnics.run() })
                       + IPv6
                     </NButton>
                   </template>
-                  <span v-else class="text-xs text-ink-3">无 · 附加完成后可添加</span>
+                  <span v-else class="text-xs text-ink-3">
+                    {{ v.vnicId ? '网卡未在挂载状态,不可操作 IPv6' : '无 · 附加完成后可添加' }}
+                  </span>
                 </div>
               </td>
             </tr>
@@ -221,7 +235,7 @@ defineExpose({ refresh: () => vnics.run() })
 
     <FootNote>
       附加须实例运行中且 shape 有空余 VNIC 配额 · 主网卡不可分离 · 每卡 IPv6
-      可多个（要求所在子网已启用 IPv6）· 次要网卡在 OS 内需自行配置 IP（dhclient / netplan）
+      可多个（要求所在子网已启用 IPv6）
     </FootNote>
 
     <AttachVnicModal
@@ -230,7 +244,7 @@ defineExpose({ refresh: () => vnics.run() })
       :instance-id="instanceId"
       :region="region"
       :attached-count="(vnics.data.value ?? []).length"
-      @attached="refresh"
+      @attached="onAttached"
     />
   </div>
 </template>

src/components/settings/AiSettingsTab.vue

@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import { NButton, NInputNumber, NSpin, NSwitch } from 'naive-ui'
+import { reactive, ref, watch } from 'vue'
+
+import { getAiSettings, listAiBlacklist, removeAiBlacklist, updateAiSettings } from '@/api/aigateway'
+import BlacklistAddModal from '@/components/settings/BlacklistAddModal.vue'
+import { useAsync } from '@/composables/useAsync'
+import { fmtTime } from '@/composables/useFormat'
+import { useToast } from '@/composables/useToast'
+import type { AiSettings } from '@/types/api'
+
+const toast = useToast()
+
+const settings = useAsync(getAiSettings)
+const blacklist = useAsync(listAiBlacklist)
+
+/** 本地表单镜像:开关即时提交,数字输入失焦/回车提交 */
+const form = reactive<AiSettings>({
+  filterDeprecated: false,
+  streamGuardEnabled: true,
+  streamGuardKB: 60,
+  grokWebSearch: true,
+  grokXSearch: true,
+})
+
+watch(
+  () => settings.data.value,
+  (v) => {
+    if (v) Object.assign(form, v)
+  },
+  { immediate: true },
+)
+
+const saving = ref(false)
+
+/** 全量 PUT;失败回滚到服务端最新值 */
+async function save() {
+  saving.value = true
+  try {
+    Object.assign(form, await updateAiSettings({ ...form }))
+    toast.success('已保存,即时生效')
+  } catch (e) {
+    toast.error(e instanceof Error ? e.message : '保存失败')
+    void settings.run({ silent: true })
+  } finally {
+    saving.value = false
+  }
+}
+
+function setField<K extends keyof AiSettings>(key: K, value: AiSettings[K]) {
+  form[key] = value
+  void save()
+}
+
+/** 阈值失焦/回车提交;NInputNumber 已按 min/max 收敛 */
+function commitGuardKB(v: number | null) {
+  if (v == null || v === form.streamGuardKB) return
+  setField('streamGuardKB', v)
+}
+
+const removing = ref(0)
+async function doRemove(id: number, name: string) {
+  removing.value = id
+  try {
+    await removeAiBlacklist(id)
+    toast.success(`已移出黑名单:${name},重新同步渠道后恢复`)
+    void blacklist.run({ silent: true })
+  } catch (e) {
+    toast.error(e instanceof Error ? e.message : '移出失败')
+  } finally {
+    removing.value = 0
+  }
+}
+
+const showAdd = ref(false)
+function onBlacklistChanged() {
+  void blacklist.run({ silent: true })
+}
+</script>
+
+<template>
+  <div v-if="settings.loading.value && !settings.data.value" class="panel flex max-w-[880px] items-center justify-center py-20">
+    <NSpin size="small" />
+  </div>
+  <div v-else class="flex max-w-[880px] flex-col gap-4">
+    <!-- 流式保险丝 -->
+    <div class="panel">
+      <div class="border-b border-line-soft px-4.5 py-3.5">
+        <div class="text-sm font-semibold">流式保险丝</div>
+      </div>
+      <div class="px-4.5">
+        <div class="flex items-center justify-between gap-3 py-3.5">
+          <div class="min-w-0">
+            <div class="text-[13px] font-medium">instructions + tools 阈值</div>
+            <div class="mt-0.5 text-xs text-ink-3">
+              系统提示与工具定义合计超过阈值的流式请求,预防性改走非流式上游并合成
+              SSE:丢增量输出,保会话不中断
+            </div>
+          </div>
+          <div class="flex flex-none items-center gap-3">
+            <NInputNumber
+              :value="form.streamGuardKB"
+              :min="1"
+              :max="1024"
+              :show-button="false"
+              :disabled="!form.streamGuardEnabled"
+              size="small"
+              class="w-24"
+              :update-value-on-input="false"
+              @update:value="commitGuardKB"
+            >
+              <template #suffix><span class="text-xs text-ink-3">KB</span></template>
+            </NInputNumber>
+            <NSwitch
+              :value="form.streamGuardEnabled"
+              size="small"
+              :loading="saving"
+              @update:value="(v: boolean) => setField('streamGuardEnabled', v)"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="border-t border-line-soft bg-wash px-4.5 py-2.5 text-xs leading-relaxed text-ink-3">
+        修改即时生效,无需重启 · 仅作用于 Responses 直通面;Chat / Messages 已有断流自动重做兜底
+      </div>
+    </div>
+
+    <!-- grok 服务端搜索工具 -->
+    <div class="panel">
+      <div class="border-b border-line-soft px-4.5 py-3.5">
+        <div class="text-sm font-semibold">grok 服务端搜索工具</div>
+        <div class="mt-0.5 text-xs text-ink-3">
+          仅对 <span class="mono">xai.</span> 前缀模型的对话请求生效;请求 tools
+          已包含同名工具时保持原样,不覆盖参数
+        </div>
+      </div>
+      <div class="px-4.5">
+        <div class="flex items-center justify-between gap-3 border-b border-line-soft py-3">
+          <div class="text-[13px] font-medium">默认开启 web_search</div>
+          <NSwitch
+            :value="form.grokWebSearch"
+            size="small"
+            :loading="saving"
+            @update:value="(v: boolean) => setField('grokWebSearch', v)"
+          />
+        </div>
+        <div class="flex items-center justify-between gap-3 py-3">
+          <div class="text-[13px] font-medium">默认开启 x_search</div>
+          <NSwitch
+            :value="form.grokXSearch"
+            size="small"
+            :loading="saving"
+            @update:value="(v: boolean) => setField('grokXSearch', v)"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- 模型治理(自 AI 网关页迁入) -->
+    <div class="panel">
+      <div class="border-b border-line-soft px-4.5 py-3.5">
+        <div class="text-sm font-semibold">模型治理</div>
+      </div>
+      <div class="px-4.5 pb-4">
+        <div class="flex items-center justify-between gap-3 border-b border-line-soft py-3.5">
+          <div class="min-w-0">
+            <div class="text-[13px] font-medium">过滤弃用模型</div>
+            <div class="mt-0.5 text-xs text-ink-3">
+              开启后,已宣布弃用(即使未退役)的模型从模型列表与路由中排除;关闭恢复展示
+            </div>
+          </div>
+          <NSwitch
+            :value="form.filterDeprecated"
+            size="small"
+            :loading="saving"
+            @update:value="(v: boolean) => setField('filterDeprecated', v)"
+          />
+        </div>
+        <div class="flex items-center justify-between gap-3 pt-3.5 pb-1">
+          <div class="min-w-0">
+            <div class="text-[13px] font-medium">模型黑名单</div>
+            <div class="mt-0.5 text-xs text-ink-3">
+              命中的模型从模型列表与路由排除,重新同步渠道后移出才恢复
+            </div>
+          </div>
+          <NButton size="tiny" quaternary type="primary" @click="showAdd = true">＋ 添加模型</NButton>
+        </div>
+        <table class="mt-1.5 w-full border-collapse">
+          <thead>
+            <tr class="border-y border-line-soft text-left text-xs font-medium text-ink-3">
+              <th class="w-[52%] px-3 py-2">模型</th>
+              <th class="px-3 py-2">加入时间</th>
+              <th class="w-22 px-3 py-2">操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="b in blacklist.data.value ?? []"
+              :key="b.id"
+              class="border-b border-line-soft last:border-b-0"
+            >
+              <td class="px-3 py-2"><span class="mono text-[13px]">{{ b.name }}</span></td>
+              <td class="px-3 py-2 text-xs text-ink-3">{{ fmtTime(b.createdAt) }}</td>
+              <td class="px-3 py-2">
+                <NButton
+                  size="tiny"
+                  quaternary
+                  type="error"
+                  :loading="removing === b.id"
+                  @click="doRemove(b.id, b.name)"
+                >
+                  移出
+                </NButton>
+              </td>
+            </tr>
+            <tr v-if="!(blacklist.data.value ?? []).length">
+              <td colspan="3" class="px-3 py-6 text-center text-xs text-ink-3">
+                黑名单为空;点右上「＋ 添加模型」从聚合模型目录选择
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <BlacklistAddModal
+      v-model:show="showAdd"
+      :blacklisted="(blacklist.data.value ?? []).map((b) => b.name)"
+      @changed="onBlacklistChanged"
+    />
+  </div>
+</template>

src/components/settings/BlacklistAddModal.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { NInput, NModal } from 'naive-ui'
+import { computed, ref, watch } from 'vue'
+
+import { addAiBlacklist, listAiModelCatalog } from '@/api/aigateway'
+import { useToast } from '@/composables/useToast'
+import type { AiCatalogModel } from '@/types/api'
+
+const props = defineProps<{ show: boolean; blacklisted: string[] }>()
+const emit = defineEmits<{ 'update:show': [boolean]; changed: [] }>()
+
+const toast = useToast()
+
+const rows = ref<AiCatalogModel[]>([])
+const loading = ref(false)
+const adding = ref('')
+const filter = ref('')
+
+const CAP_ORDER = ['CHAT', 'EMBEDDING', 'RERANK', 'TTS']
+const CAP_LABEL: Record<string, string> = { CHAT: '对话', EMBEDDING: '向量', RERANK: '重排', TTS: '语音' }
+
+const bannedSet = computed(() => new Set(props.blacklisted))
+
+/** 按能力分组 + 关键字过滤,与渠道「模型列表」弹窗同构 */
+const groups = computed(() => {
+  const kw = filter.value.trim().toLowerCase()
+  const buckets = new Map<string, AiCatalogModel[]>()
+  for (const r of rows.value) {
+    if (kw && !r.name.toLowerCase().includes(kw)) continue
+    buckets.set(r.capability, [...(buckets.get(r.capability) ?? []), r])
+  }
+  const order = [...CAP_ORDER, ...[...buckets.keys()].filter((c) => !CAP_ORDER.includes(c))]
+  return order
+    .filter((cap) => buckets.has(cap))
+    .map((cap) => ({ cap, label: CAP_LABEL[cap] ?? cap, items: buckets.get(cap)! }))
+})
+
+const shownCount = computed(() => groups.value.reduce((n, g) => n + g.items.length, 0))
+
+watch(
+  () => props.show,
+  (show) => {
+    if (show) {
+      filter.value = ''
+      void reload()
+    }
+  },
+)
+
+async function reload() {
+  loading.value = true
+  try {
+    rows.value = await listAiModelCatalog()
+  } catch (e) {
+    toast.error(e instanceof Error ? e.message : '加载失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 弹窗即添加场景,意图明确不做二次确认;可在黑名单中移出恢复 */
+async function doBan(name: string) {
+  if (adding.value) return
+  adding.value = name
+  try {
+    await addAiBlacklist(name)
+    toast.success(`已拉黑:${name}`)
+    emit('changed')
+  } catch (e) {
+    toast.error(e instanceof Error ? e.message : '拉黑失败')
+  } finally {
+    adding.value = ''
+  }
+}
+</script>
+
+<template>
+  <NModal
+    :show="show"
+    preset="card"
+    :style="{ width: '640px', maxWidth: 'calc(100vw - 24px)' }"
+    @update:show="emit('update:show', $event)"
+  >
+    <template #header>
+      <div>
+        <div class="text-[15px] leading-tight font-semibold">添加到模型黑名单</div>
+        <div class="mt-1 text-xs font-normal text-ink-3">聚合全部渠道的可用模型</div>
+      </div>
+    </template>
+
+    <div class="flex items-center gap-2 pb-2">
+      <NInput v-model:value="filter" size="small" placeholder="过滤模型名…" clearable class="min-w-0 flex-1" />
+      <span class="flex-none text-xs whitespace-nowrap text-ink-3">
+        {{ filter ? `${shownCount} / ${rows.length}` : `${rows.length} 个模型` }}
+      </span>
+    </div>
+
+    <div class="-mx-2 max-h-[58vh] overflow-y-auto">
+      <div v-if="loading" class="py-10 text-center text-xs text-ink-3">加载中…</div>
+      <template v-else>
+        <template v-for="g in groups" :key="g.cap">
+          <div class="px-3 pt-3 pb-1 text-[11.5px] font-semibold tracking-wide text-ink-3">
+            {{ g.label }} <span class="font-normal">· {{ g.items.length }}</span>
+          </div>
+          <div
+            v-for="r in g.items"
+            :key="r.name"
+            class="group flex items-center gap-2 rounded-lg px-3 py-[5px] hover:bg-row-hover"
+          >
+            <span class="mono min-w-0 truncate text-[13px]" :class="bannedSet.has(r.name) ? 'text-ink-3/60' : ''">
+              {{ r.name }}
+            </span>
+            <span class="min-w-0 flex-1" />
+            <span v-if="bannedSet.has(r.name)" class="flex-none px-1.5 text-xs text-ink-3/50">已拉黑</span>
+            <button
+              v-else
+              type="button"
+              class="flex-none cursor-pointer rounded-[5px] px-1.5 py-0.5 text-xs text-ink-3/70 group-hover:text-err hover:bg-err/10"
+              :disabled="!!adding"
+              @click="doBan(r.name)"
+            >
+              {{ adding === r.name ? '拉黑中…' : '拉黑' }}
+            </button>
+          </div>
+        </template>
+        <div v-if="!shownCount" class="py-10 text-center text-xs text-ink-3">
+          {{ rows.length ? '无匹配模型' : '暂无模型缓存,先在 AI 网关同步渠道模型' }}
+        </div>
+      </template>
+    </div>
+
+    <div class="mt-1 border-t border-line-soft pt-2.5 text-[11.5px] leading-relaxed text-ink-3">
+      <span class="font-medium text-ink-2">拉黑</span>:全局生效,从全部渠道剔除 ·
+      移出后重新同步渠道恢复 · 已拉黑的模型置灰
+    </div>
+  </NModal>
+</template>

src/types/api.ts

@@ -978,6 +978,18 @@ export interface AiModelCacheItem {
 /** AI 网关全局设置 */
 export interface AiSettings {
   filterDeprecated: boolean
+  /** Responses 流式保险丝:instructions+tools 合计超阈值改非流式上游并合成 SSE */
+  streamGuardEnabled: boolean
+  streamGuardKB: number
+  /** grok(xai. 前缀)服务端搜索工具默认注入;请求已带同名工具时不覆盖 */
+  grokWebSearch: boolean
+  grokXSearch: boolean
+}
+
+/** 聚合模型目录条目(黑名单添加弹窗):能力为 CHAT / EMBEDDING / RERANK / TTS */
+export interface AiCatalogModel {
+  name: string
+  capability: string
 }
 
 export interface AiModelBlacklistItem {

src/views/AiGatewayView.vue

@@ -1,30 +1,21 @@
 <script setup lang="ts">
-import { NButton, NSwitch, useDialog } from 'naive-ui'
 import { computed, ref } from 'vue'
 
 import {
-  addAiBlacklist,
-  getAiSettings,
-  listAiBlacklist,
   listAiChannels,
   listAiKeys,
   listAiModels,
-  removeAiBlacklist,
-  updateAiSettings,
 } from '@/api/aigateway'
 import AiChannelPanel from '@/components/ai/AiChannelPanel.vue'
 import AiKeyPanel from '@/components/ai/AiKeyPanel.vue'
 import { useAsync } from '@/composables/useAsync'
 import { useToast } from '@/composables/useToast'
-import type { AiModelBlacklistItem } from '@/types/api'
 
 const message = useToast()
-const dialog = useDialog()
 
 const keys = useAsync(listAiKeys)
 const channels = useAsync(listAiChannels)
 const models = useAsync(listAiModels)
-const blacklist = useAsync(listAiBlacklist)
 
 const baseUrl = `${window.location.origin}/ai/v1`
 
@@ -59,12 +50,9 @@ const modelGroups = computed(() => {
     .map(([vendor, ids]) => ({ vendor, label: VENDOR_LABEL[vendor] ?? vendor, ids: ids.sort() }))
 })
 
-/** 手风琴:同时只展开一个分组(厂商或黑名单),配合展开区限高控制卡片总高度 */
+/** 手风琴:同时只展开一个厂商,配合展开区限高控制卡片总高度 */
 const expandedVendor = ref<string | null>(null)
 
-/** 黑名单在手风琴中的分组 key(厂商 key 取自模型名前缀,不会与此冲突) */
-const BLACKLIST_KEY = '__blacklist__'
-
 function toggleVendor(vendor: string) {
   expandedVendor.value = expandedVendor.value === vendor ? null : vendor
 }
@@ -90,62 +78,9 @@ async function copyModel(id: string) {
   }
 }
 
-/** 「过滤弃用模型」开关:开启后已宣布弃用(即使未退役)的模型从列表与路由中排除 */
-const filterDeprecated = ref(false)
-void getAiSettings()
-  .then((s) => { filterDeprecated.value = s.filterDeprecated })
-  .catch(() => {})
-
-async function toggleFilterDeprecated(v: boolean) {
-  filterDeprecated.value = v
-  try {
-    const s = await updateAiSettings({ filterDeprecated: v })
-    filterDeprecated.value = s.filterDeprecated
-    message.success(v ? '已过滤弃用模型(列表与路由同时排除)' : '已恢复展示弃用模型')
-  } catch (e) {
-    message.error(e instanceof Error ? e.message : '操作失败')
-    filterDeprecated.value = !v
-  }
-  refreshModels()
-}
-
-function refreshModels() {
-  void models.run({ silent: true })
-  void blacklist.run({ silent: true })
-}
-
 function refreshChannels() {
   void channels.run({ silent: true })
-  refreshModels()
-}
-
-/** 拉黑:删除全部渠道缓存中的该模型,后续同步 / 探测均过滤 */
-function banModel(id: string) {
-  dialog.warning({
-    title: '加入模型黑名单',
-    content: `拉黑「${id}」?全部渠道立即剔除该模型,后续同步与探测不再收录。`,
-    positiveText: '拉黑',
-    negativeText: '取消',
-    onPositiveClick: async () => {
-      try {
-        await addAiBlacklist(id)
-        message.success(`已拉黑:${id}`)
-      } catch (e) {
-        message.error(e instanceof Error ? e.message : '操作失败')
-      }
-      refreshModels()
-    },
-  })
-}
-
-async function unbanModel(b: AiModelBlacklistItem) {
-  try {
-    await removeAiBlacklist(b.id)
-    message.success(`已移出黑名单:${b.name},重新同步渠道后恢复`)
-  } catch (e) {
-    message.error(e instanceof Error ? e.message : '操作失败')
-  }
-  refreshModels()
+  void models.run({ silent: true })
 }
 </script>
 
@@ -186,18 +121,9 @@ async function unbanModel(b: AiModelBlacklistItem) {
         <div class="flex items-center justify-between border-b border-line-soft px-4.5 py-3">
           <div>
             <div class="text-sm font-semibold">可用模型</div>
-            <div class="mt-0.5 text-xs text-ink-3">按厂商分组;点击厂商展开,点击模型名复制,✕ 加入黑名单</div>
-          </div>
-          <div class="flex flex-none items-center gap-3">
-            <label
-              class="flex cursor-pointer items-center gap-1.5 text-xs text-ink-3"
-              title="开启后,已宣布弃用(即使未退役)的模型从模型列表与路由中排除;关闭恢复"
-            >
-              过滤弃用
-              <NSwitch size="small" :value="filterDeprecated" @update:value="toggleFilterDeprecated" />
-            </label>
-            <span class="text-xs text-ink-3">{{ models.data.value?.length ?? '…' }} 个</span>
+            <div class="mt-0.5 text-xs text-ink-3">按厂商分组;点击厂商展开,点击模型名复制</div>
           </div>
+          <span class="text-xs text-ink-3">{{ models.data.value?.length ?? '…' }} 个</span>
         </div>
         <div class="px-4.5 py-1.5">
           <div
@@ -238,56 +164,9 @@ async function unbanModel(b: AiModelBlacklistItem) {
                 >
                   {{ id }}
                 </button>
-                <button
-                  type="button"
-                  class="cursor-pointer self-stretch pr-1.5 pl-0.5 text-ink-3 hover:text-err"
-                  :title="`加入黑名单:${id}`"
-                  @click="banModel(id)"
-                >
-                  <svg
-                    class="h-2.5 w-2.5"
-                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"
-                    stroke-linecap="round" stroke-linejoin="round"
-                  >
-                    <path d="M18 6 6 18M6 6l12 12" />
-                  </svg>
-                </button>
               </span>
             </div>
           </div>
-          <div v-if="blacklist.data.value?.length" class="border-b border-line-soft py-1 last:border-b-0">
-            <button
-              type="button"
-              class="flex w-full cursor-pointer items-center gap-2 py-1.5 text-left"
-              @click="toggleVendor(BLACKLIST_KEY)"
-            >
-              <svg
-                class="h-3 w-3 flex-none text-ink-3 transition-transform"
-                :class="expandedVendor === BLACKLIST_KEY ? 'rotate-90' : ''"
-                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"
-                stroke-linecap="round" stroke-linejoin="round"
-              >
-                <path d="m9 18 6-6-6-6" />
-              </svg>
-              <span class="text-[13px] font-medium">模型黑名单</span>
-              <span class="text-xs text-ink-3">{{ blacklist.data.value.length }} 个</span>
-            </button>
-            <div v-if="expandedVendor === BLACKLIST_KEY" class="pb-2 pl-5">
-              <div class="mb-1.5 text-xs text-ink-3">同步与探测均过滤;点击移出,重新同步渠道后恢复入池</div>
-              <div class="flex max-h-36 flex-wrap content-start gap-1.5 overflow-y-auto">
-                <button
-                  v-for="b in blacklist.data.value"
-                  :key="b.id"
-                  type="button"
-                  class="mono cursor-pointer rounded-[5px] border border-err/30 bg-err/5 px-2 py-0.5 text-[11.5px] text-ink-3 line-through hover:border-err hover:text-err"
-                  :title="`移出黑名单:${b.name}`"
-                  @click="unbanModel(b)"
-                >
-                  {{ b.name }}
-                </button>
-              </div>
-            </div>
-          </div>
           <div v-if="models.data.value && !models.data.value.length" class="py-2 text-xs text-ink-3">
             暂无可用模型:请先添加渠道并探测(需租户订阅 GenAI 提供区域)
           </div>

src/views/SettingsView.vue

@@ -20,6 +20,7 @@ import AppInputNumber from '@/components/AppInputNumber.vue'
 import FootNote from '@/components/FootNote.vue'
 import FormField from '@/components/FormField.vue'
 import AboutTab from '@/components/settings/AboutTab.vue'
+import AiSettingsTab from '@/components/settings/AiSettingsTab.vue'
 import AccountSecurityCard from '@/components/settings/AccountSecurityCard.vue'
 import NotifyChannelCard from '@/components/settings/NotifyChannelCard.vue'
 import NotifyTemplateModal from '@/components/settings/NotifyTemplateModal.vue'
@@ -339,6 +340,7 @@ async function sendTest() {
       <NTabPane name="notify" tab="通知" />
       <NTabPane name="task" tab="任务" />
       <NTabPane name="security" tab="安全" />
+      <NTabPane name="ai" tab="AI" />
       <NTabPane name="about" tab="关于" />
     </NTabs>
 
@@ -658,6 +660,9 @@ async function sendTest() {
         </div>
       </div>
 
+    <!-- AI:网关运行时设置(保险丝 / grok 工具默认 / 模型治理) -->
+    <AiSettingsTab v-else-if="tab === 'ai'" />
+
     <!-- 关于:构建信息与项目主页(v-else-if 挂载时才启动粒子动画) -->
     <AboutTab v-else-if="tab === 'about'" />