Skip to content

Commit c3cf89b

Browse files
shanhexishanhexi
committed
feat:Open screen animation
1 parent e526e81 commit c3cf89b

5 files changed

Lines changed: 93 additions & 18 deletions

File tree

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
.openScreenAnimation {
2+
position: absolute;
3+
top: 0;
4+
bottom: 0;
5+
left: 0;
6+
right: 0;
7+
display: flex;
8+
align-items: center;
9+
justify-content: center;
10+
// animation: disNone 0.666s 0.666s forwards;
11+
background-color: var(--color-bg-base);
12+
z-index: 100000;
13+
14+
.textImg{
15+
line-height: 40px;
16+
font-size: 45px;
17+
font-weight: bold;
18+
width: 200px;
19+
height: 40px;
20+
text-align: right;
21+
}
22+
23+
.brandName{
24+
width: 0;
25+
display: flex;
26+
justify-content: flex-end;
27+
overflow: hidden;
28+
animation: textAnimation 0.666s 0.333s ease-in-out forwards;
29+
}
30+
}
31+
32+
@keyframes textAnimation {
33+
0% {
34+
width: 0;
35+
}
36+
100% {
37+
width: 200px;
38+
}
39+
}
40+
41+
@keyframes disNone {
42+
0% {
43+
display: flex;
44+
}
45+
100% {
46+
display: none;
47+
}
48+
}

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React, { memo } from 'react';
2+
import styles from './index.less';
3+
import classnames from 'classnames';
4+
import BrandLogo from '@/components/BrandLogo'
5+
6+
interface IProps {
7+
className?: string;
8+
}
9+
10+
export default memo<IProps>((props) => {
11+
const { className } = props;
12+
return <div className={classnames(styles.openScreenAnimation, className)}>
13+
<BrandLogo size={80} className={styles.brandLogo} />
14+
<div className={styles.brandName}>
15+
<div className={styles.textImg}>
16+
Chat2DB
17+
</div>
18+
</div>
19+
</div>
20+
});

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ const usePollRequestService = ({ maxAttempts = 200, interval = 200, loopService
2222
const [serviceStatus, setServiceStatus] = useState<ServiceStatus>(ServiceStatus.PENDING);
2323
const [restart, setRestart] = useState(false);
2424
const attempts = useRef(0);
25+
const startupDate = useRef(new Date().getTime());
2526

2627
const serviceFn = async () => {
2728
// The first request fails. Start the service
@@ -35,7 +36,10 @@ const usePollRequestService = ({ maxAttempts = 200, interval = 200, loopService
3536
attempts.current = attempts.current + 1;
3637
loopService().then((res) => {
3738
if (res) {
38-
setServiceStatus(ServiceStatus.SUCCESS);
39+
const now = new Date().getTime();
40+
setTimeout(() => {
41+
setServiceStatus(ServiceStatus.SUCCESS);
42+
}, startupDate.current + 1000 - now);
3943
}
4044
})
4145
.catch(() => {

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

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import GlobalComponent from '../init/GlobalComponent';
1616
import styles from './index.less';
1717
import { useUserStore, queryCurUser } from '@/store/user';
1818
import AppTitleBar from '@/blocks/AppTitleBar';
19+
import OpenScreenAnimation from '@/components/OpenScreenAnimation';
1920

2021
const GlobalLayout = () => {
2122
const [appTheme, setAppTheme] = useTheme();
@@ -62,14 +63,14 @@ const GlobalLayout = () => {
6263
};
6364

6465
// 等待状态页面
65-
if (serviceStatus === ServiceStatus.PENDING || curUser === null) {
66-
return (
67-
<div className={styles.app}>
68-
<AppTitleBar className={styles.appTitleBar} />
69-
<Spin className={styles.loadingBox} size="large" />;
70-
</div>
71-
);
72-
}
66+
// if (serviceStatus === ServiceStatus.PENDING || curUser === null) {
67+
// return (
68+
// <div className={styles.app}>
69+
// <AppTitleBar className={styles.appTitleBar} />
70+
// <OpenScreenAnimation />
71+
// </div>
72+
// );
73+
// }
7374

7475
// 错误状态页面
7576
if (serviceStatus === ServiceStatus.FAILURE) {
@@ -99,6 +100,7 @@ const GlobalLayout = () => {
99100
return (
100101
<ConfigProvider locale={isEn ? antdEnUS : antdZhCN} theme={antdTheme}>
101102
<div className={styles.app}>
103+
{(serviceStatus === ServiceStatus.PENDING || curUser === null) && <OpenScreenAnimation />}
102104
<AppTitleBar className={styles.appTitleBar} />
103105
<div className={styles.appBody}>
104106
<Outlet />

‎chat2db-client/src/pages/demo/index.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import React, { useEffect } from 'react';
2+
import OpenScreenAnimation from '@/components/OpenScreenAnimation';
23

34
function Test() {
4-
const token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOjIsImRldmljZSI6ImRlZmF1bHQtZGV2aWNlIiwiZWZmIjoxNzA2ODU0NTMwMDI3LCJyblN0ciI6Ik1RcHRPOUVBVlJlbGRQa1RFN01MZUpLeG5KTGVwRFpaIn0.knOw08E6mwWF_GpkeQ8KflQlfQuNu4jd-_Bgh7EnCj4'
5-
useEffect(() => {
6-
const socket = new WebSocket(`ws://127.0.0.1:10821/api/ws/${token}`);
7-
socket.onopen = () => {
8-
console.log('open');
9-
socket.send('hello');
10-
};
11-
}, []);
12-
return (false);
5+
// const token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOjIsImRldmljZSI6ImRlZmF1bHQtZGV2aWNlIiwiZWZmIjoxNzA2ODU0NTMwMDI3LCJyblN0ciI6Ik1RcHRPOUVBVlJlbGRQa1RFN01MZUpLeG5KTGVwRFpaIn0.knOw08E6mwWF_GpkeQ8KflQlfQuNu4jd-_Bgh7EnCj4'
6+
// useEffect(() => {
7+
// const socket = new WebSocket(`ws://127.0.0.1:10821/api/ws/${token}`);
8+
// socket.onopen = () => {
9+
// console.log('open');
10+
// socket.send('hello');
11+
// };
12+
// }, []);
13+
return <OpenScreenAnimation />;
1314
}
1415

1516
export default Test;

0 commit comments

Comments
 (0)