王明 / Food-Labeling-Management-Platform

Blame view

美国版/Food Labeling Management Platform/src/components/labels/LabelsView.tsx 4.44 KB
Edit Raw Normal View History
63289723   杨鑫   提交 
1
 
  import React, { useCallback, 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;
63289723   杨鑫   提交 
16
17
 
    /** 标签模板新增/编辑时 true，用于布局层隐藏侧栏与顶栏 */
    onLabelTemplateEditorLayoutOverlay?: (fullscreen: boolean) => void;
884054fb   “wangming”   项目初始化 
18
19
 
  }
699ea6e8   杨鑫   完善打印逻辑 
20
21
22
23
24
 
  export function LabelsView({
    currentView = 'Labels',
    onViewChange,
    labelCreateOpenSeq = 0,
    onLabelCreateIntentConsumed,
63289723   杨鑫   提交 
25
 
    onLabelTemplateEditorLayoutOverlay,
699ea6e8   杨鑫   完善打印逻辑 
26
27
28
 
  }: LabelsViewProps) {
    const [templateEditorHidesTabs, setTemplateEditorHidesTabs] = useState(false);
63289723   杨鑫   提交 
29
30
31
32
33
34
35
36
 
    const handleTemplateEditorOverlay = useCallback(
      (fullscreen: boolean) => {
        setTemplateEditorHidesTabs(fullscreen);
        onLabelTemplateEditorLayoutOverlay?.(fullscreen);
      },
      [onLabelTemplateEditorLayoutOverlay],
    );
884054fb   “wangming”   项目初始化 
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
    const tabs: Tab[] = [
      'Labels',
      'Label Categories',
      'Label Types',
      'Label Templates',
      'Multiple Options'
    ];
  
    const handleTabClick = (tab: Tab) => {
      if (onViewChange) {
        onViewChange(tab);
      }
    };
  
    return (
699ea6e8   杨鑫   完善打印逻辑 
52
 
      <div
6ce07406   杨鑫   提交 
53
54
 
        className={`flex h-full flex-col ${templateEditorHidesTabs ? "gap-0" : "gap-6"}`}
        style={{ minHeight: 0, height: "100%", display: "flex", flexDirection: "column" }}
699ea6e8   杨鑫   完善打印逻辑 
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 
      >
        {/* 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”   项目初始化 
78
 
            </div>
884054fb   “wangming”   项目初始化 
79
 
          </div>
699ea6e8   杨鑫   完善打印逻辑 
80
 
        )}
884054fb   “wangming”   项目初始化 
81
6ce07406   杨鑫   提交 
82
83
84
85
86
 
        {/* 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" }}
        >
699ea6e8   杨鑫   完善打印逻辑 
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
 
          {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>
          )}
6ce07406   杨鑫   提交 
105
106
107
108
109
 
          {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" }}
            >
63289723   杨鑫   提交 
110
 
              <LabelTemplatesView onTemplateEditorOverlayChange={handleTemplateEditorOverlay} />
699ea6e8   杨鑫   完善打印逻辑 
111
112
113
114
115
116
117
 
            </div>
          )}
          {currentView === 'Multiple Options' && (
            <div className="min-h-0 flex-1 overflow-auto">
              <MultipleOptionsView />
            </div>
          )}
884054fb   “wangming”   项目初始化 
118
 
          {!['Labels', 'Label Categories', 'Label Types', 'Label Templates', 'Multiple Options'].includes(currentView) && (
699ea6e8   杨鑫   完善打印逻辑 
119
 
            <div className="flex h-64 items-center justify-center text-gray-400">
884054fb   “wangming”   项目初始化 
120
121
122
123
124
125
126
 
              {currentView} content coming soon...
            </div>
          )}
        </div>
      </div>
    );
  }