fix: 优化全局 Message & Notification 展示效果

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import { IconFont } from '@knowdesign/icons';
+import { message } from 'knowdesign';
+import { ArgsProps, ConfigOnClose } from 'knowdesign/es/basic/message';
+
+type ConfigContent = React.ReactNode;
+type ConfigDuration = number | (() => void);
+type JointContent = ConfigContent | ArgsProps;
+
+message.config({
+  top: 16,
+});
+
+function isArgsProps(content: JointContent): content is ArgsProps {
+  return Object.prototype.toString.call(content) === '[object Object]' && !!(content as ArgsProps).content;
+}
+
+const openMessage = (
+  type: 'info' | 'success' | 'warning' | 'error',
+  content: JointContent,
+  duration?: ConfigDuration,
+  onClose?: ConfigOnClose
+) => {
+  if (isArgsProps(content)) {
+    message[type]({
+      icon: <IconFont type={`icon-${type}-circle`} />,
+      ...content,
+    });
+  } else {
+    message[type]({
+      icon: <IconFont type={`icon-${type}-circle`} />,
+      content,
+      duration,
+      onClose,
+    });
+  }
+};
+
+const customMessage = {
+  info(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose) {
+    openMessage('info', content, duration, onClose);
+  },
+  success(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose) {
+    openMessage('success', content, duration, onClose);
+  },
+  warning(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose) {
+    openMessage('warning', content, duration, onClose);
+  },
+  error(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose) {
+    openMessage('error', content, duration, onClose);
+  },
+};
+
+export default customMessage;

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { notification } from 'knowdesign';
+import { ArgsProps } from 'knowdesign/es/basic/notification';
+import { IconFont } from '@knowdesign/icons';
+
+notification.config({
+  top: 16,
+  duration: 3,
+});
+
+const open = (type: 'info' | 'success' | 'warning' | 'error', content: ArgsProps) => {
+  notification[type]({
+    icon: <IconFont type={`icon-${type}-circle`} />,
+    ...content,
+  });
+};
+
+const customNotification = {
+  info(content: ArgsProps) {
+    open('info', content);
+  },
+  success(content: ArgsProps) {
+    open('success', content);
+  },
+  warning(content: ArgsProps) {
+    open('warning', content);
+  },
+  error(content: ArgsProps) {
+    open('error', content);
+  },
+};
+
+export default customNotification;

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

@@ -15,10 +15,10 @@ import {
   Tag,
   Utils,
   AppContainer,
-  message,
   Divider,
   Space,
 } from 'knowdesign';
+import message from '@src/components/Message';
 import './index.less';
 import Api, { MetricType } from '@src/api/index';
 import moment from 'moment';

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

@@ -14,12 +14,12 @@ import {
   Table,
   Utils,
   AppContainer,
-  message,
   Space,
   Divider,
   Transfer,
   Tooltip,
 } from 'knowdesign';
+import message from '@src/components/Message';
 import { IconFont } from '@knowdesign/icons';
 import './index.less';
 import Api, { MetricType } from '@src/api/index';