tntd 1.4.6 → 1.4.7
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/HeaderActions.js +90 -128
- package/components/LoadingButton/index.js +11 -15
- package/dist/stats.json +4958 -4958
- package/dist/tntd.js +1 -1
- package/es/Layout/HeaderActions.js +10 -10
- package/es/LoadingButton/index.js +20 -10
- package/lib/ArrayInput/icon.js +27 -31
- package/lib/ArrayInput/index.js +211 -298
- package/lib/AuthContext.js +2 -13
- package/lib/Columns/index.js +71 -100
- package/lib/DevelopmentLogin/LoginModal.js +79 -141
- package/lib/DevelopmentLogin/index.js +28 -55
- package/lib/Ellipsis/Svg/CopySVG.js +23 -71
- package/lib/Ellipsis/Svg/TickSVG.js +17 -49
- package/lib/Ellipsis/index.js +148 -154
- package/lib/Handle/index.js +72 -109
- package/lib/Icon/fonts/iconfont.js +1 -43
- package/lib/Icon/iconList.js +119 -8
- package/lib/Icon/index.js +13 -45
- package/lib/Img/Contain.js +49 -81
- package/lib/Img/Cover.js +88 -136
- package/lib/Img/index.js +36 -89
- package/lib/Layout/ActionsContext.js +2 -11
- package/lib/Layout/AppList.js +262 -256
- package/lib/Layout/Application.js +119 -135
- package/lib/Layout/Avatar.js +137 -137
- package/lib/Layout/CompatibleLanguage.js +214 -195
- package/lib/Layout/EnterpriseLayout/Avatar.js +156 -168
- package/lib/Layout/EnterpriseLayout/Language.js +75 -100
- package/lib/Layout/EnterpriseLayout/Theme.js +96 -94
- package/lib/Layout/EnterpriseLayout/index.js +32 -45
- package/lib/Layout/GlobalNavigation/NavigationPopup.js +335 -407
- package/lib/Layout/GlobalNavigation/index.js +110 -158
- package/lib/Layout/Header.js +165 -116
- package/lib/Layout/HeaderActions.js +132 -129
- package/lib/Layout/HeaderNavs.js +90 -113
- package/lib/Layout/HeaderTabs.js +312 -278
- package/lib/Layout/Iconfont.js +2 -15
- package/lib/Layout/Language.js +63 -102
- package/lib/Layout/Layout.js +272 -261
- package/lib/Layout/Logo.js +132 -87
- package/lib/Layout/OrgAppList.js +440 -319
- package/lib/Layout/SideMenu.js +429 -343
- package/lib/Layout/Theme.js +95 -124
- package/lib/Layout/checkAuth.js +21 -35
- package/lib/Layout/createActions.js +38 -51
- package/lib/Layout/images/index.js +33 -41
- package/lib/Layout/index.js +110 -161
- package/lib/Layout/paaslayout/CompactSideMenu.js +200 -178
- package/lib/Layout/paaslayout/Header.js +84 -90
- package/lib/Layout/paaslayout/Logo.js +27 -32
- package/lib/Layout/paaslayout/SideMenu.js +161 -174
- package/lib/Layout/paaslayout/index.js +240 -261
- package/lib/Layout/storage.js +20 -78
- package/lib/Layout/utils.js +93 -143
- package/lib/LoadingButton/index.js +25 -57
- package/lib/Modal/index.js +83 -108
- package/lib/Page/Box.js +56 -81
- package/lib/Page/index.js +151 -173
- package/lib/Page/utils.js +12 -30
- package/lib/QueryForm/Field/Checkbox.js +11 -33
- package/lib/QueryForm/Field/Select.js +63 -99
- package/lib/QueryForm/Field/SelectInput.js +69 -114
- package/lib/QueryForm/Field/fieldsMap.js +30 -52
- package/lib/QueryForm/Field/index.js +76 -158
- package/lib/QueryForm/createActions.js +50 -65
- package/lib/QueryForm/index.js +304 -383
- package/lib/QueryForm/useForm.js +6 -17
- package/lib/QueryListScene/List.js +290 -366
- package/lib/QueryListScene/QueryForm.js +93 -161
- package/lib/QueryListScene/QueryListScene.js +33 -87
- package/lib/QueryListScene/Title.js +10 -20
- package/lib/QueryListScene/Toolbar.js +8 -31
- package/lib/QueryListScene/createActions.js +64 -79
- package/lib/QueryListScene/index.js +23 -40
- package/lib/QueryListScene/useActions.js +6 -17
- package/lib/Select/DropDownWrap.js +60 -124
- package/lib/Select/index.js +425 -561
- package/lib/Table/ResizableTable/index.js +77 -121
- package/lib/Table/index.js +19 -51
- package/lib/Title/index.js +34 -52
- package/lib/index.js +19 -159
- package/lib/locale.js +48 -63
- package/package.json +1 -1
- package/lib/Layout/EnterpriseLayout/Header.js +0 -113
- package/lib/Layout/EnterpriseLayout/HeaderActions.js +0 -104
|
@@ -1,263 +1,242 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
var _HeaderNavs = _interopRequireDefault(require("../HeaderNavs"));
|
|
25
|
-
|
|
26
|
-
var _Header = _interopRequireDefault(require("./Header"));
|
|
27
|
-
|
|
28
|
-
var _SideMenu = _interopRequireDefault(require("./SideMenu"));
|
|
29
|
-
|
|
30
|
-
var _CompactSideMenu = _interopRequireDefault(require("./CompactSideMenu"));
|
|
31
|
-
|
|
32
|
-
var _storage = require("../storage");
|
|
33
|
-
|
|
34
|
-
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
|
|
35
|
-
|
|
36
|
-
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
37
|
-
|
|
38
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
39
|
-
|
|
40
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
41
|
-
|
|
42
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
43
|
-
|
|
44
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
45
|
-
|
|
46
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
|
|
47
|
-
|
|
48
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
|
|
49
|
-
|
|
50
|
-
function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
51
|
-
|
|
52
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
53
|
-
|
|
54
|
-
function _templateObject() {
|
|
55
|
-
var data = _taggedTemplateLiteral(["\n position: relative;\n height: 100vh;\n overflow: hidden;\n & > .ant-layout {\n flex-direction: row;\n & > .ant-layout-content {\n overflow-x: hidden;\n flex: 1;\n }\n }\n .tnt-layout-sider {\n overflow-x: hidden;\n background: #fff !important;\n box-shadow: 0 1px 10px 0 rgba(0,0,0,0.10);\n z-index: 8;\n }\n &.isInIframe, &.isEmptyLayout {\n .tnt-layout-sider {\n display: none;\n }\n }\n &.tnt-themeS1 .tnt-layout-sider {\n background: #fff !important;\n }\n .tnt-layout-content {\n background: ", ";\n }\n"]);
|
|
56
|
-
|
|
57
|
-
_templateObject = function _templateObject() {
|
|
58
|
-
return data;
|
|
59
|
-
};
|
|
60
|
-
|
|
61
|
-
return data;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
65
|
-
|
|
66
|
-
var Content = _layout["default"].Content,
|
|
67
|
-
Sider = _layout["default"].Sider;
|
|
68
|
-
var TNTPaasLayout = (0, _styledComponents["default"])(_layout["default"])(_templateObject(), function (props) {
|
|
69
|
-
return props.theme.lightBgColor;
|
|
70
|
-
});
|
|
71
|
-
|
|
72
|
-
var noop = function noop() {
|
|
73
|
-
return true;
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
var _default = (0, _styledComponents.withTheme)(function (props) {
|
|
77
|
-
var appKey = props.appKey,
|
|
78
|
-
logo = props.logo,
|
|
79
|
-
name = props.name,
|
|
80
|
-
enName = props.enName,
|
|
81
|
-
isInIframe = props.isInIframe,
|
|
82
|
-
isEmptyLayout = props.isEmptyLayout,
|
|
83
|
-
selectedAppKey = props.selectedAppKey,
|
|
84
|
-
appList = props.appList,
|
|
85
|
-
_props$config = props.config,
|
|
86
|
-
config = _props$config === void 0 ? {} : _props$config,
|
|
87
|
-
extraHeaderActions = props.extraHeaderActions,
|
|
88
|
-
headerNavs = props.headerNavs,
|
|
89
|
-
sideMenu = props.sideMenu,
|
|
90
|
-
selectedMenuKey = props.selectedMenuKey,
|
|
91
|
-
_props$menuAlignMode = props.menuAlignMode,
|
|
92
|
-
menuAlignMode = _props$menuAlignMode === void 0 ? 'side' : _props$menuAlignMode,
|
|
93
|
-
_props$menus = props.menus,
|
|
94
|
-
menus = _props$menus === void 0 ? [] : _props$menus,
|
|
95
|
-
formatMenuPath = props.formatMenuPath,
|
|
96
|
-
changeRouter = props.changeRouter,
|
|
97
|
-
_props$onLogoClick = props.onLogoClick,
|
|
98
|
-
onLogoClick = _props$onLogoClick === void 0 ? noop : _props$onLogoClick,
|
|
99
|
-
_props$onThemeChange = props.onThemeChange,
|
|
100
|
-
_onThemeChange = _props$onThemeChange === void 0 ? noop : _props$onThemeChange,
|
|
101
|
-
_props$onLanguageChan = props.onLanguageChange,
|
|
102
|
-
_onLanguageChange = _props$onLanguageChan === void 0 ? noop : _props$onLanguageChan,
|
|
103
|
-
_props$onApplicationC = props.onApplicationChange,
|
|
104
|
-
_onApplicationChange = _props$onApplicationC === void 0 ? noop : _props$onApplicationC,
|
|
105
|
-
_props$onAppChange = props.onAppChange,
|
|
106
|
-
onAppChange = _props$onAppChange === void 0 ? noop : _props$onAppChange,
|
|
107
|
-
onLogout = props.onLogout,
|
|
108
|
-
_props$onBeforeMenuCh = props.onBeforeMenuChange,
|
|
109
|
-
onBeforeMenuChange = _props$onBeforeMenuCh === void 0 ? noop : _props$onBeforeMenuCh,
|
|
110
|
-
_props$onMenuChange = props.onMenuChange,
|
|
111
|
-
onMenuChange = _props$onMenuChange === void 0 ? noop : _props$onMenuChange,
|
|
112
|
-
_props$onMenuSelect = props.onMenuSelect,
|
|
113
|
-
onMenuSelect = _props$onMenuSelect === void 0 ? noop : _props$onMenuSelect,
|
|
114
|
-
_props$onHeaderNavCha = props.onHeaderNavChange,
|
|
115
|
-
onHeaderNavChange = _props$onHeaderNavCha === void 0 ? noop : _props$onHeaderNavCha;
|
|
116
|
-
|
|
117
|
-
var _useState = (0, _react.useState)(props.userInfo || {}),
|
|
118
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
119
|
-
userInfo = _useState2[0],
|
|
120
|
-
setUserInfo = _useState2[1];
|
|
121
|
-
|
|
122
|
-
var theme = (0, _storage.getThemeStore)() || userInfo.theme || 'themeS2'; // theme === 'default' ? 'themeS2' : theme;
|
|
123
|
-
|
|
124
|
-
theme = ['default', 'themeS3'].includes(theme) ? 'themeS2' : theme;
|
|
125
|
-
var language = (0, _storage.getLanguageStore)() || userInfo.lang || 'cn';
|
|
126
|
-
var menusMapByApp = menus.reduce(function (acc, menu) {
|
|
127
|
-
var subMenus = menu.children || [];
|
|
128
|
-
var singleGroupMap = subMenus.reduce(function (acc, subMenu) {
|
|
129
|
-
var path = subMenu.path;
|
|
130
|
-
var appKey = !/^http/i.test(path) ? path == null ? void 0 : path.match(/\/([^\/]+)/)[1] : '';
|
|
131
|
-
|
|
132
|
-
if (appKey) {
|
|
133
|
-
acc[appKey] = acc[appKey] || _objectSpread({}, menu, {
|
|
134
|
-
children: []
|
|
135
|
-
});
|
|
136
|
-
acc[appKey].children.push(subMenu);
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
return acc;
|
|
140
|
-
}, {});
|
|
141
|
-
|
|
142
|
-
for (var _appKey in singleGroupMap) {
|
|
143
|
-
acc[_appKey] = acc[_appKey] || [];
|
|
144
|
-
|
|
145
|
-
acc[_appKey].push(singleGroupMap[_appKey]);
|
|
1
|
+
import { useState, useEffect } from 'react';
|
|
2
|
+
import styled, { withTheme } from 'styled-components';
|
|
3
|
+
import cn from 'classnames';
|
|
4
|
+
import { Layout } from 'antd';
|
|
5
|
+
import { get, reduce, isUndefined } from 'lodash';
|
|
6
|
+
import { getSelectedMenuInfo } from '../utils';
|
|
7
|
+
import HeaderNavs from '../HeaderNavs';
|
|
8
|
+
import Header from './Header';
|
|
9
|
+
import SideMenu from './SideMenu';
|
|
10
|
+
import CompactSideMenu from './CompactSideMenu';
|
|
11
|
+
import { getLanguageStore, getThemeStore } from '../storage';
|
|
12
|
+
|
|
13
|
+
const { Content, Sider } = Layout;
|
|
14
|
+
const TNTPaasLayout = styled(Layout)`
|
|
15
|
+
position: relative;
|
|
16
|
+
height: 100vh;
|
|
17
|
+
overflow: hidden;
|
|
18
|
+
& > .ant-layout {
|
|
19
|
+
flex-direction: row;
|
|
20
|
+
& > .ant-layout-content {
|
|
21
|
+
overflow-x: hidden;
|
|
22
|
+
flex: 1;
|
|
23
|
+
}
|
|
146
24
|
}
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
153
|
-
currentAppKey = _useState4[0],
|
|
154
|
-
setCurrentAppKey = _useState4[1];
|
|
155
|
-
|
|
156
|
-
var apps = (0, _lodash.reduce)(menusMapByApp, function (acc, value, key) {
|
|
157
|
-
acc.push({
|
|
158
|
-
appKey: key,
|
|
159
|
-
name: key
|
|
160
|
-
});
|
|
161
|
-
return acc;
|
|
162
|
-
}, []);
|
|
163
|
-
var isMenusTop = menuAlignMode === 'top';
|
|
164
|
-
var headerNavMenus = headerNavs;
|
|
165
|
-
var currentSystemMenus = menusMapByApp[currentAppKey] || [];
|
|
166
|
-
|
|
167
|
-
var _useState5 = (0, _react.useState)((0, _lodash.get)(currentSystemMenus, '0.code')),
|
|
168
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
169
|
-
currentHeaderNavKey = _useState6[0],
|
|
170
|
-
setCurrentHeaderNavKey = _useState6[1];
|
|
171
|
-
|
|
172
|
-
var sideMenus = isMenusTop ? (0, _lodash.get)(currentSystemMenus.find(function (_ref) {
|
|
173
|
-
var code = _ref.code;
|
|
174
|
-
return currentHeaderNavKey === code;
|
|
175
|
-
}), 'children', []) : currentSystemMenus;
|
|
176
|
-
var FinalSideMenu = isMenusTop ? _CompactSideMenu["default"] : _SideMenu["default"]; // 一级菜单放在顶部(Header里面菜单作为一级导航)
|
|
177
|
-
|
|
178
|
-
if (isMenusTop) {
|
|
179
|
-
headerNavMenus = React.createElement(_HeaderNavs["default"], {
|
|
180
|
-
selectedKey: currentHeaderNavKey,
|
|
181
|
-
navs: currentSystemMenus.map(function (item) {
|
|
182
|
-
return _objectSpread({}, item, {
|
|
183
|
-
key: item.code,
|
|
184
|
-
name: item.groupName
|
|
185
|
-
});
|
|
186
|
-
}),
|
|
187
|
-
onChange: function onChange(item) {
|
|
188
|
-
setCurrentHeaderNavKey(item.key);
|
|
189
|
-
onHeaderNavChange(item);
|
|
190
|
-
}
|
|
191
|
-
});
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
(0, _react.useEffect)(function () {
|
|
195
|
-
setUserInfo(props.userInfo);
|
|
196
|
-
}, [props.userInfo]);
|
|
197
|
-
(0, _react.useEffect)(function () {
|
|
198
|
-
if (isMenusTop) {
|
|
199
|
-
setCurrentHeaderNavKey((0, _lodash.get)((0, _utils.getSelectedMenuInfo)(selectedMenuKey, menus), 'menu.code'));
|
|
25
|
+
.tnt-layout-sider {
|
|
26
|
+
overflow-x: hidden;
|
|
27
|
+
background: #fff !important;
|
|
28
|
+
box-shadow: 0 1px 10px 0 rgba(0,0,0,0.10);
|
|
29
|
+
z-index: 8;
|
|
200
30
|
}
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
31
|
+
&.isInIframe, &.isEmptyLayout {
|
|
32
|
+
.tnt-layout-sider {
|
|
33
|
+
display: none;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
&.tnt-themeS1 .tnt-layout-sider {
|
|
37
|
+
background: #fff !important;
|
|
38
|
+
}
|
|
39
|
+
.tnt-layout-content {
|
|
40
|
+
background: ${props => props.theme.lightBgColor};
|
|
41
|
+
}
|
|
42
|
+
`;
|
|
43
|
+
const noop = () => true;
|
|
44
|
+
|
|
45
|
+
export default withTheme(
|
|
46
|
+
props => {
|
|
47
|
+
const {
|
|
48
|
+
appKey,
|
|
49
|
+
logo,
|
|
50
|
+
name,
|
|
51
|
+
enName,
|
|
52
|
+
isInIframe,
|
|
53
|
+
isEmptyLayout,
|
|
54
|
+
selectedAppKey,
|
|
55
|
+
appList,
|
|
56
|
+
config = {},
|
|
57
|
+
extraHeaderActions,
|
|
58
|
+
headerNavs,
|
|
59
|
+
sideMenu,
|
|
60
|
+
selectedMenuKey,
|
|
61
|
+
menuAlignMode = 'side',
|
|
62
|
+
menus = [],
|
|
63
|
+
formatMenuPath,
|
|
64
|
+
changeRouter,
|
|
65
|
+
onLogoClick = noop,
|
|
66
|
+
onThemeChange = noop,
|
|
67
|
+
onLanguageChange = noop,
|
|
68
|
+
onApplicationChange = noop,
|
|
69
|
+
onAppChange = noop,
|
|
70
|
+
onLogout,
|
|
71
|
+
onBeforeMenuChange = noop,
|
|
72
|
+
onMenuChange = noop,
|
|
73
|
+
onMenuSelect = noop,
|
|
74
|
+
onHeaderNavChange = noop
|
|
75
|
+
} = props;
|
|
76
|
+
const [userInfo, setUserInfo] = useState(props.userInfo || {});
|
|
77
|
+
let theme = getThemeStore() || userInfo.theme || 'themeS2';
|
|
78
|
+
// theme === 'default' ? 'themeS2' : theme;
|
|
79
|
+
theme = ['default','themeS3'].includes(theme) ? 'themeS2' : theme;
|
|
80
|
+
|
|
81
|
+
const language = getLanguageStore() || userInfo.lang || 'cn';
|
|
82
|
+
const menusMapByApp = menus.reduce((acc, menu) => {
|
|
83
|
+
const subMenus = menu.children || [];
|
|
84
|
+
|
|
85
|
+
const singleGroupMap = subMenus.reduce((acc, subMenu) => {
|
|
86
|
+
const { path } = subMenu;
|
|
87
|
+
const appKey = !/^http/i.test(path) ? path?.match(/\/([^\/]+)/)[1] : '';
|
|
88
|
+
|
|
89
|
+
if (appKey) {
|
|
90
|
+
acc[appKey] = acc[appKey] || {
|
|
91
|
+
...menu,
|
|
92
|
+
children: []
|
|
93
|
+
};
|
|
94
|
+
acc[appKey].children.push(subMenu);
|
|
95
|
+
}
|
|
96
|
+
return acc;
|
|
97
|
+
}, {});
|
|
98
|
+
|
|
99
|
+
for (const appKey in singleGroupMap) {
|
|
100
|
+
acc[appKey] = acc[appKey] || [];
|
|
101
|
+
acc[appKey].push(singleGroupMap[appKey]);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
return acc;
|
|
105
|
+
}, {});
|
|
106
|
+
const [currentAppKey, setCurrentAppKey] = useState(appKey);
|
|
107
|
+
const apps = reduce(menusMapByApp, (acc, value, key) => {
|
|
108
|
+
acc.push({
|
|
109
|
+
appKey: key,
|
|
110
|
+
name: key
|
|
111
|
+
});
|
|
112
|
+
return acc;
|
|
113
|
+
}, []);
|
|
114
|
+
|
|
115
|
+
const isMenusTop = menuAlignMode === 'top';
|
|
116
|
+
let headerNavMenus = headerNavs;
|
|
117
|
+
const currentSystemMenus = menusMapByApp[currentAppKey] || [];
|
|
118
|
+
const [currentHeaderNavKey, setCurrentHeaderNavKey] = useState(get(currentSystemMenus, '0.code'));
|
|
119
|
+
const sideMenus = isMenusTop ? get(
|
|
120
|
+
currentSystemMenus.find(
|
|
121
|
+
({ code }) => currentHeaderNavKey === code
|
|
122
|
+
),
|
|
123
|
+
'children',
|
|
124
|
+
[]
|
|
125
|
+
) : currentSystemMenus;
|
|
126
|
+
const FinalSideMenu = isMenusTop ? CompactSideMenu : SideMenu;
|
|
127
|
+
|
|
128
|
+
// 一级菜单放在顶部(Header里面菜单作为一级导航)
|
|
129
|
+
if (isMenusTop) {
|
|
130
|
+
headerNavMenus = (
|
|
131
|
+
<HeaderNavs
|
|
132
|
+
selectedKey={currentHeaderNavKey}
|
|
133
|
+
navs={currentSystemMenus.map(
|
|
134
|
+
item => ({
|
|
135
|
+
...item,
|
|
136
|
+
key: item.code,
|
|
137
|
+
name: item.groupName
|
|
138
|
+
})
|
|
139
|
+
)}
|
|
140
|
+
onChange={item => {
|
|
141
|
+
setCurrentHeaderNavKey(item.key);
|
|
142
|
+
onHeaderNavChange(item);
|
|
143
|
+
}}
|
|
144
|
+
/>
|
|
145
|
+
);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
useEffect(() => {
|
|
149
|
+
setUserInfo(props.userInfo);
|
|
150
|
+
}, [props.userInfo]);
|
|
151
|
+
|
|
152
|
+
useEffect(() => {
|
|
153
|
+
if (isMenusTop) {
|
|
154
|
+
setCurrentHeaderNavKey(get(getSelectedMenuInfo(selectedMenuKey, menus), 'menu.code'));
|
|
155
|
+
}
|
|
156
|
+
}, [menus, selectedMenuKey]);
|
|
157
|
+
|
|
158
|
+
return (
|
|
159
|
+
<TNTPaasLayout className={cn(
|
|
160
|
+
`tnt-${theme} ${props.className || ''}`,
|
|
161
|
+
{
|
|
162
|
+
'large-size': props.theme.size === 'large',
|
|
163
|
+
compatible: props.theme.compatible,
|
|
164
|
+
isInIframe,
|
|
165
|
+
isEmptyLayout,
|
|
166
|
+
noAppList: !appList
|
|
167
|
+
}
|
|
168
|
+
)}>
|
|
169
|
+
<Header
|
|
170
|
+
logo={logo}
|
|
171
|
+
name={name}
|
|
172
|
+
enName={enName}
|
|
173
|
+
language={language}
|
|
174
|
+
theme={theme}
|
|
175
|
+
userInfo={userInfo}
|
|
176
|
+
config={config}
|
|
177
|
+
appKey={currentAppKey}
|
|
178
|
+
selectedAppKey={selectedAppKey}
|
|
179
|
+
menus={menus}
|
|
180
|
+
appList={appList}
|
|
181
|
+
apps={apps}
|
|
182
|
+
extraActions={extraHeaderActions}
|
|
183
|
+
onLogoClick={onLogoClick}
|
|
184
|
+
onAppChange={onAppChange}
|
|
185
|
+
onThemeChange={
|
|
186
|
+
theme => {
|
|
187
|
+
setUserInfo({
|
|
188
|
+
...userInfo,
|
|
189
|
+
theme
|
|
190
|
+
});
|
|
191
|
+
onThemeChange && onThemeChange(theme);
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
onLanguageChange={
|
|
195
|
+
lang => {
|
|
196
|
+
setUserInfo({
|
|
197
|
+
...userInfo,
|
|
198
|
+
lang
|
|
199
|
+
});
|
|
200
|
+
onLanguageChange && onLanguageChange(lang);
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
onApplicationChange={
|
|
204
|
+
appKey => {
|
|
205
|
+
setCurrentAppKey(appKey);
|
|
206
|
+
onApplicationChange(appKey);
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
onLogout={onLogout}
|
|
210
|
+
>
|
|
211
|
+
{headerNavMenus}
|
|
212
|
+
</Header>
|
|
213
|
+
<Layout>
|
|
214
|
+
{
|
|
215
|
+
!isUndefined(sideMenu) ? sideMenu : (
|
|
216
|
+
<Sider
|
|
217
|
+
breakpoint="md"
|
|
218
|
+
className="tnt-layout-sider"
|
|
219
|
+
width={220}
|
|
220
|
+
trigger={null}
|
|
221
|
+
>
|
|
222
|
+
<FinalSideMenu
|
|
223
|
+
language={language}
|
|
224
|
+
selectedKey={selectedMenuKey}
|
|
225
|
+
menus={sideMenus}
|
|
226
|
+
formatMenuPath={formatMenuPath}
|
|
227
|
+
changeRouter={changeRouter}
|
|
228
|
+
onBeforeChange={onBeforeMenuChange}
|
|
229
|
+
onChange={onMenuChange}
|
|
230
|
+
onSelect={onMenuSelect}
|
|
231
|
+
/>
|
|
232
|
+
</Sider>
|
|
233
|
+
)
|
|
234
|
+
}
|
|
235
|
+
<Content className="tnt-layout-content">
|
|
236
|
+
{props.children}
|
|
237
|
+
</Content>
|
|
238
|
+
</Layout>
|
|
239
|
+
</TNTPaasLayout>
|
|
240
|
+
);
|
|
241
|
+
}
|
|
242
|
+
);
|
package/lib/Layout/storage.js
CHANGED
|
@@ -1,90 +1,32 @@
|
|
|
1
|
-
|
|
1
|
+
import { safeParseJSON } from './utils';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
11
|
-
|
|
12
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
13
|
-
|
|
14
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
15
|
-
|
|
16
|
-
var getSideMenuStore = function getSideMenuStore() {
|
|
17
|
-
return (0, _utils.safeParseJSON)(localStorage.getItem('sideMenu'), {});
|
|
3
|
+
export const getSideMenuStore = () => safeParseJSON(localStorage.getItem('sideMenu'), {});
|
|
4
|
+
export const setSideMenuStore = (params = {}) => {
|
|
5
|
+
localStorage.setItem('sideMenu', JSON.stringify({
|
|
6
|
+
...getSideMenuStore(),
|
|
7
|
+
...params
|
|
8
|
+
}));
|
|
18
9
|
};
|
|
19
10
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
var setSideMenuStore = function setSideMenuStore() {
|
|
23
|
-
var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
24
|
-
localStorage.setItem('sideMenu', JSON.stringify(_objectSpread({}, getSideMenuStore(), {}, params)));
|
|
11
|
+
export const setCurrentAppStore = (currentApp = {}) => {
|
|
12
|
+
localStorage.setItem('currentApp', JSON.stringify(currentApp));
|
|
25
13
|
};
|
|
14
|
+
export const getCurrentAppStore = () => safeParseJSON(localStorage.getItem('currentApp'), {});
|
|
26
15
|
|
|
27
|
-
exports.setSideMenuStore = setSideMenuStore;
|
|
28
16
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
localStorage.setItem('currentApp', JSON.stringify(currentApp));
|
|
17
|
+
export const setCurrentOrgStore = (currentOrg = {}) => {
|
|
18
|
+
localStorage.setItem('currentOrg', JSON.stringify(currentOrg));
|
|
32
19
|
};
|
|
20
|
+
export const getCurrentOrgStore = () => safeParseJSON(localStorage.getItem('currentOrg'), {});
|
|
33
21
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
var getCurrentAppStore = function getCurrentAppStore() {
|
|
37
|
-
return (0, _utils.safeParseJSON)(localStorage.getItem('currentApp'), {});
|
|
22
|
+
export const setCurrentOrgTreeStore = (currentOrgTree = []) => {
|
|
23
|
+
localStorage.setItem('currentOrgTree', JSON.stringify(currentOrgTree));
|
|
38
24
|
};
|
|
25
|
+
export const getCurrentOrgTreeStore = () => safeParseJSON(localStorage.getItem('currentOrgTree'), []);
|
|
39
26
|
|
|
40
|
-
exports.getCurrentAppStore = getCurrentAppStore;
|
|
41
|
-
|
|
42
|
-
var setCurrentOrgStore = function setCurrentOrgStore() {
|
|
43
|
-
var currentOrg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
44
|
-
localStorage.setItem('currentOrg', JSON.stringify(currentOrg));
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
exports.setCurrentOrgStore = setCurrentOrgStore;
|
|
48
|
-
|
|
49
|
-
var getCurrentOrgStore = function getCurrentOrgStore() {
|
|
50
|
-
return (0, _utils.safeParseJSON)(localStorage.getItem('currentOrg'), {});
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
exports.getCurrentOrgStore = getCurrentOrgStore;
|
|
54
|
-
|
|
55
|
-
var setCurrentOrgTreeStore = function setCurrentOrgTreeStore() {
|
|
56
|
-
var currentOrgTree = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
57
|
-
localStorage.setItem('currentOrgTree', JSON.stringify(currentOrgTree));
|
|
58
|
-
};
|
|
59
27
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
var getCurrentOrgTreeStore = function getCurrentOrgTreeStore() {
|
|
63
|
-
return (0, _utils.safeParseJSON)(localStorage.getItem('currentOrgTree'), []);
|
|
64
|
-
};
|
|
65
|
-
|
|
66
|
-
exports.getCurrentOrgTreeStore = getCurrentOrgTreeStore;
|
|
67
|
-
|
|
68
|
-
var setLanguageStore = function setLanguageStore(lang) {
|
|
69
|
-
return localStorage.setItem('lang', lang);
|
|
70
|
-
};
|
|
71
|
-
|
|
72
|
-
exports.setLanguageStore = setLanguageStore;
|
|
73
|
-
|
|
74
|
-
var getLanguageStore = function getLanguageStore() {
|
|
75
|
-
return localStorage.getItem('lang');
|
|
76
|
-
};
|
|
77
|
-
|
|
78
|
-
exports.getLanguageStore = getLanguageStore;
|
|
79
|
-
|
|
80
|
-
var setThemeStore = function setThemeStore(theme) {
|
|
81
|
-
return localStorage.setItem('theme', theme);
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
exports.setThemeStore = setThemeStore;
|
|
85
|
-
|
|
86
|
-
var getThemeStore = function getThemeStore() {
|
|
87
|
-
return localStorage.getItem('theme');
|
|
88
|
-
};
|
|
28
|
+
export const setLanguageStore = lang => localStorage.setItem('lang', lang);
|
|
29
|
+
export const getLanguageStore = () => localStorage.getItem('lang');
|
|
89
30
|
|
|
90
|
-
|
|
31
|
+
export const setThemeStore = theme => localStorage.setItem('theme', theme);
|
|
32
|
+
export const getThemeStore = () => localStorage.getItem('theme');
|