[Optmization]Add welcome page auto width (DataLinkDC#4041)

Co-authored-by: gaoyan1998 <[email protected]>

dinky-web/src/pages/Other/Welcome/WelcomeItem/BaseConfigItem.tsx

@@ -61,7 +61,6 @@ const BaseConfigItem = (prop: WelcomeProps) => {
         </Button>
         <Link onClick={prop.onPrev}> {l('welcome.prev')}</Link>
       </div>
-      <WelcomePic1 size={500} />
     </Flex>
   );
 };

dinky-web/src/pages/Other/Welcome/WelcomeItem/FlinkConfigItem.tsx

@@ -72,7 +72,6 @@ const FlinkConfigItem = (prop: WelcomeProps) => {
 
         <Link onClick={prop.onPrev}> {l('welcome.prev')}</Link>
       </div>
-      <WelcomePic1 size={500} />
     </Flex>
   );
 };

dinky-web/src/pages/Other/Welcome/WelcomeItem/WelcomItem.tsx

@@ -59,7 +59,6 @@ const WelcomeItem = (prop: WelcomeProps) => {
           <Link onClick={() => prop.onNext()}>{l('welcome.welcome.skip')}</Link>
         </Flex>
       </div>
-      <WelcomePic1 size={500} />
     </Flex>
   );
 };

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,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() };
@@ -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>