rlwj-lab/opsxsql
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
hermes-$(hostname) committed 2026-07-08 08:53:48 +00:00
1 parent f5cf3f4440
commit 0fcdbc5f6c
29 files changed
+773 -264
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/components/Layout.tsx
+31 -8
View File
@@ -55,7 +55,7 @@ export default function Layout() {
return (
<div className="flex h-screen bg-[var(--dg-bg-primary)] text-[var(--dg-text-primary)] overflow-hidden">
{/* 侧边栏 — z-[200] 永远在弹框之上 */}
<aside className="relative z-[200] flex flex-col bg-[var(--dg-bg-secondary)] border-r border-[var(--dg-border)] w-[220px] min-w-[220px]">
<aside className="relative z-[200] hidden md:flex flex-col bg-[var(--dg-bg-secondary)] border-r border-[var(--dg-border)] w-[220px] min-w-[220px]">
{/* Logo */}
<div className="h-14 flex items-center px-4">
<div className="flex items-center gap-2.5">
@@ -126,18 +126,18 @@ export default function Layout() {
{/* 主内容区 */}
<main id="app-main" className="relative flex-1 flex flex-col min-w-0 overflow-hidden">
{/* 顶部栏 — z-[200] 永远在弹框之上 */}
<header className="relative z-[200] h-14 bg-[var(--dg-bg-secondary)] border-b border-[var(--dg-border)] flex items-center justify-between px-5 flex-shrink-0">
<header className="relative z-[200] h-14 bg-[var(--dg-bg-secondary)] border-b border-[var(--dg-border)] flex items-center justify-between px-3 md:px-5 flex-shrink-0">
{/* Breadcrumb area */}
<div className="flex items-center gap-1.5 text-sm">
<div className="flex items-center gap-1.5 text-sm min-w-0">
<span className="text-[var(--dg-text-muted)] font-medium">OpsxSQL</span>
{breadcrumbInfo.sectionLabel && (
<>
<span className="hidden sm:contents">
<ChevronRight className="w-3.5 h-3.5 text-[var(--dg-text-muted)] opacity-50" />
<span className="text-[var(--dg-text-muted)] opacity-70">{breadcrumbInfo.sectionLabel}</span>
</>
</span>
)}
<ChevronRight className="w-3.5 h-3.5 text-[var(--dg-text-muted)] opacity-50" />
<span className="text-[var(--dg-text-primary)] font-medium">{breadcrumbInfo.pageLabel}</span>
<span className="text-[var(--dg-text-primary)] font-medium truncate">{breadcrumbInfo.pageLabel}</span>
</div>
{/* Right actions */}
@@ -169,7 +169,7 @@ export default function Layout() {
<div className="w-7 h-7 rounded-full dg-gradient-br flex items-center justify-center text-white text-xs font-semibold flex-shrink-0">
{user.avatar}
</div>
<span className="text-sm text-[var(--dg-text-secondary)] max-w-[80px] truncate">{user.username}</span>
<span className="hidden sm:inline text-sm text-[var(--dg-text-secondary)] max-w-[80px] truncate">{user.username}</span>
<button
onClick={() => { logout(); navigate('/login'); }}
className="w-8 h-8 rounded-lg flex items-center justify-center text-[var(--dg-text-muted)] hover:bg-red-500/10 hover:text-red-400 transition-colors duration-200"
@@ -182,11 +182,34 @@ export default function Layout() {
</header>
{/* 页面内容 */}
<div className="flex-1 overflow-y-auto scrollbar-thin p-5">
<div className="flex-1 overflow-y-auto scrollbar-thin p-3 md:p-5 pb-20 md:pb-5">
<Outlet />
</div>
</main>
<nav className="fixed bottom-0 left-0 right-0 z-[210] md:hidden border-t border-[var(--dg-border)] bg-[var(--dg-bg-secondary)]/95 backdrop-blur">
<div className="flex overflow-x-auto px-2 py-1.5 gap-1 scrollbar-thin">
{visibleMenuItems.map(item => {
const Icon = iconMap[item.icon] || Database;
const isActive = currentPath === item.id;
return (
<button
key={item.id}
onClick={() => navigate('/' + item.id)}
className={`min-w-[70px] flex flex-col items-center justify-center gap-1 rounded-lg px-2 py-1.5 text-[11px] transition-colors ${
isActive
? 'bg-[var(--dg-blue)]/12 text-[var(--dg-blue)]'
: 'text-[var(--dg-text-muted)] hover:bg-[var(--dg-bg-hover)] hover:text-[var(--dg-text-primary)]'
}`}
>
<Icon className="w-4 h-4" />
<span className="max-w-[64px] truncate">{item.label}</span>
</button>
);
})}
</div>
</nav>
{/* Keyframe animation for active indicator */}
<style>{`
@keyframes slideInLeft {