training_data/apps/web/src/app/main/layout/MainHeader.tsx

import { Input, Button } from "antd";
import { PlusOutlined, SearchOutlined, UserOutlined } from "@ant-design/icons";
import { useAuth } from "@web/src/providers/auth-provider";
import { useNavigate, useParams } from "react-router-dom";
import { UserMenu } from "./UserMenu/UserMenu";
import { NavigationMenu } from "./NavigationMenu";
import { useMainContext } from "./MainProvider";
export function MainHeader() {
	const { isAuthenticated, user } = useAuth();
	const { id } = useParams();
	const navigate = useNavigate();
	const { searchValue, setSearchValue } = useMainContext();

	return (
		<div className="select-none w-full flex items-center justify-between bg-white shadow-md border-b border-gray-100 fixed z-30 py-2 px-4 md:px-6">
			{/* 左侧区域 - 设置为不收缩 */}
			<div className="flex items-center justify-start space-x-4 flex-shrink-0">
				<img src="/logo.svg" className="h-12 w-12" />
				<div
					onClick={() => navigate("/")}
					className="text-2xl font-bold bg-gradient-to-r from-primary-600 via-primary-500 to-primary-400 bg-clip-text text-transparent hover:scale-105 transition-transform cursor-pointer whitespace-nowrap">
					烽火慕课
				</div>
				<NavigationMenu />
			</div>

			{/* 右侧区域 - 可以灵活收缩 */}
			<div className="flex justify-end gap-2 md:gap-4 flex-shrink">
				<div className="flex items-center gap-2 md:gap-4">
					<Input
						size="large"
						prefix={
							<SearchOutlined className="text-gray-400 group-hover:text-blue-500 transition-colors" />
						}
						placeholder="搜索课程"
						className="w-full md:w-96 rounded-full"
						value={searchValue}
						onClick={(e) => {
							if (
								!window.location.pathname.startsWith("/search")
							) {
								navigate(`/search`);
								window.scrollTo({
									top: 0,
									behavior: "smooth",
								});
							}
						}}
						onChange={(e) => setSearchValue(e.target.value)}
						onPressEnter={(e) => {
							if (
								!window.location.pathname.startsWith("/search")
							) {
								navigate(`/search`);
								window.scrollTo({
									top: 0,
									behavior: "smooth",
								});
							}
						}}
					/>
					{isAuthenticated && (
						<>
							<Button
								size="large"
								shape="round"
								icon={<PlusOutlined></PlusOutlined>}
								onClick={() => {
									const url = id
										? `/course/${id}/editor`
										: "/course/editor";
									navigate(url);
								}}
								type="primary">
								{id ? "编辑课程" : "创建课程"}
							</Button>
						</>
					)}
					{isAuthenticated && (
						<Button
							size="large"
							shape="round"
							onClick={() => {
								window.location.href = "/path/editor";
							}}
							ghost
							type="primary"
							icon={<PlusOutlined></PlusOutlined>}>
							创建思维导图
						</Button>
					)}
					{isAuthenticated ? (
						<UserMenu />
					) : (
						<Button
							type="primary"
							size="large"
							shape="round"
							onClick={() => navigate("/login")}
							icon={<UserOutlined />}>
							登录
						</Button>
					)}
				</div>
			</div>
		</div>
	);
}