Skip to content

Commit e8e7613

Browse files
shanhexishanhexi
committed
fix: 提示样式
1 parent b12ade1 commit e8e7613

9 files changed

Lines changed: 130 additions & 66 deletions

File tree

‎chat2db-client/src/components/MyNotification/index.less‎

Lines changed: 40 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,48 @@
11
@import '../../styles/var.less';
22

33
.message {
4-
.f-lines(1);
4+
display: flex;
5+
align-items: center;
6+
padding: 0px 8px;
7+
i {
8+
margin-right: 10px;
9+
color: var(--color-error-text);
10+
}
11+
}
12+
13+
.modal{
14+
:global{
15+
.ant-modal-content{
16+
max-height: 80vh;
17+
display: flex;
18+
flex-direction: column;
19+
.ant-modal-header,.ant-modal-footer{
20+
flex-shrink: 0;
21+
}
22+
.ant-modal-body{
23+
flex: 1;
24+
height: 0;
25+
overflow-y: auto;
26+
}
27+
}
28+
}
529
}
630

731
.description {
8-
display: flex;
32+
.f-lines(2);
33+
word-break: break-all;
34+
padding: 0px 10px;
35+
}
936

10-
button {
11-
padding: 4px 0;
12-
}
37+
.notification{
38+
z-index: 999 !important;
39+
width: 300px !important;
40+
font-size: 12px !important;
41+
padding: 4px !important;
42+
:global{
43+
.ant-notification-notice-close{
44+
top: 8px !important;
45+
inset-inline-end: 8px !important;
46+
}
47+
}
1348
}

‎chat2db-client/src/components/MyNotification/index.tsx‎

Lines changed: 59 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { Button, ConfigProvider, Modal, notification, } from 'antd';
2-
import React from 'react'
1+
import React, { useCallback, useEffect, useState } from 'react'
2+
import { Button, ConfigProvider, Modal, notification, Space } from 'antd';
33
import styles from './index.less'
44
import i18n from '@/i18n';
55
import { IconType } from 'antd/es/notification/interface';
6-
// import { staticNotification } from '@/layouts'
6+
import Iconfont from '../Iconfont';
77

88
interface IProps {
99
type?: IconType;
@@ -18,33 +18,68 @@ interface IProps {
1818
solutionLink: string;
1919
}
2020

21-
function MyNotification(props: IProps) {
22-
const { errorCode, errorMessage, errorDetail, solutionLink } = props;
21+
function MyNotification() {
22+
const [notificationApi, notificationDom] = notification.useNotification({
23+
maxCount: 2
24+
});
25+
const [open, setOpen] = useState(false);
26+
const [props, setProps] = useState<IProps>()
2327

24-
const type = props.type || 'warning';
25-
const title = `${errorCode}:${errorMessage}`;
26-
const message = props.message || <div className={styles.message}>{errorCode}:{errorMessage || 'Error'}</div>
28+
window._notificationApi = useCallback((props: IProps) => {
29+
const { errorCode, errorMessage, errorDetail, solutionLink } = props;
30+
setProps(props);
31+
const btn = (
32+
<Space>
33+
<Button type="link" size="small" onClick={() => {
34+
setOpen(true);
35+
}}>
36+
{i18n('common.notification.detial')}
37+
</Button>
38+
<Button type="link" size="small" target='_blank' href={solutionLink}>
39+
{i18n('common.notification.solution')}
40+
</Button>
41+
</Space>
42+
);
2743

28-
const description = <div className={styles.description}>
29-
<Button style={{ 'marginRight': '8px' }} type='link' onClick={() => {
30-
Modal.info({
31-
width: 620,
32-
title,
33-
content: errorDetail
34-
})
35-
}}>{i18n('common.notification.detial')}</Button>
36-
<Button type='link' target='_blank' href={solutionLink}>{i18n('common.notification.solution')}</Button>
37-
</div >
44+
const renderDescription = () => {
45+
return <div className={styles.description}>
46+
{props.errorCode}{props.errorCode}{props.errorCode}{props.errorCode}
47+
</div>
48+
}
3849

50+
const renderMessage = () => {
51+
return <div className={styles.message}>
52+
<Iconfont code='&#xe60c;' />
53+
Error
54+
</div>
55+
}
3956

40-
return notification.open({
41-
...props,
42-
type,
43-
message,
44-
description,
45-
})
57+
notificationApi.open({
58+
className: styles.notification,
59+
message: renderMessage(),
60+
description: renderDescription(),
61+
placement: 'bottomRight',
62+
btn,
63+
duration: null,
64+
})
65+
}, [])
4666

4767

68+
return <>
69+
{notificationDom}
70+
<Modal
71+
className={styles.modal}
72+
open={open}
73+
title={props?.errorCode}
74+
width='70vw'
75+
footer={[]}
76+
onCancel={() => {
77+
setOpen(false)
78+
}}
79+
>
80+
{props?.errorDetail}
81+
</Modal>
82+
</>
4883
}
4984

5085
export default MyNotification;

‎chat2db-client/src/hooks/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
export * from './useTheme';
22
export * from './useUpdateEffect';
3-
export * from './useEventSource'
3+
export * from './useEventSource';

‎chat2db-client/src/layouts/index.tsx‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
11
import React, { useEffect, useLayoutEffect } from 'react';
22
import i18n from '@/i18n';
33
import { Outlet } from 'umi';
4-
import { ConfigProvider, theme, App, Button, Spin } from 'antd';
4+
import { ConfigProvider, theme, App, Button, Spin, notification } from 'antd';
55
import { useState } from 'react';
66
import { v4 as uuidv4 } from 'uuid';
77
import { getAntdThemeConfig } from '@/theme';
88
import { IVersionResponse } from '@/typings';
9-
import classnames from 'classnames';
10-
import LoadingLiquid from '@/components/Loading/LoadingLiquid';
11-
import Setting from '@/blocks/Setting';
129
import miscService from '@/service/misc';
1310

1411
import antdEnUS from 'antd/locale/en_US';
@@ -22,9 +19,7 @@ import { getLang, getPrimaryColor, getTheme, setLang } from '@/utils/localStorag
2219
import { clearOlderLocalStorage } from '@/utils';
2320
import registerMessage from './init/registerMessage';
2421
import registerNotification from './init/registerNotification';
25-
import { NotificationInstance } from 'antd/es/notification/interface';
26-
import { ModalStaticFunctions } from 'antd/es/modal/confirm';
27-
22+
import MyNotification from '@/components/MyNotification';
2823
declare global {
2924
interface Window {
3025
_Lang: string;
@@ -33,6 +28,7 @@ declare global {
3328
_BaseURL: string;
3429
_AppThemePack: { [key in string]: string };
3530
_appGatewayParams: IVersionResponse;
31+
_notificationApi: any;
3632
}
3733
const __APP_VERSION__: string;
3834
const __BUILD_TIME__: string;
@@ -79,17 +75,12 @@ export default function Layout() {
7975
/** 重启次数 */
8076
const restartCount = 200;
8177

82-
let staticNotification: NotificationInstance;
83-
8478
function AppContainer() {
8579
const { token } = useToken();
8680
const [initEnd, setInitEnd] = useState(false);
8781
const [appTheme, setAppTheme] = useTheme();
8882
const [startSchedule, setStartSchedule] = useState(1); // 0 初始状态 1 服务启动中 2 启动成功
8983
const [serviceFail, setServiceFail] = useState(false);
90-
const { notification } = App.useApp();
91-
92-
// staticNotification = staticFunction.notification
9384

9485
useEffect(() => {
9586
let date = new Date('2030-12-30 12:30:00').toUTCString();
@@ -212,6 +203,8 @@ function AppContainer() {
212203
{startSchedule === 2 && <Outlet />}
213204
</div>
214205
)}
206+
{/* 全局的弹窗 */}
207+
<MyNotification></MyNotification>
215208
</div>
216209
);
217210
}

‎chat2db-client/src/layouts/init/registerNotification.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@ export default () => {
44
notification.config({
55
placement: 'BottomRight',
66
maxCount: 2,
7-
duration: 0,
7+
duration: null,
88
});
99
};

‎chat2db-client/src/pages/main/workspace/components/WorkspaceLeft/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -375,7 +375,7 @@ const RenderSaveBox = dvaModel(function (props: any) {
375375
type: 'workspace/fetchGetSavedConsole',
376376
payload: {
377377
status: ConsoleStatus.RELEASE,
378-
orderByDesc: true,
378+
orderByDesc: false,
379379
...curWorkspaceParams
380380
},
381381
callback: (res: any) => {

‎chat2db-client/src/pages/main/workspace/components/WorkspaceRight/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,7 @@ const WorkspaceRight = memo<IProps>(function (props) {
178178
payload: {
179179
pageNo: 1,
180180
pageSize: 999,
181+
orderByDesc: false,
181182
status: ConsoleStatus.RELEASE,
182183
...curWorkspaceParams,
183184
},

‎chat2db-client/src/service/base.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -173,12 +173,12 @@ export default function createRequest<P = void, R = {}>(url: string, options?: I
173173
const { success, errorCode, errorMessage, errorDetail, solutionLink, data } = res;
174174
if (!success && errorLevel === 'toast' && !noNeedToastErrorCode.includes(errorCode)) {
175175
delayTimeFn(() => {
176-
ErrorNotification({
176+
window._notificationApi({
177177
errorCode,
178178
errorMessage,
179179
errorDetail,
180180
solutionLink,
181-
});
181+
})
182182
// message.error(`${errorCode}: ${errorMessage}`);
183183
reject(`${errorCode}: ${errorMessage}`);
184184
}, delayTime);

‎chat2db-client/src/styles/antd.less‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -18,28 +18,28 @@
1818
border-top: 0px;
1919
}
2020

21-
.ant-notification-notice {
22-
background-color: var(--color-bg-elevated) !important;
23-
padding: 8px 8px 8px 16px !important;
24-
width: 280px !important;
21+
// .ant-notification-notice {
22+
// background-color: var(--color-bg-elevated) !important;
23+
// padding: 8px 8px 8px 16px !important;
24+
// width: 280px !important;
2525

26-
.ant-notification-notice-icon {
27-
font-size: 16px !important;
28-
top: 12px !important;
29-
}
26+
// .ant-notification-notice-icon {
27+
// font-size: 16px !important;
28+
// top: 12px !important;
29+
// }
3030

31-
.ant-notification-notice-message {
32-
font-size: 14px !important;
33-
color: var(--color-text) !important;
34-
}
31+
// .ant-notification-notice-message {
32+
// font-size: 14px !important;
33+
// color: var(--color-text) !important;
34+
// }
3535

36-
.ant-notification-notice-close {
37-
font-size: 12px !important;
38-
color: var(--color-text) !important;
39-
width: 16px !important;
40-
height: 16px !important;
41-
top: 10px !important;
42-
}
43-
}
36+
// .ant-notification-notice-close {
37+
// font-size: 12px !important;
38+
// color: var(--color-text) !important;
39+
// width: 16px !important;
40+
// height: 16px !important;
41+
// top: 10px !important;
42+
// }
43+
// }
4444
}
4545
}

0 commit comments

Comments
 (0)