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
) : (
-
+
+
+ {showLogoImg && }
+
)}