884054fb
 “wangming”
项目初始化
|
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
|
import React from 'react';
import { Sidebar } from './Sidebar';
import { Header } from './Header';
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from '../ui/breadcrumb';
interface LayoutProps {
children: React.ReactNode;
currentView: string;
setCurrentView: (view: string) => void;
}
const LABELING_SUB_VIEWS = ['Label Categories', 'Label Types', 'Label Templates', 'Multiple Options'];
function getBreadcrumbItems(title: string): { label: string; view: string }[] {
const items: { label: string; view: string }[] = [{ label: 'Home', view: 'Dashboard' }];
if (title === 'Labels' || title === 'Label Categories' || title === 'Label Types' || title === 'Label Templates' || title === 'Multiple Options') {
if (LABELING_SUB_VIEWS.includes(title)) {
items.push({ label: 'Labeling', view: 'Labels' });
}
items.push({ label: title, view: title });
} else {
items.push({ label: title, view: title });
}
return items;
}
export function Layout({ children, currentView, setCurrentView }: LayoutProps) {
const breadcrumbItems = getBreadcrumbItems(currentView);
return (
<div
className="flex h-screen bg-gray-50 overflow-hidden font-sans"
style={{ '--header-bar-height': '90px' } as React.CSSProperties}
>
<Sidebar currentView={currentView} setCurrentView={setCurrentView} />
<div className="flex-1 flex flex-col min-w-0 overflow-hidden">
<Header title={currentView} />
<main className="flex-1 overflow-y-auto p-8">
<div className="flex flex-col gap-6 w-full">
<Breadcrumb>
<BreadcrumbList className="text-gray-500">
{breadcrumbItems.map((item, index) => (
<React.Fragment key={index}>
{index > 0 && <BreadcrumbSeparator />}
<BreadcrumbItem>
{index === breadcrumbItems.length - 1 ? (
<BreadcrumbPage className="font-medium" style={{ color: '#1b46c7' }}>{item.label}</BreadcrumbPage>
) : (
<BreadcrumbLink asChild>
<button type="button" onClick={() => setCurrentView(item.view)} className="hover:text-gray-900 transition-colors">
{item.label}
</button>
</BreadcrumbLink>
)}
</BreadcrumbItem>
</React.Fragment>
))}
</BreadcrumbList>
</Breadcrumb>
<div className="w-full min-h-0">
{children}
</div>
</div>
</main>
</div>
</div>
);
}
|
