master
Aaron Yu 2021-12-22 19:39:23 +08:00
parent f4b81d3fd4
commit 4f22dd2313
13 changed files with 75 additions and 23 deletions

8
package-lock.json generated
View File

@ -3312,6 +3312,14 @@
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.3.5.tgz", "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.3.5.tgz",
"integrity": "sha512-WKTW1+xAzhMS5dJsxWkliixlO/PqC4VhmO9T4juNYcaTg9jzWiJsou6m5pxWYGfigWbwzJWeFY6z47a+4neRXA==" "integrity": "sha512-WKTW1+xAzhMS5dJsxWkliixlO/PqC4VhmO9T4juNYcaTg9jzWiJsou6m5pxWYGfigWbwzJWeFY6z47a+4neRXA=="
}, },
"axios": {
"version": "0.24.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz",
"integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==",
"requires": {
"follow-redirects": "^1.14.4"
}
},
"axobject-query": { "axobject-query": {
"version": "2.2.0", "version": "2.2.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",

View File

@ -9,6 +9,7 @@
"@testing-library/jest-dom": "^5.16.1", "@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2", "@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"axios": "^0.24.0",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-scripts": "5.0.0", "react-scripts": "5.0.0",

View File

@ -1,5 +1,6 @@
.App { .App {
text-align: center; text-align: center;
display: flex;
} }
.App-logo { .App-logo {

View File

@ -1,28 +1,30 @@
import { useState } from 'react'; import { useState } from 'react';
import './App.css'; import './App.css';
import Pane from './Components/pane'; import Pane from './Components/pane';
import DeviceFrame from './Components/deviceFrame';
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()
fetch('http://123.56.161.61:1157/home/GetServerJsonData', { Promise.resolve().then(() => {
method: 'GET', setProjects(mockProjects)
mode: 'no-cors',
cache: 'no-cache',
headers: new Headers({'content-type': 'application/json'}),
}).then((t) => {
console.log(t, t.json())
// setProjects(value)
}) })
return ( return (
<div className="App"> <div className="App">
<Pane <Pane
mode={mode} mode={mode}
onModeChange={(_mode) => setMode(_mode) }/> onModeChange={(_mode) => setMode(_mode) }
projects={projects}
onProjectSelect={(project) => setSelectedProject(project)}/>
{ {
mode === "normal" mode === "normal"
? <div>media content</div> ? <DeviceFrame
htmlUrl={selectedProject ? selectedProject.HtmlUrl : ''}/>
: <div>setting content</div> : <div>setting content</div>
} }
</div> </div>

View File

@ -0,0 +1,16 @@
import './index.css'
var baseUrl = "http://123.56.161.61:1157/"
function DeviceFrame(props) {
return (
<div>
hello, {props.htmlUrl}
{
props.htmlUrl && <iframe title='preview' src={baseUrl + props.htmlUrl}/>
}
</div>
)
}
export default DeviceFrame;

View File

@ -1,7 +1,7 @@
import './index.css'; import './index.css';
import Select from '@mui/material/Select'; import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem' import MenuItem from '@mui/material/MenuItem'
import { useState } from 'react'; import { useEffect, useState } from 'react';
import { Chip, List, ListItem } from '@mui/material'; import { Chip, List, ListItem } from '@mui/material';
import ipadPng from '../../images/ipad.png' import ipadPng from '../../images/ipad.png'
import iphonePng from '../../images/iphone.png' import iphonePng from '../../images/iphone.png'
@ -31,6 +31,7 @@ var deviceConfigs = [
function Pane(props) { function Pane(props) {
var [mode, setMode] = useState(props.mode); var [mode, setMode] = useState(props.mode);
var [device, setDevice] = useState(props.device) var [device, setDevice] = useState(props.device)
var [project, setProject] = useState(props.project)
var modeChange = (e) => { var modeChange = (e) => {
var _mode = e.target.value; var _mode = e.target.value;
@ -43,6 +44,17 @@ function Pane(props) {
props.onDeviceChange(_device) props.onDeviceChange(_device)
}; };
var projectSelect = (e) => {
var projectName = e.target.value
setProject(projectName)
var projectObj = props.projects.find((p) => p.Name = projectName)
props.onProjectSelect(projectObj)
}
useEffect(() => {
props.projects.length && setProject(props.projects[0].Name);
}, [props.projects])
return ( return (
<div className="Pane"> <div className="Pane">
<Select <Select
@ -82,7 +94,19 @@ function Pane(props) {
} }
</List> </List>
<div> <div>
{
project &&
<Select
id="project-select"
value={project}
onChange={(e) => projectSelect(e)}
placeholder='选择项目'
>
{
props.projects.map(p => <MenuItem value={p.Name}>{p.Name}</MenuItem>)
}
</Select>
}
</div> </div>
</div> </div>
); );

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB