Layout.tsx
3.05 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import React from 'react';
import { ChevronRight } from 'lucide-react';
import { Sidebar } from './Sidebar';
import { Header } from './Header';
import type { CurrentUserMenuNodeDto } from '../../types/authSession';
interface LayoutProps {
children: React.ReactNode;
currentView: string;
setCurrentView: (view: string) => void;
menus?: CurrentUserMenuNodeDto[];
onLogout?: () => void;
/** 点击顶栏右上角当前用户区域 */
onProfileClick?: () => void;
/** 标签模板编辑器全屏：隐藏侧栏与顶栏，主内容占满视口 */
hideAppChrome?: boolean;
}
export function Layout({
children,
currentView,
setCurrentView,
menus,
onLogout,
onProfileClick,
hideAppChrome = false,
}: LayoutProps) {
return (
<div className="flex h-screen bg-gray-50 overflow-hidden font-sans">
{!hideAppChrome && (
<Sidebar currentView={currentView} setCurrentView={setCurrentView} menus={menus} onLogout={onLogout} />
)}
<div
className="flex min-w-0 flex-1 flex-col overflow-hidden"
style={{
flex: "1 1 0%",
minHeight: 0,
minWidth: 0,
display: "flex",
flexDirection: "column",
overflow: "hidden",
}}
>
{!hideAppChrome && (
<>
<Header
title={currentView}
menus={menus}
onNavigate={setCurrentView}
onSettingsClick={() => setCurrentView('Support')}
onProfileClick={onProfileClick}
/>
<div className="mt-8 shrink-0 px-8">
<nav className="flex items-center gap-2 text-sm font-normal" aria-label="Breadcrumb">
<button
type="button"
onClick={() => setCurrentView('Dashboard')}
className="text-gray-500 transition-colors hover:text-gray-700"
>
Home
</button>
<ChevronRight className="h-4 w-4 shrink-0 text-gray-500" />
<span style={{ color: 'rgb(43, 50, 143)' }}>{currentView}</span>
</nav>
</div>
</>
)}
<main
className={
hideAppChrome
? "flex flex-1 flex-col overflow-hidden p-0"
: "flex-1 overflow-y-auto p-8"
}
style={
hideAppChrome
? {
flex: "1 1 0%",
minHeight: 0,
display: "flex",
flexDirection: "column",
overflow: "hidden",
padding: 0,
}
: { flex: "1 1 0%", minHeight: 0, minWidth: 0 }
}
>
<div
className="flex w-full min-w-0 flex-1 flex-col"
style={{
flex: "1 1 0%",
minHeight: 0,
minWidth: 0,
width: "100%",
display: "flex",
flexDirection: "column",
}}
>
{children}
</div>
</main>
</div>
</div>
);
}