tntd 1.4.9 → 1.4.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Layout/AppList.js +1 -1
- package/components/Layout/GlobalNavigation/NavigationPopup.js +8 -8
- package/components/Layout/GlobalNavigation/index.js +2 -2
- package/components/Layout/HeaderTabs.js +98 -73
- package/components/Layout/OrgAppList.js +14 -15
- package/components/Layout/SideMenu.js +2 -2
- package/components/Layout/index.js +4 -5
- package/components/Layout/paaslayout/CompactSideMenu.js +1 -1
- package/components/Layout/paaslayout/index.js +2 -2
- package/components/Layout/storage.js +1 -1
- package/components/index.js +1 -0
- package/components/{Layout → utils}/checkAuth.js +3 -1
- package/components/utils/findMenuInfoByPath.js +39 -0
- package/components/{Layout/utils.js → utils/index.js} +3 -35
- package/dist/stats.json +9824 -9578
- package/dist/tntd.js +1 -1
- package/es/Layout/AppList.js +1 -1
- package/es/Layout/GlobalNavigation/NavigationPopup.js +1 -1
- package/es/Layout/GlobalNavigation/index.js +1 -1
- package/es/Layout/HeaderTabs.js +19 -15
- package/es/Layout/OrgAppList.js +3 -4
- package/es/Layout/SideMenu.js +1 -1
- package/es/Layout/index.js +5 -4
- package/es/Layout/paaslayout/CompactSideMenu.js +1 -1
- package/es/Layout/paaslayout/index.js +1 -1
- package/es/Layout/storage.js +1 -1
- package/es/index.js +2 -1
- package/es/utils/checkAuth.js +30 -0
- package/es/utils/findMenuInfoByPath.js +41 -0
- package/es/utils/index.js +99 -0
- package/lib/Layout/AppList.js +1 -1
- package/lib/Layout/GlobalNavigation/NavigationPopup.js +1 -1
- package/lib/Layout/GlobalNavigation/index.js +1 -1
- package/lib/Layout/HeaderTabs.js +14 -10
- package/lib/Layout/OrgAppList.js +5 -6
- package/lib/Layout/SideMenu.js +1 -1
- package/lib/Layout/index.js +6 -6
- package/lib/Layout/paaslayout/CompactSideMenu.js +1 -1
- package/lib/Layout/paaslayout/index.js +1 -1
- package/lib/Layout/storage.js +1 -1
- package/lib/index.js +34 -0
- package/lib/utils/checkAuth.js +41 -0
- package/lib/utils/findMenuInfoByPath.js +52 -0
- package/lib/utils/index.js +159 -0
- package/package.json +1 -1
- package/lib/Layout/EnterpriseLayout/Header.js +0 -113
- package/lib/Layout/EnterpriseLayout/HeaderActions.js +0 -104
|
@@ -4,7 +4,7 @@ import { Dropdown, Menu, Input, Select, TreeSelect } from 'antd';
|
|
|
4
4
|
import { get } from 'lodash';
|
|
5
5
|
import Icon from '../Icon';
|
|
6
6
|
import { getCurrentAppStore, setCurrentAppStore } from './storage';
|
|
7
|
-
import { traverseTree } from '
|
|
7
|
+
import { traverseTree } from '../utils';
|
|
8
8
|
|
|
9
9
|
const { Option } = Select;
|
|
10
10
|
const MenuList = styled(Menu)`
|
|
@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
|
|
|
2
2
|
import cn from 'classnames';
|
|
3
3
|
import styled from 'styled-components';
|
|
4
4
|
import { debounce } from 'lodash';
|
|
5
|
-
import { traverseTree, hasLevel3 } from '
|
|
5
|
+
import { traverseTree, hasLevel3 } from '../../utils';
|
|
6
6
|
import Icon from '../Iconfont';
|
|
7
7
|
import { getText } from '../../locale';
|
|
8
8
|
|
|
@@ -169,7 +169,7 @@ export default ({ theme, menus = [], close, actions, popupRef, containerRef }) =
|
|
|
169
169
|
|
|
170
170
|
return menus?.reduce((acc, cur) => {
|
|
171
171
|
const column = Math.max(1, ~~((containerRef.current.clientWidth - 32) / 210));
|
|
172
|
-
|
|
172
|
+
|
|
173
173
|
if (!acc.length) {
|
|
174
174
|
acc.push([cur]);
|
|
175
175
|
} else {
|
|
@@ -183,7 +183,7 @@ export default ({ theme, menus = [], close, actions, popupRef, containerRef }) =
|
|
|
183
183
|
const findMinHeightGroup = groups => {
|
|
184
184
|
let minHeight = Infinity;
|
|
185
185
|
let index = 0;
|
|
186
|
-
|
|
186
|
+
|
|
187
187
|
for (let i = 0; i < groups.length; i++) {
|
|
188
188
|
const height = calcColumnHeight(groups[i]);
|
|
189
189
|
if (height < minHeight) {
|
|
@@ -191,10 +191,10 @@ export default ({ theme, menus = [], close, actions, popupRef, containerRef }) =
|
|
|
191
191
|
minHeight = height;
|
|
192
192
|
}
|
|
193
193
|
}
|
|
194
|
-
|
|
194
|
+
|
|
195
195
|
return groups[index];
|
|
196
196
|
};
|
|
197
|
-
|
|
197
|
+
|
|
198
198
|
if (acc.length >= column) {
|
|
199
199
|
const minHeightGroup = findMinHeightGroup(acc);
|
|
200
200
|
minHeightGroup?.push(cur);
|
|
@@ -206,7 +206,7 @@ export default ({ theme, menus = [], close, actions, popupRef, containerRef }) =
|
|
|
206
206
|
}
|
|
207
207
|
}
|
|
208
208
|
}
|
|
209
|
-
|
|
209
|
+
|
|
210
210
|
return acc;
|
|
211
211
|
}, []);
|
|
212
212
|
};
|
|
@@ -299,7 +299,7 @@ export default ({ theme, menus = [], close, actions, popupRef, containerRef }) =
|
|
|
299
299
|
{
|
|
300
300
|
menus?.map(menu => (
|
|
301
301
|
<li
|
|
302
|
-
className={cn({ active: menu.code === activeTopMenu?.code})}
|
|
302
|
+
className={cn({ active: menu.code === activeTopMenu?.code })}
|
|
303
303
|
onClick={() => onSelectAppTab(menu)}
|
|
304
304
|
>
|
|
305
305
|
{menu?.[language === 'cn' ? 'groupName' : 'enName']}
|
|
@@ -322,7 +322,7 @@ export default ({ theme, menus = [], close, actions, popupRef, containerRef }) =
|
|
|
322
322
|
(group.children || []).map(menu => (
|
|
323
323
|
<MenuItem
|
|
324
324
|
key={menu.code}
|
|
325
|
-
className={cn({ active: selectedMenuKey === menu.code})}
|
|
325
|
+
className={cn({ active: selectedMenuKey === menu.code })}
|
|
326
326
|
theme={theme}
|
|
327
327
|
onClick={() => onMenuClick(menu)}
|
|
328
328
|
>
|
|
@@ -4,7 +4,7 @@ import cn from 'classnames';
|
|
|
4
4
|
import styled, { createGlobalStyle, withTheme } from 'styled-components';
|
|
5
5
|
import { uniq } from 'lodash';
|
|
6
6
|
import ActionsContext from '../ActionsContext';
|
|
7
|
-
import { hasLevel3 } from '
|
|
7
|
+
import { hasLevel3 } from '../../utils';
|
|
8
8
|
import Icon from '../Iconfont';
|
|
9
9
|
import NavigationPopup from './NavigationPopup';
|
|
10
10
|
|
|
@@ -110,7 +110,7 @@ export default withTheme(
|
|
|
110
110
|
>
|
|
111
111
|
<Icon type="unordered-list" />
|
|
112
112
|
<span>{getText('globalNavigation')}</span>
|
|
113
|
-
<GlobalStyle hasLevel3={hasLevel3(menus)}/>
|
|
113
|
+
<GlobalStyle hasLevel3={hasLevel3(menus)} />
|
|
114
114
|
</Navigation>
|
|
115
115
|
);
|
|
116
116
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { useState, useEffect, useRef } from
|
|
2
|
-
import styled, { withTheme } from
|
|
3
|
-
import cn from
|
|
4
|
-
import { get } from
|
|
5
|
-
import Icon from
|
|
1
|
+
import { useState, useEffect, useRef } from "react";
|
|
2
|
+
import styled, { withTheme } from "styled-components";
|
|
3
|
+
import cn from "classnames";
|
|
4
|
+
import { get } from "lodash";
|
|
5
|
+
import Icon from "../Icon";
|
|
6
6
|
|
|
7
7
|
const TabsContainer = styled.div`
|
|
8
8
|
display: flex;
|
|
@@ -69,8 +69,8 @@ const Tabs = styled.ul`
|
|
|
69
69
|
flex: 1;
|
|
70
70
|
white-space: nowrap;
|
|
71
71
|
padding-right: 40px;
|
|
72
|
-
transition: transform .25s linear;
|
|
73
|
-
position:absolute;
|
|
72
|
+
transition: transform 0.25s linear;
|
|
73
|
+
position: absolute;
|
|
74
74
|
`;
|
|
75
75
|
const TabItem = styled.li`
|
|
76
76
|
position: relative;
|
|
@@ -78,7 +78,7 @@ const TabItem = styled.li`
|
|
|
78
78
|
padding: 0 20px 0 10px;
|
|
79
79
|
cursor: pointer;
|
|
80
80
|
display: inline-block;
|
|
81
|
-
line-height: ${props => props.theme.size ===
|
|
81
|
+
line-height: ${props => (props.theme.size === "large" ? "46px" : "36px")};
|
|
82
82
|
/* transition: background-color .5; */
|
|
83
83
|
width: 130px;
|
|
84
84
|
color: rgba(255,255,255,.6);
|
|
@@ -120,7 +120,7 @@ const TabItem = styled.li`
|
|
|
120
120
|
|
|
121
121
|
a {
|
|
122
122
|
font-size: 14px;
|
|
123
|
-
color: ${props=>props.theme.headerActionsColor};//rgba(255,255,255,.6);
|
|
123
|
+
color: ${props => props.theme.headerActionsColor};//rgba(255,255,255,.6);
|
|
124
124
|
text-rendering: optimizeLegibility;
|
|
125
125
|
-webkit-font-smoothing: antialiased;
|
|
126
126
|
-moz-osx-font-smoothing: grayscale;
|
|
@@ -163,8 +163,20 @@ const TabItem = styled.li`
|
|
|
163
163
|
`;
|
|
164
164
|
|
|
165
165
|
export const HeaderTabs = withTheme(
|
|
166
|
-
({
|
|
167
|
-
|
|
166
|
+
({
|
|
167
|
+
theme,
|
|
168
|
+
className,
|
|
169
|
+
tabs = [],
|
|
170
|
+
onTabChange,
|
|
171
|
+
onTabSelect,
|
|
172
|
+
onTabClose,
|
|
173
|
+
appListVisible,
|
|
174
|
+
orgListVisible,
|
|
175
|
+
orgAppListVisible,
|
|
176
|
+
language,
|
|
177
|
+
...props
|
|
178
|
+
}) => {
|
|
179
|
+
const [selectedKey, setSelectedKey] = useState(props.selectedKey || get(tabs, "0.key"));
|
|
168
180
|
const [tabItems, setTabItems] = useState(tabs || []);
|
|
169
181
|
const [arrowVisible, setArrowVisible] = useState(false);
|
|
170
182
|
const [tabsPositionFlags, setTabsPositionFlags] = useState({ start: true, end: true });
|
|
@@ -172,8 +184,7 @@ export const HeaderTabs = withTheme(
|
|
|
172
184
|
|
|
173
185
|
const getTabsDom = () => tabsRef.current;
|
|
174
186
|
|
|
175
|
-
const onTabClick = (tab,index) => {
|
|
176
|
-
|
|
187
|
+
const onTabClick = (tab, index) => {
|
|
177
188
|
setSelectedKey(tab.key);
|
|
178
189
|
onTabSelect?.(tab);
|
|
179
190
|
|
|
@@ -191,84 +202,86 @@ export const HeaderTabs = withTheme(
|
|
|
191
202
|
newSelectedKey = index === 0 ? newTabItems[0]?.key : newTabItems[index - 1]?.key;
|
|
192
203
|
setSelectedKey(newSelectedKey);
|
|
193
204
|
}
|
|
194
|
-
onTabClose?.(
|
|
205
|
+
onTabClose?.(
|
|
206
|
+
tab,
|
|
207
|
+
newTabItems,
|
|
208
|
+
newTabItems.find(({ key }) => key === newSelectedKey)
|
|
209
|
+
);
|
|
195
210
|
};
|
|
196
211
|
const onMoveToLeft = () => {
|
|
197
212
|
const tabsDom = getTabsDom();
|
|
198
213
|
const parentBBox = tabsDom.parentNode.getBoundingClientRect();
|
|
199
214
|
const parentWidth = parentBBox.width - 32;
|
|
200
|
-
let x = Math.abs(+tabsDom.style.transform.replace(/[^\d.-]/g,
|
|
201
|
-
const index = Math.ceil(x/130);
|
|
202
|
-
const trueX = index*130;
|
|
203
|
-
let newX
|
|
215
|
+
let x = Math.abs(+tabsDom.style.transform.replace(/[^\d.-]/g, ""));
|
|
216
|
+
const index = Math.ceil(x / 130);
|
|
217
|
+
const trueX = index * 130;
|
|
218
|
+
let newX = Math.min(0, -(trueX - parentWidth));
|
|
204
219
|
tabsDom.style.transform = `translateX(${newX}px)`;
|
|
205
220
|
|
|
206
|
-
const width = tabItems.length*130;
|
|
221
|
+
const width = tabItems.length * 130;
|
|
207
222
|
setTabsPositionFlags({
|
|
208
|
-
start: newX<0,
|
|
209
|
-
end:
|
|
223
|
+
start: newX < 0,
|
|
224
|
+
end: Math.abs(newX) < width - parentWidth,
|
|
210
225
|
});
|
|
211
226
|
};
|
|
212
227
|
const onMoveToRight = () => {
|
|
213
228
|
const tabsDom = getTabsDom();
|
|
214
229
|
const parentBBox = tabsDom.parentNode.getBoundingClientRect();
|
|
215
230
|
const parentWidth = parentBBox.width - 32;
|
|
216
|
-
const width = tabItems.length*130;
|
|
231
|
+
const width = tabItems.length * 130;
|
|
217
232
|
|
|
218
|
-
let x = Math.abs(+tabsDom.style.transform.replace(/[^\d.-]/g,
|
|
219
|
-
const index = Math.floor(x/130);
|
|
220
|
-
const trueX = index*130;
|
|
221
|
-
let newX
|
|
233
|
+
let x = Math.abs(+tabsDom.style.transform.replace(/[^\d.-]/g, ""));
|
|
234
|
+
const index = Math.floor(x / 130);
|
|
235
|
+
const trueX = index * 130;
|
|
236
|
+
let newX = Math.max(-(width - parentWidth), -(trueX + parentWidth));
|
|
222
237
|
tabsDom.style.transform = `translateX(${newX}px)`;
|
|
223
238
|
|
|
224
239
|
setTabsPositionFlags({
|
|
225
|
-
start: newX<0,
|
|
226
|
-
end:
|
|
240
|
+
start: newX < 0,
|
|
241
|
+
end: Math.abs(newX) < width - parentWidth,
|
|
227
242
|
});
|
|
228
243
|
};
|
|
229
244
|
|
|
230
245
|
const translateTabsDom = (tabs, selectedKey) => {
|
|
231
|
-
if(!selectedKey)return;
|
|
246
|
+
if (!selectedKey) return;
|
|
232
247
|
const index = tabs.indexOf(tabs.find(({ key }) => key === selectedKey));
|
|
233
|
-
if(index
|
|
248
|
+
if (index === -1) return;
|
|
234
249
|
const tabsDom = getTabsDom();
|
|
235
|
-
let x =
|
|
250
|
+
let x = -+tabsDom.style.transform.replace(/[^\d.-]/g, "");
|
|
236
251
|
const bbox = {
|
|
237
|
-
left:index*130,
|
|
238
|
-
right:(index+1)*130
|
|
252
|
+
left: index * 130,
|
|
253
|
+
right: (index + 1) * 130,
|
|
239
254
|
};
|
|
240
255
|
const parentBBox = tabsDom.parentNode.getBoundingClientRect();
|
|
241
256
|
const parentWidth = parentBBox.width - 36;
|
|
242
|
-
const width = tabItems.length*130;
|
|
257
|
+
const width = tabItems.length * 130;
|
|
243
258
|
|
|
244
|
-
let tailX = x + parentWidth
|
|
259
|
+
let tailX = x + parentWidth; //当前滑动窗口尾部坐标
|
|
245
260
|
let newX = -x;
|
|
246
|
-
if(bbox.left<x){
|
|
261
|
+
if (bbox.left < x) {
|
|
247
262
|
newX = -bbox.left;
|
|
248
|
-
}else if(bbox.right>=tailX){
|
|
263
|
+
} else if (bbox.right >= tailX) {
|
|
249
264
|
newX = parentWidth - bbox.right;
|
|
250
265
|
}
|
|
251
|
-
if(newX+width<parentWidth){
|
|
266
|
+
if (newX + width < parentWidth) {
|
|
252
267
|
newX = -(width - parentWidth);
|
|
253
268
|
}
|
|
254
|
-
newX = Math.min(0,newX);
|
|
269
|
+
newX = Math.min(0, newX);
|
|
255
270
|
tabsDom.style.transform = `translateX(${newX}px)`;
|
|
256
|
-
|
|
271
|
+
|
|
257
272
|
setTabsPositionFlags({
|
|
258
|
-
start: newX<0,
|
|
259
|
-
end: Math.abs(newX)<
|
|
273
|
+
start: newX < 0,
|
|
274
|
+
end: Math.abs(newX) < width - parentWidth,
|
|
260
275
|
});
|
|
261
276
|
};
|
|
262
277
|
|
|
263
278
|
useEffect(() => {
|
|
264
|
-
setSelectedKey(props.selectedKey || get(tabs,
|
|
279
|
+
setSelectedKey(props.selectedKey || get(tabs, "0.key"));
|
|
265
280
|
// const t = [{'code':'tagdata','enName':'tagdata','icon':'layer-color','menuName':'打标数据管理打标数据管理打标数据管理','path':'/orion/tag/datalist','key':'tagdata','name':'打标数据管理打标数据管理打标数据管理'},{'code':'taglist','enName':'taglist','icon':'home','menuName':'标签管理','path':'http://baidu.com/orion/tag/list','key':'taglist','name':'标签管理'},{'code':'relation1','enName':'dadicasesearch1','icon':'home','menuName':'案件检索1','path':'/orion/case/relation1','key':'relation1','name':'案件检索1'},{'code':'dadicasesearch-0','enName':'dadicasesearch','icon':'home','menuName':'案件检索-0','path':'/orion/case/relation0','key':'dadicasesearch-0','name':'案件检索-0'},{'code':'dadicasesearch-1','enName':'dadicasesearch','icon':'home','menuName':'案件检索-1','path':'/orion/case/relation1','key':'dadicasesearch-1','name':'案件检索-1'},{'code':'dadicasesearch-2','enName':'dadicasesearch','icon':'home','menuName':'案件检索-2','path':'/orion/case/relation2','key':'dadicasesearch-2','name':'案件检索-2'},{'code':'dadicasesearch-3','enName':'dadicasesearch','icon':'home','menuName':'案件检索-3','path':'/orion/case/relation3','key':'dadicasesearch-3','name':'案件检索-3'},{'code':'dadicasesearch-4','enName':'dadicasesearch','icon':'home','menuName':'案件检索-4','path':'/orion/case/relation4','key':'dadicasesearch-4','name':'案件检索-4'},{'code':'dadicasesearch-5','enName':'dadicasesearch','icon':'home','menuName':'案件检索-5','path':'/orion/case/relation5','key':'dadicasesearch-5','name':'案件检索-5'},{'code':'dadicasesearch-6','enName':'dadicasesearch','icon':'home','menuName':'案件检索-6','path':'/orion/case/relation6','key':'dadicasesearch-6','name':'案件检索-6'},{'code':'dadicasesearch-7','enName':'dadicasesearch','icon':'home','menuName':'案件检索-7','path':'/orion/case/relation7','key':'dadicasesearch-7','name':'案件检索-7'},{'code':'dadicasesearch-8','enName':'dadicasesearch','icon':'home','menuName':'案件检索-8','path':'/orion/case/relation8','key':'dadicasesearch-8','name':'案件检索-8'}] ;
|
|
266
281
|
setTabItems(tabs);
|
|
267
282
|
}, [tabs, props.selectedKey]);
|
|
268
283
|
|
|
269
|
-
useEffect(()=>{
|
|
270
|
-
|
|
271
|
-
},[props.orgAppListVisible]);
|
|
284
|
+
useEffect(() => {}, [props.orgAppListVisible]);
|
|
272
285
|
|
|
273
286
|
useEffect(() => {
|
|
274
287
|
const tabsDom = getTabsDom();
|
|
@@ -283,38 +296,50 @@ export const HeaderTabs = withTheme(
|
|
|
283
296
|
return (
|
|
284
297
|
<TabsContainer
|
|
285
298
|
{...props}
|
|
286
|
-
className={cn(
|
|
299
|
+
className={cn("tnt-layout-header-tabs", { [className]: className })}
|
|
287
300
|
>
|
|
288
301
|
<Tabs className="tnt-layout-header-tabs-content" ref={tabsRef}>
|
|
289
|
-
{
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
>
|
|
300
|
-
<a href={tab.key} onClick={evt => evt.preventDefault()}>{tab.name}</a>
|
|
302
|
+
{tabItems.map((tab, index) => (
|
|
303
|
+
<TabItem
|
|
304
|
+
key={tab.key}
|
|
305
|
+
theme={theme}
|
|
306
|
+
className={cn({
|
|
307
|
+
active: selectedKey === tab.key,
|
|
308
|
+
activeTabPreSibling: tabItems[index + 1]?.key === selectedKey,
|
|
309
|
+
})}
|
|
310
|
+
onClick={() => onTabClick(tab, index)}
|
|
311
|
+
>
|
|
312
|
+
<a href={tab.key} onClick={evt => evt.preventDefault()}>
|
|
301
313
|
{
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
314
|
+
{
|
|
315
|
+
cn: tab.name,
|
|
316
|
+
en: tab.enName || tab.name,
|
|
317
|
+
}[language || "cn"]
|
|
305
318
|
}
|
|
306
|
-
</
|
|
307
|
-
|
|
308
|
-
|
|
319
|
+
</a>
|
|
320
|
+
{tab.closable !== false && tabItems.length > 1 && (
|
|
321
|
+
<Icon
|
|
322
|
+
type="close"
|
|
323
|
+
onClick={closeTabHandle.bind(null, tab, index)}
|
|
324
|
+
/>
|
|
325
|
+
)}
|
|
326
|
+
</TabItem>
|
|
327
|
+
))}
|
|
309
328
|
</Tabs>
|
|
310
|
-
{
|
|
311
|
-
|
|
312
|
-
<
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
329
|
+
{arrowVisible && (
|
|
330
|
+
<div className="tnt-layout-header-tabs-arrows">
|
|
331
|
+
<Icon
|
|
332
|
+
type="left"
|
|
333
|
+
onClick={onMoveToLeft}
|
|
334
|
+
disabled={!tabsPositionFlags.start}
|
|
335
|
+
/>
|
|
336
|
+
<Icon
|
|
337
|
+
type="right"
|
|
338
|
+
onClick={onMoveToRight}
|
|
339
|
+
disabled={!tabsPositionFlags.end}
|
|
340
|
+
/>
|
|
341
|
+
</div>
|
|
342
|
+
)}
|
|
318
343
|
</TabsContainer>
|
|
319
344
|
);
|
|
320
345
|
}
|
|
@@ -2,15 +2,14 @@ import { useState, useEffect } from 'react';
|
|
|
2
2
|
import styled, { withTheme, createGlobalStyle } from 'styled-components';
|
|
3
3
|
import { Input, Select, TreeSelect } from 'antd';
|
|
4
4
|
import { get } from 'lodash';
|
|
5
|
-
import { getCurrentAppStore, setCurrentAppStore, getCurrentOrgStore, setCurrentOrgStore, getCurrentOrgTreeStore,setCurrentOrgTreeStore
|
|
6
|
-
import { traverseTree } from '
|
|
5
|
+
import { getCurrentAppStore, setCurrentAppStore, getCurrentOrgStore, setCurrentOrgStore, getCurrentOrgTreeStore, setCurrentOrgTreeStore } from './storage';
|
|
6
|
+
import { traverseTree } from '../utils';
|
|
7
7
|
|
|
8
|
-
const { Group:InputGroup } = Input;
|
|
9
|
-
const { TreeNode } = TreeSelect;
|
|
8
|
+
const { Group: InputGroup } = Input;
|
|
10
9
|
const { Option } = Select;
|
|
11
10
|
|
|
12
11
|
// 机构+应用UI
|
|
13
|
-
const OrgAppsInputGroup= styled(InputGroup)`
|
|
12
|
+
const OrgAppsInputGroup = styled(InputGroup)`
|
|
14
13
|
display: inline-block !important;
|
|
15
14
|
width:auto !important;
|
|
16
15
|
min-width: 260px;
|
|
@@ -259,14 +258,14 @@ export default withTheme(
|
|
|
259
258
|
return find;
|
|
260
259
|
};
|
|
261
260
|
const current = findByKey(selectedKey || get(currentStore, 'key'));
|
|
262
|
-
if(type){
|
|
261
|
+
if (type) {
|
|
263
262
|
return current;
|
|
264
263
|
}
|
|
265
264
|
return current || dataList[0];
|
|
266
265
|
};
|
|
267
266
|
// 初始化数据函数机构树
|
|
268
267
|
const getInitialSelectedTree = (selecteds, dataList) => {
|
|
269
|
-
if(selecteds.length){
|
|
268
|
+
if (selecteds.length) {
|
|
270
269
|
return selecteds;
|
|
271
270
|
} else {
|
|
272
271
|
const temp = dataList.map(res => {
|
|
@@ -290,7 +289,7 @@ export default withTheme(
|
|
|
290
289
|
|
|
291
290
|
// 机构树
|
|
292
291
|
const [selectedOrgTree, setSelectedOrgTree] = useState(getInitialSelectedTree(
|
|
293
|
-
getCurrentOrgTreeStore(),
|
|
292
|
+
getCurrentOrgTreeStore(),
|
|
294
293
|
orgListFormatData
|
|
295
294
|
));
|
|
296
295
|
|
|
@@ -303,7 +302,7 @@ export default withTheme(
|
|
|
303
302
|
));
|
|
304
303
|
|
|
305
304
|
// org变化事件
|
|
306
|
-
const changeOrg = (org={}) => {
|
|
305
|
+
const changeOrg = (org = {}) => {
|
|
307
306
|
setSelectedOrg(org);
|
|
308
307
|
setCurrentOrgStore({
|
|
309
308
|
name: org?.name,
|
|
@@ -314,7 +313,7 @@ export default withTheme(
|
|
|
314
313
|
};
|
|
315
314
|
|
|
316
315
|
const changeOrgTree = (val = []) => {
|
|
317
|
-
if (!val.length){
|
|
316
|
+
if (!val.length) {
|
|
318
317
|
val = orgListFormatData.map(res => {
|
|
319
318
|
return {
|
|
320
319
|
label: res.title,
|
|
@@ -357,16 +356,16 @@ export default withTheme(
|
|
|
357
356
|
}, [orgList, selectedOrgKey, selectedAppKey, orgAppList]);
|
|
358
357
|
|
|
359
358
|
// 如果是多签页的模式 则居右对齐
|
|
360
|
-
let [treeSelectPosition,selectPosition] = [{},{}];
|
|
361
|
-
if(headerTabs){
|
|
359
|
+
let [treeSelectPosition, selectPosition] = [{}, {}];
|
|
360
|
+
if (headerTabs) {
|
|
362
361
|
treeSelectPosition = {
|
|
363
|
-
dropdownPopupAlign:{
|
|
362
|
+
dropdownPopupAlign: {
|
|
364
363
|
points: ['tr', 'br']
|
|
365
364
|
}
|
|
366
365
|
};
|
|
367
366
|
|
|
368
367
|
selectPosition = {
|
|
369
|
-
dropdownAlign:{
|
|
368
|
+
dropdownAlign: {
|
|
370
369
|
points: ['tr', 'br']
|
|
371
370
|
}
|
|
372
371
|
};
|
|
@@ -402,7 +401,7 @@ export default withTheme(
|
|
|
402
401
|
};
|
|
403
402
|
}
|
|
404
403
|
|
|
405
|
-
if(!orgAppShow){
|
|
404
|
+
if (!orgAppShow) {
|
|
406
405
|
return (
|
|
407
406
|
<>
|
|
408
407
|
<AppTreeSelect
|
|
@@ -3,7 +3,7 @@ import styled, { withTheme } from 'styled-components';
|
|
|
3
3
|
import { Menu } from 'antd';
|
|
4
4
|
import { get } from 'lodash';
|
|
5
5
|
import ActionsContext from './ActionsContext';
|
|
6
|
-
import { getSelectedMenuInfo, isGroupMenu, isNewTabMenu, openInNewTab, traverseTree } from '
|
|
6
|
+
import { getSelectedMenuInfo, isGroupMenu, isNewTabMenu, openInNewTab, traverseTree } from '../utils';
|
|
7
7
|
import { setSideMenuStore } from './storage';
|
|
8
8
|
import Iconfont from './Iconfont';
|
|
9
9
|
|
|
@@ -420,7 +420,7 @@ export default withTheme(
|
|
|
420
420
|
{
|
|
421
421
|
menu?.children?.map(({ code, ...menu }) => (
|
|
422
422
|
<MenuItem key={code}>
|
|
423
|
-
<MenuLink {...menu} style={{ paddingLeft: '24px' }}/>
|
|
423
|
+
<MenuLink {...menu} style={{ paddingLeft: '24px' }} />
|
|
424
424
|
</MenuItem>
|
|
425
425
|
))
|
|
426
426
|
}
|
|
@@ -4,9 +4,8 @@ import EnterpriseLayout from './EnterpriseLayout';
|
|
|
4
4
|
import PaasLayout from './paaslayout';
|
|
5
5
|
import HeaderNavs from './HeaderNavs';
|
|
6
6
|
import HeaderTabs from './HeaderTabs';
|
|
7
|
-
import getCheckAuth from './checkAuth';
|
|
8
7
|
import AuthContext from '../AuthContext';
|
|
9
|
-
import { safeParseJSON, findMenuInfoByPath } from '
|
|
8
|
+
import { safeParseJSON, findMenuInfoByPath, getCheckAuth } from '../utils';
|
|
10
9
|
import ActionsContext from './ActionsContext';
|
|
11
10
|
import createActions from './createActions';
|
|
12
11
|
import { getLanguageStore } from './storage';
|
|
@@ -20,7 +19,7 @@ export const HeaderActionItem = props => (
|
|
|
20
19
|
export * from './HeaderNavs';
|
|
21
20
|
|
|
22
21
|
|
|
23
|
-
const TNTLayout = ({ type, config, ...props }) => {
|
|
22
|
+
const TNTLayout = ({ type, config, showMenuInIframe = false, ...props }) => {
|
|
24
23
|
const headerHeight = props.size === 'large' ? 60 : 50;
|
|
25
24
|
const theme = {
|
|
26
25
|
size: props.size,
|
|
@@ -37,7 +36,7 @@ const TNTLayout = ({ type, config, ...props }) => {
|
|
|
37
36
|
lightBgColor: '#F1F2F5',
|
|
38
37
|
blueBgColor: '#1D4295' // 默认的蓝色主题
|
|
39
38
|
};
|
|
40
|
-
const isInIframe = self !== top;
|
|
39
|
+
const isInIframe = showMenuInIframe ? false : (self !== top && !window.navigator.userAgent.includes('mo-fang-app'));
|
|
41
40
|
// 前期拼写错误,导致需要兼容处理
|
|
42
41
|
const extraHeaderActions = props.extraHeaderActions || props.extralHeaderActions;
|
|
43
42
|
const extendMap = typeof props.extendMap === 'string' ? safeParseJSON(props.extendMap, {}) : props.extendMap;
|
|
@@ -87,7 +86,7 @@ const TNTLayout = ({ type, config, ...props }) => {
|
|
|
87
86
|
/>
|
|
88
87
|
}
|
|
89
88
|
{
|
|
90
|
-
(!type || !['paas','enterprise'].includes(type)) &&
|
|
89
|
+
(!type || !['paas', 'enterprise'].includes(type)) &&
|
|
91
90
|
<Layout
|
|
92
91
|
menuAlignMode={menuAlignMode}
|
|
93
92
|
config={config}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useState, useEffect, Component } from 'react';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
import cn from 'classnames';
|
|
4
|
-
import { isNewTabMenu, openInNewTab } from '
|
|
4
|
+
import { isNewTabMenu, openInNewTab } from '../../utils';
|
|
5
5
|
import Iconfont from '../Iconfont';
|
|
6
6
|
|
|
7
7
|
const SideMenu = styled.ul`
|
|
@@ -3,7 +3,7 @@ import styled, { withTheme } from 'styled-components';
|
|
|
3
3
|
import cn from 'classnames';
|
|
4
4
|
import { Layout } from 'antd';
|
|
5
5
|
import { get, reduce, isUndefined } from 'lodash';
|
|
6
|
-
import { getSelectedMenuInfo } from '
|
|
6
|
+
import { getSelectedMenuInfo } from '../../utils';
|
|
7
7
|
import HeaderNavs from '../HeaderNavs';
|
|
8
8
|
import Header from './Header';
|
|
9
9
|
import SideMenu from './SideMenu';
|
|
@@ -76,7 +76,7 @@ export default withTheme(
|
|
|
76
76
|
const [userInfo, setUserInfo] = useState(props.userInfo || {});
|
|
77
77
|
let theme = getThemeStore() || userInfo.theme || 'themeS2';
|
|
78
78
|
// theme === 'default' ? 'themeS2' : theme;
|
|
79
|
-
theme = ['default','themeS3'].includes(theme) ? 'themeS2' : theme;
|
|
79
|
+
theme = ['default', 'themeS3'].includes(theme) ? 'themeS2' : theme;
|
|
80
80
|
|
|
81
81
|
const language = getLanguageStore() || userInfo.lang || 'cn';
|
|
82
82
|
const menusMapByApp = menus.reduce((acc, menu) => {
|
package/components/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { get } from 'lodash';
|
|
2
2
|
|
|
3
|
-
export
|
|
3
|
+
export const getCheckAuth = menus => {
|
|
4
4
|
const getAuthMap = (menus = [], authMap = {}) => {
|
|
5
5
|
return menus.reduce(
|
|
6
6
|
(acc, { code, groupName, functionList, children }) => {
|
|
@@ -23,3 +23,5 @@ export default menus => {
|
|
|
23
23
|
|
|
24
24
|
return (menuCode, funCode) => !!get(authMap, `${menuCode}${funCode ? `.${funCode}` : ''}`);
|
|
25
25
|
};
|
|
26
|
+
|
|
27
|
+
export default getCheckAuth;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { traverseTree, isGroupMenu } from '.';
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
export const findMenuInfoByPath = (menuTree, path, matchFunc) => {
|
|
5
|
+
let menu;
|
|
6
|
+
let subMenu;
|
|
7
|
+
let matchedSubMenu;
|
|
8
|
+
let parentMenus;
|
|
9
|
+
|
|
10
|
+
if (path) {
|
|
11
|
+
traverseTree(menuTree, (menu, pnode, pnodes) => {
|
|
12
|
+
if (!isGroupMenu(menu)) {
|
|
13
|
+
if (menu?.path === path) {
|
|
14
|
+
subMenu = menu;
|
|
15
|
+
menu = pnode;
|
|
16
|
+
parentMenus = pnodes;
|
|
17
|
+
return false;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
if (!matchedSubMenu && matchFunc && matchFunc(menu)) {
|
|
21
|
+
matchedSubMenu = menu;
|
|
22
|
+
menu = pnode;
|
|
23
|
+
parentMenus = pnodes;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
return {
|
|
29
|
+
subMenu,
|
|
30
|
+
matchedSubMenu,
|
|
31
|
+
menu,
|
|
32
|
+
parentMenus
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
return { subMenu, menu, parentMenus };
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
export default findMenuInfoByPath;
|