diff --git a/dinky-web/src/pages/Other/Welcome/WelcomeItem/BaseConfigItem.tsx b/dinky-web/src/pages/Other/Welcome/WelcomeItem/BaseConfigItem.tsx index 50614b23fa..fa4e386501 100644 --- a/dinky-web/src/pages/Other/Welcome/WelcomeItem/BaseConfigItem.tsx +++ b/dinky-web/src/pages/Other/Welcome/WelcomeItem/BaseConfigItem.tsx @@ -61,7 +61,6 @@ const BaseConfigItem = (prop: WelcomeProps) => { {l('welcome.prev')} - ); }; diff --git a/dinky-web/src/pages/Other/Welcome/WelcomeItem/FlinkConfigItem.tsx b/dinky-web/src/pages/Other/Welcome/WelcomeItem/FlinkConfigItem.tsx index cfbce4d1c6..c851e840de 100644 --- a/dinky-web/src/pages/Other/Welcome/WelcomeItem/FlinkConfigItem.tsx +++ b/dinky-web/src/pages/Other/Welcome/WelcomeItem/FlinkConfigItem.tsx @@ -72,7 +72,6 @@ const FlinkConfigItem = (prop: WelcomeProps) => { {l('welcome.prev')} - ); }; diff --git a/dinky-web/src/pages/Other/Welcome/WelcomeItem/WelcomItem.tsx b/dinky-web/src/pages/Other/Welcome/WelcomeItem/WelcomItem.tsx index 873073b8ef..1580a47fb9 100644 --- a/dinky-web/src/pages/Other/Welcome/WelcomeItem/WelcomItem.tsx +++ b/dinky-web/src/pages/Other/Welcome/WelcomeItem/WelcomItem.tsx @@ -59,7 +59,6 @@ const WelcomeItem = (prop: WelcomeProps) => { prop.onNext()}>{l('welcome.welcome.skip')} - ); }; diff --git a/dinky-web/src/pages/Other/Welcome/index.tsx b/dinky-web/src/pages/Other/Welcome/index.tsx index e1e4b887f9..a2cb247ed1 100644 --- a/dinky-web/src/pages/Other/Welcome/index.tsx +++ b/dinky-web/src/pages/Other/Welcome/index.tsx @@ -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'; @@ -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%', @@ -46,6 +47,8 @@ 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); @@ -53,6 +56,29 @@ const Welcome = () => { 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() }; @@ -71,16 +97,19 @@ const Welcome = () => { return ( -
+
{loading ? (
loading
) : ( -
- {current == 0 && } - {current == 1 && } - {current == 2 && } - {current == 3 && } - + +
+ {current == 0 && } + {current == 1 && } + {current == 2 && } + {current == 3 && } + + {showLogoImg && } +
)}