mirror of
https://github.com/Buriburizaem0n/admin-frontend-domain.git
synced 2026-05-06 05:38:51 +00:00
Chillln
bb288c554f
* refactor(ui): 统一组件引用类型为ComponentRef 更新所有UI组件中的forwardRef类型，从ElementRef改为ComponentRef以保持一致性 迁移postcss配置至mjs格式并更新依赖版本 * refactor: 优化表单类型定义和验证逻辑 移除自定义的 asOptionalField 工具函数，直接使用 Zod 的 optional() 方法，并明确定义表单数据类型。 * style: 更新UI主题配置和样式变量 将主题风格从default切换为new-york，并重构CSS变量使用OKLCH色彩空间。同时添加tailwindcss-animate插件支持。 * style: 统一页面头部按钮组样式 优化多个页面头部按钮组的布局样式，增加响应式设计和flex-wrap支持 * fix(server): 修复对话框交互问题并优化SWR配置 修复对话框关闭逻辑并阻止外部交互，同时禁用SWR的自动重新验证功能以提升性能。 * feat: 添加日历组件及账单相关国际化 实现基于 react-day-picker 的日历组件，并添加账单管理相关的多语言支持 * style(components): 统一按钮样式并格式化代码 为删除和禁用按钮添加text-white类名，同时调整ServerCard组件中的代码缩进格式。 * perf(build): 优化Vite打包配置与代码分割策略 调整Vite构建配置，改进第三方依赖的分组逻辑并添加UUID支持到安装命令组件 * fix: 修正页面标题翻译不一致问题 将CronPage和ServicePage的标题从"Server"分别改为"Task"和"Service"，并优化NotificationGroupPage的按钮组布局。 * fix(auth): 改进登录错误处理和国际化支持 优化登录错误提示，添加多语言支持并移除控制台错误日志。同时修复头部组件透明度样式问题。 * feat: 添加服务器操作下拉菜单 为服务器卡片添加统一的下拉菜单操作入口，整合终端、配置和安装命令功能。 * feat[alert-rule]: 优化告警规则组件性能 重构告警规则组件代码结构，提升渲染效率并减少内存占用。 * docs(i18n): 新增翻译字段 为界面添加"Add"、"Delete"、"AdvancedJSON"和"Save"等关键操作的翻译字段，支持中英文双语显示。 * perf(vite): 优化分包策略以提升构建性能 重构 manualChunks 逻辑，按功能类别分组依赖项，并增加大型库的独立分包规则。 * style: 统一危险操作按钮的文字颜色 在所有确认操作的弹窗按钮中添加白色文字样式，保持视觉一致性。 * fix(components): 调整下拉菜单对齐方式 根据菜单项状态动态设置下拉菜单的对齐方向和起始位置。 * fix(types): 修复在线用户API分页类型 添加ModelOnlineUserApi接口类型，包含分页信息，并移除index.ts中重复的类型定义。 * chore: auto-fix linting and formatting issues * feat(locales): 添加无过期相关翻译项 为英文和中文翻译文件添加"NoExpiry"、"SetNoExpiry"等无过期相关字段的翻译。 fix(components): 移除重复的图标按钮选项 从IconButton组件中删除重复的"more"图标选项。 * feat(ServerCard): 优化日期选择器并添加下拉提示 为日期选择器添加下拉布局和年份范围限制，并在公共笔记区域增加下拉项生效提示文本。 * chore: auto-fix linting and formatting issues * style: 优化多个组件的UI交互细节 统一按钮悬停样式并简化国际化文本调用，移除冗余的单位显示和空值判断逻辑。 * refactor(ServerCard): 移除网络路由相关代码 删除 ServerCard 组件中与 plan.networkRoute 相关的字段验证和错误显示逻辑。 * chore: auto-fix linting and formatting issues * feat(ui): 添加Switch组件并改进服务器表单交互 - 新增Radix UI Switch组件依赖及实现 - 将IPv4/IPv6输入改为开关控件，优化用户体验 - 添加"按量付费"选项和新的翻译字段 - 改进网络路由和备注输入的占位提示 - 修复暗黑模式下的按钮背景色 * style(components): 为禁止按钮添加白色文本样式 * chore: auto-fix linting and formatting issues * fix(ServerCard): 修复日期选择器样式和滚动问题 调整日期选择器的宽度和高度限制，添加滚动容器以解决内容溢出问题 * refactor(server-config): 简化复选框checked属性的布尔转换 使用!!操作符简化controllerField.value的布尔值转换，使代码更简洁 * feat(国际化): 添加告警规则和搜索框的国际化支持 为告警规则组件添加多语言支持，包括服务器监控选项、忽略提示和示例文本。同时将搜索框的占位文本替换为国际化字段。 * chore: auto-fix linting and formatting issues * fix(switch): 修正 Switch 组件 ref 类型定义错误 --------- Co-authored-by: Guccen <171530509+Chillln@users.noreply.github.com>
411 lines
20 KiB
TypeScript
411 lines
20 KiB
TypeScript
import { ModeToggle } from "@/components/mode-toggle"
|
|
import {
|
|
Drawer,
|
|
DrawerClose,
|
|
DrawerContent,
|
|
DrawerDescription,
|
|
DrawerFooter,
|
|
DrawerHeader,
|
|
DrawerTitle,
|
|
DrawerTrigger,
|
|
} from "@/components/ui/drawer"
|
|
import {
|
|
NavigationMenu,
|
|
NavigationMenuItem,
|
|
NavigationMenuLink,
|
|
navigationMenuTriggerStyle,
|
|
} from "@/components/ui/navigation-menu"
|
|
import { useAuth } from "@/hooks/useAuth"
|
|
import { useMainStore } from "@/hooks/useMainStore"
|
|
import { useMediaQuery } from "@/hooks/useMediaQuery"
|
|
import { cn } from "@/lib/utils"
|
|
import i18next from "i18next"
|
|
import { LogOut, Settings, User2 } from "lucide-react"
|
|
import { DateTime } from "luxon"
|
|
import { useEffect, useRef, useState } from "react"
|
|
import { useTranslation } from "react-i18next"
|
|
import { Link, useLocation, useNavigate } from "react-router-dom"
|
|
|
|
import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar"
|
|
import { Button } from "./ui/button"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuGroup,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuShortcut,
|
|
DropdownMenuTrigger,
|
|
} from "./ui/dropdown-menu"
|
|
import { IconButton } from "./xui/icon-button"
|
|
import { NzNavigationMenuLink } from "./xui/navigation-menu"
|
|
|
|
const pages = [
|
|
{ href: "/dashboard", label: i18next.t("Server") },
|
|
{ href: "/dashboard/service", label: i18next.t("Service") },
|
|
{ href: "/dashboard/cron", label: i18next.t("Task") },
|
|
{ href: "/dashboard/notification", label: i18next.t("Notification") },
|
|
{ href: "/dashboard/ddns", label: i18next.t("DDNS") },
|
|
{ href: "/dashboard/nat", label: i18next.t("NATT") },
|
|
{ href: "/dashboard/server-group", label: i18next.t("Group") },
|
|
]
|
|
|
|
export default function Header() {
|
|
const { t } = useTranslation()
|
|
const { logout } = useAuth()
|
|
const profile = useMainStore((store) => store.profile)
|
|
|
|
const location = useLocation()
|
|
const isDesktop = useMediaQuery("(min-width: 890px)")
|
|
|
|
const [open, setOpen] = useState(false)
|
|
const [dropdownOpen, setDropdownOpen] = useState(false)
|
|
|
|
const navigate = useNavigate()
|
|
|
|
// @ts-expect-error DisableAnimatedMan is a global variable
|
|
const disableAnimatedMan = window.DisableAnimatedMan as boolean
|
|
|
|
return isDesktop ? (
|
|
<header className="flex pt-8 px-4 dark:bg-black/40 bg-muted border-b-[1px] overflow-visible">
|
|
<NavigationMenu className="flex flex-col items-start relative max-w-5xl mx-auto">
|
|
{!disableAnimatedMan && (
|
|
<img
|
|
className={cn(
|
|
"absolute right-0 z-[9999] top-11 w-20 scale-100 pointer-events-none",
|
|
{
|
|
hidden: location.pathname === "/dashboard/login",
|
|
},
|
|
)}
|
|
alt={"animated-man"}
|
|
src={"/dashboard/animated-man.webp"}
|
|
/>
|
|
)}
|
|
<section className="w-full flex items-center justify-between">
|
|
<div className="flex justify-between items-center w-full">
|
|
<NavigationMenuLink
|
|
asChild
|
|
className={
|
|
navigationMenuTriggerStyle() +
|
|
" !text-foreground hover:opacity-60 transition-opacity"
|
|
}
|
|
>
|
|
<Link to={profile ? "/dashboard" : "#"}>
|
|
<img className="h-7 mr-1" src="/dashboard/logo.svg" />
|
|
{t("nezha")}
|
|
</Link>
|
|
</NavigationMenuLink>
|
|
|
|
<div className="flex items-center gap-1">
|
|
<a
|
|
href={"/"}
|
|
rel="noopener noreferrer"
|
|
className="flex items-center text-nowrap gap-1 text-sm font-medium opacity-50 transition-opacity hover:opacity-100"
|
|
>
|
|
{t("BackToHome")}
|
|
</a>
|
|
<ModeToggle />
|
|
{profile && (
|
|
<>
|
|
<DropdownMenu
|
|
open={dropdownOpen}
|
|
onOpenChange={setDropdownOpen}
|
|
>
|
|
<DropdownMenuTrigger asChild>
|
|
<Avatar className="ml-1 h-8 w-8 cursor-pointer border-foreground border-[1px]">
|
|
<AvatarImage
|
|
src={
|
|
"https://api.dicebear.com/7.x/notionists/svg?seed=" +
|
|
profile.username
|
|
}
|
|
alt={profile.username}
|
|
/>
|
|
<AvatarFallback>{profile.username}</AvatarFallback>
|
|
</Avatar>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-32">
|
|
<DropdownMenuLabel className="break-all">
|
|
{profile.username}
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem
|
|
onClick={() => {
|
|
setDropdownOpen(false)
|
|
navigate("/dashboard/profile")
|
|
}}
|
|
className="cursor-pointer"
|
|
>
|
|
<div className="flex items-center gap-2 w-full">
|
|
<User2 />
|
|
{t("Profile")}
|
|
</div>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={() => {
|
|
setDropdownOpen(false)
|
|
navigate("/dashboard/settings")
|
|
}}
|
|
className="cursor-pointer"
|
|
>
|
|
<div className="flex items-center gap-2 w-full">
|
|
<Settings />
|
|
{t("Settings")}
|
|
</div>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem
|
|
onClick={logout}
|
|
className="cursor-pointer"
|
|
>
|
|
<LogOut />
|
|
{t("Logout")}
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div className="flex mt-4 ml-4">
|
|
<Overview />
|
|
</div>
|
|
<div className="flex mt-4 list-none">
|
|
{profile && (
|
|
<>
|
|
<NavigationMenuItem>
|
|
<NzNavigationMenuLink
|
|
asChild
|
|
active={location.pathname === "/dashboard"}
|
|
className={navigationMenuTriggerStyle()}
|
|
>
|
|
<Link to="/dashboard">{t("Server")}</Link>
|
|
</NzNavigationMenuLink>
|
|
</NavigationMenuItem>
|
|
<NavigationMenuItem>
|
|
<NzNavigationMenuLink
|
|
asChild
|
|
active={location.pathname === "/dashboard/service"}
|
|
className={navigationMenuTriggerStyle()}
|
|
>
|
|
<Link to="/dashboard/service">{t("Service")}</Link>
|
|
</NzNavigationMenuLink>
|
|
</NavigationMenuItem>
|
|
<NavigationMenuItem>
|
|
<NzNavigationMenuLink
|
|
asChild
|
|
active={location.pathname === "/dashboard/cron"}
|
|
className={navigationMenuTriggerStyle()}
|
|
>
|
|
<Link to="/dashboard/cron">{t("Task")}</Link>
|
|
</NzNavigationMenuLink>
|
|
</NavigationMenuItem>
|
|
<NavigationMenuItem>
|
|
<NzNavigationMenuLink
|
|
asChild
|
|
active={
|
|
location.pathname === "/dashboard/notification" ||
|
|
location.pathname === "/dashboard/alert-rule"
|
|
}
|
|
className={navigationMenuTriggerStyle()}
|
|
>
|
|
<Link to="/dashboard/notification">{t("Notification")}</Link>
|
|
</NzNavigationMenuLink>
|
|
</NavigationMenuItem>
|
|
<NavigationMenuItem>
|
|
<NzNavigationMenuLink
|
|
asChild
|
|
active={location.pathname === "/dashboard/ddns"}
|
|
className={navigationMenuTriggerStyle()}
|
|
>
|
|
<Link to="/dashboard/ddns">{t("DDNS")}</Link>
|
|
</NzNavigationMenuLink>
|
|
</NavigationMenuItem>
|
|
<NavigationMenuItem>
|
|
<NzNavigationMenuLink
|
|
asChild
|
|
active={location.pathname === "/dashboard/nat"}
|
|
className={navigationMenuTriggerStyle()}
|
|
>
|
|
<Link to="/dashboard/nat">{t("NATT")}</Link>
|
|
</NzNavigationMenuLink>
|
|
</NavigationMenuItem>
|
|
<NavigationMenuItem>
|
|
<NzNavigationMenuLink
|
|
asChild
|
|
active={
|
|
location.pathname === "/dashboard/server-group" ||
|
|
location.pathname === "/dashboard/notification-group"
|
|
}
|
|
className={navigationMenuTriggerStyle()}
|
|
>
|
|
<Link to="/dashboard/server-group">{t("Group")}</Link>
|
|
</NzNavigationMenuLink>
|
|
</NavigationMenuItem>
|
|
</>
|
|
)}
|
|
</div>
|
|
</NavigationMenu>
|
|
</header>
|
|
) : (
|
|
<header className="flex dark:bg-black/40 bg-muted border-b-[1px] px-4 h-16">
|
|
<div className="flex max-w-max flex-1 items-center justify-center gap-2">
|
|
{profile && (
|
|
<Drawer open={open} onOpenChange={setOpen}>
|
|
<DrawerTrigger aria-label="Toggle Menu" asChild>
|
|
<IconButton icon="menu" variant="ghost" />
|
|
</DrawerTrigger>
|
|
<DrawerContent>
|
|
<DrawerHeader className="text-left">
|
|
<DrawerTitle>{t("NavigateTo")}</DrawerTitle>
|
|
<DrawerDescription>
|
|
{t("SelectAPageToNavigateTo")}
|
|
</DrawerDescription>
|
|
</DrawerHeader>
|
|
<div className="grid gap-1 px-4">
|
|
{pages.slice(0).map((item, index) => (
|
|
<Link
|
|
key={index}
|
|
to={item.href ? item.href : "#"}
|
|
className="py-1 text-sm"
|
|
onClick={() => {
|
|
setOpen(false)
|
|
}}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
<DrawerFooter>
|
|
<DrawerClose asChild>
|
|
<Button variant="outline">{t("Close")}</Button>
|
|
</DrawerClose>
|
|
</DrawerFooter>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
)}
|
|
</div>
|
|
<Link
|
|
className="mx-2 my-2 inline-flex w-full items-center"
|
|
to={profile ? "/dashboard" : "#"}
|
|
>
|
|
<img className="h-7 mr-1" src="/dashboard/logo.svg" /> {t("nezha")}
|
|
</Link>
|
|
<div className="ml-auto flex items-center gap-1">
|
|
<a
|
|
href={"/"}
|
|
rel="noopener noreferrer"
|
|
className="flex items-center text-nowrap gap-1 text-sm font-medium opacity-50 transition-opacity hover:opacity-100"
|
|
>
|
|
{t("BackToHome")}
|
|
</a>
|
|
<ModeToggle />
|
|
{profile && (
|
|
<>
|
|
<DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
|
|
<DropdownMenuTrigger asChild>
|
|
<Avatar className="ml-1 h-8 w-8 cursor-pointer border-foreground border-[1px]">
|
|
<AvatarImage
|
|
src={
|
|
"https://api.dicebear.com/7.x/notionists/svg?seed=" +
|
|
profile.username
|
|
}
|
|
alt={profile.username}
|
|
/>
|
|
<AvatarFallback>{profile.username}</AvatarFallback>
|
|
</Avatar>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-56">
|
|
<DropdownMenuLabel>{profile.username}</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem
|
|
onClick={() => {
|
|
setDropdownOpen(false)
|
|
navigate("/dashboard/profile")
|
|
}}
|
|
className="cursor-pointer"
|
|
>
|
|
<div className="flex items-center gap-2 w-full">
|
|
<User2 />
|
|
{t("Profile")}
|
|
</div>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={() => {
|
|
setDropdownOpen(false)
|
|
navigate("/dashboard/settings")
|
|
}}
|
|
className="cursor-pointer"
|
|
>
|
|
<div className="flex items-center gap-2 w-full">
|
|
<Settings />
|
|
{t("Settings")}
|
|
</div>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={logout} className="cursor-pointer">
|
|
<LogOut />
|
|
{t("Logout")}
|
|
<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</>
|
|
)}
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|
|
|
|
// https://github.com/streamich/react-use/blob/master/src/useInterval.ts
|
|
const useInterval = (callback: () => void, delay?: number | null) => {
|
|
const savedCallback = useRef<() => void>(() => {})
|
|
useEffect(() => {
|
|
savedCallback.current = callback
|
|
})
|
|
useEffect(() => {
|
|
if (delay !== null) {
|
|
const interval = setInterval(() => savedCallback.current(), delay || 0)
|
|
return () => clearInterval(interval)
|
|
}
|
|
return undefined
|
|
}, [delay])
|
|
}
|
|
|
|
function Overview() {
|
|
const { t } = useTranslation()
|
|
const profile = useMainStore((store) => store.profile)
|
|
const timeOption = DateTime.TIME_SIMPLE
|
|
timeOption.hour12 = true
|
|
const [timeString, setTimeString] = useState(
|
|
DateTime.now().setLocale("en-US").toLocaleString(timeOption),
|
|
)
|
|
useInterval(() => {
|
|
setTimeString(DateTime.now().setLocale("en-US").toLocaleString(timeOption))
|
|
}, 1000)
|
|
return (
|
|
<section className={"flex flex-col"}>
|
|
{profile && (
|
|
<div className="flex items-center gap-1.5">
|
|
<div className="flex gap-1.5 text-sm font-semibold">
|
|
👋 Hi, {profile?.username}
|
|
{profile?.login_ip && (
|
|
<p className="font-medium opacity-45">from {profile?.login_ip}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{!profile && <p className="text-sm font-semibold">{t("LoginFirst")}</p>}
|
|
<div className="flex items-center gap-1.5">
|
|
<p className="text-[13px] font-medium opacity-50">{t("CurrentTime")}</p>
|
|
<p className="opacity-100 text-[13px] font-medium">{timeString}</p>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|