yityu
/
playable-preview
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add qrcode

master
Aaron Yu 2021-12-25 01:17:45 +08:00
parent ae94e98ecf
commit f8ddb87499
7 changed files with 237 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

159
package-lock.json generated
View File

@ -4386,6 +4386,11 @@
"ms": "2.1.2"
}
},
"decamelize": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
"integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
},
"decimal.js": {
"version": "10.3.1",
"resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.3.1.tgz",
@ -4534,6 +4539,11 @@
"resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.4.0.tgz",
"integrity": "sha512-YqiQzkrsmHMH5uuh8OdQFU9/ZpADnwzml8z0O5HvRNda+5UZsaX/xN+AAxfR2hWq1Y7HZnAzO9J5lJXOuDz2Ww=="
},
"dijkstrajs": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.2.tgz",
"integrity": "sha512-QV6PMaHTCNmKSeP6QoXhVTw9snc9VD8MulTT0Bd99Pacp4SS1cjcrYPgBPmibqKVtMJJfqC6XvOXgPMEEPH/fg=="
},
"dir-glob": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@ -4723,6 +4733,11 @@
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q=="
},
"encode-utf8": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/encode-utf8/-/encode-utf8-1.0.3.tgz",
"integrity": "sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw=="
},
"encodeurl": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
@ -8733,6 +8748,11 @@
}
}
},
"pngjs": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
"integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw=="
},
"portfinder": {
"version": "1.0.28",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@ -9506,6 +9526,130 @@
"resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
"integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc="
},
"qrcode": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.0.tgz",
"integrity": "sha512-9MgRpgVc+/+47dFvQeD6U2s0Z92EsKzcHogtum4QB+UNd025WOJSHvn/hjk9xmzj7Stj95CyUAs31mrjxliEsQ==",
"requires": {
"dijkstrajs": "^1.0.1",
"encode-utf8": "^1.0.3",
"pngjs": "^5.0.0",
"yargs": "^15.3.1"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"requires": {
"color-convert": "^2.0.1"
}
},
"camelcase": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
},
"cliui": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
"integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
"requires": {
"string-width": "^4.2.0",
"strip-ansi": "^6.0.0",
"wrap-ansi": "^6.2.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
},
"find-up": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
"requires": {
"locate-path": "^5.0.0",
"path-exists": "^4.0.0"
}
},
"locate-path": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
"requires": {
"p-locate": "^4.1.0"
}
},
"p-limit": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
"requires": {
"p-try": "^2.0.0"
}
},
"p-locate": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
"requires": {
"p-limit": "^2.2.0"
}
},
"wrap-ansi": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
"integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
"requires": {
"ansi-styles": "^4.0.0",
"string-width": "^4.1.0",
"strip-ansi": "^6.0.0"
}
},
"y18n": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
"integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
},
"yargs": {
"version": "15.4.1",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
"integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
"requires": {
"cliui": "^6.0.0",
"decamelize": "^1.2.0",
"find-up": "^4.1.0",
"get-caller-file": "^2.0.1",
"require-directory": "^2.1.1",
"require-main-filename": "^2.0.0",
"set-blocking": "^2.0.0",
"string-width": "^4.2.0",
"which-module": "^2.0.0",
"y18n": "^4.0.0",
"yargs-parser": "^18.1.2"
}
},
"yargs-parser": {
"version": "18.1.3",
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
"integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
"requires": {
"camelcase": "^5.0.0",
"decamelize": "^1.2.0"
}
}
}
},
"qs": {
"version": "6.9.6",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.9.6.tgz",
@ -9956,6 +10100,11 @@
"resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
"integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw=="
},
"require-main-filename": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
"integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
},
"requires-port": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@ -10294,6 +10443,11 @@
"send": "0.17.2"
}
},
"set-blocking": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
"integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
},
"setprototypeof": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@ -11474,6 +11628,11 @@
"is-symbol": "^1.0.3"
}
},
"which-module": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
"integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
},
"word-wrap": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",

1
package.json
View File

@ -11,6 +11,7 @@
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.24.0",
"qrcode": "^1.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",

34
src/App.js
View File

@ -4,7 +4,10 @@ import DeviceFrame from './Components/deviceFrame';
import waterMarkPng from './images/water-mark.png'
import React from 'react';
import SettingFrame from './Components/settingsFrame';
import QrCode from 'qrcode'
import toSJIS from 'qrcode/helper/to-sjis'
var baseUrl = "http://123.56.161.61:1157/"
class App extends React.Component {
constructor() {
super();
@ -13,11 +16,25 @@ class App extends React.Component {
projects: [],
selectedProject: {},
device: 'android-h',
htmlUrl: ''
htmlUrl: '',
dataUrl: '',
loading: false
}
}
componentDidMount() {
this.fetchData();
this.refreshQrCode()
}
refreshQrCode() {
var {selectedProject} = this.state;
var rawUrl = encodeURI(baseUrl + selectedProject.HtmlUrl)
selectedProject.HtmlUrl && QrCode.toDataURL([{ data: rawUrl, mode: 'byte'}], { width: 120 })
.then((dataUrl) => {
this.setState({
dataUrl: dataUrl
})
})
}
setSelectedProject(selected) {
@ -39,6 +56,9 @@ class App extends React.Component {
}
async fetchData() {
this.setState({
loading: true
})
var response = await fetch('http://123.56.161.61:1157/home/GetServerJsonData', {
headers: {
'Content-Type': 'application/json'
@ -47,8 +67,10 @@ class App extends React.Component {
var projects = await response.json();
this.setState({
projects,
selectedProject: projects[0]
})
selectedProject: projects[0],
loading: false
});
this.refreshQrCode()
}
UpdateSetting(obj) {
@ -65,7 +87,7 @@ class App extends React.Component {
}
render() {
var { mode, device, projects, selectedProject } = this.state;
var { mode, device, projects, selectedProject, dataUrl, loading } = this.state;
return (
<div className="App">
@ -74,6 +96,7 @@ class App extends React.Component {
onModeChange={(_mode) => this.setMode(_mode) }
projects={projects}
device={device}
loading={loading}
onProjectSelect={(project) => {
this.setSelectedProject(project)
}}
@ -91,7 +114,8 @@ class App extends React.Component {
mode === "normal"
? <DeviceFrame
htmlUrl={selectedProject.HtmlUrl}
device={device}/>
device={device}
qrDataUrl={dataUrl}/>
: <SettingFrame
setting={selectedProject.TextObjStr}
settingValue={selectedProject.OldSlectType ? selectedProject.OldSlectType.split('|').map(v => +v) : [1, 1, 1]}

13
src/Components/deviceFrame/index.css
View File

@ -8,3 +8,16 @@
justify-content: center;
overflow: hidden;
}
.refreshButton {
position: absolute;
left: 30px;
bottom: 30px;
cursor: pointer;
}
.qrCode {
position: absolute;
right: 30px;
top: 30px;
}

13
src/Components/deviceFrame/index.js
View File

@ -60,12 +60,13 @@ function DeviceFrame(props) {
return (
<div className='deviceFrameContainer'>
<img src={refreshButtonPng} alt='refresh' onClick={() => refresh()} style={{
position: 'absolute',
left: '30px',
bottom: '30px',
cursor: 'pointer'
}}/>
<img src={refreshButtonPng} alt='refresh' onClick={() => refresh()} className='refreshButton'/>
{ props.qrDataUrl &&
<div className='qrCode'>
<p style={{ margin: '0' }}>扫一扫,手机预览</p>
<img src={props.qrDataUrl} alt='qr code'/>
</div>
}
<div>
<img src={config.bkg} alt='background'/>
{

2
src/Components/pane/index.css
View File

@ -1,5 +1,5 @@
.Pane {
width: 30vw;
width: 350px;
background-color: rgb(52, 90, 176);
min-height: 100vh;
}

15
src/Components/pane/index.js
View File

@ -2,7 +2,7 @@ import './index.css';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem'
import { useEffect, useState } from 'react';
import { Chip, List, ListItem } from '@mui/material';
import { Chip, CircularProgress, List, ListItem } from '@mui/material';
import ipadPng from '../../images/ipad.png'
import iphonePng from '../../images/iphone.png'
import androidPng from '../../images/android.png'
@ -102,17 +102,22 @@ function Pane(props) {
</ListItem>)
}
</List>
<div>
<div style={{
marginTop: '50px',
color: 'white'
}}>
{
project &&
<Select
props.loading
?
<CircularProgress color='inherit'/>
:
project && <Select
id="project-select"
value={project}
onChange={(e) => projectSelect(e)}
placeholder='选择项目'
sx={{
background: 'rgb(115, 158, 211)',
marginTop: '50px',
width: '80%',
color: 'white'
}}