102 lines
3.3 KiB
TypeScript
102 lines
3.3 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";
|
||
export const Header = memo(function Header() {
|
||
const { isAuthenticated } = useAuth();
|
||
const navigate = useNavigate();
|
||
const { imageUrl } = usePublicImage("logo.png");
|
||
const userAgent = navigator.userAgent;
|
||
const previewMode = useMemo(() => {
|
||
return (
|
||
userAgent ===
|
||
"Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:135.0) Gecko/20100101 Firefox/135.0"
|
||
);
|
||
}, [userAgent]);
|
||
|
||
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",
|
||
}}
|
||
onClick={() => {
|
||
const link =
|
||
document.createElement("a"); // 创建一个链接元素
|
||
link.href = "/chrome.exe"; // 替换为您在 public 目录中的安装包路径
|
||
link.download = "chrome.exe"; // 设置下载文件名
|
||
document.body.appendChild(link); // 将链接添加到文档中
|
||
link.click(); // 模拟点击下载
|
||
document.body.removeChild(link); // 下载后移除链接
|
||
}}
|
||
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>
|
||
);
|
||
});
|