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

import KFIcon from '@/components/KFIcon';
import { useNavigate } from '@umijs/max';
import { debounce } from 'lodash';
import { useEffect, useState } from 'react';
import WorkArrow from './WorkArrow';
import WorkFlow from './WorkFlow';
import styles from './index.less';

function QuickStart() {
  const navigate = useNavigate();
  const [scale, setScale] = useState(1);
  const [space, setSpace] = useState(29);
  const [canvasWidth, setCanvasWidth] = useState('100%');

  useEffect(() => {
    const changeScale = () => {
      // body 的宽度 - 菜单的宽度 - 两个 padding - 右边用户管理的宽度 - 右边用户管理的 marginLeft - 滚动条的宽度,
      const width = document.body.offsetWidth - 256 - 80 - 60 - 326 - 15 - 8;
      if (width >= 1002) {
        const spaceX = (width - 192 * 4 - 60) / 6;
        setSpace(spaceX);
        setCanvasWidth('100%');
        setScale(1.0);
      } else {
        const ratio = width / 1002;
        setCanvasWidth('1223px');
        setSpace(29);
        setScale(ratio);
      }
    };

    changeScale();

    const debounceFunc = debounce(changeScale, 16);
    window.addEventListener('resize', debounceFunc);
    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>
      <div className={styles['quick-start__content']}>
        <div
          className={styles['quick-start__content__canvas']}
          style={{ transform: `scale(${scale})`, width: canvasWidth }}
        >
          <WorkFlow
            content="为开发者提供数据智能标注与数据回流服务"
            buttonText="数据准备"
            buttonTop={20}
            x={left}
            y={309}
            onClick={() => navigate('/datasetPreparation/datasetAnnotation')}
          />
          {/* <WorkFlow
            content="为开发者提供定制化编辑器，开发者可根据自己需求选择配置，保存编译器中的调试环境为镜像供训练使用"
            buttonText="开发环境"
            buttonTop={20}
            x={left + 192 + space}
            y={301}
            onClick={() => navigate('/developmentEnvironment')}
          /> */}
          <WorkFlow
            content="为开发者提供定制化编辑器，开发者可根据自己需求选择配置，保存编译器中的调试环境为镜像供训练使用"
            tips="可视化建模Designer"
            buttonText="流水线"
            buttonTop={20}
            x={left + 1 * (192 + space)}
            y={276}
            onClick={() => navigate('/pipeline/template')}
          />
          <WorkFlow
            content="开发者可以在这里运行流水线模板，产生实验实例，对比实验训练过程与产生的实验训练数据"
            buttonText="实验"
            buttonTop={20}
            x={left + 2 * (192 + space)}
            y={295}
            onClick={() => navigate('/pipeline/experiment')}
          />
          <WorkFlow
            content="支持异构硬件(CPU/GPU)的模型加载，高吞吐，低延迟；支持大规模复杂模型的一键部署，实时弹性扩缩容；提供完整的运维监控体系。"
            tips="模型在线服务"
            buttonText="模型在线部署"
            buttonTop={20}
            x={left + 3 * (192 + space) + 60 + space}
            y={263}
            onClick={() => navigate('/dataset/modelDeployment')}
          />
          <div
            className={styles['quick-start__content__canvas__model']}
            style={{ top: '358px', left: left + 3 * (192 + space) + 'px' }}
          >
            <KFIcon type="icon-moxingguanli" font={38} />
            <span>模型管理</span>
          </div>
          <div
            className={styles['quick-start__content__canvas__task']}
            style={{ top: '110px', left: left + 1 * (192 + space) + 56 + taskLeftArrowWidth + 16 }}
          >
            <KFIcon type="icon-tiaoduguanli" font={13} style={{ marginRight: '5px' }} />
            <span>任务自动调度</span>
          </div>
          <WorkArrow
            x={left + 192 + 1}
            y={378}
            width={arrowWidth}
            height={1}
            arrowLeft={arrowWidth}
            arrorwTop={-4}
            borderBottom={1}
          />
          {/* <WorkArrow
            x={left + 2 * 192 + space + 1}
            y={378}
            width={arrowWidth}
            height={1}
            arrowLeft={arrowWidth}
            arrorwTop={-4}
            borderBottom={1}
          /> */}
          <WorkArrow
            x={left + 3 * 192 + 2 * space + 1}
            y={378}
            width={arrowWidth + 10}
            height={1}
            arrowLeft={arrowWidth + 10}
            arrorwTop={-4}
            borderBottom={1}
          />
          <WorkArrow
            x={left + 3 * 192 + 60 + 3 * space + 1 - 10}
            y={378}
            width={arrowWidth + 10}
            height={1}
            arrowLeft={arrowWidth + 10}
            arrorwTop={-4}
            borderBottom={1}
          />
          <WorkArrow
            x={left + 1 * (192 + space) + 56}
            y={139}
            width={taskLeftArrowWidth}
            height={120}
            arrowLeft={taskLeftArrowWidth}
            arrorwTop={-4}
            borderLeft={1}
            borderTop={1}
          />
          <WorkArrow
            x={left + 1 * (192 + space) + 56 + taskLeftArrowWidth + 16 + 131 + 4}
            y={127}
            width={taskRightArrowWidth}
            height={156}
            arrowLeft={taskRightArrowWidth - 5}
            arrorwTop={156}
            arrrowAngle={90}
            borderRight={1}
            borderTop={1}
          />
        </div>
      </div>
    </div>
  );
}

export default QuickStart;