blank/frontend-v2/components/Header.tsx

/**
 * 页面头部组件
 *
 * 核心概念：
 * - Web UI 是 MCP 测试工具，不需要全局登录
 * - 显示已连接的 MCP 服务器数量
 */
'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { mcpTokenManager } from '@/lib/mcp-token-manager';

export default function Header() {
  const [loggedInCount, setLoggedInCount] = useState(0);
  const [enabledCount, setEnabledCount] = useState(0);
  const [total, setTotal] = useState(0);

  useEffect(() => {
    // 更新 MCP 登录状态
    const updateStatus = () => {
      const servers = Object.keys(mcpTokenManager as any).filter(k => k.startsWith('novel-'));
      setLoggedInCount(mcpTokenManager.getLoggedInMcpList().length);
      setEnabledCount(mcpTokenManager.getEnabledMcpList().length);
      setTotal(servers.length || 3);
    };

    updateStatus();

    // 监听 storage 变化
    const handleStorageChange = () => updateStatus();
    window.addEventListener('storage', handleStorageChange);
    return () => window.removeEventListener('storage', handleStorageChange);
  }, []);

  return (
    <header className="bg-white dark:bg-gray-800 border-b dark:border-gray-700 px-6 py-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center space-x-4">
          <h1 className="text-xl font-bold text-gray-800 dark:text-white">
            AI MCP Web UI
          </h1>
          <nav className="flex space-x-4">
            <Link href="/" className="text-gray-600 dark:text-gray-300 hover:text-blue-500">
              聊天
            </Link>
            <Link href="/mcp" className="text-gray-600 dark:text-gray-300 hover:text-blue-500">
              MCP 管理
            </Link>
          </nav>
        </div>

        <div className="flex items-center space-x-4">
          {/* MCP 连接状态 */}
          <div className="flex items-center space-x-2 text-sm">
            <span className="text-gray-600 dark:text-gray-400">MCP:</span>
            <span className={`px-2 py-1 rounded ${
              enabledCount > 0
                ? 'bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200'
                : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'
            }`}>
              已启用 {enabledCount}/{total}
            </span>
            {loggedInCount > 0 && (
              <span className={`px-2 py-1 rounded ${
                loggedInCount > 0
                  ? 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200'
                  : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'
              }`}>
                已登录 {loggedInCount}/{total}
              </span>
            )}
          </div>

          {loggedInCount > 0 ? (
            <Link
              href="/mcp"
              className="text-sm text-blue-500 hover:text-blue-600"
            >
              管理连接
            </Link>
          ) : (
            <Link
              href="/mcp"
              className="px-4 py-2 text-sm bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
            >
              连接 MCP
            </Link>
          )}
        </div>
      </div>
    </header>
  );
}