王明 / Food-Labeling-Management-Platform

Blame view

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