feat: 工作空间适配大屏幕

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

@@ -25,8 +25,6 @@
 
     &__canvas {
       position: relative;
-      // width: 1223px;
-      width: 100%;
       height: 610px;
       transform-origin: center left;
 
@@ -35,6 +33,7 @@
         display: flex;
         flex-direction: column;
         align-items: center;
+        width: 60px;
         color: @primary-color;
         font-size: @font-size;
       }

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

@@ -9,18 +9,22 @@ import styles from './index.less';
 function QuickStart() {
   const navgite = useNavigate();
   const [scale, setScale] = useState(1);
-  const [space, setSpace] = useState(36);
+  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;
+      // body 的宽度 - 菜单的宽度 - 两个 padding - 右边用户管理的宽度 - 右边用户管理的 marginLeft - 滚动条的宽度,
+      const width = document.body.offsetWidth - 256 - 80 - 60 - 326 - 15 - 8;
       if (width >= 1223) {
         const spaceX = (width - 192 * 5 - 60) / 7;
         setSpace(spaceX);
+        setCanvasWidth('100%');
         setScale(1.0);
       } else {
         const ratio = width / 1223;
+        setCanvasWidth('1223px');
+        setSpace(29);
         setScale(ratio);
       }
     };
@@ -45,7 +49,7 @@ function QuickStart() {
       <div className={styles['quick-start__content']}>
         <div
           className={styles['quick-start__content__canvas']}
-          style={{ transform: `scale(${scale})` }}
+          style={{ transform: `scale(${scale})`, width: canvasWidth }}
         >
           <WorkFlow
             content="为开发者提供数据智能标注与数据回流服务"