omni-layout 0.0.5-beta.4 → 0.0.5-beta.6

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.
Files changed (22) hide show
  1. package/README.md +70 -0
  2. package/es/compontent/NoticeIcon/NoticeList.less +20 -4
  3. package/es/compontent/footer/index.less +1 -1
  4. package/es/compontent/header/index.js +3 -2
  5. package/es/compontent/headerdropdown/index.less +1 -1
  6. package/es/compontent/sidemenu/index.less +3 -3
  7. package/es/index.js +35 -6
  8. package/es/index.less +4 -3
  9. package/es/styles/app.less +8 -20
  10. package/es/styles/header.less +16 -14
  11. package/es/styles/variables.less +11 -0
  12. package/lib/compontent/NoticeIcon/NoticeList.less +20 -4
  13. package/lib/compontent/footer/index.less +1 -1
  14. package/lib/compontent/header/index.js +3 -2
  15. package/lib/compontent/headerdropdown/index.less +1 -1
  16. package/lib/compontent/sidemenu/index.less +3 -3
  17. package/lib/index.js +35 -6
  18. package/lib/index.less +4 -3
  19. package/lib/styles/app.less +8 -20
  20. package/lib/styles/header.less +16 -14
  21. package/lib/styles/variables.less +11 -0
  22. package/package.json +10 -1
package/README.md CHANGED
@@ -2,12 +2,82 @@
2
2
 
3
3
  a common layout for ant design
4
4
 
5
+ ## Requirements
6
+
7
+ - Node.js >= 20
8
+ - npm >= 10
9
+
5
10
  ## Usage
6
11
 
7
12
  ```sh
8
13
  umi block https://github.com/linthan/tree/master/omni-layout
9
14
  ```
10
15
 
16
+ ## Development
17
+
18
+ ```bash
19
+ # install dependencies for root and demo
20
+ npm install --legacy-peer-deps
21
+ npm --prefix demo install --legacy-peer-deps
22
+
23
+ # run demo
24
+ npm --prefix demo run start
25
+
26
+ # build
27
+ npm run build
28
+ npm --prefix demo run build
29
+ ```
30
+
31
+ ## Lint
32
+
33
+ ```bash
34
+ # run all lint checks
35
+ npm run lint
36
+
37
+ # run by category
38
+ npm run lint:ts
39
+ npm run lint:style
40
+ npm run lint:format
41
+ ```
42
+
43
+ Current lint baseline includes:
44
+
45
+ - Type checking for root package and demo app
46
+ - Less property validation
47
+ - Prettier formatting checks for key config and docs files
48
+
49
+ ## CI Gate
50
+
51
+ CI workflow enforces lint before build:
52
+
53
+ - `lint` job must pass first
54
+ - `build` job runs only after `lint` succeeds
55
+
56
+ Reference: `.github/workflows/ci.yml`
57
+
58
+ ## Docs
59
+
60
+ - Interactive demo docs index: `/`
61
+ - Dependency governance: `/dependency-governance`
62
+ - Lint governance: `/lint-governance`
63
+
64
+ ## Troubleshooting
65
+
66
+ 1. Install conflict due to legacy peer dependencies:
67
+
68
+ ```bash
69
+ npm install --legacy-peer-deps
70
+ npm --prefix demo install --legacy-peer-deps
71
+ ```
72
+
73
+ 2. Running TypeScript via demo prefix cannot find tsconfig path:
74
+
75
+ - Use absolute `-p "$PWD/..."` in scripts.
76
+
77
+ 3. npm audit unavailable on mirror registry:
78
+
79
+ - Switch to official npm registry in CI for security audit, or use a third-party scanner.
80
+
11
81
  ## LICENSE
12
82
 
13
83
  MIT
package/es/compontent/NoticeIcon/NoticeList.less CHANGED
@@ -5,9 +5,11 @@
5
5
  .list {
6
6
  max-height: 400px;
7
7
  overflow: auto;
8
+
8
9
  &::-webkit-scrollbar {
9
10
  display: none;
10
11
  }
12
+
11
13
  .item {
12
14
  padding-right: 24px;
13
15
  padding-left: 24px;
@@ -23,47 +25,56 @@
23
25
  margin-top: 4px;
24
26
  background: #fff;
25
27
  }
28
+
26
29
  .iconElement {
27
30
  font-size: 32px;
28
31
  }
29
32
 
30
33
  &.read {
31
- opacity: 0.4;
34
+ opacity: 40%;
32
35
  }
36
+
33
37
  &:last-child {
34
38
  border-bottom: 0;
35
39
  }
40
+
36
41
  &:hover {
37
42
  background: @primary-1;
38
43
  }
44
+
39
45
  .title {
40
46
  margin-bottom: 8px;
41
- font-weight: normal;
47
+ font-weight: 400;
42
48
  }
49
+
43
50
  .description {
44
51
  font-size: 12px;
45
52
  line-height: @line-height-base;
46
53
  }
54
+
47
55
  .datetime {
48
56
  margin-top: 4px;
49
57
  font-size: 12px;
50
58
  line-height: @line-height-base;
51
59
  }
60
+
52
61
  .extra {
53
62
  float: right;
54
63
  margin-top: -1.5px;
55
64
  margin-right: 0;
56
65
  color: @text-color-secondary;
57
- font-weight: normal;
66
+ font-weight: 400;
58
67
  }
59
68
  }
69
+
60
70
  .loadMore {
61
71
  padding: 8px 0;
62
72
  color: @primary-6;
63
73
  text-align: center;
64
74
  cursor: pointer;
75
+
65
76
  &.loadedAll {
66
- color: rgba(0, 0, 0, 0.25);
77
+ color: rgb(0 0 0 / 25%);
67
78
  cursor: unset;
68
79
  }
69
80
  }
@@ -73,6 +84,7 @@
73
84
  padding: 73px 0 88px;
74
85
  color: @text-color-secondary;
75
86
  text-align: center;
87
+
76
88
  img {
77
89
  display: inline-block;
78
90
  height: 76px;
@@ -88,18 +100,22 @@
88
100
  border-top: 1px solid @border-color-split;
89
101
  border-radius: 0 0 @border-radius-base @border-radius-base;
90
102
  transition: all 0.3s;
103
+
91
104
  div {
92
105
  display: inline-block;
93
106
  width: 50%;
94
107
  cursor: pointer;
95
108
  transition: all 0.3s;
96
109
  user-select: none;
110
+
97
111
  &:hover {
98
112
  color: @heading-color;
99
113
  }
114
+
100
115
  &:only-child {
101
116
  width: 100%;
102
117
  }
118
+
103
119
  &:not(:only-child):last-child {
104
120
  border-left: 1px solid @border-color-split;
105
121
  }
package/es/compontent/footer/index.less CHANGED
@@ -3,7 +3,7 @@
3
3
  @global-footer-prefix-cls: ~'@{omni-prefix}-global-footer';
4
4
 
5
5
  .@{global-footer-prefix-cls} {
6
- margin: 24px 0 24px 0;
6
+ margin: 24px 0;
7
7
  padding: 0 16px;
8
8
  text-align: center;
9
9
 
package/es/compontent/header/index.js CHANGED
@@ -59,7 +59,8 @@ var Header = function Header(props) {
59
59
  headerLinks = props.headerLinks,
60
60
  openWithOtherTab = props.openWithOtherTab,
61
61
  noticeSwitch = props.noticeSwitch,
62
- app = props.app;
62
+ app = props.app,
63
+ userDropdownSwitch = props.userDropdownSwitch;
63
64
  return /*#__PURE__*/React.createElement("div", {
64
65
  className: "omni-header-nav"
65
66
  }, /*#__PURE__*/React.createElement("div", {
@@ -102,7 +103,7 @@ var Header = function Header(props) {
102
103
  })
103
104
  }, /*#__PURE__*/React.createElement(NoticeIcon, {
104
105
  count: noticeCount
105
- })), /*#__PURE__*/React.createElement(HeaderDropdown, {
106
+ })), userDropdownSwitch && /*#__PURE__*/React.createElement(HeaderDropdown, {
106
107
  menu: dropdownMenu
107
108
  }, /*#__PURE__*/React.createElement("span", {
108
109
  className: "item-wrapper"
package/es/compontent/headerdropdown/index.less CHANGED
@@ -6,7 +6,7 @@
6
6
  clear: both;
7
7
  margin: 0;
8
8
  padding: 5px 12px;
9
- color: rgba(0, 0, 0, 0.65);
9
+ color: rgb(0 0 0 / 65%);
10
10
  font-weight: 400;
11
11
  font-size: 14px;
12
12
  line-height: 22px;
package/es/compontent/sidemenu/index.less CHANGED
@@ -32,7 +32,7 @@
32
32
  &-sider {
33
33
  position: relative;
34
34
  // min-height: 100vh;
35
- box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
35
+ box-shadow: 2px 0 6px rgb(0 21 41 / 35%);
36
36
  z-index: 0;
37
37
  //添加样式
38
38
  transition: all 0.2s ease;
@@ -61,12 +61,12 @@
61
61
  & > .ant-menu-submenu > .ant-menu-submenu-title .sider-menu-item-img + span {
62
62
  display: inline-block;
63
63
  max-width: 0;
64
- opacity: 0;
64
+ opacity: 0%;
65
65
  }
66
66
  }
67
67
  .ant-menu-item .sider-menu-item-img + span,
68
68
  .ant-menu-submenu-title .sider-menu-item-img + span {
69
- opacity: 1;
69
+ opacity: 100%;
70
70
  transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out;
71
71
  }
72
72
  .ant-drawer-body {
package/es/index.js CHANGED
@@ -72,6 +72,7 @@ function OmniLayout(props) {
72
72
  },
73
73
  noticeSwitch: false,
74
74
  siderSearchSwitch: false,
75
+ userDropdownSwitch: true,
75
76
  tabList: [{
76
77
  key: '/base/manage/world'
77
78
  }]
@@ -110,12 +111,11 @@ function OmniLayout(props) {
110
111
  proxyDomain: mergedProps.proxyDomain
111
112
  });
112
113
 
113
- //获取菜单
114
- fetchWrapper(menuModel, menuList, {
115
- app: app
116
- }, function (data) {
114
+ //获取菜单：两种方式互斥——一旦传入 menus（哪怕为空/异步加载中），
115
+ //即进入直传模式，绝不再请求 menuList 接口；未传 menus 才走接口。
116
+ if (mergedProps.menus !== undefined) {
117
117
  var routesMap = {};
118
- var innerRoutes = getRoutes(data.list || [], routesMap);
118
+ var innerRoutes = getRoutes(mergedProps.menus || [], routesMap);
119
119
  store.dispatch({
120
120
  type: 'UPDATE_VALUE',
121
121
  value: {
@@ -123,7 +123,21 @@ function OmniLayout(props) {
123
123
  routesMap: routesMap
124
124
  }
125
125
  });
126
- });
126
+ } else {
127
+ fetchWrapper(menuModel, menuList, {
128
+ app: app
129
+ }, function (data) {
130
+ var routesMap = {};
131
+ var innerRoutes = getRoutes(data.list || [], routesMap);
132
+ store.dispatch({
133
+ type: 'UPDATE_VALUE',
134
+ value: {
135
+ routes: innerRoutes,
136
+ routesMap: routesMap
137
+ }
138
+ });
139
+ });
140
+ }
127
141
  //获取用户信息
128
142
  fetchWrapper(menuModel, userInfo, {}, function (data) {
129
143
  if (data && data.username) {
@@ -194,6 +208,21 @@ function OmniLayout(props) {
194
208
  }
195
209
  };
196
210
  }, []);
211
+
212
+ //直传模式下，menus 变化时（如异步加载/按权限过滤后）同步刷新侧边菜单
213
+ useEffect(function () {
214
+ if (mergedProps.menus !== undefined) {
215
+ var routesMap = {};
216
+ var innerRoutes = getRoutes(mergedProps.menus || [], routesMap);
217
+ store.dispatch({
218
+ type: 'UPDATE_VALUE',
219
+ value: {
220
+ routes: innerRoutes,
221
+ routesMap: routesMap
222
+ }
223
+ });
224
+ }
225
+ }, [mergedProps.menus]);
197
226
  var menuDataRender = mergedProps.menuDataRender,
198
227
  children = mergedProps.children,
199
228
  noPageHeader = mergedProps.noPageHeader,
package/es/index.less CHANGED
@@ -1,6 +1,7 @@
1
- //导入antd默认样式
2
-
3
- @import './styles/antd/style/index.less';
1
+ //不在此处引入完整 antd 基础样式：
2
+ //该库作为内嵌布局使用时，宿主应用（antd v5）已自行提供组件样式，
3
+ //再次引入旧版 antd 样式会与宿主 antd v5 冲突。
4
+ //如需独立运行（无 antd 的环境），请单独引入 'omni-layout/es/styles/antd/style/index.less'。
4
5
 
5
6
 
6
7
  //variables 定义自己的变量
package/es/styles/app.less CHANGED
@@ -1,8 +1,8 @@
1
1
  @keyframes header-fadeInRightBig {
2
- from {
2
+ 0% {
3
3
  transform: translate3d(300px, 0, 0);
4
4
  }
5
- to {
5
+ 100% {
6
6
  transform: none;
7
7
  }
8
8
  }
@@ -10,8 +10,7 @@
10
10
  padding-bottom: 10px;
11
11
  display: flex;
12
12
  align-items: center;
13
- overflow-y: hidden;
14
- overflow-x: auto;
13
+ overflow: auto hidden;
15
14
 
16
15
  .omni-tmp-link-list-item {
17
16
  display: inline-block;
@@ -28,10 +27,7 @@
28
27
  .omni-layout-app {
29
28
  position: absolute;
30
29
  overflow: hidden;
31
- left: 0;
32
- top: 50px;
33
- right: 0;
34
- bottom: 0;
30
+ inset: 50px 0 0;
35
31
  .aside {
36
32
  position: relative;
37
33
  width: @side-menu-expend;
@@ -109,13 +105,10 @@
109
105
  .menu-fold {
110
106
  width: @side-menu-collapsed;
111
107
  height: 56px;
112
- bottom: 0;
113
- left: 0;
114
- top: auto;
108
+ inset: auto 0 0;
115
109
  border: 0;
116
110
  z-index: 1000;
117
111
  background-color: transparent;
118
- right: 0;
119
112
  cursor: pointer;
120
113
  position: absolute;
121
114
  font-size: 18px;
@@ -127,13 +120,9 @@
127
120
  }
128
121
  .main {
129
122
  position: absolute;
130
- top: 0;
131
- right: 0;
132
- bottom: 0;
133
- left: @side-menu-expend;
123
+ inset: 0 0 0 @side-menu-expend;
134
124
  background-color: #f2f2f2 !important;
135
- overflow-y: auto;
136
- overflow-x: hidden;
125
+ overflow: hidden auto;
137
126
  transform: none !important;
138
127
  transition: left 0.2s ease;
139
128
  }
@@ -186,7 +175,7 @@
186
175
  animation-fill-mode: both;
187
176
  z-index: 100;
188
177
  height: 100%;
189
- box-shadow: -3px -3px 8px rgba(0, 0, 0, 0.2);
178
+ box-shadow: -3px -3px 8px rgb(0 0 0 / 20%);
190
179
  .tool-inner {
191
180
  width: @omni-notice-box-width;
192
181
  height: 100%;
@@ -208,7 +197,6 @@
208
197
  padding: 20px 0 0 20px;
209
198
  margin: 50px 0;
210
199
  overflow: hidden;
211
- overflow-y: auto;
212
200
  box-sizing: border-box;
213
201
  overflow-y: scroll;
214
202
  height: 100%;
package/es/styles/header.less CHANGED
@@ -1,11 +1,11 @@
1
1
  @keyframes header-slideInDown {
2
2
  0% {
3
- opacity: 0;
3
+ opacity: 0%;
4
4
  margin-bottom: 0;
5
5
  transform: translateY(-10px);
6
6
  }
7
- to {
8
- opacity: 1;
7
+ 100% {
8
+ opacity: 100%;
9
9
  margin-bottom: 10px;
10
10
  transform: translateY(0);
11
11
  }
@@ -32,9 +32,13 @@
32
32
  .right {
33
33
  height: 100%;
34
34
  margin-right: 30px;
35
+ display: flex;
36
+ align-items: center;
35
37
  }
36
38
  .right-slot {
37
- display: inline-block;
39
+ display: flex;
40
+ align-items: center;
41
+ height: 100%;
38
42
  }
39
43
  .header-dropdown-avatar {
40
44
  margin-right: 5px;
@@ -89,9 +93,9 @@
89
93
  .omni-topnav-all-menu {
90
94
  display: block;
91
95
  min-height: 590px;
92
- padding: 20px 60px 10px 60px;
96
+ padding: 20px 60px 10px;
93
97
  overflow-y: auto;
94
- border-right: 4px solid @background-color;
98
+ border-right: 4px solid var(--omni-background-color, #191919);
95
99
  }
96
100
  .omni-topnav-all-tool {
97
101
  transition: 0.2s color ease;
@@ -100,11 +104,11 @@
100
104
  }
101
105
  .omni-topnav-all-menu {
102
106
  display: none;
103
- background-color: @background-color;
107
+ background-color: var(--omni-background-color, #191919);
104
108
  position: absolute;
105
109
  left: 63px;
106
110
  top: 49px;
107
- bottom: 0px;
111
+ bottom: 0;
108
112
  width: auto;
109
113
  overflow: hidden;
110
114
  cursor: default;
@@ -161,7 +165,7 @@
161
165
  .omni-masonry {
162
166
  width: 800px;
163
167
  min-height: 600px;
164
- margin: 20px 10px 50px 0px;
168
+ margin: 20px 10px 50px 0;
165
169
  -webkit-column-count: 3;
166
170
  -webkit-column-gap: 10px;
167
171
 
@@ -169,9 +173,8 @@
169
173
  -moz-column-gap: 10px;
170
174
 
171
175
  column-count: 3;
172
- column-gap: 15px;
173
176
  column-fill: balance;
174
- row-gap: 200px;
177
+ gap: 200px 15px;
175
178
  font-size: 14px;
176
179
  .omni-masonry-block {
177
180
  h3 {
@@ -204,12 +207,11 @@
204
207
  margin-bottom: 20px;
205
208
  -webkit-column-break-inside: avoid;
206
209
  -moz-column-break-inside: avoid;
207
- column-break-inside: avoid;
208
210
  break-inside: avoid;
209
211
  }
210
212
  }
211
213
  .history-used {
212
- margin: 20px 0px 50px 0px;
214
+ margin: 20px 0 50px;
213
215
  width: 200px;
214
216
  padding-left: 10px;
215
217
  background: @side-menu-background;
@@ -218,7 +220,7 @@
218
220
  color: @omni-link-color;
219
221
  }
220
222
  ul {
221
- padding: 0px;
223
+ padding: 0;
222
224
  li {
223
225
  white-space: nowrap;
224
226
  overflow: hidden;
package/es/styles/variables.less CHANGED
@@ -9,3 +9,14 @@
9
9
  @omni-link-size: 12px;
10
10
  @omni-header-nav-tool-size: 14px;
11
11
  @omni-notice-box-width: 360px;
12
+
13
+ // CSS Variables for better isolation
14
+ :root {
15
+ --omni-background-color: #191919;
16
+ --omni-hover-link-color: #006eff;
17
+ --omni-link-color: #bbb;
18
+ --omni-link-size: 12px;
19
+ --omni-header-nav-tool-size: 14px;
20
+ --omni-header-nav-height: 50px;
21
+ --omni-side-menu-background: #333;
22
+ }
package/lib/compontent/NoticeIcon/NoticeList.less CHANGED
@@ -5,9 +5,11 @@
5
5
  .list {
6
6
  max-height: 400px;
7
7
  overflow: auto;
8
+
8
9
  &::-webkit-scrollbar {
9
10
  display: none;
10
11
  }
12
+
11
13
  .item {
12
14
  padding-right: 24px;
13
15
  padding-left: 24px;
@@ -23,47 +25,56 @@
23
25
  margin-top: 4px;
24
26
  background: #fff;
25
27
  }
28
+
26
29
  .iconElement {
27
30
  font-size: 32px;
28
31
  }
29
32
 
30
33
  &.read {
31
- opacity: 0.4;
34
+ opacity: 40%;
32
35
  }
36
+
33
37
  &:last-child {
34
38
  border-bottom: 0;
35
39
  }
40
+
36
41
  &:hover {
37
42
  background: @primary-1;
38
43
  }
44
+
39
45
  .title {
40
46
  margin-bottom: 8px;
41
- font-weight: normal;
47
+ font-weight: 400;
42
48
  }
49
+
43
50
  .description {
44
51
  font-size: 12px;
45
52
  line-height: @line-height-base;
46
53
  }
54
+
47
55
  .datetime {
48
56
  margin-top: 4px;
49
57
  font-size: 12px;
50
58
  line-height: @line-height-base;
51
59
  }
60
+
52
61
  .extra {
53
62
  float: right;
54
63
  margin-top: -1.5px;
55
64
  margin-right: 0;
56
65
  color: @text-color-secondary;
57
- font-weight: normal;
66
+ font-weight: 400;
58
67
  }
59
68
  }
69
+
60
70
  .loadMore {
61
71
  padding: 8px 0;
62
72
  color: @primary-6;
63
73
  text-align: center;
64
74
  cursor: pointer;
75
+
65
76
  &.loadedAll {
66
- color: rgba(0, 0, 0, 0.25);
77
+ color: rgb(0 0 0 / 25%);
67
78
  cursor: unset;
68
79
  }
69
80
  }
@@ -73,6 +84,7 @@
73
84
  padding: 73px 0 88px;
74
85
  color: @text-color-secondary;
75
86
  text-align: center;
87
+
76
88
  img {
77
89
  display: inline-block;
78
90
  height: 76px;
@@ -88,18 +100,22 @@
88
100
  border-top: 1px solid @border-color-split;
89
101
  border-radius: 0 0 @border-radius-base @border-radius-base;
90
102
  transition: all 0.3s;
103
+
91
104
  div {
92
105
  display: inline-block;
93
106
  width: 50%;
94
107
  cursor: pointer;
95
108
  transition: all 0.3s;
96
109
  user-select: none;
110
+
97
111
  &:hover {
98
112
  color: @heading-color;
99
113
  }
114
+
100
115
  &:only-child {
101
116
  width: 100%;
102
117
  }
118
+
103
119
  &:not(:only-child):last-child {
104
120
  border-left: 1px solid @border-color-split;
105
121
  }
package/lib/compontent/footer/index.less CHANGED
@@ -3,7 +3,7 @@
3
3
  @global-footer-prefix-cls: ~'@{omni-prefix}-global-footer';
4
4
 
5
5
  .@{global-footer-prefix-cls} {
6
- margin: 24px 0 24px 0;
6
+ margin: 24px 0;
7
7
  padding: 0 16px;
8
8
  text-align: center;
9
9
 
package/lib/compontent/header/index.js CHANGED
@@ -65,7 +65,8 @@ var Header = function Header(props) {
65
65
  headerLinks = props.headerLinks,
66
66
  openWithOtherTab = props.openWithOtherTab,
67
67
  noticeSwitch = props.noticeSwitch,
68
- app = props.app;
68
+ app = props.app,
69
+ userDropdownSwitch = props.userDropdownSwitch;
69
70
  return /*#__PURE__*/_react.default.createElement("div", {
70
71
  className: "omni-header-nav"
71
72
  }, /*#__PURE__*/_react.default.createElement("div", {
@@ -108,7 +109,7 @@ var Header = function Header(props) {
108
109
  })
109
110
  }, /*#__PURE__*/_react.default.createElement(_NoticeIcon.default, {
110
111
  count: noticeCount
111
- })), /*#__PURE__*/_react.default.createElement(_headerdropdown.default, {
112
+ })), userDropdownSwitch && /*#__PURE__*/_react.default.createElement(_headerdropdown.default, {
112
113
  menu: dropdownMenu
113
114
  }, /*#__PURE__*/_react.default.createElement("span", {
114
115
  className: "item-wrapper"
package/lib/compontent/headerdropdown/index.less CHANGED
@@ -6,7 +6,7 @@
6
6
  clear: both;
7
7
  margin: 0;
8
8
  padding: 5px 12px;
9
- color: rgba(0, 0, 0, 0.65);
9
+ color: rgb(0 0 0 / 65%);
10
10
  font-weight: 400;
11
11
  font-size: 14px;
12
12
  line-height: 22px;
package/lib/compontent/sidemenu/index.less CHANGED
@@ -32,7 +32,7 @@
32
32
  &-sider {
33
33
  position: relative;
34
34
  // min-height: 100vh;
35
- box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
35
+ box-shadow: 2px 0 6px rgb(0 21 41 / 35%);
36
36
  z-index: 0;
37
37
  //添加样式
38
38
  transition: all 0.2s ease;
@@ -61,12 +61,12 @@
61
61
  & > .ant-menu-submenu > .ant-menu-submenu-title .sider-menu-item-img + span {
62
62
  display: inline-block;
63
63
  max-width: 0;
64
- opacity: 0;
64
+ opacity: 0%;
65
65
  }
66
66
  }
67
67
  .ant-menu-item .sider-menu-item-img + span,
68
68
  .ant-menu-submenu-title .sider-menu-item-img + span {
69
- opacity: 1;
69
+ opacity: 100%;
70
70
  transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out;
71
71
  }
72
72
  .ant-drawer-body {
package/lib/index.js CHANGED
@@ -84,6 +84,7 @@ function OmniLayout(props) {
84
84
  },
85
85
  noticeSwitch: false,
86
86
  siderSearchSwitch: false,
87
+ userDropdownSwitch: true,
87
88
  tabList: [{
88
89
  key: '/base/manage/world'
89
90
  }]
@@ -122,12 +123,11 @@ function OmniLayout(props) {
122
123
  proxyDomain: mergedProps.proxyDomain
123
124
  });
124
125
 
125
- //获取菜单
126
- fetchWrapper(menuModel, menuList, {
127
- app: app
128
- }, function (data) {
126
+ //获取菜单：两种方式互斥——一旦传入 menus（哪怕为空/异步加载中），
127
+ //即进入直传模式，绝不再请求 menuList 接口；未传 menus 才走接口。
128
+ if (mergedProps.menus !== undefined) {
129
129
  var routesMap = {};
130
- var innerRoutes = (0, _data.getRoutes)(data.list || [], routesMap);
130
+ var innerRoutes = (0, _data.getRoutes)(mergedProps.menus || [], routesMap);
131
131
  store.dispatch({
132
132
  type: 'UPDATE_VALUE',
133
133
  value: {
@@ -135,7 +135,21 @@ function OmniLayout(props) {
135
135
  routesMap: routesMap
136
136
  }
137
137
  });
138
- });
138
+ } else {
139
+ fetchWrapper(menuModel, menuList, {
140
+ app: app
141
+ }, function (data) {
142
+ var routesMap = {};
143
+ var innerRoutes = (0, _data.getRoutes)(data.list || [], routesMap);
144
+ store.dispatch({
145
+ type: 'UPDATE_VALUE',
146
+ value: {
147
+ routes: innerRoutes,
148
+ routesMap: routesMap
149
+ }
150
+ });
151
+ });
152
+ }
139
153
  //获取用户信息
140
154
  fetchWrapper(menuModel, userInfo, {}, function (data) {
141
155
  if (data && data.username) {
@@ -206,6 +220,21 @@ function OmniLayout(props) {
206
220
  }
207
221
  };
208
222
  }, []);
223
+
224
+ //直传模式下，menus 变化时（如异步加载/按权限过滤后）同步刷新侧边菜单
225
+ (0, _react.useEffect)(function () {
226
+ if (mergedProps.menus !== undefined) {
227
+ var routesMap = {};
228
+ var innerRoutes = (0, _data.getRoutes)(mergedProps.menus || [], routesMap);
229
+ store.dispatch({
230
+ type: 'UPDATE_VALUE',
231
+ value: {
232
+ routes: innerRoutes,
233
+ routesMap: routesMap
234
+ }
235
+ });
236
+ }
237
+ }, [mergedProps.menus]);
209
238
  var menuDataRender = mergedProps.menuDataRender,
210
239
  children = mergedProps.children,
211
240
  noPageHeader = mergedProps.noPageHeader,
package/lib/index.less CHANGED
@@ -1,6 +1,7 @@
1
- //导入antd默认样式
2
-
3
- @import './styles/antd/style/index.less';
1
+ //不在此处引入完整 antd 基础样式：
2
+ //该库作为内嵌布局使用时，宿主应用（antd v5）已自行提供组件样式，
3
+ //再次引入旧版 antd 样式会与宿主 antd v5 冲突。
4
+ //如需独立运行（无 antd 的环境），请单独引入 'omni-layout/es/styles/antd/style/index.less'。
4
5
 
5
6
 
6
7
  //variables 定义自己的变量
package/lib/styles/app.less CHANGED
@@ -1,8 +1,8 @@
1
1
  @keyframes header-fadeInRightBig {
2
- from {
2
+ 0% {
3
3
  transform: translate3d(300px, 0, 0);
4
4
  }
5
- to {
5
+ 100% {
6
6
  transform: none;
7
7
  }
8
8
  }
@@ -10,8 +10,7 @@
10
10
  padding-bottom: 10px;
11
11
  display: flex;
12
12
  align-items: center;
13
- overflow-y: hidden;
14
- overflow-x: auto;
13
+ overflow: auto hidden;
15
14
 
16
15
  .omni-tmp-link-list-item {
17
16
  display: inline-block;
@@ -28,10 +27,7 @@
28
27
  .omni-layout-app {
29
28
  position: absolute;
30
29
  overflow: hidden;
31
- left: 0;
32
- top: 50px;
33
- right: 0;
34
- bottom: 0;
30
+ inset: 50px 0 0;
35
31
  .aside {
36
32
  position: relative;
37
33
  width: @side-menu-expend;
@@ -109,13 +105,10 @@
109
105
  .menu-fold {
110
106
  width: @side-menu-collapsed;
111
107
  height: 56px;
112
- bottom: 0;
113
- left: 0;
114
- top: auto;
108
+ inset: auto 0 0;
115
109
  border: 0;
116
110
  z-index: 1000;
117
111
  background-color: transparent;
118
- right: 0;
119
112
  cursor: pointer;
120
113
  position: absolute;
121
114
  font-size: 18px;
@@ -127,13 +120,9 @@
127
120
  }
128
121
  .main {
129
122
  position: absolute;
130
- top: 0;
131
- right: 0;
132
- bottom: 0;
133
- left: @side-menu-expend;
123
+ inset: 0 0 0 @side-menu-expend;
134
124
  background-color: #f2f2f2 !important;
135
- overflow-y: auto;
136
- overflow-x: hidden;
125
+ overflow: hidden auto;
137
126
  transform: none !important;
138
127
  transition: left 0.2s ease;
139
128
  }
@@ -186,7 +175,7 @@
186
175
  animation-fill-mode: both;
187
176
  z-index: 100;
188
177
  height: 100%;
189
- box-shadow: -3px -3px 8px rgba(0, 0, 0, 0.2);
178
+ box-shadow: -3px -3px 8px rgb(0 0 0 / 20%);
190
179
  .tool-inner {
191
180
  width: @omni-notice-box-width;
192
181
  height: 100%;
@@ -208,7 +197,6 @@
208
197
  padding: 20px 0 0 20px;
209
198
  margin: 50px 0;
210
199
  overflow: hidden;
211
- overflow-y: auto;
212
200
  box-sizing: border-box;
213
201
  overflow-y: scroll;
214
202
  height: 100%;
package/lib/styles/header.less CHANGED
@@ -1,11 +1,11 @@
1
1
  @keyframes header-slideInDown {
2
2
  0% {
3
- opacity: 0;
3
+ opacity: 0%;
4
4
  margin-bottom: 0;
5
5
  transform: translateY(-10px);
6
6
  }
7
- to {
8
- opacity: 1;
7
+ 100% {
8
+ opacity: 100%;
9
9
  margin-bottom: 10px;
10
10
  transform: translateY(0);
11
11
  }
@@ -32,9 +32,13 @@
32
32
  .right {
33
33
  height: 100%;
34
34
  margin-right: 30px;
35
+ display: flex;
36
+ align-items: center;
35
37
  }
36
38
  .right-slot {
37
- display: inline-block;
39
+ display: flex;
40
+ align-items: center;
41
+ height: 100%;
38
42
  }
39
43
  .header-dropdown-avatar {
40
44
  margin-right: 5px;
@@ -89,9 +93,9 @@
89
93
  .omni-topnav-all-menu {
90
94
  display: block;
91
95
  min-height: 590px;
92
- padding: 20px 60px 10px 60px;
96
+ padding: 20px 60px 10px;
93
97
  overflow-y: auto;
94
- border-right: 4px solid @background-color;
98
+ border-right: 4px solid var(--omni-background-color, #191919);
95
99
  }
96
100
  .omni-topnav-all-tool {
97
101
  transition: 0.2s color ease;
@@ -100,11 +104,11 @@
100
104
  }
101
105
  .omni-topnav-all-menu {
102
106
  display: none;
103
- background-color: @background-color;
107
+ background-color: var(--omni-background-color, #191919);
104
108
  position: absolute;
105
109
  left: 63px;
106
110
  top: 49px;
107
- bottom: 0px;
111
+ bottom: 0;
108
112
  width: auto;
109
113
  overflow: hidden;
110
114
  cursor: default;
@@ -161,7 +165,7 @@
161
165
  .omni-masonry {
162
166
  width: 800px;
163
167
  min-height: 600px;
164
- margin: 20px 10px 50px 0px;
168
+ margin: 20px 10px 50px 0;
165
169
  -webkit-column-count: 3;
166
170
  -webkit-column-gap: 10px;
167
171
 
@@ -169,9 +173,8 @@
169
173
  -moz-column-gap: 10px;
170
174
 
171
175
  column-count: 3;
172
- column-gap: 15px;
173
176
  column-fill: balance;
174
- row-gap: 200px;
177
+ gap: 200px 15px;
175
178
  font-size: 14px;
176
179
  .omni-masonry-block {
177
180
  h3 {
@@ -204,12 +207,11 @@
204
207
  margin-bottom: 20px;
205
208
  -webkit-column-break-inside: avoid;
206
209
  -moz-column-break-inside: avoid;
207
- column-break-inside: avoid;
208
210
  break-inside: avoid;
209
211
  }
210
212
  }
211
213
  .history-used {
212
- margin: 20px 0px 50px 0px;
214
+ margin: 20px 0 50px;
213
215
  width: 200px;
214
216
  padding-left: 10px;
215
217
  background: @side-menu-background;
@@ -218,7 +220,7 @@
218
220
  color: @omni-link-color;
219
221
  }
220
222
  ul {
221
- padding: 0px;
223
+ padding: 0;
222
224
  li {
223
225
  white-space: nowrap;
224
226
  overflow: hidden;
package/lib/styles/variables.less CHANGED
@@ -9,3 +9,14 @@
9
9
  @omni-link-size: 12px;
10
10
  @omni-header-nav-tool-size: 14px;
11
11
  @omni-notice-box-width: 360px;
12
+
13
+ // CSS Variables for better isolation
14
+ :root {
15
+ --omni-background-color: #191919;
16
+ --omni-hover-link-color: #006eff;
17
+ --omni-link-color: #bbb;
18
+ --omni-link-size: 12px;
19
+ --omni-header-nav-tool-size: 14px;
20
+ --omni-header-nav-height: 50px;
21
+ --omni-side-menu-background: #333;
22
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "omni-layout",
3
- "version": "0.0.5-beta.4",
3
+ "version": "0.0.5-beta.6",
4
4
  "description": "a common layout for ant design ",
5
5
  "types": "typings.d.ts",
6
6
  "main": "lib/index.js",
@@ -52,6 +52,10 @@
52
52
  "scripts": {
53
53
  "dev": "dumi dev",
54
54
  "doc": "dumi build",
55
+ "lint:ts": "npm --prefix demo exec -- tsc --noEmit -p \"$PWD/tsconfig.lint.json\" && npm --prefix demo exec -- tsc --noEmit -p \"$PWD/demo/tsconfig.lint.json\"",
56
+ "lint:style": "stylelint \"src/**/*.less\" \"demo/src/**/*.less\"",
57
+ "lint:format": "prettier --check \"package.json\" \"demo/package.json\" \"README.md\" \"docs/**/*.{md,mdx}\" \"issues/**/*.md\" \"tsconfig*.json\" \"demo/tsconfig*.json\" \".stylelintrc.cjs\"",
58
+ "lint": "npm run lint:ts && npm run lint:style && npm run lint:format",
55
59
  "build:dev": "father dev",
56
60
  "build:compat": "node ./scripts/build-compat.cjs",
57
61
  "build": "father build && npm run build:compat"
@@ -69,6 +73,10 @@
69
73
  "babel-plugin-import": "^1.13.8",
70
74
  "dumi": "^2.1.17",
71
75
  "father": "^4.5.7",
76
+ "postcss-less": "^6.0.0",
77
+ "prettier": "^3.3.3",
78
+ "stylelint": "^16.10.0",
79
+ "stylelint-config-standard-less": "^3.0.1",
72
80
  "typescript": "^3.3.3"
73
81
  },
74
82
  "license": "MIT",
@@ -82,6 +90,7 @@
82
90
  "memoize-one": "^5.0.4",
83
91
  "moment": "^2.30.1",
84
92
  "path-to-regexp": "^3.0.0",
93
+ "tslib": "^2.6.3",
85
94
  "umi-request": "^1.0.8"
86
95
  }
87
96
  }