feat: 添加 AI 服务状态监控和警告功能

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

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Your Name
2026-02-06 19:37:20 +08:00
co-authored by Claude Opus 4.5
parent b83d7e068c
commit bbc8a4f641
3 changed files with 173 additions and 7 deletions
+3 -1
View File
@@ -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}
+32 -4
View File
@@ -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>
)
})}