305 lines
12 KiB
TypeScript
305 lines
12 KiB
TypeScript
import { Outlet, useLocation, useNavigate } from '@tanstack/react-router'
|
|
import { useEffect, useRef, useState } from 'react'
|
|
import {
|
|
Activity,
|
|
Bell,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
FileCode,
|
|
Globe,
|
|
KeyRound,
|
|
LayoutDashboard,
|
|
ListTodo,
|
|
LogOut,
|
|
Menu,
|
|
Moon,
|
|
Network,
|
|
PanelLeftClose,
|
|
PanelLeftOpen,
|
|
ScrollText,
|
|
Server,
|
|
Settings,
|
|
Sun,
|
|
Terminal,
|
|
UserRound,
|
|
Variable,
|
|
X,
|
|
} from 'lucide-react'
|
|
import { useTheme } from '@/context/ThemeContext'
|
|
import { api } from '@/api'
|
|
import { usePublicSite, useSentence, useUser } from '@/api/hooks'
|
|
import { NodeSwitcher } from '@/components/business/NodeSwitcher'
|
|
import { SystemNotice } from '@/components/business/SystemNotice'
|
|
import { ToastHost } from '@/components/business/ToastHost'
|
|
import { resetAuthCache } from '@/lib/auth'
|
|
import { eventBus } from '@/lib/event-bus'
|
|
import { cn } from '@/components/ui'
|
|
|
|
const NAV_ITEMS = [
|
|
{ path: '/', icon: LayoutDashboard, label: '数据仪表', exact: true },
|
|
{ path: '/tasks', icon: ListTodo, label: '定时任务', exact: true },
|
|
{ path: '/agents', icon: Server, label: '远程执行', exact: true },
|
|
{ path: '/editor', icon: FileCode, label: '脚本编辑', exact: false },
|
|
{ path: '/history', icon: ScrollText, label: '执行历史', exact: true },
|
|
{ path: '/environments', icon: Variable, label: '变量机密', exact: true },
|
|
{ path: '/languages', icon: Globe, label: '语言依赖', exact: false },
|
|
{ path: '/terminal', icon: Terminal, label: '终端命令', exact: true },
|
|
{ path: '/notify', icon: Bell, label: '消息推送', exact: true },
|
|
{ path: '/logs', icon: KeyRound, label: '运行日志', exact: true },
|
|
{ path: '/monitor', icon: Activity, label: '系统监控', exact: true },
|
|
{ path: '/interconnect', icon: Network, label: '互联管理', exact: true },
|
|
{ path: '/settings', icon: Settings, label: '系统设置', exact: true },
|
|
] as const
|
|
|
|
const COLLAPSE_KEY = 'taskpool.sidebar.collapsed'
|
|
|
|
function isActive(pathname: string, path: string, exact: boolean) {
|
|
if (exact) return pathname === path
|
|
return pathname === path || pathname.startsWith(path + '/')
|
|
}
|
|
|
|
export default function Layout() {
|
|
const location = useLocation()
|
|
const navigate = useNavigate()
|
|
const { theme, toggleTheme } = useTheme()
|
|
const { data: site } = usePublicSite()
|
|
const { data: sentenceData } = useSentence()
|
|
const { data: user } = useUser()
|
|
const [menuOpen, setMenuOpen] = useState(false)
|
|
const [isMobile, setIsMobile] = useState(false)
|
|
const [collapsed, setCollapsed] = useState(() => {
|
|
try {
|
|
return localStorage.getItem(COLLAPSE_KEY) === '1'
|
|
} catch {
|
|
return false
|
|
}
|
|
})
|
|
const [userMenuOpen, setUserMenuOpen] = useState(false)
|
|
const userMenuRef = useRef<HTMLDivElement>(null)
|
|
|
|
const title = site?.title || '任务池'
|
|
const sentence = sentenceData?.sentence || '欢迎使用任务池'
|
|
const username = user?.username || '管理员'
|
|
const sidebarCollapsed = !isMobile && collapsed
|
|
|
|
useEffect(() => {
|
|
document.title = title
|
|
const icon = site?.icon
|
|
if (icon) {
|
|
let link = document.querySelector("link[rel='icon']") as HTMLLinkElement | null
|
|
if (!link) {
|
|
link = document.createElement('link')
|
|
link.rel = 'icon'
|
|
document.head.appendChild(link)
|
|
}
|
|
link.href = icon
|
|
}
|
|
}, [title, site?.icon])
|
|
|
|
useEffect(() => {
|
|
const check = () => setIsMobile(window.innerWidth < 1024)
|
|
check()
|
|
window.addEventListener('resize', check)
|
|
return () => window.removeEventListener('resize', check)
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
setMenuOpen(false)
|
|
setUserMenuOpen(false)
|
|
}, [location.pathname])
|
|
|
|
useEffect(() => {
|
|
eventBus.init()
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
try {
|
|
localStorage.setItem(COLLAPSE_KEY, collapsed ? '1' : '0')
|
|
} catch {
|
|
// ignore
|
|
}
|
|
}, [collapsed])
|
|
|
|
useEffect(() => {
|
|
function onDocClick(e: MouseEvent) {
|
|
if (!userMenuRef.current) return
|
|
if (!userMenuRef.current.contains(e.target as Node)) {
|
|
setUserMenuOpen(false)
|
|
}
|
|
}
|
|
document.addEventListener('mousedown', onDocClick)
|
|
return () => document.removeEventListener('mousedown', onDocClick)
|
|
}, [])
|
|
|
|
async function logout() {
|
|
try {
|
|
await api.auth.logout()
|
|
} catch {
|
|
// ignore
|
|
}
|
|
resetAuthCache()
|
|
window.location.href = '/login'
|
|
}
|
|
|
|
return (
|
|
<div className="flex min-h-screen w-full bg-[var(--bg-primary)] text-[var(--text-primary)]">
|
|
{isMobile && menuOpen && (
|
|
<div className="fixed inset-0 z-40 bg-black/50 backdrop-blur-[1px]" onClick={() => setMenuOpen(false)} />
|
|
)}
|
|
|
|
<aside
|
|
className={cn(
|
|
'fixed inset-y-0 left-0 z-50 flex shrink-0 flex-col border-r border-[var(--border)] bg-[var(--bg-secondary)] transition-[width,transform] duration-200 ease-out lg:static lg:translate-x-0',
|
|
sidebarCollapsed ? 'w-[52px]' : 'w-[200px]',
|
|
isMobile && !menuOpen ? '-translate-x-full' : 'translate-x-0',
|
|
)}
|
|
>
|
|
<div
|
|
className={cn(
|
|
'relative flex h-14 items-center border-b border-[var(--border)]',
|
|
sidebarCollapsed ? 'justify-center px-1' : 'gap-2.5 px-4',
|
|
)}
|
|
>
|
|
<div
|
|
className={cn(
|
|
'ms-on-accent flex shrink-0 select-none items-center justify-center rounded-md bg-[var(--bg-accent)] font-bold text-[var(--text-on-accent)]',
|
|
sidebarCollapsed ? 'h-7 w-7 text-[12px]' : 'h-8 w-8 text-[13px]',
|
|
)}
|
|
>
|
|
T
|
|
</div>
|
|
{!sidebarCollapsed && (
|
|
<div className="min-w-0 flex-1">
|
|
<div className="truncate text-[13px] font-semibold tracking-tight">{title}</div>
|
|
<div className="truncate text-[10px] text-[var(--text-muted)]">TaskPool</div>
|
|
</div>
|
|
)}
|
|
{isMobile && (
|
|
<button
|
|
className="rounded-md p-1.5 text-[var(--text-muted)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-primary)]"
|
|
onClick={() => setMenuOpen(false)}
|
|
>
|
|
<X size={16} strokeWidth={1.5} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<nav className={cn('flex flex-1 flex-col gap-0.5 overflow-y-auto py-3', sidebarCollapsed ? 'px-1.5' : 'px-2.5')}>
|
|
{NAV_ITEMS.map(({ path, icon: Icon, label, exact }) => {
|
|
const active = isActive(location.pathname, path, exact)
|
|
return (
|
|
<button
|
|
key={path}
|
|
title={sidebarCollapsed ? label : undefined}
|
|
onClick={() => navigate({ to: path })}
|
|
className={cn(
|
|
'group relative flex h-9 w-full items-center rounded-md text-[13px] transition-[background,color,border-color] duration-150',
|
|
sidebarCollapsed ? 'justify-center px-0' : 'gap-2.5 px-2.5',
|
|
active
|
|
? 'border border-[var(--border-hover)] bg-[var(--bg-tertiary)] font-medium text-[var(--text-primary)]'
|
|
: 'border border-transparent text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]',
|
|
)}
|
|
>
|
|
<Icon
|
|
size={15}
|
|
strokeWidth={1.5}
|
|
className={cn(active ? 'text-[var(--text-primary)]' : 'text-[var(--text-muted)] group-hover:text-[var(--text-primary)]')}
|
|
/>
|
|
{!sidebarCollapsed && (
|
|
<>
|
|
<span className="truncate">{label}</span>
|
|
{active ? <span className="ml-auto h-1.5 w-1.5 rounded-full bg-[var(--bg-accent)]" /> : null}
|
|
</>
|
|
)}
|
|
</button>
|
|
)
|
|
})}
|
|
</nav>
|
|
</aside>
|
|
|
|
<main className="flex min-w-0 flex-1 flex-col">
|
|
<header className="sticky top-0 z-30 flex h-14 items-center justify-between border-b border-[var(--border)] bg-[color-mix(in_srgb,var(--bg-secondary)_92%,transparent)] px-4 backdrop-blur-md">
|
|
<div className="flex min-w-0 flex-1 items-center gap-2">
|
|
{isMobile ? (
|
|
<button
|
|
className="inline-flex h-8 w-8 items-center justify-center rounded-md text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-primary)]"
|
|
onClick={() => setMenuOpen(true)}
|
|
title="打开菜单"
|
|
>
|
|
<Menu size={16} strokeWidth={1.5} />
|
|
</button>
|
|
) : (
|
|
<button
|
|
className="inline-flex h-8 w-8 items-center justify-center rounded-md text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-primary)]"
|
|
onClick={() => setCollapsed((v) => !v)}
|
|
title={collapsed ? '展开侧边栏' : '收起侧边栏'}
|
|
>
|
|
{collapsed ? <PanelLeftOpen size={16} strokeWidth={1.5} /> : <PanelLeftClose size={16} strokeWidth={1.5} />}
|
|
</button>
|
|
)}
|
|
<p className="truncate text-[13px] text-[var(--text-muted)]" title={sentence}>
|
|
{sentence}
|
|
</p>
|
|
</div>
|
|
|
|
{/* 顶栏工具统一 h-8，避免通知/主题/用户高度不一致 */}
|
|
<div className="flex h-8 items-center gap-1.5">
|
|
<NodeSwitcher />
|
|
<SystemNotice />
|
|
<button
|
|
type="button"
|
|
onClick={toggleTheme}
|
|
title={theme === 'light' ? '深色模式' : '浅色模式'}
|
|
className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-[var(--border)] bg-[var(--bg-primary)] text-[var(--text-secondary)] transition-colors hover:border-[var(--border-hover)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-primary)]"
|
|
>
|
|
{theme === 'light' ? <Moon size={15} strokeWidth={1.5} /> : <Sun size={15} strokeWidth={1.5} />}
|
|
</button>
|
|
|
|
<div className="relative" ref={userMenuRef}>
|
|
<button
|
|
type="button"
|
|
onClick={() => setUserMenuOpen((v) => !v)}
|
|
className={cn(
|
|
'inline-flex h-8 items-center gap-1.5 rounded-md border border-[var(--border)] bg-[var(--bg-primary)] px-2 text-[12px] leading-none text-[var(--text-secondary)] transition-colors hover:border-[var(--border-hover)] hover:text-[var(--text-primary)]',
|
|
userMenuOpen && 'border-[var(--border-hover)] text-[var(--text-primary)]',
|
|
)}
|
|
title="账户"
|
|
>
|
|
<span className="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[var(--bg-tertiary)] text-[var(--text-muted)]">
|
|
<UserRound size={12} strokeWidth={1.75} />
|
|
</span>
|
|
<span className="hidden max-w-[96px] truncate sm:inline">{username}</span>
|
|
</button>
|
|
|
|
{userMenuOpen && (
|
|
<div className="absolute right-0 top-[calc(100%+6px)] z-50 w-44 overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--bg-secondary)] shadow-[0_12px_40px_rgba(0,0,0,0.18)]">
|
|
<div className="border-b border-[var(--border)] px-3 py-2.5">
|
|
<div className="truncate text-[12px] font-medium text-[var(--text-primary)]">{username}</div>
|
|
<div className="truncate text-[11px] text-[var(--text-muted)]">已登录</div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setUserMenuOpen(false)
|
|
void logout()
|
|
}}
|
|
className="flex h-10 w-full items-center gap-2 px-3 text-[13px] text-[var(--text-secondary)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--danger)]"
|
|
>
|
|
<LogOut size={14} strokeWidth={1.5} />
|
|
退出登录
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="ms-page flex-1 overflow-y-auto p-4 lg:p-6">
|
|
<Outlet />
|
|
</div>
|
|
</main>
|
|
<ToastHost />
|
|
</div>
|
|
)
|
|
}
|