normal preview

master
Aaron Yu 2021-12-23 00:39:49 +08:00
parent 4f22dd2313
commit 6476a63faf
10 changed files with 132 additions and 17 deletions

View File

@ -1,33 +1,54 @@
import { useState } from 'react'; import { useMemo, useState } from 'react';
import './App.css'; import './App.css';
import Pane from './Components/pane'; import Pane from './Components/pane';
import DeviceFrame from './Components/deviceFrame'; 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":"无|无|无"}}] 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() { function App() {
var [mode, setMode] = useState("normal") var [mode, setMode] = useState("normal")
var [projects, setProjects] = useState([]) var [projects, setProjects] = useState([])
var [selectedProject, setSelectedProject] = useState() var [selectedProject, setSelectedProject] = useState({})
var [device, setDevice] = useState('android-h')
Promise.resolve().then(() => { Promise.resolve().then(() => {
setProjects(mockProjects) setProjects(mockProjects)
}) })
var htmlUrl = useMemo(() => selectedProject ? selectedProject.HtmlUrl : '', [selectedProject])
// fetch('http://123.56.161.61:1157/home/GetServerJsonData').then((v) => console.log(v))
return ( return (
<div className="App"> <div className="App">
<Pane <Pane
mode={mode} mode={mode}
onModeChange={(_mode) => setMode(_mode) } onModeChange={(_mode) => setMode(_mode) }
projects={projects} 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" mode === "normal"
? <DeviceFrame ? <DeviceFrame
htmlUrl={selectedProject ? selectedProject.HtmlUrl : ''}/> htmlUrl={htmlUrl}
device={device}/>
: <div>setting content</div> : <div>setting content</div>
} }
</div> </div>
</div>
); );
} }

View File

@ -1,15 +1,97 @@
import './index.css' 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 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) { 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 ( return (
<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> <div>
hello, {props.htmlUrl} <img src={config.bkg} alt='background'/>
{ {
props.htmlUrl && <iframe title='preview' src={baseUrl + props.htmlUrl}/> 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>
</div>
) )
} }

View File

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

View File

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

View File

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

View File

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

View File

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

View File

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB