Feat: edit and view - support simulated Android device preview

src/components/Playground/Output/Preview/Render.tsx

@@ -1,19 +1,30 @@
+import { ChangeEvent } from 'react'
 import '@/components/Playground/Output/Preview/render.scss'
+import { COLOR_FONT_MAIN } from '@/constants/common.constants'
 import iframeRaw from '@/components/Playground/Output/Preview/iframe.html?raw'
+import HideScrollbar from '@/components/common/HideScrollbar'
 
 interface RenderProps {
     iframeKey: string
     compiledCode: string
+    mobileMode?: boolean
 }
 
 interface IMessage {
-    type: 'LOADED' | 'ERROR' | 'UPDATE' | 'DONE'
+    type: 'LOADED' | 'ERROR' | 'UPDATE' | 'DONE' | 'SCALE'
     msg: string
     data: {
-        compiledCode: string
+        compiledCode?: string
+        zoom?: number
     }
 }
 
+interface IDevice {
+    name: string
+    width: number
+    height: number
+}
+
 const getIframeUrl = (iframeRaw: string) => {
     const shimsUrl = '//unpkg.com/es-module-shims/dist/es-module-shims.js'
     // 判断浏览器是否支持esm ，不支持esm就引入es-module-shims
@@ -29,9 +40,112 @@ const getIframeUrl = (iframeRaw: string) => {
 
 const iframeUrl = getIframeUrl(iframeRaw)
 
-const Render = ({ iframeKey, compiledCode }: RenderProps) => {
+const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) => {
     const iframeRef = useRef<HTMLIFrameElement>(null)
     const [loaded, setLoaded] = useState(false)
+    const [selectedDevice, setSelectedDevice] = useState('Pixel 7')
+    const [zoom, setZoom] = useState(1)
+    const [isRotate, setIsRotate] = useState(false)
+
+    const devices: IDevice[] = [
+        {
+            name: 'iPhone SE',
+            width: 375,
+            height: 667
+        },
+        {
+            name: 'iPhone XR',
+            width: 414,
+            height: 896
+        },
+        {
+            name: 'iPhone 12 Pro',
+            width: 390,
+            height: 844
+        },
+        {
+            name: 'iPhone 14 Pro Max',
+            width: 430,
+            height: 932
+        },
+        {
+            name: 'Pixel 7',
+            width: 412,
+            height: 915
+        },
+        {
+            name: 'Samsung Galaxy S8+',
+            width: 360,
+            height: 740
+        },
+        {
+            name: 'Samsung Galaxy S20 Ultra',
+            width: 412,
+            height: 915
+        },
+        {
+            name: 'iPad Mini',
+            width: 768,
+            height: 1024
+        },
+        {
+            name: 'iPad Air',
+            width: 820,
+            height: 1180
+        },
+        {
+            name: 'iPad Pro',
+            width: 1024,
+            height: 1366
+        },
+        {
+            name: 'Surface Pro 7',
+            width: 912,
+            height: 1368
+        },
+        {
+            name: 'Surface Duo',
+            width: 540,
+            height: 720
+        },
+        {
+            name: 'Galaxy Fold',
+            width: 280,
+            height: 653
+        },
+        {
+            name: 'Asus Zenbook Fold',
+            width: 853,
+            height: 1280
+        },
+        {
+            name: 'Samsung Galaxy A51/71',
+            width: 412,
+            height: 914
+        },
+        {
+            name: 'Nest Hub',
+            width: 1024,
+            height: 600
+        },
+        {
+            name: 'Nest Hub Max',
+            width: 1280,
+            height: 800
+        }
+    ]
+
+    const handleOnChangeDevice = (e: ChangeEvent<HTMLSelectElement>) => {
+        setSelectedDevice(e.target.value)
+    }
+
+    const handleOnChangeZoom = (e: ChangeEvent<HTMLInputElement>) => {
+        setZoom(Number(e.target.value))
+    }
+
+    const handleOnRotateDevice = () => {
+        setIsRotate(!isRotate)
+    }
 
     useEffect(() => {
         if (loaded) {
@@ -43,9 +157,88 @@ const Render = ({ iframeKey, compiledCode }: RenderProps) => {
                 '*'
             )
         }
-    }, [compiledCode, loaded])
+    }, [loaded, compiledCode])
 
-    return (
+    useEffect(() => {
+        if (loaded) {
+            iframeRef.current?.contentWindow?.postMessage(
+                {
+                    type: 'SCALE',
+                    data: { zoom: zoom }
+                } as IMessage,
+                '*'
+            )
+        }
+    }, [loaded, zoom])
+
+    return mobileMode ? (
+        <>
+            <HideScrollbar
+                className={'mobile-mode-background'}
+                isShowVerticalScrollbar
+                isShowHorizontalScrollbar
+                autoHideWaitingTime={1000}
+            >
+                <div className={'mobile-mode-content'} style={{ zoom }}>
+                    <div className={`device${isRotate ? ' rotate' : ''}`}>
+                        <div className={`device-header${isRotate ? ' rotate' : ''}`} />
+                        <div
+                            className={`device-content${isRotate ? ' rotate' : ''}`}
+                            style={{
+                                width: isRotate
+                                    ? devices.find((value) => value.name === selectedDevice)
+                                          ?.height ?? 915
+                                    : devices.find((value) => value.name === selectedDevice)
+                                          ?.width ?? 412,
+                                height: isRotate
+                                    ? devices.find((value) => value.name === selectedDevice)
+                                          ?.width ?? 412
+                                    : devices.find((value) => value.name === selectedDevice)
+                                          ?.height ?? 915
+                            }}
+                        >
+                            <iframe
+                                data-component={'playground-output-preview-render'}
+                                key={iframeKey}
+                                ref={iframeRef}
+                                src={iframeUrl}
+                                onLoad={() => setLoaded(true)}
+                                sandbox="allow-downloads allow-forms allow-modals allow-scripts"
+                            />
+                        </div>
+                        <div className={`device-footer${isRotate ? ' rotate' : ''}`} />
+                    </div>
+                </div>
+            </HideScrollbar>
+
+            <div className={'switch-device'}>
+                <IconOxygenMobile fill={COLOR_FONT_MAIN} />
+                <select value={selectedDevice} onChange={handleOnChangeDevice}>
+                    {devices.map((value) => (
+                        <option value={value.name}>{value.name}</option>
+                    ))}
+                </select>
+                <div className={'rotate-device'} title={'旋转屏幕'} onClick={handleOnRotateDevice}>
+                    {isRotate ? (
+                        <IconOxygenRotateRight fill={COLOR_FONT_MAIN} />
+                    ) : (
+                        <IconOxygenRotateLeft fill={COLOR_FONT_MAIN} />
+                    )}
+                </div>
+            </div>
+            <div className={'switch-zoom'}>
+                <IconOxygenZoom fill={COLOR_FONT_MAIN} />
+                <input
+                    type={'range'}
+                    min={0.5}
+                    max={2}
+                    step={0.1}
+                    value={zoom}
+                    onChange={handleOnChangeZoom}
+                />
+            </div>
+        </>
+    ) : (
         <iframe
             data-component={'playground-output-preview-render'}
             key={iframeKey}