normal preview

src/App.js

@@ -1,32 +1,53 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import './App.css';
 import Pane from './Components/pane';
 import DeviceFrame from './Components/deviceFrame';
+import waterMarkPng from './images/water-mark.png'
 
 var mockProjects = [{"Name":"AN_战斗模拟","OldSlectType":"1|1|1","HtmlUrl":"PlayableData/AN_战斗模拟/index.html","TextObjStr":{"TopText":"无|无|无","MiddText":"无|无|无","CentText":"无|无|无"}},{"Name":"AN_美女被困","OldSlectType":"1|3|1","HtmlUrl":"PlayableData/AN_美女被困/index.html","TextObjStr":{"TopText":"引导点击人物|引导下棋|无","MiddText":"无|无|无","CentText":"获得钥匙商店|获得鸡腿商店|胜利失败"}},{"Name":"AN_解开锁链","OldSlectType":"1|3|1","HtmlUrl":"PlayableData/AN_解开锁链/index.html","TextObjStr":{"TopText":"引导点击人物|引导下棋|无","MiddText":"无|无|无","CentText":"第一把锁商店|第二把锁商店|全部锁胜利失败"}},{"Name":"GOG_DIY帆船","OldSlectType":"1|2|2","HtmlUrl":"PlayableData/GOG_DIY帆船/index.html","TextObjStr":{"TopText":"黑胡子|女海盗|铁面男","MiddText":"商店|结算|无","CentText":"只选船舵|全部选择|无"}},{"Name":"GOG_DIY飞艇","OldSlectType":"2|2|2","HtmlUrl":"PlayableData/GOG_DIY飞艇/index.html","TextObjStr":{"TopText":"黑胡子|美人鱼|无立绘","MiddText":"商店|结算|无","CentText":"只选飞艇|全部选择|无"}},{"Name":"GOG_抢滩登陆","OldSlectType":"1|1|1","HtmlUrl":"PlayableData/GOG_抢滩登陆/index.html","TextObjStr":{"TopText":"有立绘|无立绘|无","MiddText":"胜利失败|跳转商店|无","CentText":"第二关|第一关|无"}},{"Name":"GOG_潜入营救","OldSlectType":"2|1|2","HtmlUrl":"PlayableData/GOG_潜入营救/index.html","TextObjStr":{"TopText":"立辉|无立辉|无","MiddText":"结算|商店|无","CentText":"胜利失败|杀一层|杀二层"}},{"Name":"GOG_船舱杀敌","OldSlectType":"1|1|1","HtmlUrl":"PlayableData/GOG_船舱杀敌/index.html","TextObjStr":{"TopText":"无|无|无","MiddText":"无|无|无","CentText":"无|无|无"}},{"Name":"KOA_救治组装","OldSlectType":"1|1|1","HtmlUrl":"PlayableData/KOA_救治组装/index.html","TextObjStr":{"TopText":"无|无|无","MiddText":"无|无|无","CentText":"无|无|无"}},{"Name":"SS_页游换装备","OldSlectType":"2|1|1","HtmlUrl":"PlayableData/SS_页游换装备/index.html","TextObjStr":{"TopText":"无|无|无","MiddText":"无|无|无","CentText":"无|无|无"}}]
 
 function App() {
   var [mode, setMode] = useState("normal")
   var [projects, setProjects] = useState([])
-  var [selectedProject, setSelectedProject] = useState()
+  var [selectedProject, setSelectedProject] = useState({})
+  var [device, setDevice] = useState('android-h')
 
   Promise.resolve().then(() => {
     setProjects(mockProjects)
   })
 
+  var htmlUrl = useMemo(() => selectedProject ? selectedProject.HtmlUrl : '', [selectedProject])
+
+  // fetch('http://123.56.161.61:1157/home/GetServerJsonData').then((v) => console.log(v))
+
   return (
     <div className="App">
       <Pane
         mode={mode}
         onModeChange={(_mode) => setMode(_mode) }
         projects={projects}
-        onProjectSelect={(project) => setSelectedProject(project)}/>
+        onProjectSelect={(project) => {
+          console.log('xxx', project)
+          setSelectedProject(project)
+        }}
+        onDeviceChange={(_device) => setDevice(_device)}/>
+      <div style={{
+        display: 'flex',
+        flex: 1,
+        alignItems: 'center',
+        backgroundImage: `url('${waterMarkPng}')`,
+        backgroundPositionX: 'right',
+        backgroundPositionY: 'bottom',
+        backgroundRepeat: 'no-repeat'
+      }}>
       {
         mode === "normal"
         ? <DeviceFrame
-            htmlUrl={selectedProject ? selectedProject.HtmlUrl : ''}/>
+            htmlUrl={htmlUrl}
+            device={device}/>
         : <div>setting content</div>
       }
+      </div>
     </div>
   );
 }

src/Components/deviceFrame/index.js

@@ -1,14 +1,96 @@
 import './index.css'
+import androidHPng from '../../images/android-h.png'
+import androidVPng from '../../images/android-v.png'
+import iphoneHPng from '../../images/iphone-h.png'
+import iphoneVPng from '../../images/iphone-v.png'
+import ipadHPng from '../../images/iPad-h.png'
+import ipadVPng from '../../images/iPad-v.png'
+import refreshButtonPng from '../../images/refresh-button.png'
+import { useEffect, useState } from 'react'
 
 var baseUrl = "http://123.56.161.61:1157/"
+var configMap = {
+    "android-h": {
+        bkg: androidHPng,
+        width: '512px',
+        height: '286px'
+    },
+    "android-v": {
+        bkg: androidVPng,
+        width: '286px',
+        height: '512px'
+    },
+    "iphone-h": {
+        bkg: iphoneHPng,
+        width: '628px',
+        height: '322px'
+    },
+    "iphone-v": {
+        bkg: iphoneVPng,
+        width: '322px',
+        height: '628px'
+    },
+    "ipad-h": {
+        bkg: ipadHPng,
+        width: '433px',
+        height: '324px'
+    },
+    "ipad-v": {
+        bkg: ipadVPng,
+        width: '324px',
+        height: '433px'
+    },
+}
 
 function DeviceFrame(props) {
+    var [config, setConfig] = useState({})
+    var [iframeKey, setIframeKey] = useState(100000);
+
+    useEffect(() => {
+        setConfig(configMap[props.device])
+        console.log(props.device, config)
+    }, [props.device, config])
+
+    var refresh = () => setIframeKey(Math.round(Math.random() * 10000));
+
+    useEffect(() => {
+        refresh()
+    }, [props.htmlUrl])
+
+
     return (
-        <div>
-            hello, {props.htmlUrl}
-        {
-            props.htmlUrl && <iframe title='preview' src={baseUrl + props.htmlUrl}/>
-        }
+        <div style={{
+            width: '100%',
+            flex: 1,
+            alignItems: 'center',
+            position: 'relative'
+        }}>
+            <img src={refreshButtonPng} alt='refresh' onClick={() => refresh()} style={{
+                position: 'absolute',
+                left: '20px',
+                bottom: '20px',
+                cursor: 'pointer'
+            }}/>
+            <div>
+                <img src={config.bkg} alt='background'/>
+            {
+                props.htmlUrl
+                && <iframe
+                    key={iframeKey}
+                    id='deviceFrame'
+                    style={{
+                        position: 'absolute',
+                        top: '50%',
+                        left: '50%',
+                        transform: 'translate(-50%, -50%)'
+                    }}
+                    title='preview'
+                    src={baseUrl + props.htmlUrl}
+                    width={config.width}
+                    height={config.height}
+                    frameBorder={'0'}/>
+            }
+            </div>
         </div>
     )
 }

src/Components/pane/index.css

@@ -1,7 +1,7 @@
 .Pane {
     width: 25vw;
     min-width: 200px;
-    background-color: blue;
+    background-color: rgb(52, 90, 176);
     height: 100vh;
 }
 

src/Components/pane/index.js

@@ -23,8 +23,8 @@ var deviceConfigs = [
   {
     name: 'iPad',
     icon: ipadPng,
-    vertical: 'iPad-v',
-    horizental: 'iPad-h'
+    vertical: 'ipad-v',
+    horizental: 'ipad-h'
   },
 ];
 
@@ -47,7 +47,7 @@ function Pane(props) {
   var projectSelect = (e) => {
     var projectName = e.target.value
     setProject(projectName)
-    var projectObj = props.projects.find((p) => p.Name = projectName)
+    var projectObj = props.projects.find((p) => p.Name === projectName)
     props.onProjectSelect(projectObj)
   }
 
@@ -64,7 +64,9 @@ function Pane(props) {
         sx={{
           width: '100%',
           border: 'none',
-          background: 'white'
+          background: 'rgb(69, 115, 191)',
+          color: 'white',
+          fontWeight: 'bold'
         }}
         >
         <MenuItem value={'normal'}>Normal Preview</MenuItem>
@@ -76,7 +78,8 @@ function Pane(props) {
             <ListItem
               key={_device.name}
               sx={{
-              display: 'flex'
+                display: 'flex',
+                alignItems: 'center'
             }}>
               <img className='deviceIcon' src={_device.icon} alt={_device.name}/>
               <div className='deviceContent'>
@@ -84,7 +87,10 @@ function Pane(props) {
                 <div className='deviceButtons'>
                   <Chip label='横屏'
                     onClick={() => deviceChange(_device.horizental)}
-                    color={ device === _device.horizental ? 'success' : 'default'}/>
+                    color={ device === _device.horizental ? 'success' : 'default'}
+                    sx={{
+                      marginRight: '10px'
+                    }}/>
                   <Chip label='竖屏'
                     onClick={() => deviceChange(_device.vertical)}
                     color={ device === _device.vertical ? 'success' : 'default'}/>
@@ -101,9 +107,15 @@ function Pane(props) {
               value={project}
               onChange={(e) => projectSelect(e)}
               placeholder='选择项目'
+              sx={{
+                background: 'rgb(115, 158, 211)',
+                marginTop: '50px',
+                width: '80%',
+                color: 'white'
+              }}
               >
               {
-                props.projects.map(p => <MenuItem value={p.Name}>{p.Name}</MenuItem>)
+                props.projects.map((p, i) => <MenuItem key={i} value={p.Name}>{p.Name}</MenuItem>)
               }
             </Select>
           }