LabelsView.tsx
3.7 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
import React, { 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 Options';
interface LabelsViewProps {
currentView?: string;
onViewChange?: (view: string) => void;
/** Dashboard「New Label」递增；由 Labels 列表消费后应调用 onLabelCreateIntentConsumed */
labelCreateOpenSeq?: number;
onLabelCreateIntentConsumed?: () => void;
}
export function LabelsView({
currentView = 'Labels',
onViewChange,
labelCreateOpenSeq = 0,
onLabelCreateIntentConsumed,
}: LabelsViewProps) {
const [templateEditorHidesTabs, setTemplateEditorHidesTabs] = useState(false);
const tabs: Tab[] = [
'Labels',
'Label Categories',
'Label Types',
'Label Templates',
'Multiple Options'
];
const handleTabClick = (tab: Tab) => {
if (onViewChange) {
onViewChange(tab);
}
};
return (
<div
className={`flex h-full min-h-0 flex-col ${templateEditorHidesTabs ? 'gap-0' : 'gap-6'}`}
>
{/* 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>
)}
{/* Content：Label Templates 编辑态需占满主区域高度，故用 flex-1 + min-h-0 传递 */}
<div className="flex min-h-0 flex-1 flex-col overflow-hidden">
{currentView === 'Labels' && (
<div className="min-h-0 flex-1 overflow-auto">
<LabelsList
openCreateSeq={labelCreateOpenSeq}
onOpenCreateIntentConsumed={onLabelCreateIntentConsumed}
/>
</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 min-h-0 flex-1 flex-col overflow-hidden">
<LabelTemplatesView onTemplateEditorOverlayChange={setTemplateEditorHidesTabs} />
</div>
)}
{currentView === 'Multiple Options' && (
<div className="min-h-0 flex-1 overflow-auto">
<MultipleOptionsView />
</div>
)}
{!['Labels', 'Label Categories', 'Label Types', 'Label Templates', 'Multiple Options'].includes(currentView) && (
<div className="flex h-64 items-center justify-center text-gray-400">
{currentView} content coming soon...
</div>
)}
</div>
</div>
);
}