master
Aaron Yu 2022-01-21 22:19:18 +08:00
parent 895ba56ed7
commit 13dbe2c784
7 changed files with 81 additions and 8 deletions

55
package-lock.json generated
View File

@ -3856,6 +3856,16 @@
"resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
"integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A=="
},
"clipboard": {
"version": "2.0.8",
"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz",
"integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==",
"requires": {
"good-listener": "^1.2.2",
"select": "^1.1.2",
"tiny-emitter": "^2.0.0"
}
},
"cliui": {
"version": "7.0.4",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
@ -4032,6 +4042,14 @@
"resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
"integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
},
"copy-to-clipboard": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz",
"integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==",
"requires": {
"toggle-selection": "^1.0.6"
}
},
"core-js": {
"version": "3.20.0",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.20.0.tgz",
@ -4475,6 +4493,11 @@
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
},
"delegate": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
},
"depd": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@ -5920,6 +5943,14 @@
}
}
},
"good-listener": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
"integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
"requires": {
"delegate": "^3.1.2"
}
},
"graceful-fs": {
"version": "4.2.8",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz",
@ -9731,6 +9762,15 @@
"whatwg-fetch": "^3.6.2"
}
},
"react-copy-to-clipboard": {
"version": "5.0.4",
"resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.4.tgz",
"integrity": "sha512-IeVAiNVKjSPeGax/Gmkqfa/+PuMTBhutEvFUaMQLwE2tS0EXrAdgOpWDX26bWTXF3HrioorR7lr08NqeYUWQCQ==",
"requires": {
"copy-to-clipboard": "^3",
"prop-types": "^15.5.8"
}
},
"react-dev-utils": {
"version": "12.0.0",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz",
@ -10311,6 +10351,11 @@
"ajv-keywords": "^3.5.2"
}
},
"select": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
"integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
},
"select-hose": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@ -11021,6 +11066,11 @@
"resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
},
"tiny-emitter": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
},
"tmp": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
@ -11047,6 +11097,11 @@
"is-number": "^7.0.0"
}
},
"toggle-selection": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
"integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
},
"toidentifier": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",

View File

@ -13,6 +13,7 @@
"axios": "^0.24.0",
"qrcode": "^1.5.0",
"react": "^17.0.2",
"react-copy-to-clipboard": "^5.0.4",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.2"

View File

@ -5,8 +5,8 @@ import waterMarkPng from './images/water-mark.png'
import React from 'react';
import SettingFrame from './Components/settingsFrame';
import QrCode from 'qrcode'
import { BaseUrl } from './constants';
var baseUrl = "http://123.56.161.61:1157/"
var project = "topwar";
class App extends React.Component {
constructor() {
@ -28,7 +28,7 @@ class App extends React.Component {
refreshQrCode() {
var {selectedProject} = this.state;
var rawUrl = encodeURI(baseUrl + selectedProject.HtmlUrl)
var rawUrl = encodeURI(BaseUrl + selectedProject.HtmlUrl)
selectedProject.HtmlUrl && QrCode.toDataURL([{ data: rawUrl, mode: 'byte'}], { width: 120 })
.then((dataUrl) => {
this.setState({
@ -71,8 +71,8 @@ class App extends React.Component {
async fetchProjects() {
var url = project
? `http://123.56.161.61:1157/home/GetServerProjectJsonData?project=${project}`
: 'http://123.56.161.61:1157/home/GetServerJsonData';
? `${BaseUrl}home/GetServerProjectJsonData?project=${project}`
: `${BaseUrl}home/GetServerJsonData`;
var response = await fetch(url, {
headers: {
'Content-Type': 'application/json'
@ -104,7 +104,7 @@ class App extends React.Component {
fileName: this.state.selectedProject.Name,
};
var query = Object.keys(body).map(k => `${k}=${body[k]}`).join('&')
fetch(`http://123.56.161.61:1157/home/UpdateFileContentNew?${query}`)
fetch(`${BaseUrl}home/UpdateFileContentNew?${query}`)
.then(() => this.refreshProject())
.catch(e => console.log('update fails', e));
}

View File

@ -5,8 +5,12 @@ 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 copyPng from '../../images/copy.png'
import refreshButtonPng from '../../images/refresh-button.png'
import { useEffect, useState } from 'react'
import {CopyToClipboard} from 'react-copy-to-clipboard';
import React, { createRef, useEffect, useState } from 'react'
import { BaseUrl } from '../../constants'
import { Alert, Snackbar } from '@mui/material'
var baseUrl = "http://123.56.161.61:1157/"
var configMap = {
@ -49,6 +53,7 @@ var configMap = {
function DeviceFrame(props) {
var [config, setConfig] = useState({})
var [cacheKey, setCacheKey] = useState(new Date().getTime());
var [openPopup, setOpenPopup] = useState(false);
useEffect(() => {
setConfig(configMap[props.device])
@ -67,10 +72,22 @@ function DeviceFrame(props) {
<img src={refreshButtonPng} alt='refresh' onClick={() => refresh()} className='refreshButton'/>
{ props.qrDataUrl &&
<div className='qrCode'>
<p style={{ margin: '0' }}>扫一扫,手机预览</p>
<p style={{ margin: '0' }}>扫一扫,手机预览
<CopyToClipboard text={BaseUrl + props.htmlUrl} onCopy={() => setOpenPopup(true)}>
<img style={{ cursor: 'pointer', width: '20px', height: '20px' }} src={copyPng} alt='复制链接'/>
</CopyToClipboard>
</p>
<img src={props.qrDataUrl} alt='qr code'/>
</div>
}
<Snackbar open={openPopup} onClose={() => setOpenPopup(false)} autoHideDuration={500} anchorOrigin={{
vertical: 'top',
horizontal: 'right'
}}>
<Alert severity="success" sx={{ width: '100%' }}>
链接复制成功
</Alert>
</Snackbar>
<div>
<img src={config.bkg} alt='background'/>
{

View File

@ -1,7 +1,6 @@
import { Alert, Grid, List, ListItem, Snackbar } from '@mui/material';
import { useEffect, useState } from 'react'
import './index.css'
import settingCardPng from '../../images/setting-card.png';
import checkPng from '../../images/check.png';
import generateButtonPng from '../../images/generate-button.png';

1
src/constants.js 100644
View File

@ -0,0 +1 @@
export var BaseUrl = "http://123.56.161.61:1157/";

BIN
src/images/copy.png 100644

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB