LabelsView.tsx
4.09 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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
import React, { useCallback, useState } from 'react';
import { LabelsList } from './LabelsList';
import { LabelCategoriesView } from './LabelCategoriesView';
import { LabelTypesView } from './LabelTypesView';
import { LabelTemplatesView } from './LabelTemplatesView';
import { MultipleOptionsView } from './MultipleOptionsView';
type Tab = 'Labels' | 'Label Categories' | 'Label Types' | 'Label Templates' | 'Multiple Option Sets';
interface LabelsViewProps {
currentView?: string;
onViewChange?: (view: string) => void;
/** 标签模板新增/编辑时 true，用于布局层隐藏侧栏与顶栏 */
onLabelTemplateEditorLayoutOverlay?: (fullscreen: boolean) => void;
}
export function LabelsView({
currentView = 'Labels',
onViewChange,
onLabelTemplateEditorLayoutOverlay,
}: LabelsViewProps) {
const [templateEditorHidesTabs, setTemplateEditorHidesTabs] = useState(false);
const handleTemplateEditorOverlay = useCallback(
(fullscreen: boolean) => {
setTemplateEditorHidesTabs(fullscreen);
onLabelTemplateEditorLayoutOverlay?.(fullscreen);
},
[onLabelTemplateEditorLayoutOverlay],
);
const tabs: Tab[] = [
'Labels',
'Label Categories',
'Label Types',
'Label Templates',
'Multiple Option Sets'
];
const handleTabClick = (tab: Tab) => {
if (onViewChange) {
onViewChange(tab);
}
};
return (
<div
className={`flex h-full flex-col ${templateEditorHidesTabs ? "gap-0" : "gap-6"}`}
style={{ minHeight: 0, height: "100%", display: "flex", flexDirection: "column" }}
>
{/* Tabs：模板编辑器全屏编辑时隐藏 */}
{!templateEditorHidesTabs && (
<div className="w-full shrink-0 border-b border-gray-200">
<div className="flex overflow-x-auto bg-white">
{tabs.map((tab) => (
<div
key={tab}
onClick={() => handleTabClick(tab)}
style={
currentView === tab
? { borderBottomWidth: 2, borderBottomStyle: 'solid', borderBottomColor: '#2563eb' }
: undefined
}
className={`px-4 py-2.5 text-sm font-medium whitespace-nowrap cursor-pointer transition-colors -mb-px ${
currentView === tab
? 'text-blue-600'
: 'border-b-2 border-b-transparent text-gray-600 hover:text-gray-800'
}`}
>
{tab}
</div>
))}
</div>
</div>
)}
{/* min-h-0 未进预编译 CSS，用内联保证模板编辑区能拿到剩余高度 */}
<div
className="flex flex-1 flex-col overflow-hidden"
style={{ flex: "1 1 0%", minHeight: 0, overflow: "hidden", display: "flex", flexDirection: "column" }}
>
{currentView === 'Labels' && (
<div className="min-h-0 flex-1 overflow-auto">
<LabelsList />
</div>
)}
{currentView === 'Label Categories' && (
<div className="min-h-0 flex-1 overflow-auto">
<LabelCategoriesView />
</div>
)}
{currentView === 'Label Types' && (
<div className="min-h-0 flex-1 overflow-auto">
<LabelTypesView />
</div>
)}
{currentView === "Label Templates" && (
<div
className="flex flex-1 flex-col overflow-hidden"
style={{ flex: "1 1 0%", minHeight: 0, display: "flex", flexDirection: "column", overflow: "hidden" }}
>
<LabelTemplatesView onTemplateEditorOverlayChange={handleTemplateEditorOverlay} />
</div>
)}
{currentView === 'Multiple Option Sets' && (
<div className="min-h-0 flex-1 overflow-auto">
<MultipleOptionsView />
</div>
)}
{!['Labels', 'Label Categories', 'Label Types', 'Label Templates', 'Multiple Option Sets'].includes(currentView) && (
<div className="flex h-64 items-center justify-center text-gray-400">
{currentView} content coming soon...
</div>
)}
</div>
</div>
);
}