fix windows preview width

package.json

@@ -88,6 +88,7 @@
     "@types/file-saver": "^2.0.1",
     "@types/node": "^14.6.2",
     "@types/react-color": "^3.0.4",
+    "@types/react-grid-layout": "^1.1.0",
     "@types/redux-logger": "^3.0.8",
     "@typescript-eslint/eslint-plugin": "4.1.1",
     "@typescript-eslint/parser": "4.1.1",

src/pages/editor/preview.js

@@ -1,79 +0,0 @@
-import React, { memo, useEffect, useState } from 'react';
-import GridLayout from 'react-grid-layout';
-import DynamicEngine from 'components/DynamicEngine';
-import req from '@/utils/req';
-import styles from './index.less';
-
-const isMac = navigator.platform.indexOf('Mac') === 0;
-
-const pcStyle = {
-  width: isMac ? 395 : 412,
-  margin: '20px auto',
-  border: '10px solid #000',
-  borderRadius: '20px',
-  height: '684px',
-  overflow: 'auto',
-};
-
-const PreviewPage = memo(props => {
-  const [pointData, setPointData] = useState(() => {
-    let pointDataStr = localStorage.getItem('pointData');
-    let points;
-
-    try {
-      points = JSON.parse(pointDataStr) || [];
-    } catch (err) {
-      points = [];
-    }
-    return points.map(item => ({
-      ...item,
-      point: { ...item.point, isDraggable: false, isResizable: false },
-    }));
-  });
-
-  const vw = window.innerWidth;
-
-  useEffect(() => {
-    const { tid } = props.location.query;
-    let timer = null;
-    req
-      .get('/visible/preview/get', { params: { tid } })
-      .then(res => {
-        setPointData(
-          res.map(item => ({
-            ...item,
-            point: { ...item.point, isDraggable: false, isResizable: false },
-          })),
-        );
-      })
-      .catch(err => {
-        timer = setTimeout(() => {
-          window.close();
-        }, 3000);
-      });
-    return () => {
-      window.clearTimeout(timer);
-    };
-  }, []);
-
-  return (
-    <div style={vw > 800 ? pcStyle : {}}>
-      <GridLayout
-        className={styles.layout}
-        cols={24}
-        rowHeight={2}
-        width={vw > 800 ? 375 : vw}
-        margin={[0, 0]}
-        id="xx"
-      >
-        {pointData.map(value => (
-          <div className={styles.dragItem} key={value.id} data-grid={value.point}>
-            <DynamicEngine {...value.item} />
-          </div>
-        ))}
-      </GridLayout>
-    </div>
-  );
-});
-
-export default PreviewPage;

src/pages/editor/preview.tsx

@@ -0,0 +1,87 @@
+import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
+import GridLayout from 'react-grid-layout';
+import DynamicEngine from 'components/DynamicEngine';
+import req from '@/utils/req';
+import styles from './index.less';
+import { useGetScrollBarWidth } from '@/utils/tool';
+import { LocationDescriptorObject } from 'history-with-query';
+
+const isMac = navigator.platform.indexOf('Mac') === 0;
+
+interface PreviewPageProps {
+  location: LocationDescriptorObject;
+}
+interface PointDataItem {
+  id: string;
+  item: Record<string, any>;
+  point: Record<string, any>;
+}
+
+const PreviewPage = memo((props: PreviewPageProps) => {
+  const [pointData, setPointData] = useState(() => {
+    let pointDataStr = localStorage.getItem('pointData');
+    let points;
+
+    try {
+      points = JSON.parse(pointDataStr!) || [];
+    } catch (err) {
+      points = [];
+    }
+    return points.map((item: PointDataItem) => ({
+      ...item,
+      point: { ...item.point, isDraggable: false, isResizable: false },
+    }));
+  });
+
+  const vw = window.innerWidth;
+
+  useEffect(() => {
+    const tid = props.location.query?.tid;
+    req
+      .get<any, PointDataItem[]>('/visible/preview/get', { params: { tid } })
+      .then(res => {
+        setPointData(
+          res.map(item => ({
+            ...item,
+            point: { ...item.point, isDraggable: false, isResizable: false },
+          })),
+        );
+      })
+      .catch(err => {
+        console.error(err);
+      });
+  }, [props.location.query]);
+
+  const ref = useRef<HTMLDivElement>(null);
+  const width = useGetScrollBarWidth(ref);
+  const pcStyle = useMemo(() => {
+    return {
+      width: isMac ? 395 : 375 + width,
+      margin: '20px auto',
+      border: '10px solid #000',
+      borderRadius: '20px',
+      height: '684px',
+      overflow: 'auto',
+    };
+  }, [width]);
+
+  return (
+    <div ref={ref} style={vw > 800 ? pcStyle : {}}>
+      <GridLayout
+        className={styles.layout}
+        cols={24}
+        rowHeight={2}
+        width={vw > 800 ? 375 : vw}
+        margin={[0, 0]}
+      >
+        {pointData.map((value: PointDataItem) => (
+          <div className={styles.dragItem} key={value.id} data-grid={value.point}>
+            <DynamicEngine {...(value.item as any)} />
+          </div>
+        ))}
+      </GridLayout>
+    </div>
+  );
+});
+
+export default PreviewPage;

src/utils/tool.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { RefObject, useEffect, useLayoutEffect, useState } from 'react';
 import { RGBColor } from 'react-color';
 
 // 生成uuid
@@ -52,3 +52,15 @@ export function useGetRect() {
   }, []);
   return rect;
 }
+
+export function useGetScrollBarWidth(ref: RefObject<HTMLElement>) {
+  const [width, setWidth] = useState(0);
+  useLayoutEffect(() => {
+    if (ref.current) {
+      const diff = ref.current.offsetWidth - ref.current.clientWidth;
+      console.log(diff);
+      setWidth(diff);
+    }
+  }, [ref]);
+  return width;
+}

yarn.lock

@@ -2217,6 +2217,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-grid-layout@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@types/react-grid-layout/-/react-grid-layout-1.1.0.tgz#6592d391d64b9efebd5588a6a8fbbb9040c30998"
+  integrity sha512-lnt4YEXRHWimtbrghVSq+Ug7ByQl9cROM/xJewjLNeuqrT4tnKGe4tXX/3+/xYANG96L57F4+G0qf8jCgvDxWA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-helmet@^6.1.0":
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.1.0.tgz#af586ed685f4905e2adc7462d1d65ace52beee7a"