xiaozhi/jk-rag-platform/src/pages/layout/components/Header.tsx

import * as React from 'react';
import { Modal, Button, Tooltip } from 'antd';
import { useNavigate } from 'react-router-dom';
import { MenuFoldOutlined, MenuUnfoldOutlined, MessageOutlined } from '@ant-design/icons';
import { Bell, ChevronDown, User, Settings, LogOut } from 'lucide-react';
import LocalStorage from '@/LocalStorage';
import { useLayoutStore } from '../store';
import './header.scss';
import jkLogo from '@/assets/public/jkLogo.svg';       // 桌面端 Logo（长方形）
import jkLogoSm from '@/assets/public/jkLogo-sm.svg';  // H5/Pad 端 Logo（方形）

interface Props {
    userName: string;
    onClickLogout: (navigate: any) => Promise<any>;
}

const Header: React.FC<Props> = (props) => {
    const navigate = useNavigate();
    const { userName, onClickLogout } = props;
    const { collapsed, onClickCollapsed } = useLayoutStore();
    const [dropdownVisible, setDropdownVisible] = React.useState(false);
    const dropdownRef = React.useRef<HTMLDivElement>(null);
    const [isMobile, setIsMobile] = React.useState(false);

    // 响应式检测
    React.useEffect(() => {
        const checkMobile = () => {
            setIsMobile(window.innerWidth <= 1024);
        };
        
        checkMobile();
        window.addEventListener('resize', checkMobile);
        return () => window.removeEventListener('resize', checkMobile);
    }, []);

    // Header 滚动效果
    React.useEffect(() => {
        const header = document.querySelector('.header');
        const handleScroll = () => {
            if (window.scrollY > 10) {
                header?.classList.add('scrolled');
            } else {
                header?.classList.remove('scrolled');
            }
        };

        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    // 点击外部关闭下拉菜单
    React.useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
                setDropdownVisible(false);
            }
        };

        document.addEventListener('mousedown', handleClickOutside);
        return () => document.removeEventListener('mousedown', handleClickOutside);
    }, []);

    // 处理退出登录
    const handleLogout = () => {
        setDropdownVisible(false);
        Modal.confirm({
            title: '提示',
            content: '确定退出平台吗？',
            async onOk() {
                await onClickLogout(navigate);
            }
        });
    };

    return (
        <header className='header'>
            <div className='header-container'>
                {/* 汉堡菜单按钮（移动端显示） */}
                <Button
                    className='mobile-menu-btn'
                    type='text'
                    icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                    onClick={onClickCollapsed}
                    title={collapsed ? '展开菜单' : '收起菜单'}
                />

                {/* Logo 区域 + 智能问答 */}
                <div className='header-logo-wrapper'>
                    {/* Logo 区域 */}
                    <div
                        className='header-logo-section'
                        onClick={() => navigate('/appCenter')}
                    >
                        {/* 根据屏幕尺寸切换 Logo */}
                        <img 
                            src={isMobile ? jkLogoSm : jkLogo} 
                            alt="建科小智" 
                            className='logo-image' 
                        />
                        {/* 竖线间隔 */}
                        <div className='logo-divider'></div>
                        <div className='logo-text-section'>
                            <h1 className='logo-title'>建科小智</h1>
                            <p className='logo-subtitle'>开放平台 v2.0</p>
                        </div>
                    </div>

                    {/* 智能问答快捷入口 - 桌面端显示 */}
                    {!isMobile && (
                        <Tooltip title='智能问答'>
                            <button
                                className='quick-access-btn'
                                onClick={() => window.open('/universalChat', '_blank')}
                            >
                                <MessageOutlined />
                                <span>智能问答</span>
                            </button>
                        </Tooltip>
                    )}
                </div>

                {/* 右侧功能区 */}
                <div className='header-right'>
                    {/* 搜索框 - 已注释 */}
                    {/* <div className='header-search'>
                        <span
                            className='iconify search-icon'
                            data-icon='solar:magnifer-linear'
                        ></span>
                        <input
                            type='text'
                            className='search-input'
                            placeholder='试试搜索 "政务审批自动摘要生成" 或 "安防监控动态预警"...'
                        />
                    </div> */}

                    {/* 安全状态指示器 */}
                    <div className='security-status'>
                        <span className='status-dot'></span>
                        <span>内网安全连接</span>
                    </div>

                    {/* 通知按钮 */}
                    <button className='notification-btn'>
                        <Bell size={20} />
                        <span className='notification-dot'></span>
                    </button>

                    {/* 用户区域 */}
                    <div className='user-dropdown-wrapper' ref={dropdownRef}>
                        <button
                            className='user-section'
                            onClick={() => setDropdownVisible(!dropdownVisible)}
                        >
                            <div className='user-avatar'>
                                <img
                                    alt={userName}
                                    src='https://modao.cc/agent-py/media/generated_images/2026-03-18/087b1d0dc0544b9e82f423a1398cbc25.jpg'
                                />
                            </div>
                            <div className='user-info'>
                                <p className='user-name'>{userName}</p>
                                <p className='user-dept'>部门信息</p>
                            </div>
                            <ChevronDown size={16} className='user-dropdown-icon' />
                        </button>

                        {/* 下拉菜单 */}
                        {dropdownVisible && (
                            <div className='user-dropdown-menu'>
                                <div className='user-dropdown-header'>
                                    <p className='user-dropdown-name'>{userName}</p>
                                    <p className='user-dropdown-dept'>部门信息</p>
                                </div>

                                <button className='user-dropdown-item'>
                                    <User size={16} />
                                    <span>个人中心</span>
                                </button>

                                <button className='user-dropdown-item'>
                                    <Settings size={16} />
                                    <span>账户设置</span>
                                </button>

                                <div className='user-dropdown-item divider'></div>

                                <button className='user-dropdown-item danger' onClick={handleLogout}>
                                    <LogOut size={16} />
                                    <span>退出登录</span>
                                </button>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </header>
    );
};

export default Header;