From baa493b273d43a5da9b435014ab761d92d5212ef Mon Sep 17 00:00:00 2001
From: cp3hnu <cp3hnu@gmail.com>
Date: Mon, 13 May 2024 15:48:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B7=A5=E4=BD=9C=E7=A9=BA=E9=97=B4?=
 =?UTF-8?q?=E9=80=82=E9=85=8D=E5=A4=A7=E5=B1=8F=E5=B9=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/Workspace/components/QuickStart/index.less |  3 +--
 .../pages/Workspace/components/QuickStart/index.tsx  | 12 ++++++++----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/react-ui/src/pages/Workspace/components/QuickStart/index.less b/react-ui/src/pages/Workspace/components/QuickStart/index.less
index 93ce8d54..4fba7728 100644
--- a/react-ui/src/pages/Workspace/components/QuickStart/index.less
+++ b/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;
       }
diff --git a/react-ui/src/pages/Workspace/components/QuickStart/index.tsx b/react-ui/src/pages/Workspace/components/QuickStart/index.tsx
index 7e1bccf5..d7078a6c 100644
--- a/react-ui/src/pages/Workspace/components/QuickStart/index.tsx
+++ b/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="为开发者提供数据智能标注与数据回流服务"