| import React, { useEffect, useState, useCallback } from 'react' |
| import * as api from '../api' |
| import type { SystemStatus, ConnectionState } from '../api' |
| import { useTranslation } from '../i18n' |
| import { useDateFormatter } from '../utils/dateUtils' |
|
|
| interface ConnectionStatusBarProps { |
| pollIntervalMs?: number |
| className?: string |
| } |
|
|
| type ConnStatus = 'ready' | 'warning' | 'error' | 'unknown' |
|
|
| interface Snapshot { |
| xunfei: ConnStatus |
| xunfeiMessage: string |
| xunfeiLabel: string |
| deepseek: ConnStatus |
| deepseekMessage: string |
| whisper: ConnStatus |
| whisperMessage: string |
| asrActiveEngine: string |
| } |
|
|
| |
| function connStateToDot(state: ConnectionState): { dot: string; bg: string; text: string } { |
| switch (state) { |
| case 'online': |
| return { dot: 'bg-green-500', bg: 'bg-green-50 border-green-200', text: 'text-green-700' } |
| case 'timeout': |
| return { dot: 'bg-yellow-500', bg: 'bg-yellow-50 border-yellow-200', text: 'text-yellow-700' } |
| case 'auth_error': |
| return { dot: 'bg-yellow-500', bg: 'bg-yellow-50 border-yellow-200', text: 'text-yellow-700' } |
| case 'offline': |
| return { dot: 'bg-red-500', bg: 'bg-red-50 border-red-200', text: 'text-red-700' } |
| case 'unconfigured': |
| return { dot: 'bg-gray-400', bg: 'bg-gray-50 border-gray-200', text: 'text-gray-600' } |
| default: |
| return { dot: 'bg-gray-400', bg: 'bg-gray-50 border-gray-200', text: 'text-gray-600' } |
| } |
| } |
|
|
| const colorMap: Record<ConnStatus, { dot: string; bg: string; text: string }> = { |
| ready: { dot: 'bg-green-500', bg: 'bg-green-50 border-green-200', text: 'text-green-700' }, |
| warning: { dot: 'bg-yellow-500', bg: 'bg-yellow-50 border-yellow-200', text: 'text-yellow-700' }, |
| error: { dot: 'bg-red-500', bg: 'bg-red-50 border-red-200', text: 'text-red-700' }, |
| unknown: { dot: 'bg-gray-400', bg: 'bg-gray-50 border-gray-200', text: 'text-gray-600' }, |
| } |
|
|
| function summarize(h: Awaited<ReturnType<typeof api.getDetailedHealth>>, t: (key: string) => string): Snapshot { |
| return { |
| xunfei: (h.xunfei?.status as ConnStatus) || 'unknown', |
| xunfeiMessage: h.xunfei?.message || (h.xunfei?.available ? t('components.connection.xunfeiReady') : t('components.connection.xunfeiNotConfigured')), |
| xunfeiLabel: h.xunfei?.model_label || h.xunfei?.model || t('components.connection.xunfei'), |
| deepseek: (h.deepseek?.status as ConnStatus) || 'unknown', |
| deepseekMessage: h.deepseek?.message || (h.deepseek?.available ? t('components.connection.deepseekReady') : t('components.connection.deepseekUnavailable')), |
| whisper: (h.whisper?.status as ConnStatus) || 'unknown', |
| whisperMessage: h.whisper?.message || 'Whisper', |
| asrActiveEngine: h.asr_active_engine || 'xunfei', |
| } |
| } |
|
|
| |
| const LivePill: React.FC<{ |
| label: string |
| state: ConnectionState |
| detail: string |
| }> = ({ label, state, detail }) => { |
| const { t } = useTranslation() |
| const c = connStateToDot(state) |
| const isOnline = state === 'online' |
| const isOffline = state === 'offline' |
| return ( |
| <div |
| className={`inline-flex items-center gap-1.5 px-2 py-1 rounded-lg border ${c.bg}`} |
| title={detail} |
| > |
| <span |
| className={`w-2 h-2 rounded-full ${c.dot} ${isOnline ? 'animate-pulse' : ''}`} |
| /> |
| <span className={`text-xs font-medium ${c.text}`}>{label}</span> |
| <span className="text-[10px] text-gray-500 hidden sm:inline"> |
| {isOffline ? t('components.connection.offline') : isOnline ? t('components.connection.online') : state === 'timeout' ? t('components.connection.timeout') : state === 'auth_error' ? t('components.connection.authError') : detail} |
| </span> |
| </div> |
| ) |
| } |
|
|
| const Pill: React.FC<{ |
| label: string |
| status: ConnStatus |
| message: string |
| }> = ({ label, status, message }) => { |
| const c = colorMap[status] |
| return ( |
| <div className={`inline-flex items-center gap-1.5 px-2 py-1 rounded-lg border ${c.bg}`}> |
| <span className={`w-2 h-2 rounded-full ${c.dot} ${status === 'ready' ? 'animate-pulse' : ''}`} /> |
| <span className={`text-xs font-medium ${c.text}`}>{label}</span> |
| <span className="text-[10px] text-gray-500 hidden sm:inline" title={message}> |
| {message} |
| </span> |
| </div> |
| ) |
| } |
|
|
| export const ConnectionStatusBar: React.FC<ConnectionStatusBarProps> = ({ |
| pollIntervalMs = 10000, |
| className = '', |
| }) => { |
| const { t } = useTranslation() |
| const { formatDate, formatDateTime, formatTime } = useDateFormatter() |
| const [snapshot, setSnapshot] = useState<Snapshot | null>(null) |
| const [lastUpdated, setLastUpdated] = useState<number>(0) |
| |
| const [systemStatus, setSystemStatus] = useState<SystemStatus | null>(null) |
| const [anyOffline, setAnyOffline] = useState(false) |
|
|
| |
| useEffect(() => { |
| let timer: ReturnType<typeof setInterval> | null = null |
| let cancelled = false |
|
|
| const fetchOnce = async () => { |
| try { |
| const h = await api.getDetailedHealth() |
| if (cancelled) return |
| setSnapshot(summarize(h, t)) |
| setLastUpdated(Date.now()) |
| } catch (e) { |
| if (cancelled) return |
| setSnapshot({ |
| xunfei: 'error', |
| xunfeiMessage: t('components.connection.backendUnreachable'), |
| xunfeiLabel: t('components.connection.xunfei'), |
| deepseek: 'error', |
| deepseekMessage: t('components.connection.backendUnreachable'), |
| whisper: 'error', |
| whisperMessage: t('components.connection.backendUnreachable'), |
| asrActiveEngine: 'unknown', |
| }) |
| } |
| } |
|
|
| fetchOnce() |
| timer = setInterval(fetchOnce, pollIntervalMs) |
|
|
| return () => { |
| cancelled = true |
| if (timer) clearInterval(timer) |
| } |
| }, [pollIntervalMs]) |
|
|
| |
| const fetchSystemStatus = useCallback(async () => { |
| try { |
| const s = await api.getSystemStatus() |
| setSystemStatus(s) |
| setAnyOffline( |
| s.xunfei === 'offline' || s.deepseek === 'offline' || |
| s.xunfei === 'timeout' || s.deepseek === 'timeout' |
| ) |
| } catch { |
| |
| } |
| }, []) |
|
|
| useEffect(() => { |
| fetchSystemStatus() |
| const timer = setInterval(fetchSystemStatus, 30000) |
| return () => clearInterval(timer) |
| }, [fetchSystemStatus]) |
|
|
| if (!snapshot) { |
| return ( |
| <div className={`flex items-center gap-2 ${className}`}> |
| <span className="text-[10px] text-gray-400">{t('components.connection.checking')}</span> |
| </div> |
| ) |
| } |
|
|
| return ( |
| <div className={`flex flex-col gap-1 ${className}`}> |
| {/* 离线警告横幅 */} |
| {anyOffline && systemStatus && ( |
| <div className="flex items-center gap-2 px-2 py-1 bg-red-50 border border-red-300 rounded text-xs text-red-700"> |
| <span className="w-2 h-2 rounded-full bg-red-500 animate-pulse" /> |
| <span> |
| {!systemStatus.internet |
| ? t('components.connection.networkDisconnected') |
| : systemStatus.dns === 'fail' |
| ? t('components.connection.dnsFailed') |
| : t('components.connection.aiServiceUnavailable')} |
| </span> |
| </div> |
| )} |
| |
| <div className="flex items-center gap-1.5 flex-wrap"> |
| {/* 优先显示实时连接状态 */} |
| {systemStatus ? ( |
| <> |
| <LivePill |
| label={`${t('components.connection.xunfei')} ${snapshot.xunfeiLabel}`} |
| state={systemStatus.xunfei} |
| detail={systemStatus.xunfei_detail} |
| /> |
| <LivePill |
| label="DeepSeek" |
| state={systemStatus.deepseek} |
| detail={systemStatus.deepseek_detail} |
| /> |
| </> |
| ) : ( |
| <> |
| <Pill |
| label={`${t('components.connection.xunfei')} ${snapshot.xunfeiLabel}`} |
| status={snapshot.xunfei} |
| message={snapshot.xunfeiMessage} |
| /> |
| <Pill |
| label="DeepSeek" |
| status={snapshot.deepseek} |
| message={snapshot.deepseekMessage} |
| /> |
| </> |
| )} |
| <Pill label="Whisper" status={snapshot.whisper} message={snapshot.whisperMessage} /> |
| <span className="text-[10px] text-gray-400 hidden md:inline"> |
| {t('components.connection.activeEngine')}: {snapshot.asrActiveEngine} |
| {lastUpdated > 0 && ( |
| <> · {t('components.connection.updatedAt')} {formatTime(new Date(lastUpdated))}</> |
| )} |
| </span> |
| </div> |
| </div> |
| ) |
| } |
|
|
| export default ConnectionStatusBar |
