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

km-console/packages/config-manager-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/config-manager-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/config-manager-fe/src/constants/axiosConfig.ts

@@ -1,7 +1,8 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-nocheck
 
-import { notification, Utils } from 'knowdesign';
+import { Utils } from 'knowdesign';
+import notification from '@src/components/Notification';
 
 export const goLogin = () => {
   if (!window.location.pathname.toLowerCase().startsWith('/login')) {
@@ -37,10 +38,9 @@ serviceInstance.interceptors.response.use(
   (config: any) => {
     const res: { code: number; message: string; data: any } = config.data;
     if (res.code !== 0 && res.code !== 200) {
-      const desc = res.message;
       notification.error({
-        message: desc,
-        duration: 3,
+        message: '错误信息',
+        description: res.message,
       });
       throw res;
     }

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

@@ -1,20 +1,6 @@
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import {
-  Button,
-  Form,
-  Input,
-  Select,
-  Switch,
-  Modal,
-  message,
-  ProTable,
-  Drawer,
-  Space,
-  Divider,
-  Tooltip,
-  AppContainer,
-  Utils,
-} from 'knowdesign';
+import { Button, Form, Input, Select, Switch, Modal, ProTable, Drawer, Space, Divider, Tooltip, AppContainer, Utils } from 'knowdesign';
+import message from '@src/components/Message';
 import { IconFont } from '@knowdesign/icons';
 import { PlusOutlined } from '@ant-design/icons';
 import moment from 'moment';
@@ -81,7 +67,7 @@ const EditConfigDrawer = forwardRef((_, ref) => {
         // 如果内容可以格式化为 JSON，进行处理
         config.value = JSON.stringify(JSON.parse(config.value), null, 2);
       } catch (_) {
-        return;
+        //
       }
     }
     form.setFieldsValue({ ...config, status: config.status === 1 });
@@ -476,7 +462,7 @@ export default () => {
               rowKey: 'id',
               dataSource: data,
               paginationProps: pagination,
-              columns,
+              columns: columns as any,
               lineFillColor: true,
               attrs: {
                 onChange: onTableChange,

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

@@ -11,7 +11,6 @@ import {
   Transfer,
   Row,
   Col,
-  message,
   Tooltip,
   Spin,
   AppContainer,
@@ -19,6 +18,7 @@ import {
   Popover,
   IconFont,
 } from 'knowdesign';
+import message from '@src/components/Message';
 import moment from 'moment';
 import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
 import { defaultPagination } from '@src/constants/common';

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

@@ -1,5 +1,6 @@
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { Form, ProTable, Select, Button, Input, Modal, message, Drawer, Space, Divider, AppContainer, Utils } from 'knowdesign';
+import { Form, ProTable, Select, Button, Input, Modal, Drawer, Space, Divider, AppContainer, Utils } from 'knowdesign';
+import message from '@src/components/Message';
 import { IconFont } from '@knowdesign/icons';
 import { PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons';
 import moment from 'moment';