add copy

package-lock.json

@@ -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",

package.json

@@ -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"

src/App.js

@@ -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));
   }

src/Components/deviceFrame/index.js

@@ -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'/>
                 {

src/Components/settingsFrame/index.js

@@ -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';
 

src/constants.js

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