Skip to content

Commit f90e5e9

Browse files
chenshuai2144chenshuai2144
committed
remove test code
1 parent 50c78d0 commit f90e5e9

File tree

8 files changed

+7
-464
lines changed

8 files changed

+7
-464
lines changed

‎packages/layout/src/demos/debug-demo.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export default () => {
3636
header: {
3737
colorBgMenuItemSelected: 'rgba(82, 196, 26, 1)',
3838
colorTextMenuSelected: 'rgba(114, 46, 209, 1)',
39-
colorBgHeader: 'rgba(250, 173, 20, 1)',
39+
colorBgHeader: 'rgba(255, 255, 255, 0.6)',
4040
colorHeaderTitle: 'rgba(47, 84, 235, 1)',
4141
colorTextMenuActive: 'rgba(255, 255, 255, 1)',
4242
colorTextMenu: 'rgba(250, 84, 28, 1)',

‎packages/layout/src/demos/pageSimplify.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export default () => {
3131
token={{
3232
bgLayout: '#fff',
3333
header: {
34-
colorBgHeader: '#fff',
34+
colorBgHeader: 'rgba(255, 255, 255, 0.6)',
3535
},
3636
sider: {
3737
colorMenuBackground: '#fff',

‎packages/layout/src/style/index.ts

+1-215
Original file line numberDiff line numberDiff line change
@@ -1,224 +1,10 @@
11
import type { GenerateStyle, ProAliasToken } from '@ant-design/pro-provider';
22
import { useStyle as useAntdStyle } from '@ant-design/pro-provider';
3-
import { version } from 'antd';
43

54
export interface ProLayoutToken extends ProAliasToken {
65
componentCls: string;
76
}
87

9-
const getVersion = () => {
10-
if (typeof process === 'undefined') return version;
11-
return process?.env?.ANTD_VERSION || version;
12-
};
13-
14-
/**
15-
* 主要区别：
16-
* 需要手动引入 import 'antd/dist/antd.css';
17-
* 需要重置 menu 的样式
18-
* @param token
19-
* @returns
20-
*/
21-
const compatibleStyle: GenerateStyle<ProLayoutToken> = (token) => {
22-
if (getVersion()?.startsWith('5')) {
23-
return {};
24-
}
25-
return {
26-
[token.componentCls]: {
27-
width: '100%',
28-
height: '100%',
29-
[`${token.proComponentsCls}-base-menu`]: {
30-
color: token.layout?.sider?.colorTextMenu,
31-
[`${token.antCls}-menu-sub`]: {
32-
backgroundColor: 'transparent!important',
33-
color: token.layout?.sider?.colorTextMenu,
34-
},
35-
[`& ${token.antCls}-layout`]: {
36-
backgroundColor: 'transparent',
37-
width: '100%',
38-
},
39-
[`${token.antCls}-menu-submenu-expand-icon, ${token.antCls}-menu-submenu-arrow`]:
40-
{
41-
color: 'inherit',
42-
},
43-
[`&${token.antCls}-menu`]: {
44-
color: token.layout?.sider?.colorTextMenu,
45-
[`${token.antCls}-menu-item`]: {
46-
'*': {
47-
transition: 'none !important',
48-
},
49-
},
50-
[`${token.antCls}-menu-item a`]: {
51-
color: 'inherit',
52-
},
53-
},
54-
[`&${token.antCls}-menu-inline`]: {
55-
[`${token.antCls}-menu-selected::after,${token.antCls}-menu-item-selected::after`]:
56-
{
57-
display: 'none',
58-
},
59-
},
60-
[`${token.antCls}-menu-sub ${token.antCls}-menu-inline`]: {
61-
backgroundColor: 'transparent!important',
62-
},
63-
[`${token.antCls}-menu-item:active,
64-
${token.antCls}-menu-submenu-title:active`]: {
65-
backgroundColor: 'transparent!important',
66-
},
67-
[`&${token.antCls}-menu-light`]: {
68-
[`${token.antCls}-menu-item:hover,
69-
${token.antCls}-menu-item-active,
70-
${token.antCls}-menu-submenu-active,
71-
${token.antCls}-menu-submenu-title:hover`]: {
72-
color: token.layout?.sider?.colorTextMenuActive,
73-
borderRadius: token.borderRadius,
74-
[`${token.antCls}-menu-submenu-arrow`]: {
75-
color: token.layout?.sider?.colorTextMenuActive,
76-
},
77-
},
78-
},
79-
[`&${token.antCls}-menu:not(${token.antCls}-menu-horizontal)`]: {
80-
[`${token.antCls}-menu-item-selected`]: {
81-
backgroundColor: token.layout?.sider?.colorBgMenuItemSelected,
82-
borderRadius: token.borderRadius,
83-
},
84-
[`${token.antCls}-menu-item:hover,
85-
${token.antCls}-menu-item-active,
86-
${token.antCls}-menu-submenu-title:hover`]: {
87-
color: token.layout?.sider?.colorTextMenuActive,
88-
borderRadius: token.borderRadius,
89-
backgroundColor: `${token.layout?.header?.colorBgMenuItemHover} !important`,
90-
[`${token.antCls}-menu-submenu-arrow`]: {
91-
color: token.layout?.sider?.colorTextMenuActive,
92-
},
93-
},
94-
},
95-
[`${token.antCls}-menu-item-selected`]: {
96-
color: token.layout?.sider?.colorTextMenuSelected,
97-
},
98-
[`${token.antCls}-menu-submenu-selected`]: {
99-
color: token.layout?.sider?.colorTextMenuSelected,
100-
},
101-
[`&${token.antCls}-menu:not(${token.antCls}-menu-inline) ${token.antCls}-menu-submenu-open`]:
102-
{
103-
color: token.layout?.sider?.colorTextMenuSelected,
104-
},
105-
106-
[`&${token.antCls}-menu-vertical`]: {
107-
[`${token.antCls}-menu-submenu-selected`]: {
108-
borderRadius: token.borderRadius,
109-
color: token.layout?.sider?.colorTextMenuSelected,
110-
},
111-
},
112-
113-
[`${token.antCls}-menu-submenu:hover > ${token.antCls}-menu-submenu-title > ${token.antCls}-menu-submenu-arrow`]:
114-
{
115-
color: token.layout?.sider?.colorTextMenuActive,
116-
},
117-
118-
[`&${token.antCls}-menu-horizontal`]: {
119-
[`${token.antCls}-menu-item:hover,
120-
${token.antCls}-menu-submenu:hover,
121-
${token.antCls}-menu-item-active,
122-
${token.antCls}-menu-submenu-active`]: {
123-
borderRadius: 4,
124-
transition: 'none',
125-
color: token.layout?.header?.colorTextMenuActive,
126-
backgroundColor: `${token.layout?.header?.colorBgMenuItemHover} !important`,
127-
},
128-
129-
[`${token.antCls}-menu-item-open,
130-
${token.antCls}-menu-submenu-open,
131-
${token.antCls}-menu-item-selected,
132-
${token.antCls}-menu-submenu-selected`]: {
133-
backgroundColor: token.layout?.header?.colorBgMenuItemSelected,
134-
borderRadius: token.borderRadius,
135-
transition: 'none',
136-
color: `${token.layout?.header?.colorTextMenuSelected} !important`,
137-
[`${token.antCls}-menu-submenu-arrow`]: {
138-
color: `${token.layout?.header?.colorTextMenuSelected} !important`,
139-
},
140-
},
141-
[`> ${token.antCls}-menu-item, > ${token.antCls}-menu-submenu`]: {
142-
paddingInline: 16,
143-
marginInline: 4,
144-
},
145-
[`> ${token.antCls}-menu-item::after, > ${token.antCls}-menu-submenu::after`]:
146-
{
147-
display: 'none',
148-
},
149-
},
150-
},
151-
152-
[`${token.proComponentsCls}-top-nav-header-base-menu`]: {
153-
[`&${token.antCls}-menu`]: {
154-
color: token.layout?.header?.colorTextMenu,
155-
[`${token.antCls}-menu-item a`]: {
156-
color: 'inherit',
157-
},
158-
},
159-
[`&${token.antCls}-menu-light`]: {
160-
[`${token.antCls}-menu-item:hover,
161-
${token.antCls}-menu-item-active,
162-
${token.antCls}-menu-submenu-active,
163-
${token.antCls}-menu-submenu-title:hover`]: {
164-
color: token.layout?.header?.colorTextMenuActive,
165-
borderRadius: token.borderRadius,
166-
transition: 'none',
167-
backgroundColor: token.layout?.header?.colorBgMenuItemSelected,
168-
[`${token.antCls}-menu-submenu-arrow`]: {
169-
color: token.layout?.header?.colorTextMenuActive,
170-
},
171-
},
172-
173-
[`${token.antCls}-menu-item-selected`]: {
174-
color: token.layout?.header?.colorTextMenuSelected,
175-
borderRadius: token.borderRadius,
176-
backgroundColor: token.layout?.header?.colorBgMenuItemSelected,
177-
},
178-
},
179-
},
180-
},
181-
[`${token.antCls}-menu-sub${token.antCls}-menu-inline`]: {
182-
backgroundColor: 'transparent!important',
183-
},
184-
[`${token.antCls}-menu-submenu-popup`]: {
185-
backgroundColor: 'rgba(255, 255, 255, 0.42)',
186-
'-webkit-backdrop-filter': 'blur(8px)',
187-
backdropFilter: 'blur(8px)',
188-
[`${token.antCls}-menu`]: {
189-
background: 'transparent !important',
190-
backgroundColor: 'transparent !important',
191-
[`${token.antCls}-menu-item:active,
192-
${token.antCls}-menu-submenu-title:active`]: {
193-
backgroundColor: 'transparent!important',
194-
},
195-
},
196-
[`${token.antCls}-menu-item-selected`]: {
197-
color: token.layout?.sider?.colorTextMenuSelected,
198-
},
199-
[`${token.antCls}-menu-submenu-selected`]: {
200-
color: token.layout?.sider?.colorTextMenuSelected,
201-
},
202-
[`${token.antCls}-menu:not(${token.antCls}-menu-horizontal)`]: {
203-
[`${token.antCls}-menu-item-selected`]: {
204-
backgroundColor: 'rgba(0, 0, 0, 0.04)',
205-
borderRadius: token.borderRadius,
206-
color: token.layout?.sider?.colorTextMenuSelected,
207-
},
208-
[`${token.antCls}-menu-item:hover,
209-
${token.antCls}-menu-item-active,
210-
${token.antCls}-menu-submenu-title:hover`]: {
211-
color: token.layout?.sider?.colorTextMenuActive,
212-
borderRadius: token.borderRadius,
213-
[`${token.antCls}-menu-submenu-arrow`]: {
214-
color: token.layout?.sider?.colorTextMenuActive,
215-
},
216-
},
217-
},
218-
},
219-
};
220-
};
221-
2228
const genProLayoutStyle: GenerateStyle<ProLayoutToken> = (token) => {
2239
return {
22410
[`${token.antCls}-layout`]: {
@@ -275,6 +61,6 @@ export function useStyle(prefixCls: string) {
27561
componentCls: `.${prefixCls}`,
27662
} as ProLayoutToken;
27763

278-
return [genProLayoutStyle(proLayoutToken), compatibleStyle(proLayoutToken)];
64+
return [genProLayoutStyle(proLayoutToken)];
27965
});
28066
}

‎packages/layout/src/utils/getBreadcrumbProps.tsx

-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import type { BreadcrumbProps } from 'antd';
2-
import { version } from 'antd';
32
import type {
43
BreadcrumbItemType,
54
ItemType,
@@ -11,11 +10,6 @@ import type { ProSettings } from '../defaultSettings';
1110
import type { MenuDataItem, MessageDescriptor, WithFalse } from '../typing';
1211
import { urlToList } from './pathTools';
1312

14-
export const getVersion = () => {
15-
if (typeof process === 'undefined') return version;
16-
return process?.env?.ANTD_VERSION || version;
17-
};
18-
1913
export type BreadcrumbProLayoutProps = {
2014
breadcrumbList?: { title: string; href: string }[];
2115
home?: string;

‎packages/provider/src/typing/layoutToken.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@ export const getLayoutDesignToken: (
113113
antdToken: Record<string, any>,
114114
) => LayoutDesignToken = (designTokens, antdToken) => {
115115
const finalDesignTokens = { ...designTokens };
116+
const defaultColorBgHeader = setAlpha(antdToken.colorBgElevated, 0.6);
116117

117118
return {
118119
bgLayout: `linear-gradient(${antdToken.colorBgContainer}, ${antdToken.colorBgLayout} 28%)`,
@@ -122,13 +123,14 @@ export const getLayoutDesignToken: (
122123
colorTextAppListIconHover: antdToken.colorTextBase,
123124
...finalDesignTokens,
124125
header: {
125-
colorBgHeader: setAlpha(antdToken.colorBgElevated, 0.6),
126+
colorBgHeader: defaultColorBgHeader,
126127
colorBgScrollHeader: setAlpha(antdToken.colorBgElevated, 0.8),
127128
colorHeaderTitle: antdToken.colorText,
128129
colorBgMenuItemHover: setAlpha(antdToken.colorTextBase, 0.03),
129130
colorBgMenuItemSelected: 'transparent',
130131
colorBgMenuElevated:
131-
finalDesignTokens?.header?.colorBgHeader !== 'rgba(255, 255, 255, 0.6)'
132+
(finalDesignTokens?.header?.colorBgHeader ?? defaultColorBgHeader) !==
133+
defaultColorBgHeader
132134
? finalDesignTokens.header?.colorBgHeader
133135
: antdToken.colorBgElevated,
134136
colorTextMenuSelected: setAlpha(antdToken.colorTextBase, 0.95),

0 commit comments

Comments
 (0)