Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Optmization]Add welcome page auto width #4041

Merged
merged 2 commits into from
Dec 12, 2024
Merged

[Optmization]Add welcome page auto width #4041

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9280630
Add welcome page auto width
gaoyan1998 Dec 12, 2024
9ab82b0
Spotless Apply
gaoyan1998 Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion dinky-web/src/pages/Other/Welcome/WelcomeItem/BaseConfigItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,6 @@ const BaseConfigItem = (prop: WelcomeProps) => {
</Button>
<Link onClick={prop.onPrev}> {l('welcome.prev')}</Link>
</div>
<WelcomePic1 size={500} />
</Flex>
);
};
Expand Down
1 change: 0 additions & 1 deletion dinky-web/src/pages/Other/Welcome/WelcomeItem/FlinkConfigItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,6 @@ const FlinkConfigItem = (prop: WelcomeProps) => {

<Link onClick={prop.onPrev}> {l('welcome.prev')}</Link>
</div>
<WelcomePic1 size={500} />
</Flex>
);
};
Expand Down
1 change: 0 additions & 1 deletion dinky-web/src/pages/Other/Welcome/WelcomeItem/WelcomItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,6 @@ const WelcomeItem = (prop: WelcomeProps) => {
<Link onClick={() => prop.onNext()}>{l('welcome.welcome.skip')}</Link>
</Flex>
</div>
<WelcomePic1 size={500} />
</Flex>
);
};
Expand Down
47 changes: 38 additions & 9 deletions dinky-web/src/pages/Other/Welcome/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@
*
*/

import { Flex, Form } from 'antd';
import { useState } from 'react';
import { Flex, Form, Space } from 'antd';
import { useEffect, useState } from 'react';
import WelcomeItem from '@/pages/Other/Welcome/WelcomeItem/WelcomItem';
import BaseConfigItem from '@/pages/Other/Welcome/WelcomeItem/BaseConfigItem';
import FlinkConfigItem from '@/pages/Other/Welcome/WelcomeItem/FlinkConfigItem';
Expand All @@ -29,6 +29,7 @@ import { API_CONSTANTS } from '@/services/endpoints';
import { GLOBAL_SETTING_KEYS } from '@/types/SettingCenter/data';
import { postAll } from '@/services/api';
import { sleep } from '@antfu/utils';
import { WelcomePic1 } from '@/components/Icons/WelcomeIcons';

const boxStyle: React.CSSProperties = {
width: '100%',
Expand All @@ -46,13 +47,38 @@ const Welcome = () => {
const [form] = Form.useForm();
const [formData, setFormData] = useState({});
const [current, setCurrent] = useState(0);
const [bodyWidth, setBodyWidth] = useState('50%');
const [showLogoImg, setShowLogoImg] = useState(true);

const { data, loading } = useRequest(API_CONSTANTS.GET_NEEDED_CFG);

const setCfgReq = useRequest((params) => postAll(API_CONSTANTS.SET_INIT_CFG, params), {
manual: true
});

useEffect(() => {
handleWindowResize({ target: window });
window.addEventListener('resize', handleWindowResize);
return () => {
window.removeEventListener('resize', handleWindowResize);
};
}, []);

const handleWindowResize = (e: any) => {
var isShowImg = true;
if (e.target.innerWidth > 1730) {
setBodyWidth('50%');
} else if (e.target.innerWidth > 1440) {
setBodyWidth('60%');
} else if (e.target.innerWidth > 1230) {
setBodyWidth('70%');
} else {
setBodyWidth('90%');
isShowImg = false;
}
setShowLogoImg(isShowImg);
};

const next = () => {
setFormData((prev) => {
return { ...prev, ...form.getFieldsValue() };
Expand All @@ -71,16 +97,19 @@ const Welcome = () => {

return (
<Flex style={boxStyle} justify={'center'} align={'center'}>
<div style={{ height: '60vh', background: 'white', width: '50%' }}>
<div style={{ height: '60vh', background: 'white', width: bodyWidth }}>
{loading ? (
<div>loading</div>
) : (
<Form form={form} initialValues={data} layout='vertical'>
{current == 0 && <WelcomeItem onNext={next} onPrev={prev} />}
{current == 1 && <BaseConfigItem onNext={next} onPrev={prev} />}
{current == 2 && <FlinkConfigItem onNext={next} onPrev={prev} onSubmit={submit} />}
{current == 3 && <FinishPage />}
</Form>
<Space>
<Form form={form} initialValues={data} layout='vertical'>
{current == 0 && <WelcomeItem onNext={next} onPrev={prev} />}
{current == 1 && <BaseConfigItem onNext={next} onPrev={prev} />}
{current == 2 && <FlinkConfigItem onNext={next} onPrev={prev} onSubmit={submit} />}
{current == 3 && <FinishPage />}
</Form>
{showLogoImg && <WelcomePic1 size={500} />}
</Space>
)}
</div>
</Flex>
Expand Down
Loading