88 lines
2.7 KiB
TypeScript
88 lines
2.7 KiB
TypeScript
import { Link, NavLink, useNavigate } from "react-router-dom";
|
|
import { memo, useEffect, useMemo } from "react";
|
|
import { SearchBar } from "./SearchBar";
|
|
import Navigation from "./navigation";
|
|
import { useAuth } from "@web/src/providers/auth-provider";
|
|
import { HomeOutlined, UserOutlined } from "@ant-design/icons";
|
|
import { UserMenu } from "../element/usermenu/usermenu";
|
|
import logo from "@web/src/assets/logo.png";
|
|
import { env } from "@web/src/env";
|
|
import { Button } from "antd";
|
|
import usePublicImage from "@web/src/hooks/usePublicImage";
|
|
import { useUserAgent } from "@web/src/hooks/useUserAgent";
|
|
export const Header = memo(function Header() {
|
|
const { isAuthenticated } = useAuth();
|
|
const navigate = useNavigate();
|
|
const { imageUrl } = usePublicImage("logo.png");
|
|
|
|
const { previewMode } = useUserAgent();
|
|
return (
|
|
<header className="sticky top-0 z-50 shadow-lg bg-slate-50">
|
|
<div className="mx-auto px-4">
|
|
<div className="py-1 relative">
|
|
{" "}
|
|
{/* 添加relative定位上下文 */}
|
|
<div className="flex items-center justify-between gap-4">
|
|
{/* 左侧logo部分 */}
|
|
<div
|
|
onClick={() => {
|
|
window.location.href = env.HOME_URL;
|
|
}}
|
|
className="hover:cursor-pointer flex items-center flex-shrink-0">
|
|
{" "}
|
|
{/* 防止压缩 */}
|
|
<div className="text-xl flex justify-center items-center font-bold text-primary-500/80 whitespace-nowrap">
|
|
{/* {env.APP_NAME} */}
|
|
<HomeOutlined className="mr-2" />
|
|
<span>{env.HOME_TEXT} </span>
|
|
</div>
|
|
</div>
|
|
{/* <SearchBar /> */}
|
|
{/* 中间标题部分 */}
|
|
{/* <div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"></div> */}
|
|
{/* 右侧登录部分 */}
|
|
<div className="flex items-center flex-shrink-0">
|
|
{" "}
|
|
{/* 防止压缩 */}
|
|
{!isAuthenticated
|
|
? !previewMode && (
|
|
<Button
|
|
className=" text-lg bg-primary-500/80 "
|
|
style={{
|
|
boxShadow: "none",
|
|
}}
|
|
onClick={() => {
|
|
navigate("/auth");
|
|
}}
|
|
type="primary"
|
|
icon={
|
|
<UserOutlined></UserOutlined>
|
|
}>
|
|
登录
|
|
</Button>
|
|
)
|
|
: !previewMode && <UserMenu />}
|
|
{previewMode && (
|
|
<Button
|
|
className=" text-lg bg-primary-500/80 "
|
|
style={{
|
|
boxShadow: "none",
|
|
}}
|
|
type="primary">
|
|
预览模式
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{/* 独立定位的搜索栏 */}
|
|
{/* <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-2xl px-4">
|
|
|
|
</div> */}
|
|
</div>
|
|
</div>
|
|
{/* <Navigation /> */}
|
|
</div>
|
|
</header>
|
|
);
|
|
});
|