diff --git a/src/renderer/src/assets/css/components/common/hide-scrollbar.scss b/src/renderer/src/assets/css/components/common/hide-scrollbar.scss index 32fcf8d..80f9463 100644 --- a/src/renderer/src/assets/css/components/common/hide-scrollbar.scss +++ b/src/renderer/src/assets/css/components/common/hide-scrollbar.scss @@ -14,8 +14,8 @@ -ms-overflow-style: none; .hide-scrollbar-content { - display: inline-block; - width: 100%; + width: fit-content; + min-width: 100%; } } diff --git a/src/renderer/src/assets/css/pages/tools/view.scss b/src/renderer/src/assets/css/pages/tools/view.scss index c5cb6a9..6caa46f 100644 --- a/src/renderer/src/assets/css/pages/tools/view.scss +++ b/src/renderer/src/assets/css/pages/tools/view.scss @@ -2,6 +2,7 @@ padding: 20px; .card-box { + position: relative; height: 100%; width: 100%; } diff --git a/src/renderer/src/assets/svg/arrowDown.svg b/src/renderer/src/assets/svg/arrowDown.svg new file mode 100644 index 0000000..55da18e --- /dev/null +++ b/src/renderer/src/assets/svg/arrowDown.svg @@ -0,0 +1 @@ + diff --git a/src/renderer/src/assets/svg/rotateLeft.svg b/src/renderer/src/assets/svg/rotateLeft.svg new file mode 100644 index 0000000..4805887 --- /dev/null +++ b/src/renderer/src/assets/svg/rotateLeft.svg @@ -0,0 +1 @@ + diff --git a/src/renderer/src/assets/svg/rotateRight.svg b/src/renderer/src/assets/svg/rotateRight.svg new file mode 100644 index 0000000..3dfbfd1 --- /dev/null +++ b/src/renderer/src/assets/svg/rotateRight.svg @@ -0,0 +1 @@ + diff --git a/src/renderer/src/assets/svg/zoom.svg b/src/renderer/src/assets/svg/zoom.svg new file mode 100644 index 0000000..00ac81b --- /dev/null +++ b/src/renderer/src/assets/svg/zoom.svg @@ -0,0 +1 @@ + diff --git a/src/renderer/src/components/Playground/Output/Preview/Render.tsx b/src/renderer/src/components/Playground/Output/Preview/Render.tsx index 8f803cb..2965bf0 100644 --- a/src/renderer/src/components/Playground/Output/Preview/Render.tsx +++ b/src/renderer/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(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) => { + setSelectedDevice(e.target.value) + } + + const handleOnChangeZoom = (e: ChangeEvent) => { + 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 ? ( + <> + +
+
+
+
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 + }} + > +