From 26e60d8a64ba9a1a70c8bfd613f9324b1f43dca8 Mon Sep 17 00:00:00 2001 From: GraceWalk Date: Fri, 21 Oct 2022 11:38:04 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E5=85=A8=E5=B1=80=20M?= =?UTF-8?q?essage=20&=20Notification=20=E5=B1=95=E7=A4=BA=E6=95=88?= =?UTF-8?q?=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Message/index.tsx | 54 +++++++++ .../src/components/Notification/index.tsx | 33 ++++++ .../src/constants/axiosConfig.ts | 8 +- .../src/pages/ConfigManage/index.tsx | 22 +--- .../src/pages/UserManage/RoleTabContent.tsx | 2 +- .../src/pages/UserManage/UserTabContent.tsx | 3 +- .../src/components/Message/index.tsx | 54 +++++++++ .../src/components/Notification/index.tsx | 33 ++++++ .../src/components/TopicJob/ReplicaChange.tsx | 2 +- .../src/components/TopicJob/ReplicaMove.tsx | 2 +- .../src/constants/axiosConfig.ts | 15 +-- .../pages/BrokerDetail/ConfigurationEdit.tsx | 3 +- .../src/pages/Consumers/ResetOffsetDrawer.tsx | 9 +- .../src/pages/Jobs/ViewJobsProgress.tsx | 3 +- .../src/pages/Jobs/index.tsx | 3 +- .../src/pages/LoadRebalance/BalanceDrawer.tsx | 17 +-- .../src/pages/LoadRebalance/ClusterNorms.tsx | 3 +- .../src/pages/Login/login.tsx | 3 +- .../pages/MutliClusterPage/AccessCluster.tsx | 3 +- .../src/pages/SecurityACLs/EditDrawer.tsx | 3 +- .../src/pages/SecurityACLs/index.tsx | 3 +- .../src/pages/SecurityUsers/index.tsx | 2 +- .../src/pages/TestingConsumer/Consume.tsx | 3 +- .../src/pages/TestingProduce/Produce.tsx | 3 +- .../TestingProduce/component/EditTable.tsx | 3 +- .../pages/TopicDetail/ConfigurationEdit.tsx | 3 +- .../src/pages/TopicList/Create.tsx | 3 +- .../src/pages/TopicList/Delete.tsx | 3 +- .../layout-clusters-fe/src/pages/index.tsx | 3 +- .../src/style-addition.less | 107 ++++++++++++++++++ 30 files changed, 339 insertions(+), 69 deletions(-) create mode 100644 km-console/packages/config-manager-fe/src/components/Message/index.tsx create mode 100644 km-console/packages/config-manager-fe/src/components/Notification/index.tsx create mode 100644 km-console/packages/layout-clusters-fe/src/components/Message/index.tsx create mode 100644 km-console/packages/layout-clusters-fe/src/components/Notification/index.tsx diff --git a/km-console/packages/config-manager-fe/src/components/Message/index.tsx b/km-console/packages/config-manager-fe/src/components/Message/index.tsx new file mode 100644 index 00000000..5791939c --- /dev/null +++ b/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: , + ...content, + }); + } else { + message[type]({ + icon: , + 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; diff --git a/km-console/packages/config-manager-fe/src/components/Notification/index.tsx b/km-console/packages/config-manager-fe/src/components/Notification/index.tsx new file mode 100644 index 00000000..9673d511 --- /dev/null +++ b/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: , + ...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; diff --git a/km-console/packages/config-manager-fe/src/constants/axiosConfig.ts b/km-console/packages/config-manager-fe/src/constants/axiosConfig.ts index 3e05e105..b99fd274 100644 --- a/km-console/packages/config-manager-fe/src/constants/axiosConfig.ts +++ b/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; } diff --git a/km-console/packages/config-manager-fe/src/pages/ConfigManage/index.tsx b/km-console/packages/config-manager-fe/src/pages/ConfigManage/index.tsx index 1430fbb6..3c85fdf5 100644 --- a/km-console/packages/config-manager-fe/src/pages/ConfigManage/index.tsx +++ b/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, diff --git a/km-console/packages/config-manager-fe/src/pages/UserManage/RoleTabContent.tsx b/km-console/packages/config-manager-fe/src/pages/UserManage/RoleTabContent.tsx index 5adeac58..f7db974b 100644 --- a/km-console/packages/config-manager-fe/src/pages/UserManage/RoleTabContent.tsx +++ b/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'; diff --git a/km-console/packages/config-manager-fe/src/pages/UserManage/UserTabContent.tsx b/km-console/packages/config-manager-fe/src/pages/UserManage/UserTabContent.tsx index 34bf6180..0ca3ca29 100644 --- a/km-console/packages/config-manager-fe/src/pages/UserManage/UserTabContent.tsx +++ b/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'; diff --git a/km-console/packages/layout-clusters-fe/src/components/Message/index.tsx b/km-console/packages/layout-clusters-fe/src/components/Message/index.tsx new file mode 100644 index 00000000..5791939c --- /dev/null +++ b/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: , + ...content, + }); + } else { + message[type]({ + icon: , + 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; diff --git a/km-console/packages/layout-clusters-fe/src/components/Notification/index.tsx b/km-console/packages/layout-clusters-fe/src/components/Notification/index.tsx new file mode 100644 index 00000000..9673d511 --- /dev/null +++ b/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: , + ...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; diff --git a/km-console/packages/layout-clusters-fe/src/components/TopicJob/ReplicaChange.tsx b/km-console/packages/layout-clusters-fe/src/components/TopicJob/ReplicaChange.tsx index 16637b9c..cd4f05ba 100644 --- a/km-console/packages/layout-clusters-fe/src/components/TopicJob/ReplicaChange.tsx +++ b/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'; diff --git a/km-console/packages/layout-clusters-fe/src/components/TopicJob/ReplicaMove.tsx b/km-console/packages/layout-clusters-fe/src/components/TopicJob/ReplicaMove.tsx index a6089e80..a93b26ef 100644 --- a/km-console/packages/layout-clusters-fe/src/components/TopicJob/ReplicaMove.tsx +++ b/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'; diff --git a/km-console/packages/layout-clusters-fe/src/constants/axiosConfig.ts b/km-console/packages/layout-clusters-fe/src/constants/axiosConfig.ts index fb0ddf44..5a087ca0 100644 --- a/km-console/packages/layout-clusters-fe/src/constants/axiosConfig.ts +++ b/km-console/packages/layout-clusters-fe/src/constants/axiosConfig.ts @@ -1,4 +1,6 @@ -import { notification, Utils } from 'knowdesign'; +import { Utils } from 'knowdesign'; +import notification from '@src/components/Notification'; + const { EventBus } = Utils; export const licenseEventBus = new EventBus(); @@ -42,8 +44,8 @@ serviceInstance.interceptors.response.use( licenseEventBus.emit('licenseError', desc); } else { notification.error({ - message: desc, - duration: 3, + message: '错误信息', + description: desc, }); } throw res; @@ -83,36 +85,31 @@ const dealResponse = (error: any) => { case 405: notification.error({ message: '错误', - duration: 3, description: `${error.response.data.message || '请求方式错误'}`, }); break; case 500: notification.error({ message: '错误', - duration: 3, description: '服务错误，请重试！', }); break; case 502: notification.error({ message: '错误', - duration: 3, description: '网络错误，请重试！', }); break; default: notification.error({ message: '连接出错', - duration: 3, description: `${error.response.status}`, }); } } else { notification.error({ + message: '连接超时!', description: '请重试或检查服务', - message: '连接超时! ', - duration: 3, }); } return Promise.reject(error); diff --git a/km-console/packages/layout-clusters-fe/src/pages/BrokerDetail/ConfigurationEdit.tsx b/km-console/packages/layout-clusters-fe/src/pages/BrokerDetail/ConfigurationEdit.tsx index a362acc0..f4fda39a 100644 --- a/km-console/packages/layout-clusters-fe/src/pages/BrokerDetail/ConfigurationEdit.tsx +++ b/km-console/packages/layout-clusters-fe/src/pages/BrokerDetail/ConfigurationEdit.tsx @@ -1,5 +1,6 @@ import React, { useEffect } from 'react'; -import { Drawer, Form, Input, Space, Button, Checkbox, Utils, Row, Col, Divider, message } from 'knowdesign'; +import { Drawer, Form, Input, Space, Button, Checkbox, Utils, Row, Col, Divider } from 'knowdesign'; +import message from '@src/components/Message'; import { IconFont } from '@knowdesign/icons'; import { useParams } from 'react-router-dom'; import Api from '@src/api'; diff --git a/km-console/packages/layout-clusters-fe/src/pages/Consumers/ResetOffsetDrawer.tsx b/km-console/packages/layout-clusters-fe/src/pages/Consumers/ResetOffsetDrawer.tsx index c079393b..bba5059e 100644 --- a/km-console/packages/layout-clusters-fe/src/pages/Consumers/ResetOffsetDrawer.tsx +++ b/km-console/packages/layout-clusters-fe/src/pages/Consumers/ResetOffsetDrawer.tsx @@ -1,11 +1,14 @@ import React, { useState, useEffect } from 'react'; -import { Button, DatePicker, Drawer, Form, notification, Radio, Utils, Space, Divider, message } from 'knowdesign'; +import { Button, DatePicker, Drawer, Form, Radio, Utils, Space, Divider } from 'knowdesign'; +import notification from '@src/components/Notification'; + +import message from '@src/components/Message'; import { useParams } from 'react-router-dom'; import EditTable from '../TestingProduce/component/EditTable'; import Api from '@src/api/index'; import moment from 'moment'; -const CustomSelectResetTime = (props: { value?: string; onChange?: (val: Number | String) => void }) => { +const CustomSelectResetTime = (props: { value?: string; onChange?: (val: number | string) => void }) => { const { value, onChange } = props; const [timeSetMode, setTimeSetMode] = useState('newest'); useEffect(() => { @@ -81,7 +84,7 @@ export default (props: any) => { tableData = customFormRef.current.getTableData(); } const formData = form.getFieldsValue(); - let resetParams: any = { + const resetParams: any = { clusterId: clusterPhyId, createIfNotExist: false, groupName: record.groupName, diff --git a/km-console/packages/layout-clusters-fe/src/pages/Jobs/ViewJobsProgress.tsx b/km-console/packages/layout-clusters-fe/src/pages/Jobs/ViewJobsProgress.tsx index b052cb92..ee8bf0fa 100644 --- a/km-console/packages/layout-clusters-fe/src/pages/Jobs/ViewJobsProgress.tsx +++ b/km-console/packages/layout-clusters-fe/src/pages/Jobs/ViewJobsProgress.tsx @@ -1,7 +1,8 @@ import React, { useState, useEffect } from 'react'; import moment from 'moment'; import { useParams } from 'react-router-dom'; -import { Button, Drawer, Utils, Descriptions, Tabs, Input, message, Spin, InputNumber } from 'knowdesign'; +import { Button, Drawer, Utils, Descriptions, Tabs, Input, Spin, InputNumber } from 'knowdesign'; +import message from '@src/components/Message'; import { IconFont } from '@knowdesign/icons'; import TaskDetails from './TeskDetails'; import NodeTraffic from './NodeTraffic'; diff --git a/km-console/packages/layout-clusters-fe/src/pages/Jobs/index.tsx b/km-console/packages/layout-clusters-fe/src/pages/Jobs/index.tsx index 3e08d3a5..a4170af1 100644 --- a/km-console/packages/layout-clusters-fe/src/pages/Jobs/index.tsx +++ b/km-console/packages/layout-clusters-fe/src/pages/Jobs/index.tsx @@ -1,6 +1,7 @@ import React, { useState, useEffect, memo } from 'react'; import { useParams, useHistory, useLocation } from 'react-router-dom'; -import { ProTable, Drawer, Utils, AppContainer, Form, Select, Input, Button, message, Modal, Divider } from 'knowdesign'; +import { ProTable, Drawer, Utils, AppContainer, Form, Select, Input, Button, Modal, Divider } from 'knowdesign'; +import message from '@src/components/Message'; import { IconFont } from '@knowdesign/icons'; import API from '../../api'; import { getJobsListColumns, defaultPagination, runningStatus, jobType } from './config'; diff --git a/km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/BalanceDrawer.tsx b/km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/BalanceDrawer.tsx index 8ad1cd3c..2da0fa03 100644 --- a/km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/BalanceDrawer.tsx +++ b/km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/BalanceDrawer.tsx @@ -1,19 +1,6 @@ import React, { useState, useEffect, useRef } from 'react'; -import { - Utils, - Drawer, - Button, - Form, - Space, - Divider, - AppContainer, - Radio, - InputNumber, - Transfer, - Select, - message, - Tooltip, -} from 'knowdesign'; +import { Utils, Drawer, Button, Form, Space, Divider, AppContainer, Radio, InputNumber, Transfer, Select, Tooltip } from 'knowdesign'; +import message from '@src/components/Message'; import { IconFont } from '@knowdesign/icons'; import CronInput from './CronInput'; import BalanceEditTable from './BalanceEditTable'; diff --git a/km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/ClusterNorms.tsx b/km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/ClusterNorms.tsx index 13cf7ab2..4c0ad07b 100644 --- a/km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/ClusterNorms.tsx +++ b/km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/ClusterNorms.tsx @@ -1,5 +1,6 @@ import React, { useState, useEffect, useRef } from 'react'; -import { Utils, Drawer, Button, Form, Space, Divider, AppContainer, Input, Transfer, message, InputNumber } from 'knowdesign'; +import { Utils, Drawer, Button, Form, Space, Divider, AppContainer, Input, Transfer, InputNumber } from 'knowdesign'; +import message from '@src/components/Message'; import { IconFont } from '@knowdesign/icons'; import { CloseOutlined } from '@ant-design/icons'; import api from '../../api'; diff --git a/km-console/packages/layout-clusters-fe/src/pages/Login/login.tsx b/km-console/packages/layout-clusters-fe/src/pages/Login/login.tsx index 39c72a76..0400dbf0 100644 --- a/km-console/packages/layout-clusters-fe/src/pages/Login/login.tsx +++ b/km-console/packages/layout-clusters-fe/src/pages/Login/login.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import { Form, Button, Input, Row, InputNumber, Utils, message } from 'knowdesign'; +import { Form, Button, Input, Row, InputNumber, Utils } from 'knowdesign'; +import message from '@src/components/Message'; import { FormMap } from './config'; import Api from '../../api'; import { useHistory } from 'react-router-dom'; diff --git a/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/AccessCluster.tsx b/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/AccessCluster.tsx index 7435d9a7..e5c1f649 100644 --- a/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/AccessCluster.tsx +++ b/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/AccessCluster.tsx @@ -1,4 +1,5 @@ -import { Button, Divider, Drawer, Form, Input, InputNumber, message, Radio, Select, Spin, Space, Utils } from 'knowdesign'; +import { Button, Divider, Drawer, Form, Input, InputNumber, Radio, Select, Spin, Space, Utils } from 'knowdesign'; +import message from '@src/components/Message'; import * as React from 'react'; import { useIntl } from 'react-intl'; import api from '@src/api'; diff --git a/km-console/packages/layout-clusters-fe/src/pages/SecurityACLs/EditDrawer.tsx b/km-console/packages/layout-clusters-fe/src/pages/SecurityACLs/EditDrawer.tsx index 9b2a7203..8afcdccc 100644 --- a/km-console/packages/layout-clusters-fe/src/pages/SecurityACLs/EditDrawer.tsx +++ b/km-console/packages/layout-clusters-fe/src/pages/SecurityACLs/EditDrawer.tsx @@ -1,5 +1,6 @@ import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react'; -import { Button, Form, Input, Select, message, Drawer, Space, Divider, Utils, Radio, AutoComplete, Alert } from 'knowdesign'; +import { Button, Form, Input, Select, Drawer, Space, Divider, Utils, Radio, AutoComplete, Alert } from 'knowdesign'; +import message from '@src/components/Message'; import api from '@src/api'; import { useParams } from 'react-router-dom'; import { UsersProps } from '../SecurityUsers'; diff --git a/km-console/packages/layout-clusters-fe/src/pages/SecurityACLs/index.tsx b/km-console/packages/layout-clusters-fe/src/pages/SecurityACLs/index.tsx index a98f6269..d361f3e7 100644 --- a/km-console/packages/layout-clusters-fe/src/pages/SecurityACLs/index.tsx +++ b/km-console/packages/layout-clusters-fe/src/pages/SecurityACLs/index.tsx @@ -1,5 +1,6 @@ import React, { useEffect, useRef, useState } from 'react'; -import { Button, Form, Input, Select, Modal, message, ProTable, AppContainer, DKSBreadcrumb, Utils, Divider } from 'knowdesign'; +import { Button, Form, Input, Select, Modal, ProTable, AppContainer, DKSBreadcrumb, Utils, Divider } from 'knowdesign'; +import message from '@src/components/Message'; import { IconFont } from '@knowdesign/icons'; import ACLsCardBar from '@src/components/CardBar/ACLsCardBar'; import api from '@src/api'; diff --git a/km-console/packages/layout-clusters-fe/src/pages/SecurityUsers/index.tsx b/km-console/packages/layout-clusters-fe/src/pages/SecurityUsers/index.tsx index 9f493bd7..6291ed42 100644 --- a/km-console/packages/layout-clusters-fe/src/pages/SecurityUsers/index.tsx +++ b/km-console/packages/layout-clusters-fe/src/pages/SecurityUsers/index.tsx @@ -4,7 +4,6 @@ import { Form, Input, Modal, - message, ProTable, Drawer, Space, @@ -16,6 +15,7 @@ import { Tooltip, Alert, } from 'knowdesign'; +import message from '@src/components/Message'; import { IconFont } from '@knowdesign/icons'; import { CloseOutlined, EyeInvisibleOutlined, EyeOutlined, LoadingOutlined } from '@ant-design/icons'; import './index.less'; diff --git a/km-console/packages/layout-clusters-fe/src/pages/TestingConsumer/Consume.tsx b/km-console/packages/layout-clusters-fe/src/pages/TestingConsumer/Consume.tsx index be43d454..90625de8 100644 --- a/km-console/packages/layout-clusters-fe/src/pages/TestingConsumer/Consume.tsx +++ b/km-console/packages/layout-clusters-fe/src/pages/TestingConsumer/Consume.tsx @@ -1,6 +1,7 @@ /* eslint-disable no-case-declarations */ import { DownloadOutlined } from '@ant-design/icons'; -import { AppContainer, Divider, message, Tooltip, Utils } from 'knowdesign'; +import { AppContainer, Divider, Tooltip, Utils } from 'knowdesign'; +import message from '@src/components/Message'; import { IconFont } from '@knowdesign/icons'; import * as React from 'react'; import moment from 'moment'; diff --git a/km-console/packages/layout-clusters-fe/src/pages/TestingProduce/Produce.tsx b/km-console/packages/layout-clusters-fe/src/pages/TestingProduce/Produce.tsx index 8f5e3479..18f0b2c5 100644 --- a/km-console/packages/layout-clusters-fe/src/pages/TestingProduce/Produce.tsx +++ b/km-console/packages/layout-clusters-fe/src/pages/TestingProduce/Produce.tsx @@ -1,4 +1,5 @@ -import { AppContainer, Form, message, Tabs, Utils } from 'knowdesign'; +import { AppContainer, Form, Tabs, Utils } from 'knowdesign'; +import message from '@src/components/Message'; import * as React from 'react'; import ConfigForm from './component/ConfigFrom'; import TestResult from '../TestingConsumer/component/Result'; diff --git a/km-console/packages/layout-clusters-fe/src/pages/TestingProduce/component/EditTable.tsx b/km-console/packages/layout-clusters-fe/src/pages/TestingProduce/component/EditTable.tsx index a5300af2..55b06e25 100644 --- a/km-console/packages/layout-clusters-fe/src/pages/TestingProduce/component/EditTable.tsx +++ b/km-console/packages/layout-clusters-fe/src/pages/TestingProduce/component/EditTable.tsx @@ -1,6 +1,7 @@ /* eslint-disable react/display-name */ import React, { useState } from 'react'; -import { Table, Input, InputNumber, Popconfirm, Form, Typography, Button, message, Select } from 'knowdesign'; +import { Table, Input, InputNumber, Popconfirm, Form, Typography, Button, Select } from 'knowdesign'; +import message from '@src/components/Message'; import { IconFont } from '@knowdesign/icons'; import './style/edit-table.less'; import { CheckOutlined, CloseOutlined, PlusSquareOutlined } from '@ant-design/icons'; diff --git a/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/ConfigurationEdit.tsx b/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/ConfigurationEdit.tsx index 7fc4ab80..ff8c6cd0 100644 --- a/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/ConfigurationEdit.tsx +++ b/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/ConfigurationEdit.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import { Drawer, Form, Input, Space, Button, Utils, Row, Col, Divider, message } from 'knowdesign'; +import { Drawer, Form, Input, Space, Button, Utils, Row, Col, Divider } from 'knowdesign'; +import message from '@src/components/Message'; import { IconFont } from '@knowdesign/icons'; import { useParams } from 'react-router-dom'; import Api from '@src/api'; diff --git a/km-console/packages/layout-clusters-fe/src/pages/TopicList/Create.tsx b/km-console/packages/layout-clusters-fe/src/pages/TopicList/Create.tsx index 288b99c7..6f1cb667 100644 --- a/km-console/packages/layout-clusters-fe/src/pages/TopicList/Create.tsx +++ b/km-console/packages/layout-clusters-fe/src/pages/TopicList/Create.tsx @@ -1,6 +1,7 @@ import React, { useState, useEffect } from 'react'; import { useParams } from 'react-router-dom'; -import { Alert, Button, Checkbox, Divider, Drawer, Form, Input, InputNumber, Modal, notification, Select, Utils } from 'knowdesign'; +import { Alert, Button, Checkbox, Divider, Drawer, Form, Input, InputNumber, Modal, Select, Utils } from 'knowdesign'; +import notification from '@src/components/Notification'; import { PlusOutlined, DownOutlined, UpOutlined } from '@ant-design/icons'; import Api from '@src/api/index'; diff --git a/km-console/packages/layout-clusters-fe/src/pages/TopicList/Delete.tsx b/km-console/packages/layout-clusters-fe/src/pages/TopicList/Delete.tsx index 75af2070..69109225 100644 --- a/km-console/packages/layout-clusters-fe/src/pages/TopicList/Delete.tsx +++ b/km-console/packages/layout-clusters-fe/src/pages/TopicList/Delete.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react'; import { useParams } from 'react-router-dom'; -import { Button, Form, Input, Modal, notification, Utils } from 'knowdesign'; +import { Button, Form, Input, Modal, Utils } from 'knowdesign'; +import notification from '@src/components/Notification'; import { IconFont } from '@knowdesign/icons'; import Api from '@src/api/index'; diff --git a/km-console/packages/layout-clusters-fe/src/pages/index.tsx b/km-console/packages/layout-clusters-fe/src/pages/index.tsx index 4e1d1808..16d73de9 100644 --- a/km-console/packages/layout-clusters-fe/src/pages/index.tsx +++ b/km-console/packages/layout-clusters-fe/src/pages/index.tsx @@ -1,6 +1,7 @@ import React, { useState, useEffect, useCallback } from 'react'; import { Redirect, useHistory, useLocation } from 'react-router-dom'; -import { DProLayout, AppContainer, RouteGuard, notification, Spin } from 'knowdesign'; +import { DProLayout, AppContainer, RouteGuard, Spin } from 'knowdesign'; +import notification from '@src/components/Notification'; import { pageRoutes } from './pageRoutes'; import { leftMenus, systemKey } from '@src/constants/menu'; import { ClustersPermissionMap } from './CommonConfig'; diff --git a/km-console/packages/layout-clusters-fe/src/style-addition.less b/km-console/packages/layout-clusters-fe/src/style-addition.less index 451c31bf..f4b7e04b 100644 --- a/km-console/packages/layout-clusters-fe/src/style-addition.less +++ b/km-console/packages/layout-clusters-fe/src/style-addition.less @@ -11,6 +11,7 @@ @select-item-selected-font-weight: normal; @btn-danger-bg: #F5483B; @btn-danger-border: #F5483B; +@notification-icon-size: 20px; // 自定义变量 // Input @input-bg: rgba(33, 37, 41, 0.06); @@ -656,3 +657,109 @@ .@{ant-prefix}-empty-img-default{ width: 100% !important; } + +// message 样式覆盖 +.@{message-prefix-cls} { + &-notice-content { + padding: 8px 12px; + font-size: 14px; + border-radius: 4px; + background: #fff; + } + &-success, + &-info, + &-warning, + &-error, + &-loading { + margin: unset; + padding: unset; + color: #000; + border-style: unset; + border-width: unset; + border-radius: unset; + } + + &-success { + background-color: unset; + border-color: unset; + } + + &-info, + &-loading { + background-color: unset; + border-color: unset; + } + + &-warning { + background-color: unset; + border-color: unset; + } + + &-error { + background-color: unset; + border-color: unset; + } + + .@{iconfont-css-prefix} { + top: 2px; + color: unset; + } +} + +// Notification 样式覆盖 +.@{notification-prefix-cls} { + &-notice { + width: 348px; + color: #000; + background-color: #fff; + border: unset; + border-radius: 4px; + box-shadow: 0 2px 4px 0 rgba(0,0,0,0.02), 0 4px 6px 6px rgba(0,0,0,0.02), 0 4px 6px 0 rgba(0,0,0,0.06); + &-message { + font-family: @font-family-bold; + font-size: 16px; + color: #000; + } + &-description { + font-size: 14px; + color: rgba(0,0,0,0.60); + } + &-with-icon &-message { + font-size: 16px; + margin-left: 26px; + } + &-with-icon &-description { + font-size: 14px; + margin-left: 26px; + } + &-icon { + top: 18px; + font-size: @notification-icon-size; + line-height: @notification-icon-size; + } + .@{iconfont-css-prefix}&-icon { + color: @notification-content-color !important; + } + &-success { + background-color: #fff; + border: unset; + } + &-warning { + background-color: #fff; + border: unset; + } + &-error { + background-color: #fff; + border: unset; + } + &-close { + color: rgba(0,0,0,0.60); + + &:hover { + & when not (@theme = dark) { + color: shade(@white, 30%); + } + } + } + } +}