From bbc8a4f6410835bd256e8bd30d373f31bc1a0811 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Fri, 6 Feb 2026 19:37:20 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20AI=20=E6=9C=8D?=
 =?UTF-8?q?=E5=8A=A1=E7=8A=B6=E6=80=81=E7=9B=91=E6=8E=A7=E5=92=8C=E8=AD=A6?=
 =?UTF-8?q?=E5=91=8A=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- AI 配置页面添加服务健康状态显示（正常/降级/异常）
- 服务异常时显示红色警告卡片，展示错误信息和队列任务数
- 侧边栏 AI 配置入口添加红点警告徽章支持
- DesktopLayout 支持传递 aiServiceError 状态

AI 调用风险处理方案：
- 自动重试 3 次
- 失败后加入队列，后台定时重试
- 页面显示服务状态警告

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/app/brand/ai-config/page.tsx        | 140 ++++++++++++++++++-
 frontend/components/layout/DesktopLayout.tsx |   4 +-
 frontend/components/navigation/Sidebar.tsx   |  36 ++++-
 3 files changed, 173 insertions(+), 7 deletions(-)

diff --git a/frontend/app/brand/ai-config/page.tsx b/frontend/app/brand/ai-config/page.tsx
index 9ebb8dc..ef7b734 100644
--- a/frontend/app/brand/ai-config/page.tsx
+++ b/frontend/app/brand/ai-config/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
 import { Button } from '@/components/ui/Button'
 import { Input } from '@/components/ui/Input'
@@ -16,9 +16,22 @@ import {
   Loader2,
   Info,
   Shield,
-  AlertTriangle
+  AlertTriangle,
+  RefreshCw,
+  Clock
 } from 'lucide-react'
 
+// AI 服务状态类型
+type ServiceStatus = 'healthy' | 'degraded' | 'error' | 'unknown'
+
+interface AIServiceHealth {
+  status: ServiceStatus
+  lastChecked: string | null
+  lastError: string | null
+  failedCount: number // 连续失败次数
+  queuedTasks: number // 队列中等待的任务数
+}
+
 // AI 提供商选项
 const providerOptions = [
   { value: 'oneapi', label: 'OneAPI 中转服务' },
@@ -73,6 +86,37 @@ export default function AIConfigPage() {
     asr: 'idle',
   })
 
+  // AI 服务健康状态（模拟数据，实际从后端获取）
+  const [serviceHealth, setServiceHealth] = useState<AIServiceHealth>({
+    status: 'healthy',
+    lastChecked: '2026-02-06 16:30:00',
+    lastError: null,
+    failedCount: 0,
+    queuedTasks: 0,
+  })
+
+  // 模拟检查服务状态
+  const checkServiceHealth = async () => {
+    // 实际应该调用后端 API
+    // const response = await fetch('/api/v1/ai-config/health')
+    // setServiceHealth(await response.json())
+
+    // 模拟：随机返回不同状态用于演示
+    const now = new Date().toLocaleString('zh-CN')
+    setServiceHealth({
+      status: 'healthy',
+      lastChecked: now,
+      lastError: null,
+      failedCount: 0,
+      queuedTasks: 0,
+    })
+  }
+
+  // 页面加载时检查服务状态
+  useEffect(() => {
+    checkServiceHealth()
+  }, [])
+
   const handleTestConnection = async () => {
     // 模拟测试连接
     setTestResults({ llm: 'testing', vision: 'testing', asr: 'testing' })
@@ -105,6 +149,47 @@ export default function AIConfigPage() {
     }
   }
 
+  // 获取服务状态配置
+  const getServiceStatusConfig = (status: ServiceStatus) => {
+    switch (status) {
+      case 'healthy':
+        return {
+          label: '服务正常',
+          color: 'text-accent-green',
+          bgColor: 'bg-accent-green/15',
+          borderColor: 'border-accent-green/30',
+          icon: CheckCircle,
+        }
+      case 'degraded':
+        return {
+          label: '服务降级',
+          color: 'text-accent-amber',
+          bgColor: 'bg-accent-amber/15',
+          borderColor: 'border-accent-amber/30',
+          icon: AlertTriangle,
+        }
+      case 'error':
+        return {
+          label: '服务异常',
+          color: 'text-accent-coral',
+          bgColor: 'bg-accent-coral/15',
+          borderColor: 'border-accent-coral/30',
+          icon: XCircle,
+        }
+      default:
+        return {
+          label: '状态未知',
+          color: 'text-text-tertiary',
+          bgColor: 'bg-bg-elevated',
+          borderColor: 'border-border-subtle',
+          icon: Info,
+        }
+    }
+  }
+
+  const statusConfig = getServiceStatusConfig(serviceHealth.status)
+  const StatusIcon = statusConfig.icon
+
   return (
     <div className="space-y-6 max-w-4xl">
       <div className="flex items-center justify-between">
@@ -112,8 +197,59 @@ export default function AIConfigPage() {
           <h1 className="text-2xl font-bold text-text-primary">AI 服务配置</h1>
           <p className="text-sm text-text-secondary mt-1">配置 AI 服务提供商和模型参数</p>
         </div>
+        {/* 服务状态标签 */}
+        <div className={`flex items-center gap-2 px-3 py-1.5 rounded-lg ${statusConfig.bgColor} border ${statusConfig.borderColor}`}>
+          <StatusIcon size={16} className={statusConfig.color} />
+          <span className={`text-sm font-medium ${statusConfig.color}`}>{statusConfig.label}</span>
+        </div>
       </div>
 
+      {/* 服务异常警告 */}
+      {(serviceHealth.status === 'error' || serviceHealth.status === 'degraded') && (
+        <div className={`p-4 rounded-lg border ${serviceHealth.status === 'error' ? 'bg-accent-coral/10 border-accent-coral/30' : 'bg-accent-amber/10 border-accent-amber/30'}`}>
+          <div className="flex items-start gap-3">
+            <AlertTriangle size={20} className={serviceHealth.status === 'error' ? 'text-accent-coral' : 'text-accent-amber'} />
+            <div className="flex-1">
+              <p className={`font-medium ${serviceHealth.status === 'error' ? 'text-accent-coral' : 'text-accent-amber'}`}>
+                {serviceHealth.status === 'error' ? 'AI 服务异常' : 'AI 服务降级'}
+              </p>
+              <p className="text-sm text-text-secondary mt-1">
+                {serviceHealth.lastError || '部分 AI 功能可能不可用，系统已自动将任务加入重试队列。'}
+              </p>
+              {serviceHealth.queuedTasks > 0 && (
+                <p className="text-sm text-text-tertiary mt-1">
+                  当前有 <span className="font-medium text-text-primary">{serviceHealth.queuedTasks}</span> 个任务在队列中等待重试
+                </p>
+              )}
+              {serviceHealth.failedCount > 0 && (
+                <p className="text-sm text-text-tertiary mt-1">
+                  连续失败 <span className="font-medium text-text-primary">{serviceHealth.failedCount}</span> 次
+                </p>
+              )}
+            </div>
+            <Button variant="secondary" size="sm" onClick={checkServiceHealth}>
+              <RefreshCw size={14} />
+              刷新状态
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {/* 最后检查时间 */}
+      {serviceHealth.lastChecked && (
+        <div className="flex items-center gap-2 text-xs text-text-tertiary">
+          <Clock size={12} />
+          <span>最后检查时间: {serviceHealth.lastChecked}</span>
+          <button
+            type="button"
+            onClick={checkServiceHealth}
+            className="text-accent-indigo hover:underline"
+          >
+            立即检查
+          </button>
+        </div>
+      )}
+
       {/* 配置继承提示 */}
       <div className="p-4 bg-accent-indigo/10 rounded-lg border border-accent-indigo/30">
         <div className="flex items-start gap-3">
diff --git a/frontend/components/layout/DesktopLayout.tsx b/frontend/components/layout/DesktopLayout.tsx
index ee513b1..1f51cb0 100644
--- a/frontend/components/layout/DesktopLayout.tsx
+++ b/frontend/components/layout/DesktopLayout.tsx
@@ -6,16 +6,18 @@ interface DesktopLayoutProps {
   children: React.ReactNode
   role?: 'creator' | 'agency' | 'brand'
   className?: string
+  aiServiceError?: boolean // AI 服务异常状态（仅品牌方使用）
 }
 
 export function DesktopLayout({
   children,
   role = 'creator',
   className = '',
+  aiServiceError = false,
 }: DesktopLayoutProps) {
   return (
     <div className={`h-screen bg-bg-page flex overflow-hidden ${className}`}>
-      <Sidebar role={role} />
+      <Sidebar role={role} aiServiceError={role === 'brand' ? aiServiceError : false} />
       <main className="flex-1 ml-[260px] p-8 overflow-y-auto overflow-x-hidden">
         <div className="min-h-full">
           {children}
diff --git a/frontend/components/navigation/Sidebar.tsx b/frontend/components/navigation/Sidebar.tsx
index c6d164d..1a87e4e 100644
--- a/frontend/components/navigation/Sidebar.tsx
+++ b/frontend/components/navigation/Sidebar.tsx
@@ -25,6 +25,7 @@ interface NavItem {
   icon: React.ElementType
   label: string
   href: string
+  badge?: 'dot' | 'warning' | number // 支持红点、警告或数字徽章
 }
 
 // 达人端导航项
@@ -59,16 +60,27 @@ const brandNavItems: NavItem[] = [
 
 interface SidebarProps {
   role?: 'creator' | 'agency' | 'brand'
+  aiServiceError?: boolean // AI 服务是否异常
 }
 
-export function Sidebar({ role = 'creator' }: SidebarProps) {
+export function Sidebar({ role = 'creator', aiServiceError = false }: SidebarProps) {
   const pathname = usePathname() || ''
 
+  // 根据 aiServiceError 动态设置 AI 配置的徽章
+  const getBrandNavItems = (): NavItem[] => {
+    return brandNavItems.map(item => {
+      if (item.href === '/brand/ai-config' && aiServiceError) {
+        return { ...item, badge: 'warning' as const }
+      }
+      return item
+    })
+  }
+
   const navItems = role === 'creator'
     ? creatorNavItems
     : role === 'agency'
       ? agencyNavItems
-      : brandNavItems
+      : getBrandNavItems()
 
   const isActive = (href: string) => {
     if (href === `/${role}`) {
@@ -105,8 +117,24 @@ export function Sidebar({ role = 'creator' }: SidebarProps) {
                     : 'text-text-secondary hover:bg-bg-elevated/50'
                 )}
               >
-                <Icon className="w-5 h-5" />
-                <span className="text-[15px]">{item.label}</span>
+                <div className="relative">
+                  <Icon className="w-5 h-5" />
+                  {/* 警告徽章 */}
+                  {item.badge === 'warning' && (
+                    <span className="absolute -top-1 -right-1 w-2.5 h-2.5 bg-accent-coral rounded-full border-2 border-bg-card animate-pulse" />
+                  )}
+                  {/* 红点徽章 */}
+                  {item.badge === 'dot' && (
+                    <span className="absolute -top-0.5 -right-0.5 w-2 h-2 bg-accent-coral rounded-full" />
+                  )}
+                </div>
+                <span className="text-[15px] flex-1">{item.label}</span>
+                {/* 数字徽章 */}
+                {typeof item.badge === 'number' && item.badge > 0 && (
+                  <span className="px-1.5 py-0.5 text-xs bg-accent-coral text-white rounded-full min-w-[20px] text-center">
+                    {item.badge > 99 ? '99+' : item.badge}
+                  </span>
+                )}
               </Link>
             )
           })}