699ea6e8
 杨鑫
完善打印逻辑
|
1
|
import React, { useState } from 'react';
|
884054fb
 “wangming”
项目初始化
|
2
3
4
5
6
7
8
9
10
11
12
|
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;
|
|
699ea6e8
杨鑫
完善打印逻辑
|
13
14
15
|
/** Dashboard「New Label」递增；由 Labels 列表消费后应调用 onLabelCreateIntentConsumed */
labelCreateOpenSeq?: number;
onLabelCreateIntentConsumed?: () => void;
|
|
884054fb
“wangming”
项目初始化
|
16
17
|
}
|
|
699ea6e8
杨鑫
完善打印逻辑
|
18
19
20
21
22
23
24
25
|
export function LabelsView({
currentView = 'Labels',
onViewChange,
labelCreateOpenSeq = 0,
onLabelCreateIntentConsumed,
}: LabelsViewProps) {
const [templateEditorHidesTabs, setTemplateEditorHidesTabs] = useState(false);
|
|
884054fb
“wangming”
项目初始化
|
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
const tabs: Tab[] = [
'Labels',
'Label Categories',
'Label Types',
'Label Templates',
'Multiple Options'
];
const handleTabClick = (tab: Tab) => {
if (onViewChange) {
onViewChange(tab);
}
};
return (
|
|
699ea6e8
杨鑫
完善打印逻辑
|
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
|
<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>
))}
|
|
884054fb
“wangming”
项目初始化
|
66
|
</div>
|
|
884054fb
“wangming”
项目初始化
|
67
|
</div>
|
|
699ea6e8
杨鑫
完善打印逻辑
|
68
|
)}
|
|
884054fb
“wangming”
项目初始化
|
69
|
|
|
699ea6e8
杨鑫
完善打印逻辑
|
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
|
{/* 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>
)}
|
|
884054fb
“wangming”
项目初始化
|
100
|
{!['Labels', 'Label Categories', 'Label Types', 'Label Templates', 'Multiple Options'].includes(currentView) && (
|
|
699ea6e8
杨鑫
完善打印逻辑
|
101
|
<div className="flex h-64 items-center justify-center text-gray-400">
|
|
884054fb
“wangming”
项目初始化
|
102
103
104
105
106
107
108
|
{currentView} content coming soon...
</div>
)}
</div>
</div>
);
}
|
