Skip to content

Commit 26e60d8

Browse files
GraceWalkGraceWalk
committed
fix: 优化全局 Message & Notification 展示效果
1 parent df655a2 commit 26e60d8

File tree

30 files changed

+339
-69
lines changed

30 files changed

+339
-69
lines changed

‎km-console/packages/config-manager-fe/src/components/Message/index.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React from 'react';
2+
import { IconFont } from '@knowdesign/icons';
3+
import { message } from 'knowdesign';
4+
import { ArgsProps, ConfigOnClose } from 'knowdesign/es/basic/message';
5+
6+
type ConfigContent = React.ReactNode;
7+
type ConfigDuration = number | (() => void);
8+
type JointContent = ConfigContent | ArgsProps;
9+
10+
message.config({
11+
top: 16,
12+
});
13+
14+
function isArgsProps(content: JointContent): content is ArgsProps {
15+
return Object.prototype.toString.call(content) === '[object Object]' && !!(content as ArgsProps).content;
16+
}
17+
18+
const openMessage = (
19+
type: 'info' | 'success' | 'warning' | 'error',
20+
content: JointContent,
21+
duration?: ConfigDuration,
22+
onClose?: ConfigOnClose
23+
) => {
24+
if (isArgsProps(content)) {
25+
message[type]({
26+
icon: <IconFont type={`icon-${type}-circle`} />,
27+
...content,
28+
});
29+
} else {
30+
message[type]({
31+
icon: <IconFont type={`icon-${type}-circle`} />,
32+
content,
33+
duration,
34+
onClose,
35+
});
36+
}
37+
};
38+
39+
const customMessage = {
40+
info(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose) {
41+
openMessage('info', content, duration, onClose);
42+
},
43+
success(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose) {
44+
openMessage('success', content, duration, onClose);
45+
},
46+
warning(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose) {
47+
openMessage('warning', content, duration, onClose);
48+
},
49+
error(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose) {
50+
openMessage('error', content, duration, onClose);
51+
},
52+
};
53+
54+
export default customMessage;

‎km-console/packages/config-manager-fe/src/components/Notification/index.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react';
2+
import { notification } from 'knowdesign';
3+
import { ArgsProps } from 'knowdesign/es/basic/notification';
4+
import { IconFont } from '@knowdesign/icons';
5+
6+
notification.config({
7+
top: 16,
8+
duration: 3,
9+
});
10+
11+
const open = (type: 'info' | 'success' | 'warning' | 'error', content: ArgsProps) => {
12+
notification[type]({
13+
icon: <IconFont type={`icon-${type}-circle`} />,
14+
...content,
15+
});
16+
};
17+
18+
const customNotification = {
19+
info(content: ArgsProps) {
20+
open('info', content);
21+
},
22+
success(content: ArgsProps) {
23+
open('success', content);
24+
},
25+
warning(content: ArgsProps) {
26+
open('warning', content);
27+
},
28+
error(content: ArgsProps) {
29+
open('error', content);
30+
},
31+
};
32+
33+
export default customNotification;

‎km-console/packages/config-manager-fe/src/constants/axiosConfig.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
/* eslint-disable @typescript-eslint/ban-ts-comment */
22
// @ts-nocheck
33

4-
import { notification, Utils } from 'knowdesign';
4+
import { Utils } from 'knowdesign';
5+
import notification from '@src/components/Notification';
56

67
export const goLogin = () => {
78
if (!window.location.pathname.toLowerCase().startsWith('/login')) {
@@ -37,10 +38,9 @@ serviceInstance.interceptors.response.use(
3738
(config: any) => {
3839
const res: { code: number; message: string; data: any } = config.data;
3940
if (res.code !== 0 && res.code !== 200) {
40-
const desc = res.message;
4141
notification.error({
42-
message: desc,
43-
duration: 3,
42+
message: '错误信息',
43+
description: res.message,
4444
});
4545
throw res;
4646
}

‎km-console/packages/config-manager-fe/src/pages/ConfigManage/index.tsx‎

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,6 @@
11
import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
2-
import {
3-
Button,
4-
Form,
5-
Input,
6-
Select,
7-
Switch,
8-
Modal,
9-
message,
10-
ProTable,
11-
Drawer,
12-
Space,
13-
Divider,
14-
Tooltip,
15-
AppContainer,
16-
Utils,
17-
} from 'knowdesign';
2+
import { Button, Form, Input, Select, Switch, Modal, ProTable, Drawer, Space, Divider, Tooltip, AppContainer, Utils } from 'knowdesign';
3+
import message from '@src/components/Message';
184
import { IconFont } from '@knowdesign/icons';
195
import { PlusOutlined } from '@ant-design/icons';
206
import moment from 'moment';
@@ -81,7 +67,7 @@ const EditConfigDrawer = forwardRef((_, ref) => {
8167
// 如果内容可以格式化为 JSON，进行处理
8268
config.value = JSON.stringify(JSON.parse(config.value), null, 2);
8369
} catch (_) {
84-
return;
70+
//
8571
}
8672
}
8773
form.setFieldsValue({ ...config, status: config.status === 1 });
@@ -476,7 +462,7 @@ export default () => {
476462
rowKey: 'id',
477463
dataSource: data,
478464
paginationProps: pagination,
479-
columns,
465+
columns: columns as any,
480466
lineFillColor: true,
481467
attrs: {
482468
onChange: onTableChange,

‎km-console/packages/config-manager-fe/src/pages/UserManage/RoleTabContent.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,14 @@ import {
1111
Transfer,
1212
Row,
1313
Col,
14-
message,
1514
Tooltip,
1615
Spin,
1716
AppContainer,
1817
Utils,
1918
Popover,
2019
IconFont,
2120
} from 'knowdesign';
21+
import message from '@src/components/Message';
2222
import moment from 'moment';
2323
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
2424
import { defaultPagination } from '@src/constants/common';

‎km-console/packages/config-manager-fe/src/pages/UserManage/UserTabContent.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
2-
import { Form, ProTable, Select, Button, Input, Modal, message, Drawer, Space, Divider, AppContainer, Utils } from 'knowdesign';
2+
import { Form, ProTable, Select, Button, Input, Modal, Drawer, Space, Divider, AppContainer, Utils } from 'knowdesign';
3+
import message from '@src/components/Message';
34
import { IconFont } from '@knowdesign/icons';
45
import { PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons';
56
import moment from 'moment';

‎km-console/packages/layout-clusters-fe/src/components/Message/index.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React from 'react';
2+
import { IconFont } from '@knowdesign/icons';
3+
import { message } from 'knowdesign';
4+
import { ArgsProps, ConfigOnClose } from 'knowdesign/es/basic/message';
5+
6+
type ConfigContent = React.ReactNode;
7+
type ConfigDuration = number | (() => void);
8+
type JointContent = ConfigContent | ArgsProps;
9+
10+
message.config({
11+
top: 16,
12+
});
13+
14+
function isArgsProps(content: JointContent): content is ArgsProps {
15+
return Object.prototype.toString.call(content) === '[object Object]' && !!(content as ArgsProps).content;
16+
}
17+
18+
const openMessage = (
19+
type: 'info' | 'success' | 'warning' | 'error',
20+
content: JointContent,
21+
duration?: ConfigDuration,
22+
onClose?: ConfigOnClose
23+
) => {
24+
if (isArgsProps(content)) {
25+
message[type]({
26+
icon: <IconFont type={`icon-${type}-circle`} />,
27+
...content,
28+
});
29+
} else {
30+
message[type]({
31+
icon: <IconFont type={`icon-${type}-circle`} />,
32+
content,
33+
duration,
34+
onClose,
35+
});
36+
}
37+
};
38+
39+
const customMessage = {
40+
info(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose) {
41+
openMessage('info', content, duration, onClose);
42+
},
43+
success(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose) {
44+
openMessage('success', content, duration, onClose);
45+
},
46+
warning(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose) {
47+
openMessage('warning', content, duration, onClose);
48+
},
49+
error(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose) {
50+
openMessage('error', content, duration, onClose);
51+
},
52+
};
53+
54+
export default customMessage;

‎km-console/packages/layout-clusters-fe/src/components/Notification/index.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react';
2+
import { notification } from 'knowdesign';
3+
import { ArgsProps } from 'knowdesign/es/basic/notification';
4+
import { IconFont } from '@knowdesign/icons';
5+
6+
notification.config({
7+
top: 16,
8+
duration: 3,
9+
});
10+
11+
const open = (type: 'info' | 'success' | 'warning' | 'error', content: ArgsProps) => {
12+
notification[type]({
13+
icon: <IconFont type={`icon-${type}-circle`} />,
14+
...content,
15+
});
16+
};
17+
18+
const customNotification = {
19+
info(content: ArgsProps) {
20+
open('info', content);
21+
},
22+
success(content: ArgsProps) {
23+
open('success', content);
24+
},
25+
warning(content: ArgsProps) {
26+
open('warning', content);
27+
},
28+
error(content: ArgsProps) {
29+
open('error', content);
30+
},
31+
};
32+
33+
export default customNotification;

‎km-console/packages/layout-clusters-fe/src/components/TopicJob/ReplicaChange.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@ import {
1515
Tag,
1616
Utils,
1717
AppContainer,
18-
message,
1918
Divider,
2019
Space,
2120
} from 'knowdesign';
21+
import message from '@src/components/Message';
2222
import './index.less';
2323
import Api, { MetricType } from '@src/api/index';
2424
import moment from 'moment';

‎km-console/packages/layout-clusters-fe/src/components/TopicJob/ReplicaMove.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,12 @@ import {
1414
Table,
1515
Utils,
1616
AppContainer,
17-
message,
1817
Space,
1918
Divider,
2019
Transfer,
2120
Tooltip,
2221
} from 'knowdesign';
22+
import message from '@src/components/Message';
2323
import { IconFont } from '@knowdesign/icons';
2424
import './index.less';
2525
import Api, { MetricType } from '@src/api/index';

0 commit comments

Comments
 (0)