109 lines
3.1 KiB
TypeScript
Executable File
109 lines
3.1 KiB
TypeScript
Executable File
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>
|
|
);
|
|
}
|