feat: 工作空间适配大屏幕

react-ui/src/pages/Workspace/components/QuickStart/index.less

@@ -25,14 +25,13 @@
 
     &__canvas {
       position: relative;
-      width: 1223px;
+      // width: 1223px;
+      width: 100%;
       height: 610px;
       transform-origin: center left;
 
       &__model {
         position: absolute;
-        top: 358px;
-        left: 920px;
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -42,8 +41,6 @@
 
       &__task {
         position: absolute;
-        top: 110px;
-        left: 603px;
         display: flex;
         align-items: center;
         justify-content: center;

react-ui/src/pages/Workspace/components/QuickStart/index.tsx

@@ -9,22 +9,36 @@ import styles from './index.less';
 function QuickStart() {
   const navgite = useNavigate();
   const [scale, setScale] = useState(1);
+  const [space, setSpace] = useState(36);
 
   useEffect(() => {
     const changeScale = () => {
-      const width = document.body.offsetWidth - 256 - 80 - 60 - 326 - 15 - 8;
-      const ratio = width >= 1223 ? 1 : width / 1223;
-      setScale(ratio);
+      // body 的宽度 - 菜单的宽度 - 两个 padding - 右边用户管理的宽度 - 右边用户管理的 marginLeft,
+      const width = document.body.offsetWidth - 256 - 80 - 60 - 326 - 15;
+      if (width >= 1223) {
+        const spaceX = (width - 192 * 5 - 60) / 7;
+        setSpace(spaceX);
+        setScale(1.0);
+      } else {
+        const ratio = width / 1223;
+        setScale(ratio);
+      }
     };
 
     const debounceFunc = debounce(changeScale, 16);
     window.addEventListener('resize', debounceFunc);
-
+    changeScale();
     return () => {
       window.removeEventListener('resize', debounceFunc);
     };
   }, []);
 
+  const arrowWidth = space - 12;
+  const left = space;
+  const taskWholeWidth = 192 - 56 + 90 + space - 143;
+  const taskLeftArrowWidth = taskWholeWidth * (56 / (56 + 49));
+  const taskRightArrowWidth = taskWholeWidth * (49 / (56 + 49));
+
   return (
     <div className={styles['quick-start']}>
       <div className={styles['quick-start__title']}>快速开始</div>
@@ -37,7 +51,7 @@ function QuickStart() {
             content="为开发者提供数据智能标注与数据回流服务"
             buttonText="数据准备"
             buttonTop={40}
-            x={20}
+            x={left}
             y={309}
             onClick={() => navgite('/datasetPreparation/datasetAnnotation')}
           />
@@ -45,7 +59,7 @@ function QuickStart() {
             content="为开发者提供定制化编辑器，开发者可根据自己需求选择配置，保存编译器中的调试环境为镜像供训练使用"
             buttonText="开发环境"
             buttonTop={20}
-            x={248}
+            x={left + 192 + space}
             y={301}
             onClick={() => navgite('/developmentEnvironment')}
           />
@@ -54,7 +68,7 @@ function QuickStart() {
             tips="可视化建模Designer"
             buttonText="流水线"
             buttonTop={20}
-            x={476}
+            x={left + 2 * (192 + space)}
             y={276}
             onClick={() => navgite('/pipeline/pipelineText')}
           />
@@ -62,7 +76,7 @@ function QuickStart() {
             content="开发者可以在这里运行流水线模板，产生实验实例，对比实验训练过程与产生的实验训练数据"
             buttonText="实验"
             buttonTop={40}
-            x={699}
+            x={left + 3 * (192 + space)}
             y={295}
             onClick={() => navgite('/pipeline/experimentText')}
           />
@@ -71,70 +85,76 @@ function QuickStart() {
             tips="模型在线服务"
             buttonText="模型在线部署"
             buttonTop={20}
-            x={1010}
+            x={left + 4 * (192 + space) + 60 + space}
             y={263}
             onClick={() => navgite('/modelDseployment')}
           />
-          <div className={styles['quick-start__content__canvas__model']}>
+          <div
+            className={styles['quick-start__content__canvas__model']}
+            style={{ top: '358px', left: left + 4 * (192 + space) + 'px' }}
+          >
             <KFIcon type="icon-moxingguanli" font={38} />
             <span>模型管理</span>
           </div>
-          <div className={styles['quick-start__content__canvas__task']}>
+          <div
+            className={styles['quick-start__content__canvas__task']}
+            style={{ top: '110px', left: left + 2 * (192 + space) + 56 + taskLeftArrowWidth + 16 }}
+          >
             <KFIcon type="icon-tiaoduguanli" font={13} style={{ marginRight: '5px' }} />
             <span>任务自动调度</span>
           </div>
           <WorkArrow
-            x={213}
+            x={left + 192 + 1}
             y={378}
-            width={22}
+            width={arrowWidth}
             height={1}
-            arrowLeft={22}
+            arrowLeft={arrowWidth}
             arrorwTop={-4}
             borderBottom={1}
           />
           <WorkArrow
-            x={441}
+            x={left + 2 * 192 + space + 1}
             y={378}
-            width={22}
+            width={arrowWidth}
             height={1}
-            arrowLeft={22}
+            arrowLeft={arrowWidth}
             arrorwTop={-4}
             borderBottom={1}
           />
           <WorkArrow
-            x={893}
+            x={left + 4 * 192 + 3 * space + 1}
             y={378}
-            width={22}
+            width={arrowWidth + 10}
             height={1}
-            arrowLeft={22}
+            arrowLeft={arrowWidth + 10}
             arrorwTop={-4}
             borderBottom={1}
           />
           <WorkArrow
-            x={974}
+            x={left + 4 * 192 + 60 + 4 * space + 1 - 10}
             y={378}
-            width={22}
+            width={arrowWidth + 10}
             height={1}
-            arrowLeft={22}
+            arrowLeft={arrowWidth + 10}
             arrorwTop={-4}
             borderBottom={1}
           />
           <WorkArrow
-            x={532}
+            x={left + 2 * (192 + space) + 56}
             y={139}
-            width={54}
+            width={taskLeftArrowWidth}
             height={125}
-            arrowLeft={54}
+            arrowLeft={taskLeftArrowWidth}
             arrorwTop={-4}
             borderLeft={1}
             borderTop={1}
           />
           <WorkArrow
-            x={740}
+            x={left + 2 * (192 + space) + 56 + taskLeftArrowWidth + 16 + 131 + 6}
             y={127}
-            width={49}
+            width={taskRightArrowWidth}
             height={156}
-            arrowLeft={44}
+            arrowLeft={taskRightArrowWidth - 5}
             arrorwTop={156}
             arrrowAngle={90}
             borderRight={1}